@layer base {

:root {
  --color-taxodium-purple: #7c7cd1;
  --color-taxodium-yellow: #bd8c42;
  --color-bg: #eee;
  --color-bg-secondary: #ffffffe6;
  --color-bg-src-block: oklch(from var(--color-bg) l c h / 0.5);
  --color-text: #2e2e2e;
  --color-text-secondary: #787878;
  --color-border: #ddd;
  --color-link: var(--color-taxodium-purple);
  --color-link-visited: var(--color-taxodium-yellow);
  --color-border-table: #777;
  --color-bg-table: #ddd;
  --color-box-shadow: rgba(0, 0, 0, 0.3);
  --color-todo: #ff5f59;
  --color-lyrics: #7c0100;
  --color-code: #8f0075;
  --color-bg-code: #ddd;
  --color-bg-code-highlighted: oklch(0 0 0 / 0.1);
  --color-fucus-visible-outline: oklch(from var(--color-link) l c h / 0.8);

  --dark-color-bg: #232323;
  --dark-color-bg-secondary: #1e1e1e;
  --dark-color-bg-src-block: oklch(from var(--dark-color-bg) l c h / 0.7);
  --dark-color-text: aliceblue;
  --dark-color-text-secondary: #b8b8b8;
  --dark-color-border: #595959;
  --dark-color-link: oklch(from var(--color-link) .75 c h);
  --dark-color-link-visited: var(--color-link-visited);
  --dark-color-border-table: #7d7d7d;
  --dark-color-bg-table: #1e1e1e;
  --dark-color-box-shadow: rgba(255, 255, 255, 0.3);
  --dark-color-todo: #ff5f5f;
  --dark-color-lyrics: #e95632;
  --dark-color-code: #f78fe7;
  --dark-color-bg-code: #474747;
  --dark-color-bg-code-highlighted: oklch(1 0 0 / 0.3);
  --dark-color-fucus-visible-outline: oklch(from var(--dark-color-link) l c h / 0.8);

  --table-border: 2px solid var(--color-text);
  --table-cell-border: 1px solid var(--color-border);

  --content-width: 90vw;
  --half-content-margin: calc((100vw - var(--content-width)) / 2);
  /* footnote 数字的点击范围 */
  --extra-active-area-size: -0.8em;
}

html {
  font-family: system-ui;
  font-size: 20px;
  -webkit-text-size-adjust: 100%;
}

@media screen and (width >= 70em) {
  html {
    font-size: 22px;
  }
}

body {
  max-width: var(--content-width);
  margin: .5rem auto;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));
  background-image: url("/images/background/xv.png");
  background-attachment: fixed;

  @media screen and (width <= 400px) {
    margin-inline: 0;
    padding-inline: .5rem;
    max-width: 100vw;
  }
}

@media screen and (width >= 55rem) {
  :root {
    --content-width: 45rem;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.6s;
}

/**
 * @see: https://www.a11yproject.com/posts/understanding-vestibular-disorders/
 */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

#preamble nav {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 2px;

  @media screen and (width <= 350px) {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  & ul {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, max-content);
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
  }

  a:visited {
    color: var(--color-link);
    color: light-dark(var(--color-link), var(--dark-color-link));

    &:hover {
      color: #fff;
      background: var(--color-link);
      background: light-dark(var(--color-link), var(--dark-color-link));
    }
  }
}

#lightdark {
  text-align: center;
  field-sizing: content;
  max-width: 100%;
}

.a11y-nav {
  width: max-content;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  padding: 0.5rem;
  z-index: 5;
  background-color: var(--color-bg-secondary);
  background-color: light-dark(var(--color-bg-secondary), var(--dark-color-bg-secondary));
  font-weight: 600;
  /* hide the link */
  transform: translateY(-60px);

  @starting-style {
    transform: translateY(-60px);
    opacity: 0;
  }

  &:focus {
    transition: transform 0.375s ease-in-out;
    transform: translateY(0);
  }
}

.title {
  max-width: fit-content;
  margin-inline: auto;
}

