diff --git a/HOUSE_STYLE_PLAN.md b/HOUSE_STYLE_PLAN.md
new file mode 100644
index 00000000..1240b7d2
--- /dev/null
+++ b/HOUSE_STYLE_PLAN.md
@@ -0,0 +1,679 @@
+# House style + dark mode reset
+
+Tracking doc for an in-progress, multi-session effort. Delete this file once
+every collection has been migrated and there's nothing left to resume.
+
+## Status — paused here, resume by continuing Phase 2
+
+Branch: `feature/house-style-dark-mode-reset`, merged up to date with `main`,
+plus:
+
+- `854b51c5` — house-style dark-mode rules + single-flag schema/layout rewiring + `badges` pilot
+- `54f55c4d` — explanatory note on the browser tool's pre-loaded rules
+- `breadcrumbs` migrated through Phase 2 → Phase 3 (see below)
+- `button-groups` migrated through Phase 2 → Phase 3 (see below)
+- `checkboxes` migrated through Phase 2 → Phase 3 (see below)
+- `details-list` migrated through Phase 2 → Phase 3 (see below)
+- `dividers` migrated through Phase 2 → Phase 3 (see below)
+- `dropdown` migrated through Phase 2 → Phase 3 (see below)
+- `empty-states` migrated through Phase 2 → Phase 3 (see below)
+- `file-uploaders` migrated through Phase 2 → Phase 3 (see below)
+- `filters` migrated through Phase 2 → Phase 3 (see below)
+- `inputs` migrated through Phase 2 → Phase 3 (see below)
+- `loaders` migrated through Phase 2 → Phase 3 (see below)
+- `modals` migrated through Phase 2 → Phase 3 (see below)
+- `pagination` migrated through Phase 2 → Phase 3 (see below)
+
+Done: Phase 1, the schema/layout rewiring, and `badges`, `breadcrumbs`,
+`button-groups`, `checkboxes`, `details-list`, `dividers`, `dropdown`,
+`empty-states`, `file-uploaders`, `filters`, `inputs`, `loaders`,
+`modals`, and `pagination` as fully-migrated collections (see sections
+below for exactly what that entailed).
+
+`breadcrumbs` needed one Phase 2 fix: its grouped/bordered variant used
+`border-gray-300` for the group wrapper, but grouped interactive elements
+elsewhere (`button-groups`, `pagination`) use `border-gray-200` — changed to
+match. Everything else already conformed.
+
+`button-groups` needed one Phase 2 fix: all five variants used
+`focus:ring-blue-500`, a shade found nowhere else in the codebase (not the
+Action color, not the documented non-action-control ring color) — changed
+to `focus:ring-gray-900` per the house style table.
+
+Regenerating dark variants via `pnpm run generate:dark-variants` used to
+also surface gaps in *other*, not-yet-migrated collections (it scanned
+every category) — those drafts had to be discarded each run, not
+committed. This is now fixed: pass `--category=<name> --slug=<name>` to
+scope a run to just the collection being migrated, e.g.
+`pnpm run generate:dark-variants --category=application --slug=dropdown`.
+Use the scoped form for every collection from here on.
+
+**`charts` — skipped, needs a dedicated pass, do not run the normal Phase
+2 → Phase 3 process on it.** Its dark variants pair Tailwind classes with
+hand-picked hex colors inside inline Chart.js `<script>` blocks (line
+color, gridlines, tick colors) that the shared dark-mode engine cannot
+touch — it only transforms HTML `class` attributes. The 11 existing dark
+variants are already hand-tuned and working, just on an older convention
+(`dark:bg-gray-900` cards, `dark:text-white` headings) that predates the
+engine's current defaults (`dark:bg-black`, `dark:text-gray-50`). Deleting
+and regenerating them the normal way would silently break every chart in
+dark mode (same light-mode hex colors copied straight into the dark file,
+illegible against a dark background) — the fix has to be by hand, chart
+by chart, decided in its own session. Skip past it in the alphabetical
+order for now.
+
+`checkboxes` needed no Phase 2 fix (already conformed) but exposed a real
+gap in Phase 3's regenerate step, applicable to every `@tailwindcss/forms`
+control (checkboxes, radio-groups, inputs, range-inputs, selects,
+quantity-inputs, textareas, toggles): the plugin bakes
+`background-color: #fff` and `--tw-ring-offset-color: #fff` into its own
+base CSS for `[type=checkbox]`/`[type=radio]` etc., so light-mode HTML
+never states a `bg-white` or `ring-offset-white` *class* for these
+controls. The dark-mode engine only transforms classes present in the
+light file, so it silently drops the dark background/ring-offset entirely
+— regenerating leaves the control's own fill/ring-offset plugin-default
+white even on a dark page. **After regenerating dark variants for any
+`@tailwindcss/forms` collection, manually check whether the previous
+hand-tuned dark file had a `dark:bg-*`/`dark:ring-offset-*` on the control
+itself with no light-mode counterpart, and restore it by hand if so** —
+the sitewide convention already in use (`inputs`, `radio-groups`, still
+unmigrated) is `dark:bg-gray-900` / `dark:ring-offset-gray-900` for form
+control chrome; keep using that pairing rather than inventing a new one,
+since these controls aren't cards/pages the `bg-white → dark:bg-black`
+house-style surface rule was written for.
+
+`details-list` needed no Phase 2 fix (already conformed) and no manual
+dark-mode gotcha — its only regeneration change was tightening
+`dark:text-white` to `dark:text-gray-50` (the engine's standard shade-map
+inversion for `text-gray-900`), consistent with the other migrations.
+
+`dividers` needed one Phase 2 fix: all six variants used `bg-gray-300` (and
+gradient `to-gray-300`) for the divider line, but the house style table
+lists dividers under `border-gray-200` (default), not `-300`
+(inputs/interactive outlines only) — changed to `bg-gray-200`/`to-gray-200`.
+
+**Another Phase 3 gotcha, found after the fact on `breadcrumbs`'s "Grouped
+with chevron divider" variant:** the engine's generic `bg-white →
+dark:bg-black` mapping is the theoretically-consistent shade inversion, but
+it's a poor *practical* choice for any component with its own `bg-white`
+card/panel surface (as opposed to a plain text/link component like the
+other `breadcrumbs` variants) — `black` and the preview iframe's own
+`bg-gray-900` wrapper are perceptually almost indistinguishable, so the
+card nearly disappears against the page it's previewed on. Manually check
+the regenerated dark output for any component that has its own `bg-white`
+container: prefer `dark:bg-gray-800` for the card (visibly *lighter* than
+the `gray-900` page, an "elevated" card) and, if the component nests a
+highlighted/recessed sub-region inside that card (e.g. a "current page"
+tab), give that sub-region `dark:bg-gray-900` instead of matching the
+engine's shade-mapped output — one step *darker* than the card, preserving
+the same light-mode relationship (`bg-gray-100` inside `bg-white`) just
+inverted, rather than the flat engine output which used the same
+`dark:bg-gray-800` for both card and sub-region and lost that distinction
+entirely.
+
+`dropdown` needed one Phase 2 fix: both wrapper elements (the split-button
+trigger and the flyout menu panel) used `border-gray-300`/`divide-gray-300`,
+but neither is a form input — one's a grouped interactive control (matching
+`button-groups`' `border-gray-200` precedent) and the other's a floating
+card/panel (default `border-gray-200`) — changed both, plus the internal
+`divide-x` on the trigger to match. Also caught a real drift on the
+"Delete" menu item: `text-red-700` where the house style table calls for
+`red-600` on plain destructive text (as opposed to the `bg-*-100
+text-*-700` status-tint recipe, which is a different, exempt case) —
+changed to `text-red-600`.
+
+`dropdown` also hit the `bg-white`-card gotcha above (both wrapper
+elements have their own `bg-white` surface), fixed the same way
+(`dark:bg-gray-800`) — but this component's cards have hoverable items
+*inside* them (`hover:bg-gray-50` menu items/trigger buttons), which the
+breadcrumbs case didn't. The engine had paired `hover:bg-gray-50` with
+`dark:hover:bg-gray-800` on the assumption the card itself was
+`dark:bg-black`; once the card becomes `dark:bg-gray-800` to fix its own
+visibility, that hover shade collides with the card and the highlight
+stops reading as a highlist. Fixed by bumping the item hover one step
+*lighter* than the (now `gray-800`) card, to `dark:hover:bg-gray-700` —
+same principle as the recessed-sub-region fix above, just in the opposite
+direction (a hover state should lift off the card, not recess into it).
+Check for this same collision on any future component with hoverable
+items inside its own `bg-white` card.
+
+`empty-states` needed one Phase 2 fix: its "No results found" search
+`<input>` used `focus:border-indigo-500` (the Action color, borrowed onto a
+non-action control) — changed to `focus:border-gray-900` per the house
+style table's non-action-control focus-ring row, keeping the existing
+border-based focus mechanism rather than switching it to a ring. Its
+solid `bg-indigo-600` buttons and `border-gray-300` outline
+buttons/dropzone/input already conformed — `border-gray-300` is correct
+here (not the grouped-control `border-gray-200` case) because these are
+standalone "interactive outlines"/inputs, the exact case the table
+reserves `-300` for. Its large decorative `text-gray-400` icons
+(`aria-hidden="true"`, purely illustrative, not body copy) were left
+alone — sitewide convention, identical in the not-yet-migrated
+`marketing/empty-content` sibling collection, and outside what the
+Text-role table governs. Also confirmed the missing `focus:ring-2
+focus:ring-indigo-600` on its Action buttons — present in the house
+style table's Action recipe, but not actually implemented on *any*
+`bg-indigo-600` button anywhere in the codebase today (verified via
+grep), and the dedicated a11y-fixes commit (`47a41de`) touched these
+exact files but deliberately didn't add it — so treated as a separate,
+not-yet-started convention rather than Phase 2 drift, and left untouched.
+
+`empty-states` also hit the `@tailwindcss/forms` gotcha from `checkboxes`
+above, extended to a plain text input (verified in
+`@tailwindcss/forms`'s own source: `[type='text']` etc. get the same
+baked-in `background-color: #fff` and, on `:focus`,
+`--tw-ring-offset-color: #fff`, not just `[type=checkbox]`/`[type=radio]`)
+— the previous hand-tuned dark file had `dark:bg-gray-900 dark:text-white`
+on the search input with no light-mode counterpart, which the regenerate
+step silently dropped. Restored by hand as `dark:bg-gray-900
+dark:text-gray-50 dark:ring-offset-gray-900` (text shade tightened to
+match the engine's current `text-gray-50` convention, ring-offset added
+to match the `checkboxes` pairing). Verified in the dev server (light +
+dark, standalone iframe and the full collection page) that the input's
+dark background/text/focus all render correctly instead of showing a
+stray white box.
+
+`file-uploaders` needed no Phase 2 fix (already conformed — both variants
+are bordered, non-card `<label>` dropzones, matching the `empty-states`
+upload-dropzone precedent for `border-gray-300` on a standalone
+interactive outline). Its "Base with button" variant's "Browse files"
+chip (`bg-gray-50 hover:bg-gray-100`, a resting/hover pair one step apart
+in the `50`/`100` range) exposed a new, systemic gap in the shared
+`SHADE_MAP` (`src/constants/dark-mode.js`): both `50` and `100` invert to
+the same target shade, `800` — so any component using this exact
+resting/hover pair loses its hover feedback entirely in dark mode (regen
+produced `dark:bg-gray-800 dark:hover:bg-gray-800`, identical). Not
+something to fix in the shared map itself (that shade collision is
+probably intentional/harmless for most `50`/`100` uses that aren't a
+resting/hover pair on the same element, and changing it site-wide is out
+of scope for a single collection's migration) — fixed by hand per the same
+principle as the `dropdown` hover/card-shade collision above: bumped the
+*hover* shade one step lighter than the mapped resting shade,
+`dark:hover:bg-gray-700`, so the chip visibly lifts on hover instead of
+staying flat. **Watch for this same `50`/`100` resting/hover collision on
+any future component with a light tinted chip/pill that darkens on
+hover** — it's a different trigger than the dropdown case (that was a
+card recoloring collision; this is a shade-map coincidence) but the same
+fix.
+
+`filters` needed one Phase 2 fix, on both its "Dropdown" and "Accordion"
+variants: their filter panels/cards used `border-gray-300`/`divide-gray-300`
+for what is either a floating flyout panel (variant 1, exactly the
+`dropdown` flyout-panel case) or a self-contained accordion card (variant
+2's outer `<details>`, matching the `details-list`/`accordions`
+card-wrapper convention) — both changed to the default `border-gray-200`/
+`divide-gray-200`. Left alone: variant 1's `<summary>` toggle's own
+`border-b border-gray-300` — a single standalone trigger (not grouped with
+adjacent buttons like `dropdown`'s split-button), so it stays under the
+table's "interactive outline" `-300` case rather than the "grouped
+control"/"floating panel" `-200` case. Also left alone: the checkboxes'
+plugin-default blue checked-state fill (no `checked:` override anywhere in
+the light source) — matches the `checkboxes` collection precedent of never
+touching that state.
+
+Both variants' filter panels also have their own `bg-white` card surface
+(hit the `bg-white`-card gotcha, fixed to `dark:bg-gray-800` by hand) and
+contain both checkbox and `type="number"` inputs (hit the
+`@tailwindcss/forms` gotcha, restored `dark:bg-gray-900
+dark:ring-offset-gray-900` on the checkboxes and `dark:bg-gray-900
+dark:text-gray-50 dark:ring-offset-gray-900` on the number inputs, by
+hand) — both gotchas already covered above, no new discoveries, just
+confirming they recur together whenever a form-control collection also has
+its own card surface.
+
+`inputs` needed no Phase 2 fix (already conformed — the collection this
+effort's `@tailwindcss/forms` gotcha is named after). All four variants
+(`email`/`text` inputs, icon and button decorations) hit that gotcha on
+regeneration exactly as expected — restored `dark:bg-gray-900
+dark:text-gray-50 dark:ring-offset-gray-900` on each `<input>` by hand.
+
+Its "Floating label" variant surfaced a new, narrower case of the
+`bg-white`-card gotcha: the floating `<span>` that visually "cuts" the
+input's top border isn't a card at all, just a small opaque patch masking
+the border line behind the label text — it needs to exactly match
+whatever sits *behind* it (the page), not become a visually distinct
+elevated surface. The engine's generic `bg-white → dark:bg-black` mapping
+is *closer* to correct here than the card case (`black` and the page's
+`dark:bg-gray-900` are close in luminance), but still technically off —
+changed to `dark:bg-gray-900` to exactly match the page background it's
+masking against (confirmed against the previous hand-tuned dark file,
+which had independently arrived at the same value). **Distinguish this
+from the `bg-white`-card gotcha going forward: a `bg-white` masking
+patch behind inline text (crossing a border line, sitting over another
+element) wants `dark:bg-gray-900` to disappear into the page; a `bg-white`
+card/panel surface wants `dark:bg-gray-800` to stay visible against it —
+opposite goals, same starting class.**
+
+`loaders` needed no Phase 2 fix (already conformed — all 7 variants
+already used `text-indigo-600`/`bg-indigo-600` for spinners, dots, and the
+progress fill, and `text-gray-700` for the "Loading..." caption). Its
+regeneration is the first real payoff of Phase 1's solid-fill rule outside
+a button: the old hand-tuned dark files for the pulse/ping/bounce dots and
+the progress-bar fill all had the exact `dark:bg-indigo-300` pastel-fill
+bug the whole effort's Context section opens with — regenerating from the
+current (unchanged) light source now correctly produces solid
+`dark:bg-indigo-500` for all of them. The spinners' `text-indigo-600`
+stroke color is untouched by that rule (scoped to `bg` only) and still
+maps to the generic `dark:text-indigo-300` — confirmed by eye this is
+fine for a thin stroke (unlike a solid fill, a lighter stroke still reads
+clearly against the dark page), so left as-is. No `bg-white` card, no
+form controls, no other gotchas — the simplest migration so far.
+
+`modals` needed two Phase 2 fixes and settled one open design question:
+
+- All four variants with an "Actions" row had a `bg-blue-600
+  hover:bg-blue-700` "Done" button — the exact blue-vs-indigo Action drift
+  the whole effort's Context section opens with — changed to
+  `bg-indigo-600 hover:bg-indigo-700`.
+- The "Input with close" variant's `Confirm` input was missing the
+  `focus:ring-2 focus:ring-indigo-600` its otherwise-identical sibling
+  ("Input" variant) has — a copy-paste omission, not a color choice —
+  added to match.
+
+**Settled: the `focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2
+focus:ring-offset-white focus:outline-none focus-visible:ring-2
+focus-visible:ring-indigo-600 focus-visible:ring-offset-2
+focus-visible:ring-offset-white focus-visible:outline-none` recipe
+flagged as unresolved after `empty-states` is out of this effort's scope,
+full stop.** `modals` has it on *every* interactive control (Close icon
+button, Cancel, Done, and the Confirm input) — not just the primary
+action, contradicting the house style table's "Action-only" framing — and
+it's confirmed present in several other untouched collections (`pricing`,
+`support-inbox`, `saas-landing-page`) too. It was added by the dedicated
+a11y-fixes commits (`47a41de` / `b227536` / `a24d52e`), which also touched
+`empty-states` (adding `aria-hidden` to its icons) but deliberately did
+*not* add this recipe there. Conclusion: this is a pre-existing, actively
+maintained accessibility convention that predates and is orthogonal to
+the color-focused house-style effort — rolling it out to collections the
+a11y sweep didn't reach (or ripping it out of collections that have it) is
+that sweep's unfinished business, not Phase 2's. Going forward: preserve
+whatever focus-ring treatment a component's light source already has
+(fix its *colors* if they're wrong, per the two fixes above) and don't add
+or remove the recipe wholesale. The house style table's "Focus ring —
+non-action controls: `ring-gray-900`" row stands as-is for controls with
+no pre-existing recipe (its origin — `checkboxes`/`empty-states` — is
+unaffected), but don't apply it retroactively to controls that already
+carry the indigo recipe.
+
+The `<dialog>` element is the most literal case yet of the `bg-white`-card
+gotcha (an actual popover card over a `backdrop:bg-black/50` scrim) —
+fixed to `dark:bg-gray-800` as usual. Three new things fell out of having
+a real elevated card with several different kinds of nested content,
+generalizing the card-adjacent fixes from earlier collections:
+
+1. **The dark-mode engine transforms `backdrop:` pseudo-element classes
+   too, and got the modal backdrop backwards.** `backdrop:bg-black/50`
+   (the dimming scrim behind the modal) became `dark:backdrop:bg-white/50`
+   — inverting a dimming overlay into a *lightening* one, which would
+   wash out the page behind the modal in dark mode instead of dimming it.
+   A backdrop scrim should stay the same color in both themes (it's
+   dimming whatever's behind it, not itself a themed surface) — removed
+   the generated `dark:backdrop:*` override entirely, leaving the plain
+   `backdrop:bg-black/50` to apply in both themes. **Check for this same
+   backwards inversion on any future component using `backdrop:*`
+   classes** (modals, dialogs, popovers) — the generic engine has no
+   concept of "this class shouldn't get inverted at all."
+2. **`ring-offset` should match the nearest enclosing surface, not
+   always default to the page.** Every earlier `ring-offset-white` /
+   plugin-baked-ring-offset fix (`checkboxes`, `inputs`, `filters`) used
+   `dark:ring-offset-gray-900` because those controls sat directly on the
+   plain page (`dark:bg-gray-900`). `modals`' Close/Cancel/Done buttons
+   and the Confirm input all sit *inside* the `bg-white`-turned-card —
+   using `dark:ring-offset-gray-900` there would mismatch the
+   `dark:bg-gray-800` card around them (a visible halo where the ring's
+   offset gap doesn't match its background). Used `dark:ring-offset-gray-800`
+   throughout instead — general rule now: **ring-offset color = the dark
+   background of whatever surface the control's ring-offset gap will
+   actually show against**, page gray-900 or card gray-800 (or deeper
+   nesting, if it ever comes up) as appropriate, never assumed.
+3. **The "recessed sub-region inside a card" fix from `breadcrumbs`
+   applies to interactive buttons too, not just passive display
+   elements.** The Cancel button's `bg-gray-100` (subtly muted against the
+   dialog's `bg-white`, by design — the quiet secondary action next to
+   the solid indigo "Done") mapped via the generic engine to
+   `dark:bg-gray-800` — identical to the now-corrected card background,
+   making the button's resting state completely flush/invisible against
+   its own card (worse than the light-mode relationship, which still has
+   a faint but real white/gray-100 distinction). Overrode to
+   `dark:bg-gray-900` — one step *darker* than the `gray-800` card,
+   preserving the light-mode "quieter than the card" relationship instead
+   of erasing it, exactly the same principle as breadcrumbs' recessed
+   "current page" indicator, just applied to a button. Its own hover
+   (`dark:hover:bg-gray-700`, fixed per the hover-collision gotcha below)
+   now provides a bigger, clearer resting→hover jump than the engine's
+   flat output would have. The Close icon button's `hover:bg-gray-50`
+   hit the familiar dropdown-style hover/card-shade collision (engine gave
+   it `dark:hover:bg-gray-800`, identical to the card) — fixed to
+   `dark:hover:bg-gray-700` the same way as before.
+
+**Fixed:** `scripts/generate-dark-variants.js` didn't add the `dark:bg-*`
+background from #754 to a freshly-generated file's `<body>` — that fix
+predates the script's authoring and nothing wired them together, so every
+regenerated file needed it added by hand. The script now does this itself:
+`ensureBodyDarkBackground()` post-processes each generated file's `<body>`
+tag directly (adding `dark:bg-gray-900` to its existing `class`, or adding
+the attribute if `<body>` has none), independent of the class-shade
+engine — `<body>` never carries a `bg-*` class in light mode, so there was
+never anything for the engine to invert in the first place; this is a
+fixed convention, not a color-shade mapping. Only touches the Node CLI
+path (`transformHtmlString`); the browser tool's DOM-aware path
+(`transformHtmlDom`) only ever returns `body.innerHTML` for iframe
+embedding and never touches the `<body>` tag itself, so it was never
+affected by this gap. No more by-hand patching needed for future
+collections.
+
+**Found after the fact, fixed on `empty-states` and `modals`:** the
+engine's blanket `white ↔ black` `colorMap` swap fires on *any* utility,
+not just `bg` surfaces — so `text-white` labels sitting on a solid Action
+fill (`bg-indigo-600 → dark:bg-indigo-500`) were being rewritten to
+`dark:text-black` on regeneration. That undoes the entire point of Phase
+1's fill-shade override (chosen specifically so a light label stays
+legible on the fill): contrast-checked, white-on-`indigo-500` is ~4.47:1
+(their light-mode pairing, white-on-`indigo-600`, is 6.29:1); black text
+technically edges past AA at ~4.70:1 but is visibly the wrong design
+against a colored fill. `white`/`black` swapping is correct for a page/card
+*surface* (`bg-white → dark:bg-black`) but wrong for foreground text on a
+colored sibling fill — the engine has no notion of "this text sits on that
+fill" so it can't be ruled out automatically. Went unnoticed through both
+collections' own migrations and the later a11y-fixes/`modals` sessions;
+found and fixed by hand in the affected files first (`empty-states`: 3
+buttons/badges across `1-dark.html`/`2-dark.html`/`4-dark.html`; `modals`:
+the "Done" button across `3-dark.html`–`6-dark.html`; `pagination`: the
+current-page indicator in `1-dark.html`).
+
+**Tried an engine-level fix, reverted it — it was wrong, not just
+incomplete.** Relying on each migration session to notice and hand-fix
+this had already failed twice, so a rule was added to
+`DEFAULT_CONFIG.rules` (`house-style-foreground-text-no-invert`) that made
+the engine's `colorMap` swap never fire on the `text` utility at all —
+`text-white`/`text-black` would pass through every regeneration unchanged.
+Verified against the 11 known occurrences (byte-for-byte identical
+regeneration of `empty-states`) and shipped as "root-caused." That
+verification was the mistake: all 11 known cases happen to be `application`
+buttons/badges where white text sits on a *colored* Phase-1-overridden
+fill (indigo/red) that stays colored in dark mode, so the text correctly
+never needs to invert — but that's not the only shape this pattern takes.
+`neobrutalism` is an entire design system built the other way: `text-black`
+paired with a *neutral* surface (`bg-white`, `bg-blue-100`, etc, 32+
+occurrences across `accordions`/`badges`/`buttons`/`cards`/`checkboxes`/
+`inputs`/`selects`/`tabs`/`textareas`) that itself flips via the existing
+`bg-white → dark:bg-black` rule — there, the text *must* invert with its
+surface (`dark:text-white`) or it goes invisible against its own now-black
+card. A global "never invert `text` white/black" rule fixes the first
+shape and silently breaks the second, and would have shipped completely
+unnoticed since `neobrutalism` hasn't been migrated yet — nothing would
+have caught it until someone actually ran the generator against it.
+**The real distinction isn't the utility (`text` vs `bg`) or the color —
+it's whether the paired surface/fill itself inverts to its opposite
+neutral in dark mode.** That's sibling-class information, and it turns out
+the engine already had what it needed to know it — `transformClassAttribute`
+(`src/lib/dark-mode/transform-html.js`) processes one element's full
+`class=""` attribute at a time, splitting it into tokens *before* mapping
+each token through `transformClass`; it just never threaded that token
+list any further down. Extended the `Rule` schema with
+`requireClasses: string[] | null` — an additional match gate, alongside
+the existing `utilities`/`shade`/`colors`/`excludeElements` gates, that
+only fires when the *same element* also carries one of the listed
+light-mode classes — and threaded a `siblingClasses` param through
+`applyRules`/`transformClass`/`transformClassAttribute` so the gate has
+something to check against. Re-added the fill-text rule, now scoped
+correctly: `house-style-action-fill-text-preserve` matches `text-white`
+only when `requireClasses: ['bg-indigo-600', 'bg-red-600']` is also present
+on the element — i.e., only the exact case that's actually broken.
+`neobrutalism`'s `text-black`/`text-white` pair with `bg-white`/`bg-{color}-100`/
+`bg-black`, never `bg-indigo-600`/`bg-red-600`, so the rule never fires
+there and the plain `colorMap` swap (already correct) still runs
+unmodified. Verified both directions before shipping this time, not just
+one: regenerated `empty-states`/`pagination`/one `modals` file and diffed
+byte-for-byte against the hand-fixed committed versions (both diffs came
+back containing only the *other*, unrelated, already-documented manual
+gotchas — `modals`' card/backdrop/ring-offset fixes, `pagination`'s
+border-shade mismatch — with the text-color handling itself identical in
+both); separately ran the transform against `neobrutalism/badges/1.html`
+(`text-black` on tinted `bg-*-100` cards), `badges/3.html` (`bg-white
+text-black` *and*, on the same file, `bg-black text-white` — the exact
+inverse pairing, both correctly inverting in both directions), and
+`tabs/1.html`'s `hover:bg-black hover:text-white` state, confirming all of
+them still invert normally. Re-ran the pre-existing `dark-mode-generator`
+Playwright suite — identical 8 passed / 6 pre-existing-and-unrelated
+failures as the reverted baseline, no new regressions. This is `text-white`/
+`text-black`'s *only* documented failure mode found so far, so nothing is
+left on the manual watch-list for it — but the underlying lesson holds for
+anything discovered later: verify a fix against the case that's known
+broken *and* against the cases that already work, before it goes in
+`DEFAULT_CONFIG` where every future collection inherits it silently.
+
+Prompted by this, audited every already-migrated (`badges` through
+`pagination`) collection for the same bug shape before trusting the "done"
+list: grepped for every `text-white` occurrence (all 8 already-hand-fixed
+instances, all still clean, all a `bg-indigo-600` pairing — nothing missed)
+and for any `text-black` at all (none — `application`'s house style never
+uses it). Nothing in the done list needed rework.
+
+`pagination` needed no Phase 2 fix (already conformed) — its individual
+page-link buttons' `border-gray-200` is the "grouped interactive elements"
+case named explicitly back in the `breadcrumbs` write-up above (pagination
+was cited there as the existing precedent for that reading, even before
+this collection itself was migrated), and its number-input variant's
+`border-gray-300` is the plain "inputs" case. Regenerating hit two gotchas:
+
+- The current-page indicator (`border-indigo-600 bg-indigo-600 ... text-white`,
+  a non-interactive `<li aria-current="page">`, not a link) hit the
+  `text-white → dark:text-black` flip documented above — fixed the same
+  way. It also surfaced a *new* variant of that same underlying problem:
+  its `border-indigo-600` exists purely to match its own `bg-indigo-600`
+  fill (a seamless solid box, no visible border) — regenerating shade-maps
+  `border` and `bg` independently (`border` has no Phase 1 rule so rides
+  the generic `600→300` map, `bg` uses the Phase 1 override to `500`),
+  producing a mismatched `dark:border-indigo-300` ring around a
+  `dark:bg-indigo-500` fill where light mode had none. Fixed by hand to
+  `dark:border-indigo-500`, matching the fill instead of the generic map.
+  **Any self-matching `border-X bg-X` pair on a solid fill needs its
+  border shade fixed to follow the fill's Phase-1-overridden shade, not
+  the generic map** — same sibling-awareness gap as the text-color flip,
+  different utility.
+- The number-input variant hit the `@tailwindcss/forms` gotcha (declares
+  `plugins: ['@tailwindcss/forms']`) — restored `dark:bg-gray-900
+  dark:text-gray-50 dark:ring-offset-gray-900` by hand, matching the
+  `inputs`/`filters` convention (added the ring-offset even though this
+  particular input has no visible `focus:` state in its light source,
+  for consistency with how every other forms-plugin restoration in this
+  effort has included it regardless).
+
+Next action: pick the next `application` collection (alphabetical after
+`pagination` — `progress-bars` is next) and run it through Phase 2 → Phase 3
+the same way the collections above were done, remembering: the
+self-matching `border-X bg-X` shade-mismatch gotcha above for any other
+solid-fill element with a same-color border (the `text-white ↔ black`
+counterpart of this is now fixed at the engine level via the sibling-aware
+`requireClasses` rule, see above — no longer a manual check for the
+`bg-indigo-600`/`bg-red-600` case specifically; still watch for any *other*
+solid Phase-1-covered fill color this effort adds later, which would need
+its own `requireClasses` entry); the forms-plugin gotcha for any remaining
+form-control collections; the `50`/`100`
+resting/hover shade-map collision for any light tinted chip/pill that
+darkens on hover; the floating-panel-vs-standalone-trigger border
+distinction from `filters` (grouped controls and floating panels/cards →
+`-200`, a single standalone toggle/outline/input → `-300`); the
+`bg-white`-masking-patch-vs-`bg-white`-card distinction from `inputs`
+(`dark:bg-gray-900` to disappear into the page vs `dark:bg-gray-800` to
+stay visible against it); that Phase 1's solid-fill dark rule only covers
+the `bg` utility, so a stroke/text use of the same color still rides the
+generic `600→300` map (fine for thin strokes, per `loaders`); the settled
+focus-ring scope decision from `modals` (preserve what's there, fix
+colors only, don't add/remove the recipe); and — the big one, from
+`modals` — **ring-offset and any "recessed sub-region" color must match
+the nearest enclosing surface, not always the page**: once a component
+has its own `bg-white`-turned-`dark:bg-gray-800` card, everything nested
+inside it (ring-offsets, muted sub-fills, hover collisions) needs to
+reason relative to that card's shade, not reflexively reuse the
+page-level `gray-900`/`gray-800` pairing from earlier page-level-only
+collections. Also watch for the `backdrop:` inversion bug on any other
+component using a `backdrop:*` class (the engine inverts it like any
+other class, which is wrong for a dimming scrim). No open design
+questions remain for the normal pipeline — the house style table below
+and the collection-exemption list are settled. Note: `accordions` sorts
+alphabetically before `badges` (the original pilot) and was never picked
+up by this effort — it isn't on the exemption list, so it's presumably
+just an oversight in the ordering and still needs a pass at some point.
+
+Also flagged, not yet resolved: the house style table's Action recipe
+includes `focus:ring-2 focus:ring-indigo-600` on solid buttons, but no
+`bg-indigo-600` button anywhere in the codebase actually has it today, and
+the dedicated a11y-fixes pass deliberately skipped adding it. Worth a
+decision in its own session (add it everywhere as part of Phase 2, or
+drop it from the table as aspirational/out-of-scope) rather than having
+each collection guess — `empty-states` left it alone pending that call.
+
+**Collection exemptions are final:** only `grids` and `media` skip dark mode
+(`dark: false`), because they have no real themeable surface — `grids` is
+placeholder boxes standing in for real content, `media` is photo-dominated
+with no wrapper surface. `progress-bars` and `dividers` were checked as
+candidates and rejected — both have real `bg-*`/`text-*` colors (a track,
+fill, or divider line) that would look visibly broken left unconverted, so
+they go through the normal pipeline like everything else.
+
+## Context
+
+HyperUI has never had a documented color "house style" — each of the 311 light
+components across `application`/`marketing`/`neobrutalism` was styled
+independently. A survey of `public/examples/**/*.html` confirmed real drift:
+action buttons split ~91 `bg-indigo-600` vs 66 `bg-blue-600`, dark surfaces
+split `bg-gray-800`/`bg-gray-900`, and 146 stray `text-gray-400` body-copy
+instances fail WCAG AA (contrast ~2.54:1 on white — below the 4.5:1 minimum).
+
+This inconsistency is also why `scripts/generate-dark-variants.js` produced
+bad output: it applies a purely mechanical shade map (`600→300`) with no
+awareness of role, so a solid `bg-indigo-600` action button becomes
+`dark:bg-indigo-300` — a pastel fill, not a real button. The 225 existing
+hand-tuned `-dark.html` files at the time already showed this exact pattern
+(`dark:bg-indigo-300` ×14, `dark:bg-blue-300` ×8).
+
+The fix: define an explicit house style, retrofit every light component to
+it, wipe all existing dark variants, then regenerate them from the
+now-standardized source using the shared dark-mode engine — which already
+supports role-aware overrides via its `rules` array
+(`src/lib/dark-mode/config.js`, `transform-class.js`) but shipped with
+`rules: []` before this effort.
+
+**Dark mode is now an all-or-nothing switch per collection, declared once.**
+`content.config.ts`'s collection-level `dark` field defaults to `false`, and
+is the *only* thing that decides whether a collection's components get a
+dark card — `ComponentPost.astro` no longer looks at anything per-component
+to make that call. A collection only flips to `dark: true` once every
+component in it has been through Phases 2–3 below. The old per-component
+`dark: true` / `dark: { contributors }` field is retired; the only thing
+that survives at the component level is an optional `darkContributors`
+string array, for the rare case (`announcements`, `toasts`, `steps`) where
+someone hand-authored just the dark variant and deserves separate credit.
+
+## House style
+
+| Role | Light | Notes |
+|---|---|---|
+| Surface — page/section | `bg-gray-50` | |
+| Surface — card/panel | `bg-white` | dominant today (231 occurrences) |
+| Surface — nested/muted | `bg-gray-100` | |
+| Text — heading/primary | `text-gray-900` | |
+| Text — body/secondary | `text-gray-700` | |
+| Text — muted/caption | `text-gray-600`; `text-gray-500` only on white/`gray-50` | `text-gray-500` clears WCAG AA (~4.8:1) on white/gray-50 but not on darker surfaces; never `text-gray-400` or lighter |
+| Border — default | `border-gray-200` | cards, dividers |
+| Border — emphasized | `border-gray-300` | inputs, interactive outlines |
+| Action (primary button/link) | `bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-600 text-white` | indigo was already the dominant action color |
+| Destructive (delete/remove, error) | `red-600` | |
+| Status (badges/alerts/toasts) | success `emerald-600`, warning `amber-600`, error `red-600` | exempt from the Action rule |
+| Status tint recipe (pill/badge) | `bg-*-100 text-*-700`, outline variant `border-*-500` | shade recipe, any semantic family — validated in the `badges` pilot, dark output falls out of the generic shade map for free (`100→800`, `700→200`, `500→400`) |
+| Trend (chart/stat deltas) | positive `green-600`, negative `red-600` | kept distinct from Status — direction, not state; already the dominant convention in `charts`/`stats` |
+| Focus ring — non-action controls | `ring-gray-900` | checkboxes, inputs — only when the component has no pre-existing focus-ring recipe already (see `modals` write-up below: don't retrofit this onto controls that already carry the a11y-sweep's `focus:ring-indigo-600` recipe) |
+
+## Phase 1 — Encode dark-mode rules for solid-fill buttons ✅ done
+
+Added targeted entries to `DEFAULT_CONFIG.rules` in `src/lib/dark-mode/config.js`
+(consumed by both `scripts/generate-dark-variants.js` and the browser tool at
+`/tools/dark-mode-generator` — also fixed `createDefaultConfig()` there to
+actually seed from `DEFAULT_CONFIG.rules` instead of hardcoding `rules: []`,
+so both stay consistent):
+
+- Action fill: `utilities: ['bg'], colors: ['indigo'], shade: 600 → darkShade: 500`, plus a hover entry `shade: 700 → darkShade: 400`
+- Destructive fill: `utilities: ['bg'], colors: ['red'], shade: 600 → darkShade: 500`
+
+Scoped to `utilities: ['bg']` only, so `text-red-600` (destructive text, trend
+text) is untouched and keeps riding the generic `SHADE_MAP` — that mapping is
+fine for soft/text usage; the only broken case was solid button fills.
+
+## Schema/layout rewiring ✅ done (badges pilot proved this out)
+
+- `content.config.ts`: collection-level `dark` now defaults to `false`;
+  per-component `dark` (boolean/object union) replaced with optional
+  `darkContributors: string[]`.
+- `ComponentPost.astro`: `formattedComponents` now renders a "(Dark)" card
+  for *every* component when the collection's `dark` flag is true, using
+  `darkContributors ?? contributors` for attribution. Removed the
+  `darkCount`/`totalCount` "X/Y Dark Mode (Request)" badge (meaningless
+  once it's all-or-nothing) in favor of a plain "Dark Mode" label.
+- `ComponentCard.astro` / `SearchWrapper.astro`: their `componentCount`
+  calculations (component listing counts) updated from
+  `components.length + components.filter(({dark}) => !!dark).length` to
+  `components.length + (darkModeSupported ? components.length : 0)`.
+- Migrated the 3 files with real per-variant contributor overrides
+  (`announcements.mdx`, `toasts.mdx`, `steps.mdx`) from
+  `dark: { contributors: [...] }` to `darkContributors: [...]`.
+
+Verified end-to-end in the dev server: `badges` (migrated) shows a "Dark
+Mode" badge and a paired dark card per component; `accordions` (untouched)
+shows neither — confirming the reset-then-migrate transition behaves as
+intended without a mass per-component edit.
+
+## Phase 2 — Standardize all light components to the house style
+
+Go collection by collection (34 `application` + 21 `marketing` + 11
+`neobrutalism` MDX files). For each component: grep for non-conforming
+classes *and shades* against the role table above and replace them (e.g.
+`bg-blue-600` button → `bg-indigo-600`, `border-gray-100` card →
+`border-gray-200`, `text-gray-400` body copy → `text-gray-600`, an
+off-recipe tinted badge → the `100/700/500` recipe). `badges` is done as
+the pilot — its four generic variants used arbitrary `purple`, now
+`indigo`; its "Themed with icon" variant already matched the Status recipe
+and needed no change.
+
+While reviewing, flag components that exist only as a color reskin of an
+otherwise-identical variant in the same collection (structural duplicate) —
+these become redundant once one canonical color wins. Removing one requires
+care: `ComponentPost.astro` maps `components` array position directly
+to filename (`index + 1` → `n.html`), so deleting an entry from the middle
+means renaming every subsequent `n.html`/`n-dark.html` in that folder to stay
+contiguous, not just deleting the MDX entry.
+
+Given the scope (311 components), continue the per-collection rollout —
+`badges` done; remaining `application` collections next, then `marketing`,
+then `neobrutalism`.
+
+## Phase 3 — Delete a collection's existing dark variants, then regenerate
+
+Per collection, once its light components are standardized: delete its
+`public/examples/{category}/{slug}/*-dark.html` files, run
+`pnpm run generate:dark-variants --category=<category> --slug=<slug>` to
+regenerate just that collection (the badges pilot predates the
+`--category`/`--slug` flags — an unscoped run back then scanned *all*
+categories and also surfaced ~51 pre-existing gaps in unrelated
+collections, see "Known follow-up" below; scoping avoids that now), review
+the rendered output, then set that collection's `dark: true` once in its
+MDX frontmatter.
+
+## Verification
+
+- `pnpm astro check` and `pnpm lint` after each collection
+- Manual dev-server spot check (light + dark) for each migrated collection —
+  contrast against the Text row above, focus-ring visibility, button
+  legibility against dark surfaces; use `agent-browser` for the visual pass
+- `pnpm test` (Playwright) if any test references specific class names or
+  component counts that shift when redundant variants are removed
+
+## Known follow-up (not this pass)
+
+~51 components across `progress-bars`, `radio-groups`, `range-inputs`,
+`skip-links`, `blog-cards`, `cards`, `logo-clouds`, `pricing`,
+`product-cards`, `product-collections`, `sections`, and `templates/*` have
+never had a dark variant generated at all (gap predates this effort). Worth
+a dedicated pass once the house-style rollout reaches them, rather than
+generating drafts now against un-audited light source.
diff --git a/public/component.css b/public/component.css
index aa15d30b..33a7463a 100644
--- a/public/component.css
+++ b/public/component.css
@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-content:"";--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:"Google Sans Flex", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-orange-600:oklch(64.6% .222 41.116);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-300:oklch(87.1% .15 154.449);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-green-900:oklch(39.3% .095 152.535);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-teal-300:oklch(85.5% .138 181.071);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-500:oklch(70.4% .14 182.503);--color-teal-600:oklch(60% .118 184.704);--color-teal-700:oklch(51.1% .096 186.391);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-violet-600:oklch(54.1% .281 293.009);--color-violet-700:oklch(49.1% .27 292.581);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-300:oklch(82.7% .119 306.383);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-purple-800:oklch(43.8% .218 303.724);--color-purple-900:oklch(38.1% .176 304.987);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-2xl:96rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:oklch(55.1% .027 264.364);border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}:is(input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:oklch(54.6% .245 262.881);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}select:where([multiple]),select:where([size]:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;print-color-adjust:unset;padding-right:.75rem}input:where([type=checkbox]),input:where([type=radio]){appearance:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;color:oklch(54.6% .245 262.881);--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;border-color:oklch(55.1% .027 264.364);flex-shrink:0;width:1rem;height:1rem;padding:0;display:inline-block}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);outline:2px solid #0000}input:where([type=checkbox]):checked,input:where([type=radio]):checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors:active){input:where([type=checkbox]):checked{appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors:active){input:where([type=radio]):checked{appearance:auto}}input:where([type=checkbox]):checked:hover,input:where([type=checkbox]):checked:focus,input:where([type=radio]):checked:hover,input:where([type=radio]):checked:focus{background-color:currentColor;border-color:#0000}input:where([type=checkbox]):indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media (forced-colors:active){input:where([type=checkbox]):indeterminate{appearance:auto}}input:where([type=checkbox]):indeterminate:hover,input:where([type=checkbox]):indeterminate:focus{background-color:currentColor;border-color:#0000}input:where([type=file]){background:unset;border-color:inherit;font-size:unset;line-height:inherit;border-width:0;border-radius:0;padding:0}input:where([type=file]):focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.inset-y-14{inset-block:calc(var(--spacing) * 14)}.-start-px{inset-inline-start:-1px}.inset-s-full{inset-inline-start:100%}.start-0{inset-inline-start:calc(var(--spacing) * 0)}.start-3{inset-inline-start:calc(var(--spacing) * 3)}.end-0{inset-inline-end:calc(var(--spacing) * 0)}.end-1{inset-inline-end:calc(var(--spacing) * 1)}.end-4,.inset-e-4{inset-inline-end:calc(var(--spacing) * 4)}.-top-px{top:-1px}.top-0{top:0}.top-0\.5{top:calc(var(--spacing) * .5)}.top-1{top:var(--spacing)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.top-12{top:calc(var(--spacing) * 12)}.-right-2{right:calc(var(--spacing) * -2)}.-right-px{right:-1px}.right-0\.5{right:calc(var(--spacing) * .5)}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.-bottom-7{bottom:calc(var(--spacing) * -7)}.bottom-0{bottom:0}.-left-2{left:calc(var(--spacing) * -2)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-3{left:calc(var(--spacing) * 3)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-auto{z-index:auto}.order-last{order:9999}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.-m-1{margin:calc(var(--spacing) * -1)}.m-1{margin:var(--spacing)}.m-auto{margin:auto}.-mx-4{margin-inline:calc(var(--spacing) * -4)}.mx-auto{margin-inline:auto}.-my-2{margin-block:calc(var(--spacing) * -2)}.-my-3{margin-block:calc(var(--spacing) * -3)}.-my-4{margin-block:calc(var(--spacing) * -4)}.my-0\.5{margin-block:calc(var(--spacing) * .5)}.-ms-1{margin-inline-start:calc(var(--spacing) * -1)}.-ms-1\.5{margin-inline-start:calc(var(--spacing) * -1.5)}.-ms-px{margin-inline-start:-1px}.ms-1\.5{margin-inline-start:calc(var(--spacing) * 1.5)}.ms-4{margin-inline-start:calc(var(--spacing) * 4)}.-me-0\.5{margin-inline-end:calc(var(--spacing) * -.5)}.-me-1{margin-inline-end:calc(var(--spacing) * -1)}.-me-4{margin-inline-end:calc(var(--spacing) * -4)}.-me-px{margin-inline-end:-1px}.me-1\.5{margin-inline-end:calc(var(--spacing) * 1.5)}.-mt-0\.5{margin-top:calc(var(--spacing) * -.5)}.-mt-1\.5{margin-top:calc(var(--spacing) * -1.5)}.-mt-2{margin-top:calc(var(--spacing) * -2)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-32{margin-top:calc(var(--spacing) * 32)}.-mr-0\.5{margin-right:calc(var(--spacing) * -.5)}.-mb-0\.5{margin-bottom:calc(var(--spacing) * -.5)}.-mb-px{margin-bottom:-1px}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-4\/3{aspect-ratio:4/3}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.size-32{width:calc(var(--spacing) * 32);height:calc(var(--spacing) * 32)}.size-full{width:100%;height:100%}.h-1{height:var(--spacing)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-32{height:calc(var(--spacing) * 32)}.h-40{height:calc(var(--spacing) * 40)}.h-56{height:calc(var(--spacing) * 56)}.h-64{height:calc(var(--spacing) * 64)}.h-72{height:calc(var(--spacing) * 72)}.h-80{height:calc(var(--spacing) * 80)}.h-87\.5{height:calc(var(--spacing) * 87.5)}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-46{max-height:calc(var(--spacing) * 46)}.min-h-screen{min-height:100vh}.w-0\.5{width:calc(var(--spacing) * .5)}.w-1\/2{width:50%}.w-2\/3{width:66.6667%}.w-4{width:calc(var(--spacing) * 4)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-96{width:calc(var(--spacing) * 96)}.w-\[80\%\]{width:80%}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-prose{max-width:65ch}.max-w-screen-2xl{max-width:var(--breakpoint-2xl)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-center{transform-origin:50%}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-full{--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-1{--tw-translate-x:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-5{--tw-translate-y:calc(var(--spacing) * -5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-full{--tw-translate-y:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-8{--tw-translate-y:calc(var(--spacing) * 8);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.scroll-mt-16{scroll-margin-top:calc(var(--spacing) * 16)}.scroll-mt-20{scroll-margin-top:calc(var(--spacing) * 20)}.\[appearance\:textfield\]{appearance:textfield}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-\[24px_1fr\]{grid-template-columns:24px 1fr}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.place-items-center{place-items:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}.gap-px{gap:1px}:where(.space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block:0}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-16>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-px>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(1px * var(--tw-space-y-reverse));margin-block-end:calc(1px * calc(1 - var(--tw-space-y-reverse)))}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-x-8{column-gap:calc(var(--spacing) * 8)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}.gap-y-8{row-gap:calc(var(--spacing) * 8)}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-2>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(2px * var(--tw-divide-y-reverse));border-bottom-width:calc(2px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-black>:not(:last-child)){border-color:var(--color-black)}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}:where(.divide-gray-300>:not(:last-child)){border-color:var(--color-gray-300)}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[10px\]{border-radius:10px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-s-sm{border-start-start-radius:var(--radius-sm);border-end-start-radius:var(--radius-sm)}.rounded-ss-xl{border-start-start-radius:var(--radius-xl)}.rounded-e-sm{border-start-end-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm)}.rounded-se-3xl{border-start-end-radius:var(--radius-3xl)}.rounded-ee-xl{border-end-end-radius:var(--radius-xl)}.rounded-es-3xl{border-end-start-radius:var(--radius-3xl)}.rounded-t-md{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.rounded-tl-none{border-top-left-radius:0}.rounded-tr-md{border-top-right-radius:var(--radius-md)}.rounded-b-md{border-bottom-right-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-s-4{border-inline-start-style:var(--tw-border-style);border-inline-start-width:4px}.border-s-\[3px\]{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-r-2{border-right-style:var(--tw-border-style);border-right-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-amber-500{border-color:var(--color-amber-500)}.border-black{border-color:var(--color-black)}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-600{border-color:var(--color-blue-600)}.border-blue-700{border-color:var(--color-blue-700)}.border-emerald-500{border-color:var(--color-emerald-500)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-gray-700{border-color:var(--color-gray-700)}.border-gray-800{border-color:var(--color-gray-800)}.border-gray-900\/10{border-color:#1018281a}@supports (color:color-mix(in lab, red, red)){.border-gray-900\/10{border-color:color-mix(in oklab, var(--color-gray-900) 10%, transparent)}}.border-green-500{border-color:var(--color-green-500)}.border-indigo-100{border-color:var(--color-indigo-100)}.border-indigo-500{border-color:var(--color-indigo-500)}.border-indigo-600{border-color:var(--color-indigo-600)}.border-indigo-900{border-color:var(--color-indigo-900)}.border-purple-500{border-color:var(--color-purple-500)}.border-red-200{border-color:var(--color-red-200)}.border-red-500{border-color:var(--color-red-500)}.border-slate-300{border-color:var(--color-slate-300)}.border-transparent{border-color:#0000}.border-violet-600{border-color:var(--color-violet-600)}.border-white{border-color:var(--color-white)}.bg-\[\#91a5bb\]{background-color:#91a5bb}.bg-\[\#595759\]{background-color:#595759}.bg-\[\#afbfab\]{background-color:#afbfab}.bg-\[\#d2d3d4\]{background-color:#d2d3d4}.bg-\[\#d89f97\]{background-color:#d89f97}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-500{background-color:var(--color-amber-500)}.bg-black{background-color:var(--color-black)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-700{background-color:var(--color-blue-700)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-emerald-400{background-color:var(--color-emerald-400)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-emerald-700{background-color:var(--color-emerald-700)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-gray-900\/10{background-color:#1018281a}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\/10{background-color:color-mix(in oklab, var(--color-gray-900) 10%, transparent)}}.bg-gray-900\/50{background-color:#10182880}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\/50{background-color:color-mix(in oklab, var(--color-gray-900) 50%, transparent)}}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-600{background-color:var(--color-green-600)}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-indigo-50\/60{background-color:#eef2ff99}@supports (color:color-mix(in lab, red, red)){.bg-indigo-50\/60{background-color:color-mix(in oklab, var(--color-indigo-50) 60%, transparent)}}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-indigo-900{background-color:var(--color-indigo-900)}.bg-orange-600{background-color:var(--color-orange-600)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-purple-200{background-color:var(--color-purple-200)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.bg-rose-500{background-color:var(--color-rose-500)}.bg-rose-600{background-color:var(--color-rose-600)}.bg-teal-400{background-color:var(--color-teal-400)}.bg-teal-500{background-color:var(--color-teal-500)}.bg-teal-600{background-color:var(--color-teal-600)}.bg-violet-600{background-color:var(--color-violet-600)}.bg-white{background-color:var(--color-white)}.bg-white\/15{background-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.bg-white\/15{background-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-200{background-color:var(--color-yellow-200)}.bg-yellow-300{background-color:var(--color-yellow-300)}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-linear-to-l{--tw-gradient-position:to left}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-l{--tw-gradient-position:to left in oklab}}.bg-linear-to-l{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-t{--tw-gradient-position:to top in oklab}}.bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[repeating-linear-gradient\(45deg\,var\(--tw-gradient-from\)_0\,var\(--tw-gradient-from\)_10px\,var\(--tw-gradient-to\)_10px\,var\(--tw-gradient-to\)_20px\)\]{background-image:repeating-linear-gradient(45deg,var(--tw-gradient-from) 0,var(--tw-gradient-from) 10px,var(--tw-gradient-to) 10px,var(--tw-gradient-to) 20px)}.from-gray-900\/50{--tw-gradient-from:#10182880}@supports (color:color-mix(in lab, red, red)){.from-gray-900\/50{--tw-gradient-from:color-mix(in oklab, var(--color-gray-900) 50%, transparent)}}.from-gray-900\/50{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-yellow-400{--tw-gradient-from:var(--color-yellow-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-gray-300{--tw-gradient-to:var(--color-gray-300);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-gray-900\/25{--tw-gradient-to:#10182840}@supports (color:color-mix(in lab, red, red)){.to-gray-900\/25{--tw-gradient-to:color-mix(in oklab, var(--color-gray-900) 25%, transparent)}}.to-gray-900\/25{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-yellow-500{--tw-gradient-to:var(--color-yellow-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-12{padding-inline:calc(var(--spacing) * 12)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.ps-4{padding-inline-start:calc(var(--spacing) * 4)}.pe-4{padding-inline-end:calc(var(--spacing) * 4)}.pe-8{padding-inline-end:calc(var(--spacing) * 8)}.pe-10{padding-inline-end:calc(var(--spacing) * 10)}.pe-32{padding-inline-end:calc(var(--spacing) * 32)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pt-12{padding-top:calc(var(--spacing) * 12)}.pt-16{padding-top:calc(var(--spacing) * 16)}.pt-32{padding-top:calc(var(--spacing) * 32)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-1{padding-bottom:var(--spacing)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-6{padding-left:calc(var(--spacing) * 6)}.pl-9{padding-left:calc(var(--spacing) * 9)}.\[text-align\:_inherit\],.\[text-align\:inherit\]{text-align:inherit}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-3xl\/tight{font-size:var(--text-3xl);line-height:var(--leading-tight)}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-\[10px\]\/6{font-size:10px;line-height:calc(var(--spacing) * 6)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-lg\/tight{font-size:var(--text-lg);line-height:var(--leading-tight)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/8{font-size:var(--text-sm);line-height:calc(var(--spacing) * 8)}.text-sm\/none{font-size:var(--text-sm);line-height:1}.text-sm\/relaxed{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-xs\/none{font-size:var(--text-xs);line-height:1}.text-xs\/relaxed{font-size:var(--text-xs);line-height:var(--leading-relaxed)}.text-\[10px\]{font-size:10px}.leading-10{--tw-leading:calc(var(--spacing) * 10);line-height:calc(var(--spacing) * 10)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-pretty{text-wrap:pretty}.whitespace-nowrap{white-space:nowrap}.text-\[\#0072b1\]{color:#0072b1}.text-amber-500{color:var(--color-amber-500)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-700{color:var(--color-emerald-700)}.text-gray-200{color:var(--color-gray-200)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-pink-500{color:var(--color-pink-500)}.text-purple-600{color:var(--color-purple-600)}.text-purple-700{color:var(--color-purple-700)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-red-900{color:var(--color-red-900)}.text-slate-400{color:var(--color-slate-400)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-teal-600{color:var(--color-teal-600)}.text-teal-700{color:var(--color-teal-700)}.text-violet-600{color:var(--color-violet-600)}.text-white{color:var(--color-white)}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.text-white\/95{color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.text-white\/95{color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-700{color:var(--color-yellow-700)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.decoration-slate-300{-webkit-text-decoration-color:var(--color-slate-300);-webkit-text-decoration-color:var(--color-slate-300);text-decoration-color:var(--color-slate-300)}.decoration-2{text-decoration-thickness:2px}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-black::placeholder{color:var(--color-black)}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-\[2px_2px_0_0\]{--tw-shadow:2px 2px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\,8px_8px_0_0\,12px_12px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor), 8px 8px 0 0 var(--tw-shadow-color,currentcolor), 12px 12px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\,8px_8px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor), 8px 8px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-3{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[6px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(6px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-black{--tw-shadow-color:#000}@supports (color:color-mix(in lab, red, red)){.shadow-black{--tw-shadow-color:color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent)}}.shadow-indigo-100{--tw-shadow-color:oklch(93% .034 272.788)}@supports (color:color-mix(in lab, red, red)){.shadow-indigo-100{--tw-shadow-color:color-mix(in oklab, var(--color-indigo-100) var(--tw-shadow-alpha), transparent)}}.ring-black{--tw-ring-color:var(--color-black)}.ring-emerald-700{--tw-ring-color:var(--color-emerald-700)}.ring-indigo-50{--tw-ring-color:var(--color-indigo-50)}.ring-indigo-600{--tw-ring-color:var(--color-indigo-600)}.ring-transparent{--tw-ring-color:transparent}.ring-white{--tw-ring-color:var(--color-white)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-yellow-300{--tw-ring-offset-color:var(--color-yellow-300)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[filter\]{transition-property:filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[inset-inline-start\]{transition-property:inset-inline-start;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-none{transition-property:none}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.\[-moz-appearance\:textfield\]{-moz-appearance:textfield}.\[-webkit-tap-highlight-color\:transparent\]{-webkit-tap-highlight-color:transparent}.\[animation-delay\:0\.2s\]{animation-delay:.2s}.\[animation-delay\:0\.4s\]{animation-delay:.4s}.\[clip-path\:_polygon\(0_0\,_0\%_100\%\,_100\%_50\%\)\]{clip-path:polygon(0 0,0% 100%,100% 50%)}.\[writing-mode\:vertical-lr\]{writing-mode:vertical-lr}.ring-inset{--tw-ring-inset:inset}:is(.\*\:bg-gray-100>*){background-color:var(--color-gray-100)}:is(.\*\:px-4>*){padding-inline:calc(var(--spacing) * 4)}:is(.\*\:py-3>*){padding-block:calc(var(--spacing) * 3)}:is(.\*\:text-left>*){text-align:left}:is(.\*\:text-xs>*){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}:is(.\*\:font-medium>*){--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}:is(.\*\:text-gray-500>*){color:var(--color-gray-500)}:is(.\*\:text-gray-900>*){color:var(--color-gray-900)}.group-odd\:flex-row-reverse:is(:where(.group):nth-child(odd) *){flex-direction:row-reverse}.group-odd\:text-right:is(:where(.group):nth-child(odd) *){text-align:right}.group-even\:order-last:is(:where(.group):nth-child(2n) *){order:9999}.group-open\:absolute:is(:where(.group):is([open],:popover-open,:open) *){position:absolute}.group-open\:start-0:is(:where(.group):is([open],:popover-open,:open) *){inset-inline-start:calc(var(--spacing) * 0)}.group-open\:top-8:is(:where(.group):is([open],:popover-open,:open) *){top:calc(var(--spacing) * 8)}.group-open\:top-auto:is(:where(.group):is([open],:popover-open,:open) *){top:auto}.group-open\:mt-2:is(:where(.group):is([open],:popover-open,:open) *){margin-top:calc(var(--spacing) * 2)}.group-open\:-rotate-180:is(:where(.group):is([open],:popover-open,:open) *),.group-open\/keys\:-rotate-180:is(:where(.group\/keys):is([open],:popover-open,:open) *),.group-open\/members\:-rotate-180:is(:where(.group\/members):is([open],:popover-open,:open) *),.group-open\/roles\:-rotate-180:is(:where(.group\/roles):is([open],:popover-open,:open) *){rotate:-180deg}@media (hover:hover){.group-hover\:visible:is(:where(.group):hover *){visibility:visible}.group-hover\:absolute:is(:where(.group):hover *){position:absolute}.group-hover\:relative:is(:where(.group):hover *){position:relative}.group-hover\:ms-0\.5:is(:where(.group):hover *){margin-inline-start:calc(var(--spacing) * .5)}.group-hover\:-translate-x-2:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-y-2:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-y-0:is(:where(.group):hover *){--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:bg-gray-200:is(:where(.group):hover *){background-color:var(--color-gray-200)}.group-hover\:text-gray-700:is(:where(.group):hover *){color:var(--color-gray-700)}.group-hover\:text-gray-700\/75:is(:where(.group):hover *){color:#364153bf}@supports (color:color-mix(in lab, red, red)){.group-hover\:text-gray-700\/75:is(:where(.group):hover *){color:color-mix(in oklab, var(--color-gray-700) 75%, transparent)}}.group-hover\:text-slate-600:is(:where(.group):hover *){color:var(--color-slate-600)}.group-hover\:text-violet-600:is(:where(.group):hover *){color:var(--color-violet-600)}.group-hover\:underline:is(:where(.group):hover *){text-decoration-line:underline}.group-hover\:underline-offset-4:is(:where(.group):hover *){text-underline-offset:4px}.group-hover\:opacity-0:is(:where(.group):hover *){opacity:0}.group-hover\:opacity-50:is(:where(.group):hover *){opacity:.5}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\:grayscale-50:is(:where(.group):hover *){--tw-grayscale:grayscale(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.group-hover\/card\:-translate-2:is(:where(.group\/card):hover *){--tw-translate-x:calc(var(--spacing) * -2);--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/link\:block:is(:where(.group\/link):hover *){display:block}}.peer-checked\:start-6:is(:where(.peer):checked~*){inset-inline-start:calc(var(--spacing) * 6)}.peer-checked\:start-8:is(:where(.peer):checked~*){inset-inline-start:calc(var(--spacing) * 8)}.peer-checked\:block:is(:where(.peer):checked~*){display:block}.peer-checked\:hidden:is(:where(.peer):checked~*){display:none}.peer-checked\:w-2:is(:where(.peer):checked~*){width:calc(var(--spacing) * 2)}.peer-checked\:translate-x-0:is(:where(.peer):checked~*){--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:translate-x-6:is(:where(.peer):checked~*){--tw-translate-x:calc(var(--spacing) * 6);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:bg-white:is(:where(.peer):checked~*){background-color:var(--color-white)}.peer-checked\:ring-transparent:is(:where(.peer):checked~*){--tw-ring-color:transparent}:is(.peer-checked\:\*\:scale-0:is(:where(.peer):checked~*)>*){--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.peer-checked\/details\:block:is(:where(.peer\/details):checked~*){display:block}.peer-checked\/details\:translate-x-0:is(:where(.peer\/details):checked~*){--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-placeholder-shown\:translate-y-0:is(:where(.peer):placeholder-shown~*){--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-focus\:-translate-y-5:is(:where(.peer):focus~*){--tw-translate-y:calc(var(--spacing) * -5);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-focus-visible\:ring-2:is(:where(.peer):focus-visible~*){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.peer-focus-visible\:ring-emerald-700:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-emerald-700)}.peer-focus-visible\:ring-gray-900:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-gray-900)}.peer-focus-visible\:ring-indigo-600:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-indigo-600)}.peer-focus-visible\:ring-violet-600:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-violet-600)}.peer-focus-visible\:ring-offset-2:is(:where(.peer):focus-visible~*){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.backdrop\:bg-black\/50::backdrop{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.backdrop\:bg-black\/50::backdrop{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:top-0:before{content:var(--tw-content);top:0}.before\:left-1\/2:before{content:var(--tw-content);left:50%}.before\:-ms-px:before{content:var(--tw-content);margin-inline-start:-1px}.before\:-mt-px:before{content:var(--tw-content);margin-top:-1px}.before\:h-0\.5:before{content:var(--tw-content);height:calc(var(--spacing) * .5)}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-0\.5:before{content:var(--tw-content);width:calc(var(--spacing) * .5)}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:-translate-x-1\/2:before{content:var(--tw-content);--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.before\:rounded-full:before{content:var(--tw-content);border-radius:3.40282e38px}.before\:bg-gray-200:before{content:var(--tw-content);background-color:var(--color-gray-200)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);inset-inline:0}.after\:top-1\/2:after{content:var(--tw-content);top:50%}.after\:bottom-0:after{content:var(--tw-content);bottom:0}.after\:mt-4:after{content:var(--tw-content);margin-top:calc(var(--spacing) * 4)}.after\:block:after{content:var(--tw-content);display:block}.after\:h-0\.5:after{content:var(--tw-content);height:calc(var(--spacing) * .5)}.after\:h-1:after{content:var(--tw-content);height:var(--spacing)}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:-translate-y-1\/2:after{content:var(--tw-content);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.after\:rounded-lg:after{content:var(--tw-content);border-radius:var(--radius-lg)}.after\:bg-black:after{content:var(--tw-content);background-color:var(--color-black)}.after\:bg-gray-200:after{content:var(--tw-content);background-color:var(--color-gray-200)}.first\:pt-0:first-child{padding-top:0}:is(.\*\:first\:sticky>*):first-child{position:sticky}:is(.\*\:first\:left-0>*):first-child{left:0}:is(.\*\:first\:bg-white>*):first-child{background-color:var(--color-white)}:is(.\*\:first\:font-medium>*):first-child{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}:is(.peer-checked\:\*\:first\:hidden:is(:where(.peer):checked~*)>*):first-child{display:none}.last\:pb-0:last-child{padding-bottom:0}:is(.\*\:last\:hidden>*):last-child{display:none}:is(.peer-checked\:\*\:last\:block:is(:where(.peer):checked~*)>*):last-child{display:block}.odd\:-me-3:nth-child(odd){margin-inline-end:calc(var(--spacing) * -3)}.even\:-ms-3:nth-child(2n){margin-inline-start:calc(var(--spacing) * -3)}:is(.\*\:even\:bg-gray-50>*):nth-child(2n){background-color:var(--color-gray-50)}.checked\:bg-black:checked{background-color:var(--color-black)}.focus-within\:translate-y-0:focus-within{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.focus-within\:translate-y-4:focus-within{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus-within\:bg-yellow-200:focus-within{background-color:var(--color-yellow-200)}.focus-within\:ring:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-3:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-blue-600:focus-within{--tw-ring-color:var(--color-blue-600)}.focus-within\:ring-yellow-300:focus-within{--tw-ring-color:var(--color-yellow-300)}@media (hover:hover){.hover\:translate-0\.5:hover{--tw-translate-x:calc(var(--spacing) * .5);--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:translate-1:hover{--tw-translate-x:var(--spacing);--tw-translate-y:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:translate-3:hover{--tw-translate-x:calc(var(--spacing) * 3);--tw-translate-y:calc(var(--spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-blue-700:hover{border-color:var(--color-blue-700)}.hover\:border-gray-100:hover{border-color:var(--color-gray-100)}.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:border-gray-600:hover{border-color:var(--color-gray-600)}.hover\:border-pink-600:hover{border-color:var(--color-pink-600)}.hover\:border-slate-400:hover{border-color:var(--color-slate-400)}.hover\:bg-black:hover{background-color:var(--color-black)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-emerald-700:hover{background-color:var(--color-emerald-700)}.hover\:bg-emerald-800:hover{background-color:var(--color-emerald-800)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\:bg-indigo-50:hover{background-color:var(--color-indigo-50)}.hover\:bg-indigo-600:hover{background-color:var(--color-indigo-600)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}.hover\:bg-purple-300:hover{background-color:var(--color-purple-300)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:bg-teal-500:hover{background-color:var(--color-teal-500)}.hover\:bg-teal-600:hover{background-color:var(--color-teal-600)}.hover\:bg-teal-700:hover{background-color:var(--color-teal-700)}.hover\:bg-transparent:hover{background-color:#0000}.hover\:bg-violet-700:hover{background-color:var(--color-violet-700)}.hover\:bg-white:hover{background-color:var(--color-white)}.hover\:bg-yellow-200:hover{background-color:var(--color-yellow-200)}.hover\:bg-yellow-400:hover{background-color:var(--color-yellow-400)}.hover\:bg-yellow-500:hover{background-color:var(--color-yellow-500)}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-gray-500\/75:hover{color:#6a7282bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-500\/75:hover{color:color-mix(in oklab, var(--color-gray-500) 75%, transparent)}}.hover\:text-gray-600\/75:hover{color:#4a5565bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-600\/75:hover{color:color-mix(in oklab, var(--color-gray-600) 75%, transparent)}}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-gray-700\/75:hover{color:#364153bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-700\/75:hover{color:color-mix(in oklab, var(--color-gray-700) 75%, transparent)}}.hover\:text-gray-800:hover{color:var(--color-gray-800)}.hover\:text-gray-900:hover{color:var(--color-gray-900)}.hover\:text-gray-900\/75:hover{color:#101828bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-900\/75:hover{color:color-mix(in oklab, var(--color-gray-900) 75%, transparent)}}.hover\:text-indigo-600:hover{color:var(--color-indigo-600)}.hover\:text-indigo-600\/75:hover{color:#4f39f6bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-indigo-600\/75:hover{color:color-mix(in oklab, var(--color-indigo-600) 75%, transparent)}}.hover\:text-indigo-700:hover{color:var(--color-indigo-700)}.hover\:text-indigo-900:hover{color:var(--color-indigo-900)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-slate-900:hover{color:var(--color-slate-900)}.hover\:text-teal-600\/75:hover{color:#009588bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-teal-600\/75:hover{color:color-mix(in oklab, var(--color-teal-600) 75%, transparent)}}.hover\:text-teal-700\/75:hover{color:#00776ebf}@supports (color:color-mix(in lab, red, red)){.hover\:text-teal-700\/75:hover{color:color-mix(in oklab, var(--color-teal-700) 75%, transparent)}}.hover\:text-violet-700:hover{color:var(--color-violet-700)}.hover\:text-white:hover{color:var(--color-white)}.hover\:text-yellow-500:hover{color:var(--color-yellow-500)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-indigo-500:hover{-webkit-text-decoration-color:var(--color-indigo-500);-webkit-text-decoration-color:var(--color-indigo-500);text-decoration-color:var(--color-indigo-500)}.hover\:opacity-75:hover{opacity:.75}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-\[-1px_-1px_0_0\]:hover{--tw-shadow:-1px -1px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-none:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:ring-1:hover{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:ring-gray-300:hover{--tw-ring-color:var(--color-gray-300)}.hover\:ring-indigo-600:hover{--tw-ring-color:var(--color-indigo-600)}.hover\:ring-indigo-700:hover{--tw-ring-color:var(--color-indigo-700)}.hover\:grayscale-0:hover{--tw-grayscale:grayscale(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\:transition-colors:hover{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.hover\:after\:h-full:hover:after{content:var(--tw-content);height:100%}}.focus\:relative:focus{position:relative}.focus\:z-10:focus{z-index:10}.focus\:translate-y-4:focus{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus\:border-emerald-600:focus{border-color:var(--color-emerald-600)}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:border-indigo-600:focus{border-color:var(--color-indigo-600)}.focus\:border-transparent:focus{border-color:#0000}.focus\:border-white:focus{border-color:var(--color-white)}.focus\:bg-yellow-200:focus{background-color:var(--color-yellow-200)}.focus\:bg-yellow-400:focus{background-color:var(--color-yellow-400)}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-black:focus{--tw-ring-color:var(--color-black)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:ring-emerald-600:focus{--tw-ring-color:var(--color-emerald-600)}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\:ring-indigo-600:focus{--tw-ring-color:var(--color-indigo-600)}.focus\:ring-transparent:focus{--tw-ring-color:transparent}.focus\:ring-yellow-300:focus{--tw-ring-color:var(--color-yellow-300)}.focus\:ring-yellow-400:focus{--tw-ring-color:var(--color-yellow-400)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:ring-offset-white:focus{--tw-ring-offset-color:var(--color-white)}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus\:outline-0:focus{outline-style:var(--tw-outline-style);outline-width:0}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-4:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-indigo-200:focus-visible{--tw-ring-color:var(--color-indigo-200)}.focus-visible\:ring-indigo-600:focus-visible{--tw-ring-color:var(--color-indigo-600)}.focus-visible\:ring-slate-200:focus-visible{--tw-ring-color:var(--color-slate-200)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-white:focus-visible{--tw-ring-offset-color:var(--color-white)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:bg-blue-600:active{background-color:var(--color-blue-600)}.active\:text-blue-600:active{color:var(--color-blue-600)}.disabled\:pointer-events-auto:disabled{pointer-events:auto}.disabled\:opacity-50:disabled{opacity:.5}.has-checked\:border-blue-600:has(:checked){border-color:var(--color-blue-600)}.has-checked\:bg-blue-500:has(:checked){background-color:var(--color-blue-500)}.has-checked\:bg-green-500:has(:checked){background-color:var(--color-green-500)}.has-checked\:bg-indigo-600:has(:checked){background-color:var(--color-indigo-600)}.has-checked\:ring-1:has(:checked){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-checked\:ring-2:has(:checked){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-checked\:ring-amber-500:has(:checked){--tw-ring-color:var(--color-amber-500)}.has-checked\:ring-black:has(:checked){--tw-ring-color:var(--color-black)}.has-checked\:ring-blue-500:has(:checked){--tw-ring-color:var(--color-blue-500)}.has-checked\:ring-blue-600:has(:checked){--tw-ring-color:var(--color-blue-600)}.has-checked\:ring-red-500:has(:checked){--tw-ring-color:var(--color-red-500)}.has-checked\:ring-offset-2:has(:checked){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.aria-pressed\:border[aria-pressed=true]{border-style:var(--tw-border-style);border-width:1px}.aria-pressed\:border-b-0[aria-pressed=true]{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.aria-pressed\:border-gray-200[aria-pressed=true]{border-color:var(--color-gray-200)}.aria-pressed\:bg-white[aria-pressed=true]{background-color:var(--color-white)}.aria-pressed\:text-gray-900[aria-pressed=true]{color:var(--color-gray-900)}.aria-pressed\:ring-2[aria-pressed=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.aria-pressed\:ring-emerald-700[aria-pressed=true]{--tw-ring-color:var(--color-emerald-700)}.aria-pressed\:ring-offset-2[aria-pressed=true]{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.aria-selected\:border-emerald-700[aria-selected=true]{border-color:var(--color-emerald-700)}.aria-selected\:text-emerald-700[aria-selected=true]{color:var(--color-emerald-700)}.aria-\[pressed\=false\]\:text-gray-500[aria-pressed=false]{color:var(--color-gray-500)}@media (hover:hover){.aria-\[pressed\=false\]\:hover\:text-gray-700[aria-pressed=false]:hover{color:var(--color-gray-700)}}.aria-\[selected\=false\]\:border-transparent[aria-selected=false]{border-color:#0000}.aria-\[selected\=false\]\:text-gray-500[aria-selected=false]{color:var(--color-gray-500)}@media (hover:hover){.aria-\[selected\=false\]\:hover\:text-gray-700[aria-selected=false]:hover{color:var(--color-gray-700)}}.data-\[mode\=note\]\:border-amber-200[data-mode=note]{border-color:var(--color-amber-200)}.data-\[mode\=note\]\:bg-amber-50[data-mode=note]{background-color:var(--color-amber-50)}.data-\[mode\=note\]\:bg-amber-600[data-mode=note]{background-color:var(--color-amber-600)}@media (hover:hover){.data-\[mode\=note\]\:hover\:bg-amber-700[data-mode=note]:hover{background-color:var(--color-amber-700)}}.data-\[mode\=note\]\:focus\:border-amber-500[data-mode=note]:focus{border-color:var(--color-amber-500)}.data-\[mode\=note\]\:focus\:ring-amber-500[data-mode=note]:focus{--tw-ring-color:var(--color-amber-500)}.data-\[mode\=reply\]\:border-gray-200[data-mode=reply]{border-color:var(--color-gray-200)}.data-\[mode\=reply\]\:bg-indigo-600[data-mode=reply]{background-color:var(--color-indigo-600)}@media (hover:hover){.data-\[mode\=reply\]\:hover\:bg-indigo-700[data-mode=reply]:hover{background-color:var(--color-indigo-700)}}.data-\[mode\=reply\]\:focus\:border-indigo-600[data-mode=reply]:focus{border-color:var(--color-indigo-600)}.data-\[mode\=reply\]\:focus\:ring-indigo-600[data-mode=reply]:focus{--tw-ring-color:var(--color-indigo-600)}@media (min-width:40rem){.sm\:not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.sm\:end-6{inset-inline-end:calc(var(--spacing) * 6)}.sm\:top-6{top:calc(var(--spacing) * 6)}.sm\:order-first{order:-9999}.sm\:order-last{order:9999}.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:mt-0{margin-top:0}.sm\:mt-4{margin-top:calc(var(--spacing) * 4)}.sm\:mt-6{margin-top:calc(var(--spacing) * 6)}.sm\:mt-8{margin-top:calc(var(--spacing) * 8)}.sm\:mt-48{margin-top:calc(var(--spacing) * 48)}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:table-cell{display:table-cell}.sm\:size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.sm\:size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.sm\:size-18{width:calc(var(--spacing) * 18);height:calc(var(--spacing) * 18)}.sm\:size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.sm\:h-56{height:calc(var(--spacing) * 56)}.sm\:h-64{height:calc(var(--spacing) * 64)}.sm\:h-72{height:calc(var(--spacing) * 72)}.sm\:h-80{height:calc(var(--spacing) * 80)}.sm\:h-112\.5{height:calc(var(--spacing) * 112.5)}.sm\:h-\[calc\(100\%-2rem\)\]{height:calc(100% - 2rem)}.sm\:h-full{height:100%}.sm\:h-px{height:1px}.sm\:w-8{width:calc(var(--spacing) * 8)}.sm\:w-56{width:calc(var(--spacing) * 56)}.sm\:w-auto{width:auto}.sm\:max-w-xs{max-width:var(--container-xs)}.sm\:flex-1{flex:1}.sm\:shrink-0{flex-shrink:0}.sm\:basis-56{flex-basis:calc(var(--spacing) * 56)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:place-content-center{place-content:center}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:items-start{align-items:flex-start}.sm\:items-stretch{align-items:stretch}.sm\:justify-between{justify-content:space-between}.sm\:justify-center{justify-content:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-start{justify-content:flex-start}.sm\:gap-1\.5{gap:calc(var(--spacing) * 1.5)}.sm\:gap-2{gap:calc(var(--spacing) * 2)}.sm\:gap-4{gap:calc(var(--spacing) * 4)}.sm\:gap-6{gap:calc(var(--spacing) * 6)}.sm\:gap-8{gap:calc(var(--spacing) * 8)}.sm\:gap-12{gap:calc(var(--spacing) * 12)}:where(.sm\:divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.sm\:divide-y-0>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px * var(--tw-divide-y-reverse));border-bottom-width:calc(0px * calc(1 - var(--tw-divide-y-reverse)))}.sm\:self-end{align-self:flex-end}.sm\:rounded-full{border-radius:3.40282e38px}.sm\:rounded-ss-\[30px\]{border-start-start-radius:30px}.sm\:border-2{border-style:var(--tw-border-style);border-width:2px}.sm\:border-indigo-500{border-color:var(--color-indigo-500)}.sm\:border-l-transparent{border-left-color:#0000}.sm\:bg-yellow-500{background-color:var(--color-yellow-500)}.sm\:p-3{padding:calc(var(--spacing) * 3)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:px-8{padding-inline:calc(var(--spacing) * 8)}.sm\:px-12{padding-inline:calc(var(--spacing) * 12)}.sm\:py-12{padding-block:calc(var(--spacing) * 12)}.sm\:py-16{padding-block:calc(var(--spacing) * 16)}.sm\:py-20{padding-block:calc(var(--spacing) * 20)}.sm\:py-24{padding-block:calc(var(--spacing) * 24)}.sm\:pt-16{padding-top:calc(var(--spacing) * 16)}.sm\:pt-20{padding-top:calc(var(--spacing) * 20)}.sm\:pt-48{padding-top:calc(var(--spacing) * 48)}.sm\:pb-4{padding-bottom:calc(var(--spacing) * 4)}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-lg\/relaxed{font-size:var(--text-lg);line-height:var(--leading-relaxed)}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.sm\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.sm\:text-gray-500{color:var(--color-gray-500)}}@media (min-width:48rem){.md\:relative{position:relative}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:mt-4{margin-top:calc(var(--spacing) * 4)}.md\:mt-8{margin-top:calc(var(--spacing) * 8)}.md\:block{display:block}.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:table-cell{display:table-cell}.md\:h-\[calc\(100\%-4rem\)\]{height:calc(100% - 4rem)}.md\:h-full{height:100%}.md\:max-w-none{max-width:none}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:calc(var(--spacing) * 4)}.md\:gap-8{gap:calc(var(--spacing) * 8)}.md\:gap-12{gap:calc(var(--spacing) * 12)}:where(.md\:space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.md\:rounded-ss-\[60px\]{border-start-start-radius:60px}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:py-4{padding-block:calc(var(--spacing) * 4)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media (min-width:64rem){.lg\:static{position:static}.lg\:end-8{inset-inline-end:calc(var(--spacing) * 8)}.lg\:top-8{top:calc(var(--spacing) * 8)}.lg\:order-last{order:9999}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:mt-0{margin-top:0}.lg\:mt-8{margin-top:calc(var(--spacing) * 8)}.lg\:mt-24{margin-top:calc(var(--spacing) * 24)}.lg\:mt-64{margin-top:calc(var(--spacing) * 64)}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:h-72{height:calc(var(--spacing) * 72)}.lg\:h-96{height:calc(var(--spacing) * 96)}.lg\:h-full{height:100%}.lg\:h-screen{height:100vh}.lg\:max-w-none{max-width:none}.lg\:flex-1{flex:1}.lg\:shrink-0{flex-shrink:0}.lg\:translate-x-0{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-\[1fr_120px\]{grid-template-columns:1fr 120px}.lg\:grid-cols-\[120px_1fr\]{grid-template-columns:120px 1fr}.lg\:place-content-center{place-content:center}.lg\:items-end{align-items:flex-end}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}.lg\:justify-end{justify-content:flex-end}.lg\:justify-start{justify-content:flex-start}.lg\:gap-6{gap:calc(var(--spacing) * 6)}.lg\:gap-8{gap:calc(var(--spacing) * 8)}.lg\:gap-12{gap:calc(var(--spacing) * 12)}.lg\:gap-16{gap:calc(var(--spacing) * 16)}.lg\:gap-32{gap:calc(var(--spacing) * 32)}:where(.lg\:space-y-16>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)))}.lg\:gap-y-16{row-gap:calc(var(--spacing) * 16)}.lg\:border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.lg\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:p-4{padding:calc(var(--spacing) * 4)}.lg\:p-8{padding:calc(var(--spacing) * 8)}.lg\:p-12{padding:calc(var(--spacing) * 12)}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}.lg\:px-16{padding-inline:calc(var(--spacing) * 16)}.lg\:py-16{padding-block:calc(var(--spacing) * 16)}.lg\:py-24{padding-block:calc(var(--spacing) * 24)}.lg\:py-32{padding-block:calc(var(--spacing) * 32)}.lg\:ps-16{padding-inline-start:calc(var(--spacing) * 16)}.lg\:pe-16{padding-inline-end:calc(var(--spacing) * 16)}.lg\:pt-16{padding-top:calc(var(--spacing) * 16)}.lg\:pt-24{padding-top:calc(var(--spacing) * 24)}.lg\:pt-64{padding-top:calc(var(--spacing) * 64)}.lg\:pb-8{padding-bottom:calc(var(--spacing) * 8)}.lg\:text-left{text-align:left}.lg\:text-right{text-align:right}.lg\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (min-width:80rem){.xl\:static{position:static}.xl\:hidden{display:none}.xl\:translate-x-0{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}.ltr\:right-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){right:0}.ltr\:border-s-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.ltr\:border-b-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ltr\:bg-gray-50:where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-50)}.ltr\:bg-white:where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-white)}.ltr\:pr-9:where(:dir(ltr),[dir=ltr],[dir=ltr] *){padding-right:calc(var(--spacing) * 9)}.ltr\:text-left:where(:dir(ltr),[dir=ltr],[dir=ltr] *){text-align:left}.ltr\:group-open\:start-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *):is(:where(.group):is([open],:popover-open,:open) *){inset-inline-start:calc(var(--spacing) * 0)}@media (min-width:40rem){.ltr\:sm\:justify-start:where(:dir(ltr),[dir=ltr],[dir=ltr] *){justify-content:flex-start}.ltr\:sm\:text-left:where(:dir(ltr),[dir=ltr],[dir=ltr] *){text-align:left}}.rtl\:left-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){left:0}.rtl\:-translate-x-1:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.rtl\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:180deg}.rtl\:border-e-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.rtl\:border-t-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){border-top-style:var(--tw-border-style);border-top-width:0}.rtl\:bg-gray-50:where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-50)}.rtl\:bg-white:where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-white)}.rtl\:pl-9:where(:dir(rtl),[dir=rtl],[dir=rtl] *){padding-left:calc(var(--spacing) * 9)}.rtl\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){.rtl\:group-hover\:-translate-x-1:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.rtl\:peer-checked\:-translate-x-6:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.peer):checked~*){--tw-translate-x:calc(var(--spacing) * -6);translate:var(--tw-translate-x) var(--tw-translate-y)}@media not all and (min-width:64rem){.max-lg\:rtl\:translate-x-full:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media (min-width:40rem){.rtl\:sm\:justify-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){justify-content:flex-end}.rtl\:sm\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}}:where(.dark\:divide-gray-600:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-600)}:where(.dark\:divide-gray-700:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-700)}:where(.dark\:divide-gray-800:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-800)}:where(.dark\:divide-gray-900:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-900)}:where(.dark\:divide-white:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-white)}.dark\:border-amber-400:where(.dark,.dark *){border-color:var(--color-amber-400)}.dark\:border-blue-300:where(.dark,.dark *){border-color:var(--color-blue-300)}.dark\:border-blue-400:where(.dark,.dark *){border-color:var(--color-blue-400)}.dark\:border-blue-600:where(.dark,.dark *){border-color:var(--color-blue-600)}.dark\:border-gray-600:where(.dark,.dark *){border-color:var(--color-gray-600)}.dark\:border-gray-700:where(.dark,.dark *){border-color:var(--color-gray-700)}.dark\:border-gray-800:where(.dark,.dark *){border-color:var(--color-gray-800)}.dark\:border-green-400:where(.dark,.dark *){border-color:var(--color-green-400)}.dark\:border-indigo-300:where(.dark,.dark *){border-color:var(--color-indigo-300)}.dark\:border-red-400:where(.dark,.dark *){border-color:var(--color-red-400)}.dark\:border-slate-600:where(.dark,.dark *){border-color:var(--color-slate-600)}.dark\:border-white:where(.dark,.dark *){border-color:var(--color-white)}.dark\:border-white\/10:where(.dark,.dark *){border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/10:where(.dark,.dark *){border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:bg-amber-700:where(.dark,.dark *){background-color:var(--color-amber-700)}.dark\:bg-amber-800:where(.dark,.dark *){background-color:var(--color-amber-800)}.dark\:bg-blue-300:where(.dark,.dark *){background-color:var(--color-blue-300)}.dark\:bg-blue-500\/20:where(.dark,.dark *){background-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-500\/20:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.dark\:bg-blue-700:where(.dark,.dark *){background-color:var(--color-blue-700)}.dark\:bg-blue-700\/25:where(.dark,.dark *){background-color:#1447e640}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-700\/25:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-700) 25%, transparent)}}.dark\:bg-blue-800:where(.dark,.dark *){background-color:var(--color-blue-800)}.dark\:bg-emerald-700:where(.dark,.dark *){background-color:var(--color-emerald-700)}.dark\:bg-gray-400:where(.dark,.dark *){background-color:var(--color-gray-400)}.dark\:bg-gray-600:where(.dark,.dark *){background-color:var(--color-gray-600)}.dark\:bg-gray-700:where(.dark,.dark *){background-color:var(--color-gray-700)}.dark\:bg-gray-800:where(.dark,.dark *){background-color:var(--color-gray-800)}.dark\:bg-gray-900:where(.dark,.dark *){background-color:var(--color-gray-900)}.dark\:bg-gray-900\/15:where(.dark,.dark *){background-color:#10182826}@supports (color:color-mix(in lab, red, red)){.dark\:bg-gray-900\/15:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-gray-900) 15%, transparent)}}.dark\:bg-green-300:where(.dark,.dark *){background-color:var(--color-green-300)}.dark\:bg-green-700:where(.dark,.dark *){background-color:var(--color-green-700)}.dark\:bg-green-800:where(.dark,.dark *){background-color:var(--color-green-800)}.dark\:bg-indigo-300:where(.dark,.dark *){background-color:var(--color-indigo-300)}.dark\:bg-purple-600:where(.dark,.dark *){background-color:var(--color-purple-600)}.dark\:bg-purple-700:where(.dark,.dark *){background-color:var(--color-purple-700)}.dark\:bg-purple-800:where(.dark,.dark *){background-color:var(--color-purple-800)}.dark\:bg-red-300:where(.dark,.dark *){background-color:var(--color-red-300)}.dark\:bg-red-700:where(.dark,.dark *){background-color:var(--color-red-700)}.dark\:bg-red-800:where(.dark,.dark *){background-color:var(--color-red-800)}.dark\:bg-white:where(.dark,.dark *){background-color:var(--color-white)}.dark\:bg-white\/10:where(.dark,.dark *){background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/10:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:bg-yellow-600:where(.dark,.dark *){background-color:var(--color-yellow-600)}.dark\:bg-yellow-700:where(.dark,.dark *){background-color:var(--color-yellow-700)}.dark\:from-yellow-500:where(.dark,.dark *){--tw-gradient-from:var(--color-yellow-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.dark\:to-gray-600:where(.dark,.dark *){--tw-gradient-to:var(--color-gray-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.dark\:to-yellow-400:where(.dark,.dark *){--tw-gradient-to:var(--color-yellow-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.dark\:text-amber-100:where(.dark,.dark *){color:var(--color-amber-100)}.dark\:text-amber-200:where(.dark,.dark *){color:var(--color-amber-200)}.dark\:text-blue-50:where(.dark,.dark *){color:var(--color-blue-50)}.dark\:text-blue-100:where(.dark,.dark *){color:var(--color-blue-100)}.dark\:text-blue-200:where(.dark,.dark *){color:var(--color-blue-200)}.dark\:text-blue-400:where(.dark,.dark *){color:var(--color-blue-400)}.dark\:text-emerald-100:where(.dark,.dark *){color:var(--color-emerald-100)}.dark\:text-gray-200:where(.dark,.dark *){color:var(--color-gray-200)}.dark\:text-gray-300:where(.dark,.dark *){color:var(--color-gray-300)}.dark\:text-gray-400:where(.dark,.dark *){color:var(--color-gray-400)}.dark\:text-gray-500:where(.dark,.dark *){color:var(--color-gray-500)}.dark\:text-gray-900:where(.dark,.dark *){color:var(--color-gray-900)}.dark\:text-green-50:where(.dark,.dark *){color:var(--color-green-50)}.dark\:text-green-100:where(.dark,.dark *){color:var(--color-green-100)}.dark\:text-green-200:where(.dark,.dark *){color:var(--color-green-200)}.dark\:text-indigo-300:where(.dark,.dark *){color:var(--color-indigo-300)}.dark\:text-indigo-500:where(.dark,.dark *){color:var(--color-indigo-500)}.dark\:text-purple-100:where(.dark,.dark *){color:var(--color-purple-100)}.dark\:text-red-50:where(.dark,.dark *){color:var(--color-red-50)}.dark\:text-red-100:where(.dark,.dark *){color:var(--color-red-100)}.dark\:text-red-200:where(.dark,.dark *){color:var(--color-red-200)}.dark\:text-red-500:where(.dark,.dark *){color:var(--color-red-500)}.dark\:text-red-600:where(.dark,.dark *){color:var(--color-red-600)}.dark\:text-slate-200:where(.dark,.dark *){color:var(--color-slate-200)}.dark\:text-slate-300:where(.dark,.dark *){color:var(--color-slate-300)}.dark\:text-slate-500:where(.dark,.dark *){color:var(--color-slate-500)}.dark\:text-teal-300:where(.dark,.dark *){color:var(--color-teal-300)}.dark\:text-teal-500:where(.dark,.dark *){color:var(--color-teal-500)}.dark\:text-teal-600:where(.dark,.dark *){color:var(--color-teal-600)}.dark\:text-white:where(.dark,.dark *){color:var(--color-white)}.dark\:text-white\/75:where(.dark,.dark *){color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:text-white\/75:where(.dark,.dark *){color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.dark\:decoration-slate-600:where(.dark,.dark *){-webkit-text-decoration-color:var(--color-slate-600);-webkit-text-decoration-color:var(--color-slate-600);text-decoration-color:var(--color-slate-600)}.dark\:placeholder-white:where(.dark,.dark *)::placeholder{color:var(--color-white)}.dark\:shadow-gray-700\/25:where(.dark,.dark *){--tw-shadow-color:#36415340}@supports (color:color-mix(in lab, red, red)){.dark\:shadow-gray-700\/25:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-gray-700) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.dark\:shadow-gray-800\/25:where(.dark,.dark *){--tw-shadow-color:#1e293940}@supports (color:color-mix(in lab, red, red)){.dark\:shadow-gray-800\/25:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-gray-800) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.dark\:shadow-white:where(.dark,.dark *){--tw-shadow-color:#fff}@supports (color:color-mix(in lab, red, red)){.dark\:shadow-white:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, var(--color-white) var(--tw-shadow-alpha), transparent)}}.dark\:ring-gray-900:where(.dark,.dark *){--tw-ring-color:var(--color-gray-900)}.dark\:ring-white:where(.dark,.dark *){--tw-ring-color:var(--color-white)}.dark\:ring-offset-gray-900:where(.dark,.dark *){--tw-ring-offset-color:var(--color-gray-900)}.dark\:ring-offset-yellow-600:where(.dark,.dark *){--tw-ring-offset-color:var(--color-yellow-600)}:is(.dark\:\*\:text-white:where(.dark,.dark *)>*){color:var(--color-white)}@media (hover:hover){.dark\:group-hover\:bg-gray-700:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-gray-700)}.dark\:group-hover\:bg-gray-900:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-gray-900)}.dark\:group-hover\:text-gray-100:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-gray-100)}.dark\:group-hover\:text-gray-300:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-gray-300)}.dark\:group-hover\:text-slate-300:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-slate-300)}.dark\:group-hover\:text-white\/75:where(.dark,.dark *):is(:where(.group):hover *){color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:group-hover\:text-white\/75:where(.dark,.dark *):is(:where(.group):hover *){color:color-mix(in oklab, var(--color-white) 75%, transparent)}}}.dark\:peer-checked\:bg-gray-900:where(.dark,.dark *):is(:where(.peer):checked~*){background-color:var(--color-gray-900)}.dark\:backdrop\:bg-white\/50:where(.dark,.dark *)::backdrop{background-color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.dark\:backdrop\:bg-white\/50:where(.dark,.dark *)::backdrop{background-color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.dark\:before\:bg-gray-700:where(.dark,.dark *):before,.dark\:after\:bg-gray-700:where(.dark,.dark *):after{content:var(--tw-content);background-color:var(--color-gray-700)}.dark\:after\:bg-white:where(.dark,.dark *):after{content:var(--tw-content);background-color:var(--color-white)}:is(.dark\:\*\:first\:bg-gray-900:where(.dark,.dark *)>*):first-child{background-color:var(--color-gray-900)}:is(.dark\:\*\:even\:bg-gray-800:where(.dark,.dark *)>*):nth-child(2n){background-color:var(--color-gray-800)}.dark\:checked\:bg-blue-600:where(.dark,.dark *):checked{background-color:var(--color-blue-600)}.dark\:focus-within\:bg-yellow-700:where(.dark,.dark *):focus-within{background-color:var(--color-yellow-700)}.dark\:focus-within\:ring-yellow-600:where(.dark,.dark *):focus-within{--tw-ring-color:var(--color-yellow-600)}@media (hover:hover){.dark\:hover\:border-blue-200:where(.dark,.dark *):hover{border-color:var(--color-blue-200)}.dark\:hover\:border-gray-700:where(.dark,.dark *):hover{border-color:var(--color-gray-700)}.dark\:hover\:border-slate-500:where(.dark,.dark *):hover{border-color:var(--color-slate-500)}.dark\:hover\:bg-blue-200:where(.dark,.dark *):hover{background-color:var(--color-blue-200)}.dark\:hover\:bg-gray-600:where(.dark,.dark *):hover{background-color:var(--color-gray-600)}.dark\:hover\:bg-gray-700:where(.dark,.dark *):hover{background-color:var(--color-gray-700)}.dark\:hover\:bg-gray-800:where(.dark,.dark *):hover{background-color:var(--color-gray-800)}.dark\:hover\:bg-gray-800\/50:where(.dark,.dark *):hover{background-color:#1e293980}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-gray-800\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-gray-800) 50%, transparent)}}.dark\:hover\:bg-indigo-200:where(.dark,.dark *):hover{background-color:var(--color-indigo-200)}.dark\:hover\:bg-indigo-700:where(.dark,.dark *):hover{background-color:var(--color-indigo-700)}.dark\:hover\:bg-indigo-800:where(.dark,.dark *):hover{background-color:var(--color-indigo-800)}.dark\:hover\:bg-purple-900:where(.dark,.dark *):hover{background-color:var(--color-purple-900)}.dark\:hover\:bg-red-600\/10:where(.dark,.dark *):hover{background-color:#e400141a}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-red-600\/10:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-red-600) 10%, transparent)}}.dark\:hover\:bg-red-700\/20:where(.dark,.dark *):hover{background-color:#bf000f33}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-red-700\/20:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-red-700) 20%, transparent)}}.dark\:hover\:bg-slate-800:where(.dark,.dark *):hover{background-color:var(--color-slate-800)}.dark\:hover\:bg-teal-500:where(.dark,.dark *):hover{background-color:var(--color-teal-500)}.dark\:hover\:bg-white:where(.dark,.dark *):hover{background-color:var(--color-white)}.dark\:hover\:bg-yellow-500:where(.dark,.dark *):hover{background-color:var(--color-yellow-500)}.dark\:hover\:bg-yellow-700:where(.dark,.dark *):hover{background-color:var(--color-yellow-700)}.dark\:hover\:text-blue-300:where(.dark,.dark *):hover{color:var(--color-blue-300)}.dark\:hover\:text-blue-500:where(.dark,.dark *):hover{color:var(--color-blue-500)}.dark\:hover\:text-gray-200:where(.dark,.dark *):hover{color:var(--color-gray-200)}.dark\:hover\:text-gray-300:where(.dark,.dark *):hover{color:var(--color-gray-300)}.dark\:hover\:text-gray-900:where(.dark,.dark *):hover{color:var(--color-gray-900)}.dark\:hover\:text-indigo-200:where(.dark,.dark *):hover{color:var(--color-indigo-200)}.dark\:hover\:text-red-300:where(.dark,.dark *):hover{color:var(--color-red-300)}.dark\:hover\:text-slate-50:where(.dark,.dark *):hover{color:var(--color-slate-50)}.dark\:hover\:text-teal-500\/75:where(.dark,.dark *):hover{color:#00baa7bf}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:text-teal-500\/75:where(.dark,.dark *):hover{color:color-mix(in oklab, var(--color-teal-500) 75%, transparent)}}.dark\:hover\:text-white:where(.dark,.dark *):hover{color:var(--color-white)}.dark\:hover\:text-white\/75:where(.dark,.dark *):hover{color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:text-white\/75:where(.dark,.dark *):hover{color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.dark\:hover\:decoration-indigo-400:where(.dark,.dark *):hover{-webkit-text-decoration-color:var(--color-indigo-400);-webkit-text-decoration-color:var(--color-indigo-400);text-decoration-color:var(--color-indigo-400)}}.dark\:focus\:bg-yellow-500:where(.dark,.dark *):focus{background-color:var(--color-yellow-500)}.dark\:focus\:bg-yellow-700:where(.dark,.dark *):focus{background-color:var(--color-yellow-700)}.dark\:focus\:ring-indigo-300:where(.dark,.dark *):focus{--tw-ring-color:var(--color-indigo-300)}.dark\:focus\:ring-white:where(.dark,.dark *):focus{--tw-ring-color:var(--color-white)}.dark\:focus\:ring-yellow-600:where(.dark,.dark *):focus{--tw-ring-color:var(--color-yellow-600)}.dark\:focus\:ring-offset-gray-900:where(.dark,.dark *):focus{--tw-ring-offset-color:var(--color-gray-900)}.dark\:focus-visible\:ring-indigo-300:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--color-indigo-300)}.dark\:focus-visible\:ring-indigo-700:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--color-indigo-700)}.dark\:focus-visible\:ring-slate-700:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--color-slate-700)}.dark\:focus-visible\:ring-offset-gray-900:where(.dark,.dark *):focus-visible{--tw-ring-offset-color:var(--color-gray-900)}.dark\:has-checked\:bg-blue-600:where(.dark,.dark *):has(:checked){background-color:var(--color-blue-600)}.dark\:has-checked\:bg-green-600:where(.dark,.dark *):has(:checked){background-color:var(--color-green-600)}.dark\:ltr\:bg-gray-800:where(.dark,.dark *):where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-800)}.dark\:ltr\:bg-gray-900:where(.dark,.dark *):where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-900)}.dark\:rtl\:bg-gray-800:where(.dark,.dark *):where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-800)}.dark\:rtl\:bg-gray-900:where(.dark,.dark *):where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-900)}.\[\&_summary\:\:-webkit-details-marker\]\:hidden summary::-webkit-details-marker{display:none}.\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-0::-webkit-calendar-picker-indicator{opacity:0}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-inner-spin-button\]\:m-0::-webkit-inner-spin-button{margin:0}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:m-0::-webkit-outer-spin-button{margin:0}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:size-7::-webkit-slider-thumb{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer::-webkit-slider-thumb{cursor:pointer}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb{border-radius:3.40282e38px}.\[\&\:\:-webkit-slider-thumb\]\:border-\[6px\]::-webkit-slider-thumb{border-style:var(--tw-border-style);border-width:6px}.\[\&\:\:-webkit-slider-thumb\]\:border-gray-500::-webkit-slider-thumb{border-color:var(--color-gray-500)}.\[\&\:\:-webkit-slider-thumb\]\:bg-gray-200::-webkit-slider-thumb{background-color:var(--color-gray-200)}@media (hover:hover){.hover\:\[\&\~label\]\:text-yellow-500:hover~label{color:var(--color-yellow-500)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
\ No newline at end of file
+@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-content:"";--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:"Google Sans Flex", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-orange-600:oklch(64.6% .222 41.116);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-300:oklch(87.1% .15 154.449);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-green-900:oklch(39.3% .095 152.535);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-teal-300:oklch(85.5% .138 181.071);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-500:oklch(70.4% .14 182.503);--color-teal-600:oklch(60% .118 184.704);--color-teal-700:oklch(51.1% .096 186.391);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-violet-600:oklch(54.1% .281 293.009);--color-violet-700:oklch(49.1% .27 292.581);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-600:oklch(55.8% .288 302.321);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-2xl:96rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:oklch(55.1% .027 264.364);border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}:is(input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:oklch(54.6% .245 262.881);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}select:where([multiple]),select:where([size]:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;print-color-adjust:unset;padding-right:.75rem}input:where([type=checkbox]),input:where([type=radio]){appearance:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;color:oklch(54.6% .245 262.881);--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;border-color:oklch(55.1% .027 264.364);flex-shrink:0;width:1rem;height:1rem;padding:0;display:inline-block}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);outline:2px solid #0000}input:where([type=checkbox]):checked,input:where([type=radio]):checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors:active){input:where([type=checkbox]):checked{appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors:active){input:where([type=radio]):checked{appearance:auto}}input:where([type=checkbox]):checked:hover,input:where([type=checkbox]):checked:focus,input:where([type=radio]):checked:hover,input:where([type=radio]):checked:focus{background-color:currentColor;border-color:#0000}input:where([type=checkbox]):indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media (forced-colors:active){input:where([type=checkbox]):indeterminate{appearance:auto}}input:where([type=checkbox]):indeterminate:hover,input:where([type=checkbox]):indeterminate:focus{background-color:currentColor;border-color:#0000}input:where([type=file]){background:unset;border-color:inherit;font-size:unset;line-height:inherit;border-width:0;border-radius:0;padding:0}input:where([type=file]):focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.inset-y-14{inset-block:calc(var(--spacing) * 14)}.-start-px{inset-inline-start:-1px}.inset-s-full{inset-inline-start:100%}.start-0{inset-inline-start:calc(var(--spacing) * 0)}.start-3{inset-inline-start:calc(var(--spacing) * 3)}.end-0{inset-inline-end:calc(var(--spacing) * 0)}.end-1{inset-inline-end:calc(var(--spacing) * 1)}.end-4,.inset-e-4{inset-inline-end:calc(var(--spacing) * 4)}.-top-px{top:-1px}.top-0{top:0}.top-0\.5{top:calc(var(--spacing) * .5)}.top-1{top:var(--spacing)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.top-12{top:calc(var(--spacing) * 12)}.-right-2{right:calc(var(--spacing) * -2)}.-right-px{right:-1px}.right-0\.5{right:calc(var(--spacing) * .5)}.right-1{right:var(--spacing)}.right-2{right:calc(var(--spacing) * 2)}.-bottom-7{bottom:calc(var(--spacing) * -7)}.bottom-0{bottom:0}.-left-2{left:calc(var(--spacing) * -2)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-3{left:calc(var(--spacing) * 3)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-auto{z-index:auto}.order-last{order:9999}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.-m-1{margin:calc(var(--spacing) * -1)}.m-1{margin:var(--spacing)}.m-auto{margin:auto}.-mx-4{margin-inline:calc(var(--spacing) * -4)}.mx-auto{margin-inline:auto}.-my-2{margin-block:calc(var(--spacing) * -2)}.-my-3{margin-block:calc(var(--spacing) * -3)}.-my-4{margin-block:calc(var(--spacing) * -4)}.my-0\.5{margin-block:calc(var(--spacing) * .5)}.-ms-1{margin-inline-start:calc(var(--spacing) * -1)}.-ms-1\.5{margin-inline-start:calc(var(--spacing) * -1.5)}.-ms-px{margin-inline-start:-1px}.ms-1\.5{margin-inline-start:calc(var(--spacing) * 1.5)}.ms-4{margin-inline-start:calc(var(--spacing) * 4)}.-me-0\.5{margin-inline-end:calc(var(--spacing) * -.5)}.-me-1{margin-inline-end:calc(var(--spacing) * -1)}.-me-4{margin-inline-end:calc(var(--spacing) * -4)}.-me-px{margin-inline-end:-1px}.me-1\.5{margin-inline-end:calc(var(--spacing) * 1.5)}.-mt-0\.5{margin-top:calc(var(--spacing) * -.5)}.-mt-1\.5{margin-top:calc(var(--spacing) * -1.5)}.-mt-2{margin-top:calc(var(--spacing) * -2)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-32{margin-top:calc(var(--spacing) * 32)}.-mr-0\.5{margin-right:calc(var(--spacing) * -.5)}.-mb-0\.5{margin-bottom:calc(var(--spacing) * -.5)}.-mb-px{margin-bottom:-1px}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-4\/3{aspect-ratio:4/3}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.size-32{width:calc(var(--spacing) * 32);height:calc(var(--spacing) * 32)}.size-full{width:100%;height:100%}.h-1{height:var(--spacing)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-32{height:calc(var(--spacing) * 32)}.h-40{height:calc(var(--spacing) * 40)}.h-56{height:calc(var(--spacing) * 56)}.h-64{height:calc(var(--spacing) * 64)}.h-72{height:calc(var(--spacing) * 72)}.h-80{height:calc(var(--spacing) * 80)}.h-87\.5{height:calc(var(--spacing) * 87.5)}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-46{max-height:calc(var(--spacing) * 46)}.min-h-screen{min-height:100vh}.w-0\.5{width:calc(var(--spacing) * .5)}.w-1\/2{width:50%}.w-2\/3{width:66.6667%}.w-4{width:calc(var(--spacing) * 4)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-96{width:calc(var(--spacing) * 96)}.w-\[80\%\]{width:80%}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-prose{max-width:65ch}.max-w-screen-2xl{max-width:var(--breakpoint-2xl)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-center{transform-origin:50%}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-full{--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-1{--tw-translate-x:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-5{--tw-translate-y:calc(var(--spacing) * -5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-full{--tw-translate-y:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-8{--tw-translate-y:calc(var(--spacing) * 8);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.scroll-mt-16{scroll-margin-top:calc(var(--spacing) * 16)}.scroll-mt-20{scroll-margin-top:calc(var(--spacing) * 20)}.\[appearance\:textfield\]{appearance:textfield}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-\[24px_1fr\]{grid-template-columns:24px 1fr}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.place-items-center{place-items:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}.gap-px{gap:1px}:where(.space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block:0}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-16>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-px>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(1px * var(--tw-space-y-reverse));margin-block-end:calc(1px * calc(1 - var(--tw-space-y-reverse)))}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-x-8{column-gap:calc(var(--spacing) * 8)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}.gap-y-8{row-gap:calc(var(--spacing) * 8)}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-2>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(2px * var(--tw-divide-y-reverse));border-bottom-width:calc(2px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-black>:not(:last-child)){border-color:var(--color-black)}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}:where(.divide-gray-300>:not(:last-child)){border-color:var(--color-gray-300)}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[10px\]{border-radius:10px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-s-sm{border-start-start-radius:var(--radius-sm);border-end-start-radius:var(--radius-sm)}.rounded-ss-xl{border-start-start-radius:var(--radius-xl)}.rounded-e-sm{border-start-end-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm)}.rounded-se-3xl{border-start-end-radius:var(--radius-3xl)}.rounded-ee-xl{border-end-end-radius:var(--radius-xl)}.rounded-es-3xl{border-end-start-radius:var(--radius-3xl)}.rounded-t-md{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.rounded-tl-none{border-top-left-radius:0}.rounded-tr-md{border-top-right-radius:var(--radius-md)}.rounded-b-md{border-bottom-right-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-s-4{border-inline-start-style:var(--tw-border-style);border-inline-start-width:4px}.border-s-\[3px\]{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-r-2{border-right-style:var(--tw-border-style);border-right-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-amber-500{border-color:var(--color-amber-500)}.border-black{border-color:var(--color-black)}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-600{border-color:var(--color-blue-600)}.border-blue-700{border-color:var(--color-blue-700)}.border-emerald-500{border-color:var(--color-emerald-500)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-gray-700{border-color:var(--color-gray-700)}.border-gray-800{border-color:var(--color-gray-800)}.border-gray-900\/10{border-color:#1018281a}@supports (color:color-mix(in lab, red, red)){.border-gray-900\/10{border-color:color-mix(in oklab, var(--color-gray-900) 10%, transparent)}}.border-green-500{border-color:var(--color-green-500)}.border-indigo-100{border-color:var(--color-indigo-100)}.border-indigo-500{border-color:var(--color-indigo-500)}.border-indigo-600{border-color:var(--color-indigo-600)}.border-indigo-900{border-color:var(--color-indigo-900)}.border-red-200{border-color:var(--color-red-200)}.border-red-500{border-color:var(--color-red-500)}.border-slate-300{border-color:var(--color-slate-300)}.border-transparent{border-color:#0000}.border-violet-600{border-color:var(--color-violet-600)}.border-white{border-color:var(--color-white)}.bg-\[\#91a5bb\]{background-color:#91a5bb}.bg-\[\#595759\]{background-color:#595759}.bg-\[\#afbfab\]{background-color:#afbfab}.bg-\[\#d2d3d4\]{background-color:#d2d3d4}.bg-\[\#d89f97\]{background-color:#d89f97}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-500{background-color:var(--color-amber-500)}.bg-black{background-color:var(--color-black)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-700{background-color:var(--color-blue-700)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-emerald-400{background-color:var(--color-emerald-400)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-emerald-700{background-color:var(--color-emerald-700)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-gray-900\/10{background-color:#1018281a}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\/10{background-color:color-mix(in oklab, var(--color-gray-900) 10%, transparent)}}.bg-gray-900\/50{background-color:#10182880}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\/50{background-color:color-mix(in oklab, var(--color-gray-900) 50%, transparent)}}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-600{background-color:var(--color-green-600)}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-indigo-50\/60{background-color:#eef2ff99}@supports (color:color-mix(in lab, red, red)){.bg-indigo-50\/60{background-color:color-mix(in oklab, var(--color-indigo-50) 60%, transparent)}}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-200{background-color:var(--color-indigo-200)}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-indigo-900{background-color:var(--color-indigo-900)}.bg-orange-600{background-color:var(--color-orange-600)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.bg-rose-500{background-color:var(--color-rose-500)}.bg-rose-600{background-color:var(--color-rose-600)}.bg-teal-400{background-color:var(--color-teal-400)}.bg-teal-500{background-color:var(--color-teal-500)}.bg-teal-600{background-color:var(--color-teal-600)}.bg-violet-600{background-color:var(--color-violet-600)}.bg-white{background-color:var(--color-white)}.bg-white\/15{background-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.bg-white\/15{background-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-200{background-color:var(--color-yellow-200)}.bg-yellow-300{background-color:var(--color-yellow-300)}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-linear-to-l{--tw-gradient-position:to left}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-l{--tw-gradient-position:to left in oklab}}.bg-linear-to-l{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-t{--tw-gradient-position:to top in oklab}}.bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[repeating-linear-gradient\(45deg\,var\(--tw-gradient-from\)_0\,var\(--tw-gradient-from\)_10px\,var\(--tw-gradient-to\)_10px\,var\(--tw-gradient-to\)_20px\)\]{background-image:repeating-linear-gradient(45deg,var(--tw-gradient-from) 0,var(--tw-gradient-from) 10px,var(--tw-gradient-to) 10px,var(--tw-gradient-to) 20px)}.from-gray-900\/50{--tw-gradient-from:#10182880}@supports (color:color-mix(in lab, red, red)){.from-gray-900\/50{--tw-gradient-from:color-mix(in oklab, var(--color-gray-900) 50%, transparent)}}.from-gray-900\/50{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-yellow-400{--tw-gradient-from:var(--color-yellow-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-gray-200{--tw-gradient-to:var(--color-gray-200);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-gray-900\/25{--tw-gradient-to:#10182840}@supports (color:color-mix(in lab, red, red)){.to-gray-900\/25{--tw-gradient-to:color-mix(in oklab, var(--color-gray-900) 25%, transparent)}}.to-gray-900\/25{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-yellow-500{--tw-gradient-to:var(--color-yellow-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-12{padding-inline:calc(var(--spacing) * 12)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.ps-4{padding-inline-start:calc(var(--spacing) * 4)}.pe-4{padding-inline-end:calc(var(--spacing) * 4)}.pe-8{padding-inline-end:calc(var(--spacing) * 8)}.pe-10{padding-inline-end:calc(var(--spacing) * 10)}.pe-32{padding-inline-end:calc(var(--spacing) * 32)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pt-12{padding-top:calc(var(--spacing) * 12)}.pt-16{padding-top:calc(var(--spacing) * 16)}.pt-32{padding-top:calc(var(--spacing) * 32)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-1{padding-bottom:var(--spacing)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-6{padding-left:calc(var(--spacing) * 6)}.pl-9{padding-left:calc(var(--spacing) * 9)}.\[text-align\:_inherit\],.\[text-align\:inherit\]{text-align:inherit}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-3xl\/tight{font-size:var(--text-3xl);line-height:var(--leading-tight)}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-\[10px\]\/6{font-size:10px;line-height:calc(var(--spacing) * 6)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-lg\/tight{font-size:var(--text-lg);line-height:var(--leading-tight)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/8{font-size:var(--text-sm);line-height:calc(var(--spacing) * 8)}.text-sm\/none{font-size:var(--text-sm);line-height:1}.text-sm\/relaxed{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-xs\/none{font-size:var(--text-xs);line-height:1}.text-xs\/relaxed{font-size:var(--text-xs);line-height:var(--leading-relaxed)}.text-\[10px\]{font-size:10px}.leading-10{--tw-leading:calc(var(--spacing) * 10);line-height:calc(var(--spacing) * 10)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-pretty{text-wrap:pretty}.whitespace-nowrap{white-space:nowrap}.text-\[\#0072b1\]{color:#0072b1}.text-amber-500{color:var(--color-amber-500)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-700{color:var(--color-emerald-700)}.text-gray-200{color:var(--color-gray-200)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-pink-500{color:var(--color-pink-500)}.text-purple-600{color:var(--color-purple-600)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-red-900{color:var(--color-red-900)}.text-slate-400{color:var(--color-slate-400)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-teal-600{color:var(--color-teal-600)}.text-teal-700{color:var(--color-teal-700)}.text-violet-600{color:var(--color-violet-600)}.text-white{color:var(--color-white)}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.text-white\/95{color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.text-white\/95{color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-700{color:var(--color-yellow-700)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.decoration-slate-300{-webkit-text-decoration-color:var(--color-slate-300);-webkit-text-decoration-color:var(--color-slate-300);text-decoration-color:var(--color-slate-300)}.decoration-2{text-decoration-thickness:2px}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-black::placeholder{color:var(--color-black)}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-\[2px_2px_0_0\]{--tw-shadow:2px 2px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\,8px_8px_0_0\,12px_12px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor), 8px 8px 0 0 var(--tw-shadow-color,currentcolor), 12px 12px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\,8px_8px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor), 8px 8px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-3{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[6px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(6px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-black{--tw-shadow-color:#000}@supports (color:color-mix(in lab, red, red)){.shadow-black{--tw-shadow-color:color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent)}}.shadow-indigo-100{--tw-shadow-color:oklch(93% .034 272.788)}@supports (color:color-mix(in lab, red, red)){.shadow-indigo-100{--tw-shadow-color:color-mix(in oklab, var(--color-indigo-100) var(--tw-shadow-alpha), transparent)}}.ring-black{--tw-ring-color:var(--color-black)}.ring-emerald-700{--tw-ring-color:var(--color-emerald-700)}.ring-indigo-50{--tw-ring-color:var(--color-indigo-50)}.ring-indigo-600{--tw-ring-color:var(--color-indigo-600)}.ring-transparent{--tw-ring-color:transparent}.ring-white{--tw-ring-color:var(--color-white)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-yellow-300{--tw-ring-offset-color:var(--color-yellow-300)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[filter\]{transition-property:filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[inset-inline-start\]{transition-property:inset-inline-start;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-none{transition-property:none}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.\[-moz-appearance\:textfield\]{-moz-appearance:textfield}.\[-webkit-tap-highlight-color\:transparent\]{-webkit-tap-highlight-color:transparent}.\[animation-delay\:0\.2s\]{animation-delay:.2s}.\[animation-delay\:0\.4s\]{animation-delay:.4s}.\[clip-path\:_polygon\(0_0\,_0\%_100\%\,_100\%_50\%\)\]{clip-path:polygon(0 0,0% 100%,100% 50%)}.\[writing-mode\:vertical-lr\]{writing-mode:vertical-lr}.ring-inset{--tw-ring-inset:inset}:is(.\*\:bg-gray-100>*){background-color:var(--color-gray-100)}:is(.\*\:px-4>*){padding-inline:calc(var(--spacing) * 4)}:is(.\*\:py-3>*){padding-block:calc(var(--spacing) * 3)}:is(.\*\:text-left>*){text-align:left}:is(.\*\:text-xs>*){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}:is(.\*\:font-medium>*){--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}:is(.\*\:text-gray-500>*){color:var(--color-gray-500)}:is(.\*\:text-gray-900>*){color:var(--color-gray-900)}.group-odd\:flex-row-reverse:is(:where(.group):nth-child(odd) *){flex-direction:row-reverse}.group-odd\:text-right:is(:where(.group):nth-child(odd) *){text-align:right}.group-even\:order-last:is(:where(.group):nth-child(2n) *){order:9999}.group-open\:absolute:is(:where(.group):is([open],:popover-open,:open) *){position:absolute}.group-open\:start-0:is(:where(.group):is([open],:popover-open,:open) *){inset-inline-start:calc(var(--spacing) * 0)}.group-open\:top-8:is(:where(.group):is([open],:popover-open,:open) *){top:calc(var(--spacing) * 8)}.group-open\:top-auto:is(:where(.group):is([open],:popover-open,:open) *){top:auto}.group-open\:mt-2:is(:where(.group):is([open],:popover-open,:open) *){margin-top:calc(var(--spacing) * 2)}.group-open\:-rotate-180:is(:where(.group):is([open],:popover-open,:open) *),.group-open\/keys\:-rotate-180:is(:where(.group\/keys):is([open],:popover-open,:open) *),.group-open\/members\:-rotate-180:is(:where(.group\/members):is([open],:popover-open,:open) *),.group-open\/roles\:-rotate-180:is(:where(.group\/roles):is([open],:popover-open,:open) *){rotate:-180deg}@media (hover:hover){.group-hover\:visible:is(:where(.group):hover *){visibility:visible}.group-hover\:absolute:is(:where(.group):hover *){position:absolute}.group-hover\:relative:is(:where(.group):hover *){position:relative}.group-hover\:ms-0\.5:is(:where(.group):hover *){margin-inline-start:calc(var(--spacing) * .5)}.group-hover\:-translate-x-2:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-y-2:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-y-0:is(:where(.group):hover *){--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:bg-gray-200:is(:where(.group):hover *){background-color:var(--color-gray-200)}.group-hover\:text-gray-700:is(:where(.group):hover *){color:var(--color-gray-700)}.group-hover\:text-gray-700\/75:is(:where(.group):hover *){color:#364153bf}@supports (color:color-mix(in lab, red, red)){.group-hover\:text-gray-700\/75:is(:where(.group):hover *){color:color-mix(in oklab, var(--color-gray-700) 75%, transparent)}}.group-hover\:text-slate-600:is(:where(.group):hover *){color:var(--color-slate-600)}.group-hover\:text-violet-600:is(:where(.group):hover *){color:var(--color-violet-600)}.group-hover\:underline:is(:where(.group):hover *){text-decoration-line:underline}.group-hover\:underline-offset-4:is(:where(.group):hover *){text-underline-offset:4px}.group-hover\:opacity-0:is(:where(.group):hover *){opacity:0}.group-hover\:opacity-50:is(:where(.group):hover *){opacity:.5}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\:grayscale-50:is(:where(.group):hover *){--tw-grayscale:grayscale(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.group-hover\/card\:-translate-2:is(:where(.group\/card):hover *){--tw-translate-x:calc(var(--spacing) * -2);--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/link\:block:is(:where(.group\/link):hover *){display:block}}.peer-checked\:start-6:is(:where(.peer):checked~*){inset-inline-start:calc(var(--spacing) * 6)}.peer-checked\:start-8:is(:where(.peer):checked~*){inset-inline-start:calc(var(--spacing) * 8)}.peer-checked\:block:is(:where(.peer):checked~*){display:block}.peer-checked\:hidden:is(:where(.peer):checked~*){display:none}.peer-checked\:w-2:is(:where(.peer):checked~*){width:calc(var(--spacing) * 2)}.peer-checked\:translate-x-0:is(:where(.peer):checked~*){--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:translate-x-6:is(:where(.peer):checked~*){--tw-translate-x:calc(var(--spacing) * 6);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:bg-white:is(:where(.peer):checked~*){background-color:var(--color-white)}.peer-checked\:ring-transparent:is(:where(.peer):checked~*){--tw-ring-color:transparent}:is(.peer-checked\:\*\:scale-0:is(:where(.peer):checked~*)>*){--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.peer-checked\/details\:block:is(:where(.peer\/details):checked~*){display:block}.peer-checked\/details\:translate-x-0:is(:where(.peer\/details):checked~*){--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-placeholder-shown\:translate-y-0:is(:where(.peer):placeholder-shown~*){--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-focus\:-translate-y-5:is(:where(.peer):focus~*){--tw-translate-y:calc(var(--spacing) * -5);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-focus-visible\:ring-2:is(:where(.peer):focus-visible~*){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.peer-focus-visible\:ring-emerald-700:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-emerald-700)}.peer-focus-visible\:ring-gray-900:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-gray-900)}.peer-focus-visible\:ring-indigo-600:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-indigo-600)}.peer-focus-visible\:ring-violet-600:is(:where(.peer):focus-visible~*){--tw-ring-color:var(--color-violet-600)}.peer-focus-visible\:ring-offset-2:is(:where(.peer):focus-visible~*){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.backdrop\:bg-black\/50::backdrop{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.backdrop\:bg-black\/50::backdrop{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:top-0:before{content:var(--tw-content);top:0}.before\:left-1\/2:before{content:var(--tw-content);left:50%}.before\:-ms-px:before{content:var(--tw-content);margin-inline-start:-1px}.before\:-mt-px:before{content:var(--tw-content);margin-top:-1px}.before\:h-0\.5:before{content:var(--tw-content);height:calc(var(--spacing) * .5)}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-0\.5:before{content:var(--tw-content);width:calc(var(--spacing) * .5)}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:-translate-x-1\/2:before{content:var(--tw-content);--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.before\:rounded-full:before{content:var(--tw-content);border-radius:3.40282e38px}.before\:bg-gray-200:before{content:var(--tw-content);background-color:var(--color-gray-200)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);inset-inline:0}.after\:top-1\/2:after{content:var(--tw-content);top:50%}.after\:bottom-0:after{content:var(--tw-content);bottom:0}.after\:mt-4:after{content:var(--tw-content);margin-top:calc(var(--spacing) * 4)}.after\:block:after{content:var(--tw-content);display:block}.after\:h-0\.5:after{content:var(--tw-content);height:calc(var(--spacing) * .5)}.after\:h-1:after{content:var(--tw-content);height:var(--spacing)}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:-translate-y-1\/2:after{content:var(--tw-content);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.after\:rounded-lg:after{content:var(--tw-content);border-radius:var(--radius-lg)}.after\:bg-black:after{content:var(--tw-content);background-color:var(--color-black)}.after\:bg-gray-200:after{content:var(--tw-content);background-color:var(--color-gray-200)}.first\:pt-0:first-child{padding-top:0}:is(.\*\:first\:sticky>*):first-child{position:sticky}:is(.\*\:first\:left-0>*):first-child{left:0}:is(.\*\:first\:bg-white>*):first-child{background-color:var(--color-white)}:is(.\*\:first\:font-medium>*):first-child{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}:is(.peer-checked\:\*\:first\:hidden:is(:where(.peer):checked~*)>*):first-child{display:none}.last\:pb-0:last-child{padding-bottom:0}:is(.\*\:last\:hidden>*):last-child{display:none}:is(.peer-checked\:\*\:last\:block:is(:where(.peer):checked~*)>*):last-child{display:block}.odd\:-me-3:nth-child(odd){margin-inline-end:calc(var(--spacing) * -3)}.even\:-ms-3:nth-child(2n){margin-inline-start:calc(var(--spacing) * -3)}:is(.\*\:even\:bg-gray-50>*):nth-child(2n){background-color:var(--color-gray-50)}.checked\:bg-black:checked{background-color:var(--color-black)}.focus-within\:translate-y-0:focus-within{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.focus-within\:translate-y-4:focus-within{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus-within\:bg-yellow-200:focus-within{background-color:var(--color-yellow-200)}.focus-within\:ring:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-3:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-blue-600:focus-within{--tw-ring-color:var(--color-blue-600)}.focus-within\:ring-yellow-300:focus-within{--tw-ring-color:var(--color-yellow-300)}@media (hover:hover){.hover\:translate-0\.5:hover{--tw-translate-x:calc(var(--spacing) * .5);--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:translate-1:hover{--tw-translate-x:var(--spacing);--tw-translate-y:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:translate-3:hover{--tw-translate-x:calc(var(--spacing) * 3);--tw-translate-y:calc(var(--spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-blue-700:hover{border-color:var(--color-blue-700)}.hover\:border-gray-100:hover{border-color:var(--color-gray-100)}.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:border-gray-600:hover{border-color:var(--color-gray-600)}.hover\:border-pink-600:hover{border-color:var(--color-pink-600)}.hover\:border-slate-400:hover{border-color:var(--color-slate-400)}.hover\:bg-black:hover{background-color:var(--color-black)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-emerald-700:hover{background-color:var(--color-emerald-700)}.hover\:bg-emerald-800:hover{background-color:var(--color-emerald-800)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\:bg-indigo-50:hover{background-color:var(--color-indigo-50)}.hover\:bg-indigo-300:hover{background-color:var(--color-indigo-300)}.hover\:bg-indigo-600:hover{background-color:var(--color-indigo-600)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:bg-teal-500:hover{background-color:var(--color-teal-500)}.hover\:bg-teal-600:hover{background-color:var(--color-teal-600)}.hover\:bg-teal-700:hover{background-color:var(--color-teal-700)}.hover\:bg-transparent:hover{background-color:#0000}.hover\:bg-violet-700:hover{background-color:var(--color-violet-700)}.hover\:bg-white:hover{background-color:var(--color-white)}.hover\:bg-yellow-200:hover{background-color:var(--color-yellow-200)}.hover\:bg-yellow-400:hover{background-color:var(--color-yellow-400)}.hover\:bg-yellow-500:hover{background-color:var(--color-yellow-500)}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-gray-500\/75:hover{color:#6a7282bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-500\/75:hover{color:color-mix(in oklab, var(--color-gray-500) 75%, transparent)}}.hover\:text-gray-600\/75:hover{color:#4a5565bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-600\/75:hover{color:color-mix(in oklab, var(--color-gray-600) 75%, transparent)}}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-gray-700\/75:hover{color:#364153bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-700\/75:hover{color:color-mix(in oklab, var(--color-gray-700) 75%, transparent)}}.hover\:text-gray-800:hover{color:var(--color-gray-800)}.hover\:text-gray-900:hover{color:var(--color-gray-900)}.hover\:text-gray-900\/75:hover{color:#101828bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-900\/75:hover{color:color-mix(in oklab, var(--color-gray-900) 75%, transparent)}}.hover\:text-indigo-600:hover{color:var(--color-indigo-600)}.hover\:text-indigo-600\/75:hover{color:#4f39f6bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-indigo-600\/75:hover{color:color-mix(in oklab, var(--color-indigo-600) 75%, transparent)}}.hover\:text-indigo-700:hover{color:var(--color-indigo-700)}.hover\:text-indigo-900:hover{color:var(--color-indigo-900)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-slate-900:hover{color:var(--color-slate-900)}.hover\:text-teal-600\/75:hover{color:#009588bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-teal-600\/75:hover{color:color-mix(in oklab, var(--color-teal-600) 75%, transparent)}}.hover\:text-teal-700\/75:hover{color:#00776ebf}@supports (color:color-mix(in lab, red, red)){.hover\:text-teal-700\/75:hover{color:color-mix(in oklab, var(--color-teal-700) 75%, transparent)}}.hover\:text-violet-700:hover{color:var(--color-violet-700)}.hover\:text-white:hover{color:var(--color-white)}.hover\:text-yellow-500:hover{color:var(--color-yellow-500)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-indigo-500:hover{-webkit-text-decoration-color:var(--color-indigo-500);-webkit-text-decoration-color:var(--color-indigo-500);text-decoration-color:var(--color-indigo-500)}.hover\:opacity-75:hover{opacity:.75}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-\[-1px_-1px_0_0\]:hover{--tw-shadow:-1px -1px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-none:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:ring-1:hover{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:ring-gray-300:hover{--tw-ring-color:var(--color-gray-300)}.hover\:ring-indigo-600:hover{--tw-ring-color:var(--color-indigo-600)}.hover\:ring-indigo-700:hover{--tw-ring-color:var(--color-indigo-700)}.hover\:grayscale-0:hover{--tw-grayscale:grayscale(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\:transition-colors:hover{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.hover\:after\:h-full:hover:after{content:var(--tw-content);height:100%}}.focus\:relative:focus{position:relative}.focus\:z-10:focus{z-index:10}.focus\:translate-y-4:focus{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus\:border-emerald-600:focus{border-color:var(--color-emerald-600)}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:border-indigo-600:focus{border-color:var(--color-indigo-600)}.focus\:border-transparent:focus{border-color:#0000}.focus\:border-white:focus{border-color:var(--color-white)}.focus\:bg-yellow-200:focus{background-color:var(--color-yellow-200)}.focus\:bg-yellow-400:focus{background-color:var(--color-yellow-400)}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-black:focus{--tw-ring-color:var(--color-black)}.focus\:ring-emerald-600:focus{--tw-ring-color:var(--color-emerald-600)}.focus\:ring-gray-900:focus{--tw-ring-color:var(--color-gray-900)}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\:ring-indigo-600:focus{--tw-ring-color:var(--color-indigo-600)}.focus\:ring-transparent:focus{--tw-ring-color:transparent}.focus\:ring-yellow-300:focus{--tw-ring-color:var(--color-yellow-300)}.focus\:ring-yellow-400:focus{--tw-ring-color:var(--color-yellow-400)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:ring-offset-white:focus{--tw-ring-offset-color:var(--color-white)}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus\:outline-0:focus{outline-style:var(--tw-outline-style);outline-width:0}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-4:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-indigo-200:focus-visible{--tw-ring-color:var(--color-indigo-200)}.focus-visible\:ring-indigo-600:focus-visible{--tw-ring-color:var(--color-indigo-600)}.focus-visible\:ring-slate-200:focus-visible{--tw-ring-color:var(--color-slate-200)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-white:focus-visible{--tw-ring-offset-color:var(--color-white)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:bg-blue-600:active{background-color:var(--color-blue-600)}.active\:text-blue-600:active{color:var(--color-blue-600)}.disabled\:pointer-events-auto:disabled{pointer-events:auto}.disabled\:opacity-50:disabled{opacity:.5}.has-checked\:border-blue-600:has(:checked){border-color:var(--color-blue-600)}.has-checked\:bg-blue-500:has(:checked){background-color:var(--color-blue-500)}.has-checked\:bg-green-500:has(:checked){background-color:var(--color-green-500)}.has-checked\:bg-indigo-600:has(:checked){background-color:var(--color-indigo-600)}.has-checked\:ring-1:has(:checked){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-checked\:ring-2:has(:checked){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-checked\:ring-amber-500:has(:checked){--tw-ring-color:var(--color-amber-500)}.has-checked\:ring-black:has(:checked){--tw-ring-color:var(--color-black)}.has-checked\:ring-blue-500:has(:checked){--tw-ring-color:var(--color-blue-500)}.has-checked\:ring-blue-600:has(:checked){--tw-ring-color:var(--color-blue-600)}.has-checked\:ring-red-500:has(:checked){--tw-ring-color:var(--color-red-500)}.has-checked\:ring-offset-2:has(:checked){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.aria-pressed\:border[aria-pressed=true]{border-style:var(--tw-border-style);border-width:1px}.aria-pressed\:border-b-0[aria-pressed=true]{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.aria-pressed\:border-gray-200[aria-pressed=true]{border-color:var(--color-gray-200)}.aria-pressed\:bg-white[aria-pressed=true]{background-color:var(--color-white)}.aria-pressed\:text-gray-900[aria-pressed=true]{color:var(--color-gray-900)}.aria-pressed\:ring-2[aria-pressed=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.aria-pressed\:ring-emerald-700[aria-pressed=true]{--tw-ring-color:var(--color-emerald-700)}.aria-pressed\:ring-offset-2[aria-pressed=true]{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.aria-selected\:border-emerald-700[aria-selected=true]{border-color:var(--color-emerald-700)}.aria-selected\:text-emerald-700[aria-selected=true]{color:var(--color-emerald-700)}.aria-\[pressed\=false\]\:text-gray-500[aria-pressed=false]{color:var(--color-gray-500)}@media (hover:hover){.aria-\[pressed\=false\]\:hover\:text-gray-700[aria-pressed=false]:hover{color:var(--color-gray-700)}}.aria-\[selected\=false\]\:border-transparent[aria-selected=false]{border-color:#0000}.aria-\[selected\=false\]\:text-gray-500[aria-selected=false]{color:var(--color-gray-500)}@media (hover:hover){.aria-\[selected\=false\]\:hover\:text-gray-700[aria-selected=false]:hover{color:var(--color-gray-700)}}.data-\[mode\=note\]\:border-amber-200[data-mode=note]{border-color:var(--color-amber-200)}.data-\[mode\=note\]\:bg-amber-50[data-mode=note]{background-color:var(--color-amber-50)}.data-\[mode\=note\]\:bg-amber-600[data-mode=note]{background-color:var(--color-amber-600)}@media (hover:hover){.data-\[mode\=note\]\:hover\:bg-amber-700[data-mode=note]:hover{background-color:var(--color-amber-700)}}.data-\[mode\=note\]\:focus\:border-amber-500[data-mode=note]:focus{border-color:var(--color-amber-500)}.data-\[mode\=note\]\:focus\:ring-amber-500[data-mode=note]:focus{--tw-ring-color:var(--color-amber-500)}.data-\[mode\=reply\]\:border-gray-200[data-mode=reply]{border-color:var(--color-gray-200)}.data-\[mode\=reply\]\:bg-indigo-600[data-mode=reply]{background-color:var(--color-indigo-600)}@media (hover:hover){.data-\[mode\=reply\]\:hover\:bg-indigo-700[data-mode=reply]:hover{background-color:var(--color-indigo-700)}}.data-\[mode\=reply\]\:focus\:border-indigo-600[data-mode=reply]:focus{border-color:var(--color-indigo-600)}.data-\[mode\=reply\]\:focus\:ring-indigo-600[data-mode=reply]:focus{--tw-ring-color:var(--color-indigo-600)}@media (min-width:40rem){.sm\:not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.sm\:end-6{inset-inline-end:calc(var(--spacing) * 6)}.sm\:top-6{top:calc(var(--spacing) * 6)}.sm\:order-first{order:-9999}.sm\:order-last{order:9999}.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:mt-0{margin-top:0}.sm\:mt-4{margin-top:calc(var(--spacing) * 4)}.sm\:mt-6{margin-top:calc(var(--spacing) * 6)}.sm\:mt-8{margin-top:calc(var(--spacing) * 8)}.sm\:mt-48{margin-top:calc(var(--spacing) * 48)}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:table-cell{display:table-cell}.sm\:size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.sm\:size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.sm\:size-18{width:calc(var(--spacing) * 18);height:calc(var(--spacing) * 18)}.sm\:size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.sm\:h-56{height:calc(var(--spacing) * 56)}.sm\:h-64{height:calc(var(--spacing) * 64)}.sm\:h-72{height:calc(var(--spacing) * 72)}.sm\:h-80{height:calc(var(--spacing) * 80)}.sm\:h-112\.5{height:calc(var(--spacing) * 112.5)}.sm\:h-\[calc\(100\%-2rem\)\]{height:calc(100% - 2rem)}.sm\:h-full{height:100%}.sm\:h-px{height:1px}.sm\:w-8{width:calc(var(--spacing) * 8)}.sm\:w-56{width:calc(var(--spacing) * 56)}.sm\:w-auto{width:auto}.sm\:max-w-xs{max-width:var(--container-xs)}.sm\:flex-1{flex:1}.sm\:shrink-0{flex-shrink:0}.sm\:basis-56{flex-basis:calc(var(--spacing) * 56)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:place-content-center{place-content:center}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:items-start{align-items:flex-start}.sm\:items-stretch{align-items:stretch}.sm\:justify-between{justify-content:space-between}.sm\:justify-center{justify-content:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-start{justify-content:flex-start}.sm\:gap-1\.5{gap:calc(var(--spacing) * 1.5)}.sm\:gap-2{gap:calc(var(--spacing) * 2)}.sm\:gap-4{gap:calc(var(--spacing) * 4)}.sm\:gap-6{gap:calc(var(--spacing) * 6)}.sm\:gap-8{gap:calc(var(--spacing) * 8)}.sm\:gap-12{gap:calc(var(--spacing) * 12)}:where(.sm\:divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.sm\:divide-y-0>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px * var(--tw-divide-y-reverse));border-bottom-width:calc(0px * calc(1 - var(--tw-divide-y-reverse)))}.sm\:self-end{align-self:flex-end}.sm\:rounded-full{border-radius:3.40282e38px}.sm\:rounded-ss-\[30px\]{border-start-start-radius:30px}.sm\:border-2{border-style:var(--tw-border-style);border-width:2px}.sm\:border-indigo-500{border-color:var(--color-indigo-500)}.sm\:border-l-transparent{border-left-color:#0000}.sm\:bg-yellow-500{background-color:var(--color-yellow-500)}.sm\:p-3{padding:calc(var(--spacing) * 3)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:px-8{padding-inline:calc(var(--spacing) * 8)}.sm\:px-12{padding-inline:calc(var(--spacing) * 12)}.sm\:py-12{padding-block:calc(var(--spacing) * 12)}.sm\:py-16{padding-block:calc(var(--spacing) * 16)}.sm\:py-20{padding-block:calc(var(--spacing) * 20)}.sm\:py-24{padding-block:calc(var(--spacing) * 24)}.sm\:pt-16{padding-top:calc(var(--spacing) * 16)}.sm\:pt-20{padding-top:calc(var(--spacing) * 20)}.sm\:pt-48{padding-top:calc(var(--spacing) * 48)}.sm\:pb-4{padding-bottom:calc(var(--spacing) * 4)}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-lg\/relaxed{font-size:var(--text-lg);line-height:var(--leading-relaxed)}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.sm\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.sm\:text-gray-500{color:var(--color-gray-500)}}@media (min-width:48rem){.md\:relative{position:relative}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:mt-4{margin-top:calc(var(--spacing) * 4)}.md\:mt-8{margin-top:calc(var(--spacing) * 8)}.md\:block{display:block}.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:table-cell{display:table-cell}.md\:h-\[calc\(100\%-4rem\)\]{height:calc(100% - 4rem)}.md\:h-full{height:100%}.md\:max-w-none{max-width:none}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:calc(var(--spacing) * 4)}.md\:gap-8{gap:calc(var(--spacing) * 8)}.md\:gap-12{gap:calc(var(--spacing) * 12)}:where(.md\:space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.md\:rounded-ss-\[60px\]{border-start-start-radius:60px}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:py-4{padding-block:calc(var(--spacing) * 4)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media (min-width:64rem){.lg\:static{position:static}.lg\:end-8{inset-inline-end:calc(var(--spacing) * 8)}.lg\:top-8{top:calc(var(--spacing) * 8)}.lg\:order-last{order:9999}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:mt-0{margin-top:0}.lg\:mt-8{margin-top:calc(var(--spacing) * 8)}.lg\:mt-24{margin-top:calc(var(--spacing) * 24)}.lg\:mt-64{margin-top:calc(var(--spacing) * 64)}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:h-72{height:calc(var(--spacing) * 72)}.lg\:h-96{height:calc(var(--spacing) * 96)}.lg\:h-full{height:100%}.lg\:h-screen{height:100vh}.lg\:max-w-none{max-width:none}.lg\:flex-1{flex:1}.lg\:shrink-0{flex-shrink:0}.lg\:translate-x-0{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-\[1fr_120px\]{grid-template-columns:1fr 120px}.lg\:grid-cols-\[120px_1fr\]{grid-template-columns:120px 1fr}.lg\:place-content-center{place-content:center}.lg\:items-end{align-items:flex-end}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}.lg\:justify-end{justify-content:flex-end}.lg\:justify-start{justify-content:flex-start}.lg\:gap-6{gap:calc(var(--spacing) * 6)}.lg\:gap-8{gap:calc(var(--spacing) * 8)}.lg\:gap-12{gap:calc(var(--spacing) * 12)}.lg\:gap-16{gap:calc(var(--spacing) * 16)}.lg\:gap-32{gap:calc(var(--spacing) * 32)}:where(.lg\:space-y-16>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)))}.lg\:gap-y-16{row-gap:calc(var(--spacing) * 16)}.lg\:border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.lg\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:p-4{padding:calc(var(--spacing) * 4)}.lg\:p-8{padding:calc(var(--spacing) * 8)}.lg\:p-12{padding:calc(var(--spacing) * 12)}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}.lg\:px-16{padding-inline:calc(var(--spacing) * 16)}.lg\:py-16{padding-block:calc(var(--spacing) * 16)}.lg\:py-24{padding-block:calc(var(--spacing) * 24)}.lg\:py-32{padding-block:calc(var(--spacing) * 32)}.lg\:ps-16{padding-inline-start:calc(var(--spacing) * 16)}.lg\:pe-16{padding-inline-end:calc(var(--spacing) * 16)}.lg\:pt-16{padding-top:calc(var(--spacing) * 16)}.lg\:pt-24{padding-top:calc(var(--spacing) * 24)}.lg\:pt-64{padding-top:calc(var(--spacing) * 64)}.lg\:pb-8{padding-bottom:calc(var(--spacing) * 8)}.lg\:text-left{text-align:left}.lg\:text-right{text-align:right}.lg\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (min-width:80rem){.xl\:static{position:static}.xl\:hidden{display:none}.xl\:translate-x-0{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}.ltr\:right-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){right:0}.ltr\:border-s-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.ltr\:border-b-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ltr\:bg-gray-50:where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-50)}.ltr\:bg-white:where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-white)}.ltr\:pr-9:where(:dir(ltr),[dir=ltr],[dir=ltr] *){padding-right:calc(var(--spacing) * 9)}.ltr\:text-left:where(:dir(ltr),[dir=ltr],[dir=ltr] *){text-align:left}.ltr\:group-open\:start-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *):is(:where(.group):is([open],:popover-open,:open) *){inset-inline-start:calc(var(--spacing) * 0)}@media (min-width:40rem){.ltr\:sm\:justify-start:where(:dir(ltr),[dir=ltr],[dir=ltr] *){justify-content:flex-start}.ltr\:sm\:text-left:where(:dir(ltr),[dir=ltr],[dir=ltr] *){text-align:left}}.rtl\:left-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){left:0}.rtl\:-translate-x-1:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.rtl\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:180deg}.rtl\:border-e-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.rtl\:border-t-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){border-top-style:var(--tw-border-style);border-top-width:0}.rtl\:bg-gray-50:where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-50)}.rtl\:bg-white:where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-white)}.rtl\:pl-9:where(:dir(rtl),[dir=rtl],[dir=rtl] *){padding-left:calc(var(--spacing) * 9)}.rtl\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){.rtl\:group-hover\:-translate-x-1:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.rtl\:peer-checked\:-translate-x-6:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.peer):checked~*){--tw-translate-x:calc(var(--spacing) * -6);translate:var(--tw-translate-x) var(--tw-translate-y)}@media not all and (min-width:64rem){.max-lg\:rtl\:translate-x-full:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media (min-width:40rem){.rtl\:sm\:justify-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){justify-content:flex-end}.rtl\:sm\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}}:where(.dark\:divide-gray-600:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-600)}:where(.dark\:divide-gray-700:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-700)}:where(.dark\:divide-gray-800:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-800)}:where(.dark\:divide-gray-900:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-900)}:where(.dark\:divide-white:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-white)}.dark\:border-amber-400:where(.dark,.dark *){border-color:var(--color-amber-400)}.dark\:border-blue-300:where(.dark,.dark *){border-color:var(--color-blue-300)}.dark\:border-blue-400:where(.dark,.dark *){border-color:var(--color-blue-400)}.dark\:border-blue-600:where(.dark,.dark *){border-color:var(--color-blue-600)}.dark\:border-emerald-400:where(.dark,.dark *){border-color:var(--color-emerald-400)}.dark\:border-gray-600:where(.dark,.dark *){border-color:var(--color-gray-600)}.dark\:border-gray-700:where(.dark,.dark *){border-color:var(--color-gray-700)}.dark\:border-gray-800:where(.dark,.dark *){border-color:var(--color-gray-800)}.dark\:border-green-400:where(.dark,.dark *){border-color:var(--color-green-400)}.dark\:border-indigo-300:where(.dark,.dark *){border-color:var(--color-indigo-300)}.dark\:border-indigo-400:where(.dark,.dark *){border-color:var(--color-indigo-400)}.dark\:border-red-400:where(.dark,.dark *){border-color:var(--color-red-400)}.dark\:border-slate-600:where(.dark,.dark *){border-color:var(--color-slate-600)}.dark\:border-white:where(.dark,.dark *){border-color:var(--color-white)}.dark\:border-white\/10:where(.dark,.dark *){border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/10:where(.dark,.dark *){border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:bg-amber-800:where(.dark,.dark *){background-color:var(--color-amber-800)}.dark\:bg-blue-300:where(.dark,.dark *){background-color:var(--color-blue-300)}.dark\:bg-blue-500\/20:where(.dark,.dark *){background-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-500\/20:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.dark\:bg-blue-700:where(.dark,.dark *){background-color:var(--color-blue-700)}.dark\:bg-blue-700\/25:where(.dark,.dark *){background-color:#1447e640}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-700\/25:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-700) 25%, transparent)}}.dark\:bg-blue-800:where(.dark,.dark *){background-color:var(--color-blue-800)}.dark\:bg-emerald-800:where(.dark,.dark *){background-color:var(--color-emerald-800)}.dark\:bg-gray-400:where(.dark,.dark *){background-color:var(--color-gray-400)}.dark\:bg-gray-600:where(.dark,.dark *){background-color:var(--color-gray-600)}.dark\:bg-gray-700:where(.dark,.dark *){background-color:var(--color-gray-700)}.dark\:bg-gray-800:where(.dark,.dark *){background-color:var(--color-gray-800)}.dark\:bg-gray-900:where(.dark,.dark *){background-color:var(--color-gray-900)}.dark\:bg-gray-900\/15:where(.dark,.dark *){background-color:#10182826}@supports (color:color-mix(in lab, red, red)){.dark\:bg-gray-900\/15:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-gray-900) 15%, transparent)}}.dark\:bg-green-300:where(.dark,.dark *){background-color:var(--color-green-300)}.dark\:bg-green-700:where(.dark,.dark *){background-color:var(--color-green-700)}.dark\:bg-green-800:where(.dark,.dark *){background-color:var(--color-green-800)}.dark\:bg-indigo-300:where(.dark,.dark *){background-color:var(--color-indigo-300)}.dark\:bg-indigo-700:where(.dark,.dark *){background-color:var(--color-indigo-700)}.dark\:bg-indigo-800:where(.dark,.dark *){background-color:var(--color-indigo-800)}.dark\:bg-purple-600:where(.dark,.dark *){background-color:var(--color-purple-600)}.dark\:bg-red-300:where(.dark,.dark *){background-color:var(--color-red-300)}.dark\:bg-red-700:where(.dark,.dark *){background-color:var(--color-red-700)}.dark\:bg-red-800:where(.dark,.dark *){background-color:var(--color-red-800)}.dark\:bg-white:where(.dark,.dark *){background-color:var(--color-white)}.dark\:bg-white\/10:where(.dark,.dark *){background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/10:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:bg-yellow-600:where(.dark,.dark *){background-color:var(--color-yellow-600)}.dark\:bg-yellow-700:where(.dark,.dark *){background-color:var(--color-yellow-700)}.dark\:from-yellow-500:where(.dark,.dark *){--tw-gradient-from:var(--color-yellow-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.dark\:to-gray-700:where(.dark,.dark *){--tw-gradient-to:var(--color-gray-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.dark\:to-yellow-400:where(.dark,.dark *){--tw-gradient-to:var(--color-yellow-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.dark\:text-amber-100:where(.dark,.dark *){color:var(--color-amber-100)}.dark\:text-amber-200:where(.dark,.dark *){color:var(--color-amber-200)}.dark\:text-blue-50:where(.dark,.dark *){color:var(--color-blue-50)}.dark\:text-blue-100:where(.dark,.dark *){color:var(--color-blue-100)}.dark\:text-blue-200:where(.dark,.dark *){color:var(--color-blue-200)}.dark\:text-blue-400:where(.dark,.dark *){color:var(--color-blue-400)}.dark\:text-emerald-200:where(.dark,.dark *){color:var(--color-emerald-200)}.dark\:text-gray-50:where(.dark,.dark *){color:var(--color-gray-50)}.dark\:text-gray-200:where(.dark,.dark *){color:var(--color-gray-200)}.dark\:text-gray-300:where(.dark,.dark *){color:var(--color-gray-300)}.dark\:text-gray-400:where(.dark,.dark *){color:var(--color-gray-400)}.dark\:text-gray-500:where(.dark,.dark *){color:var(--color-gray-500)}.dark\:text-gray-900:where(.dark,.dark *){color:var(--color-gray-900)}.dark\:text-green-50:where(.dark,.dark *){color:var(--color-green-50)}.dark\:text-green-100:where(.dark,.dark *){color:var(--color-green-100)}.dark\:text-green-200:where(.dark,.dark *){color:var(--color-green-200)}.dark\:text-indigo-200:where(.dark,.dark *){color:var(--color-indigo-200)}.dark\:text-indigo-300:where(.dark,.dark *){color:var(--color-indigo-300)}.dark\:text-indigo-500:where(.dark,.dark *){color:var(--color-indigo-500)}.dark\:text-purple-100:where(.dark,.dark *){color:var(--color-purple-100)}.dark\:text-red-50:where(.dark,.dark *){color:var(--color-red-50)}.dark\:text-red-100:where(.dark,.dark *){color:var(--color-red-100)}.dark\:text-red-200:where(.dark,.dark *){color:var(--color-red-200)}.dark\:text-red-300:where(.dark,.dark *){color:var(--color-red-300)}.dark\:text-red-500:where(.dark,.dark *){color:var(--color-red-500)}.dark\:text-slate-200:where(.dark,.dark *){color:var(--color-slate-200)}.dark\:text-slate-300:where(.dark,.dark *){color:var(--color-slate-300)}.dark\:text-slate-500:where(.dark,.dark *){color:var(--color-slate-500)}.dark\:text-teal-300:where(.dark,.dark *){color:var(--color-teal-300)}.dark\:text-teal-500:where(.dark,.dark *){color:var(--color-teal-500)}.dark\:text-teal-600:where(.dark,.dark *){color:var(--color-teal-600)}.dark\:text-white:where(.dark,.dark *){color:var(--color-white)}.dark\:text-white\/75:where(.dark,.dark *){color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:text-white\/75:where(.dark,.dark *){color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.dark\:decoration-slate-600:where(.dark,.dark *){-webkit-text-decoration-color:var(--color-slate-600);-webkit-text-decoration-color:var(--color-slate-600);text-decoration-color:var(--color-slate-600)}.dark\:placeholder-white:where(.dark,.dark *)::placeholder{color:var(--color-white)}.dark\:shadow-gray-700\/25:where(.dark,.dark *){--tw-shadow-color:#36415340}@supports (color:color-mix(in lab, red, red)){.dark\:shadow-gray-700\/25:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-gray-700) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.dark\:shadow-gray-800\/25:where(.dark,.dark *){--tw-shadow-color:#1e293940}@supports (color:color-mix(in lab, red, red)){.dark\:shadow-gray-800\/25:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-gray-800) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.dark\:shadow-white:where(.dark,.dark *){--tw-shadow-color:#fff}@supports (color:color-mix(in lab, red, red)){.dark\:shadow-white:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, var(--color-white) var(--tw-shadow-alpha), transparent)}}.dark\:ring-gray-900:where(.dark,.dark *){--tw-ring-color:var(--color-gray-900)}.dark\:ring-white:where(.dark,.dark *){--tw-ring-color:var(--color-white)}.dark\:ring-offset-gray-900:where(.dark,.dark *){--tw-ring-offset-color:var(--color-gray-900)}.dark\:ring-offset-yellow-600:where(.dark,.dark *){--tw-ring-offset-color:var(--color-yellow-600)}:is(.dark\:\*\:text-white:where(.dark,.dark *)>*){color:var(--color-white)}@media (hover:hover){.dark\:group-hover\:bg-gray-700:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-gray-700)}.dark\:group-hover\:bg-gray-900:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-gray-900)}.dark\:group-hover\:text-gray-100:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-gray-100)}.dark\:group-hover\:text-gray-300:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-gray-300)}.dark\:group-hover\:text-slate-300:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-slate-300)}.dark\:group-hover\:text-white\/75:where(.dark,.dark *):is(:where(.group):hover *){color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:group-hover\:text-white\/75:where(.dark,.dark *):is(:where(.group):hover *){color:color-mix(in oklab, var(--color-white) 75%, transparent)}}}.dark\:peer-checked\:bg-gray-900:where(.dark,.dark *):is(:where(.peer):checked~*){background-color:var(--color-gray-900)}.dark\:backdrop\:bg-white\/50:where(.dark,.dark *)::backdrop{background-color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.dark\:backdrop\:bg-white\/50:where(.dark,.dark *)::backdrop{background-color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.dark\:before\:bg-gray-700:where(.dark,.dark *):before,.dark\:after\:bg-gray-700:where(.dark,.dark *):after{content:var(--tw-content);background-color:var(--color-gray-700)}.dark\:after\:bg-white:where(.dark,.dark *):after{content:var(--tw-content);background-color:var(--color-white)}:is(.dark\:\*\:first\:bg-gray-900:where(.dark,.dark *)>*):first-child{background-color:var(--color-gray-900)}:is(.dark\:\*\:even\:bg-gray-800:where(.dark,.dark *)>*):nth-child(2n){background-color:var(--color-gray-800)}.dark\:checked\:bg-blue-600:where(.dark,.dark *):checked{background-color:var(--color-blue-600)}.dark\:focus-within\:bg-yellow-700:where(.dark,.dark *):focus-within{background-color:var(--color-yellow-700)}.dark\:focus-within\:ring-yellow-600:where(.dark,.dark *):focus-within{--tw-ring-color:var(--color-yellow-600)}@media (hover:hover){.dark\:hover\:border-blue-200:where(.dark,.dark *):hover{border-color:var(--color-blue-200)}.dark\:hover\:border-gray-700:where(.dark,.dark *):hover{border-color:var(--color-gray-700)}.dark\:hover\:border-slate-500:where(.dark,.dark *):hover{border-color:var(--color-slate-500)}.dark\:hover\:bg-blue-200:where(.dark,.dark *):hover{background-color:var(--color-blue-200)}.dark\:hover\:bg-gray-600:where(.dark,.dark *):hover{background-color:var(--color-gray-600)}.dark\:hover\:bg-gray-700:where(.dark,.dark *):hover{background-color:var(--color-gray-700)}.dark\:hover\:bg-gray-800:where(.dark,.dark *):hover{background-color:var(--color-gray-800)}.dark\:hover\:bg-gray-800\/50:where(.dark,.dark *):hover{background-color:#1e293980}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-gray-800\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-gray-800) 50%, transparent)}}.dark\:hover\:bg-indigo-200:where(.dark,.dark *):hover{background-color:var(--color-indigo-200)}.dark\:hover\:bg-indigo-600:where(.dark,.dark *):hover{background-color:var(--color-indigo-600)}.dark\:hover\:bg-indigo-700:where(.dark,.dark *):hover{background-color:var(--color-indigo-700)}.dark\:hover\:bg-indigo-800:where(.dark,.dark *):hover{background-color:var(--color-indigo-800)}.dark\:hover\:bg-red-600\/10:where(.dark,.dark *):hover{background-color:#e400141a}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-red-600\/10:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-red-600) 10%, transparent)}}.dark\:hover\:bg-red-800:where(.dark,.dark *):hover{background-color:var(--color-red-800)}.dark\:hover\:bg-slate-800:where(.dark,.dark *):hover{background-color:var(--color-slate-800)}.dark\:hover\:bg-teal-500:where(.dark,.dark *):hover{background-color:var(--color-teal-500)}.dark\:hover\:bg-white:where(.dark,.dark *):hover{background-color:var(--color-white)}.dark\:hover\:bg-yellow-500:where(.dark,.dark *):hover{background-color:var(--color-yellow-500)}.dark\:hover\:bg-yellow-700:where(.dark,.dark *):hover{background-color:var(--color-yellow-700)}.dark\:hover\:text-blue-300:where(.dark,.dark *):hover{color:var(--color-blue-300)}.dark\:hover\:text-blue-500:where(.dark,.dark *):hover{color:var(--color-blue-500)}.dark\:hover\:text-gray-50:where(.dark,.dark *):hover{color:var(--color-gray-50)}.dark\:hover\:text-gray-200:where(.dark,.dark *):hover{color:var(--color-gray-200)}.dark\:hover\:text-gray-300:where(.dark,.dark *):hover{color:var(--color-gray-300)}.dark\:hover\:text-gray-900:where(.dark,.dark *):hover{color:var(--color-gray-900)}.dark\:hover\:text-indigo-200:where(.dark,.dark *):hover{color:var(--color-indigo-200)}.dark\:hover\:text-red-300:where(.dark,.dark *):hover{color:var(--color-red-300)}.dark\:hover\:text-slate-50:where(.dark,.dark *):hover{color:var(--color-slate-50)}.dark\:hover\:text-teal-500\/75:where(.dark,.dark *):hover{color:#00baa7bf}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:text-teal-500\/75:where(.dark,.dark *):hover{color:color-mix(in oklab, var(--color-teal-500) 75%, transparent)}}.dark\:hover\:text-white:where(.dark,.dark *):hover{color:var(--color-white)}.dark\:hover\:text-white\/75:where(.dark,.dark *):hover{color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:text-white\/75:where(.dark,.dark *):hover{color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.dark\:hover\:decoration-indigo-400:where(.dark,.dark *):hover{-webkit-text-decoration-color:var(--color-indigo-400);-webkit-text-decoration-color:var(--color-indigo-400);text-decoration-color:var(--color-indigo-400)}}.dark\:focus\:bg-yellow-500:where(.dark,.dark *):focus{background-color:var(--color-yellow-500)}.dark\:focus\:bg-yellow-700:where(.dark,.dark *):focus{background-color:var(--color-yellow-700)}.dark\:focus\:ring-gray-50:where(.dark,.dark *):focus{--tw-ring-color:var(--color-gray-50)}.dark\:focus\:ring-indigo-300:where(.dark,.dark *):focus{--tw-ring-color:var(--color-indigo-300)}.dark\:focus\:ring-white:where(.dark,.dark *):focus{--tw-ring-color:var(--color-white)}.dark\:focus\:ring-yellow-600:where(.dark,.dark *):focus{--tw-ring-color:var(--color-yellow-600)}.dark\:focus\:ring-offset-black:where(.dark,.dark *):focus{--tw-ring-offset-color:var(--color-black)}.dark\:focus\:ring-offset-gray-900:where(.dark,.dark *):focus{--tw-ring-offset-color:var(--color-gray-900)}.dark\:focus-visible\:ring-indigo-300:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--color-indigo-300)}.dark\:focus-visible\:ring-indigo-700:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--color-indigo-700)}.dark\:focus-visible\:ring-slate-700:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--color-slate-700)}.dark\:focus-visible\:ring-offset-gray-900:where(.dark,.dark *):focus-visible{--tw-ring-offset-color:var(--color-gray-900)}.dark\:has-checked\:bg-blue-600:where(.dark,.dark *):has(:checked){background-color:var(--color-blue-600)}.dark\:has-checked\:bg-green-600:where(.dark,.dark *):has(:checked){background-color:var(--color-green-600)}.dark\:ltr\:bg-gray-800:where(.dark,.dark *):where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-800)}.dark\:ltr\:bg-gray-900:where(.dark,.dark *):where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-900)}.dark\:rtl\:bg-gray-800:where(.dark,.dark *):where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-800)}.dark\:rtl\:bg-gray-900:where(.dark,.dark *):where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-900)}.\[\&_summary\:\:-webkit-details-marker\]\:hidden summary::-webkit-details-marker{display:none}.\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-0::-webkit-calendar-picker-indicator{opacity:0}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-inner-spin-button\]\:m-0::-webkit-inner-spin-button{margin:0}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:m-0::-webkit-outer-spin-button{margin:0}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:size-7::-webkit-slider-thumb{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer::-webkit-slider-thumb{cursor:pointer}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb{border-radius:3.40282e38px}.\[\&\:\:-webkit-slider-thumb\]\:border-\[6px\]::-webkit-slider-thumb{border-style:var(--tw-border-style);border-width:6px}.\[\&\:\:-webkit-slider-thumb\]\:border-gray-500::-webkit-slider-thumb{border-color:var(--color-gray-500)}.\[\&\:\:-webkit-slider-thumb\]\:bg-gray-200::-webkit-slider-thumb{background-color:var(--color-gray-200)}@media (hover:hover){.hover\:\[\&\~label\]\:text-yellow-500:hover~label{color:var(--color-yellow-500)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
\ No newline at end of file
diff --git a/public/examples/application/badges/1-dark.html b/public/examples/application/badges/1-dark.html
index eac73aa4..a3ecc187 100644
--- a/public/examples/application/badges/1-dark.html
+++ b/public/examples/application/badges/1-dark.html
@@ -8,13 +8,13 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6 dark:bg-gray-900">
     <span
