:root {
  --font-family: "LXGW WenKai", Open Sans, Arial;
  --font-size: clamp(22px, calc(1.1em + 0.6vw), 24px);

  --color-bg: #eee;
  --color-bg-secondary: #ffffffe6;
  --color-bg-src-block: #ffffff51;
  --color-text: #2e2e2e;
  --color-text-secondary: #787878;
  --color-border: #ddd;
  --color-bg-code: #ddd;
  --color-link: #07a;
  --color-selection-background: #ffec8f;
  --color-selection-text: #454545;
  --color-border-table: #777;
  --color-bg-table: #ddd;
  --color-box-shadow: rgba(0, 0, 0, 0.3);
  --color-todo: #ff5f59;
  --color-highlight: #262626;
  --color-highlight-secondary: #5e5e5e;

  --dark-color-bg: #232323;
  --dark-color-bg-secondary: #1e1e1e;
  --dark-color-bg-src-block: #1e1e1e;
  --dark-color-text: #e8e8e8;
  --dark-color-text-secondary: #b8b8b8;
  --dark-color-border: #7d7d7d;
  --dark-color-bg-code: #474747;
  --dark-color-link: #6ea5ff;
  --dark-color-selection-background: rebeccapurple;
  --dark-color-selection-text: #eee;
  --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-highlight: #f5f5f5;
  --dark-color-highlight-secondary: #ccc;

  --table-border: 2px solid var(--color-text);
  --table-cell-border: 1px solid var(--color-border);
  --pagefind-ui-font: var(--font-family);
  --pagefind-ui-border: var(--dark-color-text-secondary);

  --content-width: 900px;
  --pagefind-ui-scale: 1.2;
}


/** ---------------------------------- 'Atkinson Hyperlegible' ----- */
/** @see: https://www.brailleinstitute.org/freefont/ */
/** Regular version */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular-102.eot');
  src: local('Atkinson Hyperlegible'), url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular-102.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular-102.woff') format('woff'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular-102.ttf') format('truetype'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular-102.svg#Atkinson-Hyperlegible') format('svg');
  font-weight: normal;
  font-style: normal;
  /* font-display: fallback; */
}

/** Bold version */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Bold-102.eot');
  src: local('Atkinson Hyperlegible Bold'), url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Bold-102.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Bold-102.woff') format('woff'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Bold-102.ttf') format('truetype'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Bold-102.svg#Atkinson-Hyperlegible') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/** Italic version */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Italic-102.eot');
  src: local('Atkinson Hyperlegible Italic'), url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Italic-102.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Italic-102.woff') format('woff'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Italic-102.ttf') format('truetype'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Italic-102.svg#Atkinson-Hyperlegible') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/** Bold Italic version */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-BoldItalic-102.eot');
  src: local('Atkinson Hyperlegible Bold Italic'), url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-BoldItalic-102.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-BoldItalic-102.woff') format('woff'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-BoldItalic-102.ttf') format('truetype'),
       url('/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-BoldItalic-102.svg#Atkinson-Hyperlegible') format('svg');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/** ---------------------------------- 'Atkinson Hyperlegible' ----- */

/* ------------------------------ common tag ------------------------------ */

body {
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));
  line-height: 3ex;
  /* background: var(--color-bg); */
  /* background: light-dark(var(--color-bg), var(--dark-color-bg)); */
  /* background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZReReadymcllPAAAACFJREFUeNpiZGBg4GegAsBlCD8TqSYNQg2Mo6FEBAAIMACdPABtrSW/IQAAAABJRU5ErkJggg==); */
  background-image: url("/images/background/xv.png");
  background-attachment: fixed;
  margin: 20px auto;
  padding: 0 10px;
  font-family: var(--font-family);
  /* text-wrap: pretty; */
  word-break: break-word;

  &.dark {
    background-image: url("/images/background/xv.png");
  }
}

/* media query */
@media screen and (min-width: 900px) {
  body {
    max-width: 90vw;
  }
}

@media screen and (min-width: 1200px) {
  body {
    max-width: var(--content-width);
  }
}

::selection {
  background: var(--color-selection-background);
  background: light-dark(var(--color-selection-background), var(--dark-color-selection-background));
  color: var(--color-selection-text);
  color: light-dark(var(--color-selection-text), var(--dark-color-selection-text));
}

::target-text {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 3px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  text-decoration-color: rebeccapurple;
  background: unset;
}

@view-transition {
  navigation: auto;
}


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

  a {
    view-transition-name: none!important;
  }
}

/** :focus-visible is a neat pseudo-class that only applies focus styles when users navigate with the keyboard. */
*:focus-visible {
  outline-color: currentColor;
  outline-style: solid;
  outline-offset: .25rem;
  outline-width: .25rem;
  border-radius: .25rem;
}

