@charset "UTF-8";
:root {
  --strawberry-100: #ff8c82;
  --strawberry-300: #ed5353;
  --strawberry-500: #c6262e;
  --strawberry-700: #a10705;
  --strawberry-900: #7a0000;
  --orange-100: #ffc27d;
  --orange-300: #ffa154;
  --orange-500: #f37329;
  --orange-700: #cc3b02;
  --orange-900: #a62100;
  --banana-100: #fff394;
  --banana-300: #ffe16b;
  --banana-500: #f9c440;
  --banana-700: #d48e15;
  --banana-900: #ad5f00;
  --lime-100: #d1ff82;
  --lime-300: #9bdb4d;
  --lime-500: #68b723;
  --lime-700: #3a9104;
  --lime-900: #206b00;
  --blueberry-100: #8cd5ff;
  --blueberry-300: #64baff;
  --blueberry-500: #3689e6;
  --blueberry-700: #0d52bf;
  --blueberry-900: #002e99;
  --grape-100: #e4c6fa;
  --grape-300: #cd9ef7;
  --grape-500: #a56de2;
  --grape-700: #7239b3;
  --grape-900: #452981;
  --cocoa-100: #a3907c;
  --cocoa-300: #8a715e;
  --cocoa-500: #715344;
  --cocoa-700: #57392d;
  --cocoa-900: #3d211b;
  --silver-100: #fafafa;
  --silver-300: #d4d4d4;
  --silver-500: #abacae;
  --silver-700: #7e8087;
  --silver-900: #555761;
  --slate-100: #95a3ab;
  --slate-300: #667885;
  --slate-500: #485a6c;
  --slate-700: #273445;
  --slate-900: #0e141f;
  --black-100: #666666;
  --black-300: #4d4d4d;
  --black-500: #333333;
  --black-700: #1a1a1a;
  --black-900: #000000;
  --solarized-base01: #586e75;
  --solarized-base02: #073642;
  --solarized-base03: #002b36;
  --solarized-base1: #93a1a1;
  --solarized-base2: #eee8d5;
  --solarized-base3: #fdf6e3;
  --solarized-blue: #268bd2;
  --solarized-cyan: #2aa198;
  --solarized-green: #859900;
  --solarized-orange: #cb4b16;
  --solarized-red: #dc322f;
  --solarized-yellow: #b58900;
  --tle-purple:#630460;
  --tle-red:#ED1852;
  --tle-yellow:#FCCFB4;
  --ddc-surface: #f9f9f7;
  --ddc-panel: #f0f0ed;
  --ddc-panel-2: #e5e5e2;
  --ddc-line: #c4c4c0;
  --ddc-line-strong: #85858b;
  --ddc-ink: #1e1e22;
  --ddc-muted: #5f5f66;
  --ddc-head: #222226;
  --ddc-on-head: #fafaf8;
  --ddc-accent: #c81a22;
  --ddc-accent-lt: #f45454;
  --ddc-chamfer: 14px;
  --bg-color: var(--ddc-surface);
  --fg-color: var(--ddc-ink);
  --accent-color: var(--ddc-accent);
  --header-bg-color: var(--ddc-head);
  --header-fg-color: var(--ddc-on-head);
  --secondary-bg-color: var(--ddc-panel);
  --secondary-fg-color: var(--ddc-muted);
  --warning-bg-color: var(--ddc-panel-2);
  --warning-fg-color: var(--ddc-ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ddc-surface: #262626;
    --ddc-panel: #303030;
    --ddc-panel-2: #3b3b3b;
    --ddc-line: #5a5a5a;
    --ddc-line-strong: #8c8c90;
    --ddc-ink: #ffffff;
    --ddc-muted: #bdbdc0;
    --ddc-head: #141416;
    --ddc-accent: #f57373;
    --bg-color: var(--ddc-surface);
    --fg-color: var(--ddc-ink);
    --accent-color: var(--ddc-accent);
    --secondary-bg-color: var(--ddc-panel);
    --secondary-fg-color: var(--ddc-muted);
  }
}
:root {
  --page-width: 60rem;
  --content-width: 40rem;
}

body > section {
  margin: 0 auto;
  max-width: var(--page-width);
  padding: 0 1rem;
}

