header {
  flex-direction:row;
  align-items:center;
  gap:0.5rem;
  margin: 0.5rem 0;
  display:flex
}

header h1 {
  flex:auto;
  margin:0;
}

.clipboard-button {
  float:right;
  color:var(--gray);
  border-color:var(--dark);
  background-color:var(--light);
  opacity:0;
  border:1px solid;
  border-radius:5px;
  margin:.3rem;
  padding:.4rem;
  transition:all .2s;
  display:flex;
  position:absolute;
  right:0
}

.clipboard-button>svg {
  fill:var(--light);
  filter:contrast(.3)
}

.clipboard-button:hover {
  cursor:pointer;
  border-color:var(--secondary)
}

.clipboard-button:focus {
  outline:0
}

pre:hover>.clipboard-button {
  opacity:1;
  transition:all .2s
}

.breadcrumb-container {
  flex-flow:wrap;
  gap:.5rem;
  margin:.75rem 0 0;
  padding:0;
  display:flex
}

.breadcrumb-element p {
  margin:0 0 0 .5rem;
  padding:0;
  line-height:normal
}

.breadcrumb-element {
  flex-direction:row;
  justify-content:center;
  align-items:center;
  display:flex
}

.content-meta {
  color:var(--darkgray);
  margin-top:0
}

.content-meta[show-comma=true]>:not(:last-child) {
  margin-right:4px
}

.content-meta[show-comma=true]>:not(:last-child):after {
  content:","
}

.page-title {
  font-size:1.45rem;
  font-family:var(--titleFont);
  margin:0
}

.search {
  min-width:fit-content;
  max-width:14rem
}

@media (max-width:800px) {
  .search {
    flex-grow:.3
  }
}

.search>.search-button {
  border:1px var(--lightgray) solid;
  font-family:inherit;
  font-size:inherit;
  height:2rem;
  text-align:inherit;
  cursor:pointer;
  white-space:nowrap;
  background-color:#0000;
  border-radius:4px;
  align-items:center;
  width:100%;
  padding:0 1rem 0 0;
  display:flex
}

.search>.search-button>p {
  color:var(--gray);
  text-wrap:unset;
  display:inline
}

.search>.search-button svg {
  cursor:pointer;
  width:18px;
  min-width:18px;
  margin:0 .5rem
}

.search>.search-button svg .search-path {
  stroke:var(--darkgray);
  stroke-width:1.5px;
  transition:stroke .5s
}

.search>.search-container {
  contain:layout;
  z-index:999;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  width:100vw;
  height:100vh;
  display:none;
  position:fixed;
  top:0;
  left:0;
  overflow-y:auto
}

.search>.search-container.active {
  display:inline-block
}

.search>.search-container>.search-space {
  width:65%;
  margin-top:12vh;
  margin-left:auto;
  margin-right:auto
}

@media not (min-width:1200px) {
  .search>.search-container>.search-space {
    width:90%
  }
}

.search>.search-container>.search-space>* {
  background:var(--light);
  border-radius:7px;
  width:100%;
  margin-bottom:2em;
  box-shadow:0 14px 50px #1b21301f,0 10px 30px #1b213029
}

.search>.search-container>.search-space>input {
  box-sizing:border-box;
  font-family:var(--bodyFont);
  color:var(--dark);
  border:1px solid var(--lightgray);
  padding:.5em 1em;
  font-size:1.1em
}

.search>.search-container>.search-space>input:focus {
  outline:none
}

.search>.search-container>.search-space>.search-layout {
  border:1px solid var(--lightgray);
  box-sizing:border-box;
  flex-direction:row;
  flex:0 0 100%;
  display:none
}

.search>.search-container>.search-space>.search-layout.display-results {
  display:flex
}

.search>.search-container>.search-space>.search-layout[data-preview]>.results-container {
  flex:0 0 min(30%,450px)
}

@media not (max-width:800px) {
  .search>.search-container>.search-space>.search-layout[data-preview] .result-card>p.preview {
    display:none
  }

  .search>.search-container>.search-space>.search-layout[data-preview]>div:first-child {
    border-right:1px solid var(--lightgray);
    border-top-right-radius:unset;
    border-bottom-right-radius:unset
  }

  .search>.search-container>.search-space>.search-layout[data-preview]>div:last-child {
    border-top-left-radius:unset;
    border-bottom-left-radius:unset
  }
}

.search>.search-container>.search-space>.search-layout>div {
  border-radius:5px;
  height:63vh
}

@media (max-width:800px) {
  .search>.search-container>.search-space>.search-layout {
    flex-direction:column
  }

  .search>.search-container>.search-space>.search-layout>.preview-container {
    display:none!important
  }

  .search>.search-container>.search-space>.search-layout[data-preview]>.results-container {
    flex:0 0 100%;
    width:100%;
    height:auto
  }
}

