@font-face {
  font-family: "Article Demonstration ZiHunDaHei";
  src: url("./assets/fonts/ZiHunDaHei-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

body[data-page="article"] {
  --appearance-control-surface: rgba(20, 25, 17, 0.9);
  --appearance-control-foreground: #dfe4c9;
  --appearance-control-border: rgba(190, 200, 136, 0.34);
  --appearance-control-glow:
    0 0.45rem 1.2rem rgba(0, 0, 0, 0.32),
    0 0 1rem rgba(183, 197, 119, 0.22);
  --appearance-control-hover-surface: rgba(57, 66, 43, 0.94);
  --appearance-control-hover-foreground: #f4f7dd;
  --appearance-control-hover-border: rgba(228, 236, 170, 0.56);
  --appearance-control-hover-glow:
    0 0.45rem 1.2rem rgba(0, 0, 0, 0.36),
    0 0 1.25rem rgba(202, 218, 132, 0.34);
  --appearance-control-focus: #e4ecaa;
  --appearance-control-sun: #dfe795;
  --appearance-control-moon: #e8edcf;
}

[data-article-theme-root][data-article-id="article-layout-demonstration"] {
  --article-page-background: #151811;
  --article-surface: #20251a;
  --article-surface-soft: rgba(12, 15, 10, 0.76);
  --article-text: #d9dccd;
  --article-text-muted: #a7ad9c;
  --article-heading: #f0f1e3;
  --article-link: #c6ce91;
  --article-link-hover: #eef3bd;
  --article-selection-background: rgba(190, 202, 126, 0.38);
  --article-selection-text: #f7f8ec;
  --article-title-font: "Article Demonstration ZiHunDaHei", "Microsoft YaHei", sans-serif;
  --article-heading-font: "Article Demonstration ZiHunDaHei", "Microsoft YaHei", sans-serif;
  --article-prose-font: "Songti SC", STSong, Georgia, serif;
  --article-nav-font: "Article Demonstration ZiHunDaHei", "Microsoft YaHei", sans-serif;
  --article-blockquote-border: rgba(190, 201, 131, 0.62);
  --article-blockquote-surface: rgba(22, 27, 18, 0.76);
  --article-code-surface: rgba(8, 11, 7, 0.78);
  --article-divider: rgba(200, 207, 166, 0.24);
  --article-nav-accent: #bdc887;
  --article-nav-background: rgba(23, 28, 19, 0.88);
  --article-nav-border: rgba(190, 200, 136, 0.34);
  --article-nav-text: #d4d8c5;
  --article-nav-muted: #9da690;
  --article-nav-hover-surface: rgba(190, 201, 131, 0.14);
  --article-nav-hover-text: #f2f4df;
  --article-nav-active-surface: rgba(199, 210, 141, 0.23);
  --article-nav-active-text: #f3f5da;
  --article-nav-focus: #e4ecaa;
  --article-top-nav-background: rgba(13, 16, 11, 0.92);
  --article-top-nav-border: rgba(185, 195, 140, 0.22);
  --article-top-nav-text: #cbd0bd;
  --article-top-nav-hover: #f0f3d8;
  --article-top-nav-underline: #b8c47e;
  --article-music-surface: rgba(20, 25, 17, 0.84);
  --article-music-border: rgba(190, 200, 136, 0.32);
  --article-music-text: #cbd0bd;
  --article-music-hover: rgba(57, 66, 43, 0.9);
  --article-music-active: rgba(91, 103, 59, 0.9);
  --article-music-active-text: #f1f4d7;
  --article-music-focus: #e4ecaa;

  position: relative;
  isolation: isolate;
  background-image: none;
}

[data-article-theme-root][data-article-id="article-layout-demonstration"]::before,
[data-article-theme-root][data-article-id="article-layout-demonstration"]::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  transition: opacity 1100ms ease;
}

[data-article-theme-root][data-article-id="article-layout-demonstration"]::before {
  opacity: 1;
  background-image:
    linear-gradient(rgba(10, 15, 8, 0.58), rgba(10, 14, 8, 0.76)),
    url("./assets/background/background-1.png");
}

[data-article-theme-root][data-article-id="article-layout-demonstration"]::after {
  opacity: 0;
  background-image:
    linear-gradient(rgba(14, 13, 10, 0.58), rgba(12, 12, 10, 0.78)),
    url("./assets/background/background-2.png");
}

[data-article-theme-root][data-article-id="article-layout-demonstration"]:is(
    [data-current-section="较长阅读中的变化"],
    [data-current-section="代码与窄屏"],
    [data-current-section="为后续能力留出位置"]
  )::before {
  opacity: 0;
}

[data-article-theme-root][data-article-id="article-layout-demonstration"]:is(
    [data-current-section="较长阅读中的变化"],
    [data-current-section="代码与窄屏"],
    [data-current-section="为后续能力留出位置"]
  )::after {
  opacity: 1;
}

[data-article-theme-root][data-article-id="article-layout-demonstration"]:is(
    [data-current-section="较长阅读中的变化"],
    [data-current-section="代码与窄屏"],
    [data-current-section="为后续能力留出位置"]
  ) {
  --article-nav-accent: #d7b29a;
  --article-nav-border: rgba(221, 183, 156, 0.34);
  --article-nav-hover-surface: rgba(210, 151, 121, 0.15);
  --article-nav-active-surface: rgba(218, 162, 131, 0.23);
  --article-nav-active-text: #fae8dc;
  --article-nav-focus: #f2c7aa;
}

[data-article-theme-root][data-article-id="article-layout-demonstration"]
  .article-page__header
  [data-content-field="title"],
[data-article-theme-root][data-article-id="article-layout-demonstration"]
  .article-page__content
  :where([data-content-region="body"] h1),
[data-article-theme-root][data-article-id="article-layout-demonstration"]
  .article-page__content
  :where([data-content-region="body"] h2),
[data-article-theme-root][data-article-id="article-layout-demonstration"]
  .article-page__content
  :where([data-content-region="body"] h3) {
  text-shadow: 0 0.08em 0.5em rgba(0, 0, 0, 0.3);
}

[data-article-theme-root][data-article-id="article-layout-demonstration"]
  .article-page__header
  [data-content-region="cover"] img,
[data-article-theme-root][data-article-id="article-layout-demonstration"]
  .article-page__content
  [data-content-region="body"] img {
  border: 1px solid rgba(203, 211, 172, 0.18);
}

@media (max-width: 48rem) {
  [data-article-theme-root][data-article-id="article-layout-demonstration"]::before {
    background-position: center, 58% center;
  }

  [data-article-theme-root][data-article-id="article-layout-demonstration"]::after {
    background-position: center, 62% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-article-theme-root][data-article-id="article-layout-demonstration"]::before,
  [data-article-theme-root][data-article-id="article-layout-demonstration"]::after {
    transition-duration: 0.01ms;
  }
}