:root {
  --g: 4px;
  --g2: calc(var(--g) * 2);
  --g3: calc(var(--g) * 3);
  --g4: calc(var(--g) * 4);
  --g5: calc(var(--g) * 5);
  --g6: calc(var(--g) * 6);
  --g7: calc(var(--g) * 7);
  --g8: calc(var(--g) * 8);
  --g9: calc(var(--g) * 9);
  --g10: calc(var(--g) * 10);
  --g11: calc(var(--g) * 11);
  --g12: calc(var(--g) * 12);
  --g13: calc(var(--g) * 13);
  --g14: calc(var(--g) * 14);
  --g15: calc(var(--g) * 15);
  --g16: calc(var(--g) * 16);
  --g17: calc(var(--g) * 17);
  --g18: calc(var(--g) * 18);
  --g19: calc(var(--g) * 19);
  --g20: calc(var(--g) * 20);
  --g21: calc(var(--g) * 21);
  --g22: calc(var(--g) * 22);
  --g23: calc(var(--g) * 23);
  --g24: calc(var(--g) * 24);
  --g25: calc(var(--g) * 25);
  --g26: calc(var(--g) * 26);
  --g27: calc(var(--g) * 27);
  --g28: calc(var(--g) * 28);
  --g29: calc(var(--g) * 29);
  --g30: calc(var(--g) * 30);
  --g31: calc(var(--g) * 31);
  --g32: calc(var(--g) * 32);
  --g33: calc(var(--g) * 33);
  --g34: calc(var(--g) * 34);
  --g35: calc(var(--g) * 35);
  --g36: calc(var(--g) * 36);
  --g37: calc(var(--g) * 37);
  --g38: calc(var(--g) * 38);
  --g39: calc(var(--g) * 39);
  --g40: calc(var(--g) * 40);
  --g41: calc(var(--g) * 41);
  --g42: calc(var(--g) * 42);
  --g43: calc(var(--g) * 43);
  --g44: calc(var(--g) * 44);
  --g45: calc(var(--g) * 45);
  --g46: calc(var(--g) * 46);
  --g47: calc(var(--g) * 47);
  --g48: calc(var(--g) * 48);

  /** Icons **/
  --icon-link-alt: url(/images/third-party/md/icon-link-alt.svg);
  --icon-bluesky: url(/images/third-party/wiki/bluesky.svg);
  --icon-github: url(/images/third-party/github/github.svg);

  /** Colors **/
  --atw-neutral-0: #070707;
  --atw-neutral-900: #fff;

  --atw-accent-primary: #ff8d07;
  --atw-accent-secondary: #27fff2;

  /** Fonts **/

  --atw-title-font: 'Inter', sans-serif;
  --atw-body-font: 'Merriweather', serif;

  --atw-p: normal 400 16px/1.65 var(--atw-body-font);
  --atw-body: normal 400 16px/1.65 var(--atw-body-font);
}

* {
  box-sizing: border-box;
}

html,
body {
  background: var(--atw-neutral-0);
  color: var(--atw-neutral-900);
  margin: 0;
  padding: 0;
  font: normal 400 16px/1.65 var(--atw-body-font);
}

h1 {
  font: normal 800 24px/1.65 var(--atw-title-font);
  margin: var(--g8) 0 var(--g2) 0;
  text-transform: uppercase;
}

h2 {
  font: normal 800 22px/1.65 var(--atw-title-font);
  margin: var(--g8) 0 var(--g2) 0;
  text-transform: uppercase;
}

h3 {
  font: normal 800 20px/1.65 var(--atw-title-font);
  margin: var(--g8) 0 var(--g2) 0;
  text-transform: uppercase;
}

h4 {
  font: normal 800 18px/1.65 var(--atw-title-font);
  margin: var(--g8) 0 var(--g2) 0;
  text-transform: uppercase;
}

h5 {
  font: normal 800 17px/1.65 var(--atw-title-font);
  margin: var(--g8) 0 var(--g2) 0;
  text-transform: uppercase;
}

hr {
  margin: var(--g8) 0 var(--g8) 0;
  border: none;
  border-bottom: 1px solid oklch(from var(--atw-neutral-900) l c h / 0.3);
}

