pre, code {
  font-family: Consolas, Monaco, "Lucida Console", "Andale Mono", monospace
}

.menu-options, .max-800 #bottom-navi .navi, #user-profile .avatar, #user-profile .navi, .card, .gallery li, .gallery .figure {
  display: inline-block;
  vertical-align: top
}

.all-caps .links {
  text-transform: uppercase;
  letter-spacing: 1px
}

.items, fieldset, input[type=range], .select, .gallery li, .gallery .figure {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 0
}

.button:before, .icon:before, .facebook:before, .twitter:before, .github:before, .rss:before, .tag:before, .card h2:before {
  font-family: icon;
  margin-right: .4em
}

@font-face {
  font-family: icon;
  src: url('/app/deps/icons.woff2') format('woff2'), url('/app/deps/icons.woff') format('woff')
}

* {
  box-sizing: border-box
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%
}

body {
  height: 100%;
  -moz-font-feature-settings: "liga" on;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-transform: opacity .1s;
  transform: opacity .1s;
  opacity: 0;
  margin: 0
}

body.loaded {
  opacity: 1
}

img {
  max-width: 100%;
  border: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%
}

th {
  text-align: left
}

pre, code {
  font-family: Consolas, Monaco, "Lucida Console", "Andale Mono", monospace
}

pre, code {
  font-family: Consolas, Monaco, "Lucida Console", "Andale Mono", monospace
}

pre, code {
  font-family: Consolas, Monaco, "Lucida Console", "Andale Mono", monospace
}

.button {
  font-size: 100%;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-family: inherit;
  border: 1px solid rgba(51,51,51,.3);
  #: must be ems;
  padding: .6em 1.5em;
  display: inline-block;
  min-width: 6em;
  -webkit-transition: all .1s;
  transition: all .1s;
  margin: .2em;
  cursor: pointer
}

.button:focus {
  box-shadow: 0 0 .2em rgba(0,0,0,.6);
  outline: 0
}

.button:active {
  box-shadow: inset 0 .2em 0 rgba(51,51,51,.3);
  -webkit-transform: scale(.98);
  transform: scale(.98)
}

.button::-moz-focus-inner {
  border: 0;
  padding: 0
}

.button:focus, .button:hover:not(:disabled) {
  -webkit-transform: scale(1.02);
  transform: scale(1.02)
}

.dark .button {
  color: #fff;
  border-color: rgba(255,255,255,.6)
}

.dark .button:hover {
  background-image: linear-gradient(to bottom, rgba(51,51,51,.3),rgba(51,51,51,.3) 100%)
}

.button.main, .button.alt, .button.dark {
  border-color: transparent;
  color: #fff
}

.button.main:hover, .button.alt:hover, .button.dark:hover {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.1),rgba(255,255,255,.1) 100%)
}

.button.secondary {
  background: transparent !important
}

.light .button.secondary:hover {
  border-color: rgba(0,0,0,.8)
}

.dark .button.secondary:hover {
  border-color: #fff
}

.button:disabled, .button.disabled {
  text-shadow: 1px 1px 0px #fff;
  cursor: not-allowed;
  color: rgba(0,0,0,.5);
  background: #eee
}

.button.top2 {
  margin-top: 1.2em
}

.button.top3 {
  margin-top: 1.8em
}

.light .button.contrast {
  background: #262626;
  color: #fff
}

.dark .button.contrast {
  background: #fff;
  color: #262626
}

.btn-gradient .button {
  background-image: linear-gradient(to bottom, rgba(38,38,38,.1),rgba(38,38,38,.3) 100%)
}

.btn-gradient .button:hover {
  background-image: linear-gradient(to bottom, rgba(38,38,38,0),rgba(38,38,38,.2) 100%)
}

.custom-select {
  display: block;
  position: relative
}

.trigger {
  cursor: pointer;
  margin-left: -1.8em
}

.trigger:before {
  font-family: icon;
  content: "\f107";
  font-size: 200%;
  margin-right: .3em;
  opacity: .8;
  float: left
}

.items {
  display: none;
  left: 0;
  top: 4.2em;
  position: absolute;
  max-width: 25em;
  box-shadow: 0 0 1em rgba(0,0,0,.25);
  background-color: #fff;
  z-index: 2
}

.active .items {
  display: block
}

.items li {
  padding: 0.9em 0.6em;
  margin: 0;
  cursor: pointer
}

.items li:hover {
  background-color: #eee
}

fieldset > * {
  display: inline-block
}

.msg {
  background-color: #262626;
  padding: .2em 0.6em;
  font-size: 80%;
  color: #fff;
  white-space: nowrap;
  min-width: 11em;
  position: relative;
  display: none
}

.msg:after {
  font-family: icon;
  content: "\f0d7";
  font-size: 280%;
  color: #262626;
  right: 8%;
  position: absolute;
  bottom: -.7em
}

.dark .msg {
  background-color: #fff;
  color: #262626
}

.dark .msg:after {
  color: #fff
}

.tip {
  display: inline-block;
  margin-top: .2em;
  color: rgba(0,0,0,.5);
  font-size: 80%
}

.dark .tip {
  color: rgba(255,255,255,.4)
}

.msg {
  right: 0;
  bottom: 110%;
  position: absolute;
  white-space: inherit;
  z-index: 4;
  display: none
}

.with_title .msg {
  bottom: 72%
}

.error .msg {
  display: inline
}

.error .input, .error .input:focus {
  border: 1px solid #bd0000;
  box-shadow: 0 0 0 2px #bd0000
}

.loading {
  cursor: wait
}

.loading:not(p) {
  -webkit-filter: blur(4px);
  filter: blur(4px)
}

.is-ie .loading, p.loading {
  opacity: .5
}

.field {
  margin-bottom: 1.2em;
  display: block
}

.field label {
  text-align: left;
  cursor: pointer;
  position: relative
}

.field h5 {
  margin-bottom: .3em;
  font-size: 90%;
  font-weight: normal;
  opacity: .8
}

