/* dm-sans-latin-wght-normal */
@font-face {
  font-family: 'DM Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/dm-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
body {
  padding: 0px;
  margin: 0px;
  font-family: 'DM Sans Variable', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: #C9CDCF;
  background-color: #111;
  overflow-x: hidden;
}
html, body { height: 100%; }
/* vertical split: left = splash, right = text (sign-in style) */
.split {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
h1 { font-size: 2.5em; margin-bottom: 0.5em; margin-top: 0; color: #fff; }
h2 { font-size: 1.5em; margin-bottom: 1em; max-width: 500px; color: #fff; }
h3 { font-size: 1.2em; margin-bottom: 0em; color: #fff; }
.split > * { flex: 1 1 50%; }
.splash {
  position: relative;
  overflow: hidden;
  background: #000;
  border-right: 1px solid #201826;
}
/* the mounted React splash fills the panel */
#splash {
  position: absolute;
  inset: 0;
}
/* only the right column scrolls */
.content {
  display: flex;
  height: 100vh;
  overflow-y: auto;
  /* experiment: a barely-there warm accent bleeding in from the splash side,
     instead of a flat sterile grey — easy to drop */
  background: radial-gradient(95% 78% at 0% 35%, #1b1014 0%, #0b0b0c 60%);
}
/* margin:auto centres the block when it fits, and lets it scroll from the
   top (no clipping) when it's taller than the viewport */
.content > div {
  margin: auto;
  max-width: 800px;
  padding: 28px 64px;
  box-sizing: border-box;
}
/* stacked layout on tablets/phones: splash hero on top, text below */
@media (max-width: 900px) {
  .split { flex-direction: column; height: auto; overflow: visible; }
  .splash {
    min-height: 44vh;
    border-right: none;
    border-bottom: 1px solid #201826;
  }
  .content {
    height: auto;
    overflow: visible;
    /* warm accent now bleeds down from the splash above */
    background: radial-gradient(120% 55% at 50% 0%, #1b1014 0%, #0b0b0c 55%);
  }
  .content > div { margin: 0 auto; padding: 40px 28px; }
}
@media (max-width: 480px) {
  h1 { font-size: 2em; }
  h2 { font-size: 1.3em; }
  .splash { min-height: 40vh; }
  .content > div { padding: 32px 20px; }
}

a { color: #029CFD; text-decoration: none }
a:hover { text-decoration: underline }
b { font-weight: 600 }

    /* ===== Pssst easter egg ===== */
      @font-face {
        font-family: 'DM Mono';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url(https://cdn.jsdelivr.net/fontsource/fonts/dm-mono@latest/latin-500-normal.woff2) format('woff2');
      }
      :root {
        --peek: 26%;
        --left: 5%;
        --w: 90px;
        --say-x: 32px; /* nudge bubble horizontally to sit at the can nozzle */
        --say-y: 40%; /* nudge bubble vertically */
        --ink: #0e0e10;
        --px: calc(var(--w) / 31); /* one sprite pixel = width / viewBox-width */
      }
      .robot-egg {
        position: fixed;
        top: 0;
        left: var(--left);
        width: var(--w);
        z-index: 50;
        transform: translateY(calc(-100% + var(--peek) - 5px));
        transition: transform 0.4s cubic-bezier(0.34, 1, 0.5, 1);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        outline: none;
      }
      @media (max-width: 900px) {
        .robot-egg {
          --left: 3%;
        }
      }
      .robot-egg.open {
        transform: translateY(0);
      }
      @media (hover: hover) {
        .robot-egg:hover {
          transform: translateY(0);
        }
      }
      .robot-egg .bot {
        display: block;
        width: 100%;
        height: auto;
        transform: rotate(180deg);
        image-rendering: pixelated;
        filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
      }
      @keyframes bob {
        0%,
        100% {
          transform: rotate(180deg) translateY(0);
        }
        50% {
          transform: rotate(180deg) translateY(-2px);
        }
      }
      .robot-egg .bot {
        animation: bob 2.6s ease-in-out infinite;
      }
      .robot-egg.open .bot {
        animation: none;
      }
      @media (hover: hover) {
        .robot-egg:hover .bot {
          animation: none;
        }
      }

      /* ---- pixel speech bubble, sprayed from the can ---- */
      .say {
        position: absolute;
        left: calc(100% + var(--say-x));
        top: calc(var(--say-y) + 6px);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateX(-4px);
        transition:
          opacity 0.12s steps(2),
          transform 0.16s steps(3);
      }
      .robot-egg.open .say {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.4s; /* appear after the sprite has slid out */
      }
      @media (hover: hover) {
        .robot-egg:hover .say {
          opacity: 1;
          transform: translateX(0);
          transition-delay: 0.4s;
        }
      }
      .say .in {
        display: block;
        background: #000;
        color: #fff;
        font:
          500 13px/1.3 'DM Mono',
          ui-monospace,
          'Roboto Mono',
          monospace;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 8px 9px 6px;
        border: 2px solid #fff;
        image-rendering: pixelated;
      }
      /* spray trail: 3 puffs on the sprite grid; last (near the can) is a big 2x2 */
      .say .spray {
        position: absolute;
        right: 100%;
        top: 50%;
      }
      .say .spray i {
        position: absolute;
        width: var(--px);
        height: var(--px);
        background: #fff;
      }
      /* left (near can) two 1x1, big 2x2 near the bubble, scattered like a spray */
      .say .spray i:nth-child(1) {
        /* 1st — near the can (leftmost), 1x1, no shift */
        right: calc(var(--px) * 7);
        margin-top: 0;
      }
      .say .spray i:nth-child(2) {
        /* 2nd — middle, 1x1, shifted 2px down */
        right: calc(var(--px) * 4);
        margin-top: calc(var(--px) * 2);
      }
      .say .spray i:nth-child(3) {
        /* 3rd — near the bubble (rightmost), big 2x2, shifted 1px up */
        right: calc(var(--px) * 1);
        width: calc(var(--px) * 2);
        height: calc(var(--px) * 2);
        margin-top: calc(var(--px) * -1);
      }