-      class="rounded-full bg-purple-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700 dark:bg-purple-700 dark:text-purple-100"
+      class="rounded-full bg-indigo-100 dark:bg-indigo-800 px-2.5 py-0.5 text-sm whitespace-nowrap text-indigo-700 dark:text-indigo-200"
     >
       Live
     </span>
 
     <span
-      class="rounded-full border border-purple-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700 dark:text-purple-100"
+      class="rounded-full border border-indigo-500 dark:border-indigo-400 px-2.5 py-0.5 text-sm whitespace-nowrap text-indigo-700 dark:text-indigo-200"
     >
       Live
     </span>
diff --git a/public/examples/application/badges/1.html b/public/examples/application/badges/1.html
index 12a62826..82278841 100644
--- a/public/examples/application/badges/1.html
+++ b/public/examples/application/badges/1.html
@@ -8,13 +8,13 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6">
     <span
-      class="rounded-full bg-purple-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700"
+      class="rounded-full bg-indigo-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-indigo-700"
     >
       Live
     </span>
 
     <span
-      class="rounded-full border border-purple-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700"
+      class="rounded-full border border-indigo-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-indigo-700"
     >
       Live
     </span>
diff --git a/public/examples/application/badges/2-dark.html b/public/examples/application/badges/2-dark.html
index 258c6133..6c8651ef 100644
--- a/public/examples/application/badges/2-dark.html
+++ b/public/examples/application/badges/2-dark.html
@@ -8,7 +8,7 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6 dark:bg-gray-900">
     <span