@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 }
}


html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
}

/**
 * Disable anchor link animations for
 * users who prefer less motion.
 */
@media (prefers-reduced-motion) {
  html {
    scroll-behavior: auto;
  }
}

p {
  margin-block: 0.8em;

  &.verse {
    margin-left: 0;
  }
}

mark {
  padding: .15rem;
  background: var(--color-selection-background);
  background: light-dark(var(--color-selection-background), var(--dark-color-selection-background));
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));
  padding: 4px 4px 0;
}

hr {
  border: none;
  margin-block: 1.5em;
}

hr:before {
  content: '* * *' ;
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  display: block;
  text-align: center;
}

/* hr:nth-of-type(odd):before { */
/*     content: '♙ ♙ ♙ ♙ ♙ ♙ ♙ ♙' ; */

/* } */

/* hr:nth-of-type(even):before { */
/*     content: '♖ ♘ ♗ ♕ ♔ ♗ ♘ ♖' ; */
/* } */

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: .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 .25rem;
  white-space: nowrap;
}

details {
  padding: .7em 1em .5em;
  border-radius: 15px;
  font-size: 0.9em;
  border: 1px solid var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  /* box-shadow: 0.05em 0.1em 5px 0.01em var(--color-box-shadow); */
  /* box-shadow: 0.05em 0.1em 5px 0.01em light-dark(var(--color-box-shadow), var(--dark-color-box-shadow)); */
}

summary {
  cursor: pointer;
}

code {
  font-family: var(--font-family);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

b {
  color: var(--color-highlight);
  color: light-dark(var(--color-highlight), var(--dark-color-highlight));
}

.verse,
blockquote {
  margin: 1em 0;
  padding: 0px 15px;
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  border-left: 4px solid var(--color-border);
  border-left: 4px solid light-dark(var(--color-border), var(--dark-color-border));

  & b {
    color: var(--color-highlight-secondary);
    color: light-dark(var(--color-highlight-secondary), var(--dark-color-highlight-secondary));
  }
}

.underline {
  text-decoration-color: var(--color-text-secondary) ;
  text-decoration-color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary)) ;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

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

  &[href*=taxodium][href*=taxodium] {
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
  }
}

a[href*=mailto],
a[href*=https],
a[href*=http] {
  text-decoration-style: solid;
}

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

pre {
  color: var(--color-text);
  color: light-dark(var(--color-text), var(--dark-color-text));
  background-color: var(--color-bg-src-block);
  background-color: light-dark(var(--color-bg-src-block), var(--dark-color-bg-src-block));
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, "Courier New", Courier, monospace;
  font-size: .8em;
  margin-left: 0;
  margin-right: 0;
}

pre.src {
  margin: 0;
  border: unset;
  background: unset;
  color: var(--dark-color-text);
}

/* 不太重要，且和复制按钮重叠，所以隐藏 */
pre.src:hover::before {
  display: none;
}

code {
  background-color: var(--color-bg-code);
  background-color: light-dark(var(--color-bg-code), var(--dark-color-bg-code));
  border-radius: 6px;
  padding: 0.05em .1em;
}

figure {
  margin: 0;
}

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

/* ------------------------------ common tag ------------------------------ */


/* ------------------------------ org-mode related ------------------------------ */
/**
 * @see: https://daverupert.com/2023/05/getting-started-view-transitions/#:~:text=I%20mostly%20use,a%20long%20time
 * 使得在进行 view-transition 的时候，标题的文字不会变得特别大
 */
.title {
  width: fit-content;
  /** 居中标题 */
  margin-left: auto;
  margin-right: auto;
}

.todo {
  color: var(--color-todo);
  color: light-dark(var(--color-todo), var(--dark-color-todo));
}

.text-emphasis {
  text-emphasis: dot;
  text-emphasis-position: under;
}

#postamble::before {
  content: 'EASY COME, EASY GO ...';
  color: var(--color-border);
  color: light-dark(var(--color-border), var(--dark-color-border));
  display: block;
  text-align: end;
}

#preamble nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
}

#preamble nav ul {
  display: flex;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  flex-wrap: wrap;
}

#preamble nav a {
  padding-inline: 0.2rem;
  padding-block: 0.5rem;
}

/* Dim non-hover link */
/* #preamble nav ul, */
/* #text-table-of-contents ul, */
/* .org-ul:has(a[style*="view-transition-name:"]) { */
/*   @media (hover) and (prefers-reduced-motion: no-preference) { */
/*     & > li { */
/*       transition: opacity .25s ease; */
/*     } */

