@charset "UTF-8";
:root {
  color-scheme: light dark;
}

.grid {
  background: url("/image/grid.png");
  z-index: 100;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

body {
  margin: 0 32px;
  background-color: light-dark(rgb(232.05, 230.35, 226.95), rgb(20.4, 25.5, 30.6));
  color: light-dark(rgb(40.8, 25.5, 10.2), rgb(193.8, 204, 214.2));
  font: 19px/32px "Petrona", Georgia, serif;
}

main {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
}

header, footer {
  color: light-dark(rgb(79.05, 66.47, 53.55), rgb(124.44, 132.6, 140.76));
  background-color: light-dark(rgb(216.75, 213.962, 209.61), rgb(37.74, 43.35, 48.96));
  font: 15px/24px "IBM Plex Mono", Courier, monospace;
}

header {
  position: relative;
  margin: 0;
  padding: 30px 8px 6px 8px;
  border-top: 4px solid light-dark(rgb(184.2375, 179.1375, 172.7625), rgb(32.538, 37.995, 43.452));
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
header .about {
  position: absolute;
  right: 8px;
}

footer {
  position: relative;
  margin: 32px 0 0 0;
  padding: 16px;
  border-bottom: 4px solid light-dark(rgb(184.2375, 179.1375, 172.7625), rgb(32.538, 37.995, 43.452));
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
footer code {
  background-color: light-dark(rgb(203.3625, 199.6225, 194.4375), rgb(46.41, 52.275, 58.14));
}
footer figure {
  position: absolute;
  margin: 0;
  width: 224px;
  top: 16px;
  right: 16px;
  background-color: light-dark(rgb(235.875, 234.481, 232.305), rgb(18.87, 21.675, 24.48));
}
footer a {
  text-decoration: underline light-dark(rgb(155.55, 148.41, 140.25), rgb(89.76, 96.9, 104.04));
}
footer p {
  margin: 0 320px 24px 0;
}
footer p:last-child {
  margin-bottom: 0;
}

nav, .post-thread {
  display: flex;
  justify-content: space-between;
  height: 19px;
  margin: 0 0 42px 0;
  padding: 6px 0;
  color: light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
  border-bottom: solid 1px light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
  font: 14px/16px "IBM Plex Mono", Courier, monospace;
}

nav .thread-narrow {
  display: none;
}

.post-thread {
  position: absolute;
  width: 256px;
  top: 288px;
  right: 0;
}

article {
  position: relative;
  width: 704px;
}
article p code {
  font-size: 87%;
  line-height: 24px;
}

a {
  color: light-dark(rgb(79.05, 66.47, 53.55), rgb(141.78, 150.45, 159.12));
  text-decoration: none;
}
a code {
  color: light-dark(rgb(79.05, 66.47, 53.55), rgb(141.78, 150.45, 159.12));
}

a:hover {
  color: light-dark(hsl(10, 90%, 40%), hsl(340, 70%, 50%));
  text-decoration: underline light-dark(hsl(10, 90%, 40%), hsl(340, 70%, 50%));
}
a:hover code {
  color: light-dark(hsl(10, 90%, 40%), hsl(340, 70%, 50%));
}

p {
  margin: 0;
}
p a {
  text-decoration: underline light-dark(rgb(155.55, 148.41, 140.25), rgb(89.76, 96.9, 104.04));
}

p + p, aside + p, ul + p, ol + p, p + ul, p + ol {
  margin-top: 16px;
}

code {
  padding: 1px 3px;
  background-color: light-dark(rgb(222.4875, 220.1075, 216.1125), rgb(29.07, 34.425, 39.78));
  color: light-dark(rgb(79.05, 66.47, 53.55), rgb(159.12, 168.3, 177.48));
  border-radius: 3px;
  white-space: pre;
  font-family: "IBM Plex Mono", Courier, monospace;
}

h1 {
  margin: 0;
  padding: 18px 0 14px 0;
  width: 100%;
  height: 192px;
  display: table-cell;
  vertical-align: middle;
  font: 46px/64px "Petrona", Georgia, serif;
}

h2 {
  margin: 24px 0 8px 0;
  padding: 11px 0 5px 0;
  font: 500 28px/48px "Asap", "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
h2 .anchor {
  padding-top: 21px;
}

h3 {
  margin: 32px 0 16px 0;
  padding: 13px 0 3px 0;
  font: italic 500 23px/32px "Asap", "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
h3 .anchor {
  padding-top: 11px;
}

h2 .anchor, h3 .anchor {
  position: absolute;
  left: 768px;
  width: 256px;
  font: 14px/16px "IBM Plex Mono", Courier, monospace;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
}
h2 .anchor:hover, h3 .anchor:hover {
  color: light-dark(hsl(10, 90%, 40%), hsl(340, 70%, 50%));
}

ol, ul {
  position: relative;
  margin: 0 0 0 32px;
  padding: 0;
  list-style-type: none;
}

ol {
  counter-reset: item;
}

ol li::before {
  content: counter(item) ".";
  counter-increment: item;
  position: absolute;
  left: -32px;
}

ul li::before {
  content: "●";
  position: absolute;
  left: -32px;
  font-size: 80%;
}

li + li {
  margin-top: 16px;
}

pre {
  margin: 10px 0 8px 0;
  padding: 11px 8px;
  overflow: auto;
  background-color: light-dark(rgb(222.4875, 220.1075, 216.1125), rgb(29.07, 34.425, 39.78));
  color: light-dark(rgb(79.05, 66.47, 53.55), rgb(159.12, 168.3, 177.48));
  border-radius: 3px;
  font: 15px/24px "IBM Plex Mono", Courier, monospace;
}
pre.language-asciiart {
  font: 15px/20px "IBM Plex Mono", Courier, monospace;
}

blockquote {
  position: relative;
  padding: 17px 16px 12px 16px;
  margin: 15px 0 20px 16px;
  background: light-dark(rgb(243.525, 242.675, 240.975), rgb(16.32, 20.4, 24.48));
  color: light-dark(rgb(79.05, 66.47, 53.55), rgb(159.12, 168.3, 177.48));
  border-radius: 3px;
  font-style: italic;
}
blockquote:before {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: -16px;
  top: 24px;
  border-bottom: 16px solid transparent;
  border-right: 16px solid light-dark(rgb(243.525, 242.675, 240.975), rgb(16.32, 20.4, 24.48));
}
blockquote code {
  background: light-dark(rgb(232.05, 230.35, 226.95), rgb(29.07, 34.425, 39.78));
}

blockquote.cited {
  margin-left: 0;
}
blockquote.cited:before {
  left: auto;
  top: auto;
  bottom: -16px;
  right: 64px;
  border-bottom: none;
  border-right: none;
  border-left: 16px solid transparent;
  border-top: 16px solid light-dark(rgb(243.525, 242.675, 240.975), rgb(16.32, 20.4, 24.48));
}

.cite {
  text-align: right;
  font-style: italic;
}
.cite:before {
  content: "— ";
}

.update {
  margin: 19px 0 24px 0;
  padding: 12px 15px 7px 15px;
  border-radius: 3px;
  border: solid 1px light-dark(hsl(40, 50%, 75%), hsl(40, 20%, 35%));
  background-color: light-dark(hsl(40, 50%, 87%), hsl(40, 20%, 20%));
  color: light-dark(hsl(40, 30%, 40%), hsl(40, 20%, 60%));
}
.update strong {
  font-weight: 600;
}
.update p {
  font: 17px/32px "Asap", "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.update p:last-child {
  margin-bottom: 0;
}
.update code {
  background: light-dark(hsl(40, 40%, 83%), hsl(40, 20%, 25%));
  color: light-dark(hsl(20, 20%, 50%), hsl(40, 20%, 50%));
  font-size: 100%;
}
.update a, .update a code {
  color: light-dark(hsl(40, 70%, 45%), hsl(40, 60%, 50%));
  text-decoration: underline light-dark(rgb(216.75, 184.45, 119.85), rgb(132.6, 103.7, 45.9));
}
.update a:hover, .update a code:hover {
  color: light-dark(hsl(40, 90%, 40%), hsl(40, 90%, 60%));
  text-decoration: underline light-dark(hsl(40, 90%, 40%), hsl(40, 90%, 60%));
}
.update blockquote {
  background: light-dark(hsl(40, 50%, 92%), hsl(40, 20%, 15%));
  color: light-dark(hsl(40, 20%, 45%), hsl(40, 10%, 50%));
}
.update blockquote:before {
  border-right-color: light-dark(hsl(40, 50%, 92%), hsl(40, 20%, 15%));
  border-top-color: light-dark(hsl(40, 50%, 92%), hsl(40, 20%, 15%));
}
.update blockquote code {
  background: light-dark(hsl(40, 40%, 84%), hsl(40, 20%, 20%));
  color: light-dark(hsl(40, 20%, 50%), hsl(40, 20%, 50%));
}

hr {
  border: none;
  border-top: 1px solid light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
  color: light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
  overflow: visible;
  text-align: center;
  padding: 0;
  margin: 29px 0 1px 0;
}
hr:after {
  background: light-dark(rgb(232.05, 230.35, 226.95), rgb(20.4, 25.5, 30.6));
  font-size: 20px;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -16px;
}

table {
  width: 100%;
  margin: 0 0 16px 0;
  border-radius: 3px;
  background-color: light-dark(rgb(222.4875, 220.1075, 216.1125), rgb(29.07, 34.425, 39.78));
}
table thead {
  font-weight: bold;
}
table td {
  padding: 0 4px;
}

figure {
  display: block;
  box-sizing: border-box;
  margin: 22px 0 26px 0;
  padding: 16px;
  width: 100%;
  background-color: light-dark(rgb(243.525, 242.675, 240.975), rgb(16.32, 20.4, 24.48));
  border-radius: 3px;
  color: light-dark(rgb(121.89, 112.37, 102.51), rgb(87.312, 93.84, 100.368));
}
figure img {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
}
figure figcaption, figure label, figure input, figure output {
  margin-top: 14px;
  font: 16px/24px "Asap", "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
figure figcaption code, figure label code, figure input code, figure output code {
  background-color: light-dark(rgb(230.9025, 229.1345, 226.0575), rgb(23.97, 28.815, 33.66));
  color: light-dark(rgb(128.3925, 119.3315, 109.7775), rgb(116.28, 123.93, 131.58));
}
figure input[type=range] {
  position: relative;
  top: 5px;
  margin: 0 8px;
}
figure.wide {
  width: 1024px;
}

canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  background: light-dark(rgb(222.4875, 220.1075, 216.1125), rgb(29.07, 34.425, 39.78));
}

iframe {
  display: block;
  max-width: 100%;
}

aside {
  position: absolute;
  width: 256px;
  right: -320px;
  font: 15px/24px "Asap", "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
aside:before {
  position: absolute;
  top: 1px;
  left: -41px;
  font: 15px "IBM Plex Mono", Courier, monospace;
  content: ">>";
  color: light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
}
aside p code {
  font-size: 100%;
}

aside.bottom:before {
  top: auto;
  bottom: 2px;
}

table.archive {
  width: 100%;
  border-collapse: collapse;
  background-color: inherit;
  table-layout: fixed;
  line-height: 31px;
}
table.archive thead td {
  padding: 10px 0 0 0;
  height: 21px;
  color: light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
  border-bottom: solid 1px light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
  font: 14px/16px "IBM Plex Mono", Courier, monospace;
}
table.archive td {
  margin: 0;
  padding: 0;
}
table.archive tbody tr {
  border-bottom: solid 1px light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
}
table.archive tbody tr:first-child td {
  padding-top: 11px;
}
table.archive td.date, table.archive td.tags {
  font-size: 14px;
  font-family: "IBM Plex Mono", Courier, monospace;
}
table.archive td.date {
  width: 105px;
}
table.archive td.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
table.archive td.tags {
  width: 320px;
  padding-left: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
table.archive tbody td.date {
  color: light-dark(rgb(193.8, 189.38, 183.6), rgb(72.42, 79.05, 85.68));
}

.highlight span.p {
  color: light-dark(rgb(124.95, 115.634, 105.57), rgb(117.504, 125.46, 133.416));
}
.highlight span.n {
  color: light-dark(hsl(10, 70%, 55%), hsl(10, 50%, 50%));
}
.highlight span.s {
  color: light-dark(hsl(30, 100%, 35%), hsl(30, 50%, 50%));
}
.highlight span.e {
  color: light-dark(hsl(40, 80%, 45%), hsl(40, 60%, 45%));
}
.highlight span.f {
  color: light-dark(hsl(100, 50%, 40%), hsl(80, 60%, 35%));
}
.highlight span.t {
  color: light-dark(hsl(180, 100%, 25%), hsl(180, 80%, 35%));
}
.highlight span.g {
  color: light-dark(hsl(180, 100%, 25%), hsl(180, 80%, 35%));
}
.highlight span.o {
  color: light-dark(hsl(210, 30%, 45%), hsl(210, 35%, 50%));
}
.highlight span.k {
  color: light-dark(hsl(210, 60%, 45%), hsl(210, 60%, 50%));
}
.highlight span.a {
  color: light-dark(hsl(270, 70%, 65%), hsl(280, 70%, 60%));
}
.highlight span.r {
  color: light-dark(hsl(300, 40%, 45%), hsl(290, 35%, 50%));
}
.highlight span.c {
  color: light-dark(rgb(155.55, 148.41, 140.25), rgb(89.76, 96.9, 104.04));
}
.highlight span.blue {
  color: light-dark(hsl(220, 100%, 55%), hsl(220, 80%, 55%));
}
.highlight span.red {
  color: light-dark(hsl(5, 100%, 45%), hsl(5, 70%, 50%));
}
.highlight span.x {
  font-style: italic;
  color: light-dark(rgb(124.95, 115.634, 105.57), rgb(117.504, 125.46, 133.416));
  background-color: light-dark(rgb(224.4, 222.156, 218.28), rgb(27.336, 32.64, 37.944));
}
.highlight span.u {
  background-color: hsl(5, 100%, 90%);
  color: hsl(5, 100%, 35%);
}

.comments {
  margin: 48px 0 32px 0;
  padding: 16px;
  border-radius: 3px;
  background: light-dark(rgb(224.4, 222.156, 218.28), rgb(27.336, 32.64, 37.944));
  font: normal 15px "Asap", "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.comments a.dsq-subscribe-email em, .comments a.dsq-subscribe-rss em {
  text-decoration: none;
}
.comments a {
  color: light-dark(rgb(79.05, 66.47, 53.55), rgb(141.78, 150.45, 159.12));
}
.comments a:hover {
  color: light-dark(hsl(10, 90%, 40%), hsl(340, 70%, 50%));
}

.dsq-comment-text blockquote {
  padding-left: 16px;
  color: #777;
}

@media only screen and (max-width: 1088px) {
  article {
    width: auto;
  }
  nav .thread-narrow {
    display: inline;
  }
  .post-thread {
    display: none;
  }
  aside {
    position: relative;
    width: auto;
    right: auto;
    margin: 32px 0;
    color: light-dark(rgb(98.175, 86.955, 75.225), rgb(124.44, 132.6, 140.76));
    padding-left: 8px;
    border-left: solid 4px light-dark(rgb(193.8, 189.38, 183.6), rgb(55.08, 61.2, 67.32));
  }
  aside:before {
    content: none;
  }
  h2 .anchor, h3 .anchor {
    display: none;
  }
  figure.wide {
    width: auto;
  }
  footer p {
    margin: 0 0 24px 0;
  }
  footer figure {
    position: relative;
    display: block;
    margin-bottom: 24px;
    top: auto;
    right: auto;
  }
}
@media only screen and (max-width: 768px) {
  body {
    margin: 0 16px;
  }
  header, footer {
    border-radius: 0;
  }
  header {
    margin: 0 -24px;
    padding: 30px 24px 6px 24px;
  }
  header a {
    display: block;
  }
  header .about {
    position: relative;
    right: auto;
  }
  footer {
    margin: 0 -24px;
    padding: 24px;
  }
  .comments {
    margin: 0 -24px;
    padding: 24px;
  }
  nav {
    display: block;
    height: 51px;
  }
  nav .date {
    display: block;
    padding-bottom: 16px;
  }
  nav .tags {
    display: block;
  }
  td.tags {
    display: none;
  }
}