* {
  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 {
  --page-bg: #fff;
  --text-color: #000d;
  --link-color: #1d73c9;
  --icon-color: #bbb;
  --icon-hover-color: var(--link-color);
  --text-subtle-color: #999;
  --redacted-bg: #444;
  --code-bg: #f4f4f4;
  --code-inline-bg: #eee;
  --code-line-num: #0006;
  --kbd-bg: #eee;
  --kbd-border: #ccc;
  --kbd-shadow: #ddd;
  --divider-color: rgba(0,0,0,.2);
  --end-marker-color: #ab4642;
}
html.invert {
  --page-bg: #000;
  --text-color: #fffd;
  --link-color: #7ea2ce;
  --icon-color: #444;
  --text-subtle-color: #888;
  --redacted-bg: #333;
  --code-bg: #111;
  --code-inline-bg: #282828;
  --code-line-num: #585858;
  --kbd-bg: #111;
  --kbd-border: #444;
  --kbd-shadow: #333;
  --divider-color: rgba(255,255,255,.2);
}
@media (prefers-color-scheme: dark) {
  html {
    --page-bg: #000;
    --text-color: #fffd;
    --link-color: #7ea2ce;
    --icon-color: #444;
    --text-subtle-color: #888;
    --redacted-bg: #333;
    --code-bg: #111;
    --code-inline-bg: #282828;
    --code-line-num: #585858;
    --kbd-bg: #111;
    --kbd-border: #444;
    --kbd-shadow: #333;
    --divider-color: rgba(255,255,255,.2);
  }
  html.invert {
    --page-bg: #fff;
    --text-color: #000d;
    --link-color: #1d73c9;
    --icon-color: #bbb;
    --text-subtle-color: #999;
    --redacted-bg: #444;
    --code-bg: #f4f4f4;
    --code-inline-bg: #eee;
    --code-line-num: #0006;
    --kbd-bg: #eee;
    --kbd-border: #ccc;
    --kbd-shadow: #ddd;
    --divider-color: rgba(0,0,0,.2);
  }
}

.hljs-emphasis{font-style:italic}

html:not(.invert) {
  /* Highlight.js - A11y Light */
  & .hljs{background:#f7f7f7;color:#545454}
  & .hljs-comment,& .hljs-quote{color:#696969}
  & .hljs-deletion,& .hljs-name,& .hljs-regexp,& .hljs-selector-class,& .hljs-selector-id,& .hljs-tag,& .hljs-template-variable,& .hljs-variable{color:#d91e18}
  & .hljs-attribute,& .hljs-built_in,& .hljs-link,& .hljs-literal,& .hljs-meta,& .hljs-number,& .hljs-params,& .hljs-type{color:#aa5d00}
  & .hljs-addition,& .hljs-bullet,& .hljs-string,& .hljs-symbol{color:green}
  & .hljs-section,& .hljs-title{color:#007faa}
  & .hljs-keyword,& .hljs-selector-tag{color:#7928a1}
  & .hljs-strong{font-weight:700}
}

@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}

html.invert {
  /* Highlight.js - Base16 Default Dark */
  & .hljs{color:#d8d8d8;background:#111}
  & .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}
  & .hljs-meta,& .hljs-meta .hljs-keyword,& .hljs-meta .hljs-string{color:#a16946}
  & .hljs-meta .hljs-keyword,& .hljs-meta-keyword{font-weight:700}
}

@media (prefers-color-scheme: dark) {
  html:not(.invert) {
    /* Highlight.js - Base16 Default Dark */
    & .hljs{color:#d8d8d8;background:#111}
    & .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}
    & .hljs-meta,& .hljs-meta .hljs-keyword,& .hljs-meta .hljs-string{color:#a16946}
    & .hljs-meta .hljs-keyword,& .hljs-meta-keyword{font-weight:700}
  }
  html.invert {
    /* Highlight.js - A11y Light */
    & .hljs{background:#f7f7f7;color:#545454}
    & .hljs-comment,& .hljs-quote{color:#696969}
    & .hljs-deletion,& .hljs-name,& .hljs-regexp,& .hljs-selector-class,& .hljs-selector-id,& .hljs-tag,& .hljs-template-variable,& .hljs-variable{color:#d91e18}
    & .hljs-attribute,& .hljs-built_in,& .hljs-link,& .hljs-literal,& .hljs-meta,& .hljs-number,& .hljs-params,& .hljs-type{color:#aa5d00}
    & .hljs-addition,& .hljs-bullet,& .hljs-string,& .hljs-symbol{color:green}
    & .hljs-section,& .hljs-title{color:#007faa}
    & .hljs-keyword,& .hljs-selector-tag{color:#7928a1}
    & .hljs-strong{font-weight:700}
  }
}

html {
  background: #fff;
  background: var(--page-bg);
  color: #000d;
  color: var(--text-color);
  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;
  background: var(--icon-color);
  border-radius: 1rem;
  cursor: pointer;
}
#invert:hover {
  background: #1d73c9;
  background: var(--icon-hover-color);
}
#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;
    background: var(--page-bg);
  }
  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;
  background: var(--page-bg);
  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;
  background: var(--icon-color);
  box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #bbb;
  box-shadow: 0 0 0 .3rem var(--page-bg), 0 0 0 .6rem var(--icon-color);
}
#feed:hover::before {
  background: #1d73c9;
  background: var(--icon-hover-color);
  box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #1d73c9;
  box-shadow: 0 0 0 .3rem var(--page-bg), 0 0 0 .6rem var(--icon-hover-color);
}
#message-me::before {
  background: #bbb;
  background: var(--icon-color);
  height: .75rem;
  width: 1rem;
}
#message-me::after {
  height: 0;
  width: .1rem;
  border-top: .4rem solid #bbb;
  border-top: .4rem solid var(--icon-color);
  border-right: .6rem solid transparent;
  bottom: 0;
}
#message-me:hover::before {
  background: #1d73c9;
  background: var(--icon-hover-color);
}
#message-me:hover::after {
  border-top-color: #1d73c9;
  border-top-color: var(--icon-hover-color);
}

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;
  color: var(--text-subtle-color);
}

[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-left: .7rem solid var(--icon-color);
  border-right-width: 0;
  float: left;
  margin: .35rem 0 0 -1.2rem;
}

summary:hover::before {
  border-left-color: #1d73c9;
  border-left-color: var(--icon-hover-color);
}

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

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

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

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

li p:first-child {
  margin-top: .4rem;
}

li p:last-child {
  margin-bottom: .4rem;
}

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);
  border-top: .5px solid var(--divider-color);
}

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;
  color: var(--link-color);
}
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;
  background: var(--redacted-bg);
}
mark:hover {
  color: #000d;
  color: var(--text-color);
  background: transparent;
}

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

code {
  margin: 0 .2rem;
  white-space: nowrap;
  line-height: 1;
}

p code {
  background: #f4f4f4;
  background: var(--code-inline-bg);
  box-shadow:
     .2rem  .08rem #f4f4f4,
     .2rem -.08rem #f4f4f4,
    -.2rem  .08rem #f4f4f4,
    -.2rem -.08rem #f4f4f4;
  box-shadow:
     .2rem  .08rem var(--code-inline-bg),
     .2rem -.08rem var(--code-inline-bg),
    -.2rem  .08rem var(--code-inline-bg),
    -.2rem -.08rem var(--code-inline-bg);
}

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: #0006;
  color: var(--code-line-num);
}

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

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