/*     &:hover > li:not(:hover) { */
/*       opacity: .25; */
/*     } */
/*   } */
/* } */

/** 固定页眉在顶部，但是会影响链接跳转，遮盖链接位置 */
/* #preamble { */
/*   position: sticky; */
/*   top: 0; */
/*   background-image: radial-gradient(transparent 1px, var(--color-bg) 1px); */
/*   background-size: 4px 4px; */
/*   backdrop-filter: saturate(50%) blur(4px); */
/*   -webkit-backdrop-filter: saturate(50%) blur(4px); */
/*   z-index: 1; */
/*   padding: 8px 0; */
/* } */

.content img {
  max-width: 100%;
  object-fit: contain;

  /* @media not (prefers-reduced-motion) { */
  /*     animation: slideIn; */
  /*     animation-timeline: view(); */
  /*     animation-range: 0% 50%; */
  /* } */
}

/* @keyframes slideIn { */
/*   0% { */
/*     transform: translateY(100%); */
/*     opacity: 0; */
/*   } */
/*   100% { */
/*     transform: translateY(0%); */
/*     opacity: 1; */
/*   } */
/* } */

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

.content iframe {
  width: 100%;
  min-height: 300px;
  border: 1px dashed var(--color-border);
  border: 1px dashed light-dark(var(--color-border), var(--dark-color-border));
}

:is(.org-ol, .org-ul) li {
  margin-block: .5em;
}

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

:is(.org-ol, .org-ul) li > details :is(pre.example, .org-src-container) {
  margin-inline-start: 0;
}

:is(.footpara, .sidenote-content) :is(.org-ul, .org-ol) {
  margin-block: 0;
}

@media screen and (max-width: 400px) {
  #table-of-contents ul,
  #content :is(.org-ul) {
    padding-inline-start: 1em;
  }

  #content .org-dl dd {
    margin-inline-start: 1em;
  }

  :is(.org-ol, .org-ul) li > details {
    margin-block: 1em;
    margin-inline-start: -1em;
  }

  :is(.org-ol, .org-ul) li > :is(pre.example, .org-src-container) {
    margin-block: 1em;
    margin-inline-start: -1em;
  }
}

.org-src-container {
  position: relative;
  padding-top: 2em;
  border-color: var(--color-border);
  border-color: light-dark(var(--color-border), var(--dark-color-border));
  border-width: 1px;
  border-style: solid;
  background-color: var(--dark-color-bg-src-block);
  margin: 0.5em 0;
}

.table-wrapper {
  margin-block: 1em;
}
/* ------------------------------ org-mode related ------------------------------ */

/* ------------------------------ special use ------------------------------ */
mark.emacs {
  background: #7f5ab6;
  color: #fff;
  border-radius: 5px;
  padding: 2px 4px;
}
/* ------------------------------ special use ------------------------------ */

/* ------------------------------ code copy ------------------------------ */
.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  font-size: 0.9em;
  padding: 2px 0px;
  cursor: pointer;
  border: none;
  transition: color 0.2s;
  color: var(--dark-color-text);
  background: unset;

  &:hover {
    color: var(--color-link);
    color: light-dark(var(--color-link), var(--dark-color-link));
  }
}
/* ------------------------------ code copy ------------------------------ */

/* ------------------------------ littlefoot ------------------------------ */
.littlefoot.littlefoot {
  --popover-font-family: var(--font-family);
  --popover-font-size: 1em;
  --button-background-color: color(from var(--color-selection-background) srgb r g b / 0.6);
  --button-text-color: var(--color-text);
  --button-active-background-color: var(--color-selection-background);
  --button-active-text-color: var(--color-selection-text);
  --popover-vertical-padding: 1.2rem;

  & svg {
    overflow: visible;
  }

  & svg circle {
    fill: var(--color-text-secondary);
  }
}

/* .littlefoot--print.littlefoot--print { */
/*     display: revert; */
/* } */

.littlefoot__button.littlefoot__button {
  vertical-align: super;
  padding: 0 .5em;
  line-height: 1;
}

#footnotes:has(.littlefoot--print) {
  display: none;
}

body {
  &.dark {
    & .littlefoot.littlefoot {
      --popover-background-color: var(--dark-color-bg-secondary);
      --popover-text-color: var(--dark-color-text);
      --button-background-color: color(from var(--dark-color-selection-background) srgb r g b / 0.6);
      --button-text-color: var(--dark-color-text);
      --button-active-background-color: var(--dark-color-selection-background);
      --button-active-text-color: var(--dark-color-selection-text);

      & svg circle {
        fill: var(--dark-color-text-secondary);
      }
    }
  }
  @media (prefers-color-scheme: dark) {
    & .littlefoot.littlefoot {
      --popover-background-color: var(--dark-color-bg-secondary);
      --popover-text-color: var(--dark-color-text);
      --button-background-color: color(from var(--dark-color-selection-background) srgb r g b / 0.6);
      --button-text-color: var(--dark-color-text);
      --button-active-background-color: var(--dark-color-selection-background);
      --button-active-text-color: var(--dark-color-selection-text);

      & svg circle {
        fill: var(--dark-color-text-secondary);
      }
    }
  }
}

