:root {
  --fore: #1a1a1a;
  --back: #f9f7f2;
  --link: #4a3525;
  --link-hover: #6d4c3c;
  --border: #a08e7a;
  --shade: rgba(0, 0, 0, 0.2);
  --width: 24cm;
  --char-height: 5cm;
  --filter: invert(25%) sepia(99%) saturate(150%) hue-rotate(335.8deg) brightness(75%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fore: #f0ede6;
    --back: #1a1510;
    --link: #d7b89c;
    --link-hover: #ecd6be;
    --border: #8a7864;
    --filter: invert(77%) sepia(30%) saturate(450%) hue-rotate(338deg) brightness(90%);
  }
}

/*
:root {
  --fore: #181818;
  --back: #f8f8f8;
  --link: #181818;
  --link-hover: #181818;
  --border: #808080;
  --shade: #808080;
  --width: 24cm;
  --char-height: 6cm;
  --filter: invert(9.375%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fore: #c8c8c8;
    --back: #181818;
    --link: #c8c8c8;
    --link-hover: #c8c8c8;
    --filter: invert(78.125%);
  }
}
*/

@media print {
  :root {
    --fore: black;
    --back: white;
    --link: black;
    --link-hover: black;
    --border: #808080;
    --char-height: 4cm;
    --filter: none;
  }
  body {
    line-height: 1.5 !important;
    font-family: "Noto Serif CJK SC", "宋体", serif !important;
  }
  .contents, .contents-title, .back-to-top, footer {
    display: none !important;
    position: unset !important;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Sans CJK SC", "微软雅黑", sans-serif;
  font-size: large;
  line-height: 2;
  color: var(--fore);
  background-color: var(--back);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.8;
  color: var(--link);
}
pre {
  font-size: 1.2rem;
  width: var(--width);
  max-width: 100%;
  overflow: auto;
}
a:any-link {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
li::marker {
  color: var(--link);
  background-color: var(--link);
  border-color: var(--link);
}

nav {
  width: 100%;
  margin: 8pt 0;
  padding: 0 8pt;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.logo {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  margin: 8pt;
}
.logo > .logo__img {
  width: unset;
  margin: 0;
  height: 1cm;
  filter: var(--filter);
}
.tag {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.8em;
  padding: 0 8pt;
  border: 1px solid var(--link);
  border-radius: 16pt;
  color: var(--link);
}

.contents {
  overflow: auto;
  position: sticky;
  top: 8pt;
  width: 10cm;
  max-height: calc(100vh - 16em);
  margin: 1.5em 8pt;
  padding: 8pt;
  float: inline-start;
  border: 1px solid var(--border);
  border-radius: 4pt;
}
@media (max-width: 1679px) {
  .contents {
    position: unset;
    top: unset;
    margin: 0 auto;
    float: none;
    width: var(--width);
    max-height: 33vh;
    max-width: 100%;
  }
}
@media (max-width: 930px) {
  .contents {
    width: calc(100vw - 16pt);
    margin: 0 8pt;
  }
}
.contents-title {
  display: none;
  font-size: 2em;
  width: var(--width);
  max-width: 100%;
  margin: 8pt auto;
  padding: 0 8pt;
}
@media (max-width: 1679px) {
  .contents-title {
    display: block;
  }
}
.contents a {
  cursor: pointer;
  text-decoration: none;
}
.contents > ul {
  margin: 0;
  padding-left: 1.5em;
}
.contents ul > ul {
  padding-left: 1em;
}
.contents li::marker {
  content: "";
}
.contents li.current::marker {
  content: "≫  ";
}

main {
  margin: 0 auto;
  padding: 8pt;
  width: var(--width);
  max-width: 100%;
  min-height: calc(100vh - 16em);
}
@media (max-width: 1679px) {
  main {
    min-height: unset;
  }
}
@media (max-width: 720px) {
  .contents, main {
    line-height: 2.5;
  }
}

p:has(img) {
  text-align: center;
  margin: 1.5em 0;
}
img[src*="src/"],
img[src*="/font/"] {
  max-height: var(--char-height);
  margin: 1em auto;
  filter: var(--filter);
}
img[src*="src/"] {
  display: block;
}
img[src*="/font/"] {
  display: inline-block;
}
img + em,
p > em,
:not(img) + img:nth-last-child(1),
img:nth-child(1):nth-last-child(1) {
  display: block;
}
img[src*="src/logo.svg"],
img[src*="src/font_logo.svg"] {
  height: unset;
  width: var(--width);
  max-width: 100%;
}

footer {
  font-size: medium;
  line-height: 1.5;
  padding: 8pt;
  margin-bottom: 2cm;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.back-to-top {
  display: inline-block;
  position: relative;
  left: 80%;
  top: 1em;
  border: 1px solid var(--border);
  border-radius: 4pt;
  background-color: var(--back);
  padding: 0pt 8pt;
  font-size: 1rem;
}