body > footer {
  background-color: var(--secondary-bg-color);
  display: flex;
  flex-flow: wrap-reverse;
  justify-content: space-between;
  overflow-x: auto;
  padding: 0 1rem;
}
body > footer ul {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
body > footer li {
  display: inline-block;
  list-style: none;
  vertical-align: middle;
}
body > footer a {
  display: inline-block;
  opacity: 1;
  padding: 0 0.4rem;
  text-decoration: none;
}
body > footer a,
body > footer p {
  color: var(--secondary-fg-color);
  font-family: var(--ui-font);
  font-size: 0.6rem;
  line-height: 3em;
  margin: 0;
}

article {
  margin-bottom: 4rem;
}
article p,
article ul,
article ol,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-width);
}
article img,
article video {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
article > table {
  font-family: var(--ui-font);
  margin: 2em auto;
  max-width: 100%;
}
article > table th,
article > table td {
  padding: 0 0.5rem;
}
article .thanks .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.75em -1.5em;
}
article .thanks .links a {
  margin: 0.75em 1.5em;
}
article .thanks .links svg {
  color: var(--fg-color);
  height: 1em;
}
article .thanks .links img {
  display: block;
  height: 40px;
  width: 40px;
  object-fit: contain;
}

hr {
  border: 0;
  margin: 3em auto;
  max-width: 50%;
}
hr::before {
  content: "...";
  display: block;
  font-weight: bold;
  letter-spacing: 1em;
  text-align: center;
}

