@font-face{
  font-family:header;
  src:url('MartianMono-StdMd.woff2') format('woff2');
  font-weight:400;
  font-style:normal
}
:root{
  --black:#000; /* opening:background + body:code background + sidebar:background */
  --dark-gray:#121212; /* body:background,highlighted text */
  --medium-gray:#888; /* sidebar:hovers + body:links */
  --light-gray:#cfcfcf; /* opening:text,button + sidebar:text,toggle,opener + body:text,link hovers,bars */
  --type-speed:.1s
}
#menu ul a.opener.active+ul,#menu ul span.opener.active+ul,article,c details,footer,header,img.in-text,img.logo,menu,nav,section{
  display:block
}
#menu ul a.opener:before,#menu ul span.opener:before,#sidebar .toggle:before{
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  text-transform:none
}
header{
  position:relative;
  text-decoration:none
}
#main,table{
  width:100%
}
a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,table th a{
  text-decoration:none
}
.free,.in-site,.open-source,.platform,.blog{
  color:var(--dark-gray)
}
.free,.in-site,.open-source,.platform,.blog,code{
  border-radius:3px
}
.free{
  background-color:#f8f894
}
.open-source{
  background-color:#007cad
}
.platform{
  background-color:#00ff80
}
.in-site{
  background-color:#7474d3
}
.blog{
  background-color:#ffd078
}
code,.code{
  font-family:Consolas,monaco,monospace;
  color:#fff;
  background-color:var(--black);
  overflow-x:auto
}
.date{
  font-style:italic;
  font-family:header;
  margin-top:0;
  margin-bottom:2%
}
table td,table th{
  padding:.75em;
  border-left:1px solid rgba(210,215,217,.75);
  border-right:1px solid rgba(210,215,217,.75)
}
#main>.inner>section,table tfoot{
  border-top:2px solid rgba(210,215,217,.75)
}
header,#wrapper{
  display:-moz-box;
  display:-ms-flexbox
}
#menu ul,b,h1,h2,h3,h4,h5,h6,strong,table th,table th a{
  color:var(--light-gray)
}
#menu ul{
  list-style:none
}
header>*,#menu ul,#sidebar>.inner>*>:last-child{
  margin-bottom:0
}
#menu ul,header p{
  letter-spacing:.075em;
  text-transform:uppercase
}
#menu ul a.opener,#menu ul span.opener,#sidebar .toggle{
  text-decoration:none;
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}
#menu>ul>li{
  border-top:1px solid rgba(210,215,217,.75)
}
a,body,div,footer,h1,h2,h3,h4,h5,h6,header,html,i,li,menu,nav,p,s,section,span,strong,table,td,th,tr,ul{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline
}
header,h1,h2,h3,h4,h5,h6{
  font-family:header;
  text-decoration:none
}
p,table,ul{
  margin:0 0 2em
}
#menu ul,body,header p{
  font-family:Tahoma,sans-serif;
  font-weight:400
}
#menu ul a.opener:before,#menu ul span.opener:before,#sidebar .toggle:before{
  line-height:1;
  font-weight:900
}
table,table td,table th{
  vertical-align:middle
}
table{
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed
}
body{
  -webkit-text-size-adjust:none;
  -ms-text-size-adjust:none;
  -ms-overflow-style:scrollbar;
  background:var(--dark-gray);
  color:var(--light-gray);
  font-size:13pt;
  line-height:1.65
}
#menu ul a.opener:hover:before,#menu ul a:hover,#menu ul span.opener:hover:before,#menu ul span:hover,a{
  color:var(--medium-gray)
}
@media screen and (max-width:480px){
  body,html{
    min-width:320px
  }
}
html{
  box-sizing:border-box
}
*,:after,:before{
  box-sizing:inherit
}
body *,body:after,body :before{
  -moz-animation:none;
  -webkit-animation:none;
  -ms-animation:none;
  animation:none;
  -moz-transition:none;
  -webkit-transition:none;
  -ms-transition:none;
  transition:none
}
@media screen and (max-width:1680px){
  body{
    font-size:11pt
  }
}
@media screen and (max-width:1280px){
  body{
    font-size:10pt
  }
}
@media screen and (max-width:360px){
  body{
    font-size:9pt
  }
}
a:not(:has(img)){
  -moz-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;
  -webkit-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;
  -ms-transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;
  transition:color .2s ease-in-out,border-bottom-color .2s ease-in-out;
  border-bottom:1px dotted
}
a:hover{
  border-bottom-color:var(--light-gray);
  color:var(--light-gray)
}
table tbody tr{
  border:1px solid rgba(210,215,217,.75)
}
a:hover strong{
  color:inherit
}
b,p b,strong{
  font-weight:600
}
em,i{
  font-style:italic
}
h1,h2,h3,h4,h5,h6{
  line-height:1.5;
  margin:0 0 1em
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
  color:inherit;
  border-bottom:0
}
#sidebar>.inner>*,table thead{
  border-bottom:2px solid rgba(210,215,217,.75)
}
h1{
  font-size:4em;
  margin:0 0 .5em;
  line-height:1.3
}
h2{
  font-size:3em
}
h3{
  font-size:2em
}
h4{
  font-size:1.1em
}
#sidebar,h5{
  font-size:.9em
}
h6{
  font-size:.7em
}
@media screen and (max-width:1680px){
  h1{
    font-size:3.5em
  }
}
@media screen and (max-width:980px){
  h1{
    font-size:3.25em
  }
}
hr{
  border:0;
  border-bottom:1px solid rgba(210,215,217,.75);
  margin:3em 0
}
img.in-text,img.logo{
  margin:60px auto 30px;
  max-width:100%;
  max-height:100vh;
  height:auto;
  width:auto
}
header p{
  font-size:1em;
  margin-top:-.5em
}
table th,td[colspan],th[colspan]{
  font-weight:600;
  text-align:center
}
header.major>:last-child{
  border-bottom:3px solid var(--light-gray);
  display:inline-block;
  margin:0 0 2em;
  padding:0 .75em .5em 0
}
.main>:last-child{
  margin:0 0 1em
}
ul{
  list-style:disc;
  padding-left:1em
}
ul li{
  padding-left:.5em
}
#menu>ul>li:first-child{
  border-top:0;
  margin-top:0;
  padding-top:0
}
.table-wrapper{
  -webkit-overflow-scrolling:touch;
  overflow-x:auto
}
table td{
  text-align:center
}
table th{
  background-color:rgba(230,235,237,.25)
}
table th a{
  border-bottom:0
}
.previous,table.table1 tbody tr td:first-child:not([colspan]),table.table1 tfoot tr td:first-child:not([colspan]),table.table1 thead tr th:first-child:not([colspan]),table.table2 tbody tr td:nth-child(2):not([colspan]),table.table2 tfoot tr td:nth-child(2):not([colspan]),table.table2 thead tr th:nth-child(2):not([colspan]){
  text-align:left
}
#wrapper{
  display:-webkit-flex;
  display:flex;
  -moz-flex-direction:row-reverse;
  -webkit-flex-direction:row-reverse;
  -ms-flex-direction:row-reverse;
  flex-direction:row-reverse;
  min-height:100vh
}
#main{
  -moz-flex-grow:1;
  -webkit-flex-grow:1;
  -ms-flex-grow:1;
  flex-grow:1;
  -moz-flex-shrink:1;
  -webkit-flex-shrink:1;
  -ms-flex-shrink:1;
  flex-shrink:1
}
#sidebar,#sidebar>.inner{
  position:relative;
  width:26em
}
#main>.inner{
  padding:0 6em .1em;
  margin:0 auto;
  max-width:150em
}
#main>.inner>section{
  padding:6em 0 4em
}
#main>.inner>section:first-of-type{
  border-top:0
}
#sidebar{
  -moz-flex-grow:0;
  -webkit-flex-grow:0;
  -ms-flex-grow:0;
  flex-grow:0;
  -moz-flex-shrink:0;
  -webkit-flex-shrink:0;
  -ms-flex-shrink:0;
  flex-shrink:0;
  -moz-transition:margin-left .5s,box-shadow .5s;
  -webkit-transition:margin-left .5s,box-shadow .5s;
  -ms-transition:margin-left .5s,box-shadow .5s;
  transition:margin-left .5s,box-shadow .5s;
  background-color:var(--black)
}
#sidebar .toggle,#sidebar .toggle:before{
  justify-content:center;
  top:0;
  display:flex
}
#sidebar h2{
  font-size:1.38889em
}
#sidebar>.inner{
  padding:2.22222em 2.22222em 2.44444em
}
#sidebar>.inner>*{
  margin:0 0 3.5em;
  padding:0 0 3.5em
}
#sidebar>.inner>:last-child{
  border-bottom:0;
  margin-bottom:0;
  padding-bottom:0
}
#sidebar>.inner>.alt{
  background-color:var(--light-gray);
  border-bottom:0;
  margin:-2.22222em 0 4.44444em -2.22222em;
  padding:2.22222em;
  width:calc(100% + 4.44444em)
}
#sidebar .toggle{
  visibility:hidden;
  -moz-transition:left .5s;
  -webkit-transition:left .5s;
  -ms-transition:left .5s;
  transition:left .5s;
  border:0;
  height:7.5em;
  left:26em;
  line-height:7.5em;
  outline:0;
  overflow:hidden;
  position:absolute;
  text-align:center;
  text-indent:-15em;
  white-space:nowrap;
  width:6em;
  z-index:10000;
  align-items:center
}
#sidebar .toggle:before{
  align-items:center;
  content:'≡';
  font-size:2rem;
  height:inherit;
  left:0;
  line-height:inherit;
  position:absolute;
  text-indent:0;
  width:inherit
}
#sidebar.inactive{
  margin-left:-26em;
  display:flex;
  justify-content:center;
  align-items:center
}
@media screen and (max-width:1680px){
  #main>.inner{
    padding:0 5em .1em
  }
  #main>.inner>section{
    padding:5em 0 3em
  }
  #sidebar{
    width:24em
  }
  #sidebar>.inner{
    padding:1.66667em 1.66667em 1.33333em;
    width:24em
  }
  #sidebar>.inner>.alt{
    margin:-1.66667em 0 3.33333em -1.66667em;
    padding:1.66667em;
    width:calc(100% + 3.33333em)
  }
  #sidebar .toggle,#sidebar .toggle:before{
    visibility:hidden
  }
  #sidebar.inactive{
    margin-left:-24em
  }
}
header>*{
  -moz-box:1;
  -webkit-box:1;
  -ms-flexbox:1;
  flex:1
}
@media screen and (max-width:1680px){
  header{
    padding-top:5em
  }
}
#menu ul{
  -moz-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none
}
#menu ul a,#menu ul span{
  border-bottom:0;
  color:inherit;
  cursor:pointer;
  display:block;
  font-size:.9em;
  font-family:header
}
#menu ul a.opener,#menu ul span.opener{
  -moz-transition:color .2s ease-in-out;
  -webkit-transition:color .2s ease-in-out;
  -ms-transition:color .2s ease-in-out;
  transition:color .2s ease-in-out;
  position:relative;
  padding-right:2.5em
}
#menu>ul>li{
  margin:.8em 0 0;
  padding:.8em 0 0
}
#menu>ul>li>ul{
  color:var(--light-gray);
  display:none;
  margin:.5em 0 1.5em;
  padding-left:1em
}
#menu>ul>li>ul a,#menu>ul>li>ul span{
  font-size:.85em
}
#menu>ul>li>ul>li{
  margin:.5em 0 0;
  padding:.125em 0 0
}
@media screen and (max-width:1280px){
  #main>.inner>section{
    padding:3em 0 1em
  }
  #sidebar .toggle{
    text-indent:-15em;
    width:7.25em;
    visibility:visible;
    left:16em
  }
  #sidebar .toggle:before{
    color:var(--light-gray);
    margin-left:-.0625em;
    margin-top:-.4em;
    font-size:2.5rem;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
    visibility:visible
  }
  #sidebar .toggle:after{
    background:rgba(18,18,18,.7);
    border-radius:.375em;
    content:'';
    height:3.5em;
    left:1em;
    position:absolute;
    top:1em;
    width:5em;
    display:flex;
    justify-content:center;
    align-items:center;
    visibility:visible
  }
  header{
    padding-top:6.5em
  }
  body,h5{
    font-size:1.1rem
  }
  h1{
    line-height:1.4;
    font-size:2.2rem
  }
  h2{
    font-size:1.8rem
  }
  h3{
    font-size:1.5rem
  }
  h4{
    font-size:1.3rem
  }
  h6,td{
    font-size:.9rem
  }
  table{
    table-layout:auto
  }
  #main>.inner{
    padding:0 1em .1em
  }
  #sidebar,#sidebar>.inner{
    width:16em
  }
  #sidebar.inactive{
    margin-left:-16em
  }
}
@media screen and (min-width:1280px){
  #sidebar>.inner{
    -webkit-overflow-scrolling:touch;
    padding-right:1rem
  }
  #sidebar{
    height:100vh;
    overflow:hidden
  }
  #main{
    overflow-y:auto;
    height:100vh
  }
  #sidebar,#sidebar>.inner{
    width:30em
  }
  #main>.inner{
    padding-left:5rem;
    padding-right:5rem
  }
  #sidebar>.inner{
    height:100%;
    box-sizing:border-box;
    overflow-y:auto;
    overflow-x:hidden;
    padding-left:1rem
  }
}
img.logo{
  max-height:15vh
}
td img.logo{
  margin:auto
}
img.in-text{
  border-radius:6px
}
footer{
  padding:1rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1rem
}
#menu ul li span{
  position:relative
}
#menu ul li span::before{
  position:absolute;
  right:.75em;
  color:var(--light-gray);
  width:1em;
  text-align:center;
  top:50%;
  height:1em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem
}
#menu ul li span.current-section::before{
  content:'✦' !important;
  transform:translateY(-50%) !important
}
#menu ul li span.opener.current-section::before{
  content:'✦' !important;
  transform:translateY(-50%) !important
}
#menu ul li span:not(.opener)::before{
  content:'●';
  transform:translateY(-50%)
}
#menu ul li span.opener::before{
  content:'⌄';
  transform:translateY(-80%)
}
#menu ul span a{
  font-size:inherit
}
#menu ul li span.opener.current-section,#menu ul li span.current-section{
  font-weight:700
}
#menu>ul>li>ul>li.sub{
  text-indent:.6%
}
.container{
  display:flex;
  flex-wrap:wrap
}
span.quote{
  font-family:header
}
div.caption{
  font-style:italic;
  text-align:center!important;
  padding:0 0 2em
}
span.quote > a,code > a{
  text-decoration:none;
  border-bottom:none;
  color:inherit
}
span.quote > a:hover{
  color:var(--medium-gray)
}
header a{
  border-bottom:none !important
}
header{
  display:-webkit-box;
  display:flex;
  border-bottom:5px solid var(--light-gray);
  padding:6em 0 1em;
  text-decoration:none
}
li.sub > a::before{
  content:"↳ "
}
.posts{
  display:-moz-flex;
  display:-webkit-flex;
  display:-ms-flex;
  display:flex;
  -moz-flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin:0 0 2em -6em;
  width:calc(100% + 6em)
  }
