/* Better Canvas currently uses Obsidian's native modal and setting styles. */
.better-canvas-presentation {
  min-width: min(680px, 80vw);
}
.better-canvas-presentation .better-canvas-slide {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 10rem;
  padding: 1rem;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-secondary);
}
textarea.bc-modal-prompt-textarea {
  width: 100%;
  resize: vertical;
}
.bc-export-html-preview-label {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed var(--background-modifier-border);
  background: transparent;
  font-size: 12px;
  opacity: .75;
}
.bc-soft-geometry {
  position: absolute;
  pointer-events: none;
}
.bc-arrow-hidden {
  display: none;
}
.bc-export-host {
  position: fixed;
  left: -100000px;
  top: 0;
  pointer-events: none;
}
.bc-soft-export-clone {
  position: relative;
  inset: 0;
}
.bc-pinned-pdf-page-rendered {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}
.bc-pdf-annotation-overlay.bc-pdf-annotation-page-aligned {
  inset: auto;
}
.bc-media-embed-image {
  display: block;
  max-width: 100%;
  max-height: 28rem;
  object-fit: contain;
}
.bc-media-embed-audio,
.bc-media-embed-video {
  max-width: 100%;
}

/* Better Canvas persisted node/edge enhancements.

   Shapes and border styles target .canvas-node-container: Obsidian paints the
   card (background, border, radius, shadow) on the container and .canvas-node
   is only the positioning anchor, so styling the anchor leaves the visible
   card untouched. */
.canvas-node[data-bc-shape] {
  /* Fully transparent mask, used when a shape defines no outline ring. */
  --bc-ring-off: linear-gradient(transparent, transparent);
}
/* Node alignment is inherited from one custom property; theme rules can refine
   it without competing with inline text-align on the card and its children. */
.canvas-node[data-bc-text-align],
.canvas-node[data-bc-text-align] :is(.canvas-node-content, .canvas-node-container, .canvas-node-iframe) {
  text-align: var(--bc-node-text-align, left);
}
.canvas-node[data-bc-auto-resize="true"] .canvas-node-content .markdown-preview-view > .markdown-preview-sizer {
  flex: 0 0 auto;
  margin-block: auto;
}
.canvas-node[data-bc-auto-resize="true"] .canvas-node-content .markdown-preview-view::before,
.canvas-node[data-bc-auto-resize="true"] .canvas-node-content .markdown-preview-view::after {
  min-height: 8px;
  max-height: 8px;
  flex: 0 0 8px;
}
.canvas-node[data-bc-auto-resize="true"] .markdown-rendered {
  overflow-wrap: anywhere;
}

/* Modern card treatment: a soft tint of the node colour inside a low-contrast
   border, instead of a saturated outline around a plain white card. Better
   Canvas decorates every Canvas node, so this is the default look; a node
   without a colour keeps the neutral surface. */
.canvas-node[data-bc-shape] .canvas-node-container {
  border-color: var(--bc-node-border-color, color-mix(in oklab, var(--canvas-color, var(--text-muted)) 30%, var(--background-modifier-border)));
  background-color: color-mix(in oklab, var(--canvas-color, var(--text-muted)) 9%, var(--background-primary));
  box-shadow:
    0 1px 2px rgb(0 0 0 / 5%),
    0 8px 22px -14px rgb(0 0 0 / 22%);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.canvas-node[data-bc-shape]:not(.is-themed) .canvas-node-container {
  border-color: var(--bc-node-border-color, var(--background-modifier-border));
  background-color: var(--background-primary);
}
.canvas-node[data-bc-shape] .canvas-node-content {
  /* The container already carries the tint; avoid stacking a second layer. */
  background-color: transparent;
}
.canvas-node[data-bc-shape].is-focused .canvas-node-container,
.canvas-node[data-bc-shape].is-selected .canvas-node-container,
.canvas-node[data-bc-shape].is-editing .canvas-node-container {
  border-color: var(--bc-node-border-color, color-mix(in oklab, var(--color-accent) 65%, var(--background-modifier-border)));
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--color-accent) 16%, transparent),
    0 10px 26px -14px rgb(0 0 0 / 26%);
}
.canvas-node[data-bc-shape="default"] .canvas-node-container {
  border-radius: 10px;
}
.canvas-node[data-bc-shape="square"] .canvas-node-container {
  border-radius: 0;
}
.canvas-node[data-bc-shape="pill"] .canvas-node-container,
.canvas-node[data-bc-shape="terminal"] .canvas-node-container {
  border-radius: 999px;
}
.canvas-node[data-bc-shape="circle"] .canvas-node-container,
.canvas-node[data-bc-shape="ellipse"] .canvas-node-container,
.canvas-node[data-bc-shape="reference"] .canvas-node-container {
  border-radius: 50%;
}
.canvas-node[data-bc-shape="database"] .canvas-node-container {
  border-radius: 50% / 12%;
}
.canvas-node[data-bc-shape="predefined-process"] .canvas-node-container {
  --bc-node-side-border-width: 4px;
  --bc-node-side-border-style: double;
  border-left-width: 4px;
  border-left-style: var(--bc-node-border-style, double);
  border-right-width: 4px;
  border-right-style: var(--bc-node-border-style, double);
}
/* Explicit border metadata feeds both the default card and themed borders. */
.canvas-node[data-bc-border="dashed"] { --bc-node-border-style: dashed; }
.canvas-node[data-bc-border="dotted"] { --bc-node-border-style: dotted; }
.canvas-node[data-bc-border="double"] { --bc-node-border-style: double; }
.canvas-node[data-bc-border="invisible"],
.canvas-node[data-bc-border="none"] { --bc-node-border-color: transparent; }
.canvas-node:is([data-bc-border="dashed"], [data-bc-border="dotted"], [data-bc-border="double"]) .canvas-node-container {
  border-style: var(--bc-node-border-style);
}
/* A borderless card keeps the resting lift and the accent selection ring, so
   removing the border does not make it look pasted flat or unselected. */
.canvas-node[data-bc-border="invisible"] .canvas-node-container,
.canvas-node[data-bc-border="none"] .canvas-node-container {
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 8px 22px -14px rgb(0 0 0 / 22%);
}
.canvas-node[data-bc-border="invisible"].is-focused .canvas-node-container,
.canvas-node[data-bc-border="invisible"].is-selected .canvas-node-container,
.canvas-node[data-bc-border="invisible"].is-editing .canvas-node-container,
.canvas-node[data-bc-border="none"].is-focused .canvas-node-container,
.canvas-node[data-bc-border="none"].is-selected .canvas-node-container,
.canvas-node[data-bc-border="none"].is-editing .canvas-node-container {
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--color-accent) 16%, transparent),
    0 10px 26px -14px rgb(0 0 0 / 26%);
}

/* Polygon shapes. A rectangular border cannot follow a clip-path outline; it is
   cut into stubs, so the container border is hidden and the outline is stroked
   by the ::after ring below. */
.canvas-node[data-bc-shape="diamond"] .canvas-node-container,
.canvas-node[data-bc-shape="decision"] .canvas-node-container,
.canvas-node[data-bc-shape="parallelogram"] .canvas-node-container,
.canvas-node[data-bc-shape="input-output"] .canvas-node-container,
.canvas-node[data-bc-shape="hexagon"] .canvas-node-container,
.canvas-node[data-bc-shape="pentagon"] .canvas-node-container,
.canvas-node[data-bc-shape="octagon"] .canvas-node-container,
.canvas-node[data-bc-shape="triangle"] .canvas-node-container,
.canvas-node[data-bc-shape="trapezoid"] .canvas-node-container,
.canvas-node[data-bc-shape="chevron"] .canvas-node-container,
.canvas-node[data-bc-shape="right-arrow"] .canvas-node-container,
.canvas-node[data-bc-shape="cloud"] .canvas-node-container,
.canvas-node[data-bc-shape="document"] .canvas-node-container {
  border-radius: 0;
  --bc-node-border-color: transparent;
  border-color: var(--bc-node-border-color);
  /* Shared with the ring masks and the panel previews below. */
  /* CanIUse #2 concerns external SVG clips; this variable contains polygon(). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-shape-outline);
  /* doiuse-enable css-clip-path */
}

/* Shape constants shared by canvas nodes and the style panel previews: the
   outline clip and one white stroke mask per border style. The mask keeps only
   the outline and the ring background paints it, so the border follows the
   shape while dashed/dotted/double stay available. stroke-width 2 with
   non-scaling-stroke keeps the visible border at 1px on every edge. */