-      class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700 dark:bg-purple-700 dark:text-purple-100"
+      class="inline-flex items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-800 px-2.5 py-0.5 text-indigo-700 dark:text-indigo-200"
     >
       <svg
         aria-hidden="true"
@@ -30,7 +30,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700 dark:text-purple-100"
+      class="inline-flex items-center justify-center rounded-full border border-indigo-500 dark:border-indigo-400 px-2.5 py-0.5 text-indigo-700 dark:text-indigo-200"
     >
       <svg
         aria-hidden="true"
diff --git a/public/examples/application/badges/2.html b/public/examples/application/badges/2.html
index 959c92f6..4254b02a 100644
--- a/public/examples/application/badges/2.html
+++ b/public/examples/application/badges/2.html
@@ -8,7 +8,7 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6">
     <span
-      class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700"
+      class="inline-flex items-center justify-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-indigo-700"
     >
       <svg
         aria-hidden="true"
@@ -30,7 +30,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700"
+      class="inline-flex items-center justify-center rounded-full border border-indigo-500 px-2.5 py-0.5 text-indigo-700"
     >
       <svg
         aria-hidden="true"
diff --git a/public/examples/application/badges/3-dark.html b/public/examples/application/badges/3-dark.html
index a93bbfb2..5c64b53f 100644
--- a/public/examples/application/badges/3-dark.html
+++ b/public/examples/application/badges/3-dark.html
@@ -8,12 +8,12 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6 dark:bg-gray-900">
     <span