.search>.search-container>.search-space>.search-layout .highlight {
  background:color-mix(in srgb, var(--tertiary) 60%, #fff0);
  border-radius:5px;
  scroll-margin-top:2rem
}

.search>.search-container>.search-space>.search-layout>.preview-container {
  color:var(--dark);
  flex-grow:1;
  padding:0 2rem;
  font-family:inherit;
  font-weight:400;
  line-height:1.5em;
  display:block;
  overflow:hidden auto
}

.search>.search-container>.search-space>.search-layout>.preview-container .preview-inner {
  width:min(800px,100%);
  margin:0 auto
}

.search>.search-container>.search-space>.search-layout>.preview-container a[role=anchor] {
  background-color:#0000
}

.search>.search-container>.search-space>.search-layout>.results-container {
  overflow-y:auto
}

.search>.search-container>.search-space>.search-layout>.results-container .result-card {
  cursor:pointer;
  border-bottom:1px solid var(--lightgray);
  box-sizing:border-box;
  text-transform:none;
  text-align:left;
  width:100%;
  font-family:inherit;
  font-size:100%;
  line-height:1.15;
  font-weight:inherit;
  outline:none;
  margin:0;
  padding:1em;
  transition:background .2s;
  display:block;
  overflow:hidden
}

.search>.search-container>.search-space>.search-layout>.results-container .result-card:hover,.search>.search-container>.search-space>.search-layout>.results-container .result-card:focus,.search>.search-container>.search-space>.search-layout>.results-container .result-card.focus {
  background:var(--lightgray)
}

.search>.search-container>.search-space>.search-layout>.results-container .result-card>h3 {
  margin:0
}

@media not (max-width:800px) {
  .search>.search-container>.search-space>.search-layout>.results-container .result-card>p.card-description {
    display:none
  }
}

.search>.search-container>.search-space>.search-layout>.results-container .result-card>ul.tags {
  margin-top:.45rem;
  margin-bottom:0
}

.search>.search-container>.search-space>.search-layout>.results-container .result-card>ul>li>p {
  background-color:var(--highlight);
  color:var(--secondary);
  border-radius:8px;
  margin:0 .1rem;
  padding:.2rem .4rem;
  font-weight:700;
  line-height:1.4rem
}

.search>.search-container>.search-space>.search-layout>.results-container .result-card>ul>li>p.match-tag {
  color:var(--tertiary)
}

.search>.search-container>.search-space>.search-layout>.results-container .result-card>p {
  margin-bottom:0
}

.darkmode {
  cursor:pointer;
  width:20px;
  height:32px;
  text-align:inherit;
  background:0 0;
  border:none;
  flex-shrink:0;
  margin:0;
  padding:0;
  position:relative
}

.darkmode svg {
  width:20px;
  height:20px;
  fill:var(--darkgray);
  transition:opacity .1s;
  position:absolute;
  top:calc(50% - 10px)
}

:root[saved-theme=dark] {
  --lightningcss-light: ;
  --lightningcss-dark:initial;
  color-scheme:dark
}

:root[saved-theme=light] {
  --lightningcss-light:initial;
  --lightningcss-dark: ;
  color-scheme:light
}

:root[saved-theme=dark] .darkmode>.dayIcon {
  display:none
}

:root[saved-theme=dark] .darkmode>.nightIcon,:root .darkmode>.dayIcon {
  display:inline
}

:root .darkmode>.nightIcon {
  display:none
}

@media (max-width:800px) {
  .page>#quartz-body>:not(.sidebar.left:has(.explorer)) {
    transition:transform .3s ease-in-out
  }

  .page>#quartz-body.lock-scroll>:not(.sidebar.left:has(.explorer)) {
    transition:transform .3s ease-in-out;
    transform:translate(100dvw)
  }

  .page>#quartz-body .sidebar.left:has(.explorer) {
    box-sizing:border-box;
    background-color:var(--light);
    margin:0;
    padding:1rem 0;
    position:sticky
  }

  .page>#quartz-body .hide-until-loaded~.explorer-content {
    display:none
  }
}

.explorer {
  flex-direction:column;
  flex:0 auto;
  min-height:1.2rem;
  display:flex;
  overflow-y:hidden
}

.explorer.collapsed {
  flex:0 1.2rem
}

.explorer.collapsed .fold {
  transform:rotate(-90deg)
}

.explorer .fold {
  opacity:.8;
  margin-left:.5rem;
  transition:transform .3s
}

@media (max-width:800px) {
  .explorer {
    height:initial;
    flex-shrink:0;
    order:-1;
    align-self:flex-start;
    margin-top:auto;
    margin-bottom:auto;
    overflow:hidden
  }
}

.explorer button.mobile-explorer {
  display:none
}

.explorer button.desktop-explorer {
  display:flex
}

@media (max-width:800px) {
  .explorer button.mobile-explorer {
    display:flex
  }

  .explorer button.desktop-explorer {
    display:none
  }
}

@media not (min-width:1200px) {
  .explorer.desktop-only {
    display:flex
  }
}