fieldset .field {
  display: inline-block
}

input-field label {
  display: block
}

.input {
  border: 1px solid rgba(51,51,51,.3);
  border-radius: .1em;
  padding: .5em 0.6em;
  font-family: inherit;
  font-size: 100%;
  width: 100%;
  outline: 0;
  resize: none;
  display: block
}

.dark .input {
  border-color: rgba(255,255,255,.4);
  background: transparent;
  color: #fff
}

.touchable .input {
  font-size: 16px
}

.input:focus {
  outline: 1px solid var(--main);
  border-color: var(--main)
}

.option {
  display: inline-block;
  margin-right: 1.2em;
  position: relative;
  cursor: pointer
}

.option b {
  font-weight: normal
}

.option input {
  left: -99em;
  position: absolute
}

.option span:before {
  font-family: icon;
  content: "\f096";
  font-size: 110%;
  color: rgba(51,51,51,.1);
  top: 1px;
  position: relative;
  margin-right: 0.6em
}

.option :active + span:before {
  color: rgba(51,51,51,.3);
  top: 2px
}

.option :checked + span:before {
  font-family: icon;
  content: "\f14a";
  color: var(--main);
  margin-right: .5rem
}

.option :focus + span {
  border-bottom: 1px solid rgba(0,0,0,.1)
}

.radio span:before {
  font-family: icon;
  content: "\f10c"
}

.radio :checked + span:before {
  font-family: icon;
  content: "\f192"
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: 0;
  width: 100%;
  font-size: 90%;
  cursor: pointer
}

::-webkit-slider-runnable-track {
  border-radius: 3px;
  background-color: rgba(51,51,51,.1);
  height: 3px
}

:focus::-webkit-slider-runnable-track {
  background-color: rgba(0,0,0,.5)
}

::-webkit-slider-thumb {
  -webkit-transition: all .1s;
  transition: all .1s;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--main);
  height: 15px;
  width: 15px;
  margin-top: -7px
}

:hover::-webkit-slider-thumb, :focus::-webkit-slider-thumb {
  -webkit-transform: scale(1.6);
  transform: scale(1.6)
}

:active::-webkit-slider-thumb {
  -webkit-transform: scale(1.5);
  transform: scale(1.5)
}

/*
  
  Firefox must be duplicated :(
  
  css-tricks.com/styling-cross-browser-compatible-range-inputs-css
  
*/
::-moz-range-track {
  border-radius: 3px;
  background-color: rgba(51,51,51,.1);
  height: 3px
}

:focus::-moz-range-track {
  background-color: rgba(0,0,0,.5)
}

::-moz-range-thumb {
  -webkit-transition: all .1s;
  transition: all .1s;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--main);
  height: 15px;
  width: 15px;
  margin-top: -7px
}

:hover::-moz-range-thumb, :focus::-moz-range-thumb {
  -webkit-transform: scale(1.6);
  transform: scale(1.6)
}

:active::-moz-range-thumb {
  -webkit-transform: scale(1.5);
  transform: scale(1.5)
}

::-moz-focus-outer {
  border: 0
}

select-field {
  display: inline-block;
  margin-bottom: 1.2em
}

.select {
  white-space: nowrap;
  display: inline-block;
  width: auto;
  z-index: 1;
  position: relative;
  cursor: pointer
}

.select em:before {
  font-family: icon;
  content: "\f107";
  color: rgba(51,51,51,.3);
  font-style: normal;
  left: -0.6em;
  top: .1em;
  position: relative;
  z-index: -1;
  width: 0
}

.dark .select em:before {
  color: #fff
}

select {
  -moz-appearance: window;
  padding: .8em 2.4em 0.75em 0.9em;
  font-family: inherit;
  margin-right: -0.9em;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  max-width: 17em;
  outline: none;
  border: 1px solid rgba(0,0,0,.1);
  font-size: 90%;
  cursor: pointer
}

.dark select {
  color: #fff
}

select:focus {
  border-color: var(--main);
  outline: 2px solid var(--main)
}

.switch {
  border-bottom: 1px dotted rgba(0,0,0,.1);
  padding: 0.6em 0;
  cursor: pointer;
  display: block
}

.switch:last-child:not(:only-child) {
  border-bottom: 0;
  padding-bottom: 0
}

.switch em {
  font-style: normal;
  top: .2em;
  position: relative
}

.switch input {
  left: -99em;
  position: absolute
}

.switch .toggle {
  -webkit-transition: background .4s;
  transition: background .4s;
  border-radius: 3.6em;
  float: right;
  height: 1.8em;
  width: 4.2em;
  background-color: rgba(51,51,51,.3);
  position: relative;
  display: block
}

.switch .toggle:before {
  font-family: icon;
  content: "\f111";
  left: 3px;
  top: 1px;
  position: absolute;
  -webkit-transition: left .1s;
  transition: left .1s;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff
}

.switch .toggle:active:before {
  -webkit-transform: scale(.95);
  transform: scale(.95)
}

.switch .toggle b {
  display: none
}

.switch :checked + .toggle {
  background-color: #46a546;
  background: var(--success)
}

.switch :checked + .toggle:before {
  left: calc(100% - .95em)
}

.switch :active + span {
  box-shadow: 0 0 0.6em rgba(0,0,0,.6) inset
}

.drop-menu {
  line-height: 1.2;
  position: relative
}

.menu-open {
  white-space: nowrap
}

.menu-open:after {
  left: -.2em;
  top: .1em;
  position: relative;
  font-family: icon;
  content: "\f107";
  margin-left: 0.6em
}