.license {
  display: block;
  font-family: var(--ui-font);
  font-size: 0.75rem;
  margin: 0 auto;
  max-width: var(--content-width);
  text-align: center;
}
.license a,
.license svg {
  color: var(--secondary-fg-color);
  vertical-align: middle;
}
.license a {
  text-decoration: none;
}
.license a:hover {
  text-decoration: underline;
}
.license svg {
  height: 1.25em;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.up-next {
  margin: 8rem auto 0;
}

aside.outdated {
  background: var(--warning-bg-color);
  bottom: 0;
  color: var(--warning-fg-color);
  display: block;
  font-family: var(--ui-font);
  font-size: 0.8rem;
  left: 50%;
  opacity: 0.8;
  padding: 0.5em 1em;
  position: relative;
  text-align: center;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 1;
}

.sponsor {
  margin-top: 2rem;
}

.constrained {
  max-width: var(--content-width);
}

:root {
  --ui-font: Inter, "Open Sans", "Noto Sans", "Roboto", "Droid Sans", sans-serif;
  --copy-font: Inter, "Open Sans", "Noto Sans", "Roboto", "Droid Sans", sans-serif;
  --heading-font: Raleway, Inter, var(--ui-font);
}

html {
  font-family: var(--copy-font);
  font-size: 5.625vw;
  font-weight: 400;
}
@media (min-width: 320px) {
  html {
    font-size: 18px;
  }
}
@media (min-width: 1024px) {
  html {
    font-size: 20px;
  }
}
@media print {
  html {
    font-size: 14px;
  }
}

a {
  color: var(--accent-color);
  opacity: 0.8;
  text-decoration-skip: ink;
  transition: opacity 250ms ease;
}
a:hover, a:focus {
  opacity: 1;
}

article {
  line-height: 1.75em;
}
article p,
article ul,
article ol {
  margin-top: 0.5em;
  margin-bottom: 2em;
}
article li {
  padding-left: 0.25em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  line-height: 1.2em;
  margin-top: 2em;
  margin-bottom: 0;
}

h1 {
  line-height: 1em;
}

h3,
h4,
h5 {
  opacity: 0.8;
}

h6 {
  opacity: 0.67;
}

header h1 {
  font-size: 2em;
  margin-top: 1em;
}

header h1 + h2 {
  font-family: var(--ui-font);
  font-size: 1.2rem;
  font-weight: normal;
  margin-top: 0.25em;
  opacity: 0.5;
}

header h2 {
  font-size: 1.5em;
  margin-bottom: 1em;
}

header h2 + h3 {
  font-family: var(--ui-font);
  font-size: 0.9rem;
  font-weight: normal;
  margin-top: -1.5em;
  margin-bottom: 1em;
  opacity: 0.5;
}

blockquote {
  max-width: var(--content-width);
  margin-left: auto;
  padding-left: 1em;
  margin-right: auto;
  font-style: italic;
  border-left: 0.125em solid var(--accent-color);
}
blockquote em,
blockquote i {
  font-style: normal;
}
aside blockquote {
  font-size: 1.6em;
  line-height: 1.4em;
  border: none;
  margin: 2em auto;
  opacity: 0.8;
  padding: 0 1em;
}
blockquote .attribution {
  display: block;
  font-size: 0.8em;
  font-style: normal;
  margin-top: -1.5em;
}
blockquote .attribution:before {
  content: "–";
}

aside {
  margin-bottom: 2em;
}

kbd {
  background-color: rgba(200, 200, 200, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
  display: inline-block;
  font-family: var(--ui-font);
  font-size: 67%;
  line-height: 1.5;
  margin: 0 0.15em;
  min-width: 1em;
  padding: 0.125em 0.5em;
  text-align: center;
  user-select: none;
  white-space: nowrap;
}

h1,
h2 {
  font-weight: 900;
  letter-spacing: -0.01em;
}

h2 {
  border-left: 0.2em solid var(--accent-color);
  padding-left: 0.5em;
}

article ul li::marker {
  color: var(--accent-color);
}

.byline {
  font-family: var(--ui-font);
  font-size: 0.8em;
  line-height: 1.5em;
  margin: 1.5em auto;
  max-width: var(--content-width);
}
.byline .avatar {
  background-color: var(--slate-500);
  border: none;
  border-radius: 50%;
  color: transparent;
  float: left;
  height: 48px;
  margin-right: 0.5em;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: 48px;
}
.byline .avatar::before {
  content: "";
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 2px 0 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 0 rgba(255, 255, 255, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  height: 100%;
  position: absolute;
  width: 100%;
}
@media (prefers-color-scheme: dark) {
  .byline .avatar::before {
    box-shadow: inset 0 0 0 1px black, inset 0 0 0 2px rgba(255, 255, 255, 0.05), inset 0 2px 0 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 0 rgba(255, 255, 255, 0.07), 0 1px 3px 0 rgba(0, 0, 0, 0.24), 0 1px 2px 0 rgba(0, 0, 0, 0.48);
  }
}
.byline a {
  color: inherit;
  opacity: 1;
  text-decoration: none;
}
.byline a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}
.byline .name {
  font-weight: 600;
  opacity: 0.8;
}
.byline .description {
  opacity: 0.67;
}
.byline .description::before {
  content: " | ";
}
.byline time,
.byline .read-time {
  opacity: 0.8;
  font-size: 0.9em;
  line-height: 1em;
}
.byline .read-time::before {
  display: inline-block;
  margin: 0 0.25em;
  content: " · ";
}

img.card, .card img,
.card video, .card {
  clip-path: polygon(0 0, calc(100% - var(--ddc-chamfer)) 0, 100% var(--ddc-chamfer), 100% 100%, var(--ddc-chamfer) 100%, 0 calc(100% - var(--ddc-chamfer)));
}

.card {
  overflow: hidden;
}

img.card, .card img,
.card video {
  background-color: var(--ddc-panel);
  overflow: hidden;
}

code {
  background-color: var(--secondary-bg-color);
  border-radius: 0;
  font-size: 0.85em;
  padding: 0.2em;
}

.highlighter-rouge {
  margin: 2em auto;
  text-align: center;
}
.highlighter-rouge > .highlight {
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.22);
  line-height: 1;
}

.highlight code {
  padding: 0;
}
.highlight table {
  border-spacing: 0;
  margin: auto;
}

.rouge-code {
  padding-left: 0.25em;
  padding-right: 1em;
}

.highlight {
  display: inline-block;
  font-size: 0.85em;
  line-height: 1.33em;
  margin: auto;
  overflow: auto;
  text-align: left;
  background-color: var(--solarized-base3);
  color: var(--solarized-base01);
}
.highlight .gl {
  background-color: var(--solarized-base2);
  padding: 0 0.5em;
  text-align: right;
}
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .sb {
  color: var(--solarized-base1);
}
.highlight .err,
.highlight .g,
.highlight .ge,
.highlight .go,
.highlight .gp,
.highlight .gs,
.highlight .gt,
.highlight .l,
.highlight .ld,
.highlight .n,
.highlight .na,
.highlight .nl,
.highlight .nn,
.highlight .nx,
.highlight .p,
.highlight .py,
.highlight .sd,
.highlight .sh,
.highlight .w {
  color: var(--solarized-base01);
}
.highlight .gd,
.highlight .il,
.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sc,
.highlight .si,
.highlight .ss,
.highlight .sx {
  color: var(--solarized-cyan);
}
.highlight .bp,
.highlight .kd,
.highlight .kr,
.highlight .nc,
.highlight .nd,
.highlight .nf,
.highlight .nt,
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: var(--solarized-blue);
}
.highlight .cp,
.highlight .cs,
.highlight .gi,
.highlight .k,
.highlight .kn,
.highlight .kp,
.highlight .o,
.highlight .ow {
  color: var(--solarized-green);
}
.highlight .gh,
.highlight .gu,
.highlight .kc,
.highlight .ne,
.highlight .ni,
.highlight .no,
.highlight .se,
.highlight .x {
  color: var(--solarized-orange);
}
.highlight .gr,
.highlight .kt,
.highlight .sr {
  color: var(--solarized-red);
}
.highlight .nb {
  color: var(--solarized-yellow);
}
.highlight .ge {
  font-style: italic;
}
.highlight .gs {
  font-weight: bold;
}