-      class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700 dark:bg-purple-700 dark:text-purple-100"
+      class="inline-flex items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-800 px-2.5 py-0.5 text-indigo-700 dark:text-indigo-200"
     >
       <p class="text-sm whitespace-nowrap">Euro</p>
 
       <button
-        class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-900"
+        class="ms-1.5 -me-1 inline-block rounded-full bg-indigo-200 dark:bg-indigo-700 p-0.5 text-indigo-700 dark:text-indigo-200 transition hover:bg-indigo-300 dark:hover:bg-indigo-600"
       >
         <span class="sr-only">Remove badge</span>
 
@@ -32,12 +32,12 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700 dark:text-purple-100"
+      class="inline-flex items-center justify-center rounded-full border border-indigo-500 dark:border-indigo-400 px-2.5 py-0.5 text-indigo-700 dark:text-indigo-200"
     >
       <p class="text-sm whitespace-nowrap">Euro</p>
 
       <button
-        class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-900"
+        class="ms-1.5 -me-1 inline-block rounded-full bg-indigo-200 dark:bg-indigo-700 p-0.5 text-indigo-700 dark:text-indigo-200 transition hover:bg-indigo-300 dark:hover:bg-indigo-600"
       >
         <span class="sr-only">Remove badge</span>
 
diff --git a/public/examples/application/badges/3.html b/public/examples/application/badges/3.html
index abeed939..dbf7196a 100644
--- a/public/examples/application/badges/3.html
+++ b/public/examples/application/badges/3.html
@@ -8,12 +8,12 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6">
     <span