.menu-options {
  box-shadow: 0 .3em 0.9em rgba(51,51,51,.3);
  -webkit-filter: drop-shadow(0 0 .3em rgba(51,51,51,.3));
  filter: drop-shadow(0 0 .3em rgba(51,51,51,.3));
  text-transform: initial;
  letter-spacing: 0;
  font-size: 110%;
  left: 0;
  top: 1.8em;
  position: absolute;
  min-width: 12em;
  opacity: 0;
  background-color: #fff;
  -webkit-transition: all .2s cubic-bezier(.34,1.61,.7,1);
  transition: all .2s cubic-bezier(.34,1.61,.7,1);
  -webkit-transform-origin: 40px -15px;
  transform-origin: 40px -15px;
  -webkit-transform: scale(0);
  transform: scale(0)
}

.menu-options.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1
}

.on-right .menu-options {
  -webkit-transform-origin: 85% -15px;
  transform-origin: 85% -15px;
  left: -5em
}

.menu-option {
  padding: 0.6em 1.2em 0.6em;
  margin: 0 !important;
  text-align: left;
  display: block
}

.menu-option:first-child {
  padding-top: 1.2em
}

.menu-option:first-child:before {
  text-shadow: 0 -.1em 2px rgba(51,51,51,.1);
  left: 1.1em;
  top: -.7em;
  position: absolute;
  font-size: 2em;
  color: #fff;
  font-family: icon;
  content: "\f0d8";
  display: inline;
  width: 1em
}

.on-right .menu-option:first-child:before {
  left: auto;
  right: 0.9em
}

.menu-option:hover {
  color: #fff !important;
  background: var(--main-b)
}

.menu-option:hover:before {
  color: var(--main-b)
}

.menu-option:last-child {
  padding-bottom: 0.9em
}

.menu-options .menu-option {
  color: rgba(0,0,0,.6)
}

#footer .wrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center
}

#footer-cta h2 {
  font-weight: normal;
  line-height: 1.2;
  margin-right: 1.2em
}

.max-800 #footer-cta h2 {
  font-size: 100%;
  margin-right: auto
}

#bottom-navi .wrap {
  align-items: flex-start
}

#bottom-navi footer-info {
  margin-left: auto;
  display: block
}

.max-800 #bottom-navi .wrap {
  display: block
}

.max-800 #bottom-navi .navi {
  margin-bottom: 1.8em
}

#bottom > * {
  line-height: 1
}

#bottom a {
  opacity: .8
}

#bottom a:hover {
  opacity: 1
}

.max-800 #bottom .logo {
  display: none
}

.powered {
  margin-left: 1.2em;
  font-size: 90%
}

#share {
  font-size: 95%;
  text-align: right;
  margin-left: auto
}

#share a {
  text-transform: capitalize;
  margin-left: 1.2em
}

#share a:before {
  font-family: icon;
  margin-right: .3em
}

#header {
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  z-index: 101
}

#header .wrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  font-size: 85%;
  text-align: left
}

#header .right {
  margin-left: auto
}

#header.bordered .wrap {
  border-bottom: 1px solid rgba(0,0,0,.1)
}

#header.bordered.dark .wrap {
  border-color: rgba(255,255,255,.1)
}

#header.transparent {
  background: transparent
}

.max-700 #header #hype {
  display: none
}

#header.minimal .links, #header.minimal #hype {
  display: none
}

#header.minimal .wrap {
  border: 0
}

#hype:hover {
  color: #fff
}

.links {
  white-space: nowrap
}

.links .current {
  opacity: .5;
  cursor: default
}

.all-caps .links {
  font-size: 95%
}

.light .links > a {
  color: rgba(0,0,0,.5)
}

.left a {
  margin-right: 1.2em
}

.right a {
  margin-left: 0.9em
}

#burger {
  font-weight: bold
}

#burger:after {
  top: .05em;
  position: relative;
  font-family: icon;
  content: "\f0c9";
  color: rgba(0,0,0,.5);
  margin-left: 0.6em
}

.dark #burger:after {
  color: rgba(255,255,255,.6)
}

.with-sidebar #burger:after {
  font-family: icon;
  content: "\f105"
}

#user-name .menu-open {
  font-weight: bold
}

#master-logo {
  margin-right: 1.2em
}

#master-logo img {
  max-width: 7em
}

#light-logo {
  display: none
}

.dark #logo-light {
  display: inline
}

.dark #logo-dark {
  display: none
}

.light #logo-light {
  display: none
}

.light #logo-dark {
  display: inline
}

.navi {
  min-width: 10em
}

.navi a {
  opacity: .8;
  padding: .3em 0;
  border: 0;
  font-size: 90%;
  display: block
}

.navi a:hover {
  opcaity: 1
}

.navi a:last-child {
  width: auto
}

.navi a:hover {
  opacity: .5;
  color: inherit
}

.navi a.active {
  opacity: .3;
  cursor: default
}

#close-sidebar {
  font-size: 230%;
  text-align: right;
  line-height: 1;
  font-weight: 100
}

#close-sidebar a:hover {
  opacity: .7
}

body {
  -webkit-transition: left .4s;
  transition: left .4s;
  left: 0;
  position: relative
}

body.with-sidebar {
  cursor: e-resize;
  left: -18rem
}

#sidebar {
  right: -18rem;
  top: 0;
  position: absolute;
  box-shadow: 0 0 0.6em #000 inset;
  min-height: 100vh;
  -webkit-transition: right .4s;
  transition: right .4s;
  padding: 0.9em 1.2em 0 2.4em;
  cursor: default;
  font-size: 95%;
  height: 18rem;
  width: 18rem;
  display: block
}

.with-sidebar #sidebar {
  right: -18rem
}

#sidebar .navi {
  margin-top: 1.8em
}

#sidebar .navi a {
  padding: .2em 0
}

#user-profile .avatar {
  width: 3.6em;
  margin-right: 0.9em
}

#user-profile .navi {
  min-width: inherit;
  margin-top: -.3em
}

.list {
  align-items: baseline
}

.min-800 .pair .item {
  width: 47%
}

.min-800 .apart .item {
  width: 44%
}

.min-800 .item-mid {
  margin-left: 2.4em;
  margin-right: 2.4em
}

.min-800 .multi {
  margin-left: -0.9em;
  margin-right: -0.9em
}

