/* 外层 board 玻璃效果：中心维持模糊，两侧边缘逐渐过渡到清晰 */
#board {
  --board-edge-blur: 16px;
  --board-edge-fade-width: 100px;
  --board-edge-radius: 0.5rem;
  --board-edge-stop-1: calc(var(--board-edge-fade-width) * 0.18);
  --board-edge-stop-2: calc(var(--board-edge-fade-width) * 0.42);
  --board-edge-stop-3: calc(var(--board-edge-fade-width) * 0.72);
  position: relative;
  isolation: isolate;
}

#board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--board-edge-radius);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to right,
    rgb(255 255 255 / 0.004) 0,
    rgb(255 255 255 / 0.012) var(--board-edge-stop-1),
    rgb(255 255 255 / 0.022) var(--board-edge-stop-2),
    rgb(255 255 255 / 0.032) var(--board-edge-stop-3),
    rgb(255 255 255 / 0.042) var(--board-edge-fade-width),
    rgb(255 255 255 / 0.042) calc(100% - var(--board-edge-fade-width)),
    rgb(255 255 255 / 0.032) calc(100% - var(--board-edge-stop-3)),
    rgb(255 255 255 / 0.022) calc(100% - var(--board-edge-stop-2)),
    rgb(255 255 255 / 0.012) calc(100% - var(--board-edge-stop-1)),
    rgb(255 255 255 / 0.004) 100%
  );
  -webkit-backdrop-filter: blur(var(--board-edge-blur));
  backdrop-filter: blur(var(--board-edge-blur));
  -webkit-mask-image: linear-gradient(
    to right,
    rgb(0 0 0 / 0) 0,
    rgb(0 0 0 / 0.14) var(--board-edge-stop-1),
    rgb(0 0 0 / 0.38) var(--board-edge-stop-2),
    rgb(0 0 0 / 0.72) var(--board-edge-stop-3),
    rgb(0 0 0 / 1) var(--board-edge-fade-width),
    rgb(0 0 0 / 1) calc(100% - var(--board-edge-fade-width)),
    rgb(0 0 0 / 0.72) calc(100% - var(--board-edge-stop-3)),
    rgb(0 0 0 / 0.38) calc(100% - var(--board-edge-stop-2)),
    rgb(0 0 0 / 0.14) calc(100% - var(--board-edge-stop-1)),
    rgb(0 0 0 / 0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(
    to right,
    rgb(0 0 0 / 0) 0,
    rgb(0 0 0 / 0.14) var(--board-edge-stop-1),
    rgb(0 0 0 / 0.38) var(--board-edge-stop-2),
    rgb(0 0 0 / 0.72) var(--board-edge-stop-3),
    rgb(0 0 0 / 1) var(--board-edge-fade-width),
    rgb(0 0 0 / 1) calc(100% - var(--board-edge-fade-width)),
    rgb(0 0 0 / 0.72) calc(100% - var(--board-edge-stop-3)),
    rgb(0 0 0 / 0.38) calc(100% - var(--board-edge-stop-2)),
    rgb(0 0 0 / 0.14) calc(100% - var(--board-edge-stop-1)),
    rgb(0 0 0 / 0) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

html[data-user-color-scheme="dark"] #board::before {
  background: linear-gradient(
    to right,
    rgb(0 0 0 / 0.014) 0,
    rgb(0 0 0 / 0.024) var(--board-edge-stop-1),
    rgb(0 0 0 / 0.038) var(--board-edge-stop-2),
    rgb(0 0 0 / 0.054) var(--board-edge-stop-3),
    rgb(0 0 0 / 0.068) var(--board-edge-fade-width),
    rgb(0 0 0 / 0.068) calc(100% - var(--board-edge-fade-width)),
    rgb(0 0 0 / 0.054) calc(100% - var(--board-edge-stop-3)),
    rgb(0 0 0 / 0.038) calc(100% - var(--board-edge-stop-2)),
    rgb(0 0 0 / 0.024) calc(100% - var(--board-edge-stop-1)),
    rgb(0 0 0 / 0.014) 100%
  );
}

#board > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 767.98px) {
  #board {
    --board-edge-fade-width: 72px;
  }
}

/* 侧边目录卡片保持原先固定模糊 */
#toc {
  padding: 10px;
  top: 4rem;
  background-color: var(--board-bg-color);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}