:root { color-scheme: dark; }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; background: #000000; color: #FFFFFF; overflow: hidden; }
    body { font-family: Consolas, "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace; }
    .stage {
      position: relative; isolation: isolate; display: grid; place-items: center;
      width: 100%; height: 100vh; height: 100dvh; min-height: 100svh;
      overflow: hidden; background: #000000; container-type: inline-size;
    }
    .wall {
      position: absolute; top: 50%; left: 50%; z-index: 0;
      width: var(--wall-size, 2400px); height: var(--wall-size, 2400px);
      transform: translate(-50%, -50%) rotate(-35deg);
      display: flex; flex-direction: column; overflow: hidden;
      pointer-events: none; background: #000000;
    }
    .row {
      width: 100%; height: var(--row-height, 36px); flex: 0 0 var(--row-height, 36px);
      background-color: #000000;
      background-image: var(--tile);
      background-size: var(--tile-width, 254px) var(--row-height, 36px);
      background-repeat: repeat-x;
      background-position: 0px 0px;
      animation: slide-left var(--speed, 46s) steps(var(--steps, 254), end) infinite;
      animation-delay: var(--offset, 0s);
    }
    .row.reverse { animation-name: slide-right; }
    .brand { position: relative; z-index: 1; display: grid; place-items: center; margin: 0; }
    .wordmark {
      display: block; margin: 0; padding: 0 2.5vw;
      font-size: clamp(23px, 6.4vw, 86px);
      line-height: 1.25; font-weight: 900;
      letter-spacing: -.10em; white-space: nowrap;
      color: #FFFFFF;
      -webkit-text-stroke: .105em #FFFFFF;
      paint-order: stroke fill;
      border: 0; outline: 0; text-shadow: none;
      transform: scaleY(1.75);
      transform-origin: center;
      font-variant-numeric: lining-nums tabular-nums;
      font-feature-settings: "tnum" 1, "lnum" 1;
      font-family: "Arial Black", Arial, Helvetica, sans-serif;
    }
    .suffix { margin-left: .125em; }
    @media (max-width: 500px) {
      .wordmark { font-size: clamp(21px, 6vw, 34px); }
    }
    @keyframes slide-left { to { background-position-x: var(--negative-tile-width, -254px); } }
    @keyframes slide-right { to { background-position-x: var(--tile-width, 254px); } }
    @media (prefers-reduced-motion: reduce) { .row { animation: none; } }