/* cover.css — one slice of the site stylesheet, split by concern.
   Load order is fixed in base.html and mirrors the old single-file
   source order; do not reorder the <link> tags. tokens.css holds
   every colour and must load first. */
/*********************************************************************


                                HEADER


**********************************************************************/
/* The header's height is set by the cover, not by padding. The animation is a
   20-line file plus chrome and status bar (433px); any shorter and it clips
   mid-loop — lines type out below the fold of their own container. So the
   header is exactly that tall, and the title block centres inside it rather
   than sitting on top with the leftover space dumped underneath. Changing the
   line count in tools/gen_cover_animation.py means changing these numbers. */
#head {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 436px;
  background-color: var(--ide-bg);
  color: var(--text-muted);
  padding: 20px 0;
}
#head #logo {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
}
#head img.img-circle {
  display: block;
  width: 140px;
  height: 140px;
  overflow: hidden;
  /* token-exempt: a white veil over whatever the photo is, not a theme colour —
     it has no counterpart in tokens.css and no other rule shares it. */
  border: 9px solid rgba(255, 255, 255, 0.08);
  margin: 0 auto;
}
#head .title {
  font-family: var(--font-hand-display);
  font-weight: 700;
  font-size: 60px;
  font-size: 3.75rem;
}
#head .title a {
  text-decoration: none;
  color: var(--text-strong);
}
#head .tagline {
  display: block;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.35em;
  /* Same cyan as the active nav item — the tagline and the page you are on
     are the two things on the page allowed to be the brand colour. */
  color: var(--accent);
  margin: 8px 0 0;
}
#head .tagline b {
  font-weight: normal;
}
#head .tagline a {
  color: var(--text);
}
.home #head .title {
  font-size: 60px;
  font-size: 3.75rem;
  color: var(--text-strong);
}
.home #head .tagline {
  font-size: 23px;
  font-size: 1.4375rem;
  color: var(--accent);
  margin: 14px 0 0;
}
/*********************************************************************


                          ANIMATED IDE COVER

  Decorative backdrop for #head: an editor typing out a file while an
  architecture sketch is drawn beside it, then both wipe and loop. Markup
  lives in templates/website/_ide_cover.html.

  The rules below are hand-written; everything between the "generated"
  markers further down comes from tools/gen_cover_animation.py, which owns
  the timeline (cycle length, per-line and per-stroke offsets) and each
  line's `--ch`. Edit the script, not the generated block.

**********************************************************************/
.ide-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.ide-chrome {
  height: 30px;
  padding: 0 14px;
  background-color: var(--ide-chrome);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.ide-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 10px 4px 0 0;
  border-radius: 50%;
  background-color: var(--ide-dot);
  vertical-align: top;
}
.ide-tab {
  display: inline-block;
  padding: 0 14px;
  font-size: 11px;
  line-height: 29px;
  color: var(--text-faint);
}
.ide-tab:first-of-type {
  margin-left: 14px;
}
.ide-tab.is-active {
  color: var(--text);
  border-bottom: 2px solid var(--accent);
}
.ide-pane {
  max-width: 1170px;
  margin: 0 auto;
  padding: 18px 15px 0;
}
.ide-gutter {
  float: left;
  width: 46px;
  padding-right: 14px;
  border-right: 1px solid var(--border);
  text-align: right;
  color: var(--ide-gutter);
}
.ide-gutter span {
  display: block;
}
.ide-code {
  margin: 0;
  padding: 0 0 0 16px;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--code-text);
  word-break: normal;
  word-wrap: normal;
}
.ide-code .k {
  color: var(--code-kw);
}
.ide-code .s {
  color: var(--code-str);
}
.ide-code .f {
  color: var(--code-fn);
}
.ide-code .t {
  color: var(--code-type);
}
.ide-code .n {
  color: var(--code-num);
}
.ide-code .d {
  color: var(--code-self);
  font-style: italic;
}
.ide-line {
  display: block;
  width: 0;
  overflow: hidden;
  white-space: pre;
  border-right: 2px solid transparent;
  /* One keyframe set per line: each types at its own offset, but every line
     clears at the same instant so the file wipes and starts over as a whole
     instead of each line looping on its own clock. */
  animation-timing-function: steps(30, end);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.ide-line:last-child::after {
  content: "";
  display: inline-block;
  width: 1ch;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background-color: var(--accent);
  animation: ide-blink 1.1s steps(1, end) infinite;
}
@keyframes ide-blink {
0%,
50% {
    opacity: 1;
  }
50.01%,
100% {
    opacity: 0;
  }
}
.ide-board {
  /* Fluid, so the sketch shrinks alongside the code instead of being dropped
     the moment the window narrows. The SVG scales with its viewBox. */
  float: right;
  width: 40%;
  max-width: 470px;
  margin-left: 24px;
  /* pulled in from the right edge so the sketch sits nearer the centre */
  margin-right: 40px;
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.sk-canvas {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.sk-draw,
.sk-text {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.sk-draw {
  fill: none;
  stroke: var(--sketch-stroke);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
/* Box labels take the body hand — they are set as small as 11px and Caveat
   is unreadable down there. The sketch title, which is large, takes the
   display hand (see .sk-title). */
.sk-text {
  fill: var(--sketch-ink);
  font-family: var(--font-hand);
  opacity: 0;
}
.sk-accent {
  stroke: var(--accent);
}
.sk-ghost {
  stroke-width: 1;
  opacity: 0.45;
}
.sk-dim {
  stroke: var(--sketch-dim);
  stroke-width: 1.2;
}
.sk-accent-text {
  fill: var(--accent);
}
.sk-muted-text {
  fill: var(--sketch-dim);
}
.sk-title {
  fill: var(--sketch-ink);
  font-family: var(--font-hand-display);
  font-weight: 700;
}
/* == generated by tools/gen_cover_animation.py — do not hand-edit == */
.ide-line,
.sk-draw,
.sk-text {
  animation-duration: 16.1s;
}
.ide-line:nth-child(1) {
  animation-name: ide-type-1;
}
@keyframes ide-type-1 {
  0% {
    width: 0;
    border-right-color: transparent;
  }
  0.05% {
    width: 0;
    border-right-color: var(--accent);
  }
  3.106% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  3.406%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(2) {
  animation-name: ide-type-2;
}
@keyframes ide-type-2 {
  0%, 3.106% {
    width: 0;
    border-right-color: transparent;
  }
  3.156% {
    width: 0;
    border-right-color: var(--accent);
  }
  6.211% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  6.511%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(3) {
  animation-name: ide-type-3;
}
@keyframes ide-type-3 {
  0%, 6.211% {
    width: 0;
    border-right-color: transparent;
  }
  6.261% {
    width: 0;
    border-right-color: var(--accent);
  }
  9.317% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  9.617%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(4) {
  animation-name: ide-type-4;
}
@keyframes ide-type-4 {
  0%, 9.317% {
    width: 0;
    border-right-color: transparent;
  }
  9.367% {
    width: 0;
    border-right-color: var(--accent);
  }
  12.422% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  12.722%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(5) {
  animation-name: ide-type-5;
}
@keyframes ide-type-5 {
  0%, 12.422% {
    width: 0;
    border-right-color: transparent;
  }
  12.472% {
    width: 0;
    border-right-color: var(--accent);
  }
  15.528% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  15.828%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(6) {
  animation-name: ide-type-6;
}
@keyframes ide-type-6 {
  0%, 15.528% {
    width: 0;
    border-right-color: transparent;
  }
  15.578% {
    width: 0;
    border-right-color: var(--accent);
  }
  18.634% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  18.934%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(7) {
  animation-name: ide-type-7;
}
@keyframes ide-type-7 {
  0%, 18.634% {
    width: 0;
    border-right-color: transparent;
  }
  18.684% {
    width: 0;
    border-right-color: var(--accent);
  }
  21.739% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  22.039%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(8) {
  animation-name: ide-type-8;
}
@keyframes ide-type-8 {
  0%, 21.739% {
    width: 0;
    border-right-color: transparent;
  }
  21.789% {
    width: 0;
    border-right-color: var(--accent);
  }
  24.845% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  25.145%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(9) {
  animation-name: ide-type-9;
}
@keyframes ide-type-9 {
  0%, 24.845% {
    width: 0;
    border-right-color: transparent;
  }
  24.895% {
    width: 0;
    border-right-color: var(--accent);
  }
  27.95% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  28.25%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(10) {
  animation-name: ide-type-10;
}
@keyframes ide-type-10 {
  0%, 27.95% {
    width: 0;
    border-right-color: transparent;
  }
  28.0% {
    width: 0;
    border-right-color: var(--accent);
  }
  31.056% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  31.356%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(11) {
  animation-name: ide-type-11;
}
@keyframes ide-type-11 {
  0%, 31.056% {
    width: 0;
    border-right-color: transparent;
  }
  31.106% {
    width: 0;
    border-right-color: var(--accent);
  }
  34.161% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  34.461%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(12) {
  animation-name: ide-type-12;
}
@keyframes ide-type-12 {
  0%, 34.161% {
    width: 0;
    border-right-color: transparent;
  }
  34.211% {
    width: 0;
    border-right-color: var(--accent);
  }
  37.267% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  37.567%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(13) {
  animation-name: ide-type-13;
}
@keyframes ide-type-13 {
  0%, 37.267% {
    width: 0;
    border-right-color: transparent;
  }
  37.317% {
    width: 0;
    border-right-color: var(--accent);
  }
  40.373% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  40.673%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(14) {
  animation-name: ide-type-14;
}
@keyframes ide-type-14 {
  0%, 40.373% {
    width: 0;
    border-right-color: transparent;
  }
  40.423% {
    width: 0;
    border-right-color: var(--accent);
  }
  43.478% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  43.778%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(15) {
  animation-name: ide-type-15;
}
@keyframes ide-type-15 {
  0%, 43.478% {
    width: 0;
    border-right-color: transparent;
  }
  43.528% {
    width: 0;
    border-right-color: var(--accent);
  }
  46.584% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  46.884%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(16) {
  animation-name: ide-type-16;
}
@keyframes ide-type-16 {
  0%, 46.584% {
    width: 0;
    border-right-color: transparent;
  }
  46.634% {
    width: 0;
    border-right-color: var(--accent);
  }
  49.689% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  49.989%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(17) {
  animation-name: ide-type-17;
}
@keyframes ide-type-17 {
  0%, 49.689% {
    width: 0;
    border-right-color: transparent;
  }
  49.739% {
    width: 0;
    border-right-color: var(--accent);
  }
  52.795% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  53.095%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(18) {
  animation-name: ide-type-18;
}
@keyframes ide-type-18 {
  0%, 52.795% {
    width: 0;
    border-right-color: transparent;
  }
  52.845% {
    width: 0;
    border-right-color: var(--accent);
  }
  55.901% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  56.201%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(19) {
  animation-name: ide-type-19;
}
@keyframes ide-type-19 {
  0%, 55.901% {
    width: 0;
    border-right-color: transparent;
  }
  55.951% {
    width: 0;
    border-right-color: var(--accent);
  }
  59.006% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  59.306%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.ide-line:nth-child(20) {
  animation-name: ide-type-20;
}
@keyframes ide-type-20 {
  0%, 59.006% {
    width: 0;
    border-right-color: transparent;
  }
  59.056% {
    width: 0;
    border-right-color: var(--accent);
  }
  62.112% {
    width: calc(var(--ch) * 1ch);
    border-right-color: var(--accent);
  }
  62.412%, 96.273% {
    width: calc(var(--ch) * 1ch);
    border-right-color: transparent;
  }
  96.283%, 100% {
    width: 0;
    border-right-color: transparent;
  }
}
.sk1 {
  animation-name: sk-draw-1;
}
@keyframes sk-draw-1 {
  0%, 0.932% {
    stroke-dashoffset: 100;
  }
  4.348%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk2 {
  animation-name: sk-fade-2;
}
@keyframes sk-fade-2 {
  0%, 3.727% {
    opacity: 0;
  }
  7.143%, 96.273% {
    opacity: 1;
  }
  96.283%, 100% {
    opacity: 0;
  }
}
.sk3 {
  animation-name: sk-draw-3;
}
@keyframes sk-draw-3 {
  0%, 6.522% {
    stroke-dashoffset: 100;
  }
  9.938%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk4 {
  animation-name: sk-fade-4;
}
@keyframes sk-fade-4 {
  0%, 9.317% {
    opacity: 0;
  }
  12.733%, 96.273% {
    opacity: 1;
  }
  96.283%, 100% {
    opacity: 0;
  }
}
.sk5 {
  animation-name: sk-draw-5;
}
@keyframes sk-draw-5 {
  0%, 12.112% {
    stroke-dashoffset: 100;
  }
  15.528%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk6 {
  animation-name: sk-draw-6;
}
@keyframes sk-draw-6 {
  0%, 14.907% {
    stroke-dashoffset: 100;
  }
  18.323%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk7 {
  animation-name: sk-fade-7;
}
@keyframes sk-fade-7 {
  0%, 17.702% {
    opacity: 0;
  }
  21.118%, 96.273% {
    opacity: 1;
  }
  96.283%, 100% {
    opacity: 0;
  }
}
.sk8 {
  animation-name: sk-draw-8;
}
@keyframes sk-draw-8 {
  0%, 20.497% {
    stroke-dashoffset: 100;
  }
  23.913%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk9 {
  animation-name: sk-draw-9;
}
@keyframes sk-draw-9 {
  0%, 23.292% {
    stroke-dashoffset: 100;
  }
  26.708%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk10 {
  animation-name: sk-draw-10;
}
@keyframes sk-draw-10 {
  0%, 26.087% {
    stroke-dashoffset: 100;
  }
  29.503%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk11 {
  animation-name: sk-fade-11;
}
@keyframes sk-fade-11 {
  0%, 28.882% {
    opacity: 0;
  }
  32.298%, 96.273% {
    opacity: 1;
  }
  96.283%, 100% {
    opacity: 0;
  }
}
.sk12 {
  animation-name: sk-fade-12;
}
@keyframes sk-fade-12 {
  0%, 31.677% {
    opacity: 0;
  }
  35.093%, 96.273% {
    opacity: 1;
  }
  96.283%, 100% {
    opacity: 0;
  }
}
.sk13 {
  animation-name: sk-draw-13;
}
@keyframes sk-draw-13 {
  0%, 34.472% {
    stroke-dashoffset: 100;
  }
  37.888%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk14 {
  animation-name: sk-draw-14;
}
@keyframes sk-draw-14 {
  0%, 37.267% {
    stroke-dashoffset: 100;
  }
  40.683%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk15 {
  animation-name: sk-fade-15;
}
@keyframes sk-fade-15 {
  0%, 40.062% {
    opacity: 0;
  }
  43.478%, 96.273% {
    opacity: 1;
  }
  96.283%, 100% {
    opacity: 0;
  }
}
.sk16 {
  animation-name: sk-draw-16;
}
@keyframes sk-draw-16 {
  0%, 42.857% {
    stroke-dashoffset: 100;
  }
  46.273%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk17 {
  animation-name: sk-draw-17;
}
@keyframes sk-draw-17 {
  0%, 45.652% {
    stroke-dashoffset: 100;
  }
  49.068%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk18 {
  animation-name: sk-fade-18;
}
@keyframes sk-fade-18 {
  0%, 48.447% {
    opacity: 0;
  }
  51.863%, 96.273% {
    opacity: 1;
  }
  96.283%, 100% {
    opacity: 0;
  }
}
.sk19 {
  animation-name: sk-draw-19;
}
@keyframes sk-draw-19 {
  0%, 51.242% {
    stroke-dashoffset: 100;
  }
  54.658%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk20 {
  animation-name: sk-draw-20;
}
@keyframes sk-draw-20 {
  0%, 54.037% {
    stroke-dashoffset: 100;
  }
  57.453%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
.sk21 {
  animation-name: sk-fade-21;
}
@keyframes sk-fade-21 {
  0%, 56.832% {
    opacity: 0;
  }
  60.248%, 96.273% {
    opacity: 1;
  }
  96.283%, 100% {
    opacity: 0;
  }
}
.sk22 {
  animation-name: sk-draw-22;
}
@keyframes sk-draw-22 {
  0%, 59.627% {
    stroke-dashoffset: 100;
  }
  63.043%, 96.273% {
    stroke-dashoffset: 0;
  }
  96.283%, 100% {
    stroke-dashoffset: 100;
  }
}
/* == end generated == */
.ide-status {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 14px;
  font-size: 11px;
  line-height: 24px;
  color: var(--text-faint);
  background-color: var(--ide-chrome);
  border-top: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.ide-status span {
  margin-right: 18px;
}
.ide-status-branch {
  color: var(--accent);
}
.ide-status-right {
  float: right;
  margin-right: 0 !important;
}
.ide-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-image: radial-gradient(ellipse at 50% 45%, var(--scrim-core) 0%, transparent 74%), linear-gradient(to bottom, var(--scrim-top), var(--scrim-mid) 45%, var(--scrim-bottom));
}
@media (max-width: 991px) {
.ide-board {
    width: 38%;
    margin-left: 14px;
    margin-right: 20px;
    padding-left: 14px;
  }
}
@media (max-width: 767px) {
.ide-cover {
    font-size: 10px;
  }
.ide-gutter,
.ide-status {
    display: none;
  }
.ide-pane {
    padding-top: 12px;
    /* On a phone the name sits directly on top of the code with no sketch
       column to escape into, so the editor steps back and lets it read. */
    opacity: 0.5;
  }
.ide-code {
    padding-left: 0;
  }
  /* The title wraps to three lines on phones and sits right on top of the
     code, so widen the scrim's core and drop the lighter top stop. */
.ide-scrim {
    background-image: radial-gradient(ellipse at 50% 45%, var(--scrim-core) 0%, transparent 88%), linear-gradient(to bottom, var(--scrim-mid), var(--scrim-bottom));
  }
}
/* Below tablet the header is all title — a sketch squeezed into what is left
   would be an unreadable smudge, so the code pane gets the space. */
@media (max-width: 767px) {
.ide-board {
    display: none;
  }
}
/* Phones: the header IS the first screen, so it has to earn the space. At the
   desktop 60px the name wraps to three lines and pushes the bio below the
   fold, and the tagline runs edge to edge with no gutter to breathe in. */
@media (max-width: 767px) {
#head {
    /* The full 20 lines want 342px here, but on a phone that leaves a wide
       band of nothing between the tagline and the first section. So the
       header is cut to 310px — the last couple of lines fall off the bottom,
       which the loop can afford — and the title block is pinned to the
       bottom edge rather than centred, putting all the remaining slack above
       it where the code actually is. The gap below the tagline drops from
       55px to 14px that way, without the animation losing its top. */
    min-height: 310px;
    align-items: flex-end;
    padding-bottom: 14px;
  }
#head #logo {
    padding: 0 18px;
  }
#head img.img-circle {
    width: 104px;
    height: 104px;
    border-width: 6px;
  }
#head .title,
  .home #head .title {
    display: block;
    font-size: 34px;
    font-size: 2.125rem;
    line-height: 1.1em;
  }
#head .tagline,
  .home #head .tagline {
    font-size: 17px;
    font-size: 1.0625rem;
    margin-top: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
.ide-line {
    width: auto;
    border-right-color: transparent;
    animation: none;
  }
.ide-line:last-child::after {
    animation: none;
  }
.sk-draw {
    stroke-dashoffset: 0;
    animation: none;
  }
.sk-text {
    opacity: 1;
    animation: none;
  }
}
/* Tablets. Above 767px the phone rules stop applying, but a 60px name still
   runs the full width of a 768px screen and lands squarely on the code. */
@media (min-width: 768px) and (max-width: 991px) {
  #head #logo {
    padding: 0 24px;
  }
  #head .title,
  .home #head .title {
    font-size: 44px;
    font-size: 2.75rem;
  }
  #head .tagline,
  .home #head .tagline {
    font-size: 20px;
    font-size: 1.25rem;
  }
}