/* === CSS Custom Properties === */

:root {
  --bg: #f5f5ff;
  --text: #30404f;
  --heading: #112233;
  --link: #000;
  --link-decoration: underline;
  --link-hover-decoration: underline;
  --annotation-bg: #fff;
  --annotation-border: #e5e5ee;
  --blockquote-border: #ccc;
  --blockquote-text: #999;
  --hr-bg: #ddd;
  --code-inline-bg: #f8f8ff;
  --code-inline-border: #dedede;
  --content-border: 1px solid #dedede;
  --content-shadow: inset 0 0 5px #e5e5ee;
  --jump-bg: white;
  --jump-border: #eee;
  --jump-hover: #f5f5ff;
  --jump-link: inherit;
  --ss-color: #454545;
  --line-num: rgba(115, 138, 148, 0.4);
  --line-num-empty: rgba(115, 138, 148, 0.2);
  --line-num-target: rgba(115, 138, 148, 1);
  --diff-add-bg: rgba(16, 185, 129, 0.14);
  --diff-remove-bg: rgba(244, 63, 94, 0.14);
  --diff-add-color: #10b981;
  --diff-remove-color: #f43f5e;
  --toggle-bg: rgba(0, 0, 0, 0.06);
  --toggle-text: #555;
  --toggle-border: rgba(0, 0, 0, 0.12);
  --toggle-hover-bg: rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] {
  --bg: #0d1017;
  --text: #bfbdb6;
  --heading: #ffb454;
  --link: #39bae6;
  --link-decoration: none;
  --link-hover-decoration: underline;
  --annotation-bg: #10141c;
  --annotation-border: #1b1f29;
  --blockquote-border: #5a6378;
  --blockquote-text: #5a6673;
  --hr-bg: #1b1f29;
  --code-inline-bg: #10141c;
  --code-inline-border: #1b1f29;
  --content-border: 1px solid #1b1f29;
  --content-shadow: none;
  --jump-bg: #0f131a;
  --jump-border: #1b1f29;
  --jump-hover: #141821;
  --jump-link: #bfbdb6;
  --ss-color: #5a6378;
  --line-num: #5a6378;
  --line-num-empty: rgba(90, 99, 120, 0.4);
  --line-num-target: #bfbdb6;
  --diff-add-bg: rgba(112, 191, 86, 0.14);
  --diff-remove-bg: rgba(242, 109, 120, 0.14);
  --diff-add-color: #70bf56;
  --diff-remove-color: #f26d78;
  --toggle-bg: rgba(255, 255, 255, 0.06);
  --toggle-text: #bfbdb6;
  --toggle-border: rgba(255, 255, 255, 0.12);
  --toggle-hover-bg: rgba(255, 255, 255, 0.1);
}

/* === Shiki Dual Themes === */

html[data-theme="dark"] .shiki,
html[data-theme="dark"] .shiki span {
  color: var(--shiki-dark, inherit) !important;
  font-style: var(--shiki-dark-font-style, inherit) !important;
  font-weight: var(--shiki-dark-font-weight, inherit) !important;
  text-decoration: var(--shiki-dark-text-decoration, inherit) !important;
}

/* === Shiki Code Blocks === */

pre.shiki {
  overflow: hidden;
}
.annotation > pre {
  padding: 1rem;
  white-space: normal;
}

code {
  counter-reset: step;
  counter-increment: step calc(var(--line-start-number, 1) - 1);
}

code .line {
  width: 100%;
  display: inline-block;
  line-height: 1rem;
}
code .line:target {
  backdrop-filter: hue-rotate(0.5turn) saturate(400%);
}
code .line:target:before {
  color: var(--line-num-target);
}
code .line::before {
  content: counter(step);
  counter-increment: step;
  width: 1rem;
  margin-right: 1.5rem;
  display: inline-block;
  text-align: right;
  color: var(--line-num);
}
code .line.empty-line::before {
  color: var(--line-num-empty);
}

code .line.diff {
  position: relative;
}
code .line.diff.add {
  background-color: var(--diff-add-bg);
}
code .line.diff.remove {
  background-color: var(--diff-remove-bg);
}
code .line.diff::after {
  position: absolute;
  left: 1.5rem;
  top: 0;
  font-weight: bold;
}
code .line.diff.add::after {
  content: '+';
  color: var(--diff-add-color);
}
code .line.diff.remove::after {
  content: '-';
  color: var(--diff-remove-color);
}

.annotation pre.shiki code {
  counter-reset: unset;
  counter-increment: unset;
}
.annotation pre.shiki code .line::before {
  content: unset;
  counter-increment: unset;
  width: unset;
  margin-right: unset;
}

/*--------------------- Layout ----------------------------*/

html {
  height: 100%;
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 14px;
  line-height: 18px;
  color: var(--text);
  background-color: var(--bg);
  margin: 0;
  padding: 0;
  height: 100%;
}
#container {
  min-height: 100%;
  padding-top: 2.5rem;
}

a {
  color: var(--link);
  text-decoration: var(--link-decoration);
}
a:hover {
  text-decoration: var(--link-hover-decoration);
}

p {
  margin: 15px 0 0px;
}
.annotation ul,
.annotation ol {
  margin: 25px 0;
}
.annotation ul li,
.annotation ol li {
  font-size: 14px;
  line-height: 18px;
  margin: 10px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading);
  line-height: 1em;
  margin: 30px 0 15px 0;
}

h1 {
  margin-top: 40px;
}
h2 {
  font-size: 1.26em;
}

hr {
  border: 0;
  background: var(--hr-bg);
  height: 1px;
  margin: 20px 0;
}

pre,
tt,
code {
  font-size: 0.95em;
  line-height: 1.26em;
  font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
  margin: 0;
  padding: 0;
}

blockquote {
  border-left: 5px solid var(--blockquote-border);
  margin: 0;
  padding: 1px 0 1px 1em;
}
.sections blockquote p {
  font-family: Menlo, Consolas, Monaco, monospace;
  font-size: 0.95em;
  line-height: 1.26em;
  color: var(--blockquote-text);
  margin: 10px 0 0;
  white-space: pre-wrap;
}

ul.sections {
  list-style: none;
  padding: 0 0 5px 0;
  margin: 0;
}

ul.sections > li:first-child .annotation > :first-child {
  margin-top: 0;
}

ul.sections > li > div {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  box-sizing: border-box;
}

/*---------------------- Controls -----------------------------*/

#controls {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/*---------------------- Jump Page -----------------------------*/

#jump_to {
  list-style: none;
  margin: 0;
  padding: 0;
}

#jump_to > li {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
}

#jump_to a.large,
#jump_to a.small {
  display: inline-block;
  padding: 0.25em 0.6em;
  border-radius: 4px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--toggle-text);
  font-size: 0.75em;
  line-height: 1.5;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s;
  cursor: pointer;
}

#jump_to a.large {
  display: none;
}

#jump_to a.large:hover,
#jump_to a.small:hover {
  background: var(--toggle-hover-bg);
}

#jump_wrapper {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
}

#jump_to.is-open #jump_wrapper {
  display: block;
}

#jump_page {
  background: var(--jump-bg);
  border: 1px solid var(--jump-border);
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  min-width: 180px;
  max-height: 70vh;
  overflow-y: auto;
}

#jump_page .source {
  display: block;
  padding: 0.4em 0.8em;
  font-size: 0.75em;
  text-decoration: none;
  color: var(--jump-link);
  white-space: nowrap;
}

#jump_page .source:hover {
  background: var(--jump-hover);
}

/*---------------------- Theme Toggle -----------------------------*/

#theme-toggle {
  display: contents;
}

#theme-btn {
  padding: 0.25em 0.6em;
  border-radius: 4px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--toggle-text);
  cursor: pointer;
  font-size: 0.75em;
  line-height: 1.5;
  font-family: inherit;
  transition: background 0.15s;
}

#theme-btn:hover {
  background: var(--toggle-hover-bg);
}

/*---------------------- Low resolutions (> 320px) ---------------------*/
@media only screen and (min-width: 320px) {
  pre.shiki {
    overflow-x: auto;
  }

  .sswrap {
    display: none;
  }

  ul.sections > li > div {
    display: block;
    padding: 5px 10px 0 10px;
  }

  ul.sections > li > div.annotation ul,
  ul.sections > li > div.annotation ol {
    padding-left: 30px;
  }

  ul.sections > li > div.content {
    overflow-x: auto;
    -webkit-box-shadow: var(--content-shadow);
    box-shadow: var(--content-shadow);
    border: var(--content-border);
    margin: 5px 10px 5px 10px;
    padding-bottom: 5px;
  }

  ul.sections > li > div.annotation p tt {
    background: var(--code-inline-bg);
    border: 1px solid var(--code-inline-border);
    font-size: 12px;
    padding: 0 0.2em;
  }
}

/*----------------------  (> 481px) ---------------------*/
@media only screen and (min-width: 481px) {
  pre.shiki {
    overflow-x: auto;
  }

  #container {
    position: relative;
  }
  body {
    font-size: 15px;
    line-height: 21px;
  }
  pre,
  tt,
  code {
    line-height: 1.33em;
  }
  p,
  ul,
  ol {
    margin: 0 0 15px;
  }

  #jump_to a.large {
    display: inline-block;
  }
  #jump_to a.small {
    display: none;
  }

  #background {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 350px;
    background: var(--annotation-bg);
    border-right: 1px solid var(--annotation-border);
    z-index: -1;
  }

  ul.sections > li > div.annotation ul,
  ul.sections > li > div.annotation ol {
    padding-left: 40px;
  }

  ul.sections > li {
    white-space: nowrap;
  }

  ul.sections > li > div {
    display: inline-block;
  }

  ul.sections > li > div.annotation {
    max-width: 350px;
    min-width: 350px;
    min-height: 5px;
    padding: 13px;
    overflow-x: hidden;
    white-space: normal;
    vertical-align: top;
    text-align: left;
  }

  ul.sections > li > div.content {
    padding: 13px;
    vertical-align: top;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    width: calc(100% - 375px);
  }

  .sswrap {
    position: relative;
    display: inline;
  }

  .ss {
    font: 12px Arial;
    text-decoration: none;
    color: var(--ss-color);
    position: absolute;
    top: 3px;
    left: -20px;
    padding: 1px 2px;
    opacity: 0;
    transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
  }
  .for-h1 .ss {
    top: 47px;
  }
  .for-h2 .ss,
  .for-h3 .ss,
  .for-h4 .ss {
    top: 35px;
  }

  ul.sections > li > div.annotation:hover .ss {
    opacity: 1;
  }
}

/*---------------------- (> 1025px) ---------------------*/
@media only screen and (min-width: 1025px) {
  body {
    font-size: 16px;
    line-height: 24px;
  }

  #background {
    width: 525px;
  }
  ul.sections > li > div.annotation {
    max-width: 525px;
    min-width: 525px;
    padding: 10px 25px 1px 50px;
  }
  ul.sections > li > div.content {
    padding: 9px 15px 16px 25px;
    width: calc(100% - 525px - 25px);
  }
}