.min-800 .multi .item {
  -webkit-flex: 1;
  flex: 1;
  margin: 0 0.9em
}

.max-800 .item {
  margin-bottom: 1.8em
}

.min-800 .media {
  align-items: center
}

.min-800 .media > * {
  width: 47%
}

.min-1200 .spread .figure:first-child {
  min-width: 52em;
  margin-left: -22em;
  margin-right: 5%
}

.min-1200 .reversed.spread .figure:first-child {
  margin-right: -22em;
  margin-left: 5%
}

.max-800 .media {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse
}

.max-800 .media .figure {
  margin-bottom: 1.8em
}

.max-800 .media .copy {
  width: 100%;
  margin-bottom: 1.8em
}

.list, .media {
  justify-content: space-between;
  margin: 1.8em 0;
  text-align: left
}

.min-800 .list, .min-800 .media {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.list.reversed, .media.reversed {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.list.boxed, .media.boxed {
  padding: 1.8em
}

.region {
  padding: 1.2em;
  margin-bottom: 1.2em;
  display: block
}

.columned h1, .columned h1 + p {
  -webkit-column-span: all;
  column-span: all;
  text-align: center;
  margin-left: auto;
  margin-right: auto
}

.columned .wrap {
  max-width: 55em;
  break-inside: avoid;
  -webkit-column-width: 12em;
  column-width: 12em;
  -webkit-column-gap: 3em;
  column-gap: 3em
}

.columned q.pullquote {
  margin: 1.8em 0;
  position: static;
  float: none
}

.columned q.pullquote:before {
  margin: 0;
  top: .4em
}

.min-1000 .two-columns .wrap {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2
}

.max-1000 .two-columns .wrap {
  max-width: 25em;
  margin: 0 auto
}

.cols > * {
  display: inline-block;
  width: 30%
}

.min-700 .hero {
  font-size: 120%
}

.hero h1 {
  font-size: 250%;
  margin-top: 0
}

.hero .button {
  border-width: 2px
}

.cover {
  min-height: 100vh
}

.title-bg h1, .title-bg h1 + p {
  box-decoration-break: clone;
  padding: .2em .6rem;
  background-color: rgba(0,0,0,.8);
  opacity: 1
}

.min-700 .title-bg h1, .min-700 .title-bg h1 + p {
  line-height: 1.6;
  display: inline
}

.section0.title-bg h1 + p {
  max-width: 33em;
  display: inline-block
}

.section {
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  width: 100%
}

.trimmed .wrap {
  padding-top: 0;
  padding-bottom: 0
}

.trimmed .copy :last-child, .trimmed .wrap > * {
  margin-bottom: 0
}

.trimmed img {
  display: block
}

.line:after {
  content: "";
  margin: 3em auto 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  width: 30%;
  display: block
}

.borders {
  border: 1px solid rgba(0,0,0,.1);
  border-width: 1px 0
}

.border-top {
  border-top: 1px solid rgba(0,0,0,.1)
}

.border-bottom {
  border-bottom: 1px solid rgba(0,0,0,.1)
}

#header, footer section, .section {
  padding: .9rem
}

.section {
  padding-top: 4.2em;
  padding-bottom: 4.8em
}

.section:first-child {
  padding-top: 8rem
}

.section:last-child {
  padding-bottom: 8rem
}

.section.hero {
  padding-top: calc(8rem + 4%);
  padding-bottom: 14%
}

.section.cover {
  padding-top: 18%
}

.taller {
  padding-top: 4%;
  padding-bottom: 4%
}

.taller-top {
  padding-top: 4%
}

.taller-bottom {
  padding-bottom: 4%
}

.tall {
  padding-top: 7%;
  padding-bottom: 9%
}

.tall-top {
  padding-top: 7%
}

.tall-bottom {
  padding-bottom: 7%
}

.thin {
  padding-top: 0;
  padding-bottom: 0
}

.thin-top {
  padding-top: 0
}

.thin-bottom {
  padding-bottom: 0
}

.thinner {
  padding-top: 1.2em;
  padding-bottom: 1.2em
}

.padding {
  padding: 0.9em
}

.padding2 {
  padding: 1.2em
}

.top2 {
  margin-top: 1.2em
}

.top3 {
  margin-top: 1.8em
}

.bottom2 {
  margin-bottom: 1.2em
}

.bottom3 {
  margin-bottom: 1.8em
}

.min-800 .split {
  background-image: linear-gradient(to right, #fff 50%, transparent 50%)
}

.min-800 .split-left {
  background-image: linear-gradient(to left, #fff 50%, transparent 50%)
}

.min-800 .split-light {
  background-image: linear-gradient(to right, transparent 50%, rgba(255,255,255,.2) 50%)
}

.min-800 .split-dark {
  background-image: linear-gradient(to right, transparent 50%, rgba(51,51,51,.3) 50%)
}

.min-1200 .split .wrap {
  padding-left: 1.8em;
  padding-right: 1.8em
}

.min-1200 .split #header .wrap {
  max-width: 100%
}

.min-1200 .split #main {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.min-1200 .split .section {
  min-height: 100vh
}

.min-1200 .split .section1 {
  padding-top: 6em
}

.min-1200 .split #user-name {
  color: #fff
}

.max-1200 .split main .wrap {
  max-width: 33em
}

.min-800 .split-12 > :first-child {
  width: 30%
}

.min-800 .split-12 > :last-child {
  width: 65%
}

.min-800 .split-21 > :first-child {
  width: 65%
}

.min-800 .split-21 > :last-child {
  width: 30%
}

.min-800 .split-13 > :first-child {
  width: 25%
}

.min-800 .split-13 > :last-child {
  width: 70%
}

.wrap {
  max-width: 60rem;
  margin: 0 auto
}

.narrow .wrap, .longform .wrap {
  max-width: 38rem
}

.narrower .wrap {
  max-width: 42rem
}

.wide .wrap {
  max-width: 70rem
}