p {
  font: normal 400 16px/1.75 var(--atw-body-font);
  margin: 0 0 var(--g4) 0;
}

nav {
  font: normal 800 16px/1 var(--atw-title-font);
  text-transform: uppercase;
  position: absolute;
  z-index: 100;
  top: 0;
  left: var(--g4);
}

nav ul {
  list-style: none;
  padding: 0;
  margin: var(--g8) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

nav ul li {
  margin: 0 var(--g2);
}

nav ul a {
  color: var(--atw-neutral-900);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
}

nav ul a:hover {
  opacity: 1;
}

main {
  width: 100%;
}

pre,
ol {
  overflow-x: auto;
  scrollbar-width: none;
  clear: both;
}

@media screen and (min-width: 460px) {
  nav {
    font-size: 18px;
  }

  h1 {
    font: normal 800 28px/1.65 var(--atw-title-font);
  }

  h2 {
    font: normal 800 26px/1.65 var(--atw-title-font);
  }

  h3 {
    font: normal 800 24px/1.65 var(--atw-title-font);
  }

  h4 {
    font: normal 800 22px/1.65 var(--atw-title-font);
  }

  h5 {
    font: normal 800 20px/1.65 var(--atw-title-font);
  }
}

@media screen and (min-width: 640px) {
  nav {
    font-size: 20px;
  }

  nav ul {
    margin-left: var(--g);
    justify-content: flex-start;
  }

  h1 {
    font: normal 800 32px/1.65 var(--atw-title-font);
  }

  h2 {
    font: normal 800 30px/1.65 var(--atw-title-font);
  }

  h3 {
    font: normal 800 28px/1.65 var(--atw-title-font);
  }

  h4 {
    font: normal 800 24px/1.65 var(--atw-title-font);
  }

  h5 {
    font: normal 800 20px/1.65 var(--atw-title-font);
  }
}

@media screen and (min-width: 960px) {
  nav ul {
    margin-left: var(--g5);
  }

  h1 {
    font: normal 800 48px/1.65 var(--atw-title-font);
  }

  h2 {
    font: normal 800 40px/1.65 var(--atw-title-font);
  }

  h3 {
    font: normal 800 32px/1.65 var(--atw-title-font);
  }

  h4 {
    font: normal 800 24px/1.65 var(--atw-title-font);
  }

  h5 {
    font: normal 800 20px/1.65 var(--atw-title-font);
  }
}

@media screen and (min-width: 1440px) {
  nav ul {
    margin-left: var(--g5);
  }

  h1 {
    font: normal 800 72px/1.65 var(--atw-title-font);
  }

  h2 {
    font: normal 800 56px/1.65 var(--atw-title-font);
  }

  h3 {
    font: normal 800 44px/1.65 var(--atw-title-font);
  }

  h4 {
    font: normal 800 32px/1.65 var(--atw-title-font);
  }

  h5 {
    font: normal 800 28px/1.65 var(--atw-title-font);
  }
}

/** Code **/

.token.c {
  color: oklch(from var(--atw-neutral-900) calc(l - 0.3) c h);
  font-style: italic;
}

.token.err {
  color: var(--atw-neutral-900);
}

.token.g {
  color: var(--atw-neutral-900);
}

.token.k {
  color: var(--atw-neutral-900);
  font-weight: 700;
}

.token.l {
  color: var(--atw-neutral-900);
}

.token.n {
  color: var(--atw-neutral-900);
}

.token.o {
  color: var(--atw-neutral-900);
}

.token.x {
  color: var(--atw-neutral-900);
}

.token.punctuation {
  color: var(--atw-neutral-900);
}

.token.cm {
  color: oklch(from var(--atw-neutral-900) calc(l - 0.3) c h);
  font-style: italic;
}

.token.cp {
  color: var(--atw-neutral-900);
}

.token.comment {
  color: oklch(from var(--atw-neutral-900) calc(l - 0.3) c h);
  font-style: italic;
}

.token.cs {
  color: oklch(from var(--atw-neutral-900) calc(l - 0.3) c h);
  font-style: italic;
}

.token.gd {
  color: var(--atw-neutral-900);
}

.token.ge {
  color: var(--atw-neutral-900);
}

.token.gr {
  color: var(--atw-neutral-900);
}

.token.gh {
  color: var(--atw-neutral-900);
  font-weight: 700;
}

.token.gi {
  color: var(--atw-neutral-900);
}

.token.go {
  color: oklch(from var(--atw-neutral-900) calc(l - 0.4) c h);
  background-color: oklch(from var(--atw-neutral-900) calc(l - 0.6) c h);
}

.token.gp {
  color: var(--atw-neutral-900);
}

.token.gs {
  color: var(--atw-neutral-900);
}

.token.gu {
  color: var(--atw-neutral-900);
  font-weight: 700;
}

.token.gt {
  color: var(--atw-neutral-900);
}

.token.kc {
  color: var(--atw-accent-primary);
  font-weight: 700;
}

.token.keyword {
  color: var(--atw-accent-primary);
  font-weight: 700;
}

.token.kn {
  color: var(--atw-accent-primary);
  font-weight: 700;
}

.token.kp {
  color: var(--atw-accent-primary);
}

.token.kr {
  color: var(--atw-accent-primary);
  font-weight: 700;
}

.token.kt {
  color: var(--atw-accent-primary);
  font-weight: 700;
}

.token.ld {
  color: var(--atw-neutral-900);
}

.token.m {
  color: var(--atw-accent-secondary);
  font-weight: 700;
}

.token.attr-value {
  color: var(--atw-accent-secondary);
}

.token.attr-name {
  color: var(--atw-accent-primary);
  font-weight: 700;
}

.token.nb {
  color: var(--atw-neutral-900);
}

.token.nc {
  color: var(--atw-neutral-900);
}

.token.no {
  color: oklch(from var(--atw-accent-secondary) calc(l - 0.3) c h);
}

.token.nd {
  color: var(--atw-neutral-900);
}

.token.ni {
  color: var(--atw-neutral-900);
}

.token.ne {
  color: var(--atw-neutral-900);
}

.token.nf {
  color: var(--atw-accent-primary);
  font-weight: 700;
}

.token.nl {
  color: var(--atw-neutral-900);
}

.token.nn {
  color: var(--atw-neutral-900);
}

.token.function {
  color: var(--atw-neutral-900);
}

.token.py {
  color: var(--atw-neutral-900);
}

.token.nt {
  color: var(--atw-neutral-900);
  font-weight: 700;
}

.token.nv {
  color: var(--atw-neutral-900);
}

.token.ow {
  color: var(--atw-neutral-900);
}

.token.w {
  color: oklch(from var(--atw-neutral-900) calc(l - 0.3) c h);
}

.token.mf {
  color: var(--atw-accent-secondary);
  font-weight: 700;
}

.token.mh {
  color: var(--atw-accent-secondary);
  font-weight: 700;
}

.token.mi {
  color: var(--atw-accent-secondary);
  font-weight: 700;
}

.token.mo {
  color: var(--atw-accent-secondary);
  font-weight: 700;
}

.token.sb {
  color: var(--atw-accent-secondary);
}

.token.sc {
  color: var(--atw-accent-secondary);
}

.token.sd {
  color: var(--atw-accent-secondary);
}

.token.s2 {
  color: var(--atw-accent-secondary);
}

.token.se {
  color: var(--atw-accent-secondary);
}

.token.sh {
  color: var(--atw-accent-secondary);
}

.token.si {
  color: var(--atw-accent-secondary);
}

.token.sx {
  color: var(--atw-accent-secondary);
}

.token.sr {
  color: var(--atw-accent-secondary);
}

.token.string {
  color: var(--atw-accent-secondary);
}

.token.ss {
  color: var(--atw-accent-secondary);
}

.token.bp {
  color: var(--atw-neutral-900);
}

.token.vc {
  color: var(--atw-neutral-900);
}

.token.vg {
  color: var(--atw-neutral-900);
}

.token.vi {
  color: var(--atw-neutral-900);
}

.token.il {
  color: var(--atw-accent-secondary);
  font-weight: 700;
}