/* The waiting screen's hatch field. Loaded before the app so the page is never blank. */
      /* The waiting screen's hatch field: the same 64° lines as the wordmark,
         faint, revealed left to right over the wordmark's own 2.5 seconds.
         Static CSS, so it is the loading screen too. */
      html[data-route='waiting'] body {
        background: #fff;
      }
      html[data-route='waiting'] body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: repeating-linear-gradient(116deg, rgba(30, 42, 110, 0.11) 0 1px, transparent 1px 13px);
        -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 1) 78%);
        mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 1) 78%);
        clip-path: inset(0 100% 0 0);
        animation: hatch-field 2.4s cubic-bezier(0.33, 1, 0.68, 1) 0.1s forwards;
      }
      @keyframes hatch-field {
        to {
          clip-path: inset(0 0 0 0);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html[data-route='waiting'] body::before {
          animation: none;
          clip-path: none;
        }
      }