.full-size .wrap {
  max-width: 80rem
}

.max-800 main .wrap {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto
}

figure {
  margin: 0
}

.figure {
  position: relative;
  display: inline-block;
  max-width: 100%;
  -webkit-transition: transform .4s, opacity .4s;
  transition: transform .4s, opacity .4s;
  margin: 0
}

.figure.loading {
  cursor: wait;
  opacity: .7
}

.figure.active {
  z-index: 200
}

.figure.active figcaption {
  margin-left: .3em
}

.min-1000 .figure.wider img {
  max-width: initial;
  width: calc(100% + 8em)
}

.min-1000 .figure.wide {
  margin-left: -5em;
  margin-bottom: 2.4em
}

.min-1000 .figure.wide img {
  max-width: initial;
  width: calc(100% + 13em)
}

.min-1250 .outset {
  margin: 0.6em 2.4em 0.6em -14em;
  float: left
}

.min-1250 .inset {
  float: left;
  max-width: 50%;
  margin: 1.2em 3em 0 0
}

figcaption {
  margin-top: 0.6em;
  font-size: 90%
}

.min-1100 figcaption {
  left: -10em;
  top: 0;
  position: absolute;
  width: 8em;
  text-align: right;
  margin-top: 0
}

.min-1100 figcaption:before {
  margin: 0 0 0.9em 66%;
  content: "";
  border-top: 1px solid rgba(0,0,0,.1);
  width: 33%;
  display: block
}

.dark figcaption {
  color: rgba(255,255,255,.8)
}

.dark figcaption:before {
  border-color: rgba(255,255,255,.4)
}

figcaption .avatar {
  width: 3.6em
}

figcaption a {
  font-style: normal
}

.outset figcaption, .active figcaption, .wide figcaption {
  position: static;
  width: auto;
  text-align: inherit;
  margin-top: 0.6em
}

.outset figcaption:before, .active figcaption:before, .wide figcaption:before {
  display: none
}

.item-last figcaption {
  left: auto;
  right: -9em;
  text-align: left
}

.item-last figcaption:before {
  margin-left: 0
}

.item-last .outset {
  margin: 0 -9em 0.9em 0.9em;
  float: right
}

.item-last .outset figcaption {
  text-align: right
}

.gist .info {
  font-size: 80%
}

.gist .info:after {
  font-family: icon;
  content: "\f08e";
  font-size: 80%;
  color: rgba(255,255,255,.6);
  margin-left: .3em
}

.multi .figure {
  float: none;
  margin: 0
}

.multi figcaption {
  position: static;
  width: 100%;
  text-align: left;
  margin-top: -.3em
}

.multi figcaption:before {
  border: 0
}

.note {
  border-left: 0.6em solid #46a546;
  border-color: var(--main);
  padding: 0.6em 0.9em;
  color: #262626;
  margin: 1.2em 0;
  background-color: rgba(51,51,51,.05);
  max-width: 35em;
  display: block
}

.dark .note {
  background-color: rgba(255,255,255,.07)
}

.warn {
  border-left-color: #f89406
}

.alarm {
  border-left-color: #bd0000
}

.info-mask {
  -webkit-transition: transform .5s cubic-bezier(.2, 1.8, .6, 1);
  transition: transform .5s cubic-bezier(.2, 1.8, .6, 1);
  -webkit-transform: scale(0);
  transform: scale(0);
  left: 0;
  top: 2em;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 101
}

.info-mask.active {
  -webkit-transform: scale(1);
  transform: scale(1)
}

.info-box {
  border-left: 0.6em solid #46a546;
  box-shadow: 0 0 0.6em rgba(0,0,0,.5);
  max-width: 25em;
  margin: 0 auto;
  text-align: left;
  display: inline-block;
  padding: 0.6em 1.2em;
  background-color: #fff
}

a {
  text-decoration: none;
  color: inherit;
  outline: 0;
  cursor: pointer
}

main a {
  border-bottom: 1px solid #1c9DE3;
  border-bottom-color: var(--main)
}

main a:focus {
  outline: thin dotted
}

.action {
  font-size: .9rem;
  color: #1c9DE3;
  border: 0
}

.action:hover {
  text-decoration: underline
}

.permlink {
  cursor: pointer
}

.permlink:hover:after {
  content: "#";
  opacity: .3;
  margin-left: .3em;
  font-size: 90%;
  position: absolute
}

q {
  font-size: 140%;
  line-height: 1.4
}

q:before, q:after {
  color: var(--main);
  font-family: georgia;
  left: -.3em;
  top: .3em;
  position: relative;
  font-size: 140%;
  line-height: .5
}

.min-550 q:before {
  margin-left: -.4em
}

.author {
  font-style: normal;
  font-size: 110%;
  margin-top: 0.9em;
  display: block
}

.quote {
  font-style: italic;
  margin: 1.2em 0
}

.min-750 .quote {
  border-left: .3em solid rgba(0,0,0,.6);
  border-color: var(--main);
  margin-left: -1.8em;
  padding-left: 1.8em
}

.pullquote {
  border-top: .3em solid #262626;
  margin: 1.8em 0
}

.min-900 .pullquote {
  margin: 3em -5em 0 3em;
  top: -2.6em;
  position: relative;
  width: 20rem;
  float: right
}

.min-900 .pullquote.left {
  float: left;
  margin-left: -5em;
  margin-right: 1.8em
}

.pullquote q {
  font-weight: bold
}

.pullquote q:before {
  font-size: 250%
}

.min-600 .pullquote q {
  margin-left: -0.6em
}

.max-600 .pullquote q:before {
  top: 1.8em
}

.linequote {
  font-style: italic;
  margin: 2.4em 0;
  display: block
}

.min-900 .linequote {
  margin: 1.8em -3.5em;
  text-align: center
}

.quoted {
  text-indent: -.5em
}

.syntax {
  margin: 1.2em 0;
  display: block
}

pre, code {
  font-size: 85%;
  font-weight: normal;
  color: var(--main);
  text-transform: initial;
  background-color: #fff
}