:is(
  .canvas-node[data-bc-shape="diamond"],
  .canvas-node[data-bc-shape="decision"],
  .bc-node-shape-preview.shape-diamond,
  .bc-node-style-preset-preview.shape-diamond
) {
  --bc-shape-outline: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,50 50,100 0,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,50 50,100 0,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,50 50,100 0,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
:is(
  .canvas-node[data-bc-shape="parallelogram"],
  .canvas-node[data-bc-shape="input-output"],
  .bc-node-shape-preview.shape-parallelogram
) {
  --bc-shape-outline: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='14,0 100,0 86,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='14,0 100,0 86,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='14,0 100,0 86,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
:is(
  .canvas-node[data-bc-shape="hexagon"],
  .bc-node-shape-preview.shape-hexagon,
  .bc-node-style-preset-preview.shape-hexagon
) {
  --bc-shape-outline: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 75,0 100,50 75,100 25,100 0,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 75,0 100,50 75,100 25,100 0,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 75,0 100,50 75,100 25,100 0,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.canvas-node[data-bc-shape="pentagon"] {
  --bc-shape-outline: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,38 82,100 18,100 0,38' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,38 82,100 18,100 0,38' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,38 82,100 18,100 0,38' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.canvas-node[data-bc-shape="octagon"] {
  --bc-shape-outline: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='28,0 72,0 100,28 100,72 72,100 28,100 0,72 0,28' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='28,0 72,0 100,28 100,72 72,100 28,100 0,72 0,28' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='28,0 72,0 100,28 100,72 72,100 28,100 0,72 0,28' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.canvas-node[data-bc-shape="triangle"] {
  --bc-shape-outline: polygon(50% 0, 100% 100%, 0 100%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.canvas-node[data-bc-shape="trapezoid"] {
  --bc-shape-outline: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='20,0 80,0 100,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='20,0 80,0 100,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='20,0 80,0 100,100 0,100' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.canvas-node[data-bc-shape="chevron"] {
  --bc-shape-outline: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%, 22% 50%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 78,0 100,50 78,100 0,100 22,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 78,0 100,50 78,100 0,100 22,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 78,0 100,50 78,100 0,100 22,50' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.canvas-node[data-bc-shape="cloud"] {
  --bc-shape-outline: polygon(22% 18%, 28% 5%, 44% 8%, 55% 2%, 69% 13%, 84% 11%, 94% 27%, 90% 43%, 100% 55%, 88% 72%, 84% 87%, 66% 91%, 53% 100%, 38% 91%, 22% 94%, 12% 78%, 0 70%, 7% 51%, 2% 35%, 12% 20%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='22,18 28,5 44,8 55,2 69,13 84,11 94,27 90,43 100,55 88,72 84,87 66,91 53,100 38,91 22,94 12,78 0,70 7,51 2,35 12,20' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='22,18 28,5 44,8 55,2 69,13 84,11 94,27 90,43 100,55 88,72 84,87 66,91 53,100 38,91 22,94 12,78 0,70 7,51 2,35 12,20' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='22,18 28,5 44,8 55,2 69,13 84,11 94,27 90,43 100,55 88,72 84,87 66,91 53,100 38,91 22,94 12,78 0,70 7,51 2,35 12,20' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}
:is(
  .canvas-node[data-bc-shape="document"],
  .bc-node-shape-preview.shape-document,
  .bc-node-style-preset-preview.shape-document
) {
  --bc-shape-outline: polygon(0 0, 100% 0, 100% 88%, 88% 94%, 74% 88%, 60% 94%, 46% 88%, 32% 94%, 16% 88%, 0 94%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,88 88,94 74,88 60,94 46,88 32,94 16,88 0,94' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,88 88,94 74,88 60,94 46,88 32,94 16,88 0,94' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,88 88,94 74,88 60,94 46,88 32,94 16,88 0,94' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Outline ring: paints the border along the outline of polygon shapes. The
   stroke is centred on the outline, so the ring keeps a 1px border inside the
   clip path and never grows the card. */
.canvas-node[data-bc-shape="diamond"]::after,
.canvas-node[data-bc-shape="decision"]::after,
.canvas-node[data-bc-shape="parallelogram"]::after,
.canvas-node[data-bc-shape="input-output"]::after,
.canvas-node[data-bc-shape="hexagon"]::after,
.canvas-node[data-bc-shape="pentagon"]::after,
.canvas-node[data-bc-shape="octagon"]::after,
.canvas-node[data-bc-shape="triangle"]::after,
.canvas-node[data-bc-shape="trapezoid"]::after,
.canvas-node[data-bc-shape="chevron"]::after,
.canvas-node[data-bc-shape="right-arrow"]::after,
.canvas-node[data-bc-shape="cloud"]::after,
.canvas-node[data-bc-shape="document"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--canvas-color);
  -webkit-mask-image: var(--bc-ring-solid, var(--bc-ring-off));
  mask-image: var(--bc-ring-solid, var(--bc-ring-off));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.canvas-node[data-bc-border="dashed"]::after {
  -webkit-mask-image: var(--bc-ring-dashed, var(--bc-ring-off));
  mask-image: var(--bc-ring-dashed, var(--bc-ring-off));
}
.canvas-node[data-bc-border="dotted"]::after {
  -webkit-mask-image: var(--bc-ring-dotted, var(--bc-ring-off));
  mask-image: var(--bc-ring-dotted, var(--bc-ring-off));
}
.canvas-node[data-bc-border="double"]::after {
  -webkit-mask-image: var(--bc-ring-solid, var(--bc-ring-off)), var(--bc-ring-solid, var(--bc-ring-off));
  mask-image: var(--bc-ring-solid, var(--bc-ring-off)), var(--bc-ring-solid, var(--bc-ring-off));
  -webkit-mask-size: 100% 100%, calc(100% - 6px) calc(100% - 6px);
  mask-size: 100% 100%, calc(100% - 6px) calc(100% - 6px);
  -webkit-mask-position: 0 0, 3px 3px;
  mask-position: 0 0, 3px 3px;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}
.canvas-node[data-bc-border="invisible"]::after,
.canvas-node[data-bc-border="none"]::after {
  display: none;
}
.canvas-node[data-bc-shape].is-themed::after {
  background-color: color-mix(in oklch, var(--canvas-color) 70%, transparent);
}
.canvas-node[data-bc-shape].is-selected::after,
.canvas-node[data-bc-shape].is-focused::after,
.canvas-node[data-bc-shape].is-dummy::after {
  background-color: var(--color-accent);
}
.canvas-node[data-bc-shape].is-themed.is-selected::after,
.canvas-node[data-bc-shape].is-themed.is-focused::after {
  background-color: var(--canvas-color);
}
.canvas-wrapper .canvas-node.bc-focus-dimmed {
  opacity: 0.12;
  filter: blur(0.5px);
  transition: opacity 100ms ease;
}
.canvas-wrapper .canvas-edges path.bc-focus-dimmed,
.canvas-wrapper.bc-focus-mode .canvas-edges path.bc-focus-dimmed {
  opacity: 0.1;
}
.better-canvas-node-embed {
  margin: 0.6rem 0;
  padding: 0.8rem;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-secondary);
}
.better-canvas-node-embed > :first-child {
  margin-top: 0;
}
.better-canvas-node-embed > :last-child {
  margin-bottom: 0;
}

/* Keep the background available for panning/zooming. Suppress node hit targets
   through inheritance so previews and PDF text can opt back into interaction. */
.canvas-wrapper.bc-readonly .canvas-node,
.canvas-wrapper.bc-readonly .canvas-edges,
.canvas-wrapper.bc-readonly .canvas-edges * {
  pointer-events: none;
}
.canvas-wrapper.bc-readonly .canvas-node {
  cursor: default;
}

/* Per-node zoom breakpoints: preserve node geometry while simplifying its content at low zoom. */
.canvas-wrapper .canvas-node[data-bc-breakpoint-hidden="true"] .canvas-node-content,
.canvas-wrapper .canvas-node[data-bc-breakpoint-hidden="true"] .canvas-node-iframe,
.canvas-wrapper .canvas-node[data-bc-breakpoint-hidden="true"] .canvas-node-container {
  visibility: hidden;
}

/* Pinned PDF page nodes render a stable page snapshot inside the Canvas card. */
.bc-pinned-pdf-embed-container {
  min-width: 0;
  overflow: hidden;
  background: var(--background-primary);
}
.bc-pinned-pdf-page {
  max-width: 100%;
  object-fit: contain;
}
.bc-pinned-pdf-page[data-loading="true"] {
  opacity: 0.45;
}
.bc-pinned-pdf-page[data-error="true"] {
  outline: 2px solid var(--color-red);
}
.bc-settings-root .bc-settings-number-error,
.bc-settings-provider-editor .bc-settings-number-error {
  display: block;
  color: var(--text-error);
  font-size: var(--font-smaller);
}
.bc-settings-root .bc-settings-number-error[hidden] {
  display: none;
}
.bc-settings-root input[aria-invalid="true"] {
  border-color: var(--text-error);
}

.bc-pinned-pdf-error {
  color: var(--text-error);
  padding: 0.5rem;
  font-size: var(--font-smaller);
}

/* Drawing layer for pinned PDF page annotations. */
.bc-pinned-pdf-embed-container {
  position: relative;
}
.bc-pdf-annotation-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.bc-pdf-annotation-overlay[data-draw-enabled="true"] {
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.bc-pdf-annotation-overlay path {
  pointer-events: none;
}
.bc-pdf-annotation-overlay .bc-pdf-annotation-preview {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
}

/* Selectable text extraction for pinned PDF pages. */
.bc-pdf-text-selection {
  margin-top: 0.45rem;
  border-top: 1px solid var(--background-modifier-border);
  padding-top: 0.35rem;
  font-size: var(--font-smaller);
}
.bc-pdf-text-selection > summary {
  cursor: pointer;
  color: var(--text-muted);
  user-select: none;
}
.bc-pdf-selectable-text {
  max-height: 9rem;
  overflow: auto;
  margin-top: 0.35rem;
  padding: 0.45rem;
  border-radius: var(--radius-s);
  background: var(--background-secondary);
  color: var(--text-normal);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  cursor: text;
}
.bc-pdf-create-excerpt,
.bc-pdf-highlight-selection {
  display: block;
  margin-top: 0.4rem;
  width: 100%;
}
.bc-pdf-create-excerpt:disabled,
.bc-pdf-highlight-selection:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Selectable, transparent text aligned over the pinned PDF page raster. */
.bc-pinned-pdf-embed-container {
  position: relative;
}
.bc-pdf-text-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.bc-pdf-text-layer .bc-pdf-selectable-text-run {
  position: absolute;
  display: block;
  color: transparent;
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
  white-space: pre;
  overflow: hidden;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  pointer-events: auto;
  transform-origin: top left;
}
.bc-pdf-selectable-text-run::selection {
  color: transparent;
  background: rgba(45, 125, 255, 0.32);
}

/* Canvas link/backlink explorer */
.bc-link-explorer-modal {
  width: min(900px, 90vw);
}
.bc-link-explorer-section {
  margin-top: 1rem;
}
.bc-link-explorer-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 30vh;
  overflow: auto;
}
.bc-link-explorer-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  text-align: left;
}
.bc-link-explorer-entry small {
  color: var(--text-muted);
  overflow-wrap: anywhere;
  white-space: normal;
}

.bc-html-preview-toolbar {
  position: absolute;
  inset: 4px 4px 4px 4px;
  z-index: 50;
  pointer-events: none;
}
.bc-html-preview-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  pointer-events: auto;
  font-size: 12px;
  padding: 2px 7px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  color: var(--text-normal);
  background: var(--background-secondary);
}
.bc-html-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 120px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: #fff;
  pointer-events: auto;
}
.bc-html-preview-frame[hidden] {
  display: none;
}
.bc-html-file-preview .bc-html-preview-frame,
.bc-html-file-preview .bc-html-preview-error {
  top: 30px;
  height: calc(100% - 30px);
  min-height: 0;
  box-sizing: border-box;
}
.bc-html-preview-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--background-primary);
  color: var(--text-muted);
  border-radius: var(--radius-m);
  overflow: auto;
  pointer-events: auto;
}
.bc-html-preview-error[hidden] {
  display: none;
}


/* Native Setting/SettingGroup own row spacing, typography and control styling. */
/* Obsidian hides community-plugin icons by default; retain this tab's native label alignment. */
.vertical-tab-nav-item[data-setting-id="better-canvas"] .vertical-tab-nav-item-icon {
  display: flex;
}
.bc-settings-root .bc-settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4-1);
  margin-bottom: var(--size-4-6);
}
.bc-settings-root .bc-settings-nav-button {
  border-radius: var(--radius-s);
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
}
.bc-settings-root .bc-settings-nav-button:hover,
.bc-settings-root .bc-settings-nav-button.is-active {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.bc-settings-root .bc-settings-nav-button.is-active { font-weight: var(--font-semibold); }
.bc-settings-root .bc-settings-group { margin-bottom: var(--size-4-6); }
.bc-settings-root input[type="number"] { width: 80px; }
.bc-settings-root .bc-local-model-setting .setting-item-control {
  flex-wrap: wrap;
  min-width: 0;
}
.bc-settings-root .bc-local-model-select {
  flex: 1 1 180px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.bc-settings-root .setting-item.bc-settings-textarea { flex-direction: column; align-items: stretch; }
.bc-settings-root .setting-item.bc-settings-textarea .setting-item-control { width: 100%; }
.bc-settings-root textarea { width: 100%; min-height: 90px; }
.bc-settings-root .bc-settings-details { margin-bottom: var(--size-4-2); }
.bc-settings-root .bc-settings-details > summary { cursor: pointer; list-style: none; }
.bc-settings-root .bc-settings-details > summary::-webkit-details-marker { display: none; }
.bc-settings-root .bc-settings-details > summary .setting-item { cursor: pointer; }
.bc-settings-chevron { display: flex; color: var(--text-muted); }
.bc-settings-details[open] > summary .bc-settings-chevron { transform: rotate(90deg); }
.bc-settings-root .bc-settings-details > .bc-settings-group { margin-top: var(--size-4-2); }
.bc-settings-note { color: var(--text-muted); font-size: var(--font-ui-smaller); }
.bc-settings-capability-summary, .bc-settings-params-status { margin-top: var(--size-4-2); }
.bc-settings-root .bc-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-3);
  padding: var(--size-4-3) 0;
  margin-top: var(--size-4-6);
  border-top: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
}
.bc-settings-root .bc-settings-actions button[hidden] { display: none; }
.bc-settings-footer-buttons { display: flex; align-items: center; gap: var(--size-4-2); }
.bc-settings-save-status { color: var(--text-muted); font-size: var(--font-ui-smaller); }
.bc-settings-save-status.is-dirty { color: var(--text-normal); }
.bc-settings-dialog-actions { display: flex; justify-content: flex-end; gap: var(--size-4-2); margin-top: var(--size-4-5); }
.bc-settings-dialog-actions .mod-warning { margin-right: auto; }
.bc-settings-root .bc-settings-nav-button:focus-visible,
.bc-settings-root .bc-settings-details > summary:focus-visible { outline: 2px solid var(--interactive-accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .modal.mod-settings.bc-settings-modal .vertical-tab-header {
    flex: 0 0 144px;
    width: 144px;
    min-width: 144px;
    max-width: 144px;
  }
  .bc-settings-root {
    padding: 24px 16px 48px;
  }
  .bc-settings-root .bc-settings-pages {
    min-width: 0;
    overflow-x: clip;
  }
  .bc-settings-root .bc-local-model-setting { flex-wrap: wrap; }
  .bc-settings-root .bc-local-model-setting {
    flex-direction: column;
    align-items: stretch;
    overflow-x: clip;
  }
  .bc-settings-root .bc-local-model-setting .setting-item-info { width: 100%; }
  .bc-settings-root .bc-local-model-setting .setting-item-control {
    flex: 0 0 auto;
    width: 100%;
  }
  .bc-settings-root .bc-local-model-select {
    flex: 1 1 100%;
    width: 100%;
  }
}
/* Compact per-page PDF annotation controls. */
.bc-pdf-annotation-toolbar {
  position: absolute;
  z-index: 24;
  top: 3px;
  left: 3px;
  right: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--background-primary) 92%, transparent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  pointer-events: auto;
}
.bc-pdf-annotation-tool {
  min-width: 0;
  min-height: 23px;
  padding: 2px 6px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--button-radius);
  color: var(--text-normal);
  background: var(--background-secondary);
  font-size: 10px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.bc-pdf-annotation-tool:hover:not(:disabled) {
  background: var(--background-modifier-hover);
}
.bc-pdf-annotation-tool.is-active {
  border-color: var(--interactive-accent);
  color: var(--text-accent);
  box-shadow: inset 0 0 0 1px var(--interactive-accent);
}
.bc-pdf-annotation-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bc-pdf-annotation-tool:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 1px;
}

/* Highlight edges incident to the current Canvas node selection. */
.canvas-wrapper .canvas-edges path.bc-selection-related {
  opacity: 1;
  filter: drop-shadow(0 0 2px var(--interactive-accent));
  stroke-width: 2.5px;
  transition: filter 100ms ease, stroke-width 100ms ease, opacity 100ms ease;
}

/* A focused composer for the node AI entry points, using the host theme. */
.modal.bc-ai-prompt {
  width: min(560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 22px 24px;
  border-radius: 16px;
}
.bc-ai-prompt .modal-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 650; }
.bc-ai-prompt .modal-content { margin-top: 10px; }
.bc-ai-prompt-mark { display: flex; color: var(--text-accent); }
.bc-ai-prompt svg { width: 16px; height: 16px; flex-shrink: 0; }
.bc-ai-prompt-mark svg { width: 18px; height: 18px; }
.bc-ai-prompt-context {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 28px 20px 0;
  color: var(--text-muted);
  font-size: 12px;
  min-width: 0;
}
.bc-ai-prompt-context-icon { display: flex; flex-shrink: 0; }
.bc-ai-prompt-context-icon svg { width: 13px; height: 13px; }
.bc-ai-prompt-source-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-ai-prompt-composer {
  display: flex;
  flex-direction: column;
  height: 212px;
  min-height: 168px;
  max-height: 55vh;
  overflow: hidden;
  resize: vertical;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--background-secondary);
  transition: border-color 140ms ease;
}
.bc-ai-prompt-composer:focus-within {
  border-color: var(--background-modifier-border);
}
.bc-ai-prompt textarea.bc-ai-prompt-input {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 15px 14px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--text-normal);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.65;
  resize: none;
}
.bc-ai-prompt textarea.bc-ai-prompt-input:focus { border: 0; box-shadow: none; outline: none; }
.bc-ai-prompt-input::placeholder { color: var(--text-faint); }
.bc-ai-prompt-toolbar { display: flex; flex-shrink: 0; align-items: center; gap: 12px; padding: 8px 14px 14px; }
.bc-ai-prompt-model { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 11px; }
.bc-ai-prompt button.bc-ai-prompt-send { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; }
.bc-ai-prompt-send:disabled { opacity: 0.45; }
.bc-ai-prompt-starters { display: flex; flex-wrap: wrap; align-items: center; }
.bc-ai-prompt button.bc-ai-prompt-starter {
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-size: 11px;
}
.bc-ai-prompt-starter:first-child { padding-left: 0; }
.bc-ai-prompt-starter + .bc-ai-prompt-starter::before { content: "·"; margin-right: 7px; color: var(--text-muted); }
.bc-ai-prompt button.bc-ai-prompt-starter:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.bc-ai-prompt button:focus-visible { outline: 2px solid var(--interactive-accent); outline-offset: 3px; }
.bc-ai-prompt-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; }
.bc-ai-prompt-shortcut { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.bc-ai-prompt-status {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  background: var(--background-secondary);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: 1.45;
}
.bc-ai-prompt-status.is-ready {
  border-color: color-mix(in oklab, var(--color-green) 28%, var(--background-modifier-border));
  background: color-mix(in oklab, var(--color-green) 8%, var(--background-secondary));
}
.bc-ai-prompt-status.is-missing {
  border-color: color-mix(in oklab, var(--color-orange) 35%, var(--background-modifier-border));
  background: color-mix(in oklab, var(--color-orange) 10%, var(--background-secondary));
}
.bc-ai-prompt-status.is-highlighted {
  animation: bc-ai-status-highlight 1.2s ease;
  border-color: var(--color-orange);
}
.bc-ai-prompt-status-icon { display: flex; flex: 0 0 auto; margin-top: 1px; }
.bc-ai-prompt-status-icon svg { width: 15px; height: 15px; }
.bc-ai-prompt-status-body { flex: 1; min-width: 0; }
.bc-ai-prompt-status-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.bc-ai-prompt-status-backend { color: var(--text-normal); font-weight: var(--font-semibold); }
.bc-ai-prompt-status-summary { color: var(--text-muted); }
.bc-ai-prompt-status-detail { margin: 2px 0 0; color: var(--text-muted); }
.bc-ai-prompt button.bc-ai-prompt-settings-link {
  height: auto;
  margin-top: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-accent);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@keyframes bc-ai-status-highlight {
  0%, 60% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-orange) 20%, transparent); }
}
.bc-welcome-modal { width: min(520px, 92vw); }
.bc-welcome-hero { padding: 2px 0 4px; }
.bc-welcome-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.bc-welcome-mark svg { width: 21px; height: 21px; }
.bc-welcome-kicker {
  margin-bottom: 6px;
  color: var(--text-accent);
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bc-welcome-hero h2 {
  margin: 0 0 9px;
  color: var(--text-normal);
  font-family: var(--font-text);
  font-size: 1.7em;
  line-height: 1.2;
}
.bc-welcome-copy { max-width: 39em; margin: 0; color: var(--text-muted); }
.bc-welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.bc-welcome-actions button { height: auto; min-height: 34px; padding: 7px 12px; }
.bc-welcome-actions button.bc-welcome-primary { font-weight: var(--font-semibold); }
.bc-welcome-actions button.bc-welcome-skip { color: var(--text-muted); }
.bc-welcome-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 22px;
  padding-top: 13px;
  border-top: 1px solid var(--background-modifier-border);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}
.bc-welcome-note span:first-child { display: flex; flex: 0 0 auto; margin-top: 1px; }
.bc-welcome-note svg { width: 14px; height: 14px; }
.bc-onboarding-guide { padding-left: 24px; }
.bc-onboarding-guide li { padding: 0 0 10px 4px; }
.bc-onboarding-guide p { margin: 4px 0 0; color: var(--text-muted); }
.bc-onboarding-empty-tip-host { position: relative; }
.bc-onboarding-empty-tip {
  position: absolute;
  z-index: 20;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  width: min(292px, calc(100% - 32px));
  padding: 11px 31px 11px 11px;
  border: 1px solid color-mix(in oklab, var(--color-orange) 30%, var(--background-modifier-border));
  border-radius: var(--radius-m);
  background: var(--background-primary);
  box-shadow: var(--shadow-s);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  line-height: 1.45;
  pointer-events: auto;
}
.bc-onboarding-empty-tip-icon { display: flex; flex: 0 0 auto; margin-top: 1px; color: var(--text-accent); }
.bc-onboarding-empty-tip-icon svg { width: 16px; height: 16px; }
.bc-onboarding-empty-tip-body { min-width: 0; }
.bc-onboarding-empty-tip-body strong { display: block; margin-bottom: 2px; font-weight: var(--font-semibold); }
.bc-onboarding-empty-tip-body p { margin: 0; color: var(--text-muted); }
.bc-onboarding-empty-tip-shortcut { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 7px; color: var(--text-muted); }
.bc-onboarding-empty-tip-shortcut kbd { padding: 1px 4px; font-size: 10px; }
.bc-onboarding-empty-tip-close {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
}
.bc-onboarding-empty-tip-close:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.bc-onboarding-empty-tip-close svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .bc-ai-prompt-status.is-highlighted { animation: none; }
}
@media (max-width: 480px) {
  .modal.bc-ai-prompt { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-ai-prompt-composer { transition: none; }
}

/* Inline validation message for prompt modals (kept visible while the modal stays open). */
.bc-prompt-error {
  margin: 6px 0 0;
  color: var(--text-error);
  font-size: var(--font-ui-small);
}


/* Node style entry in the native Canvas control stack. The markup mirrors
   Obsidian's `.canvas-control-group` / `.canvas-control-item` so the button
   inherits the native size, radius and hover treatment; only the state colours
   below are ours. */
.bc-node-style-control-item {
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.bc-node-style-control-item:hover {
  background-color: var(--interactive-hover);
  color: var(--text-normal);
}
.bc-node-style-control-item.is-active {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
}
.bc-node-style-control-item.is-active:hover {
  background-color: var(--interactive-accent-hover);
}
.bc-node-style-control-item:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Docked inspector. It is positioned next to the control stack and never
   replaces the native node context menu. */
.bc-node-style-panel {
  position: fixed;
  z-index: var(--layer-menu, 1000);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--background-modifier-border);
  border-radius: 14px;
  background: var(--background-primary);
  color: var(--text-normal);
  box-shadow:
    0 18px 48px rgb(0 0 0 / 18%),
    0 2px 8px rgb(0 0 0 / 8%);
  font-size: var(--font-ui-small);
}
/* The host's base `button` rule fixes a 30px input height; the panel's tiles
   size themselves, so the height and padding are reset here. */
.bc-node-style-panel button {
  height: auto;
  min-height: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.bc-node-style-panel button:disabled {
  cursor: default;
  opacity: 0.42;
  pointer-events: none;
}

.bc-node-style-panel button[draggable="true"] {
  cursor: grab;
}

.bc-node-style-panel button[draggable="true"]:active {
  cursor: grabbing;
}

.bc-node-style-preset-hint {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}
.bc-node-style-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.55rem 0.5rem 0.85rem;
  border-bottom: 1px solid var(--background-modifier-border);
}
.bc-node-style-title {
  flex: 1;
  font-size: var(--font-ui-medium);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
}
.bc-node-style-selection-count {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  white-space: nowrap;
}
.bc-node-style-panel button.is-mixed {
  outline: 1px dashed var(--interactive-accent);
  outline-offset: -3px;
}
.bc-node-style-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
}
.bc-node-style-close:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.bc-node-style-close svg {
  width: 16px;
  height: 16px;
}
.bc-node-style-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0.2rem 0.85rem 0.6rem;
  overflow: auto;
  overscroll-behavior: contain;
}
.bc-node-style-section {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--background-modifier-border);
}
.bc-node-style-section:last-child {
  border-bottom: 0;
}
.bc-node-style-section-title {
  margin-bottom: 0.55rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
}
.bc-node-style-panel button:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Presets: the panel's primary affordance. Each tile previews the colour,
   shape, border and alignment it applies. */
.bc-node-style-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.bc-node-style-preset {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.45rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--background-secondary);
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.bc-node-style-preset:hover {
  background: var(--background-modifier-hover);
  transform: translateY(-1px);
}
.bc-node-style-preset[aria-pressed="true"] {
  border-color: var(--interactive-accent);
  background: var(--background-modifier-hover);
  box-shadow: inset 0 0 0 1px var(--interactive-accent);
}
/* Each tile is a miniature card: the whole tile area shows the style, so the
   shape, border, alignment and colour read at a glance without a name. */
.bc-node-style-preset-preview {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 3.1rem;
  padding: 0 0.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bc-preset-color, var(--text-muted)) 55%, var(--background-modifier-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--bc-preset-color, var(--text-muted)) 22%, var(--background-primary));
}
.bc-node-style-preset-preview.shape-square { border-radius: 0; }
.bc-node-style-preset-preview.shape-pill { border-radius: 999px; }
.bc-node-style-preset-preview.shape-circle {
  width: 2.3rem;
  height: 2.3rem;
  align-self: center;
  margin: 0 auto;
  padding: 0;
  border-radius: 50%;
}
.bc-node-style-preset-preview.shape-database { border-radius: 50% / 18%; }
/* Polygon preset previews reuse the shared outline and ring constants; the
   ring is painted in the preset colour. */
.bc-node-style-preset-preview.shape-diamond,
.bc-node-style-preset-preview.shape-hexagon,
.bc-node-style-preset-preview.shape-document {
  border: 0;
  border-radius: 0;
  /* CanIUse #2 concerns external SVG clips; this variable contains polygon(). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-shape-outline);
  /* doiuse-enable css-clip-path */
}
.bc-node-style-preset-preview.shape-diamond::after,
.bc-node-style-preset-preview.shape-hexagon::after,
.bc-node-style-preset-preview.shape-document::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bc-preset-color, var(--text-muted));
  -webkit-mask-image: var(--bc-ring-solid);
  mask-image: var(--bc-ring-solid);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.bc-node-style-preset-preview.border-dashed { border-style: dashed; }
.bc-node-style-preset-preview.border-dotted { border-style: dotted; }
.bc-node-style-preset-preview.border-double { border-style: double; }
.bc-node-style-preset-preview.border-invisible { border-color: transparent; }
.bc-node-style-preset-preview.align-center { justify-content: center; }
.bc-node-style-preset-preview.align-right { justify-content: flex-end; }
.bc-node-style-preset-sample {
  color: color-mix(in srgb, var(--bc-preset-color, var(--text-normal)) 60%, var(--text-normal));
  font-size: 0.75rem;
  font-weight: var(--font-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* Colour row: 20 swatches, two rows of ten. */
.bc-node-style-colors {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.3rem;
}
.bc-node-style-color {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  transition: transform 120ms ease, border-color 120ms ease;
}
.bc-node-style-color:hover {
  transform: scale(1.12);
}
.bc-node-style-color.is-selected {
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 3px var(--interactive-accent);
}
.bc-node-style-swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

/* Shape and border previews. */
.bc-node-style-shapes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}
/* Segmented rows (border and alignment): one recessed track with a raised
   active segment, the same treatment as the prototype's inspector. */
.bc-node-style-borders,
.bc-node-style-alignments {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--background-secondary);
}
.bc-node-style-borders .bc-node-style-choice,
.bc-node-style-alignments .bc-node-style-choice {
  flex: 1;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
}
.bc-node-style-borders .bc-node-style-choice:hover,
.bc-node-style-alignments .bc-node-style-choice:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.bc-node-style-borders .bc-node-style-choice.is-selected,
.bc-node-style-alignments .bc-node-style-choice.is-selected {
  color: var(--text-normal);
  background: var(--background-primary);
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}
.bc-node-style-borders svg,
.bc-node-style-alignments svg {
  width: 17px;
  height: 17px;
}
.bc-node-style-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: 0.3rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--background-secondary);
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.bc-node-style-choice:hover {
  background: var(--background-modifier-hover);
  transform: translateY(-1px);
}
.bc-node-style-choice.is-selected {
  border-color: var(--interactive-accent);
  background: var(--background-modifier-hover);
  box-shadow: inset 0 0 0 1px var(--interactive-accent);
}
.bc-node-shape-preview {
  display: block;
  position: relative;
  width: 2rem;
  height: 1.25rem;
  border: 1.5px solid var(--text-muted);
  border-radius: 4px;
  background: var(--background-primary);
}
.bc-node-shape-preview.shape-square { border-radius: 0; }
.bc-node-shape-preview.shape-pill { border-radius: 999px; }
.bc-node-shape-preview.shape-circle { width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.bc-node-shape-preview.shape-database { border-radius: 50% / 18%; }
.bc-node-shape-preview.shape-diamond,
.bc-node-shape-preview.shape-hexagon,
.bc-node-shape-preview.shape-document {
  border: 0;
  border-radius: 0;
  background: var(--background-primary);
  /* CanIUse #2 concerns external SVG clips; this variable contains polygon(). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-shape-outline);
  /* doiuse-enable css-clip-path */
}
.bc-node-shape-preview.shape-diamond::after,
.bc-node-shape-preview.shape-hexagon::after,
.bc-node-shape-preview.shape-document::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--text-muted);
  -webkit-mask-image: var(--bc-ring-solid);
  mask-image: var(--bc-ring-solid);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .bc-node-style-color,
  .bc-node-style-choice,
  .bc-node-style-preset,
  .bc-node-style-control-item {
    transition: none;
  }
  .bc-node-style-color:hover,
  .bc-node-style-choice:hover,
  .bc-node-style-preset:hover {
    transform: none;
  }
}

/* Scrapbook: warm stationery, natural ink and small, tactile paper details.
   Everything is scoped to a Canvas. The host chrome keeps its own theme. */
