@charset "UTF-8";
/* Vendor styles */
html {
  font-size: clamp(16px, 1.2vw + 1px, 18px);
  scrollbar-gutter: stable;
}

* {
  box-sizing: border-box;
  text-rendering: geometricPrecision;
}

html,
body {
  overflow-x: hidden;
}

body {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  font-family: "JetBrains Mono", Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  word-wrap: break-word;
  max-width: 100vw;
}

article[itemprop=articleBody] h2,
article[itemprop=articleBody] h3,
article[itemprop=articleBody] h4,
article[itemprop=articleBody] h5,
article[itemprop=articleBody] h6 {
  margin-top: 3rem !important;
  font-size: 1.2rem !important;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

pre {
  padding: 2rem;
  margin: 1.75rem 0;
  background-color: #fff;
  border: 1px solid #ccc;
  overflow: auto;
}

a {
  cursor: pointer;
  color: #ff2e88;
  text-decoration: none;
  border-bottom: 1.5px solid #ff2e88;
}

/* Selections colors */
::selection {
  color: white;
  background: #ce0068;
}

::-moz-selection {
  color: white;
  background: #ce0068;
}

/* Zola-generated header anchors
* See: https://www.getzola.org/documentation/content/linking/ */
a.zola-anchor {
  border-bottom: 0;
}

a.zola-anchor:hover {
  border-bottom: 1.5px solid #ff2e88;
  background-color: transparent !important;
  color: inherit !important;
}

.light a {
  color: #000;
  font-weight: bold;
}

.light a:hover {
  background-color: #ce0068;
  color: #fff;
}

.dark a:hover {
  background-color: #b7005d;
  color: #fff;
}

.grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.grid.\-top {
  -ms-flex-align: start;
  -ms-grid-row-align: flex-start;
  align-items: flex-start;
}

.grid.\-middle {
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.grid.\-bottom {
  -ms-flex-align: end;
  -ms-grid-row-align: flex-end;
  align-items: flex-end;
}

.grid.\-stretch {
  -ms-flex-align: stretch;
  -ms-grid-row-align: stretch;
  align-items: stretch;
}

.grid.\-baseline {
  -ms-flex-align: baseline;
  -ms-grid-row-align: baseline;
  align-items: baseline;
}

.grid.\-left {
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.grid.\-center {
  -ms-flex-pack: center;
  justify-content: center;
}

.grid.\-right {
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.grid.\-between {
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.grid.\-around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.cell {
  -ms-flex: 1;
  flex: 1;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .cell.\-1of12 {
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
  }
  .cell.\-2of12 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
  }
  .cell.\-3of12 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
  }
  .cell.\-4of12 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
  }
  .cell.\-5of12 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
  }
  .cell.\-6of12 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
  .cell.\-7of12 {
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
  }
  .cell.\-8of12 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
  }
  .cell.\-9of12 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
  }
  .cell.\-10of12 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
  }
  .cell.\-11of12 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
  }
}
@media screen and (max-width: 768px) {
  .grid {
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .cell {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
}
.hack,
.hack blockquote,
.hack code,
.hack em,
.hack h1,
.hack h2,
.hack h3,
.hack h4,
.hack h5,
.hack h6,
.hack strong {
  font-size: 1rem;
  font-style: normal;
}

.hack em {
  font-style: italic;
}

.hack strong em,
.hack em strong {
  font-style: italic;
  font-weight: bold;
}

.hack blockquote,
.hack code,
.hack em,
.hack strong {
  line-height: 20px;
}

.hack blockquote,
.hack code,
.hack footer,
.hack h1,
.hack h2,
.hack h3,
.hack h4,
.hack h5,
.hack h6,
.hack header,
.hack li,
.hack ol,
.hack p,
.hack section,
.hack ul {
  float: none;
  margin: 0;
  padding: 0;
}

.hack header + article {
  margin-top: 20px;
}

.hack blockquote,
.hack h1,
.hack ol,
.hack p,
.hack ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

.hack h1 {
  position: relative;
  display: inline-block;
  display: table-cell;
  padding: 20px 0 30px;
  margin: 0;
  overflow: hidden;
}

.hack h1:after {
  content: "====================================================================================================";
  position: absolute;
  bottom: 10px;
  left: 0;
}

.hack h1 + * {
  margin-top: 0;
}

.hack h2,
.hack h3,
.hack h4,
.hack h5,
.hack h6 {
  position: relative;
  margin-bottom: 1.75rem;
  margin-top: 1.75rem;
}

.hack h2:before,
.hack h3:before,
.hack h4:before,
.hack h5:before,
.hack h6:before {
  display: inline;
  color: #d64a48;
}

.hack h2:before {
  content: "## ";
}

.hack h3:before {
  content: "### ";
}

.hack h4:before {
  content: "#### ";
}

.hack h5:before {
  content: "##### ";
}

.hack h6:before {
  content: "###### ";
}

.hack li {
  position: relative;
  display: block;
  padding-left: 20px;
}

.hack li:after {
  position: absolute;
  top: 0;
  left: 0;
}

.hack ul > li:after {
  content: "-";
}

/* NOTE: For cross-browser uniformity in rendering nested lists, we define
 separate counters for each level of nested list. Different browsers allow
 varying tolerance in counter scoping, so we set explicit separate counters
 up to 3 levels of nesting, which should cover nearly all practical use cases.
*/
/* First-level ordered list */
.hack ol {
  counter-reset: list1;
  list-style: none;
  padding-left: 1.5em;
}

.hack ol > li {
  counter-increment: list1;
  position: relative;
}

.hack ol > li::before {
  content: counter(list1) ". ";
  position: absolute;
  left: 0;
  width: 1.5em;
}

/* Second-level ordered list */
.hack ol > li > ol {
  counter-reset: list2;
  list-style: none;
  padding-left: 1.5em;
}

.hack ol > li > ol > li {
  counter-increment: list2;
  position: relative;
}

.hack ol > li > ol > li::before {
  content: counter(list2) ". ";
  position: absolute;
  left: 0;
  width: 1.5em;
}

/* Third-level ordered list, if needed */
.hack ol > li > ol > li > ol {
  counter-reset: list3;
  list-style: none;
  padding-left: 1.5em;
}

.hack ol > li > ol > li > ol > li {
  counter-increment: list3;
  position: relative;
}

.hack ol > li > ol > li > ol > li::before {
  content: counter(list3) ". ";
  position: absolute;
  left: 0;
  width: 1.5em;
}

.hack blockquote {
  border-left: 0.2em solid #ff2e88;
  border-top-right-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  position: relative;
  padding-left: 17px;
  padding-left: 2ch;
  padding-right: 2ch;
  overflow: hidden;
  color: #E8E6ED;
  box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.1);
}
.hack blockquote strong {
  background: #ff2e88;
  color: #FFFFFF;
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
}
.hack blockquote em {
  font-style: italic;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #d64a48;
}
.hack blockquote em:before, .hack blockquote em:after {
  content: none;
}
.hack blockquote a {
  color: inherit;
  font-weight: normal;
}
.hack blockquote a:hover {
  color: #FFFFFF;
}
.hack blockquote code {
  background: #3d4253;
}

.light .hack code {
  background: #d0cfd5;
  border-radius: 4px;
  padding: 2px 6px;
}

.dark .hack code {
  border-radius: 4px;
  padding: 2px 6px;
}

.dark blockquote {
  background-color: #5E667F;
}
.dark blockquote blockquote {
  background-color: #555c72;
}

.light blockquote {
  background-color: #E8E6ED;
  color: #4d5367;
}
.light blockquote a {
  color: #5E667F;
}
.light blockquote code {
  background: #E8E6ED;
}
.light blockquote blockquote {
  background-color: #dcd9df;
}

.hack blockquote:after {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 20px;
}

.hack em:after,
.hack em:before {
  content: none;
  display: inline;
}

.hack pre code:after,
.hack pre code:before {
  content: none;
}

.hack code:before, .hack code:after {
  content: none;
}

.hack hr {
  position: relative;
  height: 20px;
  overflow: hidden;
  border: 0;
  margin: 20px 0;
}

.hack hr:after {
  content: "----------------------------------------------------------------------------------------------------";
  position: absolute;
  top: 0;
  left: 0;
  line-height: 20px;
  width: 100%;
  word-wrap: break-word;
}

@-moz-document url-prefix() {
  .hack h1 {
    display: block;
  }
}
.hack-ones ol > li:after {
  content: "1.";
}

p {
  margin: 0 0 1.75rem;
}

.container {
  max-width: 70rem;
}

.container,
.container-fluid {
  margin: 0 auto;
  padding: 0 1rem;
}

.inner {
  padding: 1rem;
}

.inner2x {
  padding: 2rem;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.progress-bar {
  height: 8px;
  opacity: 0.8;
  background-color: #ccc;
  margin-top: 12px;
}

.progress-bar.progress-bar-show-percent {
  margin-top: 38px;
}

.progress-bar-filled {
  background-color: gray;
  height: 100%;
  transition: width 0.3s ease;
  position: relative;
  width: 0;
}

.progress-bar-filled:before {
  content: "";
  border: 6px solid transparent;
  border-top-color: gray;
  position: absolute;
  top: -12px;
  right: -6px;
}

.progress-bar-filled:after {
  color: gray;
  content: attr(data-filled);
  display: block;
  font-size: 12px;
  white-space: nowrap;
  position: absolute;
  border: 6px solid transparent;
  top: -38px;
  right: 0;
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  color: #778087;
}

table td,
table th {
  vertical-align: top;
  border: 1px solid #ccc;
  line-height: 15px;
  padding: 10px;
}

table thead {
  font-style: bold;
}

.light table thead {
  background-color: #E8E6ED;
}

.dark table thead {
  background-color: #232224;
}

code table {
  margin: 1rem 0 0;
  border: none;
}
code table td,
code table tr {
  border: none;
}

table tbody td:first-child {
  font-weight: 700;
  color: #333;
}

del {
  text-decoration-color: #d64a48;
  text-decoration-thickness: 3px;
}

details {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}
details summary::marker {
  color: #d64a48;
}

.dark details {
  background-color: #1a1a1a;
}

.light details {
  background-color: #efefef;
}

.form {
  width: 30rem;
}

.form-group {
  margin-bottom: 1.75rem;
  overflow: auto;
}

.form-group label {
  border-bottom: 2px solid #ccc;
  color: #333;
  width: 10rem;
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0;
  position: relative;
}

.form-group.form-success label {
  color: #4caf50 !important;
  border-color: #4caf50 !important;
}

.form-group.form-warning label {
  color: #ff9800 !important;
  border-color: #ff9800 !important;
}

.form-group.form-error label {
  color: #f44336 !important;
  border-color: #f44336 !important;
}

.form-control {
  outline: none;
  border: none;
  border-bottom: 2px solid #ccc;
  padding: 0.5rem 0;
  width: 20rem;
  height: 38px;
  background-color: transparent;
}

.form-control:focus {
  border-color: #555;
}

.form-group.form-textarea label:after {
  position: absolute;
  content: "";
  width: 2px;
  background-color: #fff;
  right: -2px;
  top: 0;
  bottom: 0;
}

textarea.form-control {
  height: auto;
  resize: none;
  padding: 1rem 0;
  border-bottom: 2px solid #ccc;
  border-left: 2px solid #ccc;
  padding: 0.5rem;
}

select.form-control {
  border-radius: 0;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

.help-block {
  color: #999;
  margin-top: 0.5rem;
}

.form-actions {
  margin-bottom: 1.75rem;
}

.btn {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  padding: 0.65rem 2rem;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  z-index: 1;
}

.btn:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn.btn-ghost {
  border-color: #757575;
  color: #757575;
  background-color: transparent;
}

.btn.btn-ghost:focus,
.btn.btn-ghost:hover {
  border-color: #424242;
  color: #424242;
  z-index: 2;
}

.btn.btn-ghost:hover {
  background-color: transparent;
}

.btn-block {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
}

.btn-default {
  color: #fff;
  background-color: #e0e0e0;
  border: 1px solid #e0e0e0;
  color: #333;
}

.btn-default:focus:not(.btn-ghost),
.btn-default:hover {
  background-color: #dcdcdc;
  border-color: #dcdcdc;
}

.btn-success {
  color: #fff;
  background-color: #4caf50;
  border: 1px solid #4caf50;
}

.btn-success:focus:not(.btn-ghost),
.btn-success:hover {
  background-color: #43a047;
  border-color: #43a047;
}

.btn-success.btn-ghost {
  border-color: #4caf50;
  color: #4caf50;
}

.btn-success.btn-ghost:focus,
.btn-success.btn-ghost:hover {
  border-color: #388e3c;
  color: #388e3c;
  z-index: 2;
}

.btn-error {
  color: #fff;
  background-color: #f44336;
  border: 1px solid #f44336;
}

.btn-error:focus:not(.btn-ghost),
.btn-error:hover {
  background-color: #e53935;
  border-color: #e53935;
}

.btn-error.btn-ghost {
  border-color: #f44336;
  color: #f44336;
}

.btn-error.btn-ghost:focus,
.btn-error.btn-ghost:hover {
  border-color: #d32f2f;
  color: #d32f2f;
  z-index: 2;
}

.btn-warning {
  color: #fff;
  background-color: #ff9800;
  border: 1px solid #ff9800;
}

.btn-warning:focus:not(.btn-ghost),
.btn-warning:hover {
  background-color: #fb8c00;
  border-color: #fb8c00;
}

.btn-warning.btn-ghost {
  border-color: #ff9800;
  color: #ff9800;
}

.btn-warning.btn-ghost:focus,
.btn-warning.btn-ghost:hover {
  border-color: #f57c00;
  color: #f57c00;
  z-index: 2;
}

.btn-info {
  color: #fff;
  background-color: #00bcd4;
  border: 1px solid #00bcd4;
}

.btn-info:focus:not(.btn-ghost),
.btn-info:hover {
  background-color: #00acc1;
  border-color: #00acc1;
}

.btn-info.btn-ghost {
  border-color: #00bcd4;
  color: #00bcd4;
}

.btn-info.btn-ghost:focus,
.btn-info.btn-ghost:hover {
  border-color: #0097a7;
  color: #0097a7;
  z-index: 2;
}

.btn-primary {
  color: #fff;
  background-color: #2196f3;
  border: 1px solid #2196f3;
}

.btn-primary:focus:not(.btn-ghost),
.btn-primary:hover {
  background-color: #1e88e5;
  border-color: #1e88e5;
}

.btn-primary.btn-ghost {
  border-color: #2196f3;
  color: #2196f3;
}

.btn-primary.btn-ghost:focus,
.btn-primary.btn-ghost:hover {
  border-color: #1976d2;
  color: #1976d2;
  z-index: 2;
}

.btn-group {
  overflow: auto;
}

.btn-group .btn {
  float: left;
}

.btn-group .btn-ghost:not(:first-child) {
  margin-left: -1px;
}

.card {
  border: 1px solid #ccc;
}

.card .card-header {
  color: #333;
  text-align: center;
  background-color: #ddd;
  padding: 0.5rem 0;
}

.alert {
  color: #ccc;
  padding: 1rem;
  border: 1px solid #ccc;
  margin-bottom: 1.75rem;
}

.alert-success {
  color: #4caf50;
  border-color: #4caf50;
}

.alert-error {
  color: #f44336;
  border-color: #f44336;
}

.alert-info {
  color: #00bcd4;
  border-color: #00bcd4;
}

.alert-warning {
  color: #ff9800;
  border-color: #ff9800;
}

.media:not(:last-child) {
  margin-bottom: 1.25rem;
}

.media-left {
  padding-right: 1rem;
}

.media-left,
.media-right {
  display: table-cell;
  vertical-align: top;
}

.media-right {
  padding-left: 1rem;
}

.media-body {
  display: table-cell;
  vertical-align: top;
}

.media-heading {
  font-size: 1.16667rem;
  font-weight: 700;
}

.media-content {
  margin-top: 0.3rem;
}

.avatarholder,
.placeholder {
  background-color: #f0f0f0;
  text-align: center;
  color: #b9b9b9;
  font-size: 1rem;
  border: 1px solid #f0f0f0;
}

.avatarholder {
  width: 48px;
  height: 48px;
  line-height: 46px;
  font-size: 2rem;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}

.avatarholder.rounded {
  border-radius: 33px;
}

.loading {
  display: inline-block;
  content: " ";
  height: 20px;
  width: 20px;
  margin: 0 0.5rem;
  animation: a 0.6s infinite linear;
  border: 2px solid #e91e63;
  border-right-color: transparent;
  border-radius: 50%;
}

.btn .loading {
  margin-bottom: 0;
  width: 14px;
  height: 14px;
}

.btn div.loading {
  float: left;
}

.alert .loading {
  margin-bottom: -5px;
}

@keyframes a {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
.menu {
  width: 100%;
}

.menu .menu-item {
  display: block;
  color: #616161;
  border-color: #616161;
}

.menu .menu-item.active,
.menu .menu-item:hover {
  color: #000;
  border-color: #000;
  background-color: transparent;
}

@media screen and (max-width: 768px) {
  .form-group label {
    display: block;
    border-bottom: none;
    width: 100%;
  }
  .form-group.form-textarea label:after {
    display: none;
  }
  .form-control {
    width: 100%;
  }
  textarea.form-control {
    border-left: none;
    padding: 0.5rem 0;
  }
  pre::-webkit-scrollbar {
    height: 3px;
  }
}
@media screen and (max-width: 480px) {
  .form {
    width: 100%;
  }
}
/* Light and dark color schemes */
.dark {
  color: #ccc;
}

.light {
  color: #333;
}

.dark,
.dark pre {
  background-color: #000;
}

.light,
.light pre {
  background-color: #f6f7f4;
}

.light .dark pre {
  padding: 10px;
  border: none;
}

.light .dark pre code {
  color: #00bcd4;
}

.dark h1 a,
.dark h2 a,
.dark h3 a,
.dark h4 a,
.dark h5 a {
  color: #ccc;
}

.dark code,
.dark strong {
  color: #fff;
}

.dark table {
  color: #fff;
}

.light table {
  color: #000;
}

.dark table td,
.dark table th {
  border-color: #fff;
}

.light table td,
.light table th {
  color: #000;
  border-color: #000;
}

.dark table tbody td:first-child {
  color: #fff;
}

.dark .form-group label {
  color: #ccc;
  border-color: rgba(95, 95, 95, 0.78);
}

.dark .form-group.form-textarea label:after {
  background-color: #000;
}

.dark .form-control {
  color: #ccc;
  border-color: rgba(95, 95, 95, 0.78);
}

.dark .form-control:focus {
  border-color: #ccc;
  color: #ccc;
}

.dark textarea.form-control {
  color: #ccc;
}

.dark .card {
  border-color: rgba(95, 95, 95, 0.78);
}

.dark .card .card-header {
  background-color: transparent;
  color: #ccc;
  border-bottom: 1px solid rgba(95, 95, 95, 0.78);
}

.dark .btn.btn-ghost.btn-default {
  border-color: #ababab;
  color: #ababab;
}

.dark .btn.btn-ghost.btn-default:focus,
.dark .btn.btn-ghost.btn-default:hover {
  border-color: #9c9c9c;
  color: #9c9c9c;
  z-index: 1;
}

.dark .btn.btn-ghost.btn-default:focus,
.dark .btn.btn-ghost.btn-default:hover {
  border-color: #e0e0e0;
  color: #e0e0e0;
}

.dark .btn.btn-ghost.btn-primary:focus,
.dark .btn.btn-ghost.btn-primary:hover {
  border-color: #64b5f6;
  color: #64b5f6;
}

.dark .btn.btn-ghost.btn-success:focus,
.dark .btn.btn-ghost.btn-success:hover {
  border-color: #81c784;
  color: #81c784;
}

.dark .btn.btn-ghost.btn-info:focus,
.dark .btn.btn-ghost.btn-info:hover {
  border-color: #4dd0e1;
  color: #4dd0e1;
}

.dark .btn.btn-ghost.btn-error:focus,
.dark .btn.btn-ghost.btn-error:hover {
  border-color: #e57373;
  color: #e57373;
}

.dark .btn.btn-ghost.btn-warning:focus,
.dark .btn.btn-ghost.btn-warning:hover {
  border-color: #ffb74d;
  color: #ffb74d;
}

.dark .avatarholder,
.dark .placeholder {
  background-color: transparent;
  border-color: #333;
}

.dark .menu .menu-item {
  color: #ccc;
  border-color: rgba(95, 95, 95, 0.78);
}

.dark .menu .menu-item.active,
.dark .menu .menu-item:hover {
  color: #fff;
  border-color: #ccc;
}

/*
This file defines the custom stylesheet for the site theme independent of
third-party plugins and libraries.
*/
:root {
  /* breakpoint reference only */
  --screen-size-small: 30em;
  /* Disable ligatures */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

@keyframes intro {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.dark .muted {
  color: rgba(255, 255, 255, 0.5);
}

.light .muted {
  color: rgba(0, 0, 0, 0.7);
}

.responsive-iframe {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 ratio */
  padding-top: 25px;
  height: 0;
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  border: 0;
}

main,
footer {
  animation: intro 0.3s both;
  animation-delay: 0.15s;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 1ch;
}

footer time[datetime$=M]:before {
  content: "– ";
}

@media only screen and (max-width: 30em) {
  footer time[datetime$=M] {
    display: none;
  }
  .nav-header {
    flex-direction: column;
  }
}
blockquote cite {
  display: block;
}

blockquote cite::before {
  content: "—";
}

/* hack.css overrides and enhancements */
.hack li ul {
  margin: 0;
}

.main {
  padding: 20px 10px;
}

.light nav a.active {
  background-color: #ce0068;
  color: #fff;
}

.dark nav a.active {
  background-color: #b7005d;
  color: #fff;
}

.dark a[itemprop=url] {
  color: #ff9800;
}

.light a[itemprop=url] {
  color: #8D2220;
  font-weight: bold;
}

a[itemprop=url]:hover {
  color: #fff;
}

a[href*="://"]::after,
a[rel*=external] {
  content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
}

/* Remove external link arrow */
.feed-icon::after {
  content: none !important;
}

/* Style for all icons in the container */
#sun-icon,
#moon-icon,
.social-icon {
  padding: 0.1em;
  height: 1.5em;
  width: auto;
  display: block;
  margin-bottom: 0.25em;
}

.invert-icon {
  filter: invert(1);
}

/* Dark mode toggle specific styles to ensure alignment */
#dark-mode-toggle {
  display: flex;
  align-items: center;
}

/* Dark mode styles */
body.dark .social-icon {
  filter: invert(1);
}

/* Remove external link icon from figures (excluding table wrappers) */
figure:not(.table-wrapper) a[href*="://"]::after,
figure:not(.table-wrapper) a[rel*=external] {
  content: "";
}

html {
  font-size: 13px;
}

.hack pre {
  font-size: 17px;
}

.light pre {
  color: #cccccc !important;
}

.icon {
  margin-bottom: -3px;
}

article[itemtype="http://schema.org/CreativeWork"] {
  margin-bottom: 3rem;
}
article[itemtype="http://schema.org/CreativeWork"] header h2 {
  margin-bottom: 1.2rem !important;
}
article[itemtype="http://schema.org/CreativeWork"] nav.readmore {
  margin-top: 0.25rem;
}

article [itemprop=description],
article [itemprop=summary] {
  margin-bottom: 20px;
  margin-top: 10px;
}

article [itemprop=summary] p {
  margin: 0;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 1em;
  }
  .container {
    max-width: 50rem;
  }
}
/* User actions container styling */
.user-actions-container {
  position: relative;
  flex-grow: 1;
  max-width: 100%;
  margin-left: 15px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

@media only screen and (max-width: 30em) {
  .user-actions-container {
    margin: 10px;
    gap: 10px;
  }
}
/* Footnotes */
.footnote-reference {
  margin-left: 4px;
}

.footnote-definition {
  display: block;
  max-width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
  overflow-x: auto;
  margin: 20px 0;
  padding-block-end: 5px;
}
.footnote-definition sup {
  display: inline-block;
  margin-right: 0.5em;
  color: #ff2e88;
  font-size: inherit;
  font-weight: bold;
  vertical-align: baseline;
}
.footnote-definition sup::before {
  content: "[";
}
.footnote-definition sup::after {
  content: "]";
}
.footnote-definition p:first-of-type {
  display: inline;
}
.footnote-definition p:not(:first-of-type) {
  margin-top: 0.5em;
}

.footnote-return {
  margin-left: 0.5em;
  font-size: 1.2em;
}

/* Post history styling */
.revision-history {
  text-align: center;
  font-style: italic;
}
.revision-history a {
  border-bottom: none;
}
.revision-history a::after {
  content: none;
}

.note-container {
  overflow: hidden;
  margin: 1em auto;
  padding: 0;
  font-size: 1.1em;
  min-width: 100%;
  font-family: "JetBrains Mono", Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}

.note-details {
  width: 100%;
  border-left: 0.4em solid var(--accent);
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 0;
}

.light .note-header {
  background-color: color-mix(in srgb, var(--note-bg-light) 75%, black 25%);
}

.note-header {
  background-color: color-mix(in srgb, var(--note-bg-dark) 90%, white 20%);
  cursor: pointer;
  position: relative;
  font-size: 1.2em;
  transition: background-color 0.3s ease;
  padding: 0;
  margin: 0;
  color: inherit;
  list-style: none;
  display: flex;
  align-items: center;
}
.note-header p {
  margin: 10px;
  font-weight: bold;
}
.note-header::-webkit-details-marker {
  display: none;
}
.note-header::after {
  content: "▼";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #c62c2a;
  transition: transform 0.3s ease;
}
details[open] > .note-header::after {
  transform: translateY(-50%) rotate(180deg);
}

.note-center {
  text-align: center;
  padding: 0;
  width: 100%;
}

.note-content {
  padding: 10px 25px !important;
  background-color: inherit;
  font-size: 1em;
  background-color: color-mix(in srgb, var(--note-bg-dark) 90%, white 10%);
  color: inherit;
  line-height: 1.6em;
}
.note-content a {
  color: #ff2e88;
  font-weight: normal;
}
.note-content a:hover {
  color: #fff;
}
.note-content .dark strong {
  color: #fff;
}

.light .note-content {
  background-color: color-mix(in srgb, var(--note-bg-light) 90%, black 5%);
}

.giallo-l {
  display: inline-block;
  min-height: 1lh;
  width: 100%;
}

.giallo-ln {
  display: inline-block;
  user-select: none;
  margin-right: 0.4em;
}

pre .z-punctuation {
  color: inherit;
}

.code-label.label-js {
  background: #e9c92c;
  color: #000000;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-shell {
  background: #4eaa25;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-json {
  background: dodgerblue;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-python {
  background: #3572A5;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-css {
  background: #264de4;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-go {
  background: #00ADD8;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-markdown {
  background: #0000ff;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-rust {
  background: #ff4647;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-java {
  background: #f89820;
  color: #000000;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-csharp {
  background: #178600;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-ruby {
  background: #701516;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-swift {
  background: #f05138;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-php {
  background: #777bb4;
  color: #000000;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-typescript {
  background: #3178c6;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-scala {
  background: #c22d40;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-kotlin {
  background: #F18E33;
  color: #000000;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-lua {
  background: #000080;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-perl {
  background: #0298c3;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-haskell {
  background: #5e5086;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-r {
  background: #198ce7;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-dart {
  background: #00d2b8;
  color: #000000;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-elixir {
  background: #6e4a7e;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-clojure {
  background: #5881d8;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-sql {
  background: #ffcc00;
  color: #000000;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-bash {
  background: #4f8f00;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-shellscript {
  background: #4f8f00;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-text {
  background: #151b23;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-gd {
  background: #3c76a2;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-cpp {
  background: #5d8dbf;
  color: #000000;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-toml {
  background: #9c4221;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}
.code-label.label-default {
  background: #151b23;
  color: #ffffff;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  text-transform: uppercase;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
}

.clipboard-button {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  background-color: transparent;
  border: "#3D444D";
  border-radius: 3px;
}
.clipboard-button svg {
  fill: #9198A1;
  width: 16px;
  height: 16px;
}

.light .clipboard-button {
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.5);
  background-color: #f3f3f3;
}

pre {
  background-color: var(--bg-primary) !important;
  border-radius: 5px;
  border: none;
  line-height: 1.4;
  padding-top: 1.8em;
  padding-bottom: 1em;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre code {
  background-color: transparent !important;
  color: inherit;
  border: none;
  padding: 0 !important;
}
pre code table td {
  padding: 0.4em;
}

.light code table td {
  color: #ffffff !important;
}

pre code table mark {
  color: unset;
  padding: 0;
  background-color: #204e8a !important;
  filter: brightness(1.1);
}

pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-thumb {
  background-color: #3D444D;
  border-radius: 4px;
}

pre::-webkit-scrollbar-track {
  background-color: #1E222A;
}

a code:hover {
  background-color: transparent;
  background: transparent !important;
}

code {
  background-color: var(--bg-primary);
}

code,
pre,
kbd,
samp {
  font-size: 1.05em;
  /* slightly larger than the surrounding text */
  line-height: 1.6;
}

/* Container for search elements */
.search-container {
  position: relative;
  flex-grow: 1;
  max-width: 400px;
}

@media (max-width: 480px) {
  .search-container {
    max-width: 100%;
  }
}
/* Style the magnifying glass SVG */
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  /* default gray */
  stroke: var(--text-color, #757575);
  /* Adjust icon color */
  pointer-events: none;
}

/* Style the slash-square icon */
.slash-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: 0.6;
  pointer-events: none;
  stroke: var(--text-color, #757575);
}

.slash-icon.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Input field styling */
#search {
  width: 100%;
  padding: 10px 10px 10px 40px;
  /* Left padding for the icon */
  font-size: 14px;
  border: 1.5px solid transparent;
  /* Remove border when not focused */
  border-radius: 4px;
  background-color: var(--search-bg-color, #fff);
  color: var(--text-color, #000);
  outline: none;
  height: 35px;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}

.light #search {
  border: 1.5px solid rgba(0, 0, 0, 0.1);
}

/* Highlight border when the input is focused */
#search:focus {
  border: 1.5px solid var(--search-border-color, #ddd);
}

/* Prevent body scroll when modal is open */
body.modal-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  /* Hide scrollbar in Firefox */
  scrollbar-width: none !important;
  /* Hide scrollbar in Chrome/Safari */
}
body.modal-open::-webkit-scrollbar {
  display: none !important;
}

/* Backdrop overlay for search modal */
.search-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.search-backdrop.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
/* Search results modal */
.search-results {
  display: none;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
  max-width: 650px;
  height: 80vh;
  max-height: 500px;
  border-radius: 12px;
  background-color: #2a2a2a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow: hidden;
  flex-direction: column;
}

.search-results.active {
  display: flex;
  animation: slideUp 0.3s ease both;
}

@media (max-width: 768px) {
  .search-results {
    width: calc(100% - 1rem);
    height: 60vh;
    max-height: none;
    border-radius: 8px;
  }
}
@media (min-width: 769px) and (max-height: 600px) {
  .search-results {
    height: 90vh;
    max-height: none;
  }
}
.light .search-results {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

/* Modal header with search input */
.search-modal-header {
  position: relative;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.light .search-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.search-modal-icon {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  stroke: var(--text-color, #888);
  pointer-events: none;
}

#search-modal {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  font-size: 1rem;
  border: none;
  background-color: transparent;
  color: var(--text-color, #fff);
  outline: none;
  font-family: inherit;
}

/* Prevent browser autofill/autocomplete from adding white background */
#search-modal:-webkit-autofill,
#search-modal:-webkit-autofill:hover,
#search-modal:-webkit-autofill:focus,
#search-modal:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #2a2a2a inset !important;
  -webkit-text-fill-color: var(--text-color, #fff) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.light #search-modal {
  color: #000;
}

.light #search-modal:-webkit-autofill,
.light #search-modal:-webkit-autofill:hover,
.light #search-modal:-webkit-autofill:focus,
.light #search-modal:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000 !important;
}

#search-modal::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.light #search-modal::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Results count display */
.search-results-count {
  padding: 0.75rem 1.5rem 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: none;
}
.search-results-count.visible {
  display: block;
}
.search-results-count strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.light .search-results-count {
  color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.light .search-results-count strong {
  color: rgba(0, 0, 0, 0.8);
}

/* Results container */
.search-results__items {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
  min-height: 0;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  /* Webkit scrollbar styling */
}
.search-results__items::-webkit-scrollbar {
  width: 6px;
}
.search-results__items::-webkit-scrollbar-track {
  background: transparent;
}
.search-results__items::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
.search-results__items::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.light .search-results__items {
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}
.light .search-results__items::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
}
.light .search-results__items::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

.search-results__item {
  padding: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  scroll-margin: 1rem;
}

.search-results__item:hover,
.search-results__item.selected {
  background-color: rgba(255, 255, 255, 0.05);
}

.light .search-results__item:hover,
.light .search-results__item.selected {
  background-color: rgba(0, 0, 0, 0.03);
}

.search-results__item:last-child {
  margin-bottom: 0;
}

.search-results__item a {
  font-size: 1rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--text-color, #fff);
}

.light .search-results__item a {
  color: #000;
}

.search-results__item section {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.light .search-results__item section {
  color: rgba(0, 0, 0, 0.6);
}

.search-results__item section b {
  color: var(--accent);
  font-weight: 600;
}

.search-results__no-results {
  padding: 2rem !important;
  font-style: italic;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.light .search-results__no-results {
  color: rgba(0, 0, 0, 0.5);
}

/* Modal footer with keyboard hints */
.search-modal-footer {
  padding: 0.875rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.light .search-modal-footer {
  border-top-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

.search-modal-footer span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem;
}

.search-modal-footer kbd {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: inherit;
  font-size: 0.7rem;
  line-height: 1;
  display: inline-block;
  min-width: 1.5rem;
  text-align: center;
}

.light .search-modal-footer kbd {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

.toc-container {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.toc-container a[href*="://"]::after,
.toc-container a[rel*=external] {
  content: " → ";
  color: #ff9800;
  font-size: 1rem;
}

.light .toc-container {
  background-color: #efefef;
}

.dark .toc-container {
  background-color: #1a1a1a;
}

.toc-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #444;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.dark .toc-title {
  color: #ccc;
}

.toc-list {
  margin-left: 1.5rem;
  padding: 0;
  color: #ccc;
  font-weight: bold;
}

.light .toc-list {
  color: #444;
}

.toc-list ul {
  margin-left: 1.5rem;
  color: #ccc;
  font-weight: bold;
}

.light .toc-list ul {
  color: #444;
}

.toc-list ul ul {
  margin-left: 1.5rem;
  color: #ccc;
  font-weight: bold;
}

.light .toc-list ul ul {
  color: #444;
}

.toc-list li {
  margin: 0.5rem 0;
}

/* NOTE: MathJax doesn't support line wrapping yet as of v3 and 2025-02-14.
 This isn't necessarily the best formatting option IMO as it forces the user
 to scroll to see the full content but it is better than before without
 horizontal scrolling.
 */
mjx-container {
  padding-top: 10px;
  padding-bottom: 10px;
  overflow-x: auto;
  overflow-y: hidden;
}

:root {
  --bg-primary: #282828;
  --accent: #c62c2a;
  --search-border-color: #ff2e88;
  --note-bg-dark: #1a1a1a;
  --note-bg-light: #efefef;
}

/*# sourceMappingURL=site.css.map */


/* OpenClaw desktop nav stabilization */
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
}

.navbar,
.nav-links,
.user-actions-container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.user-actions-container {
  flex-grow: 0;
  max-width: none;
}