pre b, code b {
  font-weight: normal
}

pre {
  margin: 0;
  padding: 0.6em 0.9em;
  width: 100%;
  overflow: scroll
}

code {
  padding: .15em .3em;
  background-color: rgba(51,51,51,.1);
  font-size: 80%
}

.char {
  color: #586e75
}

.comm {
  color: #839496
}

.accent {
  color: #b58900;
  font-weight: bold
}

.def {
  color: var(--alt);
  font-weight: bold
}

.keywd {
  color: #dc322f
}

.assign {
  color: #d33682
}

.uppr {
  color: #6c71c4;
  font-weight: bold
}

.numb {
  color: #2aa198
}

.str {
  color: #859900
}

body {
  font-size: 18px;
  line-height: 1.2;
  color: rgba(0,0,0,.8)
}

main {
  line-height: 1.5
}

h1, h2, h3 {
  margin: 1.8em 0 .2rem;
  line-height: 1.1
}

h1:first-child, h2:first-child, h3:first-child {
  margin-top: 0
}

h1 {
  font-size: 200%
}

h1 +p {
  font-size: 130%
}

h2 {
  font-size: 130%
}

h3 {
  font-size: 110%;
  line-height: 1.3
}

h4, h5 {
  font-size: 100%;
  margin: 0 0 .2rem
}

p, li {
  margin: 0 0 0.6em
}

p:last-child, li:last-child {
  margin-bottom: 0
}

ol, ul {
  padding: 0;
  margin: 0.9em 0 1.2em 1.2em
}

h2 + ol, h2 + ul, h3 + ol, h3 + ul {
  margin-top: 0.6em
}

ol li {
  list-style-type: decimal
}

.facebook:before {
  content: "\f082"
}

.facebook:before {
  color: #255BBF
}

.twitter:before {
  content: "\f081"
}

.twitter:before {
  color: #55ACEE
}

.github:before {
  content: "\f09b"
}

.rss:before {
  content: "\f143"
}

.rss:before {
  color: #f89406
}

.overlaid {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

body.is-overlaid {
  overflow: hidden
}

#mask {
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  overflow-y: scroll;
  left: 0;
  top: -999em;
  position: fixed;
  text-align: center;
  z-index: 101;
  height: 100%;
  width: 100%;
  opacity: 0
}

#mask section {
  padding: 0;
  margin: 0
}

#mask.blurred {
  background-color: rgba(0,0,0,.5)
}

#mask.blurred section {
  -webkit-transition: none;
  transition: none
}

#mask.active {
  opacity: 1;
  top: 0
}

#mask.dark > .close {
  color: #fff
}

#mask.dark > .close:hover {
  background-color: rgba(255,255,255,.2);
  color: #fff
}

#mask.dark > .close:active {
  background-color: #262626
}

.block #mask {
  z-index: 3
}

.esc-close {
  text-align: center;
  color: rgba(0,0,0,.6);
  right: 0.6em;
  top: 0.9em;
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  height: 3.6em;
  width: 3.6em;
  border: 0
}

.esc-close:hover {
  background-color: rgba(51,51,51,.1)
}

.esc-close:active {
  color: #fff;
  background-color: rgba(0,0,0,.5)
}

.esc-close span {
  font-size: 260%;
  line-height: 1;
  margin-bottom: -.3em;
  display: block
}

.esc-close strong {
  font-size: 80%;
  opacity: .6
}

.max-500 .esc-close {
  font-size: 80%
}

.max-500 .esc-close strong {
  display: none
}

#message {
  background-color: rgba(0,0,0,.8);
  color: #fff
}

#message .tag {
  margin-right: 0.6em;
  font-weight: bold
}

#message .wrap {
  padding: 0.6em 0.9em;
  font-size: 80%
}

#message .action {
  line-height: 1.7;
  float: right;
  color: #1c9DE3
}

.tag {
  height: 1.6em;
  line-height: 1.6em;
  font-size: 90%;
  color: #fff;
  padding: 0 0.9em;
  margin-right: .2em;
  display: inline-block;
  white-space: nowrap
}

.tag .notify {
  color: rgba(0,0,0,.8);
  background-color: #FFEB3B
}

.tag .notify:before {
  content: "\f06a"
}

.tag .error {
  background-color: #bd0000
}

.tag .error:before {
  content: "\f06a"
}

.tag .warning {
  background-color: #f89406
}

.tag .warning:before {
  content: "\f0a2"
}

a.tag {
  display: inline-block
}

a.tag:hover {
  background-image: linear-gradient(to bottom, rgba(51,51,51,.05),rgba(51,51,51,.05) 100%)
}

a.tag:active {
  box-shadow: inset 0 .2em 0 rgba(51,51,51,.3)
}

.ball {
  display: inline-block;
  color: #fff;
  line-height: 1;
  padding: .3em 0.6em;
  top: -.1em;
  position: relative;
  border-radius: 50%;
  background-color: #1c9DE3
}

.ball:empty {
  padding: 0;
  height: 0.9em;
  width: 0.9em;
  top: .1em
}

.avatar {
  max-width: 8em
}

mark {
  background-color: #ffdd66;
  padding: 0 .3em;
  color: rgba(0,0,0,.8)
}

hr {
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  margin: 1.2em 0 1.8em
}

.dark hr {
  border-color: rgba(255,255,255,.2)
}

hr.narrow {
  margin-left: auto;
  margin-right: auto;
  width: 25%
}

.card {
  box-shadow: 0 .1em .3em rgba(51,51,51,.3)
}

.card:not(.dark) {
  background-color: #fff
}

.card > header:not(.dark) {
  padding: 0.9em 1.2em;
  background-color: #f9f9f9
}

.card > header:not(.dark) h2, .card > header:not(.dark) h3 {
  margin: 0
}