.subtitle {
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  font-size: 1.2rem;
  margin-block-start: 0;
  margin-block-end: 1.5rem;
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  font-weight: 700;
  padding: 0;
  margin-block-end: 0.5rem;
}

h1 {
  font-size: 2.25rem;
}

h2 {
  font-size: 1.85rem;
}

h3 {
  font-size: 1.65rem;
}

h4,
h5 {
  font-size: 1.45rem;
}

h6 {
  font-size: 1rem;
}

img,
video {
  max-width: 100%;
  object-fit: contain;
}

img {
  @media (prefers-color-scheme: dark) {
    filter: brightness(0.85) contrast(1.05);
  }
}

.dark img {
  filter: brightness(0.85) contrast(1.05);
}

a {
  color: var(--color-link);
  color: light-dark(var(--color-link), var(--dark-color-link));
  text-underline-offset: 5px;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;

  &:has(> img) {
    &:hover {
      background: none;
    }
  }

  @media (pointer: fine) and (hover: hover) {
    &:hover {
      text-decoration: none;
      background: var(--color-link);
      background: light-dark(var(--color-link), var(--dark-color-link));
      color: #fff;

      & code {
        color: #fff;
      }
    }
  }

  &:visited {
    color: var(--color-link-visited);
    color: light-dark(
      var(--color-link-visited),
      var(--dark-color-link-visited)
    );

    @media (pointer: fine) and (hover: hover) {
      &:hover {
        background: var(--color-link-visited);
        background: light-dark(
          var(--color-link-visited),
          var(--dark-color-link-visited)
        );
        text-decoration: none;
        color: #fff;
      }
    }
  }

  /* make safari :visited hover works */
  @media (pointer: fine) and (hover: hover) {
    &:visited:hover,
    &:visited:hover {
      background: var(--color-link-visited);
      background: light-dark(
        var(--color-link-visited),
        var(--dark-color-link-visited)
      );
      text-decoration: none;
      color: #fff;
    }
  }
}

p {
  margin: 1.25rem 0;
}

code {
  font-size: 0.85rem;
  color: var(--color-code);
  color: light-dark(var(--color-code), var(--dark-color-code));
}

em {
  text-emphasis: "\23f6";
  text-emphasis-position: under;
  font-style: unset;
}

b {
  font-weight: 700;
}

.underline {
  text-decoration-color: var(--color-border);
  text-decoration-color: light-dark(var(--color-border), var(--dark-color-border));
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

del {
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  opacity: 0.65;
}

dt {
  font-weight: 700;
}

dd + dt {
  margin-top: 1rem;
}

dd {
  margin-inline-start: 1.5rem;
}

hr {
  display: block;
  border: 0;
  margin: 2.5rem 0;
  padding: 0;
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  text-align: center;

  &::before {
    content: "* * *";
    text-align: center;
  }
}

kbd {
  background-color: var(--color-bg);
  background-color: light-dark(var(--color-bg), var(--dark-color-bg));
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));
  border: 1px solid;
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  border-radius: 0.25rem;
  box-shadow: 1px 2px 2px var(--color-box-shadow);
  box-shadow: 1px 2px 2px light-dark(var(--color-box-shadow), var(--dark-color-box-shadow));
  display: inline-block;
  font-weight: bold;
  padding: 0.2rem 0.25rem 0.1rem;
  line-height: 1;
  white-space: nowrap;
  font-size: 0.85rem;
}

rt {
  font-size: 0.65rem;
  margin-block-end: 0.1rem;
}

pre {
  background: var(--color-bg-src-block);
  background: light-dark(var(--color-bg-src-block), var(--dark-color-bg-src-block));
  font-size: 0.75rem;
  margin: 1em 0;
  padding: 1rem;
  white-space: pre-wrap;
  overflow-x: auto;
  word-break: normal;
  word-wrap: inherit;
  border-block: 5px solid;
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
}

.verse,
blockquote {
  margin: 1rem 0;
  padding: 0 0.5rem;
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  border-inline-start: 4px solid var(--color-border);
  border-inline-start: 4px solid light-dark(var(--color-border), var(--dark-color-border));
}

.verse + .verse,
blockquote + blockquote {
  margin-block-start: 2em;
}

