astro-island,astro-slot,astro-static-slot{display:contents}
#fern-toc,#fern-sidebar[data-state="sticky"],#fern-sidebar[data-state="fixed"],#fern-sidebar-spacer{visibility:hidden;width:0;overflow:hidden;display:none;}.fern-main:has(>#fern-sidebar[data-viewport="desktop"][data-state="sticky"]){min-height:0!important;}

        .hero-strokes {
          position: absolute;
          inset: 0;
          z-index: 1;
          pointer-events: none;
          overflow: hidden;
          border-radius: inherit;
        }

        .hero-stroke {
          position: absolute;
          top: -6%;
          width: 40%;
          max-width: 380px;
          aspect-ratio: 1 / 1;
          opacity: 0.45;
        }

        .hero-stroke--left { left: -3%; transform: scaleX(-1); }
        .hero-stroke--right { right: -3%; }

        @media (max-width: 720px) {
          .hero-stroke { width: 55%; opacity: 0.28; }
        }
      

        .hero-terminal {
          width: 100%;
          max-width: 720px;
          margin: 20px auto 0;
          pointer-events: none;
        }

        .ht-window {
          background: #08160f;
          border: 1px solid rgba(0, 210, 185, 0.18);
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
          text-align: left;
          opacity: 0;
          transform: translateY(14px);
          animation: htWindowIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        .ht-bar {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 11px 14px;
          background: #06120c;
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .ht-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
        .ht-dot--r { background: #ff5f56; }
        .ht-dot--y { background: #ffbd2e; }
        .ht-dot--g { background: #27c93f; }

        .ht-title {
          margin-left: 8px;
          font-family: "Founders Grotesk Mono", ui-monospace, Menlo, monospace;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.35);
        }

        .ht-body {
          padding: 18px 20px 22px;
          font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
          font-size: 13.5px;
          line-height: 1.75;
          color: #cfe3d9;
          white-space: pre;
        }

        .ht-prompt { color: #00d2b9; margin-right: 10px; font-weight: 600; }

        /* Typing effect: reveal the command left-to-right, blinking caret at edge. */
        .ht-typed {
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          vertical-align: bottom;
          width: 0;
          border-right: 2px solid #00d2b9;
          animation: htType 1.9s steps(58, end) forwards 0.5s,
                     htCaret 0.9s step-end infinite 0.5s;
        }

        .ht-cont {
          color: #a7bcb1;
          opacity: 0;
          animation: htFade 0.35s ease forwards 2.5s;
        }

        .ht-res {
          opacity: 0;
          animation: htFade 0.3s ease forwards;
          animation-delay: calc(3s + var(--i) * 0.11s);
        }

        .ht-key { color: #5eead4; }
        .ht-str { color: #9ae6b4; }
        .ht-num { color: #f6ad55; }
        .ht-bool { color: #f6ad55; }

        @keyframes htWindowIn { to { opacity: 1; transform: translateY(0); } }
        @keyframes htType { to { width: 58ch; } }
        @keyframes htFade { to { opacity: 1; } }
        @keyframes htCaret {
          0%, 100% { border-right-color: #00d2b9; }
          50% { border-right-color: transparent; }
        }

        @media (max-width: 600px) {
          .ht-body { font-size: 11.5px; padding: 14px 14px 18px; }
        }

        /* Reduced motion: show the final state, no typing/streaming. */
        @media (prefers-reduced-motion: reduce) {
          .ht-window { opacity: 1; transform: none; animation: none; }
          .ht-typed {
            width: auto; border-right: none; animation: none; white-space: normal;
          }
          .ht-cont, .ht-res { opacity: 1; animation: none; }
        }
      

        .company-marquee {
          position: relative;
          width: 100%;
          overflow: hidden;
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        }

        .company-marquee-track {
          display: flex;
          align-items: center;
          width: max-content;
          animation: companyMarquee 38s linear infinite;
        }

        .company-marquee-track img {
          width: 150px;
          height: 26px;
          flex: none;
          object-fit: contain;
          opacity: 0.7;
          /* grey logos read on white in light mode; invert to white for dark mode */
          filter: grayscale(1) brightness(0.55);
        }

        :root.dark .company-marquee-track img,
        .dark .company-marquee-track img {
          opacity: 0.6;
          filter: brightness(0) invert(1);
        }

        @keyframes companyMarquee {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }

        @media (prefers-reduced-motion: reduce) {
          .company-marquee-track {
            animation: none;
            transform: none;
          }
        }

        @media (max-width: 640px) {
          .company-marquee-track img {
            width: 110px;
            height: 22px;
          }
        }