.card header {
  justify-content: space-between;
  align-items: center;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.card h2 {
  font-weight: normal;
  margin: 0
}

.card main, .card .content {
  padding: 1.2em;
  display: block
}

.card.dark > header {
  background: inherit
}

pre, code {
  font-family: Consolas, Monaco, "Lucida Console", "Andale Mono", monospace
}

.dialog {
  box-shadow: 0 0 3.6em rgba(0,0,0,.8);
  margin-top: 6%;
  text-align: left;
  display: inline-block;
  min-width: 24em;
  max-width: 30em;
  position: relative
}

.dialog .desc {
  font-size: 100%;
  line-height: 1.6;
  margin-bottom: 0.6em
}

.dialog > * {
  padding: 0.9em 1.2em;
  background-color: #fff
}

.dialog h3 {
  font-size: 110%;
  line-height: 1;
  margin: 0;
  top: .15em;
  position: relative;
  width: 80%;
  opacity: .8
}

.dialog .dialog-prompt {
  padding-bottom: 0;
  padding-top: 0;
  margin-bottom: -0.9em;
  position: relative
}

.dialog.shake {
  -webkit-animation: shake .4s linear;
  animation: shake .4s linear
}

.dialog .msg {
  bottom: 107%
}

.dialog .confirm {
  top: .3em;
  position: relative;
  font-weight: bold;
  cursor: pointer
}

.dialog footer {
  text-align: right
}

.dialog button {
  font-size: 90%
}

.max-550 .dialog {
  overflow: auto;
  min-width: 100%;
  max-width: 100%;
  margin: 0
}

.min-550 .dialog-border .dialog {
  border: 0.6em solid rgba(51,51,51,.3)
}

.dialog:empty {
  display: none
}

.close {
  font-family: arial;
  font-size: 200%;
  line-height: .65;
  color: rgba(0,0,0,.5);
  float: right;
  border: 0
}

.close:hover {
  color: #262626
}

.gallery {
  white-space: nowrap;
  margin: 1.2em 0
}

.min-3000 .gallery {
  margin: 1.2em -5em
}

.gallery li, .gallery .figure {
  margin: 0 .05em;
  width: 33.3%
}

.gallery.has-2 li {
  width: 50%
}

.gallery .figure {
  width: 100%
}

.gallery figcaption {
  display: none
}

.gallery img {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.gallery.active img {
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  cursor: zoom-out;
}

.gallery .active figcaption {
  display: block
}

.multicol section:first-child .gallery {
  margin: 1.2em;
  margin-left: -4.8em
}

.multicol section:last-child .gallery {
  margin: 1.2em;
  margin-right: -4.8em
}

.progress-bar {
  margin-bottom: 0.9em;
  display: block
}

.progress-bar b {
  font-size: 80%
}

.progress {
  overflow: hidden;
  height: .3em;
  margin-bottom: .2em;
  position: relative;
  background-color: #eee
}

.bar {
  height: 100%;
  background-color: #1c9DE3;
  -webkit-transition: width 1.1s linear;
  transition: width 1.1s linear
}

.prog-amount {
  float: right;
  top: .1em;
  position: relative
}

.prog-title {
  font-size: 80%
}

.dark .progress {
  background-color: #555
}

.tabs {
  border-bottom: 1px solid rgba(0,0,0,.1);
  width: 100%;
  margin-bottom: 1.2em;
  display: block
}

.tab {
  font-size: 90%;
  text-align: center;
  color: rgba(0,0,0,.5);
  display: inline-block;
  padding: 0.6em 1.2em;
  top: 2px;
  position: relative;
  border: 1px solid rgba(0,0,0,.1);
  border-width: 1px 1px 0 0;
  background-color: rgba(51,51,51,.05)
}

.tab:first-child {
  border-top-left-radius: 3px;
  border-left-width: 1px
}

.tab:last-child {
  border-top-right-radius: 3px
}

.tab.active {
  color: #262626;
  font-weight: bold;
  background-color: #fff
}

.min-600 .tab {
  min-width: 8em
}

.tab:not(.active):hover {
  cursor: pointer;
  color: #000
}

.dark .tabs {
  border-bottom: 1px solid rgba(255,255,255,.2)
}

.dark .tab {
  color: rgba(255,255,255,.6);
  border-color: rgba(255,255,255,.2)
}

.dark .tab:hover, .dark .tab.active {
  color: #fff
}

.dark .tab.active {
  border-bottom: 3px solid #333;
  background: transparent
}

.has-video {
  position: relative;
  min-height: 600px
}

.video-tag {
  overflow: hidden;
  left: 0;
  top: 0;
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0
}

.video-tag video {
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #fff;
  max-width: 100%;
  width: 100%
}

.play.button:before {
  font-family: icon;
  content: "\f144";
  font-size: 90%;
  color: rgba(0,0,0,.5)
}

.play.button.secondary:before {
  color: #fff
}

.video {
  text-align: center;
  cursor: pointer
}

.video iframe {
  left: 0;
  top: 0;
  position: absolute;
  border: 0;
  z-index: 1
}

.video.loading {
  background-color: rgba(0,0,0,.5)
}

.video:after {
  font-size: 100px;
  color: rgba(255,255,255,.6);
  -webkit-transition: transform .1s;
  transition: transform .1s;
  font-family: icon;
  content: "\f144";
  left: 50%;
  top: 26%;
  position: absolute;
  margin-left: -44px
}

.youtube.video:after {
  font-family: icon;
  content: "\f16a";
  margin-left: -55px
}

.video:hover:after {
  color: #fff
}

.video:active:after {
  -webkit-transform: scale(.95);
  transform: scale(.95)
}

.video.playing {
  background: #000 !important
}

.video.playing:before, .video.playing:after {
  display: none
}

.video.playing img {
  opacity: 0;
  z-index: -1
}

main a:not(.button) {
  border-bottom-color: rgba(51,51,51,.3)
}

main a:not(.button):hover {
  border-bottom-color: var(--main);
  color: #262626
}

.light, .content.light {
  color: rgba(0,0,0,.6)
}

.light h1, .content.light h1, .light h2, .content.light h2, .light h3, .content.light h3, .light h4, .content.light h4, .light strong, .content.light strong, .light .ui, .content.light .ui, .light q, .content.light q {
  color: rgba(0,0,0,.8)
}

.colored {
  color: var(--gray-a)
}

.colored h1, .colored h2, .colored h3, .colored q {
  color: var(--main-c)
}

.css-variables ::selection {
  background: var(--main);
  color: #fff
}

.dark {
  color: rgba(255,255,255,.6)
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark strong, .dark .ui {
  color: #fff
}

.dark a, .dark h1 + p, .dark q {
  color: rgba(255,255,255,.8)
}

.dark a:not(.button) {
  border-bottom-color: rgba(255,255,255,.2)
}

.dark a:not(.button):hover {
  color: #fff;
  border-color: rgba(255,255,255,.8)
}

.desc, .subtle {
  color: rgba(0,0,0,.6);
  font-size: 90%
}

.desc strong, .subtle strong {
  color: #000
}

.dark .desc, .dark .subtle {
  color: rgba(255,255,255,.6)
}

.subtle {
  font-size: 80%
}

.lighten, .darken, .linear, .linear-up, .linear-dark, .diagonal, .diagonal-dark, .radial, .radial-dark, .radial-left, .radial-right {
  position: relative
}

.lighten:after, .darken:after, .linear:after, .linear-up:after, .linear-dark:after, .diagonal:after, .diagonal-dark:after, .radial:after, .radial-dark:after, .radial-left:after, .radial-right:after {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  content: ""
}

.lighten > *, .darken > *, .linear > *, .linear-up > *, .linear-dark > *, .diagonal > *, .diagonal-dark > *, .radial > *, .radial-dark > *, .radial-left > *, .radial-right > * {
  position: relative;
  z-index: 1
}

.lighten:after {
  background-color: rgba(255,255,255,.4)
}

.darken:after {
  background-color: rgba(0,0,0,.5)
}

.linear:after {
  background-image: linear-gradient(rgba(255,255,255,.1) 15%, rgba(0,0,0,.5) 80%)
}

.linear-up:after {
  background-image: linear-gradient(rgba(0,0,0,.8) 5%, transparent 30%)
}

.linear-dark:after {
  background-image: linear-gradient(rgba(0,0,0,.8) 5%, transparent 100%)
}

.diagonal:after {
  background-image: linear-gradient(to bottom right, rgba(255,255,255,.2), rgba(0,0,0,.5) 90%)
}

.diagonal-dark:after {
  background-image: linear-gradient(to bottom right, rgba(0,0,0,.6) 10%, rgba(255,255,255,.2))
}

.radial:after {
  background-image: radial-gradient(65% 100%, rgba(255,255,255,.2), rgba(0,0,0,.6))
}

.radial-dark:after {
  background-image: radial-gradient(50% 80%, rgba(255,255,255,.07), rgba(0,0,0,.8))
}

.radial-left:after {
  background-image: radial-gradient(at 20%, rgba(255,255,255,.2), rgba(0,0,0,.6))
}

.radial-right:after {
  background-image: radial-gradient(at 80%, rgba(255,255,255,.2), rgba(0,0,0,.6))
}

.blurred:after {
  -webkit-filter: blur(5px);
  filter: blur(5px)
}

body .white-bg {
  background-color: #fff
}

.bold {
  font-weight: bold
}

.hidden {
  display: none
}

.left {
  text-align: left
}

.center {
  text-align: center
}

.right {
  text-align: right
}

.smaller {
  font-size: 90%
}

.small {
  font-size: 80%
}

.smallest {
  font-size: 70%
}

.bigger {
  font-size: 110%
}

.big {
  font-size: 120%
}

.biggest {
  font-size: 130%
}

.subtle {
  font-size: 80%;
  font-weight: normal;
  color: rgba(0,0,0,.5);
  text-transform: initial
}

.btn-round .button {
  border-radius: .2rem
}

.btn-round-max .button {
  border-radius: 5em
}

.box-round .box, .box-round .boxed, .box-round .tag, .box-round select {
  border-radius: .2rem
}

.box-round .box header {
  border-radius: .2rem .2rem 0 0
}

.box-round .box footer {
  border-radius: 0 0 .2rem .2rem
}

.box-round-max .box, .box-round-max .boxed, .box-round-max .tag, .box-round-max select {
  border-radius: .4rem
}

.box-round-max .box header {
  border-radius: .4rem .4rem 0 0
}

.box-round-max .box footer {
  border-radius: 0 0 .4rem .4rem
}

.avatar-round .avatar, .avatar-round .avatar img {
  border-radius: .2rem
}

.avatar-round-max .avatar, .avatar-round-max .avatar img {
  border-radius: 5em
}

@media screen and (max-device-width: 1000px) {
  html {
    -webkit-text-size-adjust: none
  }

}

@media print {
  h2, h3 {
    page-break-after: avoid;
    page-break-inside: avoid
  }

  #nav, #hype, #subnav, #footer {
    display: none
  }

  .overlaid, .close, .esc-close, .print {
    display: none
  }

  #mask {
    background-color: #fff !important
  }

  .dialog {
    box-shadow: 0 0 0 rgba(0,0,0,.25)
  }

}

@media print and (color) {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }

}

@keyframes shake {
  0 {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  12.5% {
    -webkit-transform: translateX(-6px) rotateY(-5deg);
    transform: translateX(-6px) rotateY(-5deg)
  }

  37.5% {
    -webkit-transform: translateX(5px) rotateY(4deg);
    transform: translateX(5px) rotateY(4deg)
  }

  62.5% {
    -webkit-transform: translateX(-3px) rotateY(-2deg);
    transform: translateX(-3px) rotateY(-2deg)
  }

  87.5% {
    -webkit-transform: translateX(2px) rotateY(1deg);
    transform: translateX(2px) rotateY(1deg)
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

}