-      class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700"
+      class="inline-flex items-center justify-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-indigo-700"
     >
       <p class="text-sm whitespace-nowrap">Euro</p>
 
       <button
-        class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300"
+        class="ms-1.5 -me-1 inline-block rounded-full bg-indigo-200 p-0.5 text-indigo-700 transition hover:bg-indigo-300"
       >
         <span class="sr-only">Remove badge</span>
 
@@ -32,12 +32,12 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700"
+      class="inline-flex items-center justify-center rounded-full border border-indigo-500 px-2.5 py-0.5 text-indigo-700"
     >
       <p class="text-sm whitespace-nowrap">Euro</p>
 
       <button
-        class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300"
+        class="ms-1.5 -me-1 inline-block rounded-full bg-indigo-200 p-0.5 text-indigo-700 transition hover:bg-indigo-300"
       >
         <span class="sr-only">Remove badge</span>
 
diff --git a/public/examples/application/badges/4-dark.html b/public/examples/application/badges/4-dark.html
index 70f6c1ab..69e41acb 100644
--- a/public/examples/application/badges/4-dark.html
+++ b/public/examples/application/badges/4-dark.html
@@ -8,7 +8,7 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6 dark:bg-gray-900">
     <span
-      class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-1 text-purple-700 dark:bg-purple-700 dark:text-purple-100"
+      class="inline-flex items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-800 px-2.5 py-1 text-indigo-700 dark:text-indigo-200"
     >
       <svg
         aria-hidden="true"
@@ -28,7 +28,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-1 text-purple-700 dark:text-purple-100"
+      class="inline-flex items-center justify-center rounded-full border border-indigo-500 dark:border-indigo-400 px-2.5 py-1 text-indigo-700 dark:text-indigo-200"
     >
       <svg
         aria-hidden="true"
diff --git a/public/examples/application/badges/4.html b/public/examples/application/badges/4.html
index 1e6343a3..0b66e85b 100644
--- a/public/examples/application/badges/4.html
+++ b/public/examples/application/badges/4.html
@@ -8,7 +8,7 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6">
     <span
-      class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-1 text-purple-700"
+      class="inline-flex items-center justify-center rounded-full bg-indigo-100 px-2.5 py-1 text-indigo-700"
     >
       <svg
         aria-hidden="true"
@@ -28,7 +28,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-1 text-purple-700"
+      class="inline-flex items-center justify-center rounded-full border border-indigo-500 px-2.5 py-1 text-indigo-700"
     >
       <svg
         aria-hidden="true"
diff --git a/public/examples/application/badges/5-dark.html b/public/examples/application/badges/5-dark.html
index 5da6f419..ed47b4cc 100644
--- a/public/examples/application/badges/5-dark.html
+++ b/public/examples/application/badges/5-dark.html
@@ -8,7 +8,7 @@
   </head>
   <body class="flex flex-wrap justify-center gap-4 p-6 dark:bg-gray-900">
     <span