@media (prefers-color-scheme: dark) {
  .highlight {
    background-color: var(--solarized-base03);
    color: var(--solarized-base1);
  }
  .highlight .gl {
    background-color: var(--solarized-base02);
  }
  .highlight .c,
  .highlight .c1,
  .highlight .cm,
  .highlight .sb {
    color: var(--solarized-base01);
  }
  .highlight .err,
  .highlight .g,
  .highlight .ge,
  .highlight .go,
  .highlight .gp,
  .highlight .gs,
  .highlight .gt,
  .highlight .l,
  .highlight .ld,
  .highlight .n,
  .highlight .na,
  .highlight .nl,
  .highlight .nn,
  .highlight .nx,
  .highlight .p,
  .highlight .py,
  .highlight .sd,
  .highlight .sh,
  .highlight .w {
    color: var(--solarized-base1);
  }
}
.embed {
  height: 0;
  margin: 2em auto;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}

.embed iframe,
.embed object,
.embed embed {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.featured {
  border-radius: 0;
  color: inherit;
  display: block;
  font-size: 0;
  opacity: 1;
  padding: 1rem;
  text-decoration: none;
  transition: background-color 250ms ease, color 250ms ease;
}
.featured:hover {
  background: var(--secondary-bg-color);
}
.featured header {
  display: inline-block;
  font-size: 1rem;
  padding-left: 1em;
  vertical-align: middle;
  width: 100%;
}
@media (min-width: 600px) {
  .featured header {
    width: 50%;
  }
}
@media (min-width: 800px) {
  .featured header {
    width: 33.33%;
  }
}
.featured header h2 {
  margin-top: 0;
}
.featured header .byline {
  max-width: 100%;
}
.featured .excerpt {
  display: inline-block;
  font-size: 1rem;
  padding: 0 1rem;
  vertical-align: middle;
  width: 100%;
}
@media (min-width: 600px) {
  .featured .excerpt {
    width: 50%;
  }
}
@media (min-width: 800px) {
  .featured .excerpt {
    width: 66.66%;
  }
}
.featured .excerpt span {
  font-family: var(--ui-font);
  font-size: 0.8em;
  opacity: 0.75;
}
.featured .featured-image {
  background-color: var(--silver-100);
  background-origin: border-box;
  background-position: 50%;
  background-size: cover;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
  display: inline-block;
  height: 320px;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: 100%;
}
@media (min-width: 600px) {
  .featured .featured-image {
    margin-bottom: 0;
    width: 50%;
  }
}
@media (min-width: 800px) {
  .featured .featured-image {
    width: calc(66.66% - 0.66rem);
  }
}
@media (prefers-color-scheme: dark) {
  .featured .featured-image {
    background-color: var(--silver-900);
    border: 1px solid black;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}
.featured .featured-image img {
  left: 50%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 800px) {
  .latest .featured:nth-child(n+2), .featured.small {
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
  }
  .latest .featured:nth-child(n+2) header, .featured.small header {
    font-size: 0.8rem;
    padding: 0;
    width: 100%;
  }
  .latest .featured:nth-child(n+2) header h3, .featured.small header h3 {
    margin-top: -1em;
  }
  .latest .featured:nth-child(n+2) .excerpt, .featured.small .excerpt {
    padding: 0;
    width: 100%;
  }
  .latest .featured:nth-child(n+2) .featured-image, .featured.small .featured-image {
    height: 200px;
    margin-bottom: 0.5rem;
    width: 100%;
  }
  .featured {
    padding: 1rem;
  }
  .latest,
  .related {
    font-size: 0;
    margin-top: 2rem;
  }
}
figure {
  font-size: 0;
  margin: 2rem auto;
  position: relative;
  text-align: center;
}
article figure p {
  max-width: 100%;
}
figure * {
  margin: 0;
  max-width: 100%;
}
figure img,
figure video {
  display: inline;
  transition: transform 250ms ease;
  vertical-align: middle;
}
figure img:active, figure img:focus,
figure video:active,
figure video:focus {
  outline: none;
  position: relative;
  z-index: 1;
}
figure .highlighter-rouge {
  font-size: 1rem;
  margin-bottom: 0;
}
figure.embed {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 56.25%;
  position: relative;
  width: var(--content-width);
}
figure.embed iframe {
  border: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
figure figcaption {
  font-family: var(--ui-font);
  font-size: 0.8rem;
  margin: 1em auto 4em;
  opacity: 0.67;
  text-align: center;
}
figure.quarter img,
figure.quarter video {
  margin: 1%;
  max-width: 23%;
}
figure.quarter:not(.no-zoom) img, figure.quarter:not(.no-zoom) video {
  cursor: zoom-in;
}
figure.quarter:not(.no-zoom) img:focus, figure.quarter:not(.no-zoom) video:focus {
  cursor: zoom-out;
}
figure.quarter:not(.no-zoom) img:nth-child(4n+1):active, figure.quarter:not(.no-zoom) img:nth-child(4n+1):focus, figure.quarter:not(.no-zoom) video:nth-child(4n+1):active, figure.quarter:not(.no-zoom) video:nth-child(4n+1):focus {
  transform: translateX(100%) scale(4);
}
figure.quarter:not(.no-zoom) img:nth-child(4n+2):active, figure.quarter:not(.no-zoom) img:nth-child(4n+2):focus, figure.quarter:not(.no-zoom) video:nth-child(4n+2):active, figure.quarter:not(.no-zoom) video:nth-child(4n+2):focus {
  transform: translateX(50%) scale(4);
}
figure.quarter:not(.no-zoom) img:nth-child(4n+3):active, figure.quarter:not(.no-zoom) img:nth-child(4n+3):focus, figure.quarter:not(.no-zoom) video:nth-child(4n+3):active, figure.quarter:not(.no-zoom) video:nth-child(4n+3):focus {
  transform: translateX(-50%) scale(4);
}
figure.quarter:not(.no-zoom) img:nth-child(4n+4):active, figure.quarter:not(.no-zoom) img:nth-child(4n+4):focus, figure.quarter:not(.no-zoom) video:nth-child(4n+4):active, figure.quarter:not(.no-zoom) video:nth-child(4n+4):focus {
  transform: translateX(-100%) scale(4);
}
figure.third img,
figure.third video {
  margin: 1%;
  max-width: 31.33%;
}
figure.third:not(.no-zoom) img, figure.third:not(.no-zoom) video {
  cursor: zoom-in;
}
figure.third:not(.no-zoom) img:focus, figure.third:not(.no-zoom) video:focus {
  cursor: zoom-out;
}
figure.third:not(.no-zoom) img:nth-child(3n+1):active, figure.third:not(.no-zoom) img:nth-child(3n+1):focus, figure.third:not(.no-zoom) video:nth-child(3n+1):active, figure.third:not(.no-zoom) video:nth-child(3n+1):focus {
  transform: translateX(100%) scale(3);
}
figure.third:not(.no-zoom) img:nth-child(3n+2):active, figure.third:not(.no-zoom) img:nth-child(3n+2):focus, figure.third:not(.no-zoom) video:nth-child(3n+2):active, figure.third:not(.no-zoom) video:nth-child(3n+2):focus {
  transform: translateX(0) scale(3);
}
figure.third:not(.no-zoom) img:nth-child(3n+3):active, figure.third:not(.no-zoom) img:nth-child(3n+3):focus, figure.third:not(.no-zoom) video:nth-child(3n+3):active, figure.third:not(.no-zoom) video:nth-child(3n+3):focus {
  transform: translateX(-100%) scale(3);
}
figure.half img,
figure.half video {
  margin: 1%;
  max-width: 48%;
}
figure.half:not(.no-zoom) img, figure.half:not(.no-zoom) video {
  cursor: zoom-in;
}
figure.half:not(.no-zoom) img:focus, figure.half:not(.no-zoom) video:focus {
  cursor: zoom-out;
}
figure.half:not(.no-zoom) img:nth-child(odd):active, figure.half:not(.no-zoom) img:nth-child(odd):focus, figure.half:not(.no-zoom) video:nth-child(odd):active, figure.half:not(.no-zoom) video:nth-child(odd):focus {
  transform: translateX(50%) scale(2);
}
figure.half:not(.no-zoom) img:nth-child(even):active, figure.half:not(.no-zoom) img:nth-child(even):focus, figure.half:not(.no-zoom) video:nth-child(even):active, figure.half:not(.no-zoom) video:nth-child(even):focus {
  transform: translateX(-50%) scale(2);
}
figure.full-bleed img,
figure.full-bleed video {
  left: 50%;
  max-width: 100vw;
  position: relative;
  transform: translateX(-50%);
  width: 100vw;
}
figure.constrained img,
figure.constrained video {
  width: var(--content-width);
}
figure.circle img,
figure.circle video {
  border-radius: 50%;
}
figure.on-screen {
  background-image: url("/images/notebook.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 0;
  margin: 0 auto;
  padding-bottom: 40%;
  position: relative;
  width: 100%;
}
figure.on-screen > * {
  border-radius: 3px;
  left: 22.25%;
  overflow: hidden;
  position: absolute;
  top: 2.2%;
  width: 55.5%;
}

body > header {
  background-color: var(--header-bg-color);
  border-bottom: 3px solid var(--accent-color);
  color: var(--header-fg-color);
  fill: var(--header-fg-color);
}
body > header nav {
  display: flex;
  font-size: 0;
  justify-content: space-between;
  overflow-x: auto;
  padding: 0 1rem;
}
body > header nav ul {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
body > header nav li {
  display: inline-block;
  list-style: none;
  vertical-align: middle;
}
body > header nav a {
  color: var(--header-fg-color);
  display: inline-block;
  font-family: var(--ui-font);
  font-size: 0.85rem;
  line-height: 2.9em;
  opacity: 1;
  padding: 0 0.65rem;
  text-decoration: none;
  white-space: nowrap;
}
body > header nav a:hover {
  opacity: 0.7;
}
body > header nav svg {
  height: 1em;
}
body > header nav svg * {
  fill: inherit !important;
}
body > header nav .logomark {
  line-height: 0;
}
body > header nav .logomark svg {
  height: auto;
}
body > header .secondary {
  background-color: var(--secondary-bg-color);
  flex-wrap: wrap;
  padding: 0.25rem 1rem;
}
body > header .secondary a {
  color: var(--secondary-fg-color);
  font-size: 0.7rem;
}
body > header .secondary #search-container {
  align-self: center;
  margin: 0.25em 0;
}
body > header .secondary svg {
  height: 16px;
  fill: var(--secondary-fg-color);
  margin: 0.4rem 0.3rem;
  position: absolute;
}
body > header .secondary #search-input {
  background-color: var(--bg-color);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  color: var(--fg-color);
  padding: 6px;
  text-indent: 1rem;
  transition: all 200ms ease-in-out;
  width: 300px;
}
body > header .secondary #search-input:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  outline: none;
}
body > header .secondary #results-container {
  background-color: var(--bg-color);
  border-radius: 0;
  box-shadow: inset 0 -1px 0 0 white, inset 1px 0 0 rgba(255, 255, 255, 0.3), inset -1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.15), 0 3px 4px rgba(0, 0, 0, 0.15), 0 3px 3px -3px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: absolute;
  transform: translate(-300px, 36px);
  z-index: 99;
}
@media (prefers-color-scheme: dark) {
  body > header .secondary #results-container {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.09), inset 1px 0 0 rgba(255, 255, 255, 0.03), inset -1px 0 0 rgba(255, 255, 255, 0.03), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05), 0 0 0 1px black, 0 3px 4px rgba(0, 0, 0, 0.25), 0 3px 3px -3px rgba(0, 0, 0, 0.45);
  }
}
body > header .secondary #results-container li {
  display: block;
  width: 300px;
}
body > header .secondary #results-container li a {
  color: var(--fg-color);
  display: grid;
  grid-column-gap: 12px;
  grid-template-columns: 3em auto;
  line-height: 1.25em;
  margin-bottom: 6px;
  margin-top: 6px;
  padding: 6px 12px;
}
body > header .secondary #results-container li a .featured-image {
  background-color: var(--silver-200);
  background-origin: border-box;
  background-position: 50%;
  background-size: cover;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
  grid-row: 1/span 2;
  height: 3em;
  margin-right: 12px;
  width: 3em;
}
@media (prefers-color-scheme: dark) {
  body > header .secondary #results-container li a .featured-image {
    background-color: var(--silver-900);
    border: 1px solid black;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}
