@scribdown/ui-handdrawn 0.1.0

package/src/styles/code.css

@@ -0,0 +1,573 @@
+/* InlineCode：轻量纸底，避免和 frame 四边框重复。 */
+.scribdown-markdown code {
+  font-family: var(--scribdown-font-code);
+  font-size: inherit;
+  font-weight: 500;
+  color: inherit;
+  padding: 1px 6px 2px;
+  border-radius: 7px 9px 8px 10px;
+  background: color-mix(
+    in srgb,
+    var(--scribdown-color-surface) 82%,
+    var(--scribdown-color-mark) 18%
+  );
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--scribdown-color-border) 46%, transparent);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* CodeBlock：简单描边 + 顶部 chrome（语言标签 / 复制按钮） + 正文 + 行号。 */
+.scribdown-markdown .scribdown-code-block {
+  /* 主紫色：用于代码块边框、标签与按钮描边。 */
+  --scribdown-code-ink: var(--scribdown-color-code-ink);
+  /* 代码正文文字色跟随当前主题正文颜色。 */
+  --scribdown-code-text: var(--scribdown-color-text-primary);
+  /* 语言标签边框色 token。 */
+  --scribdown-code-block-lang-border-token: var(--scribdown-code-ink);
+  /* 语言标签边框填充色。 */
+  --scribdown-code-block-lang-border-fill: color-mix(
+    in srgb,
+    var(--scribdown-code-block-lang-border-token) 72%,
+    transparent
+  );
+  /* 语言标签排线色 token。 */
+  --scribdown-code-block-lang-hatch-token: var(--scribdown-color-warning);
+  /* 语言标签排线填充色（需与边框色不同）。 */
+  --scribdown-code-block-lang-hatch-fill: color-mix(
+    in srgb,
+    var(--scribdown-code-block-lang-hatch-token) 44%,
+    transparent
+  );
+  /* chrome 内容行高度。 */
+  --scribdown-code-chrome-height: 36px;
+  /* 行号列宽度。 */
+  --scribdown-code-line-number-width: 32px;
+  /* 行号与代码正文之间的间距。 */
+  --scribdown-code-line-number-gap: 8px;
+  /* 行号列总宽（列宽 + 间距），用于正文缩进与分隔线定位。 */
+  --scribdown-code-line-gutter-width: calc(
+    var(--scribdown-code-line-number-width) + var(--scribdown-code-line-number-gap)
+  );
+  /* 代码块正文最大高度：取视口 60% 与 32rem 的较小值，避免超长代码块独占屏幕。 */
+  --scribdown-code-block-max-height: min(60vh, 32rem);
+
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
+  margin: 32px 0 36px;
+  /* chrome 改为文档流布局后不再需要顶部预留。 */
+  padding: 0px 0;
+  background: var(--scribdown-color-surface);
+  overflow: visible;
+  isolation: isolate;
+}
+
+/* 关键步骤：和 blockquote::after 一样用横向 / 纵向 SVG 边条平铺，形成可伸缩手绘边框。 */
+.scribdown-markdown .scribdown-code-block::after {
+  content: "";
+  position: absolute;
+  z-index: 3;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  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,
+    50% bottom,
+    left 40%,
+    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);
+}
+
+/* 顶部 chrome：使用相对定位并处于文档流内，避免依赖外层预留 padding。 */
+.scribdown-markdown .scribdown-code-block__chrome {
+  position: relative;
+  z-index: 2;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--scribdown-code-chrome-height);
+  margin: 0px 4px 0;
+  padding: 0px 4px;
+  background: var(--scribdown-color-surface);
+  border-radius: 8px 10px 0 0;
+  pointer-events: none;
+}
+
+/* 关键步骤：chrome 背景纹理改用 rect-shadow.svg。 */
+.scribdown-markdown .scribdown-code-block__chrome::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background-image: var(--scribdown-code-block-rect-shadow);
+  background-position: center;
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+}
+
+/* 关键步骤：保证语言标签和复制按钮位于纹理层之上。 */
+.scribdown-markdown .scribdown-code-block__chrome > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* 关键步骤：chrome 底部增加手绘边线，与代码块外框风格保持一致。 */
+.scribdown-markdown .scribdown-code-block__chrome::after {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  left: 0px;
+  right: -1px;
+  bottom: -1px;
+  height: 6px;
+  pointer-events: none;
+  background-image: var(--scribdown-frame-edge-horizontal);
+  background-repeat: repeat-x;
+  background-size: var(--scribdown-frame-edge-tile-horizontal);
+  background-position: left bottom;
+}
+
+@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
+  .scribdown-markdown .scribdown-code-block::after {
+    /* 关键步骤：用 mask 保留 SVG 形状，描边色由 code-ink 接管，便于主题化。 */
+    background-color: var(--scribdown-code-ink);
+    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,
+      50% bottom,
+      left 40%,
+      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,
+      50% bottom,
+      left 40%,
+      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-code-block__chrome::before {
+    /* 关键步骤：使用 mask 仅保留纹理形状，颜色由 token 统一控制。 */
+    background-color: var(--scribdown-code-block-chrome-shadow-fill);
+    background-image: none;
+    -webkit-mask-image: var(--scribdown-code-block-rect-shadow);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: repeat-x;
+    -webkit-mask-size: auto 100%;
+    -webkit-mask-mode: alpha;
+    mask-image: var(--scribdown-code-block-rect-shadow);
+    mask-position: center;
+    mask-repeat: repeat-x;
+    mask-size: auto 100%;
+    mask-mode: alpha;
+  }
+
+  .scribdown-markdown .scribdown-code-block__chrome::after {
+    background-color: var(--scribdown-code-ink);
+    background-image: none;
+    -webkit-mask-image: var(--scribdown-frame-edge-horizontal);
+    -webkit-mask-repeat: repeat-x;
+    -webkit-mask-size: var(--scribdown-frame-edge-tile-horizontal);
+    -webkit-mask-position: left bottom;
+    -webkit-mask-mode: alpha;
+    mask-image: var(--scribdown-frame-edge-horizontal);
+    mask-repeat: repeat-x;
+    mask-size: var(--scribdown-frame-edge-tile-horizontal);
+    mask-position: left bottom;
+    mask-mode: alpha;
+  }
+}
+
+/* 左侧语言标签：叠加 tag.svg 背景，保留手绘质感。 */
+.scribdown-markdown .scribdown-code-block__lang {
+  /* 关键步骤：用 inline-flex 让文字在 min-height 内纵向居中。 */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  isolation: isolate;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-height: 36px;
+  margin-left: 2px;
+  /* 关键步骤：::before 向右溢出 16px，左侧 padding 加宽以让文字在可见标签内水平居中。 */
+  padding: 6px 10px 6px 26px;
+  border-radius: 8px 12px 9px 11px;
+  color: var(--scribdown-code-ink);
+  font-family: var(--scribdown-font-code);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: 0.01em;
+  text-align: center;
+  white-space: nowrap;
+  text-transform: lowercase;
+  pointer-events: auto;
+  user-select: none;
+}
+
+/* 关键步骤：语言标签背景分层，body 可重复，左右边界固定在两侧；边框层与排线层拆开着色以独立配置颜色。 */
+.scribdown-markdown .scribdown-code-block__lang::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  box-sizing: border-box;
+  top: 0px;
+  right: -16px;
+  bottom: 0px;
+  left: 0px;
+  padding-right: var(--scribdown-code-block-lang-tag-right-safe-width);
+  pointer-events: none;
+  background-color: transparent;
+  background-image:
+    linear-gradient(
+      var(--scribdown-code-block-lang-border-fill),
+      var(--scribdown-code-block-lang-border-fill)
+    ),
+    linear-gradient(
+      var(--scribdown-code-block-lang-border-fill),
+      var(--scribdown-code-block-lang-border-fill)
+    ),
+    linear-gradient(
+      var(--scribdown-code-block-lang-border-fill),
+      var(--scribdown-code-block-lang-border-fill)
+    ),
+    linear-gradient(
+      var(--scribdown-code-block-lang-hatch-fill),
+      var(--scribdown-code-block-lang-hatch-fill)
+    ),
+    linear-gradient(
+      var(--scribdown-code-block-lang-hatch-fill),
+      var(--scribdown-code-block-lang-hatch-fill)
+    );
+  background-repeat: no-repeat, no-repeat, repeat-x, no-repeat, repeat-x;
+  background-position:
+    left center,
+    right center,
+    left center,
+    right center,
+    left center;
+  background-size:
+    auto 100%,
+    auto 100%,
+    auto 100%,
+    auto 100%,
+    auto 100%;
+  background-origin:
+    border-box,
+    border-box,
+    content-box,
+    border-box,
+    content-box;
+  background-clip:
+    border-box,
+    border-box,
+    content-box,
+    border-box,
+    content-box;
+  -webkit-mask-image:
+    var(--scribdown-code-block-lang-tag-left-line),
+    var(--scribdown-code-block-lang-tag-right-outline),
+    var(--scribdown-code-block-lang-tag-body-outline),
+    var(--scribdown-code-block-lang-tag-right-hatch),
+    var(--scribdown-code-block-lang-tag-body-hatch);
+  -webkit-mask-repeat: no-repeat, no-repeat, repeat-x, no-repeat, repeat-x;
+  -webkit-mask-position:
+    left center,
+    right center,
+    left center,
+    right center,
+    left center;
+  -webkit-mask-size:
+    auto 100%,
+    auto 100%,
+    auto 100%,
+    auto 100%,
+    auto 100%;
+  -webkit-mask-origin:
+    border-box,
+    border-box,
+    content-box,
+    border-box,
+    content-box;
+  -webkit-mask-clip:
+    border-box,
+    border-box,
+    content-box,
+    border-box,
+    content-box;
+  -webkit-mask-mode: alpha, alpha, alpha, alpha, alpha;
+  mask-image:
+    var(--scribdown-code-block-lang-tag-left-line),
+    var(--scribdown-code-block-lang-tag-right-outline),
+    var(--scribdown-code-block-lang-tag-body-outline),
+    var(--scribdown-code-block-lang-tag-right-hatch),
+    var(--scribdown-code-block-lang-tag-body-hatch);
+  mask-repeat: no-repeat, no-repeat, repeat-x, no-repeat, repeat-x;
+  mask-position:
+    left center,
+    right center,
+    left center,
+    right center,
+    left center;
+  mask-size:
+    auto 100%,
+    auto 100%,
+    auto 100%,
+    auto 100%,
+    auto 100%;
+  mask-origin:
+    border-box,
+    border-box,
+    content-box,
+    border-box,
+    content-box;
+  mask-clip:
+    border-box,
+    border-box,
+    content-box,
+    border-box,
+    content-box;
+  mask-mode: alpha, alpha, alpha, alpha, alpha;
+}
+
+/* 右上角复制按钮：透明背景，SVG 图标，hover/激活态轻染色。 */
+.scribdown-markdown .scribdown-code-block__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 8px 9px 7px 10px;
+  background: transparent;
+  color: var(--scribdown-code-ink);
+  cursor: pointer;
+  pointer-events: auto;
+  transition:
+    background var(--scribdown-duration-fast) var(--scribdown-easing-standard),
+    transform var(--scribdown-duration-fast) var(--scribdown-easing-standard);
+}
+
+.scribdown-markdown .scribdown-code-block__copy:hover {
+  background: color-mix(in srgb, var(--scribdown-code-ink) 14%, transparent);
+}
+
+.scribdown-markdown .scribdown-code-block__copy:active {
+  transform: translateY(1px);
+}
+
+.scribdown-markdown .scribdown-code-block__copy:focus-visible {
+  outline: 2px solid var(--scribdown-code-ink);
+  outline-offset: 2px;
+}
+
+.scribdown-markdown .scribdown-code-block__copy-icon {
+  width: 18px;
+  height: 18px;
+  flex: none;
+}
+
+/* 复制成功时图标切换为对勾，色调由 accent 接管。 */
+.scribdown-markdown
+  .scribdown-code-block__copy[data-scribdown-code-copied="true"]
+  .scribdown-code-block__copy-icon--copy {
+  display: none;
+}
+
+.scribdown-markdown .scribdown-code-block__copy-icon--check {
+  display: none;
+}
+
+.scribdown-markdown
+  .scribdown-code-block__copy[data-scribdown-code-copied="true"]
+  .scribdown-code-block__copy-icon--check {
+  display: inline-block;
+}
+
+/* 正文容器：内部 padding 控制代码与边框的间距，给短代码块也留呼吸空间。 */
+.scribdown-markdown .scribdown-code-block__body {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: var(--scribdown-code-line-gutter-width) minmax(0, 1fr);
+  min-height: 28px;
+  /* 关键步骤：body 统一处理横/纵双向滚动条，行号列用 sticky 钉左侧，
+     避免长代码块的横向滚动条被纵向内容挤到视窗外。 */
+  max-height: var(--scribdown-code-block-max-height);
+  background-color: var(--scribdown-color-surface);
+  overflow: auto;
+  scrollbar-color: color-mix(in srgb, var(--scribdown-code-ink) 30%, transparent) transparent;
+  /* 关键步骤：纵向滚动阴影改用 inset box-shadow + animation-timeline 驱动，
+     由浏览器原生绘制，天然不会画到滚动条凹槽上，无需再硬编码滚动条宽度补偿；
+     横向阴影交给 sticky 的 __gutter 投影承担。
+     animation-range 将淡入压缩到前 80px 滚动距离，避免长代码块下阴影迟迟不饱和。 */
+  animation: scribdown-code-shadow-y linear both;
+  animation-timeline: scroll(self block);
+  animation-range: 0 80px;
+}
+
+@keyframes scribdown-code-shadow-y {
+  from {
+    box-shadow: inset 0 18px 18px -8px transparent;
+  }
+  to {
+    box-shadow: inset 0 18px 18px -8px
+      color-mix(in srgb, var(--scribdown-code-ink) 35%, transparent);
+  }
+}
+
+/* 关键步骤：行号列独立成固定宽度网格列，sticky 钉左侧，body 横向滚动时保持不动。 */
+.scribdown-markdown .scribdown-code-block__gutter {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  grid-column: 1;
+  box-sizing: border-box;
+  width: var(--scribdown-code-line-gutter-width);
+  /* 关键步骤：sticky 后必须自带背景，否则横向滚动时代码会从行号下方透出。 */
+  background: var(--scribdown-color-surface);
+  padding-right: var(--scribdown-code-line-number-gap);
+  color: color-mix(in srgb, var(--scribdown-code-ink) 60%, transparent);
+  font-family: var(--scribdown-font-code);
+  font-size: 14px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.65;
+  text-align: right;
+  pointer-events: none;
+  user-select: none;
+  /* 关键步骤：横向滚动阴影由 sticky 行号列的右侧投影呈现，
+     animation-timeline 跟随 body 的 inline 滚动进度，
+     animation-range 把淡入限制在前 80px，跟纵向阴影保持一致语义。 */
+  animation: scribdown-code-shadow-x linear both;
+  animation-timeline: scroll(nearest inline);
+  animation-range: 0 80px;
+}
+
+@keyframes scribdown-code-shadow-x {
+  from {
+    box-shadow: 6px 0 10px -4px transparent;
+  }
+  to {
+    box-shadow: 6px 0 10px -4px
+      color-mix(in srgb, var(--scribdown-code-ink) 35%, transparent);
+  }
+}
+
+.scribdown-markdown .scribdown-code-block__gutter-line {
+  display: block;
+}
+
+/* 关键步骤：行号列右侧绘制手绘分隔线，与外层边框风格保持一致。 */
+.scribdown-markdown .scribdown-code-block__gutter::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 6px;
+  pointer-events: none;
+  background-image: var(--scribdown-rough-line-shadow-vertical);
+  background-repeat: repeat-y;
+  background-size: var(--scribdown-rough-line-shadow-tile-vertical);
+  background-position: right top;
+  opacity: 0.3;
+}
+
+@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
+  .scribdown-markdown .scribdown-code-block__gutter::after {
+    background-color: var(--scribdown-code-ink);
+    background-image: none;
+    -webkit-mask-image: var(--scribdown-rough-line-shadow-vertical);
+    -webkit-mask-repeat: repeat-y;
+    -webkit-mask-size: var(--scribdown-rough-line-shadow-tile-vertical);
+    -webkit-mask-position: right top;
+    -webkit-mask-mode: alpha;
+    mask-image: var(--scribdown-rough-line-shadow-vertical);
+    mask-repeat: repeat-y;
+    mask-size: var(--scribdown-rough-line-shadow-tile-vertical);
+    mask-position: right top;
+    mask-mode: alpha;
+  }
+}
+
+.scribdown-markdown .scribdown-code-block__body > pre {
+  position: relative;
+  z-index: 1;
+  grid-column: 2;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  /* 关键步骤：横向滚动已上交 __body 统一处理，pre 不再独立出滚动条。 */
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--scribdown-code-text);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.65;
+}
+
+.scribdown-markdown .scribdown-code-block__body > pre::before {
+  content: none;
+}
+
+.scribdown-markdown .scribdown-code-block__body > pre code {
+  position: relative;
+  display: block;
+  min-width: max-content;
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  background-image: none;
+  box-shadow: none;
+  color: var(--scribdown-code-text);
+  font-family: var(--scribdown-font-code);
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/* 行：仅渲染代码正文，行号由独立 gutter 列渲染。 */
+.scribdown-markdown .scribdown-code-block__line {
+  display: block;
+  padding-right: 16px;
+  padding-left: 0;
+}
+
+.scribdown-markdown .scribdown-code-block__line::before {
+  content: none;
+}

package/src/styles/details.css

@@ -0,0 +1,29 @@
+/* 内容折叠块：用户在 Markdown 中手写的原生 <details>，渲染时打标为 .scribdown-details。
+   手绘边框统一由 .scribdown-frame 提供（见 frame.css），此处只负责折叠块自身的盒模型与排版。 */
+.scribdown-markdown .scribdown-details {
+  width: fit-content;
+  max-width: 100%;
+  margin: 0 0 var(--scribdown-space-3);
+  padding: 10px 16px;
+  background: var(--scribdown-color-surface);
+}
+
+.scribdown-markdown .scribdown-details[open] {
+  padding-bottom: var(--scribdown-space-4);
+}
+
+.scribdown-markdown .scribdown-details > summary {
+  cursor: pointer;
+  font-family: var(--scribdown-font-heading);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.scribdown-markdown .scribdown-details > summary + * {
+  margin-top: var(--scribdown-space-3);
+}
+
+.scribdown-markdown .scribdown-details > :last-child {
+  margin-bottom: 0;
+}

package/src/styles/frame.css

@@ -0,0 +1,71 @@
+/* 手绘卡片边框：横边撑满容器宽度，竖边按固定笔触平铺。
+   以 .scribdown-frame 作为可复用的「边框」基底，由内容折叠块（.scribdown-details）、
+   目录根（.scribdown-toc）等元素显式 opt-in 引入；blockquote 形态单一、无歧义，
+   直接以元素选择器复用同一圈边，避免重复声明这段 ::after。
+   底色不在此处声明，交由各消费方自行决定（卡片用 surface，引用块用 blockquote-bg）。 */
+.scribdown-markdown .scribdown-frame {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.scribdown-markdown .scribdown-frame::after,
+.scribdown-markdown blockquote::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  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,
+    20% bottom,
+    left 40%,
+    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-frame::after,
+  .scribdown-markdown blockquote::after {
+    /* 关键步骤：用 mask 保留 SVG 形状，描边色交给 background-color，便于主题化。 */
+    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,
+      20% bottom,
+      left 40%,
+      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,
+      20% bottom,
+      left 40%,
+      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;
+  }
+}