pre.hljs {
  padding: 0 1rem;
}

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

.footnote-ref, .footnote-ref * {
  margin: 0;
  font-size: 12px;
}

.footnote-ref {
  display: inline-block;
  margin-top: -.2rem;
}

.post-list .footnote-ref {
  display: none;
}

.footnote-backref:not(:hover) {
  opacity: .6;
}

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

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

nav a:not(:hover) {
  color: #999;
  color: var(--text-subtle-color);
}

#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-bottom: .7rem solid var(--icon-color);
  border-top-width: 0;
}

#back::after {
  border-right: .7rem solid #bbb;
  border-right: .7rem solid var(--icon-color);
  border-left-width: 0;
}

#up:hover::after {
  border-bottom-color: #1d73c9;
  border-bottom-color: var(--link-color);
}
#back:hover::after {
  border-right-color: #1d73c9;
  border-right-color: var(--link-color);
}

#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-left: .7rem solid var(--icon-color);
  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-left: .6rem solid var(--icon-color);
  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;
  background: var(--icon-color);
}
#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-right: .6rem solid var(--icon-color);
  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;
  background: var(--icon-color);
}
#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-right: .7rem solid var(--icon-color);
  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;
  box-shadow: 0 0 0 .24rem var(--end-marker-color) 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;
  background: var(--icon-color);
}
#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; }