.explorer svg {
  pointer-events:all;
  transition:transform .35s
}

.explorer svg>polyline {
  pointer-events:none
}

button.mobile-explorer,button.desktop-explorer {
  text-align:left;
  cursor:pointer;
  color:var(--dark);
  background-color:#0000;
  border:none;
  align-items:center;
  padding:0;
  display:flex
}

button.mobile-explorer h2,button.desktop-explorer h2 {
  margin:0;
  font-size:1rem;
  display:inline-block
}

.explorer-content {
  margin-top:.5rem;
  list-style:none;
  overflow:hidden auto
}

.explorer-content ul {
  margin:0;
  padding:0;
  list-style:none
}

.explorer-content ul.explorer-ul {
  overscroll-behavior:contain
}

.explorer-content ul li>a {
  color:var(--dark);
  opacity:.75;
  pointer-events:all
}

.explorer-content ul li>a.active {
  opacity:1;
  color:var(--tertiary)
}

.explorer-content .folder-outer {
  visibility:collapse;
  grid-template-rows:0fr;
  transition-property:grid-template-rows,visibility;
  transition-duration:.3s;
  transition-timing-function:ease-in-out;
  display:grid
}

.explorer-content .folder-outer.open {
  visibility:visible;
  grid-template-rows:1fr
}

.explorer-content .folder-outer>ul {
  border-left:1px solid var(--lightgray);
  margin-left:6px;
  padding-left:.8rem;
  overflow:hidden
}

.folder-container {
  -webkit-user-select:none;
  user-select:none;
  flex-direction:row;
  align-items:center;
  display:flex
}

.folder-container div>a {
  color:var(--secondary);
  font-family:var(--headerFont);
  font-size:.95rem;
  font-weight:600;
  line-height:1.5rem;
  display:inline-block
}

.folder-container div>a:hover {
  color:var(--tertiary)
}

.folder-container div>button {
  color:var(--dark);
  text-align:left;
  cursor:pointer;
  font-family:var(--headerFont);
  background-color:#0000;
  border:none;
  align-items:center;
  padding-left:0;
  padding-right:0;
  display:flex
}

.folder-container div>button span {
  color:var(--secondary);
  pointer-events:none;
  margin:0;
  font-size:.95rem;
  font-weight:600;
  line-height:1.5rem;
  display:inline-block
}

.folder-icon {
  color:var(--secondary);
  cursor:pointer;
  backface-visibility:visible;
  flex-shrink:0;
  margin-right:5px;
  transition:transform .3s
}

li:has(>.folder-outer:not(.open))>.folder-container>svg {
  transform:rotate(-90deg)
}

.folder-icon:hover {
  color:var(--tertiary)
}

@media (max-width:800px) {
  .explorer.collapsed {
    flex:0 0 34px
  }

  .explorer.collapsed>.explorer-content {
    visibility:hidden;
    transform:translate(-100vw)
  }

  .explorer:not(.collapsed) {
    flex:0 0 34px
  }

  .explorer:not(.collapsed)>.explorer-content {
    visibility:visible;
    transform:translate(0)
  }

  .explorer .explorer-content {
    box-sizing:border-box;
    z-index:100;
    background-color:var(--light);
    visibility:hidden;
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    margin-top:0;
    padding:4rem 0 2rem;
    transition:transform .2s,visibility .2s;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    transform:translate(-100vw)
  }

  .explorer .mobile-explorer {
    z-index:101;
    margin:0;
    padding:5px
  }

  .explorer .mobile-explorer .lucide-menu {
    stroke:var(--darkgray)
  }

  .mobile-no-scroll .explorer-content>.explorer-ul {
    overscroll-behavior:contain
  }
}

.toc {
  flex-direction:column;
  flex:0 .5 auto;
  min-height:1.4rem;
  display:flex;
  overflow-y:hidden
}

.toc:has(button.toc-header.collapsed) {
  flex:0 1.4rem
}

button.toc-header {
  text-align:left;
  cursor:pointer;
  color:var(--dark);
  background-color:#0000;
  border:none;
  align-items:center;
  padding:0;
  display:flex
}

button.toc-header h3 {
  margin:0;
  font-size:1rem;
  display:inline-block
}

button.toc-header .fold {
  opacity:.8;
  margin-left:.5rem;
  transition:transform .3s
}

button.toc-header.collapsed .fold {
  transform:rotate(-90deg)
}

ul.toc-content.overflow {
  overscroll-behavior:contain;
  max-height:calc(100% - 2rem);
  margin:.5rem 0;
  padding:0;
  list-style:none;
  position:relative
}

ul.toc-content.overflow>li>a {
  color:var(--dark);
  opacity:.35;
  transition:opacity .5s,color .3s
}

ul.toc-content.overflow>li>a.in-view {
  opacity:.75
}

ul.toc-content.overflow .depth-0 {
  padding-left:0
}

ul.toc-content.overflow .depth-1 {
  padding-left:1rem
}

