# InviteAccept

> The public accept-invitation page. It covers a valid invitation with accept and decline or sign in first, an expired one, one sent to another account, one already used and one that was cancelled.

Source: https://docs.nasaqui.com/components/invite-accept

## Install

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

What a person sees after clicking the link in an invitation email. You resolve the link on the server and pass
the outcome as `state`; the page shows the right message and the right next step for it.

## When to use

- The landing page of an invitation link, signed in or not.

## When not to use

- Asking for consent for a third-party app: use `OAuthConsent`.
- Inviting people (the sender side): use `MembersManager`.

## Import

```tsx
import { InviteAccept } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
<InviteAccept
  state="valid"
  workspace={{ name: "Sahab Studio", meta: "12 members" }}
  invitedBy={{ name: "Sara Alharbi" }}
  role="Admin"
  inviteEmail="omar@example.com"
  account={{ name: "Omar Khalid", email: "omar@example.com" }}
  onAccept={() => api.acceptInvite(token)}
  onDecline={() => api.declineInvite(token)}
/>
```

## Anatomy

```
InviteAccept (AuthLayout, or bare)   data-slot="invite-accept", data-state
├─ state icon                           for every state except valid
├─ workspace row                        logo, name, meta, role badge
├─ details                              role, invited email, expiry (valid)
└─ actions                              by state
```

## States

| `state` | Shows | Actions |
| --- | --- | --- |
| `valid`, signed in | workspace, role, expiry, who you are | Accept, Decline |
| `valid`, signed out (`account` empty) | the invited email | `onSignIn`, `onSignUp` |
| `expired` | how to get a new one | `onRequestNew`; a success message after |
| `wrong-account` | invited email versus signed-in email | `onSwitchAccount` |
| `already-accepted` | you are already a member | `onOpenWorkspace` |
| `revoked` | the inviter cancelled it | `onGoHome` |

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `state` | `InviteState` | required | One of the five outcomes. |
| `workspace` | `{ name, logo?, meta? }` | required | |
| `invitedBy` | `{ name, email? }` | none | Names the sender in the copy. |
| `role` | `string` | none | The role label the person gets. |
| `inviteEmail` | `string` | none | Where the invitation was sent. Always left-to-right. |
| `expiresAt` | `string \| number \| Date` | none | |
| `account` | `{ name, email, avatar? } \| null` | none | The signed-in account. |
| `onAccept` | `() => Promise<void \| { error? }>` | required | |
| `onDecline`, `onRequestNew` | same shape | none | |
| `onSignIn`, `onSignUp`, `onOpenWorkspace`, `onGoHome` | `() => void` | none | |
| `onSwitchAccount` | `() => void \| Promise<void>` | none | |
| `bare` | `boolean` | `false` | Render without `AuthLayout`. |
| `labels` | `InviteAcceptLabels` | en / ar | |

The rest are `AuthLayout` props (`variant`, `mark`, `panel`, `footer`).

## Examples

- **In your own layout**: `<InviteAccept bare ... />`.
- **Split screen**: `<InviteAccept variant="split" panel={<BrandPanel />} ... />`.

## Accessibility

The page heading is the `h1`. Failures from your callbacks show in a `role="alert"`. Each blocked state has an
icon and a sentence, so the meaning never rests on colour.

## RTL & i18n

Built-in English and Arabic. Emails are isolated inside sentences and stay left-to-right.

## Styling & tokens

Status icons use the `nq-warning`, `nq-success` and `nq-danger` soft tokens. The frame is `AuthLayout`.

## Do / Don't

- Do check the token on the server; this page only presents the result.
- Do not pass an invited email you would not show to anyone who holds the link.

## Related