.canvas-wrapper[data-bc-theme="scrapbook"] {
  color-scheme: light;
  --background-primary: #fff8e8;
  --background-secondary: #f2e7d2;
  --background-modifier-border: #d1c1a7;
  --background-modifier-hover: #e9ddc8;
  --text-normal: #43372f;
  --text-muted: #7a6a59;
  --text-faint: #91816e;
  --text-accent: #956247;
  --color-accent: #a16d50;
  --interactive-accent: #a16d50;
  --canvas-dot-pattern: #b7a68a;
  --canvas-color: #8d745e;
  --canvas-background: #e9dfcb;
  --code-background: #eaddc6;
  --code-normal: #614b3e;
  --text-selection: #e2c99c;
  --bc-paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23796243' opacity='.075' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  background-color: var(--canvas-background);
  background-image: var(--bc-paper-grain), radial-gradient(ellipse at 35% 30%, #f4eddf 0%, #e9dfcb 75%);
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-background {
  opacity: 0.32;
  background: transparent;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-background circle { fill: #a18a68; }
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper] {
  --bc-paper-fill: #f4dfaa;
  --bc-paper-ink: #43372f;
  --bc-tape: #b4b995;
  color: var(--bc-paper-ink);
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="lined"] { --bc-paper-fill: #fcf7ec; }
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="torn"] { --bc-paper-fill: #ecd0c3; }
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="photo"] { --bc-paper-fill: #fffaf1; }
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="label"] { --bc-paper-fill: #d5dfc7; }
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper] .canvas-node-container {
  color: var(--bc-paper-ink);
  background-color: var(--bc-paper-fill);
  background-image: var(--bc-paper-grain);
  border-color: var(--bc-node-border-color, #a48b694f);
  box-shadow: 0 1px 1px #6a503425, 1px 4px 6px -3px #6a50344a, 3px 14px 24px -14px #6a503452;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper].is-themed .canvas-node-container {
  background-color: color-mix(in oklab, var(--canvas-color) 22%, var(--bc-paper-fill));
  border-color: var(--bc-node-border-color, color-mix(in oklab, var(--canvas-color) 40%, #b7a78b));
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper][data-bc-shape="default"] .canvas-node-container {
  border-radius: 3px 6px 4px 3px;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper] :is(.canvas-node-content, .markdown-preview-view) {
  background-color: transparent;
  color: var(--bc-paper-ink);
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper] :is(h1, h2, h3, h4, h5, h6) {
  color: #584534;
  font-family: "Iowan Old Style", "Palatino Linotype", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  letter-spacing: 0.025em;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper] blockquote {
  border-inline-start-color: #b7a17e;
  color: #75604d;
}
/* Tape sits on the anchor, outside the paper; pointer events stay with Canvas.
   Only rectangular cards receive the ornaments, leaving shape outlines intact. */
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="tape"]:is([data-bc-shape="default"], [data-bc-shape="square"])::before,
.bc-paper-preview[data-bc-paper="tape"]::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: min(92px, 42%);
  height: 26px;
  left: 50%;
  top: -13px;
  transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(115deg, #ffffff20 0 3px, transparent 3px 7px), #b1b78fbf;
  border-inline: 1px dashed #8b946b70;
  box-shadow: 0 1px 2px #715e3120;
  /* CanIUse #2 concerns external SVG clips; polygon() does not use them. */
  /* doiuse-disable css-clip-path */
  clip-path: polygon(1% 0, 98% 2%, 100% 14%, 98% 29%, 100% 43%, 98% 61%, 100% 79%, 98% 100%, 0 97%, 2% 83%, 0 67%, 2% 50%, 0 33%, 2% 17%);
  /* doiuse-enable css-clip-path */
  pointer-events: none;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="lined"] .canvas-node-container,
.bc-paper-preview[data-bc-paper="lined"] {
  background-image: linear-gradient(90deg, transparent 0 27px, #c7827540 27px 28px, transparent 28px), repeating-linear-gradient(0deg, transparent 0 23px, #8d9fa52b 23px 24px);
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="torn"][data-bc-paper-border="theme"]:is([data-bc-shape="default"], [data-bc-shape="square"]) .canvas-node-container,
.bc-paper-preview[data-bc-paper="torn"] {
  border-radius: 0;
  /* CanIUse #2 concerns external SVG clips; polygon() does not use them. */
  /* doiuse-disable css-clip-path */
  clip-path: polygon(0 1%, 7% 0, 14% 1%, 21% 0, 28% 1%, 35% 0, 42% 1%, 49% 0, 56% 1%, 63% 0, 70% 1%, 77% 0, 84% 1%, 91% 0, 100% 1%, 100% 98%, 94% 100%, 87% 98%, 80% 100%, 73% 98%, 66% 100%, 59% 98%, 52% 100%, 45% 98%, 38% 100%, 31% 98%, 24% 100%, 17% 98%, 10% 100%, 3% 98%, 0 100%);
  /* doiuse-enable css-clip-path */
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="torn"] {
  filter: drop-shadow(1px 3px 2px #72583a25);
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="torn"][data-bc-paper-border="theme"]:is([data-bc-shape="default"], [data-bc-shape="square"]) .canvas-node-container {
  border-color: transparent;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="torn"]:is([data-bc-shape="default"], [data-bc-shape="square"]):is(.is-selected, .is-focused, .is-editing)::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid #a16d50;
  border-radius: 4px;
  pointer-events: none;
  /* Rectangular shapes are not matched by the shared ring rule at all, which
     only lists the polygon shapes, so their ::after carries no mask. The generic
     state rules `.canvas-node[data-bc-shape].is-selected::after` (and .is-focused)
     then paint that unmasked pseudo-element with var(--color-accent), which fills
     the whole card and hides its text. Declaring a transparent background keeps
     this pseudo-element a pure outline: the border still draws the selection. */
  background-color: transparent;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="photo"]:is([data-bc-shape="default"], [data-bc-shape="square"]) .canvas-node-container {
  border-radius: 1px;
  box-shadow: inset 0 0 0 8px #fffdf5, inset 0 -17px 0 8px #fffdf5, 1px 4px 5px #6a503430;
  background-image: linear-gradient(#d5d8c81f, #b2bb9f1a);
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="photo"] .canvas-node-content.image-embed {
  /* Keep the frame clear without changing the node's interaction geometry. */
  box-sizing: border-box;
  padding: 8px 8px 22px;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="photo"] .canvas-node-content.image-embed img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="photo"] .canvas-node-label {
  background: #fffaf1;
  color: #8a7258;
  font-size: 11px;
  border-radius: 2px;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="label"]:is([data-bc-shape="default"], [data-bc-shape="square"])::before,
.bc-paper-preview[data-bc-paper="label"]::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid #8c9a7b;
  border-radius: 50%;
  background: #e9dfcb;
  box-shadow: 0 0 0 3px #f7f6e788;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="group"] .canvas-node-container {
  background: #f8f2e521;
  border: 1.5px var(--bc-node-border-style, dashed) var(--bc-node-border-color, #b39b7b);
  border-left-width: var(--bc-node-side-border-width, 1.5px);
  border-right-width: var(--bc-node-side-border-width, 1.5px);
  border-left-style: var(--bc-node-border-style, var(--bc-node-side-border-style, dashed));
  border-right-style: var(--bc-node-border-style, var(--bc-node-side-border-style, dashed));
  box-shadow: none;
  border-radius: 7px;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="group"][data-bc-paper-border="explicit"][data-bc-border="solid"] .canvas-node-container {
  border-top-style: solid;
  border-bottom-style: solid;
  border-left-style: var(--bc-node-side-border-style, solid);
  border-right-style: var(--bc-node-side-border-style, solid);
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper="group"] .canvas-group-label {
  color: #6c5743;
  background: #e4d3b4;
  border: 1px solid #bdab8c80;
  border-radius: 2px;
  padding: 5px 14px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-node[data-bc-paper]:is(.is-selected, .is-focused, .is-editing) .canvas-node-container {
  outline: 2px solid #a16d50;
  outline-offset: 4px;
  box-shadow: 0 2px 4px #6a503430, 3px 12px 24px -10px #6a503445;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-edges {
  --canvas-color: #94755b;
  color: #94755b;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-edges path {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-path-label {
  color: #735840;
  background: #f6edda;
  border: 1px solid #cbb799;
  border-radius: 3px;
  box-shadow: 0 2px 3px #72583a12;
  font-size: 12px;
  padding: 3px 9px;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-control-group,
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-card-menu {
  color: #68533e;
  background: #faf5e9;
  border-color: #cdbb9f;
  box-shadow: 0 2px 6px #72583a18;
}
.canvas-wrapper[data-bc-theme="scrapbook"] .canvas-control-item:hover { background: #e9ddc8; }
.bc-theme-control-button { cursor: pointer; background: transparent; }
.bc-theme-control-button:focus-visible { outline: 2px solid var(--interactive-accent); outline-offset: 2px; }
.canvas-wrapper[data-bc-theme="scrapbook"] .bc-theme-control-button { background: transparent; color: #68533e; }
.bc-node-style-panel[data-bc-theme="scrapbook"] {
  color-scheme: light;
  --background-primary: #fffaf0;
  --background-secondary: #f0e7d6;
  --background-modifier-border: #d5c6ad;
  --background-modifier-hover: #e9ddc8;
  --text-normal: #51412f;
  --text-muted: #867057;
  --text-faint: #9a8870;
  --color-accent: #a16d50;
  --interactive-accent: #a16d50;
  --text-on-accent: #fffaf0;
}

/* The same paper treatments are used for the live cards and their swatches. */
.bc-paper-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.bc-paper-preset {
  height: 80px;
  min-width: 0;
  padding: 15px 8px 10px;
  background: #eae1d0;
  border: 1px solid transparent;
  border-radius: 7px;
  box-shadow: none;
}
.bc-paper-preset:hover { background: #e0d4bf; }
.bc-paper-preset.is-selected { border-color: #a16d50; box-shadow: 0 0 0 1px #a16d50; }
.bc-paper-preset.is-mixed { border: 1px dashed #a16d50; }
.bc-paper-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 48px;
  width: 100%;
  background: #f4dfaa;
  color: #584534;
  border: 1px solid #a48b694f;
  border-radius: 2px;
  box-shadow: 1px 3px 5px #71563525;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-family: "Palatino Linotype", "SimSun", serif;
}
.bc-paper-preview[data-bc-paper="tape"]::before { height: 13px; top: -6px; width: 38px; }
.bc-paper-preview[data-bc-paper="lined"] { background-color: #fcf7ec; }
.bc-paper-preview[data-bc-paper="torn"] { background-color: #ecd0c3; }
.bc-paper-preview[data-bc-paper="photo"] {
  background: #d7ddce;
  border: 5px solid #fffaf1;
  border-bottom-width: 12px;
}
.bc-paper-preview[data-bc-paper="label"] { background: #d5dfc7; padding-left: 10px; }
.bc-paper-preview[data-bc-paper="label"]::before { left: 5px; width: 4px; height: 4px; box-shadow: none; }

/* Theme picker: a small board, rather than a colour chip, previews the theme. */
.modal.bc-theme-modal { width: min(640px, 92vw); }
.bc-theme-intro { color: var(--text-muted); margin: 2px 0 22px; }
.bc-theme-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
button.bc-theme-choice {
  display: block;
  height: auto;
  padding: 7px 7px 16px;
  text-align: left;
  white-space: normal;
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
  background: var(--background-primary);
  box-shadow: none;
}
button.bc-theme-choice[aria-pressed="true"] { border-color: var(--interactive-accent); box-shadow: 0 0 0 1px var(--interactive-accent); }
button.bc-theme-choice:hover { border-color: var(--text-muted); }
.bc-theme-mini-board {
  height: 165px;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: #e9dfcb;
  background-image: radial-gradient(#a18a6830 0.7px, transparent 0.7px);
  background-size: 11px 11px;
}
.bc-theme-mini-caption { position: absolute; top: 14px; left: 16px; color: #84715a; font: italic 13px Georgia, serif; }
.bc-theme-mini-board svg { position: absolute; inset: 15px 0 0; width: 100%; height: 140px; fill: none; stroke: #94755b; stroke-width: 1.4; }
.bc-theme-mini-board .bc-paper-preview { position: absolute; width: 76px; height: 46px; font-size: 11px; }
.bc-theme-mini-board .bc-mini-tape { left: 20px; top: 58px; transform: rotate(-5deg); }
.bc-theme-mini-board .bc-mini-lined { right: 23px; top: 88px; transform: rotate(4deg); }
.bc-theme-mini-board .bc-mini-label { right: 22px; top: 42px; width: 65px; height: 28px; transform: rotate(-3deg); }
.bc-theme-mini-board[data-bc-theme="default"] { background-color: var(--background-secondary); }
.bc-theme-mini-board[data-bc-theme="default"] .bc-paper-preview { background: var(--background-primary); color: var(--text-normal); border: 1px solid var(--background-modifier-border); border-radius: 5px; transform: none; }
.bc-theme-mini-board[data-bc-theme="default"] .bc-paper-preview::before { display: none; }
.bc-theme-mini-board[data-bc-theme="default"] .bc-theme-mini-caption { color: var(--text-muted); }
.bc-theme-choice-label { display: flex; align-items: center; justify-content: space-between; margin: 14px 9px 5px; }
.bc-theme-current { font-size: 11px; color: var(--text-accent); }
.bc-theme-choice-detail { color: var(--text-muted); font-size: 12px; margin: 0 9px; }
.bc-theme-footnote { color: var(--text-muted); font-size: 12px; line-height: 1.7; margin: 20px 0 0; }
@media (max-width: 480px) { .bc-theme-choices { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/* Sketch theme: whiteboard paper, ink outlines, handwriting, six presets. */
.canvas-wrapper[data-bc-theme="sketch"] {
  color-scheme: light;
  --bc-sketch-paper: #fffefb;
  --bc-sketch-ink: #262520;
  --bc-sketch-muted: #696b65;
  --bc-sketch-accent: #6554c0;
  --bc-sketch-font: "BC Sketch Hand", "Segoe Print", cursive;
  --background-primary: #fffefb;
  --background-secondary: #f4f3ee;
  --background-modifier-border: #d9d8cf;
  --background-modifier-hover: #ecebe4;
  --text-normal: #262520;
  --text-muted: #696b65;
  --text-faint: #888982;
  --text-accent: #6554c0;
  --color-accent: #6554c0;
  --interactive-accent: #6554c0;
  --canvas-dot-pattern: #d8d7cf;
  --canvas-color: #73736c;
  --canvas-background: #fffefb;
  --code-background: #f1f0ea;
  --code-normal: #45443e;
  --text-selection: #ddd6ff;
  background-color: var(--bc-sketch-paper);
}
.theme-dark .canvas-wrapper[data-bc-theme="sketch"] {
  color-scheme: dark;
  --bc-sketch-paper: #202126;
  --bc-sketch-ink: #ecebe4;
  --bc-sketch-muted: #aaa9b0;
  --bc-sketch-accent: #b5a7ff;
  --background-primary: #202126;
  --background-secondary: #292a30;
  --background-modifier-border: #41424a;
  --background-modifier-hover: #33343b;
  --text-normal: #ecebe4;
  --text-muted: #aaa9b0;
  --text-faint: #8f9098;
  --text-accent: #b5a7ff;
  --color-accent: #b5a7ff;
  --interactive-accent: #b5a7ff;
  --canvas-dot-pattern: #4b4c55;
  --canvas-color: #c9c8d0;
  --canvas-background: #202126;
  --code-background: #292a30;
  --code-normal: #d6d5dc;
  --text-selection: #463d78;
  background-color: var(--bc-sketch-paper);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-background {
  opacity: 0.7;
  background: transparent;
}
/* This theme scope matches the default selection rules; its later position
   replaces their card paint while the separate sketch frame draws the ink. */
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node .canvas-node-container {
  color: var(--bc-sketch-ink);
  background-color: transparent;
  background-image: none;
  --bc-node-border-color: transparent;
  border-color: var(--bc-node-border-color);
  box-shadow: none;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node-container {
  position: relative;
  overflow: visible;
}
.canvas-wrapper[data-bc-theme="sketch"] .bc-sketch-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--bc-sketch-ink);
  pointer-events: none;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node-content {
  position: relative;
  z-index: 1;
  color: var(--bc-sketch-ink);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node-container :is(
  .markdown-preview-view,
  .markdown-source-view,
  .markdown-rendered,
  .cm-editor,
  .cm-content,
  .markdown-embed,
  p,
  li,
  h1, h2, h3, h4, h5, h6
) {
  color: var(--bc-sketch-ink);
  font-family: var(--bc-sketch-font);
  font-weight: 600;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node-content :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
  line-height: 1.3;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="heading"] .canvas-node-content {
  font-size: 30px;
  line-height: 1.35;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="concept"] .canvas-node-content,
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="action"] .canvas-node-content,
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="risk"] .canvas-node-content {
  font-size: 24px;
  line-height: 1.4;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="decision"] .canvas-node-content {
  font-size: 22px;
  line-height: 1.35;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="annotation"] .canvas-node-content {
  font-size: 20px;
  line-height: 1.55;
  color: var(--bc-sketch-muted);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="annotation"] .canvas-node-content :is(p, li) {
  color: var(--bc-sketch-muted);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="heading"] .canvas-node-content,
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="annotation"] .canvas-node-content {
  padding-left: 16px;
  padding-right: 16px;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="concept"] .canvas-node-content {
  box-sizing: border-box;
  padding: 16px 34px;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="decision"] .canvas-node-content {
  box-sizing: border-box;
  padding: 24px 38px;
}
/* Hit the content height, not the wrapper, for vertically balanced cards. */
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node-content .markdown-preview-sizer {
  min-height: auto;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch] .canvas-node-label {
  font-family: var(--bc-sketch-font);
  font-weight: 600;
  color: var(--bc-sketch-muted);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node.is-selected .canvas-node-container,
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node.is-focused .canvas-node-container,
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node.is-editing .canvas-node-container {
  outline: 1.5px dashed var(--bc-sketch-accent);
  outline-offset: 7px;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch="free"] .canvas-node-container {
  --bc-node-border-color: color-mix(in srgb, var(--bc-sketch-ink) 25%, transparent);
  border-color: var(--bc-node-border-color);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="annotation"] .canvas-node-container,
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset="heading"] .canvas-node-container {
  --bc-node-border-color: transparent;
  border-color: var(--bc-node-border-color);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch="free"] .canvas-node-container {
  border-style: var(--bc-node-border-style, solid);
  border-left-style: var(--bc-node-border-style, var(--bc-node-side-border-style, solid));
  border-right-style: var(--bc-node-border-style, var(--bc-node-side-border-style, solid));
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch="free"] .canvas-node-container {
  box-shadow: none;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-node[data-bc-sketch-preset] .canvas-node-label {
  display: none;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-group-label {
  color: var(--bc-sketch-muted);
  background: transparent;
  border: 0;
  font-family: var(--bc-sketch-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-edges {
  --canvas-color: var(--bc-sketch-ink);
  color: var(--bc-sketch-ink);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-edges path {
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#bc-sketch-wobble);
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-path-label {
  color: var(--bc-sketch-muted);
  background: var(--bc-sketch-paper);
  border: 1px dashed color-mix(in srgb, var(--bc-sketch-muted) 45%, transparent);
  border-radius: 4px;
  font-family: var(--bc-sketch-font);
  font-size: 14px;
  font-weight: 600;
  padding: 2px 8px;
}
.canvas-wrapper[data-bc-theme="sketch"] :is(.canvas-control-group, .canvas-card-menu) {
  color: var(--bc-sketch-ink);
  background: var(--bc-sketch-paper);
  border-color: color-mix(in srgb, var(--bc-sketch-ink) 18%, transparent);
  box-shadow: 0 2px 8px #00000010;
}
.canvas-wrapper[data-bc-theme="sketch"] .canvas-control-item:hover {
  background: var(--background-modifier-hover);
}
.canvas-wrapper[data-bc-theme="sketch"] .bc-theme-control-button {
  background: transparent;
  color: var(--bc-sketch-ink);
}
.bc-node-style-panel[data-bc-theme="sketch"] {
  --bc-sketch-ink: #262520;
  --bc-sketch-muted: #696b65;
  --bc-sketch-font: "BC Sketch Hand", "Segoe Print", cursive;
}
.theme-dark .bc-node-style-panel[data-bc-theme="sketch"] {
  --bc-sketch-ink: #ecebe4;
  --bc-sketch-muted: #aaa9b0;
}
.bc-sketch-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.bc-sketch-preset {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.4rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--background-secondary);
  text-align: left;
}
.bc-sketch-preset:hover {
  background: var(--background-modifier-hover);
}
.bc-sketch-preset[aria-pressed="true"] {
  border-color: var(--interactive-accent);
  box-shadow: inset 0 0 0 1px var(--interactive-accent);
}
.bc-sketch-preset-preview {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.8rem;
  padding: 0 0.45rem;
  overflow: hidden;
  color: var(--bc-sketch-preset-color, var(--text-muted));
  border: 1.7px solid currentColor;
  border-radius: 7px;
  font: 15px var(--bc-sketch-font);
  font-weight: 600;
  line-height: 1.1;
  transform: rotate(-0.45deg);
  white-space: nowrap;
}
.bc-sketch-preset-preview.shape-square { border-radius: 2px; }
.bc-sketch-preset-preview.shape-ellipse,
.bc-sketch-preset-preview.shape-circle { border-radius: 50%; }
.bc-sketch-preset-preview.shape-pill { border-radius: 999px; }
.bc-sketch-preset-preview.shape-diamond {
  border: 0;
  /* CanIUse #2 concerns external SVG clips; polygon() does not use them. */
  /* doiuse-disable css-clip-path */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  /* doiuse-enable css-clip-path */
  background: color-mix(in srgb, currentColor 22%, var(--background-primary));
}
.bc-sketch-preset-preview.shape-diamond.fill-solid {
  background: color-mix(in srgb, currentColor 34%, var(--background-primary));
}
.bc-sketch-preset-preview.border-invisible { border-color: transparent; }
.bc-sketch-preset-preview.border-dashed { border-style: dashed; }
.bc-sketch-preset-preview.fill-solid { background: color-mix(in srgb, currentColor 24%, var(--background-primary)); }
.bc-sketch-preset-preview.fill-hachure {
  background: repeating-linear-gradient(-48deg, color-mix(in srgb, currentColor 60%, transparent) 0 1px, transparent 1px 6px);
}
.bc-sketch-preset-preview.fill-cross-hatch {
  background:
    repeating-linear-gradient(48deg, color-mix(in srgb, currentColor 42%, transparent) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-48deg, color-mix(in srgb, currentColor 42%, transparent) 0 1px, transparent 1px 6px);
}
.bc-sketch-preset-preview.align-left { justify-content: flex-start; }
.bc-sketch-preset-preview.align-right { justify-content: flex-end; }
.bc-sketch-preset-name {
  color: var(--text-normal);
  font-size: 0.72rem;
  font-weight: var(--font-semibold);
  line-height: 1.25;
}
.bc-sketch-fills {
  display: flex;
  gap: 0.35rem;
}
.bc-sketch-fill {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding: 0.35rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--background-secondary);
  color: var(--text-muted);
  font-size: 0.66rem;
}
.bc-sketch-fill[aria-pressed="true"] {
  border-color: var(--interactive-accent);
  color: var(--text-normal);
}
.bc-sketch-fill-swatch {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid var(--bc-sketch-ink);
  border-radius: 3px;
}
.bc-sketch-fill-swatch.fill-none { background: transparent; border-style: dashed; }
.bc-sketch-fill-swatch.fill-solid { background: color-mix(in srgb, var(--text-accent) 34%, transparent); }
.bc-sketch-fill-swatch.fill-hachure {
  background: repeating-linear-gradient(-48deg, var(--bc-sketch-ink) 0 1px, transparent 1px 4px);
}
.bc-sketch-fill-swatch.fill-cross-hatch {
  background:
    repeating-linear-gradient(48deg, var(--bc-sketch-ink) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-48deg, var(--bc-sketch-ink) 0 1px, transparent 1px 5px);
}
.bc-theme-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-theme-mini-board[data-bc-theme="sketch"] {
  background-color: #fffefb;
  background-image: radial-gradient(#d8d7cf 0.7px, transparent 0.7px);
}
.bc-theme-mini-board[data-bc-theme="sketch"] svg { stroke: #262520; }
.bc-theme-mini-board[data-bc-theme="sketch"] .bc-theme-mini-caption {
  color: #696b65;
  font-family: "BC Sketch Hand", "Segoe Print", cursive;
  font-style: normal;
  font-weight: 600;
}
.bc-theme-mini-board[data-bc-theme="sketch"] .bc-sketch-mini {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #262520;
  border: 1.5px solid #262520;
  border-radius: 5px;
  background: repeating-linear-gradient(-48deg, #719cf466 0 1px, transparent 1px 5px);
  font: 13px "BC Sketch Hand", "Segoe Print", cursive;
  font-weight: 600;
  transform: rotate(-1deg);
}
.bc-theme-mini-board[data-bc-theme="sketch"] .bc-mini-concept { left: 18px; top: 65px; width: 80px; height: 48px; border-radius: 50%; }
.bc-theme-mini-board[data-bc-theme="sketch"] .bc-mini-action { right: 18px; top: 46px; width: 78px; height: 40px; background: repeating-linear-gradient(-48deg, #78b58c66 0 1px, transparent 1px 5px); transform: rotate(1deg); }
.bc-theme-mini-board[data-bc-theme="sketch"] .bc-mini-risk { right: 30px; top: 99px; width: 74px; height: 36px; border-style: dashed; border-color: #e8798f; background: repeating-linear-gradient(48deg, #e8798f55 0 1px, transparent 1px 5px), repeating-linear-gradient(-48deg, #e8798f55 0 1px, transparent 1px 5px); transform: rotate(-2deg); }
@media (max-width: 640px) { .bc-theme-choices { grid-template-columns: 1fr; } }

/* Soft Notes: a light paper canvas and flat, borderless text cards. */
.canvas-wrapper[data-bc-theme="soft-notes"] {
  color-scheme: light;
  --background-primary: #fcfcf8;
  --background-secondary: #f0f3e9;
  --background-modifier-border: #dce2d3;
  --background-modifier-hover: #e9eedf;
  --text-normal: #292e28;
  --text-muted: #78816e;
  --text-faint: #929b87;
  --text-accent: #61744e;
  --color-accent: #80936b;
  --interactive-accent: #80936b;
  --text-selection: #cfdfbd;
  --canvas-background: #fcfcf8;
  --canvas-dot-pattern: #dfe5d6;
  --canvas-color: #6b7562;
  --code-background: #edf0e6;
  --code-normal: #48543d;
  --checkbox-color: #79835e;
  --checkbox-color-hover: #627049;
  background: #fcfcf8;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-background { opacity: .55; }
/* Theme and preset specificity outranks generic shapes and selection paint.
   Clipping stays on the container, leaving handles and anchors uncropped. */
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] .canvas-node-container {
  background: var(--bc-soft-color);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  /* CanIUse #2 concerns external SVG clips; this variable uses same-document url(#id). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-soft-clip);
  /* doiuse-enable css-clip-path */
  transition: none;
  color: #292e28;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes]::after,
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] .canvas-node-container::after {
  display: none;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] .canvas-node-content {
  box-sizing: border-box;
  padding: var(--bc-soft-top) var(--bc-soft-right) var(--bc-soft-bottom) var(--bc-soft-left);
  background: transparent;
  color: #292e28;
  text-align: var(--bc-soft-align);
  font: 18px/1.65 "BC Sketch Hand", cursive;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] :is(.markdown-preview-view, .markdown-source-view, .cm-content, .markdown-rendered) {
  background: transparent;
  color: #292e28;
  font-family: "BC Sketch Hand", cursive;
  text-align: var(--bc-soft-align);
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] .markdown-preview-view {
  padding: 0;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] .markdown-preview-sizer {
  min-height: auto;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] :is(h1,h2,h3,h4,h5,h6,.cm-header) {
  color: #292e28;
  font-family: "BC Soft Notes Title", "BC Sketch Hand", cursive;
  font-weight: 400;
  line-height: 1.35;
  margin-block: 0 .55em;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] :is(h1,h2) { font-size: 28px; }
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] p { margin-block: 0 .6em; }
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] blockquote {
  border: 0;
  padding: 0;
  margin-inline: 0;
  color: #3c514e;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes="free"] :is(.markdown-preview-view, .cm-content) {
  font-family: "BC Soft Notes Title", "BC Sketch Hand", cursive;
  font-size: 30px;
  line-height: 1.6;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes="free"] :is(h1,h2) { font-size: 42px; }
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes="free"] .markdown-preview-sizer.bc-soft-has-heading p {
  font: 16px/1.7 "BC Sketch Hand", cursive;
  color: #78816e;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-node[data-bc-soft-notes] .canvas-node-label { display: none; }
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-path-label {
  background: #fcfcf8;
  color: #78816e;
  border: 0;
  box-shadow: none;
  font-family: "BC Sketch Hand", cursive;
}
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-edges { --canvas-color: #6b7562; }
.canvas-wrapper[data-bc-theme="soft-notes"] .canvas-edges path { stroke-linecap: round; stroke-linejoin: round; }
.bc-soft-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bc-soft-preset {
  padding: 6px;
  height: 69px;
  color: var(--text-normal);
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
.bc-soft-preset svg { width: 100%; height: 100%; display: block; }
.bc-soft-preset:hover, .bc-soft-preset[aria-pressed="true"] { background: var(--background-modifier-hover); }
.bc-soft-preset[aria-pressed="mixed"] { background: color-mix(in srgb, var(--interactive-accent) 12%, transparent); }
.bc-soft-hint { margin: 4px 0 12px; font-size: 11px; color: var(--text-muted); }
.bc-theme-mini-board[data-bc-theme="soft-notes"] {
  background-color: #fcfcf8;
  background-image: linear-gradient(#e6e9e15c 1px, transparent 1px), linear-gradient(90deg, #e6e9e15c 1px, transparent 1px);
  background-size: 14px 14px;
  color: #292e28;
}
.bc-theme-mini-board[data-bc-theme="soft-notes"] .bc-theme-mini-caption {
  color: #78816e;
  font: 15px "BC Soft Notes Title", cursive;
}
.bc-theme-mini-board[data-bc-theme="soft-notes"] svg { stroke: #6b7562; }
.bc-soft-mini {
  position: absolute;
  display: grid;
  place-content: center;
  background: var(--bc-soft-color);
  /* CanIUse #2 concerns external SVG clips; this variable uses same-document url(#id). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-soft-clip);
  /* doiuse-enable css-clip-path */
  font: 15px "BC Soft Notes Title", cursive;
}
.bc-soft-mini.bc-mini-spark { left: 12px; top: 48px; width: 95px; height: 76px; }
.bc-soft-mini.bc-mini-action { right: 12px; top: 44px; width: 90px; height: 62px; }
.bc-soft-mini.bc-mini-question { right: 20px; top: 104px; width: 95px; height: 62px; padding-bottom: 12px; }

/* Paper research stays a light paper surface even in a dark host.
   All ornaments are CSS; headings and quotations always come from Markdown. */
.canvas-wrapper[data-bc-theme="research"],
.bc-node-style-panel[data-bc-theme="research"],
.bc-theme-mini-board[data-bc-theme="research"] {
  color-scheme: light;
  --bc-research-paper: #fffdf7;
  --bc-research-ink: #303831;
  --bc-research-serif: "Songti SC", "Noto Serif CJK SC", "STSong", "SimSun", serif;
  --background-primary: #fffdf7;
  --background-secondary: #eeece5;
  --background-modifier-border: #d9d9ce;
  --background-modifier-hover: #e6e6db;
  --text-normal: #303831;
  --text-muted: #65705b;
  --text-faint: #85877c;
  --text-accent: #416879;
  --text-accent-hover: #304f5c;
  --color-accent: #a84e34;
  --interactive-accent: #a84e34;
  --code-background: #eeece5;
  --code-normal: #303831;
  --text-selection: #e9d791;
  --canvas-background: #eeece5;
  --canvas-color: #63734a;
  --canvas-dot-pattern: #d1d2c5;
  color: var(--text-normal);
}
.canvas-wrapper[data-bc-theme="research"] {
  background: radial-gradient(ellipse at 35% 20%, #f5f2e9, #eeece5 75%);
}
.canvas-wrapper[data-bc-theme="research"] .canvas-background { background: transparent; opacity: .3; }
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] {
  --bc-research-title-color: var(--bc-research-ink);
  --bc-research-title-size: 1.55em;
  --bc-research-title-padding: 0 0 15px;
  --bc-research-title-margin: 0 0 17px;
  --bc-research-title-background: transparent;
  --bc-research-title-border: 1px solid color-mix(in srgb, var(--bc-research-accent) 40%, transparent);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] .canvas-node-container {
  color: var(--bc-research-ink);
  background: var(--bc-research-fill, var(--bc-research-paper));
  border-color: var(--bc-node-border-color, color-mix(in srgb, var(--bc-research-accent) 45%, #d9d9ce));
  box-shadow: 0 1px 2px #3038310c;
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] :is(.canvas-node-content, .markdown-preview-view, .markdown-source-view, .cm-editor, .markdown-embed) {
  color: var(--bc-research-ink);
  background-color: transparent;
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] :is(.markdown-preview-view, .cm-content) {
  font-family: var(--bc-research-serif);
  font-size: 16px;
  line-height: 1.9;
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] .markdown-preview-view {
  padding: 24px;
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] .markdown-preview-sizer { min-height: 0; }
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--bc-research-serif);
  color: var(--bc-research-ink);
  line-height: 1.5;
}
/* Support both direct Markdown blocks and Obsidian's virtualized block wrappers.
   The header/footer containers do not count as user content. */
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] :is(
  .markdown-rendered > :is(h1, h2, h3, h4, h5, h6):first-child,
  .markdown-preview-sizer > :nth-child(1 of :not(.mod-header, .mod-footer, .markdown-preview-pusher)) > :is(h1, h2, h3, h4, h5, h6)
) {
  color: var(--bc-research-title-color);
  font-size: var(--bc-research-title-size);
  padding: var(--bc-research-title-padding);
  margin: var(--bc-research-title-margin);
  background: var(--bc-research-title-background);
  border-bottom: var(--bc-research-title-border);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset] blockquote {
  color: var(--bc-research-ink);
  border-inline-start-color: var(--bc-research-accent);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="source"]:is([data-bc-shape="square"], [data-bc-shape="default"]) .canvas-node-container {
  box-shadow: inset 7px 0 var(--bc-research-accent), inset 0 0 0 6px var(--bc-research-paper), inset 0 0 0 7px color-mix(in srgb, var(--bc-research-accent) 20%, var(--bc-research-paper));
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="quote"] .canvas-node-container {
  box-shadow: inset 0 -4px var(--bc-research-accent);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="quote"] blockquote {
  padding: 16px 12px;
  margin: 0 0 21px;
  font-size: 1.5em;
  line-height: 1.6;
  background: #fffdf838;
  border: 0;
  border-block: 1px solid color-mix(in srgb, var(--bc-research-accent) 52%, transparent);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="annotation"] {
  --bc-research-title-color: var(--bc-research-accent);
  --bc-research-title-border: 0;
  --bc-research-title-padding: 0;
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="annotation"] .markdown-preview-view {
  padding-left: 35px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 28px;
  background-image: linear-gradient(90deg, transparent 21px, color-mix(in srgb, var(--bc-research-accent) 40%, transparent) 21px 22px, transparent 22px);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="annotation"] .markdown-rendered p {
  background: repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--bc-research-accent) 22%, transparent) 27px 28px);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="argument"] {
  --bc-research-title-color: #fffdf7;
  --bc-research-title-background: var(--bc-research-accent);
  --bc-research-title-margin: -24px -24px 21px;
  --bc-research-title-padding: 20px 24px;
  --bc-research-title-border: 0;
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="argument"] .markdown-rendered strong {
  /* CanIUse partial support concerns unused text-decoration-skip variants; these longhands are supported. */
  /* doiuse-disable text-decoration */
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--bc-research-accent) 28%, transparent);
  text-decoration-thickness: 4px;
  /* doiuse-enable text-decoration */
  text-underline-offset: 2px;
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="argument"] :is(h1, h2, h3, h4, h5, h6) :is(strong, em, code, a) { color: inherit; }
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="question"] {
  --bc-research-title-color: var(--bc-research-accent);
  --bc-research-title-border: 1px dashed color-mix(in srgb, var(--bc-research-accent) 45%, transparent);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="question"][data-bc-shape="default"] .canvas-node-container { border-radius: 14px; }
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="question"] li { margin-block: 10px; }
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="section"] {
  --bc-research-title-color: var(--bc-research-accent);
  --bc-research-title-size: 2.3em;
  --bc-research-title-padding: 0;
  --bc-research-title-margin: 0;
  --bc-research-title-border: 0;
  --bc-research-title-background: linear-gradient(transparent 76%, color-mix(in srgb, var(--bc-research-accent) 17%, transparent) 76% 93%, transparent 93%);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="section"] .canvas-node-container {
  box-shadow: inset 0 2px var(--bc-research-accent);
}
.canvas-wrapper[data-bc-theme="research"] [data-bc-research-preset="section"] .markdown-preview-view { padding-inline: 0; }
.canvas-wrapper[data-bc-theme="research"] .canvas-node:is(.is-selected, .is-focused, .is-editing) .canvas-node-container {
  outline: 2px solid #a84e34;
  outline-offset: 5px;
}
.canvas-wrapper[data-bc-theme="research"] :is(.canvas-control-group, .canvas-card-menu) {
  background: var(--background-primary);
  color: var(--text-normal);
  border-color: var(--background-modifier-border);
}
.canvas-wrapper[data-bc-theme="research"] .canvas-group-label {
  color: #63734a;
  font-family: var(--bc-research-serif);
  background: var(--canvas-background);
}
.canvas-wrapper[data-bc-theme="research"] .canvas-path-label { background: #eeece5; color: #65705b; }
.bc-research-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bc-research-preset {
  display: block;
  min-width: 0;
  width: 100%;
  padding: 4px;
  height: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
}
.bc-research-preset:hover { background: var(--background-modifier-hover); }
.bc-research-preset[aria-pressed="true"] { border-color: var(--interactive-accent); }
.bc-research-preset[aria-pressed="mixed"],
.bc-research-intensity[aria-pressed="mixed"] { border: 1px dashed var(--interactive-accent); }
.bc-research-preview {
  --bc-research-accent: #a84e34;
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1.65;
  padding: 13px 12px;
  border: 1px solid #d9d9ce;
  background: #fffdf7;
  box-sizing: border-box;
  overflow: hidden;
}
.bc-research-preview::before { content: ""; display: block; height: 4px; width: 64%; background: var(--bc-research-accent); margin-bottom: 9px; }
.bc-research-preview::after { content: ""; display: block; width: 88%; height: 16px; background: repeating-linear-gradient(#c3c6b8 0 1px, transparent 1px 5px); }
.bc-research-preview[data-bc-research-preset="source"] { border-left: 5px solid var(--bc-research-accent); box-shadow: inset 0 0 0 3px #fffdf7, inset 0 0 0 4px #e3dfd0; }
.bc-research-preview[data-bc-research-preset="quote"] { --bc-research-accent: #b48a28; background: #ebd898; border-bottom: 3px solid var(--bc-research-accent); }
.bc-research-preview[data-bc-research-preset="quote"]::before { width: 100%; height: 17px; background: #fffcdf77; border-block: 1px solid var(--bc-research-accent); margin-bottom: 6px; }
.bc-research-preview[data-bc-research-preset="annotation"] { --bc-research-accent: #416879; background: #ced6d6; border-left: 2px solid var(--bc-research-accent); padding-left: 19px; }
.bc-research-preview[data-bc-research-preset="annotation"]::after { height: 26px; width: 100%; background: repeating-linear-gradient(transparent 0 6px, #889da77a 6px 7px); }
.bc-research-preview[data-bc-research-preset="argument"] { --bc-research-accent: #63734a; padding-top: 30px; }
.bc-research-preview[data-bc-research-preset="argument"]::before { position: absolute; inset: 0 0 auto; width: 100%; height: 23px; }
.bc-research-preview[data-bc-research-preset="question"] { --bc-research-accent: #63734a; border: 1px dashed var(--bc-research-accent); border-radius: 9px; background: #ebeddf; }
.bc-research-preview[data-bc-research-preset="question"]::before { width: 75%; margin-inline: auto; }
.bc-research-preview[data-bc-research-preset="section"] { --bc-research-accent: #416879; border: 0; border-top: 2px solid var(--bc-research-accent); background: transparent; padding: 22px 1px 0; }
.bc-research-preview[data-bc-research-preset="section"]::before { width: 90%; height: 10px; box-shadow: 0 5px #41687929; }
.bc-research-preview[data-bc-research-preset="section"]::after { display: none; }
.bc-research-intensities { display: flex; gap: 4px; }
.bc-research-intensity { flex: 1; padding: 5px; background: var(--background-secondary); color: var(--text-normal); box-shadow: none; }
.bc-research-intensity[aria-pressed="true"] { background: #dce0d1; }
.bc-theme-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-theme-mini-board[data-bc-theme="research"] { background: #eeece5; }
.bc-theme-mini-board[data-bc-theme="research"] .bc-theme-mini-caption { color: #a84e34; font-family: var(--bc-research-serif); }
.bc-theme-mini-board[data-bc-theme="research"] .bc-research-preview { position: absolute; width: 70px; height: 56px; }
.bc-theme-mini-board[data-bc-theme="research"] .bc-mini-source { left: 18px; top: 57px; }
.bc-theme-mini-board[data-bc-theme="research"] .bc-mini-quote { right: 20px; top: 40px; }
.bc-theme-mini-board[data-bc-theme="research"] .bc-mini-argument { right: 32px; top: 107px; height: 40px; }

/* Directional node, including its non-theme fallback. */
:is(.canvas-node[data-bc-shape="right-arrow"], .bc-node-shape-preview.shape-right-arrow) {
  --bc-shape-outline: polygon(0 20%, 68% 20%, 68% 0, 100% 50%, 68% 100%, 68% 80%, 0 80%);
  --bc-ring-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,20 68,20 68,0 100,50 68,100 68,80 0,80' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --bc-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,20 68,20 68,0 100,50 68,100 68,80 0,80' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='8 5'/%3E%3C/svg%3E");
  --bc-ring-dotted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,20 68,20 68,0 100,50 68,100 68,80 0,80' fill='none' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke' stroke-dasharray='1 4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bc-node-shape-preview:is(.shape-right-arrow, .shape-parallelogram) {
  border: 0;
  border-radius: 0;
  /* CanIUse #2 concerns external SVG clips; this variable contains polygon(). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-shape-outline);
  /* doiuse-enable css-clip-path */
  background: var(--text-muted);
}

/* Rounded Map keeps native rectangular anchors and paints only their faces. */
.canvas-wrapper[data-bc-theme="rounded-map"] {
  --bc-rounded-ink: #34372f;
  --bc-rounded-line: #34372f;
  --bc-rounded-paper: #faf9f5;
  --bc-rounded-dot: #dedfd6;
  --canvas-background: var(--bc-rounded-paper);
  --canvas-dot-pattern: var(--bc-rounded-dot);
  --canvas-color: #c8dff3;
  --text-normal: var(--bc-rounded-ink);
  --text-muted: #62685b;
  --canvas-edge-color: var(--bc-rounded-line);
  --canvas-edge-width: 3px;
  background-color: var(--bc-rounded-paper);
}
.theme-dark .canvas-wrapper[data-bc-theme="rounded-map"] {
  --bc-rounded-ink: #20262d;
  --bc-rounded-line: #aab3c2;
  --bc-rounded-paper: #202329;
  --bc-rounded-dot: #353a43;
  --text-normal: #dce2ec;
  --text-muted: #aab3c2;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-background {
  background-color: var(--bc-rounded-paper);
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node:not(.canvas-node-group) .canvas-node-container {
  background: var(--canvas-color, #c8dff3);
  color: var(--bc-rounded-ink);
  border-color: var(--bc-node-border-color, var(--bc-rounded-ink));
  border-width: 4px;
  box-shadow: none;
}
.theme-dark .canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node:not(.canvas-node-group) .canvas-node-container {
  background: color-mix(in srgb, var(--canvas-color, #c8dff3) 84%, var(--bc-rounded-paper));
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded] {
  --text-normal: var(--bc-rounded-ink);
  --text-muted: #515b60;
  --text-faint: #6c747c;
  --text-accent: #315b86;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded] .canvas-node-container {
  border: 0;
  border-radius: 0;
  /* CanIUse #2 concerns external SVG clips; this variable contains path(). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-rounded-clip);
  /* doiuse-enable css-clip-path */
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded]::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bc-rounded-ink);
  mask: var(--bc-rounded-ring) 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--bc-rounded-ring) 0 0 / 100% 100% no-repeat;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded][data-bc-border="dashed"]::after {
  mask-image: var(--bc-rounded-dashed);
  -webkit-mask-image: var(--bc-rounded-dashed);
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded][data-bc-border="dotted"]::after {
  mask-image: var(--bc-rounded-dotted);
  -webkit-mask-image: var(--bc-rounded-dotted);
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded][data-bc-border="double"]::after {
  mask-image: var(--bc-rounded-ring), var(--bc-rounded-ring);
  -webkit-mask-image: var(--bc-rounded-ring), var(--bc-rounded-ring);
  mask-size: 100% 100%, calc(100% - 12px) calc(100% - 12px);
  -webkit-mask-size: 100% 100%, calc(100% - 12px) calc(100% - 12px);
  mask-position: 0 0, 6px 6px;
  -webkit-mask-position: 0 0, 6px 6px;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded]:is([data-bc-border="invisible"], [data-bc-border="none"])::after {
  display: none;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded]:is(.is-selected, .is-focused, .is-editing)::before {
  content: "";
  position: absolute;
  /* Mirrors Obsidian's fixed 2px selection ring instead of a percentage
     scale, which made the gap grow with the node while it was resized. */
  inset: calc(-1 * var(--bc-rounded-selection-inset, 10px));
  pointer-events: none;
  background: var(--color-accent);
  opacity: .85;
  mask: var(--bc-rounded-selection) 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--bc-rounded-selection) 0 0 / 100% 100% no-repeat;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node[data-bc-rounded] .canvas-node-content {
  box-sizing: border-box;
  padding: var(--bc-rounded-padding);
  background: transparent;
  color: var(--bc-rounded-ink);
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node-content :is(.markdown-preview-view, .markdown-source-view, .cm-editor, .cm-scroller) {
  color: var(--bc-rounded-ink);
  background: transparent;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node-content .markdown-preview-view {
  padding: 0;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node-content .markdown-preview-sizer {
  min-height: auto;
  margin-block: auto;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node-content :is(p, h1, h2, h3) {
  margin-block: .4em;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-node-content {
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-edges {
  --canvas-color: var(--bc-rounded-line);
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-edges path {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-path-label {
  background: var(--bc-rounded-paper);
  border: 1px solid var(--bc-rounded-dot);
  border-radius: 12px;
  color: var(--bc-rounded-line);
}
.canvas-wrapper[data-bc-theme="rounded-map"] .canvas-group-label {
  color: var(--bc-rounded-line);
}
.bc-rounded-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bc-rounded-preset {
  display: grid;
  place-items: center;
  height: 96px;
  padding: 6px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 14px;
  box-shadow: none;
  background: var(--background-secondary);
}
.bc-rounded-preset.is-selected { border-color: var(--color-accent); background: var(--background-modifier-hover); }
.bc-rounded-preset.is-mixed { border-style: dashed; border-color: var(--color-accent); }
.bc-rounded-preset:disabled { opacity: .45; }
.bc-rounded-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 80px;
  color: #34372f;
  font: 600 11px "Avenir Next", "PingFang SC", sans-serif;
}
.bc-rounded-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bc-rounded-fill, #c8dff3);
  /* CanIUse #2 concerns external SVG clips; this variable contains path(). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-rounded-clip);
  /* doiuse-enable css-clip-path */
}
.bc-rounded-preview::after, .bc-node-shape-preview.bc-rounded-shape-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #34372f;
  mask: var(--bc-rounded-ring) 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--bc-rounded-ring) 0 0 / 100% 100% no-repeat;
}
.bc-rounded-preview > span { position: relative; padding: 0 18px; text-align: center; }
.bc-node-shape-preview.bc-rounded-shape-preview {
  position: relative;
  width: 32px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: #c8dff3;
  /* CanIUse #2 concerns external SVG clips; this variable contains path(). */
  /* doiuse-disable css-clip-path */
  clip-path: var(--bc-rounded-clip);
  /* doiuse-enable css-clip-path */
}
.bc-theme-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-theme-mini-board[data-bc-theme="rounded-map"] {
  background: radial-gradient(#dedfd6 .8px, transparent .8px) 0 0 / 14px 14px #faf9f5;
}
.bc-theme-mini-board[data-bc-theme="rounded-map"] svg { stroke: #34372f; stroke-width: 2.5; }
.bc-theme-mini-board .bc-rounded-preview { position: absolute; width: 88px; height: 54px; font-size: 9px; }
.bc-mini-rounded-terminal { left: 14px; top: 54px; }
.bc-mini-rounded-process { right: 14px; top: 42px; }
.bc-mini-rounded-decision { right: 28px; top: 101px; }

/* Measured shape insets take precedence over preset padding. Keep this after
   theme rules: the wrapper scope ties their specificity without priorities,
   while the unscoped form also serves detached layout measurement nodes. */
.canvas-node[data-bc-auto-resize="true"][data-bc-auto-shape="true"] .canvas-node-content,
.canvas-wrapper .canvas-node[data-bc-auto-resize="true"][data-bc-auto-shape="true"] .canvas-node-content {
  padding: var(--bc-auto-content-padding);
}