ul.toc-content.overflow .depth-2 {
  padding-left:2rem
}

ul.toc-content.overflow .depth-3 {
  padding-left:3rem
}

ul.toc-content.overflow .depth-4 {
  padding-left:4rem
}

ul.toc-content.overflow .depth-5 {
  padding-left:5rem
}

ul.toc-content.overflow .depth-6 {
  padding-left:6rem
}

.graph>h3 {
  margin:0;
  font-size:1rem
}

.graph>.graph-outer {
  border:1px solid var(--lightgray);
  box-sizing:border-box;
  border-radius:5px;
  height:250px;
  margin:.5em 0;
  position:relative;
  overflow:hidden
}

.graph>.graph-outer>.global-graph-icon {
  cursor:pointer;
  color:var(--dark);
  opacity:.5;
  cursor:pointer;
  background:0 0;
  border:none;
  border-radius:4px;
  width:24px;
  height:24px;
  margin:.3rem;
  padding:.2rem;
  transition:background-color .5s;
  position:absolute;
  top:0;
  right:0
}

.graph>.graph-outer>.global-graph-icon:hover {
  background-color:var(--lightgray)
}

.graph>.global-graph-outer {
  z-index:9999;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  width:100vw;
  height:100%;
  display:none;
  position:fixed;
  top:0;
  left:0;
  overflow:hidden
}

.graph>.global-graph-outer.active {
  display:inline-block
}

.graph>.global-graph-outer>.global-graph-container {
  border:1px solid var(--lightgray);
  background-color:var(--light);
  box-sizing:border-box;
  border-radius:5px;
  width:80vw;
  height:80vh;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

@media not (min-width:1200px) {
  .graph>.global-graph-outer>.global-graph-container {
    width:90%
  }
}

footer {
  text-align:left;
  opacity:.7;
  margin-bottom:4rem
}

footer ul {
  flex-direction:row;
  gap:1rem;
  margin:-1rem 0 0;
  padding:0;
  list-style:none;
  display:flex
}

.article-title {
  margin:2rem 0 0
}

ul.section-ul {
  margin-top:2em;
  padding-left:0;
  list-style:none
}

li.section-li {
  margin-bottom:1em
}

li.section-li>.section {
  grid-template-columns:fit-content(8em) 3fr 1fr;
  display:grid
}

@media (max-width:800px) {
  li.section-li>.section>.tags {
    display:none
  }
}

li.section-li>.section>.desc>h3>a {
  background-color:#0000
}

li.section-li>.section .meta {
  opacity:.6;
  margin:0 1em 0 0
}

.popover .section {
  grid-template-columns:fit-content(8em) 1fr!important
}

.popover .section>.tags {
  display:none
}

.section h3,.section>.tags {
  margin:0
}

@keyframes dropin {
  0% {
    opacity:0;
    visibility:hidden
  }

  1% {
    opacity:0
  }

  to {
    opacity:1;
    visibility:visible
  }
}

.popover {
  z-index:999;
  will-change:transform;
  padding:1rem;
  position:fixed;
  top:0;
  left:0;
  overflow:visible
}

.popover>.popover-inner {
  width:30rem;
  max-height:20rem;
  font-weight:initial;
  font-style:initial;
  line-height:normal;
  font-size:initial;
  font-family:var(--bodyFont);
  border:1px solid var(--lightgray);
  background-color:var(--light);
  overscroll-behavior:contain;
  white-space:normal;
  -webkit-user-select:none;
  user-select:none;
  cursor:default;
  border-radius:5px;
  padding:0 1rem 1rem;
  position:relative;
  overflow:auto;
  box-shadow:6px 6px 36px #00000040
}

.popover>.popover-inner[data-content-type][data-content-type*=pdf],.popover>.popover-inner[data-content-type][data-content-type*=image] {
  max-height:100%;
  padding:0
}

.popover>.popover-inner[data-content-type][data-content-type*=image] img {
  border-radius:0;
  margin:0;
  display:block
}

.popover>.popover-inner[data-content-type][data-content-type*=pdf] iframe {
  width:100%
}

.popover h1 {
  font-size:1.5rem
}

.popover {
  visibility:hidden;
  opacity:0;
  transition:opacity .3s,visibility .3s
}

@media (max-width:800px) {
  .popover {
    display:none!important
  }
}

.active-popover,.popover:hover {
  animation:.3s .2s forwards dropin
}

code[data-theme*=\ ] {
  color:var(--shiki-light);
  background-color:var(--shiki-light-bg)
}

code[data-theme*=\ ] span {
  color:var(--shiki-light)
}

[saved-theme=dark] code[data-theme*=\ ] {
  color:var(--shiki-dark);
  background-color:var(--shiki-dark-bg)
}

[saved-theme=dark] code[data-theme*=\ ] span {
  color:var(--shiki-dark)
}

.callout {
  border:1px solid var(--border);
  background-color:var(--bg);
  box-sizing:border-box;
  border-radius:5px;
  padding:0 1rem;
  overflow-y:hidden
}

.callout>.callout-content {
  transition:grid-template-rows .1s cubic-bezier(.02,.01,.47,1);
  display:grid;
  overflow:hidden
}

.callout>.callout-content>:first-child {
  margin-top:0
}

.callout {
  --callout-icon-note:url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"2\" x2=\"22\" y2=\"6\"></line><path d=\"M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z\"></path></svg>");
  --callout-icon-abstract:url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"></rect><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"></path><path d=\"M12 11h4\"></path><path d=\"M12 16h4\"></path><path d=\"M8 11h.01\"></path><path d=\"M8 16h.01\"></path></svg>");
  --callout-icon-info:url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line></svg>");
  --callout-icon-todo:url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"></path><path d=\"m9 12 2 2 4-4\"></path></svg>");
  --callout-icon-tip:url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"></path></svg> ");
  --callout-icon-success:url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg> ");
  --callout-icon-question:url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"></path><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line></svg> ");
  --callout-icon-warning:url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"></path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line></svg>");
  --callout-icon-failure:url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg> ");
  --callout-icon-danger:url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"></polygon></svg> ");
  --callout-icon-bug:url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"8\" height=\"14\" x=\"8\" y=\"6\" rx=\"4\"></rect><path d=\"m19 7-3 2\"></path><path d=\"m5 7 3 2\"></path><path d=\"m19 19-3-2\"></path><path d=\"m5 19 3-2\"></path><path d=\"M20 13h-4\"></path><path d=\"M4 13h4\"></path><path d=\"m10 4 1 2\"></path><path d=\"m14 4-1 2\"></path></svg>");
  --callout-icon-example:url("data:image/svg+xml; utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"></line><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"></line><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"></line><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"></line><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"></line><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"></line></svg> ");
  --callout-icon-quote:url("data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z\"></path><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z\"></path></svg>");
  --callout-icon-fold:url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"%3E%3Cpolyline points=\"6 9 12 15 18 9\"%3E%3C/polyline%3E%3C/svg%3E")
}