body > header .secondary #results-container li a #title {
  grid-column-start: 2;
}
body > header .secondary #results-container li a #description {
  font-size: 0.8em;
  grid-column-start: 2;
  opacity: 0.8;
}
body > header .secondary #results-container li a:hover {
  background-color: var(--secondary-bg-color);
}

aside.tags {
  margin: 1em auto;
  max-width: var(--content-width);
}

.tag {
  background-color: var(--banana-300);
  border-radius: 0;
  color: var(--banana-900);
  display: inline-block;
  font-family: var(--ui-font);
  font-size: 0.75em;
  line-height: 2em;
  margin: 0.125em;
  padding: 0 0.5em;
  text-decoration: none;
}

.twitter-card {
  background-color: var(--silver-100);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.22);
  border-radius: 0;
  font-family: var(--ui-font);
  margin: 0 auto 2em;
  max-width: 50ch;
  padding: 1em;
}
.twitter-card a {
  color: inherit;
  opacity: 1;
  text-decoration: none;
}
.twitter-card a:hover {
  text-decoration: underline;
}
.twitter-card p {
  line-height: 1.5em;
  margin-bottom: 0.5em;
}
.twitter-card p a {
  color: #1da1f2;
}
.twitter-card img,
.twitter-card video {
  border-radius: 0;
}
.twitter-card header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75em;
}
.twitter-card header .account {
  display: grid;
}
.twitter-card header .account .avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: block;
  grid-row-end: span 2;
  height: 2.5em;
  margin-right: 0.5em;
}
.twitter-card header .account p,
.twitter-card header .account strong {
  font-size: 0.8em;
  grid-column-start: 2;
  line-height: 1.25;
  margin: 0;
}
.twitter-card header .account p {
  opacity: 0.75;
}
.twitter-card header .logo {
  height: 1.25em;
  margin: 0;
  text-align: right;
}
.twitter-card footer {
  font-size: 0.75em;
  line-height: 1;
  margin-top: 1.5em;
}
.twitter-card footer a {
  display: flex;
  justify-content: space-between;
  opacity: 0.6;
}
@media (prefers-color-scheme: dark) {
  .twitter-card {
    background-color: var(--black-500);
  }
}

:root {
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body,
html {
  background-color: var(--bg-color);
  color: var(--fg-color);
  fill: var(--fg-color);
  margin: 0;
  overflow-x: hidden;
}

html {
  background-color: var(--secondary-bg-color);
}

svg {
  fill: inherit;
}

.error {
  max-width: 22rem;
  margin: 8em auto;
  text-align: center;
}
.error p {
  font-family: var(--ui-font);
}

nav.pagination {
  font-size: 0;
  margin: 2rem auto;
  text-align: center;
}
nav.pagination a {
  display: inline-block;
  font-size: 1rem;
  font-family: var(--ui-font);
  padding: 1em;
}
nav.pagination a.next::after {
  content: " →";
}
nav.pagination a.previous::before {
  content: "← ";
}

.social {
  font-size: 0;
  margin: 4rem auto;
  text-align: center;
}
.social h2 {
  font-size: 1.5rem;
}
.social div {
  display: inline-block;
  font-size: 1rem;
  width: 50%;
}
.social a {
  display: inline-block;
  margin: 0.75rem;
}
.social a img {
  width: 32px;
  height: 32px;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.button {
  border: 1px solid var(--accent-color);
  border-radius: 0;
  font-family: var(--ui-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 3em;
  margin: 0.5em;
  padding: 0.5em 1em;
  text-decoration: none;
  white-space: nowrap;
}
.button.suggested {
  background-color: var(--ddc-accent);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  color: #fff;
}
.button.flat {
  border: none;
}

pre {
  -webkit-text-size-adjust: none;
}

.hidden {
  display: none;
}

/*# sourceMappingURL=main.css.map */