* {
  margin: 0;
  box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-family: Roboto, arial, sans-serif;
  letter-spacing: .2px;
  line-height: 24px;
  font-size: 14px;
  color: #2d2d2d; }

a {
  color: #1a73e8;
  text-decoration: none; }

h2 {
  font: 400 22px/28px Google Sans, sans-serif;
  border-top: 1px solid #ddd;
  margin-bottom: 30px;
  margin-top: 35px;
  padding-top: 35px; }
  @media (min-width: 750px) {
    h2 {
      margin-top: 50px;
      padding-top: 50px; } }

p, ul {
  margin-bottom: 1em; }

.limit-width {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 20px; }

.limit-width-3up {
  max-width: 1600px;
  margin: 0 auto; }
  @media (min-width: 750px) {
    .limit-width-3up {
      padding: 0 2.5%; } }

a.anchor {
  display: block;
  position: relative;
  top: -58px;
  visibility: hidden; }

main {
  padding-top: 80px;
  display: block; }

header {
  height: 60px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
  position: fixed;
  top: -1px;
  width: 100%;
  z-index: 1005;
  background-color: #fff;
  overflow: hidden;
  transition: height .25s ease-out; }
  header > div.limit-width {
    display: flex;
    align-items: center;
    max-width: unset; }
    @media (min-width: 750px) {
      header > div.limit-width {
        max-width: 1390px;
        width: 89.5%; } }

header .title {
  display: flex;
  align-items: center; }

h1 {
  font: 400 24px Google Sans, sans-serif;
  margin-right: 20px;
  display: inline; }
  h1 a {
    color: #2d2d2d;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6Izg1M0Y5NjtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MC43NTt9Cjwvc3R5bGU+CjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjYuNTkiIGN5PSIxMy45NCIgcj0iNC4wNCIvPgo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxNiIgY3k9IjYuODciIHI9IjQuMDQiLz4KPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjUuNCIgY3k9IjE0LjIyIiByPSI0LjA0Ii8+CjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjIxLjc3IiBjeT0iMjQuNjMiIHI9IjQuMDQiLz4KPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTAuNiIgY3k9IjI0LjQ1IiByPSI0LjA0Ii8+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: left center;
    padding-left: 35px; }
    @media (max-width: 370px) {
      h1 a {
        padding: 0;
        background: none; } }

#nav {
  display: inline-flex;
  list-style-type: none;
  margin: 0;
  padding: 0; }
  #nav li {
    font: 400 14px Google Sans, sans-serif;
    height: 100%;
    letter-spacing: .25px;
    line-height: 60px; }
    #nav li a {
      height: 100%;
      display: block;
      margin: 0 10px;
      color: rgba(0, 0, 0, 0.54);
      transition: .25s color; }
      #nav li a:hover {
        color: rgba(0, 0, 0, 0.87); }

#nav-expand {
  display: none;
  margin-right: 20px;
  cursor: pointer; }
  #nav-expand:before {
    content: 'menu'; }

@media (max-width: 480px) {
  #nav-expand {
    display: inline; }

  header > div.limit-width {
    display: block; }

  #nav {
    display: block; }
    #nav li a {
      padding-left: 38px; }

  h1 {
    line-height: 60px; }

  header.expanded {
    height: 250px; } }
footer {
  margin-top: 80px;
  padding: 40px 0;
  background-color: #efefef; }
  footer > div {
    display: flex;
    align-items: center; }

#nav-bottom {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0; }
  #nav-bottom li {
    font: 400 14px Google Sans, sans-serif; }
    #nav-bottom li:not(:last-child):after {
      content: '';
      margin: 0 10px; }
    #nav-bottom li a {
      color: rgba(0, 0, 0, 0.644);
      transition: .25s color; }
      #nav-bottom li a:hover {
        color: rgba(0, 0, 0, 0.822); }

@media (max-width: 630px) {
  footer > div {
    flex-direction: column; }

  #nav-bottom {
    flex-direction: column;
    margin-bottom: 30px; }
    #nav-bottom li {
      text-align: center;
      margin: 15px 0; }
      #nav-bottom li:not(:last-child):after {
        display: none; }

  .google-logo {
    order: 2;
    margin: 0 auto; } }
.google-logo {
  width: 210px;
  height: 47.46px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100%;
  background-image: url(/assets/images/google-ai.svg);
  margin-right: auto; }