.callout[data-callout] {
  --color:#448aff;
  --border:#448aff44;
  --bg:#448aff10;
  --callout-icon:var(--callout-icon-note)
}

.callout[data-callout=abstract] {
  --color:#00b0ff;
  --border:#00b0ff44;
  --bg:#00b0ff10;
  --callout-icon:var(--callout-icon-abstract)
}

.callout[data-callout=info],.callout[data-callout=todo] {
  --color:#00b8d4;
  --border:#00b8d444;
  --bg:#00b8d410;
  --callout-icon:var(--callout-icon-info)
}

.callout[data-callout=todo] {
  --callout-icon:var(--callout-icon-todo)
}

.callout[data-callout=tip] {
  --color:#00bfa5;
  --border:#00bfa544;
  --bg:#00bfa510;
  --callout-icon:var(--callout-icon-tip)
}

.callout[data-callout=success] {
  --color:#09ad7a;
  --border:#09ad7144;
  --bg:#09ad7110;
  --callout-icon:var(--callout-icon-success)
}

.callout[data-callout=question] {
  --color:#dba642;
  --border:#dba64244;
  --bg:#dba64210;
  --callout-icon:var(--callout-icon-question)
}

.callout[data-callout=warning] {
  --color:#db8942;
  --border:#db894244;
  --bg:#db894210;
  --callout-icon:var(--callout-icon-warning)
}

.callout[data-callout=failure],.callout[data-callout=danger],.callout[data-callout=bug] {
  --color:#db4242;
  --border:#db424244;
  --bg:#db424210;
  --callout-icon:var(--callout-icon-failure)
}

.callout[data-callout=bug] {
  --callout-icon:var(--callout-icon-bug)
}

.callout[data-callout=danger] {
  --callout-icon:var(--callout-icon-danger)
}

.callout[data-callout=example] {
  --color:#7a43b5;
  --border:#7a43b544;
  --bg:#7a43b510;
  --callout-icon:var(--callout-icon-example)
}

.callout[data-callout=quote] {
  --color:var(--secondary);
  --border:var(--lightgray);
  --callout-icon:var(--callout-icon-quote)
}

.callout.is-collapsed>.callout-title>.fold-callout-icon {
  transform:rotate(-90deg)
}

.callout.is-collapsed .callout-content>* {
  height:0;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  transition:height .1s cubic-bezier(.02,.01,.47,1),margin .1s cubic-bezier(.02,.01,.47,1),padding .1s cubic-bezier(.02,.01,.47,1);
  overflow-y:clip
}

.callout.is-collapsed .callout-content>:first-child {
  margin-top:-1rem
}

.callout-title {
  color:var(--color);
  --icon-size:18px;
  align-items:flex-start;
  gap:5px;
  padding:1rem 0;
  display:flex
}