-      class="inline-flex items-center justify-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-emerald-700 dark:bg-emerald-700 dark:text-emerald-100"
+      class="inline-flex items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-800 px-2.5 py-0.5 text-emerald-700 dark:text-emerald-200"
     >
       <svg
         aria-hidden="true"
@@ -30,7 +30,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-emerald-500 px-2.5 py-0.5 text-emerald-700 dark:text-emerald-100"
+      class="inline-flex items-center justify-center rounded-full border border-emerald-500 dark:border-emerald-400 px-2.5 py-0.5 text-emerald-700 dark:text-emerald-200"
     >
       <svg
         aria-hidden="true"
@@ -52,7 +52,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full bg-amber-100 px-2.5 py-0.5 text-amber-700 dark:bg-amber-700 dark:text-amber-100"
+      class="inline-flex items-center justify-center rounded-full bg-amber-100 dark:bg-amber-800 px-2.5 py-0.5 text-amber-700 dark:text-amber-200"
     >
       <svg
         aria-hidden="true"
@@ -74,7 +74,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-amber-500 px-2.5 py-0.5 text-amber-700 dark:text-amber-100"
+      class="inline-flex items-center justify-center rounded-full border border-amber-500 dark:border-amber-400 px-2.5 py-0.5 text-amber-700 dark:text-amber-200"
     >
       <svg
         aria-hidden="true"
@@ -96,7 +96,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full bg-red-100 px-2.5 py-0.5 text-red-700 dark:bg-red-700 dark:text-red-100"
+      class="inline-flex items-center justify-center rounded-full bg-red-100 dark:bg-red-800 px-2.5 py-0.5 text-red-700 dark:text-red-200"
     >
       <svg
         aria-hidden="true"
@@ -118,7 +118,7 @@
     </span>
 
     <span
-      class="inline-flex items-center justify-center rounded-full border border-red-500 px-2.5 py-0.5 text-red-700 dark:text-red-100"
+      class="inline-flex items-center justify-center rounded-full border border-red-500 dark:border-red-400 px-2.5 py-0.5 text-red-700 dark:text-red-200"
     >
       <svg
         aria-hidden="true"
diff --git a/public/examples/application/breadcrumbs/1-dark.html b/public/examples/application/breadcrumbs/1-dark.html
index c09e1b55..82fa007c 100644
--- a/public/examples/application/breadcrumbs/1-dark.html
+++ b/public/examples/application/breadcrumbs/1-dark.html
@@ -10,7 +10,7 @@
     <nav aria-label="Breadcrumb">
       <ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Home
           </a>
         </li>
@@ -32,7 +32,7 @@
         </li>
 
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Category
           </a>
         </li>
@@ -54,7 +54,7 @@
         </li>
 
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Product
           </a>
         </li>
diff --git a/public/examples/application/breadcrumbs/2-dark.html b/public/examples/application/breadcrumbs/2-dark.html
index 324dcd20..ed56d9fd 100644
--- a/public/examples/application/breadcrumbs/2-dark.html
+++ b/public/examples/application/breadcrumbs/2-dark.html
@@ -12,7 +12,7 @@
         <li>
           <a
             href="#"
-            class="block transition-colors hover:text-gray-900 dark:hover:text-white"
+            class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50"
             aria-label="Home"
           >
             <svg
@@ -50,7 +50,7 @@
         </li>
 
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Category
           </a>
         </li>
@@ -72,7 +72,7 @@
         </li>
 
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Product
           </a>
         </li>
diff --git a/public/examples/application/breadcrumbs/3-dark.html b/public/examples/application/breadcrumbs/3-dark.html
index 9cc78b48..3cd3b722 100644
--- a/public/examples/application/breadcrumbs/3-dark.html
+++ b/public/examples/application/breadcrumbs/3-dark.html
@@ -10,7 +10,7 @@
     <nav aria-label="Breadcrumb">
       <ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Home
           </a>
         </li>
@@ -30,7 +30,7 @@
         </li>
 
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Category
           </a>
         </li>
@@ -50,7 +50,7 @@
         </li>
 
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Product
           </a>
         </li>
diff --git a/public/examples/application/breadcrumbs/4-dark.html b/public/examples/application/breadcrumbs/4-dark.html
index 57094088..bcdc6a65 100644
--- a/public/examples/application/breadcrumbs/4-dark.html
+++ b/public/examples/application/breadcrumbs/4-dark.html
@@ -12,7 +12,7 @@
         <li>
           <a
             href="#"
-            class="block transition-colors hover:text-gray-900 dark:hover:text-white"
+            class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50"
             aria-label="Home"
           >
             <svg
@@ -48,7 +48,7 @@
         </li>
 
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Category
           </a>
         </li>
@@ -68,7 +68,7 @@
         </li>
 
         <li>
-          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
+          <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-gray-50">
             Product
           </a>
         </li>
diff --git a/public/examples/application/breadcrumbs/5-dark.html b/public/examples/application/breadcrumbs/5-dark.html
index c3054a29..8becd210 100644
--- a/public/examples/application/breadcrumbs/5-dark.html
+++ b/public/examples/application/breadcrumbs/5-dark.html
@@ -9,12 +9,12 @@
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <nav aria-label="Breadcrumb">
       <ol
-        class="flex overflow-hidden rounded border border-gray-300 bg-white text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+        class="flex overflow-hidden rounded border border-gray-200 bg-white text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
       >
         <li>
           <a
             href="#"
-            class="block h-10 bg-gray-100 px-4 leading-10 transition-colors hover:text-gray-900 dark:bg-gray-700 dark:hover:text-white"
+            class="block h-10 bg-gray-100 px-4 leading-10 transition-colors hover:text-gray-900 dark:bg-gray-900 dark:hover:text-gray-50"
           >
             Home
           </a>
@@ -22,13 +22,13 @@
 
         <li class="relative flex items-center">
           <span
-            class="absolute inset-y-0 -start-px h-10 w-4 bg-gray-100 [clip-path:_polygon(0_0,_0%_100%,_100%_50%)] rtl:rotate-180 dark:bg-gray-700"
+            class="absolute inset-y-0 -start-px h-10 w-4 bg-gray-100 [clip-path:_polygon(0_0,_0%_100%,_100%_50%)] rtl:rotate-180 dark:bg-gray-900"
           >
           </span>
 
           <a
             href="#"
-            class="block h-10 pr-4 pl-6 leading-10 transition-colors hover:text-gray-900 dark:hover:text-white"
+            class="block h-10 pr-4 pl-6 leading-10 transition-colors hover:text-gray-900 dark:hover:text-gray-50"
           >
             Category
           </a>
diff --git a/public/examples/application/breadcrumbs/5.html b/public/examples/application/breadcrumbs/5.html
index 28b1b64a..46994781 100644
--- a/public/examples/application/breadcrumbs/5.html
+++ b/public/examples/application/breadcrumbs/5.html
@@ -9,7 +9,7 @@
   <body class="flex justify-center p-6">
     <nav aria-label="Breadcrumb">
       <ol
-        class="flex overflow-hidden rounded border border-gray-300 bg-white text-sm text-gray-700"
+        class="flex overflow-hidden rounded border border-gray-200 bg-white text-sm text-gray-700"
       >
         <li>
           <a
diff --git a/public/examples/application/button-groups/1-dark.html b/public/examples/application/button-groups/1-dark.html
index 30e6e45b..e4f80927 100644
--- a/public/examples/application/button-groups/1-dark.html
+++ b/public/examples/application/button-groups/1-dark.html
@@ -9,19 +9,19 @@
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <div class="inline-flex">
       <button
-        class="rounded-s-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="rounded-s-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
       >
         View
       </button>
 
       <button
-        class="-ms-px border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="-ms-px border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
       >
         Edit
       </button>
 
       <button
-        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
       >
         Delete
       </button>
diff --git a/public/examples/application/button-groups/1.html b/public/examples/application/button-groups/1.html
index 9e145431..94ae3daa 100644
--- a/public/examples/application/button-groups/1.html
+++ b/public/examples/application/button-groups/1.html
@@ -9,19 +9,19 @@
   <body class="flex justify-center p-6">
     <div class="inline-flex">
       <button
-        class="rounded-s-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="rounded-s-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
       >
         View
       </button>
 
       <button
-        class="-ms-px border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="-ms-px border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
       >
         Edit
       </button>
 
       <button
-        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
       >
         Delete
       </button>
diff --git a/public/examples/application/button-groups/2-dark.html b/public/examples/application/button-groups/2-dark.html
index 92c6eb05..11369142 100644
--- a/public/examples/application/button-groups/2-dark.html
+++ b/public/examples/application/button-groups/2-dark.html
@@ -9,7 +9,7 @@
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <div class="inline-flex">
       <button
-        class="rounded-s-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="rounded-s-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
         aria-label="View"
       >
         <svg
@@ -35,7 +35,7 @@
       </button>
 
       <button
-        class="-ms-px border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="-ms-px border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
         aria-label="Edit"
       >
         <svg
@@ -56,7 +56,7 @@
       </button>
 
       <button
-        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
         aria-label="Delete"
       >
         <svg
diff --git a/public/examples/application/button-groups/2.html b/public/examples/application/button-groups/2.html
index 51d61beb..de5ac7e8 100644
--- a/public/examples/application/button-groups/2.html
+++ b/public/examples/application/button-groups/2.html
@@ -9,7 +9,7 @@
   <body class="flex justify-center p-6">
     <div class="inline-flex">
       <button
-        class="rounded-s-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="rounded-s-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
         aria-label="View"
       >
         <svg
@@ -35,7 +35,7 @@
       </button>
 
       <button
-        class="-ms-px border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="-ms-px border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
         aria-label="Edit"
       >
         <svg
@@ -56,7 +56,7 @@
       </button>
 
       <button
-        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
         aria-label="Delete"
       >
         <svg
diff --git a/public/examples/application/button-groups/3-dark.html b/public/examples/application/button-groups/3-dark.html
index a31fbea4..28c0f6cc 100644
--- a/public/examples/application/button-groups/3-dark.html
+++ b/public/examples/application/button-groups/3-dark.html
@@ -9,13 +9,13 @@
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <div class="inline-flex">
       <button
-        class="rounded-s-sm border border-gray-200 px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="rounded-s-sm border border-gray-200 px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
       >
         Edit
       </button>
 
       <button
-        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
         aria-label="View"
       >
         <svg
diff --git a/public/examples/application/button-groups/3.html b/public/examples/application/button-groups/3.html
index 46faf346..05646979 100644
--- a/public/examples/application/button-groups/3.html
+++ b/public/examples/application/button-groups/3.html
@@ -9,13 +9,13 @@
   <body class="flex justify-center p-6">
     <div class="inline-flex">
       <button
-        class="rounded-s-sm border border-gray-200 px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="rounded-s-sm border border-gray-200 px-4 py-2 font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
       >
         Edit
       </button>
 
       <button
-        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="-ms-px rounded-e-sm border border-gray-200 px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
         aria-label="View"
       >
         <svg
diff --git a/public/examples/application/button-groups/4-dark.html b/public/examples/application/button-groups/4-dark.html
index 54ffd811..23ba89ae 100644
--- a/public/examples/application/button-groups/4-dark.html
+++ b/public/examples/application/button-groups/4-dark.html
@@ -9,7 +9,7 @@
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <div class="inline-flex gap-2">
       <button
-        class="rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
         aria-label="Grid view"
       >
         <svg
@@ -30,7 +30,7 @@
       </button>
 
       <button
-        class="rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
         aria-label="List view"
       >
         <svg
diff --git a/public/examples/application/button-groups/4.html b/public/examples/application/button-groups/4.html
index b654cabd..5b3c5627 100644
--- a/public/examples/application/button-groups/4.html
+++ b/public/examples/application/button-groups/4.html
@@ -9,7 +9,7 @@
   <body class="flex justify-center p-6">
     <div class="inline-flex gap-2">
       <button
-        class="rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
         aria-label="Grid view"
       >
         <svg
@@ -30,7 +30,7 @@
       </button>
 
       <button
-        class="rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="rounded-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
         aria-label="List view"
       >
         <svg
diff --git a/public/examples/application/button-groups/5-dark.html b/public/examples/application/button-groups/5-dark.html
index cbed35f5..0702faab 100644
--- a/public/examples/application/button-groups/5-dark.html
+++ b/public/examples/application/button-groups/5-dark.html
@@ -9,7 +9,7 @@
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <div class="inline-flex">
       <button
-        class="rounded-s-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="rounded-s-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
         aria-label="Grid view"
       >
         <svg
@@ -30,7 +30,7 @@
       </button>
 
       <button
-        class="-ms-px rounded-e-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:ring-offset-gray-900"
+        class="-ms-px rounded-e-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus:ring-gray-50 dark:focus:ring-offset-black"
         aria-label="List view"
       >
         <svg
diff --git a/public/examples/application/button-groups/5.html b/public/examples/application/button-groups/5.html
index afb8e82d..bd29d592 100644
--- a/public/examples/application/button-groups/5.html
+++ b/public/examples/application/button-groups/5.html
@@ -9,7 +9,7 @@
   <body class="flex justify-center p-6">
     <div class="inline-flex">
       <button
-        class="rounded-s-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="rounded-s-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
         aria-label="Grid view"
       >
         <svg
@@ -30,7 +30,7 @@
       </button>
 
       <button
-        class="-ms-px rounded-e-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
+        class="-ms-px rounded-e-sm border border-gray-200 p-2 text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-white focus:outline-none disabled:pointer-events-auto disabled:opacity-50"
         aria-label="List view"
       >
         <svg
diff --git a/public/examples/application/checkboxes/1-dark.html b/public/examples/application/checkboxes/1-dark.html
index d311fee1..f117e79c 100644
--- a/public/examples/application/checkboxes/1-dark.html
+++ b/public/examples/application/checkboxes/1-dark.html
@@ -14,7 +14,7 @@
         <label for="Option1" class="inline-flex items-center gap-3">
           <input
             type="checkbox"
-            class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+            class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
             id="Option1"
           />
 
@@ -24,7 +24,7 @@
         <label for="Option2" class="inline-flex items-center gap-3">
           <input
             type="checkbox"
-            class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+            class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
             id="Option2"
           />
 
@@ -34,7 +34,7 @@
         <label for="Option3" class="inline-flex items-center gap-3">
           <input
             type="checkbox"
-            class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+            class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
             id="Option3"
           />
 
diff --git a/public/examples/application/checkboxes/2-dark.html b/public/examples/application/checkboxes/2-dark.html
index e4f02b02..f70b193a 100644
--- a/public/examples/application/checkboxes/2-dark.html
+++ b/public/examples/application/checkboxes/2-dark.html
@@ -14,7 +14,7 @@
         <label for="Option1" class="inline-flex items-start gap-3">
           <input
             type="checkbox"
-            class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+            class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
             id="Option1"
           />
 
@@ -30,7 +30,7 @@
         <label for="Option2" class="inline-flex items-start gap-3">
           <input
             type="checkbox"
-            class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+            class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
             id="Option2"
           />
 
@@ -46,7 +46,7 @@
         <label for="Option3" class="inline-flex items-start gap-3">
           <input
             type="checkbox"
-            class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+            class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
             id="Option3"
           />
 
diff --git a/public/examples/application/checkboxes/3-dark.html b/public/examples/application/checkboxes/3-dark.html
index 52b007e5..0210ce86 100644
--- a/public/examples/application/checkboxes/3-dark.html
+++ b/public/examples/application/checkboxes/3-dark.html
@@ -15,7 +15,7 @@
           <label for="Option1" class="inline-flex items-start gap-3 py-3">
             <input
               type="checkbox"
-              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
               id="Option1"
             />
 
@@ -31,7 +31,7 @@
           <label for="Option2" class="inline-flex items-start gap-3 py-3">
             <input
               type="checkbox"
-              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
               id="Option2"
             />
 
@@ -47,7 +47,7 @@
           <label for="Option3" class="inline-flex items-start gap-3 py-3">
             <input
               type="checkbox"
-              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+              class="my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900"
               id="Option3"
             />
 
diff --git a/public/examples/application/details-list/1-dark.html b/public/examples/application/details-list/1-dark.html
index fb4bbbec..1be02f67 100644
--- a/public/examples/application/details-list/1-dark.html
+++ b/public/examples/application/details-list/1-dark.html
@@ -10,31 +10,31 @@
     <div class="flow-root">
       <dl class="-my-3 divide-y divide-gray-200 text-sm dark:divide-gray-700">
         <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Title</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Title</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Mr</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Name</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Name</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">John Frusciante</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Occupation</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Occupation</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Guitarist</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Salary</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Salary</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">$1,000,000+</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Bio</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Bio</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">
             Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
diff --git a/public/examples/application/details-list/2-dark.html b/public/examples/application/details-list/2-dark.html
index bf75d20e..ad741d99 100644
--- a/public/examples/application/details-list/2-dark.html
+++ b/public/examples/application/details-list/2-dark.html
@@ -12,31 +12,31 @@
         class="-my-3 divide-y divide-gray-200 text-sm *:even:bg-gray-50 dark:divide-gray-700 dark:*:even:bg-gray-800"
       >
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Title</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Title</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Mr</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Name</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Name</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">John Frusciante</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Occupation</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Occupation</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Guitarist</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Salary</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Salary</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">$1,000,000+</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Bio</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Bio</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">
             Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
diff --git a/public/examples/application/details-list/3-dark.html b/public/examples/application/details-list/3-dark.html
index 8c77f76a..d05f45ac 100644
--- a/public/examples/application/details-list/3-dark.html
+++ b/public/examples/application/details-list/3-dark.html
@@ -9,34 +9,34 @@
   <body class="mx-auto max-w-3xl p-6 dark:bg-gray-900">
     <div class="flow-root">
       <dl
-        class="-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm dark:divide-gray-700 dark:border-gray-800"
+        class="-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm dark:divide-gray-700 dark:border-gray-700"
       >
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Title</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Title</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Mr</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Name</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Name</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">John Frusciante</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Occupation</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Occupation</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Guitarist</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Salary</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Salary</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">$1,000,000+</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Bio</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Bio</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">
             Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
diff --git a/public/examples/application/details-list/4-dark.html b/public/examples/application/details-list/4-dark.html
index d1302fe9..7c320440 100644
--- a/public/examples/application/details-list/4-dark.html
+++ b/public/examples/application/details-list/4-dark.html
@@ -9,34 +9,34 @@
   <body class="mx-auto max-w-3xl p-6 dark:bg-gray-900">
     <div class="flow-root">
       <dl
-        class="-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm *:even:bg-gray-50 dark:divide-gray-700 dark:border-gray-800 dark:*:even:bg-gray-800"
+        class="-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm *:even:bg-gray-50 dark:divide-gray-700 dark:border-gray-700 dark:*:even:bg-gray-800"
       >
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Title</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Title</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Mr</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Name</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Name</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">John Frusciante</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Occupation</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Occupation</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Guitarist</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Salary</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Salary</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">$1,000,000+</dd>
         </div>
 
         <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
-          <dt class="font-medium text-gray-900 dark:text-white">Bio</dt>
+          <dt class="font-medium text-gray-900 dark:text-gray-50">Bio</dt>
 
           <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">
             Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
diff --git a/public/examples/application/dividers/1-dark.html b/public/examples/application/dividers/1-dark.html
index 20004df6..35a20d08 100644
--- a/public/examples/application/dividers/1-dark.html
+++ b/public/examples/application/dividers/1-dark.html
@@ -8,11 +8,11 @@
   </head>
   <body class="mx-auto max-w-3xl p-6 dark:bg-gray-900">
     <span class="flex items-center">
-      <span class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></span>
+      <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
 
-      <span class="shrink-0 px-4 text-gray-900 dark:text-white"> Title goes here </span>
+      <span class="shrink-0 px-4 text-gray-900 dark:text-gray-50">Title goes here</span>
 
-      <span class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></span>
+      <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/1.html b/public/examples/application/dividers/1.html
index 2885b5c2..7682d730 100644
--- a/public/examples/application/dividers/1.html
+++ b/public/examples/application/dividers/1.html
@@ -8,11 +8,11 @@
   </head>
   <body class="mx-auto max-w-3xl p-6">
     <span class="flex items-center">
-      <span class="h-px flex-1 bg-gray-300"></span>
+      <span class="h-px flex-1 bg-gray-200"></span>
 
       <span class="shrink-0 px-4 text-gray-900">Title goes here</span>
 
-      <span class="h-px flex-1 bg-gray-300"></span>
+      <span class="h-px flex-1 bg-gray-200"></span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/2-dark.html b/public/examples/application/dividers/2-dark.html
index 447327ce..f6d86b1c 100644
--- a/public/examples/application/dividers/2-dark.html
+++ b/public/examples/application/dividers/2-dark.html
@@ -8,11 +8,11 @@
   </head>
   <body class="mx-auto max-w-3xl p-6 dark:bg-gray-900">
     <span class="flex items-center">
-      <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-300 dark:to-gray-600"></span>
+      <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-200 dark:to-gray-700"></span>
 
-      <span class="shrink-0 px-4 text-gray-900 dark:text-white">Title goes here</span>
+      <span class="shrink-0 px-4 text-gray-900 dark:text-gray-50">Title goes here</span>
 
-      <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-300 dark:to-gray-600"></span>
+      <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-200 dark:to-gray-700"></span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/2.html b/public/examples/application/dividers/2.html
index 243e967d..2b127b6b 100644
--- a/public/examples/application/dividers/2.html
+++ b/public/examples/application/dividers/2.html
@@ -8,11 +8,11 @@
   </head>
   <body class="mx-auto max-w-3xl p-6">
     <span class="flex items-center">
-      <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-300"></span>
+      <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-200"></span>
 
       <span class="shrink-0 px-4 text-gray-900">Title goes here</span>
 
-      <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-300"></span>
+      <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-200"></span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/3-dark.html b/public/examples/application/dividers/3-dark.html
index 71bd1902..4dbd66b7 100644
--- a/public/examples/application/dividers/3-dark.html
+++ b/public/examples/application/dividers/3-dark.html
@@ -8,9 +8,9 @@
   </head>
   <body class="mx-auto max-w-3xl p-6 dark:bg-gray-900">
     <span class="flex items-center">
-      <span class="shrink-0 pe-4 text-gray-900 dark:text-white"> Title goes here </span>
+      <span class="shrink-0 pe-4 text-gray-900 dark:text-gray-50">Title goes here</span>
 
-      <span class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></span>
+      <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/3.html b/public/examples/application/dividers/3.html
index d0a49c61..b641985a 100644
--- a/public/examples/application/dividers/3.html
+++ b/public/examples/application/dividers/3.html
@@ -10,7 +10,7 @@
     <span class="flex items-center">
       <span class="shrink-0 pe-4 text-gray-900">Title goes here</span>
 
-      <span class="h-px flex-1 bg-gray-300"></span>
+      <span class="h-px flex-1 bg-gray-200"></span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/4-dark.html b/public/examples/application/dividers/4-dark.html
index 316cbbf3..2606486f 100644
--- a/public/examples/application/dividers/4-dark.html
+++ b/public/examples/application/dividers/4-dark.html
@@ -8,9 +8,9 @@
   </head>
   <body class="mx-auto max-w-3xl p-6 dark:bg-gray-900">
     <span class="flex items-center">
-      <span class="shrink-0 pe-4 text-gray-900 dark:text-white"> Title goes here </span>
+      <span class="shrink-0 pe-4 text-gray-900 dark:text-gray-50">Title goes here</span>
 
-      <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-300 dark:to-gray-600"></span>
+      <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-200 dark:to-gray-700"></span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/4.html b/public/examples/application/dividers/4.html
index e42316b2..c3d0ef09 100644
--- a/public/examples/application/dividers/4.html
+++ b/public/examples/application/dividers/4.html
@@ -10,7 +10,7 @@
     <span class="flex items-center">
       <span class="shrink-0 pe-4 text-gray-900">Title goes here</span>
 
-      <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-300"></span>
+      <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-200"></span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/5-dark.html b/public/examples/application/dividers/5-dark.html
index 239d05bb..cf6ee973 100644
--- a/public/examples/application/dividers/5-dark.html
+++ b/public/examples/application/dividers/5-dark.html
@@ -8,9 +8,9 @@
   </head>
   <body class="mx-auto max-w-3xl p-6 dark:bg-gray-900">
     <span class="flex items-center">
-      <span class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></span>
+      <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
 
-      <span class="shrink-0 ps-4 text-gray-900 dark:text-white"> Title goes here </span>
+      <span class="shrink-0 ps-4 text-gray-900 dark:text-gray-50">Title goes here</span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/5.html b/public/examples/application/dividers/5.html
index 004c8506..6144899b 100644
--- a/public/examples/application/dividers/5.html
+++ b/public/examples/application/dividers/5.html
@@ -8,7 +8,7 @@
   </head>
   <body class="mx-auto max-w-3xl p-6">
     <span class="flex items-center">
-      <span class="h-px flex-1 bg-gray-300"></span>
+      <span class="h-px flex-1 bg-gray-200"></span>
 
       <span class="shrink-0 ps-4 text-gray-900">Title goes here</span>
     </span>
diff --git a/public/examples/application/dividers/6-dark.html b/public/examples/application/dividers/6-dark.html
index 2f6ed2d8..cc229059 100644
--- a/public/examples/application/dividers/6-dark.html
+++ b/public/examples/application/dividers/6-dark.html
@@ -8,9 +8,9 @@
   </head>
   <body class="mx-auto max-w-3xl p-6 dark:bg-gray-900">
     <span class="flex items-center">
-      <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-300 dark:to-gray-600"></span>
+      <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-200 dark:to-gray-700"></span>
 
-      <span class="shrink-0 ps-4 text-gray-900 dark:text-white"> Title goes here </span>
+      <span class="shrink-0 ps-4 text-gray-900 dark:text-gray-50">Title goes here</span>
     </span>
   </body>
 </html>
diff --git a/public/examples/application/dividers/6.html b/public/examples/application/dividers/6.html
index 3d3b3642..4dfb3a2c 100644
--- a/public/examples/application/dividers/6.html
+++ b/public/examples/application/dividers/6.html
@@ -8,7 +8,7 @@
   </head>
   <body class="mx-auto max-w-3xl p-6">
     <span class="flex items-center">
-      <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-300"></span>
+      <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-200"></span>
 
       <span class="shrink-0 ps-4 text-gray-900">Title goes here</span>
     </span>
diff --git a/public/examples/application/dropdown/1-dark.html b/public/examples/application/dropdown/1-dark.html
index df0a7529..ffecc67d 100644
--- a/public/examples/application/dropdown/1-dark.html
+++ b/public/examples/application/dropdown/1-dark.html
@@ -9,18 +9,18 @@
   <body class="mx-auto flex max-w-sm justify-center p-6 dark:bg-gray-900">
     <div class="relative inline-flex">
       <span
-        class="inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800"
+        class="inline-flex divide-x divide-gray-200 dark:divide-gray-700 overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
       >
         <button
           type="button"
-          class="px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:relative"
         >
           Product
         </button>
 
         <button
           type="button"
-          class="px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:relative"
           aria-label="Menu"
         >
           <svg
@@ -39,11 +39,11 @@
 
       <div
         role="menu"
-        class="absolute end-0 top-12 z-auto w-56 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:border-gray-600 dark:bg-gray-800"
+        class="absolute end-0 top-12 z-auto w-56 overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
       >
         <a
           href="#"
-          class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
           role="menuitem"
         >
           Storefront
@@ -51,7 +51,7 @@
 
         <a
           href="#"
-          class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
           role="menuitem"
         >
           Warehouse
@@ -59,7 +59,7 @@
 
         <a
           href="#"
-          class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
           role="menuitem"
         >
           Stock
@@ -67,7 +67,7 @@
 
         <button
           type="button"
-          class="block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right dark:text-red-600 dark:hover:bg-red-700/20"
+          class="block w-full px-3 py-2 text-sm font-medium text-red-600 dark:text-red-300 transition-colors hover:bg-red-50 dark:hover:bg-red-800 ltr:text-left rtl:text-right"
         >
           Delete
         </button>
diff --git a/public/examples/application/dropdown/1.html b/public/examples/application/dropdown/1.html
index d6145486..2f96fe0e 100644
--- a/public/examples/application/dropdown/1.html
+++ b/public/examples/application/dropdown/1.html
@@ -9,7 +9,7 @@
   <body class="mx-auto flex max-w-sm justify-center p-6">
     <div class="relative inline-flex">
       <span
-        class="inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm"
+        class="inline-flex divide-x divide-gray-200 overflow-hidden rounded border border-gray-200 bg-white shadow-sm"
       >
         <button
           type="button"
@@ -39,7 +39,7 @@
 
       <div
         role="menu"
-        class="absolute end-0 top-12 z-auto w-56 overflow-hidden rounded border border-gray-300 bg-white shadow-sm"
+        class="absolute end-0 top-12 z-auto w-56 overflow-hidden rounded border border-gray-200 bg-white shadow-sm"
       >
         <a
           href="#"
@@ -67,7 +67,7 @@
 
         <button
           type="button"
-          class="block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right"
+          class="block w-full px-3 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right"
         >
           Delete
         </button>
diff --git a/public/examples/application/dropdown/2-dark.html b/public/examples/application/dropdown/2-dark.html
index 94f1844a..ef9cb947 100644
--- a/public/examples/application/dropdown/2-dark.html
+++ b/public/examples/application/dropdown/2-dark.html
@@ -9,18 +9,18 @@
   <body class="mx-auto flex max-w-sm justify-center p-6 dark:bg-gray-900">
     <div class="relative inline-flex">
       <span
-        class="inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800"
+        class="inline-flex divide-x divide-gray-200 dark:divide-gray-700 overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
       >
         <button
           type="button"
-          class="px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:relative"
         >
           Product
         </button>
 
         <button
           type="button"
-          class="px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:relative"
           aria-label="Menu"
         >
           <svg
@@ -39,12 +39,12 @@
 
       <div
         role="menu"
-        class="absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-600 dark:bg-gray-800"
+        class="absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 dark:divide-gray-700 overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
       >
         <div>
           <a
             href="#"
-            class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+            class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
             role="menuitem"
           >
             Storefront
@@ -52,7 +52,7 @@
 
           <a
             href="#"
-            class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+            class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
             role="menuitem"
           >
             Warehouse
@@ -60,16 +60,15 @@
 
           <a
             href="#"
-            class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+            class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
             role="menuitem"
           >
             Stock
           </a>
         </div>
-
         <button
           type="button"
-          class="block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right dark:text-red-600 dark:hover:bg-red-700/20"
+          class="block w-full px-3 py-2 text-sm font-medium text-red-600 dark:text-red-300 transition-colors hover:bg-red-50 dark:hover:bg-red-800 ltr:text-left rtl:text-right"
         >
           Delete
         </button>
diff --git a/public/examples/application/dropdown/2.html b/public/examples/application/dropdown/2.html
index 09b41861..9bfc1b86 100644
--- a/public/examples/application/dropdown/2.html
+++ b/public/examples/application/dropdown/2.html
@@ -9,7 +9,7 @@
   <body class="mx-auto flex max-w-sm justify-center p-6">
     <div class="relative inline-flex">
       <span
-        class="inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm"
+        class="inline-flex divide-x divide-gray-200 overflow-hidden rounded border border-gray-200 bg-white shadow-sm"
       >
         <button
           type="button"
@@ -39,7 +39,7 @@
 
       <div
         role="menu"
-        class="absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-300 bg-white shadow-sm"
+        class="absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-200 bg-white shadow-sm"
       >
         <div>
           <a
@@ -68,7 +68,7 @@
         </div>
         <button
           type="button"
-          class="block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right"
+          class="block w-full px-3 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right"
         >
           Delete
         </button>
diff --git a/public/examples/application/dropdown/3-dark.html b/public/examples/application/dropdown/3-dark.html
index 53891843..e2296dba 100644
--- a/public/examples/application/dropdown/3-dark.html
+++ b/public/examples/application/dropdown/3-dark.html
@@ -9,18 +9,18 @@
   <body class="mx-auto flex max-w-sm justify-center p-6 dark:bg-gray-900">
     <div class="relative inline-flex">
       <span
-        class="inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800"
+        class="inline-flex divide-x divide-gray-200 dark:divide-gray-700 overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
       >
         <button
           type="button"
-          class="px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:relative"
         >
           Product
         </button>
 
         <button
           type="button"
-          class="px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:relative dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+          class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:relative"
           aria-label="Menu"
         >
           <svg
@@ -39,14 +39,14 @@
 
       <div
         role="menu"
-        class="absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-300 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-600 dark:bg-gray-800"
+        class="absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 dark:divide-gray-700 overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
       >
         <div>
           <p class="block px-3 py-2 text-sm text-gray-500 dark:text-gray-400">General</p>
 
           <a
             href="#"
-            class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+            class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
             role="menuitem"
           >
             Storefront
@@ -54,7 +54,7 @@
 
           <a
             href="#"
-            class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+            class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
             role="menuitem"
           >
             Warehouse
@@ -62,7 +62,7 @@
 
           <a
             href="#"
-            class="block px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white"
+            class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50"
             role="menuitem"
           >
             Stock
@@ -74,7 +74,7 @@
 
           <button
             type="button"
-            class="block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right dark:text-red-600 dark:hover:bg-red-700/20"
+            class="block w-full px-3 py-2 text-sm font-medium text-red-600 dark:text-red-300 transition-colors hover:bg-red-50 dark:hover:bg-red-800 ltr:text-left rtl:text-right"
           >
             Delete
           </button>
diff --git a/public/examples/application/dropdown/3.html b/public/examples/application/dropdown/3.html
index a523298a..2014c962 100644
--- a/public/examples/application/dropdown/3.html
+++ b/public/examples/application/dropdown/3.html
@@ -9,7 +9,7 @@
   <body class="mx-auto flex max-w-sm justify-center p-6">
     <div class="relative inline-flex">
       <span
-        class="inline-flex divide-x divide-gray-300 overflow-hidden rounded border border-gray-300 bg-white shadow-sm"
+        class="inline-flex divide-x divide-gray-200 overflow-hidden rounded border border-gray-200 bg-white shadow-sm"
       >
         <button
           type="button"
@@ -39,7 +39,7 @@
 
       <div
         role="menu"
-        class="absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-300 bg-white shadow-sm"
+        class="absolute end-0 top-12 z-auto w-56 divide-y divide-gray-200 overflow-hidden rounded border border-gray-200 bg-white shadow-sm"
       >
         <div>
           <p class="block px-3 py-2 text-sm text-gray-500">General</p>
@@ -74,7 +74,7 @@
 
           <button
             type="button"
