* {
  box-sizing: border-box;
  margin: 0; padding: 0;
  font-family: "Lato", "Noto Sans CJK JP", sans-serif;
  font-size: 18px;
  line-height: 1.5rem;
}

:root { --filter: invert(0) }
html.invert { --filter: invert(1) }
/*@media (prefers-color-scheme: dark) {
  :root { --filter: invert(1) }
  html.invert { --filter: invert(0) }
}*/

html, pre.hljs, img:not(.emoji):not([alt^=Diagram]),
#like-post.liked, #like-post:hover,
#end, .emoji-container { filter: var(--filter) }

html {
  background: #fff;
  color: #000;
  height: 100%;
  overflow-x: hidden;
}

#logo {
  float: left;
  width: 1.7rem;
  margin: 0.94rem 0 0 -2rem;
}

@media (max-width: 42rem) {
  #logo { margin-left: -1.9rem; }
}

#invert {
  float: right;
  margin: 1.34rem 0 0 .5rem;
  height: 1rem;
  width: 1rem;
  background: #bbb;
  border-radius: 1rem;
  cursor: pointer;
}
#invert:hover { background: #1d73c9 }
#invert::before {
  content: "";
  display: block;
  height: 2rem;
  width: 2rem;
  position: relative;
  left: -.5rem;
  top: -.5rem;
  border-radius: 1rem;
}

@media (max-width: 474px) {
  #title-btns {
    display: block;
    position: absolute;
    top: calc(2vw + 2.6rem);
    right: 1.6rem;
    padding-left: .6rem;
    background: #fff;
  }
  h1 {
    margin: .9rem 0 1rem !important;
    line-height: 1.8rem;
  }
}

#feed, #message-me {
  box-sizing: content-box;
  display: inline-block;
  position: relative;
  height: 1rem;
  width: 1rem;
  margin: -.6rem 0;
  vertical-align: -.05rem;
  background: #fff;
  overflow: hidden;
  outline: 0;
  border: .6rem solid transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#feed {
  margin-left: .15rem;
  border-right-width: .4rem;
}
#message-me { border-left-width: .4rem; }
#feed::before,
#message-me::before,
#message-me::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
}
#feed::before {
  height: .8rem;
  width: .8rem;
  bottom: 0;
  transform: translate(-50%,50%);
  border-radius: 100%;
  background: #bbb;
  box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #bbb;
}
#feed:hover::before {
  background: #1d73c9;
  box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #1d73c9;
}
#message-me::before {
  background: #bbb;
  height: .75rem;
  width: 1rem;
}
#message-me::after {
  height: 0;
  width: .1rem;
  border-top: .4rem solid #bbb;
  border-right: .6rem solid transparent;
  bottom: 0;
}
#message-me:hover::before { background: #1d73c9 }
#message-me:hover::after { border-top-color: #1d73c9 }

body {
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
}

main {
  position: relative;
  max-width: 36rem;
  margin: 0 auto;
  padding: calc(2vw + .7rem) 2.2rem;
}

main * { margin: 1rem 0 }

h1, h1 * { font-size: 26px }
h2, h2 * { font-size: 22px }

p.post-date {
  margin: -1rem 0 -.2rem;
}
p.post-date * {
  font-size: 15px;
  color: #999;
}

[lang=jbo], [lang=jbo] * {
  font-family: "crisa", "Lato", sans-serif;
  font-size: 19px;
}

[lang=jpn], [lang=jpn] * { font-size: 17px }
rt { margin: 0; font-size: 8px !important }

.header-anchor {
  float: left;
  display: inline-block;
  margin: 0 0 0 -1rem;
  font-weight: normal;
}

summary {
  margin-bottom: 0;
  cursor: pointer;
}

details > summary { list-style: none }
details > summary::-webkit-details-marker { display: none }

summary::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  border: .4rem solid transparent;
  border-left: .7rem solid #bbb;
  border-right-width: 0;
  float: left;
  margin: .35rem 0 0 -1.2rem;
}