.callout-title .fold-callout-icon {
  opacity:.8;
  cursor:pointer;
  --callout-icon:var(--callout-icon-fold);
  transition:transform .15s
}

.callout-title>.callout-title-inner>p {
  color:var(--color);
  margin:0
}

.callout-title .callout-icon,.callout-title .fold-callout-icon {
  width:var(--icon-size);
  height:var(--icon-size);
  flex:0 0 var(--icon-size);
  background-size:var(--icon-size) var(--icon-size);
  background-position:50%;
  background-color:var(--color);
  -webkit-mask-image:var(--callout-icon);
  mask-image:var(--callout-icon);
  -webkit-mask-size:var(--icon-size) var(--icon-size);
  mask-size:var(--icon-size) var(--icon-size);
  padding:.2rem 0;
  -webkit-mask-position:50%;
  mask-position:50%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat
}

.callout-title .callout-title-inner {
  font-weight:600
}

html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust:none;
  -moz-text-size-adjust:none;
  text-size-adjust:none;
  width:100vw;
  overflow-x:hidden
}

@media (max-width:800px) {
  html {
    scroll-padding-top:4rem
  }
}

body {
  box-sizing:border-box;
  background-color:var(--light);
  font-family:var(--bodyFont);
  color:var(--darkgray);
  margin:0
}

.text-highlight {
  background-color:var(--textHighlight);
  border-radius:5px;
  padding:0 .1rem
}

::selection {
  background:color-mix(in srgb, var(--tertiary) 60%, #fff0);
  color:var(--darkgray)
}

p,ul,text,a,tr,td,li,ol,ul,.katex,.math,.typst-doc,g[class~=typst-text] {
  color:var(--darkgray);
  fill:var(--darkgray);
  overflow-wrap:break-word;
  text-wrap:pretty
}

path[class~=typst-shape] {
  stroke:var(--darkgray)
}

.math.math-display {
  text-align:center
}

article>mjx-container.MathJax,article blockquote>div>mjx-container.MathJax {
  display:flex
}

article>mjx-container.MathJax>svg,article blockquote>div>mjx-container.MathJax>svg {
  margin-left:auto;
  margin-right:auto
}

article blockquote>div>mjx-container.MathJax>svg {
  margin-top:1rem;
  margin-bottom:1rem
}

strong {
  font-weight:600
}

a {
  color:var(--secondary);
  font-weight:600;
  text-decoration:none;
  transition:color .2s
}

a:hover {
  color:var(--tertiary)
}

a.internal {
  background-color:var(--highlight);
  border-radius:5px;
  padding:0 .1rem;
  line-height:1.4rem;
  text-decoration:none
}

a.internal.broken {
  color:var(--secondary);
  opacity:.5;
  transition:opacity .2s
}

a.internal.broken:hover {
  opacity:.8
}

a.internal:has(>img) {
  background-color:#0000;
  border-radius:0;
  padding:0
}

a.internal.tag-link:before {
  content:"#"
}

a.external .external-icon {
  height:1ex;
  margin:0 .15em
}

a.external .external-icon>path {
  fill:var(--dark)
}

.flex-component {
  display:flex
}

.desktop-only {
  display:initial
}

.desktop-only.flex-component {
  display:flex
}

@media (max-width:800px) {
  .desktop-only.flex-component,.desktop-only {
    display:none
  }
}

.mobile-only,.mobile-only.flex-component {
  display:none
}

@media (max-width:800px) {
  .mobile-only.flex-component {
    display:flex
  }

  .mobile-only {
    display:initial
  }
}

.page {
  max-width:1200px;
  margin:0 auto
}

.page article>h1 {
  font-size:2rem
}

.page article li:has(>input[type=checkbox]) {
  padding-left:0;
  list-style-type:none
}

.page article li:has(>input[type=checkbox]:checked) {
  text-decoration:line-through;
  -webkit-text-decoration-color:var(--gray);
  text-decoration-color:var(--gray);
  color:var(--gray)
}

.page article li>* {
  margin-top:0;
  margin-bottom:0
}

.page article p>strong {
  color:var(--dark)
}

.page>#quartz-body {
  grid-template:"grid-sidebar-left grid-header grid-sidebar-right""grid-sidebar-left grid-center grid-sidebar-right""grid-sidebar-left grid-footer grid-sidebar-right"/200px auto 200px;
  gap:4px;
  display:grid
}

@media (min-width:800px) and (max-width:1200px) {
  .page>#quartz-body {
    grid-template:"grid-sidebar-left grid-header""grid-sidebar-left grid-center""grid-sidebar-left grid-sidebar-right""grid-sidebar-left grid-footer"/200px auto;
    gap:5px
  }
}

@media (max-width:800px) {
  .page>#quartz-body {
    grid-template:"grid-sidebar-left""grid-header""grid-center""grid-sidebar-right""grid-footer"/auto;
    gap:5px
  }
}

@media not (min-width:1200px) {
  .page>#quartz-body {
    padding:0 1rem
  }
}