-            class="block w-full px-3 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right"
+            class="block w-full px-3 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 ltr:text-left rtl:text-right"
           >
             Delete
           </button>
diff --git a/public/examples/application/empty-states/1-dark.html b/public/examples/application/empty-states/1-dark.html
index 023628bf..2a256532 100644
--- a/public/examples/application/empty-states/1-dark.html
+++ b/public/examples/application/empty-states/1-dark.html
@@ -24,7 +24,7 @@
         />
       </svg>
 
-      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">No items found</h2>
+      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-gray-50">No items found</h2>
 
       <p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
         Get started by creating your first item. It only takes a few seconds.
@@ -32,14 +32,14 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">No items found
 
       <button
         type="button"
-        class="mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+        class="mt-6 block w-full rounded-lg bg-indigo-600 dark:bg-indigo-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700 dark:hover:bg-indigo-400"
       >
         Create Item
       </button>
 
       <p class="mt-6 text-sm text-gray-700 dark:text-gray-200">
-        <a href="#" class="underline hover:text-gray-900 dark:hover:text-white">Learn how</a> or
-        <a href="#" class="underline hover:text-gray-900 dark:hover:text-white">view examples</a>
+        <a href="#" class="underline hover:text-gray-900 dark:hover:text-gray-50">Learn how</a> or
+        <a href="#" class="underline hover:text-gray-900 dark:hover:text-gray-50">view examples</a>
       </p>
     </div>
   </body>
diff --git a/public/examples/application/empty-states/2-dark.html b/public/examples/application/empty-states/2-dark.html
index a4fca326..cd60d920 100644
--- a/public/examples/application/empty-states/2-dark.html
+++ b/public/examples/application/empty-states/2-dark.html
@@ -24,7 +24,7 @@
         />
       </svg>
 
-      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">No data to display</h2>
+      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-gray-50">No data to display</h2>
 
       <p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
         Get started by creating your first item. It only takes a few seconds.
@@ -32,13 +32,13 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">No data to dis
 
       <div class="mt-6 space-y-3">
         <button
-          class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+          class="block w-full rounded-lg bg-indigo-600 dark:bg-indigo-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700 dark:hover:bg-indigo-400"
         >
           Import Data
         </button>
 
         <button
-          class="block w-full rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800/50"
+          class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 px-6 py-3 text-sm font-medium text-gray-900 dark:text-gray-50 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
         >
           Create New
         </button>
diff --git a/public/examples/application/empty-states/3-dark.html b/public/examples/application/empty-states/3-dark.html
index 6f900323..36b21253 100644
--- a/public/examples/application/empty-states/3-dark.html
+++ b/public/examples/application/empty-states/3-dark.html
@@ -24,7 +24,7 @@
         />
       </svg>
 
-      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Upload your files</h2>
+      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-gray-50">Upload your files</h2>
 
       <p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
         Drag and drop files here or click to browse your computer.
@@ -32,11 +32,9 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Upload your fi
 
       <label
         for="files"
-        class="mt-6 block rounded-lg border-2 border-dashed border-gray-300 p-6 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800/50"
+        class="mt-6 block rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-6 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
       >
-        <span class="text-sm font-semibold text-indigo-600 dark:text-indigo-500">
-          Choose files
-        </span>
+        <span class="text-sm font-semibold text-indigo-600 dark:text-indigo-300"> Choose files </span>
 
         <input type="file" id="files" class="sr-only" />
       </label>
diff --git a/public/examples/application/empty-states/4-dark.html b/public/examples/application/empty-states/4-dark.html
index 965c0c08..0fbfe802 100644
--- a/public/examples/application/empty-states/4-dark.html
+++ b/public/examples/application/empty-states/4-dark.html
@@ -24,7 +24,7 @@
         />
       </svg>
 
-      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Get started in seconds</h2>
+      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-gray-50">Get started in seconds</h2>
 
       <p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
         Complete these quick steps to set up your workspace.
@@ -33,7 +33,7 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Get started in
       <ol class="mt-6 space-y-2 text-left">
         <li class="flex items-center gap-2">
           <span
-            class="grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white"
+            class="grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 dark:bg-indigo-500 text-sm font-medium text-white"
           >
             1
           </span>
@@ -43,7 +43,7 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Get started in
 
         <li class="flex items-center gap-2">
           <span
-            class="grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white"
+            class="grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 dark:bg-indigo-500 text-sm font-medium text-white"
           >
             2
           </span>
@@ -53,7 +53,7 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Get started in
 
         <li class="flex items-center gap-2">
           <span
-            class="grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 text-sm font-medium text-white"
+            class="grid size-6 shrink-0 place-content-center rounded-full bg-indigo-600 dark:bg-indigo-500 text-sm font-medium text-white"
           >
             3
           </span>
@@ -63,7 +63,7 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Get started in
       </ol>
 
       <button
-        class="mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+        class="mt-6 block w-full rounded-lg bg-indigo-600 dark:bg-indigo-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700 dark:hover:bg-indigo-400"
       >
         Create Project
       </button>
diff --git a/public/examples/application/empty-states/5-dark.html b/public/examples/application/empty-states/5-dark.html
index 6117d9c5..e27e96de 100644
--- a/public/examples/application/empty-states/5-dark.html
+++ b/public/examples/application/empty-states/5-dark.html
@@ -24,7 +24,7 @@
         />
       </svg>
 
-      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">No results found</h2>
+      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-gray-50">No results found</h2>
 
       <p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
         Try adjusting your search or filters to find what you're looking for.
@@ -34,21 +34,19 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">No results fou
         <input
           type="text"
           placeholder="Search again..."
-          class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+          class="w-full rounded-lg border-gray-300 dark:border-gray-600 focus:border-gray-900 dark:focus:border-gray-50 focus:outline-none dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900"
         />
 
         <button
-          class="block w-full rounded-lg border border-gray-300 px-6 py-3 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-white dark:hover:bg-gray-800"
+          class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 px-6 py-3 text-sm font-medium text-gray-900 dark:text-gray-50 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
         >
           Clear filters
         </button>
       </div>
 
       <p class="mt-6 text-sm text-gray-700 dark:text-gray-200">
-        <a href="#" class="underline transition-colors hover:text-gray-900 dark:hover:text-white"
-          >Contact support</a
-        >
-        if you need help
+        <a href="#" class="underline transition-colors hover:text-gray-900 dark:hover:text-gray-50">Contact support</a> if
+        you need help
       </p>
     </div>
   </body>
diff --git a/public/examples/application/empty-states/5.html b/public/examples/application/empty-states/5.html
index 7658172b..3179c83c 100644
--- a/public/examples/application/empty-states/5.html
+++ b/public/examples/application/empty-states/5.html
@@ -34,7 +34,7 @@ <h2 class="mt-6 text-2xl font-bold text-gray-900">No results found</h2>
         <input
           type="text"
           placeholder="Search again..."
-          class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
+          class="w-full rounded-lg border-gray-300 focus:border-gray-900 focus:outline-none"
         />
 
         <button
diff --git a/public/examples/application/file-uploaders/1-dark.html b/public/examples/application/file-uploaders/1-dark.html
index 8a6ed682..61f205b2 100644
--- a/public/examples/application/file-uploaders/1-dark.html
+++ b/public/examples/application/file-uploaders/1-dark.html
@@ -9,10 +9,10 @@
   <body class="mx-auto max-w-md p-6 dark:bg-gray-900">
     <label
       for="File"
-      class="block rounded border border-gray-300 bg-white p-4 text-gray-900 shadow-sm sm:p-6 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+      class="block rounded border border-gray-300 dark:border-gray-600 p-4 text-gray-900 dark:text-gray-50 shadow-sm sm:p-6"
     >
       <div class="flex items-center justify-center gap-4">
-        <span class="font-medium dark:text-white"> Upload your file(s) </span>
+        <span class="font-medium"> Upload your file(s) </span>
 
         <svg
           aria-hidden="true"
diff --git a/public/examples/application/file-uploaders/2-dark.html b/public/examples/application/file-uploaders/2-dark.html
index a5627b14..9a72a831 100644
--- a/public/examples/application/file-uploaders/2-dark.html
+++ b/public/examples/application/file-uploaders/2-dark.html
@@ -9,7 +9,7 @@
   <body class="mx-auto max-w-md p-6 dark:bg-gray-900">
     <label
       for="File"
-      class="flex flex-col items-center rounded border border-gray-300 bg-white p-4 text-gray-900 shadow-sm sm:p-6 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+      class="flex flex-col items-center rounded border border-gray-300 dark:border-gray-600 p-4 text-gray-900 dark:text-gray-50 shadow-sm sm:p-6"
     >
       <svg
         aria-hidden="true"
@@ -27,10 +27,10 @@
         />
       </svg>
 
-      <span class="mt-4 font-medium dark:text-white"> Upload your file(s) </span>
+      <span class="mt-4 font-medium"> Upload your file(s) </span>
 
       <span
-        class="mt-2 inline-block rounded border border-gray-200 bg-gray-50 px-3 py-1.5 text-center text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+        class="mt-2 inline-block rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-3 py-1.5 text-center text-xs font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-100 dark:hover:bg-gray-700"
       >
         Browse files
       </span>
diff --git a/public/examples/application/filters/1-dark.html b/public/examples/application/filters/1-dark.html
index 8c3d6901..8da5fe72 100644
--- a/public/examples/application/filters/1-dark.html
+++ b/public/examples/application/filters/1-dark.html
@@ -10,7 +10,7 @@
     <div class="flex gap-4 sm:gap-6">
       <details class="group relative">
         <summary
-          class="flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 dark:border-gray-600 dark:text-gray-200 dark:hover:border-gray-700 dark:hover:text-white [&::-webkit-details-marker]:hidden"
+          class="flex items-center gap-2 border-b border-gray-300 dark:border-gray-600 pb-1 text-gray-700 dark:text-gray-200 transition-colors hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:hover:text-gray-50 [&::-webkit-details-marker]:hidden"
         >
           <span class="text-sm font-medium"> Availability </span>
 
@@ -34,14 +34,14 @@
         </summary>
 
         <div
-          class="z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8 dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900"
+          class="z-auto w-64 divide-y divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
         >
           <div class="flex items-center justify-between px-3 py-2">
             <span class="text-sm text-gray-700 dark:text-gray-200"> 0 Selected </span>
 
             <button
               type="button"
-              class="text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
+              class="text-sm text-gray-700 dark:text-gray-200 underline transition-colors hover:text-gray-900 dark:hover:text-gray-50"
             >
               Reset
             </button>
@@ -54,7 +54,7 @@
               <label for="Option1" class="inline-flex items-center gap-3">
                 <input
                   type="checkbox"
-                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+                  class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
                   id="Option1"
                 />
 
@@ -64,7 +64,7 @@
               <label for="Option2" class="inline-flex items-center gap-3">
                 <input
                   type="checkbox"
-                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+                  class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
                   id="Option2"
                 />
 
@@ -74,7 +74,7 @@
               <label for="Option3" class="inline-flex items-center gap-3">
                 <input
                   type="checkbox"
-                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+                  class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
                   id="Option3"
                 />
 
@@ -87,7 +87,7 @@
 
       <details class="group relative">
         <summary
-          class="flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 dark:border-gray-600 dark:text-gray-200 dark:hover:border-gray-700 dark:hover:text-white [&::-webkit-details-marker]:hidden"
+          class="flex items-center gap-2 border-b border-gray-300 dark:border-gray-600 pb-1 text-gray-700 dark:text-gray-200 transition-colors hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:hover:text-gray-50 [&::-webkit-details-marker]:hidden"
         >
           <span class="text-sm font-medium"> Price </span>
 
@@ -111,14 +111,14 @@
         </summary>
 
         <div
-          class="z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8 dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900"
+          class="z-auto w-64 divide-y divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
         >
           <div class="flex items-center justify-between px-3 py-2">
             <span class="text-sm text-gray-700 dark:text-gray-200"> Max price is $600 </span>
 
             <button
               type="button"
-              class="text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
+              class="text-sm text-gray-700 dark:text-gray-200 underline transition-colors hover:text-gray-900 dark:hover:text-gray-50"
             >
               Reset
             </button>
@@ -132,7 +132,7 @@
                 type="number"
                 id="MinPrice"
                 value="0"
-                class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+                class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
               />
             </label>
 
@@ -143,7 +143,7 @@
                 type="number"
                 id="MaxPrice"
                 value="600"
-                class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+                class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
               />
             </label>
           </div>
diff --git a/public/examples/application/filters/1.html b/public/examples/application/filters/1.html
index b9916124..96f56e35 100644
--- a/public/examples/application/filters/1.html
+++ b/public/examples/application/filters/1.html
@@ -34,7 +34,7 @@
         </summary>
 
         <div
-          class="z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
+          class="z-auto w-64 divide-y divide-gray-200 rounded border border-gray-200 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
         >
           <div class="flex items-center justify-between px-3 py-2">
             <span class="text-sm text-gray-700"> 0 Selected </span>
@@ -111,7 +111,7 @@
         </summary>
 
         <div
-          class="z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
+          class="z-auto w-64 divide-y divide-gray-200 rounded border border-gray-200 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
         >
           <div class="flex items-center justify-between px-3 py-2">
             <span class="text-sm text-gray-700"> Max price is $600 </span>
diff --git a/public/examples/application/filters/2-dark.html b/public/examples/application/filters/2-dark.html
index 450cdf5c..e0c44b4c 100644
--- a/public/examples/application/filters/2-dark.html
+++ b/public/examples/application/filters/2-dark.html
@@ -8,11 +8,9 @@
   </head>
   <body class="mx-auto max-w-md p-6 dark:bg-gray-900">
     <div class="space-y-4">
-      <details
-        class="group relative overflow-hidden rounded border border-gray-300 shadow-sm dark:border-gray-600"
-      >
+      <details class="group relative overflow-hidden rounded border border-gray-200 dark:border-gray-700 shadow-sm">
         <summary
-          class="flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white [&::-webkit-details-marker]:hidden"
+          class="flex items-center justify-between gap-2 p-3 text-gray-700 dark:text-gray-200 transition-colors hover:text-gray-900 dark:hover:text-gray-50 [&::-webkit-details-marker]:hidden"
         >
           <span class="text-sm font-medium"> Availability </span>
 
@@ -35,15 +33,13 @@
           </span>
         </summary>
 
-        <div
-          class="divide-y divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900"
-        >
+        <div class="divide-y divide-gray-200 dark:divide-gray-700 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
           <div class="flex items-center justify-between px-3 py-2">
             <span class="text-sm text-gray-700 dark:text-gray-200"> 0 Selected </span>
 
             <button
               type="button"
-              class="text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
+              class="text-sm text-gray-700 dark:text-gray-200 underline transition-colors hover:text-gray-900 dark:hover:text-gray-50"
             >
               Reset
             </button>
@@ -56,7 +52,7 @@
               <label for="Option1" class="inline-flex items-center gap-3">
                 <input
                   type="checkbox"
-                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+                  class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
                   id="Option1"
                 />
 
@@ -66,7 +62,7 @@
               <label for="Option2" class="inline-flex items-center gap-3">
                 <input
                   type="checkbox"
-                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+                  class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
                   id="Option2"
                 />
 
@@ -76,7 +72,7 @@
               <label for="Option3" class="inline-flex items-center gap-3">
                 <input
                   type="checkbox"
-                  class="size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
+                  class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
                   id="Option3"
                 />
 
@@ -87,11 +83,9 @@
         </div>
       </details>
 
-      <details
-        class="group relative overflow-hidden rounded border border-gray-300 shadow-sm dark:border-gray-600"
-      >
+      <details class="group relative overflow-hidden rounded border border-gray-200 dark:border-gray-700 shadow-sm">
         <summary
-          class="flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white [&::-webkit-details-marker]:hidden"
+          class="flex items-center justify-between gap-2 p-3 text-gray-700 dark:text-gray-200 transition-colors hover:text-gray-900 dark:hover:text-gray-50 [&::-webkit-details-marker]:hidden"
         >
           <span class="text-sm font-medium"> Price </span>
 
@@ -114,15 +108,13 @@
           </span>
         </summary>
 
-        <div
-          class="divide-y divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-900"
-        >
+        <div class="divide-y divide-gray-200 dark:divide-gray-700 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
           <div class="flex items-center justify-between px-3 py-2">
             <span class="text-sm text-gray-700 dark:text-gray-200"> Max price is $600 </span>
 
             <button
               type="button"
-              class="text-sm text-gray-700 underline transition-colors hover:text-gray-900 dark:text-gray-200"
+              class="text-sm text-gray-700 dark:text-gray-200 underline transition-colors hover:text-gray-900 dark:hover:text-gray-50"
             >
               Reset
             </button>
@@ -136,7 +128,7 @@
                 type="number"
                 id="MinPrice"
                 value="0"
-                class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+                class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
               />
             </label>
 
@@ -147,7 +139,7 @@
                 type="number"
                 id="MaxPrice"
                 value="600"
-                class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+                class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
               />
             </label>
           </div>
diff --git a/public/examples/application/filters/2.html b/public/examples/application/filters/2.html
index bf6d2f76..38da1728 100644
--- a/public/examples/application/filters/2.html
+++ b/public/examples/application/filters/2.html
@@ -8,7 +8,7 @@
   </head>
   <body class="mx-auto max-w-md p-6">
     <div class="space-y-4">
-      <details class="group relative overflow-hidden rounded border border-gray-300 shadow-sm">
+      <details class="group relative overflow-hidden rounded border border-gray-200 shadow-sm">
         <summary
           class="flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 [&::-webkit-details-marker]:hidden"
         >
@@ -33,7 +33,7 @@
           </span>
         </summary>
 
-        <div class="divide-y divide-gray-300 border-t border-gray-300 bg-white">
+        <div class="divide-y divide-gray-200 border-t border-gray-200 bg-white">
           <div class="flex items-center justify-between px-3 py-2">
             <span class="text-sm text-gray-700"> 0 Selected </span>
 
@@ -83,7 +83,7 @@
         </div>
       </details>
 
-      <details class="group relative overflow-hidden rounded border border-gray-300 shadow-sm">
+      <details class="group relative overflow-hidden rounded border border-gray-200 shadow-sm">
         <summary
           class="flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 [&::-webkit-details-marker]:hidden"
         >
@@ -108,7 +108,7 @@
           </span>
         </summary>
 
-        <div class="divide-y divide-gray-300 border-t border-gray-300 bg-white">
+        <div class="divide-y divide-gray-200 border-t border-gray-200 bg-white">
           <div class="flex items-center justify-between px-3 py-2">
             <span class="text-sm text-gray-700"> Max price is $600 </span>
 
diff --git a/public/examples/application/inputs/1-dark.html b/public/examples/application/inputs/1-dark.html
index df3fa48d..cdd85141 100644
--- a/public/examples/application/inputs/1-dark.html
+++ b/public/examples/application/inputs/1-dark.html
@@ -13,7 +13,7 @@
       <input
         type="email"
         id="Email"
-        class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+        class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
       />
     </label>
   </body>
diff --git a/public/examples/application/inputs/2-dark.html b/public/examples/application/inputs/2-dark.html
index 8725cb43..62f05562 100644
--- a/public/examples/application/inputs/2-dark.html
+++ b/public/examples/application/inputs/2-dark.html
@@ -14,12 +14,10 @@
         <input
           type="email"
           id="Email"
-          class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+          class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 pe-8 shadow-sm sm:text-sm"
         />
 
-        <span
-          class="absolute inset-y-0 end-0 grid w-8 place-content-center text-gray-700 dark:text-gray-200"
-        >
+        <span class="absolute inset-y-0 end-0 grid w-8 place-content-center text-gray-700 dark:text-gray-200">
           <svg
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/public/examples/application/inputs/3-dark.html b/public/examples/application/inputs/3-dark.html
index b81a9dab..28a1aab4 100644
--- a/public/examples/application/inputs/3-dark.html
+++ b/public/examples/application/inputs/3-dark.html
@@ -14,14 +14,14 @@
         <input
           type="text"
           id="Search"
-          class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+          class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 pe-10 shadow-sm sm:text-sm"
         />
 
         <span class="absolute inset-y-0 right-2 grid w-8 place-content-center">
           <button
             type="button"
             aria-label="Submit"
-            class="rounded-full p-1.5 text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800"
+            class="rounded-full p-1.5 text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
           >
             <svg
               aria-hidden="true"
diff --git a/public/examples/application/inputs/4-dark.html b/public/examples/application/inputs/4-dark.html
index 033c0fab..2a8ff99f 100644
--- a/public/examples/application/inputs/4-dark.html
+++ b/public/examples/application/inputs/4-dark.html
@@ -12,11 +12,11 @@
         type="email"
         id="Email"
         placeholder=""
-        class="peer mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+        class="peer mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
       />
 
       <span
-        class="absolute inset-y-0 start-3 -translate-y-5 bg-white px-0.5 text-sm font-medium text-gray-700 transition-transform peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-5 dark:bg-gray-900 dark:text-white"
+        class="absolute inset-y-0 start-3 -translate-y-5 bg-white dark:bg-gray-900 px-0.5 text-sm font-medium text-gray-700 dark:text-gray-200 transition-transform peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-5"
       >
         Email
       </span>
diff --git a/public/examples/application/loaders/4-dark.html b/public/examples/application/loaders/4-dark.html
index af645098..f037c532 100644
--- a/public/examples/application/loaders/4-dark.html
+++ b/public/examples/application/loaders/4-dark.html
@@ -9,7 +9,7 @@
   <body class="flex min-h-screen items-center justify-center p-6 dark:bg-gray-900">
     <div class="w-full max-w-sm" role="status">
       <div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
-        <div class="h-full w-[80%] animate-pulse bg-indigo-600 dark:bg-indigo-300"></div>
+        <div class="h-full w-[80%] animate-pulse bg-indigo-600 dark:bg-indigo-500"></div>
       </div>
 
       <p class="mt-4 text-center font-medium text-gray-700 dark:text-gray-200">Loading...</p>
diff --git a/public/examples/application/loaders/5-dark.html b/public/examples/application/loaders/5-dark.html
index 1b71202f..261506bf 100644
--- a/public/examples/application/loaders/5-dark.html
+++ b/public/examples/application/loaders/5-dark.html
@@ -8,16 +8,13 @@
   </head>
   <body class="flex min-h-screen items-center justify-center p-6 dark:bg-gray-900">
     <div class="flex gap-2" role="status" aria-label="Loading">
+      <span class="size-3 animate-pulse rounded-full bg-indigo-600 dark:bg-indigo-500" aria-hidden="true"></span>
       <span
-        class="size-3 animate-pulse rounded-full bg-indigo-600 dark:bg-indigo-300"
+        class="size-3 animate-pulse rounded-full bg-indigo-600 dark:bg-indigo-500 [animation-delay:0.2s]"
         aria-hidden="true"
       ></span>
       <span
-        class="size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300"
-        aria-hidden="true"
-      ></span>
-      <span
-        class="size-3 animate-pulse rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300"
+        class="size-3 animate-pulse rounded-full bg-indigo-600 dark:bg-indigo-500 [animation-delay:0.4s]"
         aria-hidden="true"
       ></span>
     </div>
diff --git a/public/examples/application/loaders/6-dark.html b/public/examples/application/loaders/6-dark.html
index 032e583c..893fe33d 100644
--- a/public/examples/application/loaders/6-dark.html
+++ b/public/examples/application/loaders/6-dark.html
@@ -8,16 +8,13 @@
   </head>
   <body class="flex min-h-screen items-center justify-center p-6 dark:bg-gray-900">
     <div class="flex gap-2" role="status" aria-label="Loading">
+      <span class="size-3 animate-ping rounded-full bg-indigo-600 dark:bg-indigo-500" aria-hidden="true"></span>
       <span
-        class="size-3 animate-ping rounded-full bg-indigo-600 dark:bg-indigo-300"
+        class="size-3 animate-ping rounded-full bg-indigo-600 dark:bg-indigo-500 [animation-delay:0.2s]"
         aria-hidden="true"
       ></span>
       <span
-        class="size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300"
-        aria-hidden="true"
-      ></span>
-      <span
-        class="size-3 animate-ping rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300"
+        class="size-3 animate-ping rounded-full bg-indigo-600 dark:bg-indigo-500 [animation-delay:0.4s]"
         aria-hidden="true"
       ></span>
     </div>
diff --git a/public/examples/application/loaders/7-dark.html b/public/examples/application/loaders/7-dark.html
index 54246507..52333a2b 100644
--- a/public/examples/application/loaders/7-dark.html
+++ b/public/examples/application/loaders/7-dark.html
@@ -8,16 +8,13 @@
   </head>
   <body class="flex min-h-screen items-center justify-center p-6 dark:bg-gray-900">
     <div class="flex gap-2" role="status" aria-label="Loading">
+      <span class="size-3 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-500" aria-hidden="true"></span>
       <span
-        class="size-3 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-300"
+        class="size-3 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-500 [animation-delay:0.2s]"
         aria-hidden="true"
       ></span>
       <span
-        class="size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.2s] dark:bg-indigo-300"
-        aria-hidden="true"
-      ></span>
-      <span
-        class="size-3 animate-bounce rounded-full bg-indigo-600 [animation-delay:0.4s] dark:bg-indigo-300"
+        class="size-3 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-500 [animation-delay:0.4s]"
         aria-hidden="true"
       ></span>
     </div>
diff --git a/public/examples/application/modals/1-dark.html b/public/examples/application/modals/1-dark.html
index f86da323..6cdb846d 100644
--- a/public/examples/application/modals/1-dark.html
+++ b/public/examples/application/modals/1-dark.html
@@ -9,7 +9,7 @@
   <body class="p-6 dark:bg-gray-900">
     <button
       data-modal-open
-      class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+      class="rounded border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-50"
     >
       Open
     </button>
@@ -18,12 +18,10 @@
       closedby="any"
       aria-labelledby="modalTitle"
       aria-describedby="modalDescription"
-      class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
+      class="m-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg backdrop:bg-black/50"
     >
       <div class="flex flex-col gap-4">
-        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
-          Modal Title
-        </h2>
+        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-gray-50 sm:text-2xl">Modal Title</h2>
 
         <p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
diff --git a/public/examples/application/modals/2-dark.html b/public/examples/application/modals/2-dark.html
index 4443e108..83a45d2e 100644
--- a/public/examples/application/modals/2-dark.html
+++ b/public/examples/application/modals/2-dark.html
@@ -9,7 +9,7 @@
   <body class="p-6 dark:bg-gray-900">
     <button
       data-modal-open
-      class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+      class="rounded border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-50"
     >
       Open
     </button>
@@ -18,18 +18,16 @@
       closedby="any"
       aria-labelledby="modalTitle"
       aria-describedby="modalDescription"
-      class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
+      class="m-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg backdrop:bg-black/50"
     >
       <div class="flex flex-col gap-4">
         <div class="flex items-start justify-between">
-          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
-            Modal Title
-          </h2>
+          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-gray-50 sm:text-2xl">Modal Title</h2>
 
           <button
             type="button"
             data-modal-close
-            class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="-me-4 -mt-4 rounded-full p-2 text-gray-600 dark:text-gray-300 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
             aria-label="Close"
           >
             <svg
diff --git a/public/examples/application/modals/3-dark.html b/public/examples/application/modals/3-dark.html
index c62c1936..45280c7c 100644
--- a/public/examples/application/modals/3-dark.html
+++ b/public/examples/application/modals/3-dark.html
@@ -9,7 +9,7 @@
   <body class="p-6 dark:bg-gray-900">
     <button
       data-modal-open
-      class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+      class="rounded border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-50"
     >
       Open
     </button>
@@ -18,12 +18,10 @@
       closedby="any"
       aria-labelledby="modalTitle"
       aria-describedby="modalDescription"
-      class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
+      class="m-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg backdrop:bg-black/50"
     >
       <div class="flex flex-col gap-4">
-        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
-          Modal Title
-        </h2>
+        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-gray-50 sm:text-2xl">Modal Title</h2>
 
         <p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
@@ -34,7 +32,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <button
             type="button"
             data-modal-close
-            class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="rounded bg-gray-100 dark:bg-gray-900 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
           >
             Cancel
           </button>
@@ -42,7 +40,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <button
             type="button"
             data-modal-close
-            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-200 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="rounded bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 dark:hover:bg-indigo-400 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
           >
             Done
           </button>
diff --git a/public/examples/application/modals/3.html b/public/examples/application/modals/3.html
index 48b1c522..51d0648c 100644
--- a/public/examples/application/modals/3.html
+++ b/public/examples/application/modals/3.html
@@ -40,7 +40,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Ti
           <button
             type="button"
             data-modal-close
-            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
+            class="rounded bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
           >
             Done
           </button>
diff --git a/public/examples/application/modals/4-dark.html b/public/examples/application/modals/4-dark.html
index c102bed2..092ff408 100644
--- a/public/examples/application/modals/4-dark.html
+++ b/public/examples/application/modals/4-dark.html
@@ -9,7 +9,7 @@
   <body class="p-6 dark:bg-gray-900">
     <button
       data-modal-open
-      class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+      class="rounded border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-50"
     >
       Open
     </button>
@@ -18,18 +18,16 @@
       closedby="any"
       aria-labelledby="modalTitle"
       aria-describedby="modalDescription"
-      class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
+      class="m-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg backdrop:bg-black/50"
     >
       <div class="flex flex-col gap-4">
         <div class="flex items-start justify-between">
-          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
-            Modal Title
-          </h2>
+          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-gray-50 sm:text-2xl">Modal Title</h2>
 
           <button
             type="button"
             data-modal-close
-            class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="-me-4 -mt-4 rounded-full p-2 text-gray-600 dark:text-gray-300 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
             aria-label="Close"
           >
             <svg
@@ -59,7 +57,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <button
             type="button"
             data-modal-close
-            class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="rounded bg-gray-100 dark:bg-gray-900 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
           >
             Cancel
           </button>
@@ -67,7 +65,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <button
             type="button"
             data-modal-close
-            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-200 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="rounded bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 dark:hover:bg-indigo-400 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
           >
             Done
           </button>
diff --git a/public/examples/application/modals/4.html b/public/examples/application/modals/4.html
index 28695ca8..6aabfdee 100644
--- a/public/examples/application/modals/4.html
+++ b/public/examples/application/modals/4.html
@@ -65,7 +65,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Ti
           <button
             type="button"
             data-modal-close
-            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
+            class="rounded bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
           >
             Done
           </button>
diff --git a/public/examples/application/modals/5-dark.html b/public/examples/application/modals/5-dark.html
index 6c7341f7..1f1c43c7 100644
--- a/public/examples/application/modals/5-dark.html
+++ b/public/examples/application/modals/5-dark.html
@@ -9,7 +9,7 @@
   <body class="p-6 dark:bg-gray-900">
     <button
       data-modal-open
-      class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+      class="rounded border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-50"
     >
       Open
     </button>
@@ -18,12 +18,10 @@
       closedby="any"
       aria-labelledby="modalTitle"
       aria-describedby="modalDescription"
-      class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
+      class="m-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg backdrop:bg-black/50"
     >
       <div class="flex flex-col gap-4">
-        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
-          Modal Title
-        </h2>
+        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-gray-50 sm:text-2xl">Modal Title</h2>
 
         <p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
@@ -38,7 +36,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <input
             type="text"
             id="Confirm"
-            class="mt-0.5 w-full rounded border-gray-300 bg-white text-gray-900 shadow-sm focus:ring-2 focus:ring-indigo-600 sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:focus:ring-indigo-300"
+            class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 shadow-sm focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 dark:ring-offset-gray-800 sm:text-sm"
           />
         </label>
 
@@ -46,7 +44,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <button
             type="button"
             data-modal-close
-            class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="rounded bg-gray-100 dark:bg-gray-900 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
           >
             Cancel
           </button>
@@ -54,7 +52,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <button
             type="button"
             data-modal-close
-            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-200 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="rounded bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 dark:hover:bg-indigo-400 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
           >
             Done
           </button>
diff --git a/public/examples/application/modals/5.html b/public/examples/application/modals/5.html
index d1c77ed6..69b2d4a3 100644
--- a/public/examples/application/modals/5.html
+++ b/public/examples/application/modals/5.html
@@ -52,7 +52,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Ti
           <button
             type="button"
             data-modal-close
-            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
+            class="rounded bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
           >
             Done
           </button>
diff --git a/public/examples/application/modals/6-dark.html b/public/examples/application/modals/6-dark.html
index 7ad98ef3..0bb40810 100644
--- a/public/examples/application/modals/6-dark.html
+++ b/public/examples/application/modals/6-dark.html
@@ -9,7 +9,7 @@
   <body class="p-6 dark:bg-gray-900">
     <button
       data-modal-open
-      class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+      class="rounded border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-50"
     >
       Open
     </button>
@@ -18,18 +18,16 @@
       closedby="any"
       aria-labelledby="modalTitle"
       aria-describedby="modalDescription"
-      class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
+      class="m-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg backdrop:bg-black/50"
     >
       <div class="flex flex-col gap-4">
         <div class="flex items-start justify-between">
-          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
-            Modal Title
-          </h2>
+          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-gray-50 sm:text-2xl">Modal Title</h2>
 
           <button
             type="button"
             data-modal-close
-            class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="-me-4 -mt-4 rounded-full p-2 text-gray-600 dark:text-gray-300 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-50 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
             aria-label="Close"
           >
             <svg
@@ -63,7 +61,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <input
             type="text"
             id="Confirm"
-            class="mt-0.5 w-full rounded border-gray-300 bg-white text-gray-900 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+            class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 shadow-sm focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 dark:ring-offset-gray-800 sm:text-sm"
           />
         </label>
 
@@ -71,7 +69,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <button
             type="button"
             data-modal-close
-            class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="rounded bg-gray-100 dark:bg-gray-900 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
           >
             Cancel
           </button>
@@ -79,7 +77,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text
           <button
             type="button"
             data-modal-close
-            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-200 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
+            class="rounded bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 dark:hover:bg-indigo-400 focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 dark:focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-800 focus-visible:outline-none"
           >
             Done
           </button>
diff --git a/public/examples/application/modals/6.html b/public/examples/application/modals/6.html
index f1da658a..0a141cac 100644
--- a/public/examples/application/modals/6.html
+++ b/public/examples/application/modals/6.html
@@ -61,7 +61,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Ti
           <input
             type="text"
             id="Confirm"
-            class="mt-0.5 w-full rounded border-gray-300 bg-white text-gray-900 shadow-sm sm:text-sm"
+            class="mt-0.5 w-full rounded border-gray-300 bg-white text-gray-900 shadow-sm focus:ring-2 focus:ring-indigo-600 sm:text-sm"
           />
         </label>
 
