@scribdown/ui-handdrawn 0.1.0

package/src/styles/toolbar.css

@@ -0,0 +1,491 @@
+/* ─── Floating Toolbar ──────────────────────────────────────────────── */
+/* 完全贴右上角，横向排列「目录」+「更多」两个入口，卡片手绘风。 */
+.scribdown-toolbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9000;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--scribdown-color-surface);
+  border: 1.5px solid var(--scribdown-color-border);
+  /* 关键步骤：顶/右两边贴屏，仅左下角需要圆角收口。
+     radius token 是四值手绘简写，无法塞进单角，故先整体套用再把贴屏的三角抹平。 */
+  border-radius: var(--scribdown-radius-md);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: var(--scribdown-shadow-md);
+}
+
+.scribdown-toolbar-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--scribdown-color-text-secondary);
+  cursor: pointer;
+  transition:
+    color var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    background var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+  -webkit-font-smoothing: antialiased;
+}
+
+.scribdown-toolbar-btn:hover {
+  background: color-mix(in srgb, var(--scribdown-color-bg) 70%, transparent);
+  color: var(--scribdown-color-accent);
+}
+
+.scribdown-toolbar-btn:active {
+  background: color-mix(in srgb, var(--scribdown-color-bg) 90%, transparent);
+}
+
+.scribdown-toolbar-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+/* 按钮 tooltip（aria-label），hover 时显示在按钮下方。 */
+.scribdown-toolbar-btn::after {
+  content: attr(aria-label);
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: var(--scribdown-color-text-primary);
+  border-radius: 6px;
+  color: var(--scribdown-color-surface);
+  font-family: var(--scribdown-font-body);
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-btn:hover::after {
+  opacity: 1;
+}
+
+/* ─── 当前章节指示器 ────────────────────────────────────── */
+/* 工具栏最左侧窄条：随滚动展示当前可视区所属标题，最宽 30px，超出省略号。 */
+.scribdown-toolbar-current {
+  position: relative;
+  display: flex;
+  align-items: center;
+  /* 关键步骤：撑满工具栏高度，使右侧分隔线为整条高度，划开「文字区 / 按钮区」。 */
+  align-self: stretch;
+  margin-right: 2px;
+  padding: 0 6px 0 4px;
+  border-right: 1px solid
+    color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
+  /* 关键步骤：可点击跳转到当前章节标题。 */
+  cursor: pointer;
+}
+
+.scribdown-toolbar-current:focus-visible {
+  outline: 2px solid var(--scribdown-color-accent);
+  outline-offset: -2px;
+}
+
+.scribdown-toolbar-current-text {
+  /* 关键步骤：标题内容最宽 120px，溢出以省略号收尾。 */
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--scribdown-font-body);
+  font-size: 12px;
+  line-height: 1.2;
+  color: var(--scribdown-color-text-secondary);
+  transition: color var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-current:hover .scribdown-toolbar-current-text {
+  color: var(--scribdown-color-accent);
+}
+
+/* hover tip：复用工具栏按钮 tip 的视觉语言，展示完整标题。
+   关键步骤：工具栏贴右上角，tip 以指示器右边为锚点向左生长，避免溢出屏幕右侧。 */
+.scribdown-toolbar-current::after {
+  content: attr(aria-label);
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  width: max-content;
+  max-width: min(280px, 70vw);
+  padding: 4px 8px;
+  background: var(--scribdown-color-text-primary);
+  border-radius: 6px;
+  color: var(--scribdown-color-surface);
+  font-family: var(--scribdown-font-body);
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  white-space: normal;
+  word-break: break-word;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+/* 无内容（aria-label 为空）时不显示 tip。 */
+.scribdown-toolbar-current:not([aria-label=""]):hover::after {
+  opacity: 1;
+}
+
+/* 「更多」按钮展开态：保持轻量描边，避免被 hover 态覆盖。 */
+.scribdown-toolbar-btn--more[aria-expanded="true"] {
+  background: color-mix(in srgb, var(--scribdown-color-bg) 90%, transparent);
+  color: var(--scribdown-color-accent);
+}
+
+/* ─── 更多下拉菜单 ──────────────────────────────────────────────── */
+/* 关键步骤：菜单挂在 .scribdown-toolbar 内部，绝对定位到工具栏右下方。 */
+.scribdown-toolbar-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 200px;
+  padding: var(--scribdown-space-1);
+  background: var(--scribdown-color-surface);
+  border: 1.5px solid var(--scribdown-color-border);
+  border-radius: var(--scribdown-radius-md);
+  box-shadow: var(--scribdown-shadow-md);
+  /* 关键步骤：菜单默认隐藏并保留过渡，open 后再淡入。 */
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    opacity var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    transform var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    visibility var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-menu.is-open {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+  visibility: visible;
+}
+
+/* 单个菜单项：横向 icon + 文本。 */
+.scribdown-toolbar-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--scribdown-space-2);
+  width: 100%;
+  padding: 8px 10px;
+  background: transparent;
+  border: 0;
+  border-radius: var(--scribdown-radius-sm);
+  color: var(--scribdown-color-text-primary);
+  font-family: var(--scribdown-font-body);
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    background var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-menu-item:hover {
+  background: color-mix(in srgb, var(--scribdown-color-bg) 70%, transparent);
+  color: var(--scribdown-color-accent);
+}
+
+.scribdown-toolbar-menu-item svg {
+  flex-shrink: 0;
+  color: var(--scribdown-color-text-secondary);
+}
+
+.scribdown-toolbar-menu-item:hover svg {
+  color: var(--scribdown-color-accent);
+}
+
+/* 下拉选择分组：触发行 + 可折叠的档位列表。 */
+.scribdown-toolbar-menu-group {
+  display: flex;
+  flex-direction: column;
+  /* 关键步骤：和上方菜单项之间用一条柔和分隔线划开层级。 */
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid
+    color-mix(in srgb, var(--scribdown-color-border) 70%, transparent);
+}
+
+/* 触发行：复用 .scribdown-toolbar-menu-item 样式，右侧追加当前值 + chevron。 */
+.scribdown-toolbar-menu-item--select {
+  justify-content: flex-start;
+}
+
+.scribdown-toolbar-menu-select-label {
+  flex: 1;
+}
+
+.scribdown-toolbar-menu-select-value {
+  font-family: var(--scribdown-font-code);
+  font-size: 12px;
+  color: var(--scribdown-color-text-secondary);
+}
+
+.scribdown-toolbar-menu-item--select:hover .scribdown-toolbar-menu-select-value {
+  color: var(--scribdown-color-accent);
+}
+
+.scribdown-toolbar-menu-select-chevron {
+  flex-shrink: 0;
+  color: var(--scribdown-color-text-secondary);
+  transition: transform var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-menu-group.is-open .scribdown-toolbar-menu-select-chevron {
+  transform: rotate(180deg);
+  color: var(--scribdown-color-accent);
+}
+
+/* 档位列表：默认折叠，is-open 时用 max-height + padding 平滑展开。 */
+.scribdown-toolbar-menu-group-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  /* 关键步骤：与触发行文字左对齐（icon 16 + gap 8 = 24，再多 4 给视觉缩进）。 */
+  padding: 0 4px 0 28px;
+  max-height: 0;
+  overflow: hidden;
+  transition:
+    max-height var(--scribdown-duration-base) var(--scribdown-easing-standard),
+    padding var(--scribdown-duration-base) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-menu-group.is-open .scribdown-toolbar-menu-group-choices {
+  /* 关键步骤：固定档位最多 4 档 × 30px ≈ 160px，给点冗余兜底字体加大。 */
+  max-height: 200px;
+  padding: 4px 4px 4px 28px;
+}
+
+/* 档位选项：垂直列表项，左侧勾选位预留固定宽度，避免选中切换时文本抖动。 */
+.scribdown-toolbar-menu-sub-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  background: transparent;
+  border: 0;
+  border-radius: var(--scribdown-radius-sm);
+  color: var(--scribdown-color-text-secondary);
+  font-family: var(--scribdown-font-code);
+  font-size: 12px;
+  line-height: 1.2;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    background var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-menu-sub-item-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: var(--scribdown-color-accent);
+  /* 关键步骤：未选中时仅隐藏视觉，保留布局占位。 */
+  visibility: hidden;
+}
+
+.scribdown-toolbar-menu-sub-item-mark svg {
+  display: block;
+}
+
+.scribdown-toolbar-menu-sub-item[aria-selected="true"] .scribdown-toolbar-menu-sub-item-mark {
+  visibility: visible;
+}
+
+.scribdown-toolbar-menu-sub-item:hover {
+  background: color-mix(in srgb, var(--scribdown-color-bg) 70%, transparent);
+  color: var(--scribdown-color-accent);
+}
+
+.scribdown-toolbar-menu-sub-item[aria-selected="true"] {
+  color: var(--scribdown-color-accent);
+}
+
+/* ─── 目录侧栏 + 正文布局 ────────────────────────────────────── */
+/* 关键步骤：mountMarkdownToolbar 时给 container（即 .scribdown-page 渲染根）加 .scribdown-toc-host，
+   并把已有内容包进 .scribdown-content-area > .scribdown-content-scroll：
+   - 渲染根：flex 横向布局，TOC 与正文并排；定高 + overflow:hidden，整页（window）不滚动。
+   - content-area：flex item，占满 TOC 之外的剩余宽度，仅作定位上下文（自身不滚动）。
+   - content-scroll：absolute + inset:0 铺满 content-area，正文的横向 + 纵向滚动都发生在此层。
+   这样 TOC 开合时正文自然让位，滚动收敛在内部、外层稳定不动。 */
+.scribdown-toc-host {
+  display: flex;
+  align-items: stretch;
+  /* TOC 宽度提到容器层，供 TOC 自身定宽 / 折叠位移共用。 */
+  --scribdown-toc-width: min(280px, 70vw);
+  /* 关键步骤：定高铺满视口；overflow:hidden 让整页不滚动，
+     折叠态 TOC（负 margin）也被裁切，滚动全部下沉到 content-scroll。 */
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* 关键步骤：当 flex 布局根挂在 .scribdown-page 内层的满宽外壳上时（推荐结构，避免把 body 变成 flex 根），
+   body 自身仍是普通块流。此时把 body 也裁掉：整页滚动收敛在 content-scroll，且第三方漏到 body 的
+   绝对定位浮层（如 mermaid 渲染时留下的 .mermaidTooltip）不会撑出多余的整页滚动条。
+   仅在外壳确实成为 toc-host（工具栏已挂载）时生效，不影响「未挂工具栏 / 渲染期」的正常整页滚动。 */
+.scribdown-page:has(> .scribdown-toc-host) {
+  overflow: hidden;
+}
+
+.scribdown-content-area {
+  /* 占满 TOC 之外的剩余宽度；min-width:0 解除 flex item 默认最小尺寸，允许收窄交给内部滚动。 */
+  flex: 1 1 0;
+  min-width: 0;
+  /* 关键步骤：作为内部滚动层与光标高亮等绝对定位浮层的定位上下文（自身不滚动）。 */
+  position: relative;
+}
+
+.scribdown-content-scroll {
+  /* 关键步骤：脱离 flex 尺寸链，以 absolute + inset:0 精确铺满 content-area，
+     正文超宽（表格 / 代码块）走横向滚动、超高走纵向滚动，都收敛在本层内部。 */
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+
+/* 目录侧栏：flex item 贴最左，固定宽度；默认 margin-left 负值收进容器左外，is-open 归零滑入。 */
+.scribdown-toolbar-toc-panel {
+  --scribdown-toc-width: min(280px, 70vw);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--scribdown-toc-width);
+  /* 关键步骤：填满外层容器高度（flex stretch 对齐 + 显式 100% 兜底），
+     内部支持横向 + 纵向滚动，超长 / 超宽目录条目在面板内自滚。 */
+  height: 100%;
+  /* 关键步骤：overlay 让滚动条悬浮在内容之上、不预留宽度，目录条目不被挤窄；
+     overflow:auto 作为不支持 overlay 时的兜底（仍可滚动，仅会预留滚动条宽度）。
+     滚动条的粗细 / 配色由 .scribdown-scrollbar-thin 统一提供（挂载时一并加到本元素上）。 */
+  overflow: auto;
+  overflow: overlay;
+  background: var(--scribdown-color-surface);
+  border-right: 1.5px solid var(--scribdown-color-border);
+  box-shadow: var(--scribdown-shadow-md);
+  padding: var(--scribdown-space-4);
+  /* 关键步骤：margin-left 负值占据负向布局空间收起，正文 flex:1 自然占满全宽；
+     切到 0 时正文让出 var(--scribdown-toc-width)，整体平滑过渡。 */
+  margin-left: calc(-1 * var(--scribdown-toc-width));
+  transition: margin-left var(--scribdown-duration-base) var(--scribdown-easing-standard);
+  z-index: 9001;
+}
+
+.scribdown-toolbar-toc-panel.is-open {
+  margin-left: 0;
+}
+
+/* ─── 通用细滚动条（主题色，opt-in）────────────────────────────────
+   目录侧栏（.scribdown-toolbar-toc-panel）与正文滚动层（.scribdown-content-scroll）共用：
+   挂载时显式给滚动容器加 .scribdown-scrollbar-thin 引入，不在此罗列各容器选择器。
+   - 标准 scrollbar-width / scrollbar-color：新版 Chromium / Firefox / VS Code Webview 生效；
+     VS Code Webview 会在根元素注入并向下继承 scrollbar-color，显式声明可覆盖宿主值。
+   - ::-webkit-scrollbar：仅作不支持标准属性的旧引擎兜底（标准属性一旦生效会停用 webkit 伪元素）。 */
+.scribdown-scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--scribdown-color-accent) 60%, transparent) transparent;
+}
+
+.scribdown-scrollbar-thin::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scribdown-scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scribdown-scrollbar-thin::-webkit-scrollbar-thumb {
+  /* border + background-clip:content-box 让拇指四周留白、悬浮感更强；2px 边框后可见拇指仅 4px。
+     颜色取主题强调色（accent）的半透明，与目录链接同色系。 */
+  background-color: color-mix(in srgb, var(--scribdown-color-accent) 55%, transparent);
+  background-clip: content-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
+}
+
+.scribdown-scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--scribdown-color-accent) 80%, transparent);
+}
+
+.scribdown-toolbar-toc-panel-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--scribdown-space-2);
+  font-family: var(--scribdown-font-heading);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--scribdown-color-accent);
+  margin: 0 0 var(--scribdown-space-2);
+  padding-bottom: var(--scribdown-space-2);
+  border-bottom: 1px solid var(--scribdown-color-border);
+}
+
+/* 抽屉关闭按钮：右上角 × 图标，hover 时点亮。 */
+.scribdown-toolbar-toc-panel-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--scribdown-color-text-secondary);
+  cursor: pointer;
+  transition:
+    color var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    background var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-toolbar-toc-panel-close:hover {
+  background: color-mix(in srgb, var(--scribdown-color-bg) 70%, transparent);
+  color: var(--scribdown-color-accent);
+}
+
+.scribdown-toolbar-toc-panel-close svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+/* 抽屉内目录条目复用 .scribdown-toc-* 样式（见 toc.css），
+   这里仅做抽屉环境下的字号微调与空态文案样式。 */
+.scribdown-toolbar-toc-panel .scribdown-toc-nav {
+  margin-top: 0;
+}
+
+.scribdown-toolbar-toc-panel .scribdown-toc-nav a {
+  font-family: var(--scribdown-font-body);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.scribdown-toolbar-toc-panel-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--scribdown-color-text-secondary);
+}