@media (max-width:800px) {
  .page>#quartz-body {
    margin:0 auto
  }
}

.page>#quartz-body .sidebar {
  box-sizing:border-box;
  gap:1.2rem;
  height:100vh;
  padding:6rem 2rem 2rem;
  display:flex;
  position:sticky;
  top:0
}

.page>#quartz-body .sidebar.left {
  z-index:1;
  flex-direction:column;
  grid-area:grid-sidebar-left
}

@media (max-width:800px) {
  .page>#quartz-body .sidebar.left {
    position:initial;
    height:unset;
    flex-direction:row;
    align-items:center;
    gap:0;
    padding:2rem 0 0;
    display:flex
  }
}

.page>#quartz-body .sidebar.right {
  flex-direction:column;
  grid-area:grid-sidebar-right;
  margin-right:0
}

@media (max-width:800px) {
  .page>#quartz-body .sidebar.right {
    margin-left:inherit;
    margin-right:inherit
  }
}

@media not (min-width:1200px) {
  .page>#quartz-body .sidebar.right {
    position:initial;
    height:unset;
    flex-direction:row;
    width:100%;
    padding:0
  }

  .page>#quartz-body .sidebar.right>* {
    flex:1;
    max-height:24rem
  }

  .page>#quartz-body .sidebar.right>.toc {
    display:none
  }
}

.page>#quartz-body .page-header,.page>#quartz-body .page-footer {
  margin-top:1rem
}

.page>#quartz-body .page-header {
  grid-area:grid-header;
  margin:0 0 0
}

@media (max-width:800px) {
  .page>#quartz-body .page-header {
    margin-top:0;
    padding:0
  }
}

.page>#quartz-body .center>article {
  grid-area:grid-center
  max-width: 75%;
  margin: 0.5rem;
}

.page>#quartz-body footer {
  grid-area:grid-footer
}

.page>#quartz-body .center,.page>#quartz-body footer {
  min-width:50%;
  max-width:75%;
  margin-left:auto;
  margin-right:auto
}

@media (min-width:800px) and (max-width:1200px) {
  .page>#quartz-body .center,.page>#quartz-body footer {
    margin-right:0
  }
}

@media (max-width:800px) {
  .page>#quartz-body .center,.page>#quartz-body footer {
    margin-left:0;
    margin-right:0
  }
}

.page>#quartz-body footer {
  margin-left:0
}

.footnotes {
  border-top:1px solid var(--lightgray);
  margin-top:2rem
}

input[type=checkbox] {
  color:var(--secondary);
  border:1px solid var(--lightgray);
  background-color:var(--light);
  appearance:none;
  border-radius:3px;
  width:16px;
  height:16px;
  margin-inline:-1.4rem .2rem;
  position:relative;
  transform:translateY(2px)
}

input[type=checkbox]:checked {
  border-color:var(--secondary);
  background-color:var(--secondary)
}

input[type=checkbox]:checked:after {
  content:"";
  border:solid var(--light);
  border-width:0 2px 2px 0;
  width:4px;
  height:8px;
  display:block;
  position:absolute;
  top:1px;
  left:4px;
  transform:rotate(45deg)
}

blockquote {
  border-left:3px solid var(--secondary);
  margin:1rem 0;
  padding-left:1rem;
  transition:border-color .2s
}

h1,h2,h3,h4,h5,h6,thead {
  font-family:var(--headerFont);
  color:var(--dark);
  font-weight:revert;
  margin-bottom:0
}

article>h1>a[role=anchor],article>h2>a[role=anchor],article>h3>a[role=anchor],article>h4>a[role=anchor],article>h5>a[role=anchor],article>h6>a[role=anchor],article>thead>a[role=anchor] {
  color:var(--dark);
  background-color:#0000
}

h1[id]>a[href^=\#],h2[id]>a[href^=\#],h3[id]>a[href^=\#],h4[id]>a[href^=\#],h5[id]>a[href^=\#],h6[id]>a[href^=\#] {
  opacity:0;
  font-family:var(--codeFont);
  -webkit-user-select:none;
  user-select:none;
  margin:0 .5rem;
  transition:opacity .2s;
  transform:translateY(-.1rem)
}

h1[id]:hover>a,h2[id]:hover>a,h3[id]:hover>a,h4[id]:hover>a,h5[id]:hover>a,h6[id]:hover>a {
  opacity:1
}

h1:not([id])>a[role=anchor],h2:not([id])>a[role=anchor],h3:not([id])>a[role=anchor],h4:not([id])>a[role=anchor],h5:not([id])>a[role=anchor],h6:not([id])>a[role=anchor] {
  display:none
}

h1 {
  margin-top:2.25rem;
  margin-bottom:1rem;
  font-size:1.75rem
}

h2 {
  margin-top:1.9rem;
  margin-bottom:1rem;
  font-size:1.4rem
}

h3 {
  margin-top:1.62rem;
  margin-bottom:1rem;
  font-size:1.12rem
}