figure {
  margin-inline: 0;
}

figcaption {
  font-size: 0.85em;
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
}

details {
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  border: 2px solid var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  margin-block: 1rem;

  summary {
    cursor: pointer;

    &::marker,
    :is(::-webkit-details-marker) {
      content: "☞  ";
    }
  }

  &[open] summary::marker,
  &[open] summary::-webkit-details-marker {
    content: "☟  ";
  }
}

iframe {
  width: 100%;
  min-height: 350px;
  border: 2px dotted var(--color-border);
  border: 2px dotted light-dark(var(--color-border), var(--dark-color-border));
}

select {
  font-size: 1rem;
  padding: 4px;
  border-radius: 0.25rem;
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));
}

button {
  border-radius: 0.25rem;
  padding: 0.25rem;
  cursor: pointer;

  &:active {
    transform: scale(0.97);
  }
}

input.button:active {
  transform: scale(0.97);
}

table {
  border-block-start: var(--table-border);
  border-block-end: var(--table-border);
  border-collapse: collapse;
  border-color: var(--color-border-table);
  border-color: light-dark(var(--color-border-table), var(--dark-color-border-table));
  text-align: start;
  caption-side: bottom;
  word-break: normal;
}

.table-wrapper {
  overflow: auto;
  margin-block: 1rem;
}

/* override org publish default style */
table th.org-left {
  text-align: start;
}

thead {
  border-block-end: var(--table-border);
  border-color: var(--color-border-table);
  border-color: light-dark(var(--color-border-table), var(--dark-color-border-table));
  white-space: nowrap;
}

thead,
tfoot {
  background: var(--color-bg-table);
  background: light-dark(var(--color-bg-table), var(--dark-color-bg-table));
}

tbody tr:nth-child(even) {
  background: var(--color-bg-table);
  background: light-dark(var(--color-bg-table), var(--dark-color-bg-table));
  background: light-dark(color-mix(in srgb, var(--color-bg-table), transparent 60%), color-mix(in srgb, var(--dark-color-bg-table), transparent 60%));
}

table tr {
  border-block-start: var(--table-cell-border);
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
}

thead th {
  vertical-align: bottom;
}

td,
th {
  padding: 0.3rem 1rem;
  vertical-align: baseline;

  @media screen and (width <= 400px) {
    padding: 0.3rem 0.6rem;
  }
}

:where(ol,ul) li {
  margin-block: .2rem;
}

:where(ol,ul) li > p:first-child {
  margin-block: 0;
}

@media screen and (width <= 400px) {
  :where(ol,ul) {
    padding-inline-start: 1rem;

    & li > details,
    & li > :is(pre.example, .org-src-container) {
      margin-block: 1rem;
      margin-inline-start: -1rem;
    }
  }

  .dl dd {
    margin-inline-start: 1rem;
  }
}

#text-footnotes {
  margin-block-start: 1.25rem;
}

.footdef {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0.5em;
  font-size: 0.9em;
}

[role="doc-footnote"] *:nth-child(1) {
  margin-block-start: 0;
}

#postamble {
  margin-block-start: 1em;

  &::before {
    /* content: 'EASY COME, EASY GO ...'; */
    content: "つづく To Be Continued";
    color: var(--color-border);
    color: light-dark(var(--color-border), var(--dark-color-border));
    display: block;
    text-align: end;
  }

  footer {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));

    & p {
      margin-block: 0.25rem;
    }
  }
}

}

@layer print {
  @media print {
    html {
      font-size: 16px;
    }

    body {
      background-image: none;
      margin: 0;
      max-width: 100vw;
    }

    #preamble,
    #postamble,
    #back-to-top,
    .code-copy-btn
    {
      display: none;
    }

    a::after {
      word-break: break-all;
      content: " (" attr(href) ")";
    }

    /* 部分链接意义不大，不需要展示出来 */
    a:where(.footref, .footnum)::after,
    #table-of-contents a::after {
      content: "";
    }
  }
}

