# AuthLayout

> Page shell for sign-in and sign-up screens: a centred card or a split layout with a brand panel, a heading, and a footer slot.

Source: https://docs.nasaqui.com/components/auth-layout

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/auth-layout.json
```

The page around an auth form. It gives the screen a `<main>`, the product mark, an `h1` with an optional description, and a
footer slot. Use it with any of the auth forms; the forms themselves render no heading.

## When to use

- Every sign-in, sign-up, recovery, verification and consent page.
- `variant="split"` when you have a brand panel to show beside the form on wide screens.

## When not to use

- Inside an app shell or a dialog: render the form directly.
- For account settings pages: use a settings layout.

## Import

```tsx
import { AuthLayout } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { AuthLayout, SignInFlow } from "@fadymondy/nasaq/web";

export function SignInPage() {
  return (
    <AuthLayout
      title="Sign in"
      description="Use your work email to continue."
      prompt={<>Don't have an account? <a href="/sign-up">Create one</a></>}
    >
      <SignInFlow onPassword={async ({ email, password }) => { /* sign in */ }} forgotPassword={<a href="/forgot-password">Forgot password?</a>} />
    </AuthLayout>
  );
}
```

For sign-in prefer [`SignInFlow`](https://docs.nasaqui.com/components/sign-in-flow) (email first, then password, code, SSO or sign-up);
`LoginForm` stays for products that only ever use a password.

## Anatomy

```
AuthLayout                        data-slot="auth-layout", data-variant="card" | "split"
├─ AuthBackdrop                   data-slot="auth-backdrop" (cubes and pointer layers; aria-hidden)
├─ AuthEmblem (the default mark)  data-slot="auth-emblem": rings of cells around a core
│  └─ core                         data-emblem-core: the product mark, which turns into a lock (data-emblem-lock)
├─ aside (split only, lg and up)  data-slot="auth-layout-panel", with its own AuthBackdrop
└─ main
   ├─ card (card variant)         the standard Card: mark, centred h1 + description, children, prompt
   │  └─ prompt                    data-slot="auth-layout-prompt": "Don't have an account? Create one"
   │  (split: the same stack, straight on the page, with the mark on top of the form)
   ├─ AuthOrigin (card variant)   data-slot="auth-origin": secure-connection check + the current host
   └─ footer                      AuthFooter or your own
```

## API

**AuthLayout**: every `div` prop, plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"card" \| "split"` | `"card"` | Centred card, or two columns from the `lg` breakpoint. |
| `mark` | `ReactNode` | `<AuthEmblem />` | The brand mark on top of the form, above the title, in both variants. `null` hides it. |
| `title` | `ReactNode` | | Page heading, rendered as the `h1`. |
| `description` | `ReactNode` | | One line under the title. |
| `panel` | `ReactNode` | | Content of the brand side in the split layout. Hidden below `lg`. |
| `logo` | `ReactNode` | `<ProductLogo />` | Your own logo in the default split panel (when no `panel` is passed). Use it, with `mark`, so an app that is not a Nasaq brand never shows a Nasaq mark. |
| `prompt` | `ReactNode` | | One centred line under the form that links to the other auth page: "Don't have an account? Create one" on sign-in, "Already have an account? Sign in" on sign-up. Links inside it get the foreground colour and an underline on hover. |
| `footer` | `ReactNode` | | Slot under the form. |
| `backdrop` | `boolean` | `true` | A plain lattice of tiny cubes around the form; the cubes under the mouse light up. |
| `origin` | `ReactNode \| false` | `<AuthOrigin />` | The line under the card that says whether the connection is secure and names the host. `false` hides it. Card variant only. |

**AuthEmblem**: the identity mark: rings of small cells in the brand colours around the product mark. Every `div` prop, plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number` | `112` | Width and height in px. The core mark is 30% of it. |
| `children` | `ReactNode` | `<ProductMark />` | What sits in the core before the lock. |
| `lock` | `boolean` | `true` | After the entrance the mark turns into a lock that clicks shut. `false` keeps the mark. |
| `busy` | `boolean` | | Scans the rings. Needed only outside an `AuthLayout`; inside one it scans while any control is `aria-busy`. |

It is decorative (`aria-hidden`). It is the default `mark`; render it yourself to change its size or core. It also
works on its own, over any component (a verify dialog, a passkey prompt, a loading card):

```tsx
import { AuthBackdrop, AuthEmblem, Button, Card, CardContent } from "@fadymondy/nasaq/web";

export function VerifyCard({ pending, onVerify }: { pending: boolean; onVerify: () => void }) {
  return (
    <div className="relative isolate grid place-items-center p-8">
      <AuthBackdrop />
      <Card className="w-full max-w-sm">
        <CardContent className="flex flex-col items-center gap-4 text-center">
          <AuthEmblem size={96} busy={pending} />
          <p className="text-h3">Confirm it is you</p>
          <Button className="w-full" onClick={onVerify} aria-busy={pending}>Verify</Button>
        </CardContent>
      </Card>
    </div>
  );
}
```

Give the emblem its own heading or label nearby; it carries no accessible name.

**AuthBackdrop**: the scene on its own, for custom auth pages. Decorative: `aria-hidden`, no pointer events,
`absolute inset-0 -z-10`, so its parent needs `relative isolate`.

**AuthOrigin**: checks `window.isSecureContext` and shows `window.location.host`. On a secure page it reads
"Secure connection to example.com" with a green shield; on an insecure one it switches to a danger-coloured warning
not to enter a password there (`data-secure` is absent). Rendered after mount so server and client markup match.

**AuthFooter**: `links?: AuthFooterLink[]` (`{ label, href, external? }`) and `end?: ReactNode` (usually a
`LocaleSwitcher`). External links open in a new tab with `rel="noreferrer"`.

Shared types: `AuthSubmitResult` and `AuthSubmitFailure` (`{ error?, fieldErrors? }`) are exported from the package
and are what every auth form's `onSubmit` may return.

## Examples

**Split layout with a brand panel**

```tsx
import { AuthFooter, AuthLayout, LocaleSwitcher, LoginForm } from "@fadymondy/nasaq/web";

export function SplitSignIn() {
  return (
    <AuthLayout
      variant="split"
      panel={<p className="text-h2">One account for every product.</p>}
      title="Welcome back"
      footer={<AuthFooter links={[{ label: "Terms", href: "/terms" }]} end={<LocaleSwitcher />} />}
    >
      <LoginForm onSubmit={async () => {}} />
    </AuthLayout>
  );
}
```

## Accessibility

- The content sits in `<main>`; the title is the page's single `h1`. Do not add another `h1` inside (for the consent
  screen pass `headingLevel={1}` and omit `title`).
- The brand panel is decorative content in an `aside`; do not put the only copy of important information there,
  it is hidden on small screens.
- Footer links are a real `<nav>` list of anchors.

## Motion

The page settles in with a calm, staged entrance (CSS only, in `@fadymondy/nasaq/web/styles.css`) so a sign-in
screen never just pops:

- **Backdrop:** the grid fades in once (900ms) and then stays still. When the mouse moves, the cubes under it light
  up and the light follows the cursor closely (120ms); it fades out when the mouse leaves the page. Touch does not
  trigger it. There are no gradients, lines or flashes; the form stays the brightest thing on the page.
- **Emblem:** the cells sweep in ring by ring (about 1s). At about 1.5s the mark fades out and a lock fades in, its
  shackle drops shut at about 2.2s, and one ripple of light runs out through the rings. After that the rings only
  turn, very slowly (a full turn takes 2 to 4 minutes, alternate rings in opposite directions). While the form is
  `aria-busy` (or the emblem has `busy`) the rings scan. With reduced motion the lock shows straight away and nothing moves.
- **Card:** the card lifts 12px (80ms). The mark, the heading and each row of the form follow 50ms apart from
  180ms. The footer fades in last (520ms).
- `SignInFlow` steps join the same stagger; after a step change only the new step's rows move.
- **Split:** the brand panel fades in while the form side staggers from 60ms.
- A `<form>` passed as a child is staggered row by row (its direct children), not as one block.
- The page entrance is finished by about 1s, the emblem's lock by about 2.5s. `prefers-reduced-motion` turns it off (the global guard; the pointer light is off), and the fill mode is
  `backwards`, so no transform is left on the page after the entrance.
- The entrance is vertical only, so it reads the same in LTR and RTL.

## RTL & i18n

- The split layout puts the panel at the inline start and the form at the end, so it flips in Arabic. The panel's
  divider is `border-e`.
- The mark and heading are centred in both variants.
- The host in the origin line is always LTR (`<bdi dir="ltr">`).

## Styling & tokens

- The card is the standard Nasaq `Card` and the form uses the standard `Button`s and fields, so a sign-in page
  looks like the rest of the product. The panel is `bg-muted`.
- The backdrop is a flat lattice of 2px cubes in `--foreground` at 8% (5% in dark mode, so the page stays dark), and
  the lit cubes under the pointer are `--foreground` at 40% (30% in dark). Change the spacing with `--nq-auth-cell`
  (default `12px`), the colours with `--nq-auth-dot` and `--nq-auth-lit`.
- The card keeps the standard `Card` surface, with a soft, deep shadow.
- Extend with `className`. The layout fills the viewport height (`min-h-svh`).

## Do / Don't

- Do put one auth form in each layout.
- Do link sign-in and sign-up to each other with `prompt`, and give the password field a "Forgot password?" link
  (the form's `forgotPassword` slot).
- Do give the split panel something useful, not only decoration.
- Don't nest an AuthLayout inside another one.
- Don't hide required information in the panel.

## Related

- [`sign-in-flow`](https://docs.nasaqui.com/components/sign-in-flow)
- [`login-form`](https://docs.nasaqui.com/components/login-form)
- [`register-form`](https://docs.nasaqui.com/components/register-form)
- [`oauth-consent`](https://docs.nasaqui.com/components/oauth-consent)
- [`product-logo`](https://docs.nasaqui.com/components/product-logo)
- [`card`](https://docs.nasaqui.com/components/card)

## Lab

https://docs.nasaqui.com/?path=/docs/components-auth-auth-layout--docs

## Code

### React

```tsx
import { AuthLayout, SignInFlow } from "@fadymondy/nasaq/web";

export function SignInPage() {
  return (
    <AuthLayout
      title="Sign in"
      description="Use your work email to continue."
      prompt={<>Don't have an account? <a href="/sign-up">Create one</a></>}
    >
      <SignInFlow onPassword={async ({ email, password }) => { /* sign in */ }} forgotPassword={<a href="/forgot-password">Forgot password?</a>} />
    </AuthLayout>
  );
}
```

### shadcn

```tsx
import { AuthLayout } from "@/components/ui/auth-layout";
import { SignInFlow } from "@/components/ui/sign-in-flow";

export function SignInPage() {
  return (
    <AuthLayout
      title="Sign in"
      description="Use your work email to continue."
      prompt={<>Don't have an account? <a href="/sign-up">Create one</a></>}
    >
      <SignInFlow onPassword={async ({ email, password }) => { /* sign in */ }} forgotPassword={<a href="/forgot-password">Forgot password?</a>} />
    </AuthLayout>
  );
}
```

### Vue

```vue
<script setup lang="ts">
import { NqAuthFooter, NqAuthLayout } from "@fadymondy/nasaq/vue";
</script>

<template>
  <NqAuthLayout title="Sign in" description="Use your work email to continue.">
    <p class="text-center text-body-sm text-muted-foreground">The sign-in form goes here.</p>
    <template #prompt>Don't have an account? <a href="/sign-up">Create one</a></template>
    <template #footer><NqAuthFooter :links="[{ label: 'Terms', href: '/terms' }, { label: 'Privacy', href: '/privacy' }]" /></template>
  </NqAuthLayout>
</template>
```

### Blade

```blade
<x-nq::auth-layout title="Sign in" description="Use your work email to continue.">
    <p class="text-center text-body-sm text-muted-foreground">The sign-in form goes here.</p>
    <x-slot:prompt>Don't have an account? <a href="/sign-up">Create one</a></x-slot:prompt>
    <x-slot:footer><x-nq::auth-layout.footer :links="[['label' => 'Terms', 'href' => '/terms'], ['label' => 'Privacy', 'href' => '/privacy']]" /></x-slot:footer>
</x-nq::auth-layout>
```

### HTML + Alpine

```html
<div data-slot="auth-layout" data-variant="card" class="relative isolate flex min-h-dvh flex-col items-center overflow-hidden bg-background p-4 text-foreground sm:p-6">
         <div data-slot="auth-backdrop" aria-hidden="true" x-data="nqAuthBackdrop()" class="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
    <div data-auth-layer="cubes"></div>
    <div data-auth-layer="pointer"></div>
</div>
         <main data-slot="auth-layout-main" class="flex w-full max-w-[26rem] flex-1 flex-col justify-center gap-4 py-8">
            <div data-slot="card" data-auth-card="data-auth-card" data-auth-stagger="data-auth-stagger" class="flex flex-col rounded-card border border-border bg-card text-card-foreground gap-6 px-6 py-8 sm:px-10 sm:py-10"><div data-slot="auth-layout-mark" class="flex justify-center"> <div data-slot="auth-emblem"  aria-hidden="true" style="width: 112px; height: 112px"
    class="relative grid shrink-0 place-items-center">
    <svg viewBox="-60 -60 120 120" width="112" height="112" class="absolute inset-0 overflow-visible">
                    <g data-emblem-ring="0">
                                                        <g transform="translate(0 -31) rotate(-45.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 0%, var(--nq-action)); opacity: 1; --nq-emblem-t: 0; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(10.6 -29.13) rotate(-25.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 22%, var(--nq-action)); opacity: 1; --nq-emblem-t: 0.06; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(19.93 -23.75) rotate(-5.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 44%, var(--nq-action)); opacity: 1; --nq-emblem-t: 0.11; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(26.85 -15.5) rotate(15.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 67%, var(--nq-action)); opacity: 1; --nq-emblem-t: 0.17; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(30.53 -5.38) rotate(35.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 89%, var(--nq-action)); opacity: 1; --nq-emblem-t: 0.22; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(30.53 5.38) rotate(55.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-accent) 11%, var(--nq-brand-l)); opacity: 1; --nq-emblem-t: 0.28; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(26.85 15.5) rotate(75.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-accent) 33%, var(--nq-brand-l)); opacity: 1; --nq-emblem-t: 0.33; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(19.93 23.75) rotate(95.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-accent) 56%, var(--nq-brand-l)); opacity: 1; --nq-emblem-t: 0.39; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(10.6 29.13) rotate(115.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-accent) 78%, var(--nq-brand-l)); opacity: 1; --nq-emblem-t: 0.44; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(0 31) rotate(135.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand) 0%, var(--nq-accent)); opacity: 1; --nq-emblem-t: 0.5; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(-10.6 29.13) rotate(155.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand) 22%, var(--nq-accent)); opacity: 1; --nq-emblem-t: 0.56; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(-19.93 23.75) rotate(175.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand) 44%, var(--nq-accent)); opacity: 1; --nq-emblem-t: 0.61; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(-26.85 15.5) rotate(195.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand) 67%, var(--nq-accent)); opacity: 1; --nq-emblem-t: 0.67; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(-30.53 5.38) rotate(215.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-brand) 89%, var(--nq-accent)); opacity: 1; --nq-emblem-t: 0.72; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(-30.53 -5.38) rotate(235.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-action) 11%, var(--nq-brand)); opacity: 1; --nq-emblem-t: 0.78; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(-26.85 -15.5) rotate(255.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-action) 33%, var(--nq-brand)); opacity: 1; --nq-emblem-t: 0.83; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(-19.93 -23.75) rotate(275.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-action) 56%, var(--nq-brand)); opacity: 1; --nq-emblem-t: 0.89; --nq-emblem-ring: 0"></rect>
                    </g>
                                                        <g transform="translate(-10.6 -29.13) rotate(295.0)">
                        <rect data-emblem-cell x="-2.1" y="-2.1" width="4.2" height="4.2" rx="0.92"
                            style="fill: color-mix(in oklab, var(--nq-action) 78%, var(--nq-brand)); opacity: 1; --nq-emblem-t: 0.94; --nq-emblem-ring: 0"></rect>
                    </g>
                            </g>
                    <g data-emblem-ring="1">
                                                        <g transform="translate(5.09 -38.67) rotate(-37.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 8%, var(--nq-action)); opacity: 0.85; --nq-emblem-t: 0.02; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(14.92 -36.03) rotate(-22.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 25%, var(--nq-action)); opacity: 0.85; --nq-emblem-t: 0.06; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(23.74 -30.94) rotate(-7.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 42%, var(--nq-action)); opacity: 0.85; --nq-emblem-t: 0.1; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(30.94 -23.74) rotate(7.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 58%, var(--nq-action)); opacity: 0.85; --nq-emblem-t: 0.15; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(36.03 -14.92) rotate(22.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 75%, var(--nq-action)); opacity: 0.85; --nq-emblem-t: 0.19; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(38.67 -5.09) rotate(37.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 92%, var(--nq-action)); opacity: 0.85; --nq-emblem-t: 0.23; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(38.67 5.09) rotate(52.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-accent) 8%, var(--nq-brand-l)); opacity: 0.85; --nq-emblem-t: 0.27; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(36.03 14.92) rotate(67.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-accent) 25%, var(--nq-brand-l)); opacity: 0.85; --nq-emblem-t: 0.31; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(30.94 23.74) rotate(82.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-accent) 42%, var(--nq-brand-l)); opacity: 0.85; --nq-emblem-t: 0.35; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(23.74 30.94) rotate(97.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-accent) 58%, var(--nq-brand-l)); opacity: 0.85; --nq-emblem-t: 0.4; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(14.92 36.03) rotate(112.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-accent) 75%, var(--nq-brand-l)); opacity: 0.85; --nq-emblem-t: 0.44; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(5.09 38.67) rotate(127.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-accent) 92%, var(--nq-brand-l)); opacity: 0.85; --nq-emblem-t: 0.48; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-5.09 38.67) rotate(142.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand) 8%, var(--nq-accent)); opacity: 0.85; --nq-emblem-t: 0.52; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-14.92 36.03) rotate(157.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand) 25%, var(--nq-accent)); opacity: 0.85; --nq-emblem-t: 0.56; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-23.74 30.94) rotate(172.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand) 42%, var(--nq-accent)); opacity: 0.85; --nq-emblem-t: 0.6; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-30.94 23.74) rotate(187.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand) 58%, var(--nq-accent)); opacity: 0.85; --nq-emblem-t: 0.65; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-36.03 14.92) rotate(202.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand) 75%, var(--nq-accent)); opacity: 0.85; --nq-emblem-t: 0.69; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-38.67 5.09) rotate(217.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-brand) 92%, var(--nq-accent)); opacity: 0.85; --nq-emblem-t: 0.73; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-38.67 -5.09) rotate(232.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-action) 8%, var(--nq-brand)); opacity: 0.85; --nq-emblem-t: 0.77; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-36.03 -14.92) rotate(247.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-action) 25%, var(--nq-brand)); opacity: 0.85; --nq-emblem-t: 0.81; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-30.94 -23.74) rotate(262.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-action) 42%, var(--nq-brand)); opacity: 0.85; --nq-emblem-t: 0.85; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-23.74 -30.94) rotate(277.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-action) 58%, var(--nq-brand)); opacity: 0.85; --nq-emblem-t: 0.9; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-14.92 -36.03) rotate(292.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-action) 75%, var(--nq-brand)); opacity: 0.85; --nq-emblem-t: 0.94; --nq-emblem-ring: 1"></rect>
                    </g>
                                                        <g transform="translate(-5.09 -38.67) rotate(307.5)">
                        <rect data-emblem-cell x="-1.8" y="-1.8" width="3.6" height="3.6" rx="0.79"
                            style="fill: color-mix(in oklab, var(--nq-action) 92%, var(--nq-brand)); opacity: 0.85; --nq-emblem-t: 0.98; --nq-emblem-ring: 1"></rect>
                    </g>
                            </g>
                    <g data-emblem-ring="2">
                                                        <g transform="translate(0 -47) rotate(-45.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 0%, var(--nq-action)); opacity: 0.65; --nq-emblem-t: 0; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(9.77 -45.97) rotate(-33.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 13%, var(--nq-action)); opacity: 0.65; --nq-emblem-t: 0.03; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(19.12 -42.94) rotate(-21.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 27%, var(--nq-action)); opacity: 0.65; --nq-emblem-t: 0.07; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(27.63 -38.02) rotate(-9.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 40%, var(--nq-action)); opacity: 0.65; --nq-emblem-t: 0.1; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(34.93 -31.45) rotate(3.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 53%, var(--nq-action)); opacity: 0.65; --nq-emblem-t: 0.13; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(40.7 -23.5) rotate(15.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 67%, var(--nq-action)); opacity: 0.65; --nq-emblem-t: 0.17; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(44.7 -14.52) rotate(27.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 80%, var(--nq-action)); opacity: 0.65; --nq-emblem-t: 0.2; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(46.74 -4.91) rotate(39.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 93%, var(--nq-action)); opacity: 0.65; --nq-emblem-t: 0.23; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(46.74 4.91) rotate(51.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-accent) 7%, var(--nq-brand-l)); opacity: 0.65; --nq-emblem-t: 0.27; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(44.7 14.52) rotate(63.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-accent) 20%, var(--nq-brand-l)); opacity: 0.65; --nq-emblem-t: 0.3; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(40.7 23.5) rotate(75.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-accent) 33%, var(--nq-brand-l)); opacity: 0.65; --nq-emblem-t: 0.33; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(34.93 31.45) rotate(87.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-accent) 47%, var(--nq-brand-l)); opacity: 0.65; --nq-emblem-t: 0.37; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(27.63 38.02) rotate(99.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-accent) 60%, var(--nq-brand-l)); opacity: 0.65; --nq-emblem-t: 0.4; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(19.12 42.94) rotate(111.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-accent) 73%, var(--nq-brand-l)); opacity: 0.65; --nq-emblem-t: 0.43; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(9.77 45.97) rotate(123.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-accent) 87%, var(--nq-brand-l)); opacity: 0.65; --nq-emblem-t: 0.47; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(0 47) rotate(135.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand) 0%, var(--nq-accent)); opacity: 0.65; --nq-emblem-t: 0.5; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-9.77 45.97) rotate(147.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand) 13%, var(--nq-accent)); opacity: 0.65; --nq-emblem-t: 0.53; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-19.12 42.94) rotate(159.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand) 27%, var(--nq-accent)); opacity: 0.65; --nq-emblem-t: 0.57; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-27.63 38.02) rotate(171.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand) 40%, var(--nq-accent)); opacity: 0.65; --nq-emblem-t: 0.6; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-34.93 31.45) rotate(183.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand) 53%, var(--nq-accent)); opacity: 0.65; --nq-emblem-t: 0.63; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-40.7 23.5) rotate(195.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand) 67%, var(--nq-accent)); opacity: 0.65; --nq-emblem-t: 0.67; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-44.7 14.52) rotate(207.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand) 80%, var(--nq-accent)); opacity: 0.65; --nq-emblem-t: 0.7; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-46.74 4.91) rotate(219.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-brand) 93%, var(--nq-accent)); opacity: 0.65; --nq-emblem-t: 0.73; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-46.74 -4.91) rotate(231.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-action) 7%, var(--nq-brand)); opacity: 0.65; --nq-emblem-t: 0.77; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-44.7 -14.52) rotate(243.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-action) 20%, var(--nq-brand)); opacity: 0.65; --nq-emblem-t: 0.8; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-40.7 -23.5) rotate(255.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-action) 33%, var(--nq-brand)); opacity: 0.65; --nq-emblem-t: 0.83; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-34.93 -31.45) rotate(267.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-action) 47%, var(--nq-brand)); opacity: 0.65; --nq-emblem-t: 0.87; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-27.63 -38.02) rotate(279.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-action) 60%, var(--nq-brand)); opacity: 0.65; --nq-emblem-t: 0.9; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-19.12 -42.94) rotate(291.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-action) 73%, var(--nq-brand)); opacity: 0.65; --nq-emblem-t: 0.93; --nq-emblem-ring: 2"></rect>
                    </g>
                                                        <g transform="translate(-9.77 -45.97) rotate(303.0)">
                        <rect data-emblem-cell x="-1.5" y="-1.5" width="3" height="3" rx="0.66"
                            style="fill: color-mix(in oklab, var(--nq-action) 87%, var(--nq-brand)); opacity: 0.65; --nq-emblem-t: 0.97; --nq-emblem-ring: 2"></rect>
                    </g>
                            </g>
                    <g data-emblem-ring="3">
                                                        <g transform="translate(4.79 -54.79) rotate(-40.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 6%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.01; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(14.24 -53.13) rotate(-30.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 17%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.04; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(23.24 -49.85) rotate(-20.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 28%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.07; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(31.55 -45.05) rotate(-10.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 39%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.1; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(38.89 -38.89) rotate(0.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 50%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.13; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(45.05 -31.55) rotate(10.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 61%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.15; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(49.85 -23.24) rotate(20.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 72%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.18; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(53.13 -14.24) rotate(30.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 83%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.21; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(54.79 -4.79) rotate(40.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand-l) 94%, var(--nq-action)); opacity: 0.45; --nq-emblem-t: 0.24; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(54.79 4.79) rotate(50.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 6%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.26; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(53.13 14.24) rotate(60.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 17%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.29; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(49.85 23.24) rotate(70.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 28%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.32; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(45.05 31.55) rotate(80.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 39%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.35; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(38.89 38.89) rotate(90.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 50%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.38; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(31.55 45.05) rotate(100.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 61%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.4; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(23.24 49.85) rotate(110.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 72%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.43; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(14.24 53.13) rotate(120.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 83%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.46; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(4.79 54.79) rotate(130.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-accent) 94%, var(--nq-brand-l)); opacity: 0.45; --nq-emblem-t: 0.49; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-4.79 54.79) rotate(140.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 6%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.51; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-14.24 53.13) rotate(150.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 17%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.54; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-23.24 49.85) rotate(160.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 28%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.57; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-31.55 45.05) rotate(170.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 39%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.6; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-38.89 38.89) rotate(180.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 50%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.63; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-45.05 31.55) rotate(190.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 61%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.65; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-49.85 23.24) rotate(200.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 72%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.68; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-53.13 14.24) rotate(210.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 83%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.71; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-54.79 4.79) rotate(220.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-brand) 94%, var(--nq-accent)); opacity: 0.45; --nq-emblem-t: 0.74; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-54.79 -4.79) rotate(230.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 6%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.76; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-53.13 -14.24) rotate(240.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 17%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.79; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-49.85 -23.24) rotate(250.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 28%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.82; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-45.05 -31.55) rotate(260.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 39%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.85; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-38.89 -38.89) rotate(270.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 50%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.88; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-31.55 -45.05) rotate(280.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 61%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.9; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-23.24 -49.85) rotate(290.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 72%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.93; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-14.24 -53.13) rotate(300.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 83%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.96; --nq-emblem-ring: 3"></rect>
                    </g>
                                                        <g transform="translate(-4.79 -54.79) rotate(310.0)">
                        <rect data-emblem-cell x="-1.2" y="-1.2" width="2.4" height="2.4" rx="0.53"
                            style="fill: color-mix(in oklab, var(--nq-action) 94%, var(--nq-brand)); opacity: 0.45; --nq-emblem-t: 0.99; --nq-emblem-ring: 3"></rect>
                    </g>
                            </g>
            </svg>
    <span data-emblem-core  data-lock  class="relative grid place-items-center *:col-start-1 *:row-start-1">
        <span data-emblem-mark class="grid place-items-center">
             <svg data-slot="product-mark" viewBox="0 0 100 100" width="34" height="34"  role="img" aria-label="Nasaq"  shape-rendering="crispEdges"  class="shrink-0">
            <g class="dark:hidden">
                            <rect x="0" y="20" width="20" height="20" fill="#15694A" />
                            <rect x="80" y="20" width="20" height="20" fill="#15694A" />
                            <rect x="20" y="40" width="20" height="20" fill="#15694A" />
                            <rect x="60" y="40" width="20" height="20" fill="#15694A" />
                            <rect x="40" y="60" width="20" height="20" fill="#C9A227" />
                    </g>
        <g class="hidden dark:block">
                            <rect x="0" y="20" width="20" height="20" fill="#4CC495" />
                            <rect x="80" y="20" width="20" height="20" fill="#4CC495" />
                            <rect x="20" y="40" width="20" height="20" fill="#4CC495" />
                            <rect x="60" y="40" width="20" height="20" fill="#4CC495" />
                            <rect x="40" y="60" width="20" height="20" fill="#C9A227" />
                    </g>
    </svg>
         </span>
                    <svg data-emblem-lock viewBox="0 0 24 24" width="34" height="34" class="overflow-visible">
                <path data-emblem-shackle d="M7.5 11V7.5a4.5 4.5 0 0 1 9 0V11" fill="none" stroke="var(--nq-action)" stroke-width="2.4" stroke-linecap="round" />
                <rect x="4" y="10.5" width="16" height="11.5" rx="3" fill="var(--nq-action)" />
                <path d="M12 14.6v3" stroke="var(--nq-on-action)" stroke-width="2.2" stroke-linecap="round" />
            </svg>
            </span>
</div>
 </div>
                                                    <header data-slot="auth-layout-header" class="flex flex-col items-center gap-1.5 text-center">
                         <h1 data-slot="auth-layout-title" class="text-h1 text-foreground">Sign in</h1>                          <p class="text-body-sm text-muted-foreground">Use your work email to continue.</p>                     </header>
                                <p class="text-center text-body-sm text-muted-foreground">The sign-in form goes here.</p>
                 <p data-slot="auth-layout-prompt" class="text-center text-body-sm text-muted-foreground [&amp;_a]:font-medium [&amp;_a]:text-foreground [&amp;_a]:underline-offset-4 [&amp;_a:hover]:underline">Don't have an account? <a href="/sign-up">Create one</a></p></div>
              <p data-slot="auth-origin" x-data="nqAuthOrigin()" x-show="host" x-cloak hidden x-bind:data-secure="secure ? '' : null"
    class="flex flex-wrap items-center justify-center gap-x-1.5 gap-y-0.5 text-center text-caption text-muted-foreground"
    x-bind:class="secure ? '' : '!text-nq-danger-text'">
    <svg x-show="secure" aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
  <path d="m9 12 2 2 4-4"/>
</svg>    <svg x-show="!secure" aria-hidden="true" class="size-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
  <path d="M12 8v4"/>
  <path d="M12 16h.01"/>
</svg>    <span data-origin-text x-text="secure ? 'Secure connection to' : 'Not a secure connection. Don\u0027t enter a password on'"></span>
    <bdi dir="ltr" class="font-medium text-foreground" x-text="host"></bdi>
</p>
          </main>
                    <div class="w-full max-w-[26rem]"><footer data-slot="auth-layout-footer" class="text-caption text-muted-foreground"><div data-slot="auth-footer" class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
    <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
                    <a href="/terms"                 class="underline-offset-4 outline-none hover:text-foreground hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Terms</a>
                    <a href="/privacy"                 class="underline-offset-4 outline-none hover:text-foreground hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">Privacy</a>
    </div>
    </div></footer></div>
            </div>
```