h4,h5,h6 {
  margin-top:1.5rem;
  margin-bottom:1rem;
  font-size:1rem
}

figure[data-rehype-pretty-code-figure] {
  margin:0;
  line-height:1.6rem;
  position:relative
}

figure[data-rehype-pretty-code-figure]>[data-rehype-pretty-code-title] {
  font-family:var(--codeFont);
  border:1px solid var(--lightgray);
  width:fit-content;
  color:var(--darkgray);
  border-radius:5px;
  margin-bottom:-.5rem;
  padding:.1rem .5rem;
  font-size:.9rem
}

figure[data-rehype-pretty-code-figure]>pre {
  padding:0
}

pre {
  font-family:var(--codeFont);
  border:1px solid var(--lightgray);
  border-radius:5px;
  padding:0 .5rem;
  position:relative;
  overflow-x:auto
}

pre:has(>code.mermaid) {
  border:none
}

pre>code {
  counter-reset:line;
  counter-increment:line 0;
  background:0 0;
  padding:.5rem 0;
  font-size:.85rem;
  display:grid;
  overflow-x:auto
}

pre>code [data-highlighted-chars] {
  background-color:var(--highlight);
  border-radius:5px
}

pre>code>[data-line] {
  box-sizing:border-box;
  border-left:3px solid #0000;
  padding:0 .25rem
}

pre>code>[data-line][data-highlighted-line] {
  background-color:var(--highlight);
  border-left:3px solid var(--secondary)
}

pre>code>[data-line]:before {
  content:counter(line);
  counter-increment:line;
  text-align:right;
  color:#738a9499;
  width:1rem;
  margin-right:1rem;
  display:inline-block
}

pre>code[data-line-numbers-max-digits="2"]>[data-line]:before {
  width:2rem
}

pre>code[data-line-numbers-max-digits="3"]>[data-line]:before {
  width:3rem
}

code {
  color:var(--dark);
  font-size:.9em;
  font-family:var(--codeFont);
  background:var(--lightgray);
  border-radius:5px;
  padding:.1rem .2rem
}

tbody,li,p {
  line-height:1.6rem
}

.table-container {
  overflow-x:auto
}

.table-container>table {
  border-collapse:collapse;
  margin:1rem;
  padding:1.5rem
}

.table-container>table th,.table-container>table td {
  min-width:75px
}

.table-container>table>* {
  line-height:2rem
}

th {
  text-align:left;
  border-bottom:2px solid var(--gray);
  padding:.4rem .7rem
}

td {
  padding:.2rem .7rem
}

tr {
  border-bottom:1px solid var(--lightgray)
}

tr:last-child {
  border-bottom:none
}

img {
  content-visibility:auto;
  border-radius:5px;
  max-width:100%;
  margin:1rem 0
}

p>img+em {
  display:block;
  transform:translateY(-1rem)
}

hr {
  background-color:var(--lightgray);
  border:none;
  width:100%;
  height:1px;
  margin:2rem auto
}

audio,video {
  border-radius:5px;
  width:100%
}

.spacer {
  flex:2 auto
}

div:has(>.overflow) {
  max-height:100%;
  overflow-y:hidden
}

ul.overflow,ol.overflow {
  content:"";
  clear:both;
  width:100%;
  max-height:100%;
  margin-bottom:0;
  overflow-y:auto
}

ul.overflow>li.overflow-end,ol.overflow>li.overflow-end {
  height:.5rem;
  margin:0
}

ul.overflow.gradient-active,ol.overflow.gradient-active {
  -webkit-mask-image:linear-gradient(#000 calc(100% - 50px),#0000 100%);
  mask-image:linear-gradient(#000 calc(100% - 50px),#0000 100%)
}

.transclude ul {
  padding-left:1rem
}

.katex-display {
  display:initial;
  overflow:auto hidden
}

.external-embed.youtube,iframe.pdf {
  aspect-ratio:16/9;
  border-radius:5px;
  width:100%;
  height:100%
}

.navigation-progress {
  background:var(--secondary);
  z-index:9999;
  width:0;
  height:3px;
  transition: width .2s;
  position:fixed;
  top:0;
  left:0
}

:root {
  --light:#e5bebf;
  --lightgray:#caa0aa;
  --gray:#9b8a8a;
  --darkgray:#655a5a;
  --dark:#3a3434;
  --secondary:#346f3d;
  --tertiary:#345870;
  --highlight:#72516826;
  --textHighlight:#72516832;
  --titleFont:"karla", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --headerFont:"karla", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bodyFont:"karla", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --codeFont:"geist mono", ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace
}

:root[saved-theme=dark] {
  --light:#161618;
  --lightgray:#393639;
  --gray:#646464;
  --darkgray:#d4d4d4;
  --dark:#ebebec;
  --secondary:#7b97aa;
  --tertiary:#84a59d;
  --highlight:#8f9fa926;
  --textHighlight:#b3aa0288
}