summary:hover::before { border-left-color: #1d73c9; }

details[open] > summary::before {
  border: .4rem solid transparent;
  border-top: .7rem solid #bbb;
  border-bottom-width: 0;
  margin: .4rem 0 0 -1.3rem;
}

details[open] > summary:hover::before { border-top-color: #1d73c9; }

blockquote {
  padding-left: 1.2rem;
  box-shadow: 2px 0 0 rgba(0,0,0,.2) inset;
}

ul ul, ul ol, ol ul, ol ol, li {
  margin: .4rem 0;
  padding: revert;
}

ol > li:first-child:nth-last-child(n+10),
ol > li:first-child:nth-last-child(n+10) ~ li {
  list-style-type: decimal-leading-zero;
}

hr {
  border: 0;
  border-top: .5px solid rgba(0,0,0,.2);
}

img:not(.emoji) {
  display: block;
  max-width: 100%;
  margin: 1.5rem 0;
}

img.emoji {
  height: 1rem;
  width: 1rem;
  margin: 0 .05rem 0 .1rem;
  vertical-align: -.1rem;
}

img.hero {
  display: block;
  width: 100vw;
  max-width: none;
  margin: 2rem calc(50% - 50vw);
}

a {
  text-decoration: none;
  color: #1d73c9;
}
a:hover, a:hover *, ins * { text-decoration: underline }
a:visited { color: #955eba }
a:active { color: #ab4642 }

.irc { padding-left: 1.8rem }
.irc > p { text-indent: -1.8rem }
.irc * {
  margin: 0;
  text-indent: 0;
}

mark {
  color: transparent;
  background: #444;
}
mark:hover {
  color: #000;
  background: transparent;
}

mark:not(:hover) code,
mark:not(:hover) .emoji { opacity: 0 }

code {
  background: #e6e6e6;
  margin: 0 .2rem;
  box-shadow:
     .2rem  .08rem #e6e6e6,
     .2rem -.08rem #e6e6e6,
    -.2rem  .08rem #e6e6e6,
    -.2rem -.08rem #e6e6e6;
  white-space: nowrap;
}

/* Highlight.js - Base16 Default Dark */
.hljs{color:#d8d8d8;background:#181818}.hljs ::selection,.hljs::selection{background-color:#383838;color:#d8d8d8}.hljs-comment{color:#585858}.hljs-tag{color:#b8b8b8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#d8d8d8}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ab4642}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#dc9656}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#f7ca88}.hljs-strong{font-weight:700;color:#f7ca88}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#a1b56c}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#86c1b9}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#7cafc2}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#ba8baf}.hljs-emphasis{color:#ba8baf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#a16946}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}

p code, p code * {
  font-family: "Hack", monospace;
  font-size: 16px;
}

pre, pre * {
  font-family: "Hack", monospace;
  font-size: 15px;
  line-height: 1.4em;
}

pre code {
  display: block;
  margin: 0 auto;
  padding: 0.8rem 2rem;
  max-width: 35.6rem;
  min-width: fit-content;
  background: transparent;
  white-space: inherit;
  box-shadow: none;
}

pre.hljs:hover code {
  box-shadow: -.5px 0 #fff6;
}

pre .code-line {
  margin: 0;
  padding: 0;
  display: inline-block;
}
pre .code-line::before {
  content: attr(data-line-number);
  display: inline-block;
  width: 8rem;
  text-align: right;
  position: absolute;
  margin-left: -8.7rem;
  color: transparent;
}

pre:hover .code-line::before {
  color: #fff8;
}

pre .code-line::after {
  content: "\200B";
}

pre {
  margin: 1em -100%; /* old browsers fallback */
  margin: 1rem calc(50% - 50vw);
  background: #e6e6e6;
  overflow-x: auto;
}

pre.hljs {
  padding: 0 1rem;
}

kbd {
  background: #eee;
  margin: 0 .1rem;
  padding: .05rem .35rem;
  vertical-align: .07rem;
  font-family: "Hack", monospace;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: .3rem;
  box-shadow: 0 2px 0 #ddd;
  white-space: nowrap;
}

#tags { word-spacing: .5rem; }
.tag { white-space: nowrap; }

nav {
  position: relative;
  margin-bottom: 0;
  border-top: .5px solid rgba(0,0,0,.2);
  padding-top: 1rem;
}
nav::after {
  content: "";
  display: block;
  clear: both;
}

nav a:not(:hover) {
  color: #999;
}

#up, #back, #next, #prev, #first, #last { display: block }
#next, #prev, #first, #last, #end { width: 40% }
#first, #last { position: relative }

#up {
  margin: 0 0 0 -.2rem;
  position: absolute;
  top: 2vw;
}

#back {
  float: left;
  margin: .9rem 0 0 -1.8rem;
  padding: .5rem;
}

#up::after, #back::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  border: .4rem solid transparent;
}

#up::after {
  margin: .6rem 1.5rem .6rem .3rem;
  border-bottom: .7rem solid #bbb;
  border-top-width: 0;
}

#back::after {
  border-right: .7rem solid #bbb;
  border-left-width: 0;
}