@layer function {

#back-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  z-index: 1;
  cursor: pointer;
  padding: 0.5rem;
  border: 2px;
  border-style: solid;
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  background-color: var(--color-bg);
  background-color: light-dark(var(--color-bg), var(--dark-color-bg));
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));
  border-radius: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out, visibility 0.5s;
}

@media screen and (width >= 1200px) {
  #back-to-top {
    right: calc(var(--half-content-margin) - 4rem);
  }
}

#back-to-top svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

#back-to-top.show {
  opacity: 0.4;
  visibility: visible;
}

#back-to-top.show:hover {
  opacity: 1;
}

.org-comment {
  color: #7f0000;
  color: light-dark(#7f0000, #c0a38a);
  font-style: italic;
}
.org-comment-delimiter {
  color: #7f0000;
  color: light-dark(#7f0000, #c0a38a);
  font-style: italic;
}
.org-diff-added {
  color: #005000;
  color: light-dark(#005000, #a0e0a0);
  background-color: #c3ebc1;
  background-color: light-dark(#c3ebc1, #00371f);
}
.org-diff-indicator-added {
  color: #006700;
  color: light-dark(#006700, #279c40);
  background-color: #c3ebc1;
  background-color: light-dark(#c3ebc1, #00371f);
}
.org-diff-indicator-removed {
  color: #aa2222;
  color: light-dark(#aa2222, #f36649);
  background-color: #f4d0cf;
  background-color: light-dark(#f4d0cf, #450f1f);
}
.org-diff-removed {
  color: #8f1313;
  color: light-dark(#8f1313, #ffbfbf);
  background-color: #f4d0cf;
  background-color: light-dark(#f4d0cf, #450f1f);
}
.org-doc {
  color: #304463;
  color: light-dark(#304463, #8aa0df);
  font-style: italic;
}
.org-function-name {
  color: #602938;
  color: light-dark(#602938, #35afbf);
}
.org-number {
  color: #000000;
  color: light-dark(#000000, #b8c6d5);
}
.org-string {
  color: #00598b;
  color: light-dark(#00598b, #df9080);
}
.org-variable-name {
  color: #00603f;
  color: light-dark(#00603f, #6a9fff);
}

.org-src-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-areas:
    "copy-btn"
    "code";

  &:has(.code-copy-btn) {
    pre {
      margin-block-start: 0.25rem;
    }
  }
}

.code-copy-btn {
  grid-area: copy-btn;
  cursor: pointer;
  max-width: fit-content;
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  border-radius: 0.5rem;
  font-size: 1rem;
  justify-self: end;

  &:hover {
    background: var(--color-link);
    background: light-dark(var(--color-link), var(--dark-color-link));
    color: #fff;
  }
}

.code-highlighted {
  transition: background-color 0.1s ease-in-out;
  background-color: var(--color-bg-code-highlighted);
  background-color: light-dark(var(--color-bg-code-highlighted), var(--dark-color-bg-code-highlighted));
}

a.coderef {
  font-size: 0.85rem;
  background: var(--color-bg-code);
  background: light-dark(var(--color-bg-code), var(--dark-color-bg-code));
  border-radius: 6px;
  padding: 0.05rem 0.2rem;
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));
  text-decoration: none;

  &:visited {
    color: var(--color-text);
    color: light-dark(var(--color-text), var(--dark-color-text));
  }

  &:hover {
    color: #fff;
    background: var(--color-link);
    background: light-dark(var(--color-link), var(--dark-color-link));

    & code {
      color: #fff;
    }
  }
}

.webmention {
  font-size: 0.9rem;

  & form {
    display: grid;
    grid-template-columns: max-content auto max-content;
    gap: 0.5em;
    align-items: center;

    @media screen and (width <= 680px) {
      grid-template-columns: 1fr;
    }

    & input {
      border: 1px;
      border-style: solid;
      border-color: var(--color-border);
      border-color: light-dark(var(--color-border), var(--dark-color-border));
      border-radius: 0.2rem;
      padding: 0.3rem;
      font-size: 1em;

      &::placeholder {
        padding-inline-start: 0.5rem;
      }

      &.button {
        cursor: pointer;
        padding: 0.2rem 0.5rem;
        border-radius: 0.2rem;

        &:hover {
          opacity: 0.8;
        }
      }

      &[readonly] {
        cursor: not-allowed;
      }
    }
  }

  &:not(:has(.webmention__list li)) {
    & hr {
      display: none;
    }
  }
}

.webmention__tip {
  margin: revert;
  font-size: revert;
  color: var(--color-text-secondary);
  color: light-dark(
    var(--color-text-secondary),
    var(--dark-color-text-secondary)
  );
}

.webmention__list {
  list-style: none;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  margin-block: 0;
  gap: 2.5rem;

  & blockquote {
    padding-inline: 1rem;
  }

  @media screen and (width <= 400px) {
    list-style: none;
    padding-inline-start: 0;
  }
}

.webmention__profile {
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-areas:
    "avatar author"
    "avatar source";
  column-gap: 1rem;
}

.webmention__avatar {
  object-fit: contain;
  border-radius: 0.5rem;
  width: 3.5rem;
  align-self: start;
  grid-area: avatar;

  @media screen and (width <= 400px) {
    width: 2.5rem;
  }
}

.webmention__author {
  margin-inline-end: 1rem;
  grid-area: author;
}

.webmention__source {
  word-break: break-all;
  grid-area: source;
  margin: 0;
  align-self: end;
}

.webmention__content {
  clear: both;
  margin-block-start: 1rem;

  &:empty {
    display: none;
  }
}

.webmention__date {
  margin-block: .5rem 0;
  font-size: .75rem;
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  word-break: break-all;
}

.h-card[aria-hidden="true"] {
  display: none;
}

/** :focus-visible is a neat pseudo-class that only applies focus styles when users navigate with the keyboard. */
*:focus-visible {
  outline-color: var(--color-fucus-visible-outline);
  outline-color: light-dark(var(--color-fucus-visible-outline), var(--dark-color-fucus-visible-outline));
  outline-style: solid;
  outline-offset: .25rem;
  outline-width: .2rem;
  border-radius: .1rem;
}

@media (prefers-reduced-motion: no-preference) {
  *:focus-visible {
    animation: outline-bounce .5s;
  }
}

@keyframes outline-bounce {
  0% { outline-offset: .25rem }
  50% { outline-offset: .5rem }
  100% { outline-offset: .25rem }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  &:not(h1):hover {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .5rem;
  }
}

section[role="note"] {
  border: 2px dashed;
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  padding-inline: 1rem;
  margin-block: 1rem;
  border-radius: 0.5rem;
  position: relative;

  &::before {
    /* ✏ 的 Unicode \270F, \FE0E 是文本变体选择器，选择纯文本形式展示 */
    content: "\270F\FE0E";
    position: absolute;
    font-size: 2rem;
    inset-block-start: -1rem;
    inset-inline-start: 0;
    color: var(--color-border);
    color: light-dark(var(--color-border), var(--dark-color-border));
    transform: rotate(135deg);
  }

  & + section[role="note"] {
    margin-block-start: 1rem;
  }
}

@media (max-width: 1500px) {
  .sidenote-container, .sidenote {
    display: none !important;
  }
}

.sidenote-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.sidenote {
  /* 屏幕宽度减去内容宽度后，剩余 margin 的一半用于展示 sidenote, 宽度减少 1em 避免内容溢出到右侧，导致横向滚动条 */
  width: calc(var(--half-content-margin) - 1rem);
  font-size: 0.8em;
  pointer-events: auto;
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 0.2em;
  transition: opacity .25s ease-in-out;
  opacity: 0.65;
  align-items: start;

  &:hover {
    opacity: 1;
  }
}

.sidenote-num {
  display: inline-block;
  cursor: pointer;
  margin-inline-end: .5em;
  white-space: nowrap;
}

.sidenote-content {
  min-width: 0;
}

#content a[role="doc-backlink"],
.sidenote-num {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: var(--extra-active-area-size);
    left: var(--extra-active-area-size);
    right: var(--extra-active-area-size);
    bottom: var(--extra-active-area-size);
    cursor: pointer;
  }

  &:hover&::before {
    border: 3px solid;
    border-color: var(--color-box-shadow);
    border-color: light-dark(var(--color-box-shadow), var(--dark-color-box-shadow));
    border-radius: 5px;
  }
}

.sidenote-num:hover,
.sidenote-ref-highlight,
.sidenote-ref-highlight a[role="doc-backlink"] {
  &::before {
    border: 3px solid;
    border-color: var(--color-box-shadow);
    border-color: light-dark(var(--color-box-shadow), var(--dark-color-box-shadow));
    border-radius: 5px;
  }
}

.sidenote-content *:nth-child(1) {
  margin-block-start: 0;
}

}

@layer special {

mark.emacs {
  background: linear-gradient(to right bottom, #8482c7, #943dc1);
  box-shadow: 1px 2px 2px var(--color-box-shadow);
  box-shadow: 1px 2px 2px light-dark(var(--color-box-shadow), var(--dark-color-box-shadow));
  color: #fff;
  border-radius: 5px;
  padding: 0px 4px;
}

/* scan-line, retro style */
/* inspire from https://seated.ro/blog/tinkering-a-lost-art */
body:where(.dark-retro)::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  background-attachment: fixed;
  pointer-events: none;
  z-index: 3;
}

body.dark-retro::after {
  --scan-line-width: 1px;
  background-image: linear-gradient(oklch(0 0 0 / .8) var(--scan-line-width), transparent var(--scan-line-width));
  background-size: calc(2 * var(--scan-line-width)) calc(2 * var(--scan-line-width));

  @media screen and (width <= 400px) {
    --scan-line-width: .7px;
  }
}

/* 只支持全部都是 <figure> 或者全部都是 <a> */
.image-list {
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
  overflow: auto;
  max-height: 65vh;
  border: 2px dashed;
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  padding: 1em;
  margin-block: 1em;
  border-radius: .5em;

  & a {
    height: auto;
  }

  & figure {
    margin: 0;
  }

  & img {
    max-height: 50vh;
  }
}

blockquote.vertical-rl,
p.verse.vertical-rl {
  writing-mode: vertical-rl;
  padding: 0;
  border: none;
  padding-block-start: 0.5rem;
  font-size: 0.9rem;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  container-type: scroll-state;
  container-name: vertical-rl;
  position: relative;

  .footref {
    writing-mode: initial;
  }

  @media screen and (width >= 580px) {
    &.center {
      align-content: center;
    }
  }
}

@container vertical-rl scroll-state(scrollable: block-end) {
  p.verse.vertical-rl::after {
    content: "☟";
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    font-size: 1.2rem;
  }
}

details.indent-paragraph p,
blockquote.indent-paragraph
{
  text-indent: 2rem;
}

:where(.verse,blockquote).single {
  border: none;
  position: relative;
  margin-block: 2rem;

  &::before,
  &::after {
    color: var(--color-border);
    color: light-dark(var(--color-border), var(--dark-color-border));
    font-size: 4rem;
    position: absolute;
  }

  &::before {
    content: "“";
    top: 0.2rem;
    left: -0.1rem;
    line-height: 0.2rem;
  }

  &::after {
    content: "”";
    right: -0.1rem;
    bottom: -0.6rem;
    line-height: 0.2rem;
  }
}

.hidden-link a {
  text-decoration: none;
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));

  &:hover {
    color: #fff;
  }

  &:visited {
    color: var(--color-text);
    color: light-dark(var(--color-text), var(--dark-color-text));
  }
}

img.inline-image {
  width: 1rem;
  height: 1rem;
  vertical-align: -3.5px;
}

figure {
  &:has(.float-start) {
    float: inline-start;
    margin-block: 0;
    margin-inline-end: 1rem;
    max-width: 50%;
  }

  &:has(.float-end) {
    float: inline-end;
    margin-block: 0;
    margin-inline-start: 1rem;
    max-width: 50%;
  }

  &:has(.center) {
    text-align: center;
  }

  @media screen and (width <= 765px) {
    &:has(:is(.float-start, .float-end)) {
      float: none;
      margin-inline: 0;
      margin-block: 1rem;
      max-width: fit-content;
    }
  }
}

}