.social {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; }
  .social .share {
    font: 400 14px Google Sans, sans-serif;
    margin: 8px 8px 8px 0;
    color: rgba(0, 0, 0, 0.54); }
  .social .logo {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 8px;
    transition: .25s filter; }
  .social .share-links-icon {
    fill: #7b7b7b;
    transition: fill .33s; }
    .social .share-links-icon.twitter {
      height: 26px;
      width: 26px; }
      .social .share-links-icon.twitter:focus, .social .share-links-icon.twitter:hover {
        fill-rule: evenodd;
        fill: #4099ff; }
    .social .share-links-icon.facebook {
      height: 22px;
      width: 22px; }
      .social .share-links-icon.facebook:focus, .social .share-links-icon.facebook:hover {
        fill: #3b5998; }
    .social .share-links-icon.linkedin {
      height: 23px;
      width: 23px; }
      .social .share-links-icon.linkedin:focus, .social .share-links-icon.linkedin:hover {
        fill: #007bb6; }
  .social .share-link {
    cursor: pointer; }
  .social .copy-text {
    width: 474px; }

#social-bottom {
  margin-top: 11px;
  margin-bottom: -11px; }

@media (min-width: 750px) {
  #social-top {
    margin-top: 2px;
    margin-bottom: -2px; }

  #social-bottom {
    margin-top: -8px;
    margin-bottom: 8px; } }
@media (min-width: 1250px) {
  #social-top {
    margin-top: 10px;
    margin-bottom: -10px; }

  #social-bottom {
    margin-top: -8px;
    margin-bottom: 8px; } }
#cover {
  display: block;
  width: 89.2%;
  margin-top: 15px;
  margin-bottom: 2.5%; }
  @media (min-width: 750px) {
    #cover {
      display: none; } }

#cover-2up {
  display: none;
  margin: 0 auto; }
  @media (min-width: 750px) {
    #cover-2up {
      display: block;
      width: 89%;
      margin-top: 20px;
      margin-bottom: 3%; } }
  @media (min-width: 1250px) {
    #cover-2up {
      display: none; } }

#cover-3up {
  display: none; }
  @media (min-width: 1250px) {
    #cover-3up {
      width: 91.5%;
      display: block;
      margin-top: 40px;
      margin-bottom: 5.5%; } }

.cover-image {
  margin: 0 auto;
  max-width: 100%; }

#cover-caption {
  display: none; }

#comic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  @media (min-width: 750px) {
    #comic {
      padding: 0 2.5%; } }
  #comic figure {
    position: relative;
    outline: none;
    margin: 2.5%;
    width: 95%;
    margin-left: 5%;
    margin-right: 5%; }
    @media (min-width: 750px) {
      #comic figure {
        margin: 2.5%;
        width: 45%;
        margin-bottom: 6%; } }
    @media (min-width: 1250px) {
      #comic figure {
        margin: 1.5%;
        width: 30.3333333333%;
        margin-bottom: 4.5%; } }
  #comic figure > img {
    width: 100%;
    height: 100%;
    outline: none;
    display: block; }
  #comic img.reveal {
    position: absolute;
    left: 0;
    top: 0; }
  #comic figure img.reveal {
    will-change: opacity;
    animation: progressiveReveal 1s ease-out; }
  #comic figcaption.caption {
    position: absolute;
    visibility: hidden;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0; }
  #comic figcaption.footnote {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 7%;
    background-color: rgba(255, 255, 255, 0.95);
    display: none;
    align-items: center;
    justify-content: center; }
    @media (max-width: 370px) {
      #comic figcaption.footnote {
        padding: 4%; } }
    #comic figcaption.footnote p {
      margin-bottom: 0; }
      @media (max-width: 370px) {
        #comic figcaption.footnote p {
          line-height: 20px;
          font-size: 12px; } }
  #comic .footnote-icon {
    cursor: pointer;
    position: absolute;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLDBoMjR2MjRIMFYweiIvPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04LDE1LjZsMi0yLjhMMTAsMTIuNmwtMy0xbDAuNy0yLjJsMywxLjFsMC4yLTAuMVY3LjFoMi4zdjMuMmwwLjIsMC4xbDMtMS4xbDAuNywyLjJsLTMsMUwxNCwxMi44bDIsMi44CgkJbC0xLjksMS40bC0yLjEtMi44SDEybC0yLjEsMi44TDgsMTUuNnoiLz4KPC9nPgo8L3N2Zz4K");
    background-size: 100%;
    top: -3.5%;
    right: -3.5%;
    width: 13%;
    height: 13%; }
    @media (min-width: 750px) {
      #comic .footnote-icon {
        width: 9%;
        height: 9%; } }
  #comic .footnote-open figcaption.footnote {
    display: flex; }
  #comic .footnote-open .footnote-icon {
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLDBoMjR2MjRIMFYweiIvPgo8cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9IjE3LDE1LjYgMTUuNiwxNyAxMiwxMy40IDguNCwxNyA3LDE1LjYgMTAuNiwxMiA3LDguNCA4LjQsNyAxMiwxMC42IDE1LjYsNyAxNyw4LjQgMTMuNCwxMiAiLz4KPC9zdmc+Cg=="); }

@keyframes progressiveReveal {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }