@charset "UTF-8";
:root {
  --color-text: #1a1a1a;
  --color-background: #ffffff;
  --color-link: #0066cc;
  --color-divider: #e0e0e0;
  --color-figcaption: #555555;
  --color-term-underline: #979797;
  --color-table-border: #cccccc;
  --color-header-text: #f2f2f2;
  --color-header-background: #232323;
  --color-menu-border: #d0d0d0;
  --color-menu-selected: rgba(0, 0, 0, 0.1);
  --color-highlight: rgba(238, 226, 54, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f0f0f0;
    --color-background: #0c0c0c;
    --color-link: #5da7f2;
    --color-divider: #3f3f3f;
    --color-figcaption: #c2c2c2;
    --color-term-underline: #888888;
    --color-table-border: #505050;
    --color-menu-border: #3f3f3f;
    --color-menu-selected: rgba(240, 240, 240, 0.17);
  }
}

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

html {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  color: var(--color-text);
  background: #ffffff;
  background: var(--color-background);
  font-synthesis-weight: none;
  image-rendering: pixelated;
}

body {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  max-width: 48rem;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
@media (max-width: 600px) {
  main {
    padding: 1.5rem 1rem 3rem;
  }
}
main :target {
  scroll-margin-top: 6rem;
}

header, footer {
  background: #232323;
  background: var(--color-header-background);
  color: #f2f2f2;
  color: var(--color-header-text);
}

.header-inner, .footer-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
}
@media (max-width: 600px) {
  .header-inner, .footer-inner {
    padding: 0.5rem 1rem;
  }
}

header {
  position: sticky;
  top: 0;
}

.header-inner {
  anchor-name: --anchor-header-inner;
}

.site-name {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}

header nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
header nav li {
  margin: 0;
  padding: 0;
}
header nav > ol {
  display: flex;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}

.nav-item {
  anchor-scope: --anchor-button;
}
.nav-item > button {
  appearance: none;
  background: transparent;
  height: 100%;
  border: 1px solid rgba(242, 242, 242, 0.4);
  border-color: rgb(from var(--color-header-text) r g b/0.4);
  border-radius: 4px;
  color: inherit;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  anchor-name: --anchor-button;
}
.nav-item > button::after {
  content: "⏷";
  margin-left: 0.4rem;
}
.nav-item:hover .nav-menu-container, .nav-item:focus-within .nav-menu-container {
  display: flex;
}

.nav-menu-container {
  display: none;
  position: absolute;
  left: anchor(--anchor-button left);
  right: anchor(--anchor-header-inner right);
  max-height: calc(100vh - 100%);
  justify-content: right;
  pointer-events: none;
}

.nav-menu {
  flex: 0 0 auto;
  margin: 0 auto 0 0;
  list-style: none;
  padding: 0.375rem 0;
  width: 16rem;
  overflow-y: auto;
  background: #ffffff;
  background: var(--color-background);
  color: #1a1a1a;
  color: var(--color-text);
  font-size: 0.875rem;
  border: 1px solid #d0d0d0;
  border-color: var(--color-menu-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}
.nav-menu li > a {
  display: block;
  padding: 0.35rem 1rem;
  color: inherit;
  text-decoration: none;
}
.nav-menu li > a:hover {
  background: rgba(0, 0, 0, 0.1);
  background: var(--color-menu-selected);
  text-decoration: none;
}
.nav-menu li li > a {
  padding-left: 1.75rem;
}

@media (min-width: 80rem) {
  .nav-page-toc, .nav-project-toc {
    margin-left: -1rem;
  }
  .nav-page-toc > button, .nav-project-toc > button {
    display: none;
  }
  .nav-page-toc .nav-menu-container, .nav-project-toc .nav-menu-container {
    display: flex;
    top: 100%;
    bottom: auto;
    z-index: 0;
  }
  .nav-page-toc .nav-menu, .nav-project-toc .nav-menu {
    padding: 2rem 0;
    background: initial;
    border: initial;
    border-radius: initial;
    box-shadow: initial;
    font-size: 1rem;
  }
}

@media (min-width: 80rem) {
  .nav-project-toc .nav-menu-container {
    left: auto;
    right: calc(50% + 24rem);
  }
  .nav-project-toc .nav-menu li > a {
    color: #0066cc;
    color: var(--color-link);
  }
  .nav-project-toc .nav-menu li > a:hover {
    text-decoration: underline;
    background: unset;
  }
  .nav-project-toc .toc-menu-home {
    display: none;
  }
}
.nav-project-toc .toc-menu-title {
  display: none;
}
@media (min-width: 80rem) {
  .nav-project-toc .toc-menu-title {
    display: initial;
    font-size: 1.25em;
    font-weight: 700;
  }
}

@media (min-width: 80rem) {
  .nav-page-toc .nav-menu-container {
    left: calc(50% + 24rem);
    right: auto;
  }
}
.nav-page-toc .toc-menu-title {
  font-weight: 700;
}
@media (min-width: 80rem) {
  .nav-page-toc .toc-menu-title {
    font-size: 1.25em;
  }
  .nav-page-toc .toc-menu-title::before {
    content: "\f03a";
    font-family: "Font Awesome 6 Solid";
    margin-right: 0.5em;
  }
}

.footer-inner {
  font-size: 0.9rem;
}

footer a {
  color: inherit;
  text-decoration: underline;
}
footer a:not(:hover) {
  text-decoration-color: rgba(242, 242, 242, 0.5);
  text-decoration-color: rgb(from var(--color-header-text) r g b/0.5);
}

h1 {
  font-size: 1.75em;
  margin-top: 0;
  margin-bottom: 1em;
  border-bottom: 2px solid #e0e0e0;
  border-bottom-color: var(--color-divider);
  padding-bottom: 0.4em;
}

h2 {
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #e0e0e0;
  border-bottom-color: var(--color-divider);
  padding-bottom: 0.2em;
}

h3, h4, h5, h6 {
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

h3 {
  font-size: 1.25em;
}

p {
  margin: 0.6em 0;
}

a {
  color: #0066cc;
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a[href*="#term-"] {
  color: inherit;
  text-decoration: underline;
}
a[href*="#term-"]:not(:hover) {
  text-decoration: underline #979797 dashed;
  text-decoration-color: var(--color-term-underline);
}
[lang|=zh] a[href*="#term-"], [lang|=ja] a[href*="#term-"], [lang|=ko] a[href*="#term-"] {
  text-underline-position: under;
}

.image-block {
  margin: 1.25em 0;
}
.image-block img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  border-color: var(--color-divider);
}

figcaption {
  font-size: 1em;
  color: #555555;
  color: var(--color-figcaption);
  margin: 0.3em 0;
}

.table-block {
  overflow-x: auto;
  margin: 1.25em 0;
}

table {
  border-collapse: collapse;
}
table.frame-all {
  border: 1px solid #cccccc;
  border-color: var(--color-table-border);
}
table.grid-all td,
table.grid-all th {
  border: 1px solid #cccccc;
  border-color: var(--color-table-border);
  padding: 0.4em 0.6em;
}

.admonition-block {
  border-left: 4px solid #cccccc;
  border-color: var(--color-table-border);
  padding: 0.6em 1em;
  margin: 1em 0;
  background: rgba(204, 204, 204, 0.17);
  background: rgb(from var(--color-table-border) r g b/0.17);
}
.admonition-block.tip {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.17);
}
@media (prefers-color-scheme: dark) {
  .admonition-block.tip {
    background: rgba(76, 175, 80, 0.2);
  }
}
.admonition-block.note {
  border-color: #2196f3;
  background: rgba(33, 150, 243, 0.17);
}
@media (prefers-color-scheme: dark) {
  .admonition-block.note {
    background: rgba(33, 150, 243, 0.2);
  }
}
.admonition-block.warining {
  border-color: #ff9800;
  background: rgba(255, 152, 0, 0.17);
}
@media (prefers-color-scheme: dark) {
  .admonition-block.warining {
    background: rgba(255, 152, 0, 0.2);
  }
}
.admonition-block.caution {
  border-color: #ff9800;
  background: rgba(255, 152, 0, 0.17);
}
@media (prefers-color-scheme: dark) {
  .admonition-block.caution {
    background: rgba(255, 152, 0, 0.2);
  }
}
.admonition-block.important {
  border-color: #f44336;
  background: rgba(244, 67, 54, 0.17);
}
@media (prefers-color-scheme: dark) {
  .admonition-block.important {
    background: rgba(244, 67, 54, 0.2);
  }
}

.block-title {
  font-weight: 600;
  margin: 0 0 0.25em;
  font-size: 1em;
}

ol, ul {
  padding-left: 1.5em;
}

dl {
  margin: 0.75em 0;
}

dt {
  font-weight: 600;
  margin-top: 0.75em;
}

dd {
  margin-left: 1em;
}

.action-list > ::marker {
  content: "\f061  ";
  font-family: "Font Awesome 6 Solid";
}

main :target {
  background: rgba(238, 226, 54, 0.5);
  background: var(--color-highlight);
}

@font-face {
  font-family: "Font Awesome 6 Solid";
  src: url("fonts/fa-solid-900.woff2");
}
.fa-solid {
  font-family: "Font Awesome 6 Solid";
  font-style: normal;
}
/*# sourceMappingURL=style.css.map */