package/src/styles/video.css

@@ -0,0 +1,195 @@
+/* VideoRenderer：块级 video 转换为 figure，边框沿用 image-frame 同源 SVG 平铺。 */
+.scribdown-markdown .scribdown-video-figure {
+  width: min(100%, 720px);
+  margin: 0 auto var(--scribdown-space-3);
+}
+
+.scribdown-markdown .scribdown-video-frame {
+  position: relative;
+  isolation: isolate;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px;
+  overflow: visible;
+  background:
+    radial-gradient(circle at 18px 20px, var(--scribdown-paper-grain) 0 1px, transparent 1.6px),
+    color-mix(in srgb, var(--scribdown-color-surface) 92%, var(--scribdown-color-border) 8%);
+  background-size:
+    32px 29px,
+    auto;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* 关键步骤：复用 blockquote 的 frame-edge SVG 平铺，与图片 frame 视觉对齐。 */
+.scribdown-markdown .scribdown-video-frame::after {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    var(--scribdown-frame-edge-horizontal), var(--scribdown-frame-edge-horizontal),
+    var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
+  background-position:
+    left top,
+    left bottom,
+    left top,
+    right top;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  background-size:
+    var(--scribdown-frame-edge-tile-horizontal),
+    var(--scribdown-frame-edge-tile-horizontal),
+    var(--scribdown-frame-edge-tile-vertical),
+    var(--scribdown-frame-edge-tile-vertical);
+}
+
+@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
+  .scribdown-markdown .scribdown-video-frame::after {
+    /* 关键步骤：用 mask 保留 SVG 形状，描边色交给 frame-edge-color token，便于主题化。 */
+    background-color: var(--scribdown-frame-edge-color);
+    background-image: none;
+    -webkit-mask-image:
+      var(--scribdown-frame-edge-horizontal), var(--scribdown-frame-edge-horizontal),
+      var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
+    -webkit-mask-position:
+      left top,
+      left bottom,
+      left top,
+      right top;
+    -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    -webkit-mask-size:
+      var(--scribdown-frame-edge-tile-horizontal),
+      var(--scribdown-frame-edge-tile-horizontal),
+      var(--scribdown-frame-edge-tile-vertical),
+      var(--scribdown-frame-edge-tile-vertical);
+    -webkit-mask-mode: alpha, alpha, alpha, alpha;
+    mask-image:
+      var(--scribdown-frame-edge-horizontal), var(--scribdown-frame-edge-horizontal),
+      var(--scribdown-frame-edge-vertical), var(--scribdown-frame-edge-vertical);
+    mask-position:
+      left top,
+      left bottom,
+      left top,
+      right top;
+    mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    mask-size:
+      var(--scribdown-frame-edge-tile-horizontal),
+      var(--scribdown-frame-edge-tile-horizontal),
+      var(--scribdown-frame-edge-tile-vertical),
+      var(--scribdown-frame-edge-tile-vertical);
+    mask-mode: alpha, alpha, alpha, alpha;
+  }
+}
+
+.scribdown-markdown .scribdown-video {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  background: #000;
+  border: 0;
+  border-radius: 6px 7px 5px 6px;
+  box-shadow: none;
+}
+
+.scribdown-markdown .scribdown-video:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--scribdown-color-accent) 72%, transparent);
+  outline-offset: 4px;
+}
+
+.scribdown-markdown .scribdown-video-fallback {
+  display: none;
+}
+
+.scribdown-markdown .scribdown-video-frame--failed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  padding: var(--scribdown-space-4);
+  background:
+    radial-gradient(circle at 18px 20px, var(--scribdown-paper-grain) 0 1px, transparent 1.6px),
+    color-mix(in srgb, var(--scribdown-color-surface) 88%, transparent);
+}
+
+.scribdown-markdown .scribdown-video-frame--failed::after {
+  background-image:
+    var(--scribdown-rough-line-dash-horizontal),
+    var(--scribdown-rough-line-dash-horizontal),
+    var(--scribdown-rough-line-dash-vertical), var(--scribdown-rough-line-dash-vertical);
+  background-size:
+    64px 8px,
+    64px 8px,
+    8px 64px,
+    8px 64px;
+}
+
+.scribdown-markdown .scribdown-video-frame--failed .scribdown-video {
+  display: none;
+}
+
+.scribdown-markdown .scribdown-video-frame--failed .scribdown-video-fallback {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  color: var(--scribdown-color-text-primary);
+  text-align: center;
+}
+
+/* 失败态图标：手绘风方框 + 居中三角形播放符号，区别于图片裂痕图标。 */
+.scribdown-markdown .scribdown-video-fallback-icon {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  width: 58px;
+  height: 46px;
+  margin-bottom: var(--scribdown-space-3);
+  border: 2px solid var(--scribdown-color-text-primary);
+  background: color-mix(in srgb, var(--scribdown-color-surface) 78%, var(--scribdown-color-accent) 8%);
+  transform: rotate(-1.5deg);
+}
+
+.scribdown-markdown .scribdown-video-fallback-icon::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 9px 0 9px 14px;
+  border-color: transparent transparent transparent var(--scribdown-color-accent);
+  transform: translate(-40%, -50%);
+}
+
+.scribdown-markdown .scribdown-video-fallback-text {
+  font-family: var(--scribdown-font-heading);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.scribdown-markdown .scribdown-video-fallback-source {
+  max-width: 100%;
+  margin-top: 4px;
+  overflow-wrap: anywhere;
+  color: var(--scribdown-color-text-secondary);
+  font-family: var(--scribdown-font-code);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.scribdown-markdown :not(.scribdown-video-frame) > video {
+  display: block;
+  width: 100%;
+  max-width: 720px;
+  height: auto;
+  margin: 0 auto var(--scribdown-space-3);
+  background: #000;
+  border-radius: var(--scribdown-radius-md);
+}