{#- The gaze: the pair, for the login page and /about. Two
    eyes with **one eye of space** between them — anything closer looks
    unnatural — mirroring each other, and they blink **together**, never one
    (a single closing eye is the wink, and that belongs to the mark). Canonical
    geometry from the brand-r4 sheet; the blink itself lives in overview.css
    under `prefers-reduced-motion: no-preference`. -#}
<svg class="ls-gaze" width="210" height="105" viewBox="0 16 64 32"
     aria-hidden="true" focusable="false">
    <g transform="translate(0.81,22) scale(0.38)">
        <g transform="translate(64,0) scale(-1,1)">
            <path d="M10 12 C23 2.5 44 1 56 7.5 C43 4.5 25 7 12 13.5 Z" fill="var(--ls-brand-ink)"/>
            <g class="ls-eye-open">
                <path d="M7 34 C16 19 44 16 57 29 C48 42 18 44 7 34 Z"
                      fill="var(--ls-brand-sclera)" stroke="var(--ls-brand-ink)" stroke-width="1.6"/>
                <defs>
                    <clipPath id="ls-gaze-eye-a">
                        <path d="M7 34 C16 19 44 16 57 29 C48 42 18 44 7 34 Z"/>
                    </clipPath>
                </defs>
                <g clip-path="url(#ls-gaze-eye-a)">
                    <circle cx="33" cy="27.5" r="9.5" fill="var(--ls-brand-iris)"/>
                    <circle cx="33" cy="27.5" r="9.5" fill="none"
                            stroke="var(--ls-brand-iris-rim)" stroke-width="2.4"/>
                    <circle cx="33" cy="27.5" r="3.7" fill="var(--ls-brand-pupil)"/>
                    <circle cx="36.2" cy="24.6" r="2.1" fill="var(--ls-brand-sclera)"/>
                    <circle cx="30" cy="31" r="1.1" fill="var(--ls-brand-sclera)" opacity=".65"/>
                </g>
                <path d="M7 34 C16 19 44 16 57 29" fill="none"
                      stroke="var(--ls-brand-ink)" stroke-width="4.6" stroke-linecap="round"/>
                <path d="M54.5 25.5 L63.5 20.5 L57 31.5 Z" fill="var(--ls-brand-ink)"/>
                <path d="M48 19 C51 16 54 14.5 57 13.5 M41.5 16.8 C43 14 44.5 12.5 46.5 11"
                      fill="none" stroke="var(--ls-brand-ink)" stroke-width="2.3" stroke-linecap="round"/>
            </g>
            <g class="ls-eye-shut">
                <path d="M8 35 C20 45 44 44 56 31" fill="none"
                      stroke="var(--ls-brand-ink)" stroke-width="3.4" stroke-linecap="round"/>
                <path d="M49 40.8 C51.5 43.5 53.5 45.5 56 47 M42 42.8 C43.5 45.5 45 47.5 46.5 49.5 M54 37 C57 39 59.5 40.5 62 41.5"
                      fill="none" stroke="var(--ls-brand-ink)" stroke-width="2.3" stroke-linecap="round"/>
            </g>
        </g>
    </g>
    <g transform="translate(38.81,22) scale(0.38)">
        <path d="M10 12 C23 2.5 44 1 56 7.5 C43 4.5 25 7 12 13.5 Z" fill="var(--ls-brand-ink)"/>
        <g class="ls-eye-open">
            <path d="M7 34 C16 19 44 16 57 29 C48 42 18 44 7 34 Z"
                  fill="var(--ls-brand-sclera)" stroke="var(--ls-brand-ink)" stroke-width="1.6"/>
            <defs>
                <clipPath id="ls-gaze-eye-b">
                    <path d="M7 34 C16 19 44 16 57 29 C48 42 18 44 7 34 Z"/>
                </clipPath>
            </defs>
            <g clip-path="url(#ls-gaze-eye-b)">
                <circle cx="33" cy="27.5" r="9.5" fill="var(--ls-brand-iris)"/>
                <circle cx="33" cy="27.5" r="9.5" fill="none"
                        stroke="var(--ls-brand-iris-rim)" stroke-width="2.4"/>
                <circle cx="33" cy="27.5" r="3.7" fill="var(--ls-brand-pupil)"/>
                <circle cx="36.2" cy="24.6" r="2.1" fill="var(--ls-brand-sclera)"/>
                <circle cx="30" cy="31" r="1.1" fill="var(--ls-brand-sclera)" opacity=".65"/>
            </g>
            <path d="M7 34 C16 19 44 16 57 29" fill="none"
                  stroke="var(--ls-brand-ink)" stroke-width="4.6" stroke-linecap="round"/>
            <path d="M54.5 25.5 L63.5 20.5 L57 31.5 Z" fill="var(--ls-brand-ink)"/>
            <path d="M48 19 C51 16 54 14.5 57 13.5 M41.5 16.8 C43 14 44.5 12.5 46.5 11"
                  fill="none" stroke="var(--ls-brand-ink)" stroke-width="2.3" stroke-linecap="round"/>
        </g>
        <g class="ls-eye-shut">
            <path d="M8 35 C20 45 44 44 56 31" fill="none"
                  stroke="var(--ls-brand-ink)" stroke-width="3.4" stroke-linecap="round"/>
            <path d="M49 40.8 C51.5 43.5 53.5 45.5 56 47 M42 42.8 C43.5 45.5 45 47.5 46.5 49.5 M54 37 C57 39 59.5 40.5 62 41.5"
                  fill="none" stroke="var(--ls-brand-ink)" stroke-width="2.3" stroke-linecap="round"/>
        </g>
    </g>
</svg>