#up:hover::after { border-bottom-color: #1d73c9 }
#back:hover::after { border-right-color: #1d73c9 }

#next, #last, #end {
  float: right;
  margin: 0 -1.2rem 0 0;
  text-align: right;
}

#next + #last { margin: 2rem -40% 0 0 }
#first { margin: .5rem 0 0 -1.2rem }
#prev { margin: 0 0 .5rem -1.2rem }

#next::after {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  margin-left: .5rem;
  border: .4rem solid transparent;
  border-left: .7rem solid #bbb;
  border-right-width: 0;
  vertical-align: -.05rem;
}
#next:hover::after { border-left-color: currentColor }

#last::after {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  margin: 0 .1rem 0 .5rem;
  border: .4rem solid transparent;
  border-left: .6rem solid #bbb;
  border-right-width: 0;
  vertical-align: -.05rem;
}
#last::before {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  top: .37rem;
  height: .8rem;
  width: .15rem;
  background: #bbb;
}
#last:hover::after { border-left-color: currentColor }
#last:hover::before { background: currentColor }

#first::before {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  margin: 0 .5rem 0 .1rem;
  border: .4rem solid transparent;
  border-right: .6rem solid #bbb;
  border-left-width: 0;
  vertical-align: -.05rem;
}
#first::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: .37rem;
  height: .8rem;
  width: .15rem;
  background: #bbb;
}
#first:hover::before { border-right-color: currentColor }
#first:hover::after { background: currentColor }

#prev::before {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  margin-right: .5rem;
  border: .4rem solid transparent;
  border-right: .7rem solid #bbb;
  border-left-width: 0;
  vertical-align: -.05rem;
}
#prev:hover::before { border-right-color: currentColor }

#end { padding: 0 1.2rem .5rem 0 }
#end::after {
  content: "";
  display: block;
  float: right;
  margin: .35rem .1rem 0 .2rem;
  height: .8rem;
  width: .8rem;
  transform: rotate(45deg);
  box-shadow: 0 0 0 .24rem #ab4642 inset;
}

#like-post {
  display: block;
  position: relative;
  height: 2.3rem;
  width: 2.3rem;
  margin: -.35rem auto -1.95em;
  padding: .9rem .85rem;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
#like-post span {
  margin: 0;
  position: relative;
  transform: rotate(45deg);
  filter: drop-shadow(0 0px 0 #955ebaff);
  transition: filter 0s;
}
#like-post.like-anim span {
  filter: drop-shadow(-11px -11px 2px #955eba00);
  transition: filter .7s ease-out;
}
#like-post span, #like-post span::before, #like-post span::after {
  display: block;
  height: .6rem;
  width: .6rem;
  background: #bbb;
}
#like-post.liked span, #like-post.liked span::before, #like-post.liked span::after,
#like-post:hover span, #like-post:hover span::before, #like-post:hover span::after {
  background: #955eba;
}
#like-post span::before, #like-post span::after {
  content: "";
  position: absolute;
  border-radius: .5rem;
}
#like-post span::before { top: -.3rem; }
#like-post span::after { left: -.3rem; }