- [AuthLayout](https://docs.nasaqui.com/components/auth-layout)
- [MembersManager](https://docs.nasaqui.com/components/members-manager)

## Lab

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

## Code

### React

```tsx
<InviteAccept
  state="valid"
  workspace={{ name: "Sahab Studio", meta: "12 members" }}
  invitedBy={{ name: "Sara Alharbi" }}
  role="Admin"
  inviteEmail="omar@example.com"
  account={{ name: "Omar Khalid", email: "omar@example.com" }}
  onAccept={() => api.acceptInvite(token)}
  onDecline={() => api.declineInvite(token)}
/>
```

### shadcn

```tsx
<InviteAccept
  state="valid"
  workspace={{ name: "Sahab Studio", meta: "12 members" }}
  invitedBy={{ name: "Sara Alharbi" }}
  role="Admin"
  inviteEmail="omar@example.com"
  account={{ name: "Omar Khalid", email: "omar@example.com" }}
  onAccept={() => api.acceptInvite(token)}
  onDecline={() => api.declineInvite(token)}
/>
```

### Vue

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

const token = new URLSearchParams(location.search).get("token") ?? "";

// Your API calls. Resolve { error } to show a failure.
async function accept() {
  const res = await fetch(`/api/invites/${token}/accept`, { method: "POST" });
  if (!res.ok) return { error: "Could not accept the invitation." };
}
async function decline() {
  await fetch(`/api/invites/${token}/decline`, { method: "POST" });
}
</script>

<template>
  <NqInviteAccept
    state="valid"
    :workspace="{ name: 'Sahab Studio', meta: '12 members' }"
    :invited-by="{ name: 'Sara Alharbi' }"
    role="Admin"
    invite-email="omar@example.com"
    :account="{ name: 'Omar Khalid', email: 'omar@example.com' }"
    :on-accept="accept"
    :on-decline="decline"
  />
</template>
```

### Blade

```blade
{{-- You resolve the link and pass its state; join() is your API call. Resolve { error } to show a failure. --}}
<x-nq::invite-accept state="valid" :workspace="['name' => 'Sahab Studio', 'meta' => '12 members']" :invited-by="['name' => 'Sara Alharbi']" role="Admin"
    invite-email="omar@example.com" expires-at="2026-10-06" :account="['name' => 'Omar Khalid', 'email' => 'omar@example.com']" decline
    x-on:nq-invite-accept="$event.detail.waitUntil(new Promise((done) => setTimeout(done, 300)))"
    x-on:nq-invite-decline="$event.detail.waitUntil(new Promise((done) => setTimeout(() => done({ error: 'Could not decline right now.' }), 300)))" />
```

### 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">Join Sahab Studio</h1>                          <p class="text-body-sm text-muted-foreground">Sara Alharbi invited you to collaborate.</p>                     </header>
                                <div data-slot="invite-accept" data-state="valid" x-data="nqInviteAccept(JSON.parse('{\u0022failed\u0022:\u0022Something went wrong. Try again.\u0022}'))" x-on:nq-invite-accept="$event.detail.waitUntil(new Promise((done) => setTimeout(done, 300)))" x-on:nq-invite-decline="$event.detail.waitUntil(new Promise((done) => setTimeout(() => done({ error: 'Could not decline right now.' }), 300)))" class="flex flex-col gap-4">
        <div data-slot="invite-workspace" class="flex items-center gap-3 rounded-card border border-border bg-background/60 p-3">
        <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-10 text-label rounded-control">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Sahab Studio" >SS</span>
    </span>
        <div class="flex min-w-0 flex-1 flex-col gap-0.5">
            <span class="truncate text-label text-foreground">Sahab Studio</span>
             <span class="truncate text-caption text-muted-foreground">12 members</span>         </div>
         <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Admin</span>
     </div>
            <dl class="flex flex-col gap-1.5 text-body-sm">
                            <div class="flex justify-between gap-3"><dt class="text-muted-foreground">You will join as</dt><dd class="text-foreground">Admin</dd></div>
                                        <div class="flex justify-between gap-3"><dt class="text-muted-foreground">Invitation for</dt><dd class="text-foreground"><bdi dir="ltr">omar@example.com</bdi></dd></div>
                                        <div class="flex justify-between gap-3"><dt class="text-muted-foreground">Expires</dt><dd class="text-foreground"><time data-slot="date-time" datetime="2026-10-06T00:00:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">Oct 6, 2026</time>
</dd></div>
                    </dl>
                    <div class="flex items-center gap-2.5 text-body-sm text-muted-foreground">
                <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Omar Khalid" >OK</span>
    </span>
                <span class="min-w-0">Signed in as <bdi dir="ltr" class="text-foreground">omar@example.com</bdi></span>
            </div>
            <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                                    <button data-slot="button"
     type="button"                         x-on:click="run(&#039;decline&#039;, &#039;nq-invite-decline&#039;)" x-bind:disabled="offDecline()" x-bind:data-disabled="offDecline() ? &#039;&#039; : null" x-bind:aria-busy="doing === &#039;decline&#039; ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        <template x-if="doing === 'decline'"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" 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="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
                        Decline</button>
                                <button data-slot="button"
     type="button"                         x-on:click="run(&#039;accept&#039;, &#039;nq-invite-accept&#039;)" x-bind:disabled="offAccept()" x-bind:data-disabled="offAccept() ? &#039;&#039; : null" x-bind:aria-busy="doing === &#039;accept&#039; ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <template x-if="doing === 'accept'"><svg data-slot="spinner" aria-hidden="true" class="size-4 animate-spin motion-reduce:animate-none" 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="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg></template>
                    Accept invitation</button>
            </div>
                <div data-slot="alert" data-tone="danger" role="alert"
        x-show="error" style="display: none" class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-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">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="error"></span></div>
            </div>
    </div>
</div></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>
```