.posts article{
  -moz-flex-grow:0;
  -webkit-flex-grow:0;
  -ms-flex-grow:0;
  flex-grow:0;
  -moz-flex-shrink:1;
  -webkit-flex-shrink:1;
  -ms-flex-shrink:1;
  flex-shrink:1;
  margin:0 0 6em 6em;
  position:relative;
  width:calc(33.33333% - 6em)
}
.posts article:before{
  background:var(--medium-gray);
  content:'';
  display:block;
  height:calc(100% + 6em);
  left:-3em;
  position:absolute;
  top:0;
  width:1px
}
.posts article > :last-child{
  margin-bottom:0
}
.posts article .image{
  display:block;
  margin:0 0 2em 0
}
.posts article .image img{
  display:block;
  width:100%
}
@media screen and (min-width:1681px){
  .posts article:nth-child(3n + 1):before{
    display:none
  }
  .posts article:nth-child(3n + 1):after{
    width:100%
  }
  .posts article:nth-last-child(1),.posts article:nth-last-child(2),.posts article:nth-last-child(3){
    margin-bottom:0
  }
  .posts article:nth-last-child(1):before,.posts article:nth-last-child(2):before,.posts article:nth-last-child(3):before{
    height:100%
  }
  .posts article:nth-last-child(1):after,.posts article:nth-last-child(2):after,.posts article:nth-last-child(3):after{
    display:none
  }
}
@media screen and (max-width:1680px){
  .posts article{
    width:calc(50% - 6em)
  }
  .posts article:nth-last-child(3){
    margin-bottom:6em
  }
}
@media screen and (min-width:481px) and (max-width:1680px){
  .posts article:nth-child(2n + 1):before{
    display:none
  }
  .posts article:nth-child(2n + 1):after{
    width:100%
  }
  .posts article:nth-last-child(1),.posts article:nth-last-child(2){
    margin-bottom:0
  }
  .posts article:nth-last-child(1):before,.posts article:nth-last-child(2):before{
    height:100%
  }
  .posts article:nth-last-child(1):after,.posts article:nth-last-child(2):after{
    display:none
  }
}
@media screen and (max-width:736px){
  .posts{
    margin:0 0 2em -4.5em;
    width:calc(100% + 4.5em)
  }
  .posts article{
    margin:0 0 4.5em 4.5em;
    width:calc(50% - 4.5em)
  }
  .posts article:before{
    height:calc(100% + 4.5em);
    left:-2.25em
  }
  .posts article:after{
    bottom:-2.25em;
    width:calc(100% + 4.5em)
  }
  .posts article:nth-last-child(3){
    margin-bottom:4.5em
  }
}
@media screen and (max-width:480px){
  .posts{
    margin:0 0 2em 0;
    width:100%
  }
  .posts article{
    margin:0 0 4.5em 0;
    width:100%
  }
  .posts article:before{
    display:none
  }
  .posts article:after{
    width:100%
  }
  .posts article:last-child{
    margin-bottom:0
  }
  .posts article:last-child:after{
    display:none
  }
}
audio{
  margin:0 auto;
  display:table
}
video {
  display: block;
  border: 6px;
  outline: none;
}
.vertical-video{
  height:90vh;
  width:auto;
  max-width:100%;
  object-fit:cover;
  margin:0 auto
}
.horizontal-video{
  width:100vw;
  height:auto;
  max-height:100vh;
  object-fit:cover;
  margin:0 auto
}
.type{
  color:transparent;
  background:
  linear-gradient(-90deg,var(--light-gray) 5px,transparent 0) 10px 0,
  linear-gradient(var(--light-gray) 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 220%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
  line-height:1.8;
  vertical-align:bottom;
  padding-bottom:.1em;
  animation:t calc(var(--n)*var(--type-speed)) steps(var(--n)) forwards
}
@keyframes t{
  from{background-size:0 200%}
}