/* ------------------------------ littlefoot ------------------------------ */

/** ------------------------------ pagefind-ui ------------------------------ */
.pagefind-ui--reset mark {
  background: var(--color-selection-background);
  background: light-dark(var(--color-selection-background), var(--dark-color-selection-background));
  color: var(--color-selection-text);
  color: light-dark(var(--color-selection-text), var(--dark-color-selection-text));
}

.pagefind-ui--reset ::placeholder {
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
}

.pagefind-ui--reset.pagefind-ui--reset.pagefind-ui--reset ::placeholder {
  opacity: .5;
}

.pagefind-ui__result-nested + .pagefind-ui__result-nested {
  margin-block-start: 1.5em;
}

body {
  & .dark {
    --pagefind-ui-text: var(--dark-color-text);
    --pagefind-ui-background: var(--dark-color-bg-secondary);
    --pagefind-ui-primary: var(--dark-color-text);
    --pagefind-ui-border: var(--dark-color-text-secondary);
  }

  @media (prefers-color-scheme: dark) {
    --pagefind-ui-text: var(--dark-color-text);
    --pagefind-ui-background: var(--dark-color-bg-secondary);
    --pagefind-ui-primary: var(--dark-color-text);
    --pagefind-ui-border: var(--dark-color-text-secondary);
  }
}

.pagefind-ui__result {
  word-break: break-word;
}

/** ------------------------------ pagefind-ui ------------------------------ */

/* ------------------------------ ally-nav ------------------------------ */

.ally-nav {
  position: absolute;
  top: -10rem;
  z-index: 10000;
  left: .5rem;
  right: .5rem;
}

.ally-nav a {
  background-color: var(--color-bg-secondary);
  background-color: light-dark(var(--color-bg-secondary), var(--dark-color-bg-secondary));
  font-weight: 600;
  left: 0;
  padding: .5rem;
  position: absolute;
  right: 0;
  text-align: center;
}

.ally-nav a:focus {
  box-shadow: 0 1px 2px var(--dark-color-bg-secondary);
  box-shadow: 0 1px 2px light-dark(var(--dark-color-bg-secondary), var(--color-bg-secondary));
  text-decoration: none;
  top: 10rem;
}

/* ------------------------------ ally-nav ------------------------------ */

/* ------------------------------ table ------------------------------ */

/*
 * table
 * @see: https://piccalil.li/blog/styling-tables-the-modern-css-way/
 */

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;
}

.table-wrapper {
  overflow: auto;
}

/* 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));
}

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.3em 0.6em;
  vertical-align: baseline;
}

/* ------------------------------ table ------------------------------ */

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

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

.sidenote {
  /* 屏幕宽度减去内容宽度后，剩余 margin 的一半用于展示 sidenote, 宽度减少 1em 避免内容溢出到右侧，导致横向滚动条 */
  width: calc((100vw - var(--content-width)) / 2 - 1em);
  font-size: 0.85em;
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  gap: 0.2em;
  align-items: flex-start;
}

.sidenote-num {
  display: inline-block;
  color: var(--color-link);
  color: light-dark(var(--color-link), var(--dark-color-link));
  cursor: pointer;
  transition: color 0.2s;
  margin-inline-end: .5em;

  &:hover {
    background: var(--color-selection-background);
    background: light-dark(var(--color-selection-background), var(--dark-color-selection-background));
  }
}

.sidenote-ref-highlight {
  background: var(--color-selection-background);
  background: light-dark(var(--color-selection-background), var(--dark-color-selection-background));
  transition: background 0.2s;
}
/* ------------------------------ sidenote ------------------------------ */

/* ------------------------------ backtop ------------------------------ */
#back-to-top {
  position: fixed;
  bottom: 1em;
  right: 1em;
  width: 2em;
  height: 2em;
  z-index: 1;
  cursor: pointer;
  font-size: var(--font-size);
  padding: 0.5em;
  border: 1px;
  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: .25em;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in-out, visibility .5s;
}

@media screen and (min-width: 1200px) {
  #back-to-top {
    right: calc((100vw - var(--content-width)) / 2 - 4em);
  }
}

#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;
}
/* ------------------------------ backtop ------------------------------ */