@@ -77,7 +77,7 @@ <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Ti
           <button
             type="button"
             data-modal-close
-            class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
+            class="rounded bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
           >
             Done
           </button>
diff --git a/public/examples/application/pagination/1-dark.html b/public/examples/application/pagination/1-dark.html
index a923129c..642f84d6 100644
--- a/public/examples/application/pagination/1-dark.html
+++ b/public/examples/application/pagination/1-dark.html
@@ -8,11 +8,11 @@
   </head>
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <nav aria-label="Pagination">
-      <ul class="flex justify-center gap-1 text-gray-900 dark:text-white">
+      <ul class="flex justify-center gap-1 text-gray-900 dark:text-gray-50">
         <li>
           <a
             href="#"
-            class="grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="grid size-8 place-content-center rounded border border-gray-200 dark:border-gray-700 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 rtl:rotate-180"
             aria-label="Previous page"
           >
             <svg
@@ -34,14 +34,14 @@
         <li>
           <a
             href="#"
-            class="block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="block size-8 rounded border border-gray-200 dark:border-gray-700 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
           >
             1
           </a>
         </li>
 
         <li
-          class="block size-8 rounded border border-indigo-600 bg-indigo-600 text-center text-sm/8 font-medium text-white"
+          class="block size-8 rounded border border-indigo-600 dark:border-indigo-500 bg-indigo-600 dark:bg-indigo-500 text-center text-sm/8 font-medium text-white"
           aria-current="page"
         >
           2
@@ -50,7 +50,7 @@
         <li>
           <a
             href="#"
-            class="block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="block size-8 rounded border border-gray-200 dark:border-gray-700 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
           >
             3
           </a>
@@ -59,7 +59,7 @@
         <li>
           <a
             href="#"
-            class="block size-8 rounded border border-gray-200 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="block size-8 rounded border border-gray-200 dark:border-gray-700 text-center text-sm/8 font-medium transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
           >
             4
           </a>
@@ -68,7 +68,7 @@
         <li>
           <a
             href="#"
-            class="grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="grid size-8 place-content-center rounded border border-gray-200 dark:border-gray-700 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 rtl:rotate-180"
             aria-label="Next page"
           >
             <svg
diff --git a/public/examples/application/pagination/2-dark.html b/public/examples/application/pagination/2-dark.html
index 950df26e..f8318159 100644
--- a/public/examples/application/pagination/2-dark.html
+++ b/public/examples/application/pagination/2-dark.html
@@ -8,11 +8,11 @@
   </head>
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <nav aria-label="Pagination">
-      <ul class="flex justify-center gap-1 text-gray-900 dark:text-white">
+      <ul class="flex justify-center gap-1 text-gray-900 dark:text-gray-50">
         <li>
           <a
             href="#"
-            class="grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="grid size-8 place-content-center rounded border border-gray-200 dark:border-gray-700 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 rtl:rotate-180"
             aria-label="Previous page"
           >
             <svg
@@ -39,7 +39,7 @@
               type="number"
               id="Page"
               value="2"
-              class="h-8 w-16 rounded border-gray-300 sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
+              class="h-8 w-16 rounded border-gray-300 dark:border-gray-600 sm:text-sm dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900"
             />
           </label>
         </li>
@@ -47,7 +47,7 @@
         <li>
           <a
             href="#"
-            class="grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="grid size-8 place-content-center rounded border border-gray-200 dark:border-gray-700 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 rtl:rotate-180"
             aria-label="Next page"
           >
             <svg
diff --git a/public/examples/application/pagination/3-dark.html b/public/examples/application/pagination/3-dark.html
index 411e17f2..f80a3540 100644
--- a/public/examples/application/pagination/3-dark.html
+++ b/public/examples/application/pagination/3-dark.html
@@ -8,11 +8,11 @@
   </head>
   <body class="flex justify-center p-6 dark:bg-gray-900">
     <nav aria-label="Pagination">
-      <ul class="flex justify-center gap-3 text-gray-900 dark:text-white">
+      <ul class="flex justify-center gap-3 text-gray-900 dark:text-gray-50">
         <li>
           <a
             href="#"
-            class="grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="grid size-8 place-content-center rounded border border-gray-200 dark:border-gray-700 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 rtl:rotate-180"
             aria-label="Previous page"
           >
             <svg
@@ -36,7 +36,7 @@
         <li>
           <a
             href="#"
-            class="grid size-8 place-content-center rounded border border-gray-200 transition-colors hover:bg-gray-50 rtl:rotate-180 dark:border-gray-700 dark:hover:bg-gray-800"
+            class="grid size-8 place-content-center rounded border border-gray-200 dark:border-gray-700 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800 rtl:rotate-180"
             aria-label="Next page"
           >
             <svg
diff --git a/scripts/generate-dark-variants.js b/scripts/generate-dark-variants.js
index a6bf53bc..b1c3be21 100644
--- a/scripts/generate-dark-variants.js
+++ b/scripts/generate-dark-variants.js
@@ -14,6 +14,32 @@ const examplesRootPath = path.join(repositoryRootPath, 'public/examples')
 
 const componentCategories = ['application', 'marketing', 'neobrutalism', 'templates']
 
+// Standalone dark files aren't embedded in ComponentPreview.astro's iframe (which supplies its
+// own bg-gray-900) when opened directly, so <body> needs an explicit dark background — see #753.
+// <body> never carries a bg-* class in light mode (nothing for the shade-map engine to invert),
+// so this is a fixed convention applied here rather than a rule in the color-transform engine.
+const bodyDarkBackgroundClass = 'dark:bg-gray-900'
+
+function ensureBodyDarkBackground(htmlContent) {
+  return htmlContent.replace(/<body([^>]*)>/, (fullMatch, attributesString) => {
+    const classAttributeMatch = attributesString.match(/class="([^"]*)"/)
+
+    if (!classAttributeMatch) {
+      return `<body class="${bodyDarkBackgroundClass}"${attributesString}>`
+    }
+
+    const [classAttribute, classValue] = classAttributeMatch
+
+    if (classValue.includes('dark:bg-')) {
+      return fullMatch
+    }
+
+    const updatedClassAttribute = `class="${classValue} ${bodyDarkBackgroundClass}"`
+
+    return `<body${attributesString.replace(classAttribute, updatedClassAttribute)}>`
+  })
+}
+
 const cliCategoryFilter = process.argv
   .find((argValue) => argValue.startsWith('--category='))
   ?.split('=')[1]
@@ -127,7 +153,9 @@ function generateDarkVariants() {
 
   for (const missingVariant of missingDarkVariants) {
     const lightHtmlContent = fs.readFileSync(missingVariant.lightFilePath, 'utf8')
-    const darkHtmlContent = transformHtmlString(lightHtmlContent, DEFAULT_CONFIG)
+    const darkHtmlContent = ensureBodyDarkBackground(
+      transformHtmlString(lightHtmlContent, DEFAULT_CONFIG),
+    )
 
     fs.writeFileSync(missingVariant.darkFilePath, darkHtmlContent, 'utf8')
 
diff --git a/src/components/ComponentCard.astro b/src/components/ComponentCard.astro
index a1e21582..7dc7637c 100644
--- a/src/components/ComponentCard.astro
+++ b/src/components/ComponentCard.astro
@@ -15,9 +15,9 @@ interface Props {
 
 const { component } = Astro.props
 
-const { category, components, slug, title, updated } = component
+const { category, components, dark: darkModeSupported, slug, title, updated } = component
 
-const componentCount = components.length + components.filter(({ dark }) => !!dark).length
+const componentCount = components.length + (darkModeSupported ? components.length : 0)
 
 const recentUpdateThresholdDate = new Date()
 
diff --git a/src/components/DarkModeSidePanel.astro b/src/components/DarkModeSidePanel.astro
index edf994df..0c738276 100644
--- a/src/components/DarkModeSidePanel.astro
+++ b/src/components/DarkModeSidePanel.astro
@@ -83,6 +83,10 @@ import { ChevronDown, Info, Plus } from '@lucide/astro'
       </summary>
 
       <div class="border-t border-gray-200 p-4">
+        <p class="mb-2 text-xs text-gray-600">
+          Pre-loaded from HyperUI's house style — edit or remove as needed.
+        </p>
+
         <ul data-rules class="space-y-2"></ul>
       </div>
     </details>
diff --git a/src/components/SearchWrapper.astro b/src/components/SearchWrapper.astro
index bd336733..4bf59cf0 100644
--- a/src/components/SearchWrapper.astro
+++ b/src/components/SearchWrapper.astro
@@ -26,8 +26,8 @@ const allCollections = [...application, ...marketing, ...neobrutalism, ...templa
   .sort((a, b) => a.title.localeCompare(b.title))
 
 const collections: Result[] = allCollections.map(
-  ({ category, components, description, slug, terms, title }) => {
-    const componentCount = components.length + components.filter(({ dark }) => !!dark).length
+  ({ category, components, dark: darkModeSupported, description, slug, terms, title }) => {
+    const componentCount = components.length + (darkModeSupported ? components.length : 0)
 
     return {
       category,
diff --git a/src/content.config.ts b/src/content.config.ts
index 076173c3..09b72f1f 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -76,20 +76,13 @@ const collection = z.object({
   title: z.string(),
   wrapper: z.string().default('h-[600px]'),
   pattern: z.url().optional(),
-  dark: z.boolean().default(true),
+  dark: z.boolean().default(false),
   components: z.array(
     z.object({
       contributors: z.array(z.string()).default(['markmead']),
       description: z.string().optional(),
       title: z.string(),
-      dark: z
-        .union([
-          z.boolean(),
-          z.object({
-            contributors: z.array(z.string()).default(['markmead']),
-          }),
-        ])
-        .optional(),
+      darkContributors: z.array(z.string()).optional(),
       plugins: z.array(z.string()).optional(),
     }),
   ),
diff --git a/src/content/collection/application/badges.mdx b/src/content/collection/application/badges.mdx
index 0cb406ff..eb7cdb4d 100644
--- a/src/content/collection/application/badges.mdx
+++ b/src/content/collection/application/badges.mdx
@@ -4,25 +4,21 @@ description: Responsive badge and tag components with base badges, icon badges,
 category: application
 slug: badges
 wrapper: h-[200px]
+dark: true
 terms:
   - alert
   - status
 components:
   - title: Base
     description: Simple pill-shaped badges with solid and outlined variants
-    dark: true
   - title: Base with icon
     description: Badges with icons positioned on the left side
-    dark: true
   - title: Base with dismiss
     description: Removable badges with close button for tags and filters
-    dark: true
   - title: Icon only
     description: Compact icon-only badges without text labels
-    dark: true
   - title: Themed with icon
     description: Status badges with semantic colors for success, warning, and error states
-    dark: true
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/breadcrumbs.mdx b/src/content/collection/application/breadcrumbs.mdx
index e9942592..c5d7be20 100644
--- a/src/content/collection/application/breadcrumbs.mdx
+++ b/src/content/collection/application/breadcrumbs.mdx
@@ -4,15 +4,16 @@ description: Responsive breadcrumb navigation components for tracking location w
 category: application
 slug: breadcrumbs
 wrapper: h-[200px]
+dark: true
 terms:
   - link
   - navigation
 components:
-  - { title: 'Base', dark: true }
-  - { title: 'Base with home icon', dark: true }
-  - { title: 'Slash divider', dark: true, contributors: ['mohdahsanrazakhan'] }
-  - { title: 'Slash divider with home icon', dark: true, contributors: ['mohdahsanrazakhan'] }
-  - { title: 'Grouped with chevron divider', dark: true }
+  - { title: 'Base' }
+  - { title: 'Base with home icon' }
+  - { title: 'Slash divider', contributors: ['mohdahsanrazakhan'] }
+  - { title: 'Slash divider with home icon', contributors: ['mohdahsanrazakhan'] }
+  - { title: 'Grouped with chevron divider' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/button-groups.mdx b/src/content/collection/application/button-groups.mdx
index 9c6bc0de..01e27d81 100644
--- a/src/content/collection/application/button-groups.mdx
+++ b/src/content/collection/application/button-groups.mdx
@@ -4,15 +4,16 @@ description: Responsive button group components for web applications, dashboards
 category: application
 slug: button-groups
 wrapper: h-[200px]
+dark: true
 terms:
   - action
   - group
 components:
-  - { title: 'Base', dark: true }
-  - { title: 'Icons', dark: true }
-  - { title: 'Main and secondary', dark: true }
-  - { title: 'Layouts', dark: true }
-  - { title: 'Layouts without space', dark: true }
+  - { title: 'Base' }
+  - { title: 'Icons' }
+  - { title: 'Main and secondary' }
+  - { title: 'Layouts' }
+  - { title: 'Layouts without space' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/checkboxes.mdx b/src/content/collection/application/checkboxes.mdx
index d79da799..4926faab 100644
--- a/src/content/collection/application/checkboxes.mdx
+++ b/src/content/collection/application/checkboxes.mdx
@@ -4,14 +4,15 @@ description: Checkbox input components with styled checkboxes, labels, descripti
 category: application
 slug: checkboxes
 wrapper: h-[400px]
+dark: true
 terms:
   - filter
   - form
   - input
 components:
-  - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] }
-  - { title: 'Described', dark: true, plugins: ['@tailwindcss/forms'] }
-  - { title: 'Described with divide', dark: true, plugins: ['@tailwindcss/forms'] }
+  - { title: 'Base', plugins: ['@tailwindcss/forms'] }
+  - { title: 'Described', plugins: ['@tailwindcss/forms'] }
+  - { title: 'Described with divide', plugins: ['@tailwindcss/forms'] }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/details-list.mdx b/src/content/collection/application/details-list.mdx
index 0392b2aa..51b8a8f3 100644
--- a/src/content/collection/application/details-list.mdx
+++ b/src/content/collection/application/details-list.mdx
@@ -3,13 +3,14 @@ title: Details Lists
 description: Responsive details list components for displaying structured data with striped rows, borders, and dark mode support for web applications and dashboards.
 category: application
 slug: details-list
+dark: true
 terms:
   - data
 components:
-  - { title: 'Base', dark: true }
-  - { title: 'Striped', dark: true }
-  - { title: 'Bordered', dark: true }
-  - { title: 'Striped and bordered', dark: true }
+  - { title: 'Base' }
+  - { title: 'Striped' }
+  - { title: 'Bordered' }
+  - { title: 'Striped and bordered' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/dividers.mdx b/src/content/collection/application/dividers.mdx
index b1167511..9c6a0de5 100644
--- a/src/content/collection/application/dividers.mdx
+++ b/src/content/collection/application/dividers.mdx
@@ -4,16 +4,17 @@ description: Responsive layout divider components with basic, gradient, and alig
 category: application
 slug: dividers
 wrapper: h-[200px]
+dark: true
 terms:
   - layout
   - separator
 components:
-  - { title: 'Base', dark: true }
-  - { title: 'Gradient', dark: true }
-  - { title: 'Left align', dark: true }
-  - { title: 'Left align gradient', dark: true }
-  - { title: 'Right align', dark: true }
-  - { title: 'Right align gradient', dark: true }
+  - { title: 'Base' }
+  - { title: 'Gradient' }
+  - { title: 'Left align' }
+  - { title: 'Left align gradient' }
+  - { title: 'Right align' }
+  - { title: 'Right align gradient' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/dropdown.mdx b/src/content/collection/application/dropdown.mdx
index 0ad9d3c4..aca0d39a 100644
--- a/src/content/collection/application/dropdown.mdx
+++ b/src/content/collection/application/dropdown.mdx
@@ -4,13 +4,14 @@ description: Responsive dropdown menu components for navigation, filters, settin
 category: application
 slug: dropdown
 pattern: https://js.hyperui.dev/patterns/dropdown/
+dark: true
 terms:
   - menu
   - navigation
 components:
-  - { title: 'Base', dark: true }
-  - { title: 'Divided', dark: true }
-  - { title: 'Grouped', dark: true }
+  - { title: 'Base' }
+  - { title: 'Divided' }
+  - { title: 'Grouped' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/empty-states.mdx b/src/content/collection/application/empty-states.mdx
index dfd85ae2..18c66357 100644
--- a/src/content/collection/application/empty-states.mdx
+++ b/src/content/collection/application/empty-states.mdx
@@ -3,15 +3,16 @@ title: Empty States
 description: Empty state components for Tailwind CSS. Task-oriented UI patterns for workspaces and dashboards with clear primary actions, helping users create, import, or populate content in their applications.
 category: application
 slug: empty-states
+dark: true
 terms:
   - placeholder
   - cta
 components:
-  - { title: 'Create first item', dark: true }
-  - { title: 'Import or create', dark: true }
-  - { title: 'Upload data', dark: true }
-  - { title: 'Get started', dark: true }
-  - { title: 'No results found', dark: true }
+  - { title: 'Create first item' }
+  - { title: 'Import or create' }
+  - { title: 'Upload data' }
+  - { title: 'Get started' }
+  - { title: 'No results found' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/file-uploaders.mdx b/src/content/collection/application/file-uploaders.mdx
index ab8571ef..ecd4dbb0 100644
--- a/src/content/collection/application/file-uploaders.mdx
+++ b/src/content/collection/application/file-uploaders.mdx
@@ -3,12 +3,13 @@ title: File Uploaders
 description: File uploader components with drag-and-drop, previews, and progress indicators for web applications.
 category: application
 slug: file-uploaders
+dark: true
 terms:
   - form
   - input
 components:
-  - { title: 'Base', dark: true }
-  - { title: 'Base with button', dark: true }
+  - { title: 'Base' }
+  - { title: 'Base with button' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/filters.mdx b/src/content/collection/application/filters.mdx
index 55309b90..ece8b502 100644
--- a/src/content/collection/application/filters.mdx
+++ b/src/content/collection/application/filters.mdx
@@ -5,14 +5,15 @@ category: application
 slug: filters
 wrapper: h-[400px]
 pattern: https://js.hyperui.dev/patterns/dropdown/
+dark: true
 terms:
   - form
   - input
   - search
   - sort
 components:
-  - { title: 'Dropdown', dark: true, plugins: ['@tailwindcss/forms'] }
-  - { title: 'Accordion', dark: true, plugins: ['@tailwindcss/forms'] }
+  - { title: 'Dropdown', plugins: ['@tailwindcss/forms'] }
+  - { title: 'Accordion', plugins: ['@tailwindcss/forms'] }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/inputs.mdx b/src/content/collection/application/inputs.mdx
index 4cb8f380..1381585d 100644
--- a/src/content/collection/application/inputs.mdx
+++ b/src/content/collection/application/inputs.mdx
@@ -4,25 +4,22 @@ description: Form input components with responsive text fields, search boxes, an
 category: application
 slug: inputs
 wrapper: h-[200px]
+dark: true
 terms:
   - filter
   - form
 components:
   - title: Base
     description: Standard text input with label and border styling
-    dark: true
     plugins: ['@tailwindcss/forms']
   - title: Base with icon
     description: Input field with an icon positioned on the right side
-    dark: true
     plugins: ['@tailwindcss/forms']
   - title: Base with button
     description: Search input with an integrated action button
-    dark: true
     plugins: ['@tailwindcss/forms']
   - title: Floating label
     description: Input with animated label that floats above on focus
-    dark: true
     plugins: ['@tailwindcss/forms']
 ---
 
diff --git a/src/content/collection/application/loaders.mdx b/src/content/collection/application/loaders.mdx
index fc11730f..34002fb4 100644
--- a/src/content/collection/application/loaders.mdx
+++ b/src/content/collection/application/loaders.mdx
@@ -4,30 +4,24 @@ description: Loading and progress indicator components for web applications. Inc
 category: application
 slug: loaders
 wrapper: h-[200px]
+dark: true
 terms:
   - progress
 components:
   - title: Spinner
     description: Circular spinning loader for general loading states
-    dark: true
   - title: Spinner with text
     description: Centered spinner with loading message displayed below
-    dark: true
   - title: Spinner inline
     description: Compact spinner with text aligned horizontally
-    dark: true
   - title: Progress bar
     description: Horizontal bar indicator showing loading progress
-    dark: true
   - title: Dots pulse
     description: Three animated dots with sequential pulse effect
-    dark: true
   - title: Dots ping
     description: Three animated dots with expanding ping effect
-    dark: true
   - title: Dots bounce
     description: Three animated dots with bouncing effect
-    dark: true
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/modals.mdx b/src/content/collection/application/modals.mdx
index 8db61c7e..4d836559 100644
--- a/src/content/collection/application/modals.mdx
+++ b/src/content/collection/application/modals.mdx
@@ -4,16 +4,17 @@ description: Modal and dialog components for web applications. Includes simple m
 category: application
 slug: modals
 pattern: https://js.hyperui.dev/patterns/dialog/
+dark: true
 terms:
   - dialog
   - popup
 components:
-  - { title: 'Base', dark: true }
-  - { title: 'Base with close', dark: true }
-  - { title: 'Actions', dark: true }
-  - { title: 'Actions with close', dark: true }
-  - { title: 'Input', dark: true }
-  - { title: 'Input with close', dark: true }
+  - { title: 'Base' }
+  - { title: 'Base with close' }
+  - { title: 'Actions' }
+  - { title: 'Actions with close' }
+  - { title: 'Input' }
+  - { title: 'Input with close' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/pagination.mdx b/src/content/collection/application/pagination.mdx
index 4762afbe..0ba2f85b 100644
--- a/src/content/collection/application/pagination.mdx
+++ b/src/content/collection/application/pagination.mdx
@@ -4,15 +4,16 @@ description: Responsive pagination components for page navigation in web applica
 category: application
 slug: pagination
 wrapper: h-[200px]
+dark: true
 terms:
   - filter
   - navigation
   - page
   - pagination
 components:
-  - { title: 'Navigation', dark: true }
-  - { title: 'Input', dark: true, plugins: ['@tailwindcss/forms'] }
-  - { title: 'X/Y', dark: true }
+  - { title: 'Navigation' }
+  - { title: 'Input', plugins: ['@tailwindcss/forms'] }
+  - { title: 'X/Y' }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/application/steps.mdx b/src/content/collection/application/steps.mdx
index f3d5f899..e65a5706 100644
--- a/src/content/collection/application/steps.mdx
+++ b/src/content/collection/application/steps.mdx
@@ -10,16 +10,16 @@ terms:
   - progress
   - navigation
 components:
-  - { title: 'Title, icon and progress bar', dark: { contributors: ['WinnyChang'] } }
-  - { title: 'Title, step/total and progress bar', dark: { contributors: ['WinnyChang'] } }
-  - { title: 'Title, check icon and progress bar', dark: { contributors: ['WinnyChang'] } }
+  - { title: 'Title, icon and progress bar', darkContributors: ['WinnyChang'] }
+  - { title: 'Title, step/total and progress bar', darkContributors: ['WinnyChang'] }
+  - { title: 'Title, check icon and progress bar', darkContributors: ['WinnyChang'] }
   - {
       title: 'Grouped with title and description, with highlighted current step',
-      dark: { contributors: ['WinnyChang'] },
+      darkContributors: ['WinnyChang'],
     }
   - {
       title: 'Timeline with title, with highlighted current step',
-      dark: { contributors: ['WinnyChang'] },
+      darkContributors: ['WinnyChang'],
     }
 ---
 
diff --git a/src/content/collection/application/toasts.mdx b/src/content/collection/application/toasts.mdx
index e72ba1b7..ad01f180 100644
--- a/src/content/collection/application/toasts.mdx
+++ b/src/content/collection/application/toasts.mdx
@@ -9,12 +9,12 @@ terms:
   - feedback
   - notification
 components:
-  - { title: 'Success', dark: true }
-  - { title: 'Error', dark: true }
-  - { title: 'Warning', dark: true }
-  - { title: 'Info', dark: true }
-  - { title: 'With action button', dark: true }
-  - { title: 'Standout', dark: { contributors: ['WinnyChang'] } }
+  - { title: 'Success' }
+  - { title: 'Error' }
+  - { title: 'Warning' }
+  - { title: 'Info' }
+  - { title: 'With action button' }
+  - { title: 'Standout', darkContributors: ['WinnyChang'] }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/content/collection/marketing/announcements.mdx b/src/content/collection/marketing/announcements.mdx
index 561475d6..72751c05 100644
--- a/src/content/collection/marketing/announcements.mdx
+++ b/src/content/collection/marketing/announcements.mdx
@@ -9,12 +9,12 @@ terms:
   - feedback
   - notification
 components:
-  - { title: 'Base', dark: { contributors: ['WinnyChang'] } }
-  - { title: 'Base with dismiss', dark: { contributors: ['WinnyChang'] } }
-  - { title: 'Fixed', dark: { contributors: ['WinnyChang'] } }
-  - { title: 'Fixed with dismiss', dark: { contributors: ['WinnyChang'] } }
-  - { title: 'Floating', dark: { contributors: ['WinnyChang'] } }
-  - { title: 'Floating with dismiss', dark: { contributors: ['WinnyChang'] } }
+  - { title: 'Base', darkContributors: ['WinnyChang'] }
+  - { title: 'Base with dismiss', darkContributors: ['WinnyChang'] }
+  - { title: 'Fixed', darkContributors: ['WinnyChang'] }
+  - { title: 'Fixed with dismiss', darkContributors: ['WinnyChang'] }
+  - { title: 'Floating', darkContributors: ['WinnyChang'] }
+  - { title: 'Floating with dismiss', darkContributors: ['WinnyChang'] }
 ---
 
 import BaseHero from '../../../components/BaseHero.astro'
diff --git a/src/layouts/ComponentPost.astro b/src/layouts/ComponentPost.astro
index b32dea78..7d181dab 100644
--- a/src/layouts/ComponentPost.astro
+++ b/src/layouts/ComponentPost.astro
@@ -27,15 +27,12 @@ const {
   dark: darkModeSupported,
 } = Astro.props
 
-const darkCount = components.filter(({ dark }) => !!dark).length
-const totalCount = components.length
-
 const pageTitle =
   category === 'templates' ? `Free Tailwind CSS ${title} Template` : `Free Tailwind CSS ${title}`
 
 const formattedComponents: ComponentPreview[] = components
   .map((component, index) => {
-    const { dark, ...rest } = component
+    const { darkContributors, ...rest } = component
 
     const baseComponent = {
       ...rest,
@@ -44,21 +41,15 @@ const formattedComponents: ComponentPreview[] = components
       index: index + 1,
     }
 
-    if (!dark) {
+    if (!darkModeSupported) {
       return [baseComponent]
     }
 
-    const contributors =
-      Object.prototype.toString.call(dark) === '[object Object]'
-        ? // @ts-expect-error We know dark is an object at this point.
-          dark.contributors
-        : component.contributors
-
     return [
       baseComponent,
       {
         ...rest,
-        contributors,
+        contributors: darkContributors ?? component.contributors,
         dark: true,
         id: `component-${index + 1}-dark`,
         index: index + 1,
@@ -109,19 +100,7 @@ const componentPageSchema = {
         {
           darkModeSupported && (
             <>
-              <span>
-                {darkCount}/{totalCount} Dark Mode{' '}
-                {darkCount !== totalCount && (
-                  <a
-                    href="https://github.com/markmead/hyperui/issues/new"
-                    target="_blank"
-                    rel="noreferrer"
-                    class="text-gray-500 transition-colors hover:text-gray-700"
-                  >
-                    (Request)
-                  </a>
-                )}
-              </span>
+              <span>Dark Mode</span>
 
               <span class="size-1 rounded-full bg-gray-400" aria-hidden="true" />
             </>
diff --git a/src/lib/dark-mode/config.js b/src/lib/dark-mode/config.js
index fd85b6c8..38ab44f7 100644
--- a/src/lib/dark-mode/config.js
+++ b/src/lib/dark-mode/config.js
@@ -12,6 +12,9 @@ import { SHADE_MAP, COLOR_MAP, STORAGE_KEY } from '../../constants/dark-mode.js'
  * @property {string | null} [darkColor]      - override entire color e.g. 'gray-900'; null uses darkShade/shade map
  * @property {string[]} excludeElements       - e.g. ['button', 'a']
  * @property {string[]} excludeColors         - e.g. ['blue', 'indigo']
+ * @property {string[] | null} [requireClasses] - only match when the same element also carries
+ *   one of these light-mode classes, e.g. ['bg-indigo-600', 'bg-red-600'] — null/empty means
+ *   no sibling-class gate (matches purely on utility/shade/color/element as before)
  */
 
 /**
@@ -41,7 +44,57 @@ export const DEFAULT_CONFIG = {
     decoration: true,
     placeholder: true,
   },
-  rules: [],
+  rules: [
+    {
+      id: 'house-style-action-fill',
+      name: 'Action fill (indigo-600 → indigo-500)',
+      enabled: true,
+      utilities: ['bg'],
+      shade: 600,
+      colors: ['indigo'],
+      darkShade: 500,
+      darkColor: null,
+      excludeElements: [],
+      excludeColors: [],
+    },
+    {
+      id: 'house-style-action-fill-hover',
+      name: 'Action fill hover (indigo-700 → indigo-400)',
+      enabled: true,
+      utilities: ['bg'],
+      shade: 700,
+      colors: ['indigo'],
+      darkShade: 400,
+      darkColor: null,
+      excludeElements: [],
+      excludeColors: [],
+    },
+    {
+      id: 'house-style-destructive-fill',
+      name: 'Destructive fill (red-600 → red-500)',
+      enabled: true,
+      utilities: ['bg'],
+      shade: 600,
+      colors: ['red'],
+      darkShade: 500,
+      darkColor: null,
+      excludeElements: [],
+      excludeColors: [],
+    },
+    {
+      id: 'house-style-action-fill-text-preserve',
+      name: 'text-white on its own bg-indigo-600/bg-red-600 fill stays white',
+      enabled: true,
+      utilities: ['text'],
+      shade: null,
+      colors: ['white'],
+      darkShade: null,
+      darkColor: null,
+      excludeElements: [],
+      excludeColors: ['white'],
+      requireClasses: ['bg-indigo-600', 'bg-red-600'],
+    },
+  ],
 }
 
 /** @returns {DarkModeConfig} */
@@ -50,7 +103,7 @@ function createDefaultConfig() {
     shadeMap: { ...DEFAULT_CONFIG.shadeMap },
     colorMap: { ...DEFAULT_CONFIG.colorMap },
     utilities: { ...DEFAULT_CONFIG.utilities },
-    rules: [],
+    rules: DEFAULT_CONFIG.rules.map((ruleData) => ({ ...ruleData })),
   }
 }
 
@@ -185,6 +238,12 @@ function normalizeRule(rawRule) {
           .filter((colorItem) => typeof colorItem === 'string')
           .map((colorItem) => colorItem.trim().toLowerCase())
       : [],
+    requireClasses: Array.isArray(ruleRecord.requireClasses)
+      ? ruleRecord.requireClasses
+          .filter((classItem) => typeof classItem === 'string')
+          .map((classItem) => classItem.trim())
+          .filter(Boolean)
+      : null,
   }
 }
 
diff --git a/src/lib/dark-mode/transform-class.js b/src/lib/dark-mode/transform-class.js
index 3b24c69d..e2e3e684 100644
--- a/src/lib/dark-mode/transform-class.js
+++ b/src/lib/dark-mode/transform-class.js
@@ -25,10 +25,11 @@ export function splitVariantPrefix(className) {
  * @param {string} colorFamily  e.g. 'blue'
  * @param {number} shadeNumber  e.g. 600
  * @param {string | null | undefined} tagName  e.g. 'button' (lowercase)
+ * @param {string[]} siblingClasses  every light-mode class on the same element, this one included
  * @param {import('./config.js').DarkModeConfig} configData
  * @returns {{ skip: boolean, darkShade: number | null, darkColor: string | null } | null}  null = no override, use shade map
  */
-function applyRules(utilityName, colorFamily, shadeNumber, tagName, configData) {
+function applyRules(utilityName, colorFamily, shadeNumber, tagName, siblingClasses, configData) {
   const normalizedTag = tagName ? tagName.toLowerCase() : null
 
   for (const activeRule of configData.rules) {
@@ -53,6 +54,13 @@ function applyRules(utilityName, colorFamily, shadeNumber, tagName, configData)
     ) {
       continue
     }
+    if (
+      activeRule.requireClasses &&
+      activeRule.requireClasses.length > 0 &&
+      !activeRule.requireClasses.some((requiredClass) => siblingClasses.includes(requiredClass))
+    ) {
+      continue
+    }
 
     if (
       activeRule.excludeElements &&
@@ -89,9 +97,11 @@ function applyRules(utilityName, colorFamily, shadeNumber, tagName, configData)
  * @param {string} className
  * @param {import('./config.js').DarkModeConfig} configData
  * @param {string | null} [tagName]  lowercase element tag e.g. 'button' (browser only)
+ * @param {string[]} [siblingClasses]  every light-mode class on the same element (defaults to
+ *   just this one, when called without the wider element context, e.g. legacy/direct callers)
  * @returns {string}
  */
-export function transformClass(className, configData, tagName = null) {
+export function transformClass(className, configData, tagName = null, siblingClasses = [className]) {
   const { variantPrefix, classWithoutVariant } = splitVariantPrefix(className)
 
   for (const [lightColor, darkColor] of Object.entries(configData.colorMap)) {
@@ -111,7 +121,14 @@ export function transformClass(className, configData, tagName = null) {
           return className
         }
 
-        const ruleResult = applyRules(utilityName, lightColor, 0, tagName, configData)
+        const ruleResult = applyRules(
+          utilityName,
+          lightColor,
+          0,
+          tagName,
+          siblingClasses,
+          configData,
+        )
 
         if (ruleResult?.skip) {
           return className
@@ -153,6 +170,7 @@ export function transformClass(className, configData, tagName = null) {
         colorFamily,
         parsedShadeNumber,
         tagName,
+        siblingClasses,
         configData,
       )
 
diff --git a/src/lib/dark-mode/transform-html.js b/src/lib/dark-mode/transform-html.js
index e717b9e4..ae9020e4 100644
--- a/src/lib/dark-mode/transform-html.js
+++ b/src/lib/dark-mode/transform-html.js
@@ -66,15 +66,15 @@ function transformClassAttribute(classAttribute, configData, tagName) {
     return classAttribute ?? ''
   }
 
-  return classAttribute
-    .split(/\s+/)
-    .filter(Boolean)
+  const classTokens = classAttribute.split(/\s+/).filter(Boolean)
+
+  return classTokens
     .map((className) => {
       if (className.includes('dark:')) {
         return className
       }
 
-      return transformClass(className, configData, tagName)
+      return transformClass(className, configData, tagName, classTokens)
     })
     .join(' ')
 }