diff --git a/.gitignore b/.gitignore index 4e52848..5c3f262 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .idea .vscode .claude +.pi* diff --git a/AGENTS.md b/AGENTS.md deleted file mode 100644 index dd9837d..0000000 --- a/AGENTS.md +++ /dev/null @@ -1 +0,0 @@ -See [CLAUDE.md](CLAUDE.md) for project guidance. diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index 1270c64..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,111 +0,0 @@ -# CLAUDE.md - -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - -## Project Overview -FSharp.ViewEngine is a view engine for F# web applications. It provides a functional approach to generating HTML with type-safe F# code, including integrated support for HTMX, Alpine.js, Datastar, Tailwind CSS, and SVG elements. - -## Repository Structure -- `sln/` — Solution root: build scripts, paket, Dockerfile, and `src/` subdirectory with all projects -- `etc/` — Assets (logos) -- `pulumi/` — Pulumi infrastructure (TypeScript) for deploying the docs app -- `.github/` — CI workflows - -## Common Development Commands - -**Important:** When running in a bash shell (including Claude Code), always use `./fake.sh` instead of `fake.cmd`. - -### All targets (`sln/`) - -```bash -cd sln - -# Restore tools and packages -dotnet tool restore -dotnet paket install - -# Run tests (uses Expecto, so dotnet run, not dotnet test) -./fake.sh Test -dotnet run --project src/Tests/Tests.fsproj # Direct - -# Run a single test by name -dotnet run --project src/Tests/Tests.fsproj -- --filter "Should render html document" - -# Create NuGet package (needs GITHUB_REF_NAME env var) -./fake.sh Pack - -# Run docs app with Tailwind watch (hot reload) -./fake.sh WatchDocs - -# Build CSS for production -./fake.sh BuildDocsCss - -# Publish docs app -./fake.sh PublishDocs -``` - -### Pulumi deployment - -```bash -cd pulumi -npm install -pulumi up -s prod -``` - -## Architecture - -### Core Type System (`sln/src/FSharp.ViewEngine/Core.fs`) -Two discriminated unions form the foundation: -- **Element**: `Text | Tag | Void | Fragment | Raw | Noop` — represents DOM nodes -- **Attribute**: `KeyValue | Boolean | Children | Noop` — represents HTML attributes - -Rendering uses `StringBuilder` with recursive pattern matching. `Text` is HTML-encoded; `Raw` is not. `Void` elements (e.g., `br`, `img`) are self-closing and reject children. - -### Module Organization (`sln/src/FSharp.ViewEngine/`) -- `Html.fs` — Standard HTML elements and attributes as static members on `Html` type -- `Htmx.fs` — HTMX attributes (`_hxGet`, `_hxPost`, etc.) on `Htmx` type -- `Alpine.fs` — Alpine.js directives (`_xData`, `_xShow`, etc.) on `Alpine` type -- `Datastar.fs` — Datastar attributes (`_dsSignals`, `_dsOn`, etc.) on `Datastar` type -- `Tailwind.fs` — Tailwind UI custom elements on `Tailwind` type -- `Svg.fs` — SVG elements and attributes on `Svg` type - -### Usage Pattern -```fsharp -open FSharp.ViewEngine -open type Html -open type Htmx - -div { - _class "container" - _hxGet "/api" - h1 { "Hello" } -} -|> Render.toHtmlDocString -``` - -### Project Structure -- `sln/src/FSharp.ViewEngine/` — Core library (NuGet package) -- `sln/src/Tests/` — Expecto tests -- `sln/src/Benchmarks/` — BenchmarkDotNet benchmarks -- `sln/src/Build/` — FAKE build system (Test, Pack, PushNugets, WatchDocs, BuildDocsCss, PublishDocs targets) -- `sln/src/Docs/` — Documentation Giraffe web app with Markdown pages -- `pulumi/` — Infrastructure as code (Pulumi + TypeScript) - -## Development Patterns - -- **New HTML elements** in `Html.fs`: use `Tag` for normal elements, `Void` for self-closing. Add convenience overloads (e.g., `p (text:string)`). -- **Framework attributes**: HTMX → `Htmx.fs` with `_hx` prefix; Alpine → `Alpine.fs` with `_x` prefix; Datastar → `Datastar.fs` with `_ds` prefix. -- **New doc pages**: Add markdown in `sln/src/Docs/docs/`, handler in `Handlers.fs`, route in `Program.fs`, nav link in `Views.fs`. -- **Tests** compare rendered HTML strings using `String.clean` for whitespace normalization. Use `// language=HTML` comment for IDE syntax highlighting in expected strings. - -## Build System -- FAKE build script invoked via `fake.cmd`/`fake.sh` in `sln/` -- Paket for package management (`paket.dependencies` in `sln/`) -- .NET 10.0 SDK (`global.json`) -- CI: GitHub Actions — tests on PRs, NuGet publish on release tags (`v*.*.*`) - -## Infrastructure (Pulumi) -- TypeScript Pulumi project in `pulumi/` -- Deploys docs app to Kubernetes via AWS ECR -- Domain: `fsharpviewengine.meiermade.com` -- Stack references: `identity`, `infrastructure`, `fsharp-view-engine-identity` diff --git a/README.md b/README.md index 3e91a1c..8531bbf 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,8 @@ [![Deploy](https://github.com/meiermade/FSharp.ViewEngine/actions/workflows/deploy.yml/badge.svg)](https://github.com/meiermade/FSharp.ViewEngine/actions/workflows/deploy.yml) [![NuGet](https://img.shields.io/nuget/v/FSharp.ViewEngine)](https://www.nuget.org/packages/FSharp.ViewEngine) -

- FSharp.ViewEngine +

+ FSharp.ViewEngine

# FSharp.ViewEngine @@ -98,11 +98,6 @@ html { ## Benchmarks Ran on February 6, 2026 with BenchmarkDotNet MediumRun only. -Environment: -- Windows 11 (10.0.26200.7623) -- 12th Gen Intel Core i9-12900HK -- .NET SDK 10.0.102, .NET Runtime 10.0.2 (X64 RyuJIT AVX2) - Command: ``` cd sln && dotnet run -c Release --project src/Benchmarks/Benchmarks.fsproj diff --git a/etc/logo.png b/etc/logo.png deleted file mode 100644 index d75e5fd..0000000 Binary files a/etc/logo.png and /dev/null differ diff --git a/etc/logo.svg b/etc/logo.svg index 244f1e8..c1762d2 100644 --- a/etc/logo.svg +++ b/etc/logo.svg @@ -1,73 +1 @@ - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/pulumi/Pulumi.prod.yaml b/pulumi/Pulumi.prod.yaml index 5a601a3..ba1d650 100644 --- a/pulumi/Pulumi.prod.yaml +++ b/pulumi/Pulumi.prod.yaml @@ -1,4 +1,4 @@ environment: - - fsharp-view-engine/prod + - fsharpviewengine/prod config: pulumi:disable-default-providers: ['*'] diff --git a/pulumi/index.ts b/pulumi/index.ts index ab22174..22e4135 100644 --- a/pulumi/index.ts +++ b/pulumi/index.ts @@ -1,3 +1,4 @@ import './src/aws' +import './src/cloudflare' import './src/docker' import './src/k8s' diff --git a/pulumi/package-lock.json b/pulumi/package-lock.json index 015d30f..90cdb40 100644 --- a/pulumi/package-lock.json +++ b/pulumi/package-lock.json @@ -7,6 +7,7 @@ "name": "fsharp-view-engine", "dependencies": { "@pulumi/aws": "^7.16.0", + "@pulumi/cloudflare": "^6.10.0", "@pulumi/docker-build": "^0.0.15", "@pulumi/kubernetes": "^4.18", "@pulumi/pulumi": "^3.135", @@ -796,6 +797,15 @@ "mime": "^2.0.0" } }, + "node_modules/@pulumi/cloudflare": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/@pulumi/cloudflare/-/cloudflare-6.13.0.tgz", + "integrity": "sha512-M3tMo5/1S2NgOiCBhrN6gUYZg50/59HlAYQ1NsLkfb7prgH4aSdh7R01wgXlBQPu2BtiZswCtAigMdyAXVA+Ig==", + "license": "Apache-2.0", + "dependencies": { + "@pulumi/pulumi": "^3.142.0" + } + }, "node_modules/@pulumi/docker-build": { "version": "0.0.15", "resolved": "https://registry.npmjs.org/@pulumi/docker-build/-/docker-build-0.0.15.tgz", diff --git a/pulumi/package.json b/pulumi/package.json index ca3a595..271dca8 100644 --- a/pulumi/package.json +++ b/pulumi/package.json @@ -6,6 +6,7 @@ }, "dependencies": { "@pulumi/aws": "^7.16.0", + "@pulumi/cloudflare": "^6.10.0", "@pulumi/docker-build": "^0.0.15", "@pulumi/kubernetes": "^4.18", "@pulumi/pulumi": "^3.135", diff --git a/pulumi/src/cloudflare/index.ts b/pulumi/src/cloudflare/index.ts new file mode 100644 index 0000000..366dee0 --- /dev/null +++ b/pulumi/src/cloudflare/index.ts @@ -0,0 +1,3 @@ +import './provider' +import './tunnel' +import './record' diff --git a/pulumi/src/cloudflare/provider.ts b/pulumi/src/cloudflare/provider.ts new file mode 100644 index 0000000..a51ffb8 --- /dev/null +++ b/pulumi/src/cloudflare/provider.ts @@ -0,0 +1,6 @@ +import * as cloudflare from '@pulumi/cloudflare' +import * as config from '../config' + +export const provider = new cloudflare.Provider('default', { + apiToken: config.cloudflareConfig.apiToken +}) diff --git a/pulumi/src/cloudflare/record.ts b/pulumi/src/cloudflare/record.ts new file mode 100644 index 0000000..1004773 --- /dev/null +++ b/pulumi/src/cloudflare/record.ts @@ -0,0 +1,22 @@ +import * as cloudflare from '@pulumi/cloudflare' +import * as config from '../config' +import * as tunnel from './tunnel' +import { provider } from './provider' + +const zone = cloudflare.getZoneOutput({ + filter: { + name: config.cloudflareConfig.zoneName, + account: { + id: config.cloudflareConfig.accountId + } + } +}, { provider }) + +new cloudflare.DnsRecord(config.identifier, { + zoneId: zone.zoneId, + name: config.identifier, + type: 'CNAME', + content: tunnel.tunnelHostname, + proxied: true, + ttl: 1 +}, { provider, deleteBeforeReplace: true }) diff --git a/pulumi/src/cloudflare/tunnel.ts b/pulumi/src/cloudflare/tunnel.ts new file mode 100644 index 0000000..8ded6ed --- /dev/null +++ b/pulumi/src/cloudflare/tunnel.ts @@ -0,0 +1,35 @@ +import * as cloudflare from '@pulumi/cloudflare' +import { provider } from './provider' +import * as config from '../config' + +export const tunnel = new cloudflare.ZeroTrustTunnelCloudflared(config.identifier, { + accountId: config.cloudflareConfig.accountId, + name: config.identifier, + configSrc: 'cloudflare' +}, { provider, deleteBeforeReplace: true }) + +new cloudflare.ZeroTrustTunnelCloudflaredConfig(config.identifier, { + accountId: config.cloudflareConfig.accountId, + tunnelId: tunnel.id, + source: 'cloudflare', + config: { + ingresses: [ + { + hostname: `${config.identifier}.${config.cloudflareConfig.zoneName}`, + service: `http://${config.identifier}.${config.k8sConfig.namespace}.svc.cluster.local:80` + }, + { + service: 'http_status:404' + } + ] + } +}, { provider }) + +export const tunnelHostname = tunnel.id.apply(id => `${id}.cfargotunnel.com`) + +const tunnelTokenRes = cloudflare.getZeroTrustTunnelCloudflaredTokenOutput({ + accountId: config.cloudflareConfig.accountId, + tunnelId: tunnel.id +}, { provider }) + +export const tunnelToken = tunnelTokenRes.token diff --git a/pulumi/src/config.ts b/pulumi/src/config.ts index d9f3646..51a4ba2 100644 --- a/pulumi/src/config.ts +++ b/pulumi/src/config.ts @@ -3,18 +3,25 @@ import * as path from 'path' export const rootDir = path.dirname(path.dirname(__dirname)) -export const domain = 'fsharpviewengine.meiermade.com' - -export const identifier = 'fsharp-view-engine' +export const identifier = 'fsharpviewengine' const rawAwsConfig = new pulumi.Config('aws') +const rawCloudflareConfig = new pulumi.Config('cloudflare') const rawK8sConfig = new pulumi.Config('k8s') + export const awsConfig = { accountId: rawAwsConfig.require('platformAccountId'), region: rawAwsConfig.require('region'), eksNodeManagerArn: rawAwsConfig.require('eksNodeManagerArn') } +export const cloudflareConfig = { + accountId: rawCloudflareConfig.require('accountId'), + apiToken: rawCloudflareConfig.requireSecret('apiToken'), + zoneName: rawCloudflareConfig.require('zoneName'), + cloudflaredVersion: '2026.2.0' +} + export const k8sConfig = { - namespace: rawK8sConfig.get('namespace'), + namespace: rawK8sConfig.require('namespace'), } diff --git a/pulumi/src/k8s/deployment.ts b/pulumi/src/k8s/deployment.ts index 75ffec5..7501b57 100644 --- a/pulumi/src/k8s/deployment.ts +++ b/pulumi/src/k8s/deployment.ts @@ -1,6 +1,7 @@ import * as k8s from '@pulumi/kubernetes' import { provider } from './provider' import * as image from '../docker/image' +import * as tunnel from '../cloudflare/tunnel' import * as config from '../config' let appConfigMap = new k8s.core.v1.ConfigMap(config.identifier, { @@ -16,6 +17,16 @@ let appConfigMap = new k8s.core.v1.ConfigMap(config.identifier, { const labels = { 'app.kubernetes.io/name': config.identifier } +const tunnelSecret = new k8s.core.v1.Secret(`${config.identifier}-cloudflared`, { + metadata: { + name: `${config.identifier}-cloudflared`, + namespace: config.k8sConfig.namespace + }, + stringData: { + TUNNEL_TOKEN: tunnel.tunnelToken + } +}, { provider }) + const deployment = new k8s.apps.v1.Deployment(config.identifier, { metadata: { name: config.identifier, @@ -27,30 +38,68 @@ const deployment = new k8s.apps.v1.Deployment(config.identifier, { template: { metadata: { labels: labels }, spec: { - containers: [{ - name: config.identifier, - image: image.imageRef, - imagePullPolicy: 'IfNotPresent', - envFrom: [ { configMapRef: { name: appConfigMap.metadata.name } } ], - livenessProbe: { - httpGet: { - path: '/health', - port: 5000 + containers: [ + { + name: config.identifier, + image: image.imageRef, + imagePullPolicy: 'IfNotPresent', + envFrom: [ { configMapRef: { name: appConfigMap.metadata.name } } ], + livenessProbe: { + httpGet: { + path: '/health', + port: 5000 + }, + initialDelaySeconds: 5 }, - initialDelaySeconds: 5 + readinessProbe: { + httpGet: { + path: '/health', + port: 5000 + }, + initialDelaySeconds: 5 + } }, - readinessProbe: { - httpGet: { - path: '/health', - port: 5000 + { + name: 'cloudflared', + image: `cloudflare/cloudflared:${config.cloudflareConfig.cloudflaredVersion}`, + args: [ + 'tunnel', + '--no-autoupdate', + '--metrics', '0.0.0.0:2000', + 'run' + ], + env: [{ + name: 'TUNNEL_TOKEN', + valueFrom: { + secretKeyRef: { + name: tunnelSecret.metadata.name, + key: 'TUNNEL_TOKEN' + } + } + }], + livenessProbe: { + httpGet: { + path: '/ready', + port: 2000 + }, + failureThreshold: 1, + initialDelaySeconds: 10, + periodSeconds: 10 }, - initialDelaySeconds: 5 + readinessProbe: { + httpGet: { + path: '/ready', + port: 2000 + }, + initialDelaySeconds: 10, + periodSeconds: 10 + } } - }] + ] } } } -}, { provider }) +}, { provider, dependsOn: tunnelSecret }) new k8s.core.v1.Service(config.identifier, { metadata: { diff --git a/sln/src/Docs/Handlers.fs b/sln/src/Docs/Handlers.fs index f70e1e2..5b9e989 100644 --- a/sln/src/Docs/Handlers.fs +++ b/sln/src/Docs/Handlers.fs @@ -47,9 +47,6 @@ module Handlers = let installationHandler : HttpHandler = renderPage "Installation - FSharp.ViewEngine" "installation" - let quickstartHandler : HttpHandler = - renderPage "Quickstart - FSharp.ViewEngine" "quickstart" - let customHandler : HttpHandler = renderPage "Custom Elements & Attributes - FSharp.ViewEngine" "custom" @@ -65,8 +62,8 @@ module Handlers = let svgHandler : HttpHandler = renderPage "SVG - FSharp.ViewEngine" "svg" - let giraffeHandler : HttpHandler = - renderPage "Giraffe - FSharp.ViewEngine" "giraffe" + let usageHandler : HttpHandler = + renderPage "Usage - FSharp.ViewEngine" "usage" let tailwindHandler : HttpHandler = renderPage "Tailwind - FSharp.ViewEngine" "tailwind" diff --git a/sln/src/Docs/Program.fs b/sln/src/Docs/Program.fs index cce6b3e..6aaa010 100644 --- a/sln/src/Docs/Program.fs +++ b/sln/src/Docs/Program.fs @@ -10,9 +10,9 @@ let webApp = route "/health" >=> text "ok" route "/" >=> homeHandler route "/installation" >=> installationHandler - route "/quickstart" >=> quickstartHandler route "/custom" >=> customHandler - route "/giraffe" >=> giraffeHandler + route "/usage" >=> usageHandler + route "/giraffe" >=> usageHandler route "/extensions/alpine" >=> alpineHandler route "/extensions/datastar" >=> datastarHandler route "/extensions/htmx" >=> htmxHandler diff --git a/sln/src/Docs/Views.fs b/sln/src/Docs/Views.fs index a701f5c..a8e07c3 100644 --- a/sln/src/Docs/Views.fs +++ b/sln/src/Docs/Views.fs @@ -8,18 +8,11 @@ open type Tailwind type Page = { title:string } -let magnifyingGlassIcon = raw """ - - - - """ -let menuIcon = raw """ - - - - """ +let magnifyingGlassIcon = raw """""" +let menuIcon = raw """""" +let xMarkIcon = raw """""" let githubIcon = raw """""" -let sunIcon = raw """""" +let sunIcon = raw """""" let moonIcon = raw """""" let sunIconSmall = raw """""" let moonIconSmall = raw """""" @@ -29,7 +22,7 @@ let private pageHeader = header { _class [ "sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between" - "bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500" + "bg-white/75 px-4 py-5 shadow-md shadow-slate-900/5 backdrop-blur transition duration-500" "sm:px-6 lg:px-8 dark:shadow-none dark:bg-slate-900/75 dark:backdrop-blur" ] // Left section: hamburger + logo @@ -40,7 +33,8 @@ let private pageHeader = _class "flex lg:hidden" button { _type "button" - _class "relative text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" + _xOn ("click", "mobileNavOpen = true") + _class "relative cursor-pointer rounded-lg p-1 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700" menuIcon } } @@ -48,7 +42,7 @@ let private pageHeader = a { _href "/" _class "flex items-center gap-2 text-sm font-semibold tracking-wider text-slate-700 dark:text-white" - img { _src "/logo.png"; _alt "FSharp.ViewEngine"; _class "h-6 w-6" } + img { _src "/logo.svg"; _alt "FSharp.ViewEngine"; _class "h-6 w-6" } "FSharp.ViewEngine" } } @@ -75,9 +69,9 @@ let private pageHeader = button { _type "button" _class [ - "flex h-6 w-6 items-center justify-center rounded-lg shadow-md ring-1" - "shadow-black/5 ring-black/5 dark:bg-slate-700 dark:ring-white/5" - "dark:ring-inset" + "flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1" + "hover:bg-slate-100 dark:hover:bg-slate-700" + "transition-colors" ] _xOn ("click", "open = !open") // Light mode icon (sun) @@ -87,6 +81,7 @@ let private pageHeader = // Dropdown menu div { _xShow "open" + _xCloak _xOn ("click.away", "open = false") _xTransition () _class [ @@ -149,6 +144,7 @@ let private navLink (currentPath: string) (href': string) (label': string) = + " hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300" ] _href href' + _xOn ("click", "mobileNavOpen = false") label' } } @@ -172,9 +168,8 @@ let private sidebarNavigation (currentPath: string) = ] navLink currentPath "/" "Introduction" navLink currentPath "/installation" "Installation" - navLink currentPath "/quickstart" "Quickstart" navLink currentPath "/custom" "Custom Elements & Attributes" - navLink currentPath "/giraffe" "Giraffe" + navLink currentPath "/usage" "Usage" } } li { @@ -204,7 +199,7 @@ let private sidebar (currentPath: string) = div { _class [ "sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64" - "overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16" + "overflow-y-auto py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16" ] sidebarNavigation currentPath } @@ -251,8 +246,41 @@ let layout (pageTitle: string) (currentPath: string) (headings: (string * string } body { _class "min-h-full bg-white dark:bg-slate-900" + _xData "{ mobileNavOpen: false }" + _xOn ("keydown.escape.window", "mobileNavOpen = false") pageHeader div { + _xShow "mobileNavOpen" + _xCloak + _xTransition () + _class "fixed inset-0 z-[70] lg:hidden" + div { + _class "absolute inset-0 bg-slate-950/60 backdrop-blur-sm" + _xOn ("click", "mobileNavOpen = false") + } + div { + _class "absolute inset-y-0 left-0 w-full max-w-xs overflow-y-auto bg-white px-6 py-5 shadow-2xl ring-1 ring-slate-900/10 dark:bg-slate-900 dark:ring-white/10" + div { + _class "mb-6 flex items-center justify-between" + a { + _href "/" + _class "flex items-center gap-2 text-sm font-semibold tracking-wider text-slate-700 dark:text-white" + _xOn ("click", "mobileNavOpen = false") + img { _src "/logo.svg"; _alt "FSharp.ViewEngine"; _class "h-6 w-6" } + "FSharp.ViewEngine" + } + button { + _type "button" + _class "cursor-pointer rounded p-1 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700" + _xOn ("click", "mobileNavOpen = false") + xMarkIcon + } + } + sidebarNavigation currentPath + } + } + div { + _id "app" _class [ "relative mx-auto flex max-w-8xl justify-center" "sm:px-2 lg:px-8 xl:px-12" @@ -260,7 +288,7 @@ let layout (pageTitle: string) (currentPath: string) (headings: (string * string sidebar currentPath div { _class [ - "min-w-0 max-w-3xl flex-auto px-4 py-16" + "min-w-0 max-w-3xl flex-auto px-4 pt-6 pb-12" "lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16" ] article { @@ -275,7 +303,7 @@ let layout (pageTitle: string) (currentPath: string) (headings: (string * string } } div { - _class "prose prose-slate dark:prose-invert max-w-none" + _class "prose prose-slate dark:prose-invert max-w-none [&_h1]:scroll-mt-28 [&_h2]:scroll-mt-28 [&_h3]:scroll-mt-28" raw content } } @@ -284,7 +312,7 @@ let layout (pageTitle: string) (currentPath: string) (headings: (string * string _class [ "hidden xl:sticky xl:top-[4.75rem] xl:-mr-6 xl:block" "xl:h-[calc(100vh-4.75rem)] xl:flex-none xl:overflow-y-auto" - "xl:py-16 xl:pr-6" + "xl:py-12 xl:pr-6" ] tableOfContents headings } diff --git a/sln/src/Docs/docs/home.md b/sln/src/Docs/docs/home.md index 52d9c2f..c69be79 100644 --- a/sln/src/Docs/docs/home.md +++ b/sln/src/Docs/docs/home.md @@ -1,4 +1,4 @@ -# FSharp.ViewEngine Documentation +# FSharp.ViewEngine A minimal, fast view engine for F# that combines the best ideas from several F# view engines. Inspired by [Giraffe.ViewEngine](https://github.com/giraffe-fsharp/Giraffe.ViewEngine), [Feliz.ViewEngine](https://github.com/dbrattli/Feliz.ViewEngine), [Oxpecker.ViewEngine](https://github.com/Lanayx/Oxpecker), and [Bolero](https://github.com/fsbolero/Bolero). @@ -56,4 +56,4 @@ let myPage = ## Getting Started -To get started with FSharp.ViewEngine, check out the [Installation](installation) guide and then follow the [Quickstart](quickstart) tutorial. +To get started with FSharp.ViewEngine, check out the [Installation](installation) guide and then see the [Usage](usage) example. diff --git a/sln/src/Docs/docs/installation.md b/sln/src/Docs/docs/installation.md index 5508f0b..a2982cf 100644 --- a/sln/src/Docs/docs/installation.md +++ b/sln/src/Docs/docs/installation.md @@ -27,7 +27,7 @@ FSharp.ViewEngine Add to your `.fsproj` file: ```xml - + ``` ## Requirements @@ -36,4 +36,4 @@ Add to your `.fsproj` file: ## Next Steps -Once you have FSharp.ViewEngine installed, head over to the [Quickstart](quickstart) guide to start building your first HTML views. \ No newline at end of file +Once you have FSharp.ViewEngine installed, head over to the [Usage](usage) guide to start building your first HTML views. \ No newline at end of file diff --git a/sln/src/Docs/docs/quickstart.md b/sln/src/Docs/docs/quickstart.md deleted file mode 100644 index 604d619..0000000 --- a/sln/src/Docs/docs/quickstart.md +++ /dev/null @@ -1,89 +0,0 @@ -# Quickstart - -Get started with FSharp.ViewEngine in just a few steps. - -## Basic Usage - -Elements are built using computation expressions. You can yield attributes (prefixed with `_`), child elements, and strings in any order — they all go into a single sequence, so there is no need for a separate children attribute: - - -```fsharp -open FSharp.ViewEngine -open type Html - -let myView = - div { - _class "container" - h1 { "Hello, World!" } - p { "Welcome to FSharp.ViewEngine" } - } - -// Render to string -let htmlString = Render.toHtmlDocString myView -``` - -This will produce the following HTML: - -```html -
-

Hello, World!

-

Welcome to FSharp.ViewEngine

-
-``` - -## With HTMX and Tailwind CSS - -FSharp.ViewEngine includes built-in support for HTMX and Tailwind CSS: - -```fsharp -open FSharp.ViewEngine -open type Html -open type Htmx -open type Tailwind - -let interactiveView = - div { - _class [ "bg-blue-500"; "text-white"; "p-4"; "rounded" ] - button { - _class [ "bg-green-500"; "hover:bg-green-700"; "px-4"; "py-2"; "rounded" ] - _hxGet "/api/data" - _hxTarget "#result" - "Load Data" - } - div { - _id "result" - _class [ "mt-4" ] - } - } -``` - -## Complete HTML Document - -Here's how to create a complete HTML document: - -```fsharp -let completePage = - html { - _lang "en" - head { - title "My Page" - meta { _charset "utf-8" } - meta { _name "viewport"; _content "width=device-width, initial-scale=1" } - link { _rel "stylesheet"; _href "https://cdn.tailwindcss.com" } - } - body { - _class [ "bg-gray-100"; "font-sans" ] - div { - _class [ "container"; "mx-auto"; "px-4"; "py-8" ] - h1 { - _class [ "text-3xl"; "font-bold"; "text-gray-900"; "mb-4" ] - "Welcome to my site!" - } - p { - _class [ "text-lg"; "text-gray-600" ] - "This is built with FSharp.ViewEngine." - } - } - } - } -``` diff --git a/sln/src/Docs/docs/giraffe.md b/sln/src/Docs/docs/usage.md similarity index 98% rename from sln/src/Docs/docs/giraffe.md rename to sln/src/Docs/docs/usage.md index fa4a850..71dfd73 100644 --- a/sln/src/Docs/docs/giraffe.md +++ b/sln/src/Docs/docs/usage.md @@ -1,4 +1,4 @@ -# Giraffe Integration +# Usage FSharp.ViewEngine integrates with [Giraffe](https://giraffe.wiki/) by rendering elements to an HTML string and returning it via Giraffe's `htmlString` handler. diff --git a/sln/src/Docs/input.css b/sln/src/Docs/input.css index 5fc0506..423a23e 100644 --- a/sln/src/Docs/input.css +++ b/sln/src/Docs/input.css @@ -3,6 +3,10 @@ @plugin "@tailwindcss/typography"; @custom-variant dark (&:where(.dark, .dark *)); +[x-cloak] { + display: none !important; +} + /* Custom styles inspired by Tailwind CSS docs */ .prose pre { position: relative; diff --git a/sln/src/Docs/wwwroot/android-chrome-192x192.png b/sln/src/Docs/wwwroot/android-chrome-192x192.png index fdc6c41..9a8396e 100644 Binary files a/sln/src/Docs/wwwroot/android-chrome-192x192.png and b/sln/src/Docs/wwwroot/android-chrome-192x192.png differ diff --git a/sln/src/Docs/wwwroot/android-chrome-512x512.png b/sln/src/Docs/wwwroot/android-chrome-512x512.png index a656cd0..a410447 100644 Binary files a/sln/src/Docs/wwwroot/android-chrome-512x512.png and b/sln/src/Docs/wwwroot/android-chrome-512x512.png differ diff --git a/sln/src/Docs/wwwroot/apple-touch-icon.png b/sln/src/Docs/wwwroot/apple-touch-icon.png index 583cd52..17bee3e 100644 Binary files a/sln/src/Docs/wwwroot/apple-touch-icon.png and b/sln/src/Docs/wwwroot/apple-touch-icon.png differ diff --git a/sln/src/Docs/wwwroot/css/output.css b/sln/src/Docs/wwwroot/css/output.css index 54ba522..e2af5df 100644 --- a/sln/src/Docs/wwwroot/css/output.css +++ b/sln/src/Docs/wwwroot/css/output.css @@ -1,1760 +1,2 @@ /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */ -@layer properties; -@layer theme, base, components, utilities; -@layer theme { - :root, :host { - --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Noto Color Emoji'; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', - monospace; - --color-green-500: oklch(72.3% 0.219 149.579); - --color-green-700: oklch(52.7% 0.154 150.069); - --color-sky-500: oklch(68.5% 0.169 237.323); - --color-blue-500: oklch(62.3% 0.214 259.815); - --color-blue-600: oklch(54.6% 0.245 262.881); - --color-blue-900: oklch(37.9% 0.146 265.522); - --color-slate-100: oklch(96.8% 0.007 247.896); - --color-slate-200: oklch(92.9% 0.013 255.508); - --color-slate-300: oklch(86.9% 0.022 252.894); - --color-slate-400: oklch(70.4% 0.04 256.788); - --color-slate-500: oklch(55.4% 0.046 257.417); - --color-slate-600: oklch(44.6% 0.043 257.281); - --color-slate-700: oklch(37.2% 0.044 257.287); - --color-slate-800: oklch(27.9% 0.041 260.031); - --color-slate-900: oklch(20.8% 0.042 265.755); - --color-gray-100: oklch(96.7% 0.003 264.542); - --color-gray-600: oklch(44.6% 0.03 256.802); - --color-gray-900: oklch(21% 0.034 264.665); - --color-zinc-300: oklch(87.1% 0.006 286.286); - --color-zinc-400: oklch(70.5% 0.015 286.067); - --color-zinc-500: oklch(55.2% 0.016 285.938); - --color-zinc-600: oklch(44.2% 0.017 285.786); - --color-zinc-900: oklch(21% 0.006 285.885); - --color-black: #000; - --color-white: #fff; - --spacing: 0.25rem; - --container-sm: 24rem; - --container-3xl: 48rem; - --text-sm: 0.875rem; - --text-sm--line-height: calc(1.25 / 0.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-3xl: 1.875rem; - --text-3xl--line-height: calc(2.25 / 1.875); - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - --tracking-wider: 0.05em; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --default-transition-duration: 150ms; - --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - --default-font-family: var(--font-sans); - --default-mono-font-family: var(--font-mono); - } -} -@layer base { - *, ::after, ::before, ::backdrop, ::file-selector-button { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0 solid; - } - html, :host { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: var(--default-font-family, ui-sans-serif, system-ui, 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; - 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 { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - sub { - bottom: -0.25em; - } - sup { - top: -0.5em; - } - table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; - } - :-moz-focusring { - outline: auto; - } - progress { - vertical-align: baseline; - } - summary { - display: list-item; - } - ol, ul, menu { - list-style: none; - } - img, svg, video, canvas, audio, iframe, embed, object { - display: block; - vertical-align: middle; - } - img, video { - max-width: 100%; - height: auto; - } - button, input, select, optgroup, textarea, ::file-selector-button { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - border-radius: 0; - background-color: transparent; - opacity: 1; - } - :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)) { - color: color-mix(in oklab, currentcolor 50%, transparent); - } - } - } - textarea { - resize: vertical; - } - ::-webkit-search-decoration { - -webkit-appearance: none; - } - ::-webkit-date-and-time-value { - min-height: 1lh; - text-align: inherit; - } - ::-webkit-datetime-edit { - display: inline-flex; - } - ::-webkit-datetime-edit-fields-wrapper { - padding: 0; - } - ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { - padding-block: 0; - } - :-moz-ui-invalid { - box-shadow: none; - } - button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { - appearance: button; - } - ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; - } - [hidden]:where(:not([hidden='until-found'])) { - display: none !important; - } -} -@layer utilities { - .collapse { - visibility: collapse; - } - .visible { - visibility: visible; - } - .absolute { - position: absolute; - } - .fixed { - position: fixed; - } - .relative { - position: relative; - } - .sticky { - position: sticky; - } - .inset-0 { - inset: calc(var(--spacing) * 0); - } - .top-0 { - top: calc(var(--spacing) * 0); - } - .top-\[4\.75rem\] { - top: 4.75rem; - } - .top-full { - top: 100%; - } - .right-0 { - right: calc(var(--spacing) * 0); - } - .z-10 { - z-index: 10; - } - .z-50 { - z-index: 50; - } - .container { - width: 100%; - @media (width >= 40rem) { - max-width: 40rem; - } - @media (width >= 48rem) { - max-width: 48rem; - } - @media (width >= 64rem) { - max-width: 64rem; - } - @media (width >= 80rem) { - max-width: 80rem; - } - @media (width >= 96rem) { - max-width: 96rem; - } - } - .mx-auto { - margin-inline: auto; - } - .prose { - color: var(--tw-prose-body); - max-width: 65ch; - :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; - } - :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-lead); - font-size: 1.25em; - line-height: 1.6; - margin-top: 1.2em; - margin-bottom: 1.2em; - } - :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-links); - text-decoration: underline; - font-weight: 500; - } - :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-bold); - font-weight: 600; - } - :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; - } - :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; - } - :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; - } - :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; - } - :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; - } - :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; - } - :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; - } - :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; - } - :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; - } - :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; - } - :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: disc; - margin-top: 1.25em; - margin-bottom: 1.25em; - padding-inline-start: 1.625em; - } - :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - font-weight: 400; - color: var(--tw-prose-counters); - } - :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - color: var(--tw-prose-bullets); - } - :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.25em; - } - :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-color: var(--tw-prose-hr); - border-top-width: 1; - margin-top: 3em; - margin-bottom: 3em; - } - :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-style: italic; - color: var(--tw-prose-quotes); - border-inline-start-width: 0.25rem; - border-inline-start-color: var(--tw-prose-quote-borders); - quotes: "\201C""\201D""\2018""\2019"; - margin-top: 1.6em; - margin-bottom: 1.6em; - padding-inline-start: 1em; - } - :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: open-quote; - } - :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: close-quote; - } - :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 800; - font-size: 2.25em; - margin-top: 0; - margin-bottom: 0.8888889em; - line-height: 1.1111111; - } - :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 900; - color: inherit; - } - :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 700; - font-size: 1.5em; - margin-top: 2em; - margin-bottom: 1em; - line-height: 1.3333333; - } - :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 800; - color: inherit; - } - :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - font-size: 1.25em; - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; - } - :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; - } - :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.5em; - margin-bottom: 0.5em; - line-height: 1.5; - } - :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; - } - :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - display: block; - margin-top: 2em; - margin-bottom: 2em; - } - :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-family: inherit; - color: var(--tw-prose-kbd); - box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); - font-size: 0.875em; - border-radius: 0.3125rem; - padding-top: 0.1875em; - padding-inline-end: 0.375em; - padding-bottom: 0.1875em; - padding-inline-start: 0.375em; - } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-code); - font-weight: 600; - font-size: 0.875em; - } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: "`"; - } - :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: "`"; - } - :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.875em; - } - :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.9em; - } - :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - } - :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-pre-code); - background-color: var(--tw-prose-pre-bg); - overflow-x: auto; - font-weight: 400; - font-size: 0.875em; - line-height: 1.7142857; - margin-top: 1.7142857em; - margin-bottom: 1.7142857em; - border-radius: 0.375rem; - padding-top: 0.8571429em; - padding-inline-end: 1.1428571em; - padding-bottom: 0.8571429em; - padding-inline-start: 1.1428571em; - } - :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - background-color: transparent; - border-width: 0; - border-radius: 0; - padding: 0; - font-weight: inherit; - color: inherit; - font-size: inherit; - font-family: inherit; - line-height: inherit; - } - :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: none; - } - :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: none; - } - :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - width: 100%; - table-layout: auto; - margin-top: 2em; - margin-bottom: 2em; - font-size: 0.875em; - line-height: 1.7142857; - } - :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-th-borders); - } - :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - vertical-align: bottom; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; - } - :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-td-borders); - } - :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 0; - } - :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: baseline; - } - :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-top-width: 1px; - border-top-color: var(--tw-prose-th-borders); - } - :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: top; - } - :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - text-align: start; - } - :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-captions); - font-size: 0.875em; - line-height: 1.4285714; - margin-top: 0.8571429em; - } - --tw-prose-body: oklch(37.3% 0.034 259.733); - --tw-prose-headings: oklch(21% 0.034 264.665); - --tw-prose-lead: oklch(44.6% 0.03 256.802); - --tw-prose-links: oklch(21% 0.034 264.665); - --tw-prose-bold: oklch(21% 0.034 264.665); - --tw-prose-counters: oklch(55.1% 0.027 264.364); - --tw-prose-bullets: oklch(87.2% 0.01 258.338); - --tw-prose-hr: oklch(92.8% 0.006 264.531); - --tw-prose-quotes: oklch(21% 0.034 264.665); - --tw-prose-quote-borders: oklch(92.8% 0.006 264.531); - --tw-prose-captions: oklch(55.1% 0.027 264.364); - --tw-prose-kbd: oklch(21% 0.034 264.665); - --tw-prose-kbd-shadows: NaN NaN NaN; - --tw-prose-code: oklch(21% 0.034 264.665); - --tw-prose-pre-code: oklch(92.8% 0.006 264.531); - --tw-prose-pre-bg: oklch(27.8% 0.033 256.848); - --tw-prose-th-borders: oklch(87.2% 0.01 258.338); - --tw-prose-td-borders: oklch(92.8% 0.006 264.531); - --tw-prose-invert-body: oklch(87.2% 0.01 258.338); - --tw-prose-invert-headings: #fff; - --tw-prose-invert-lead: oklch(70.7% 0.022 261.325); - --tw-prose-invert-links: #fff; - --tw-prose-invert-bold: #fff; - --tw-prose-invert-counters: oklch(70.7% 0.022 261.325); - --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802); - --tw-prose-invert-hr: oklch(37.3% 0.034 259.733); - --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542); - --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733); - --tw-prose-invert-captions: oklch(70.7% 0.022 261.325); - --tw-prose-invert-kbd: #fff; - --tw-prose-invert-kbd-shadows: 255 255 255; - --tw-prose-invert-code: #fff; - --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338); - --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); - --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802); - --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733); - font-size: 1rem; - line-height: 1.75; - :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; - } - :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - margin-bottom: 0.5em; - } - :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; - } - :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0.375em; - } - :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; - } - :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - } - :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; - } - :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - } - :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; - } - :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; - } - :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; - } - :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - padding-inline-start: 1.625em; - } - :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; - } - :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; - } - :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-top: 0.5714286em; - padding-inline-end: 0.5714286em; - padding-bottom: 0.5714286em; - padding-inline-start: 0.5714286em; - } - :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-start: 0; - } - :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-inline-end: 0; - } - :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; - } - :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - } - :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 0; - } - } - .mt-2 { - margin-top: calc(var(--spacing) * 2); - } - .mt-3 { - margin-top: calc(var(--spacing) * 3); - } - .mt-4 { - margin-top: calc(var(--spacing) * 4); - } - .-mr-6 { - margin-right: calc(var(--spacing) * -6); - } - .mb-4 { - margin-bottom: calc(var(--spacing) * 4); - } - .mb-8 { - margin-bottom: calc(var(--spacing) * 8); - } - .-ml-0\.5 { - margin-left: calc(var(--spacing) * -0.5); - } - .block { - display: block; - } - .flex { - display: flex; - } - .hidden { - display: none; - } - .inline { - display: inline; - } - .size-4 { - width: calc(var(--spacing) * 4); - height: calc(var(--spacing) * 4); - } - .h-5 { - height: calc(var(--spacing) * 5); - } - .h-6 { - height: calc(var(--spacing) * 6); - } - .h-\[calc\(100vh-4\.75rem\)\] { - height: calc(100vh - 4.75rem); - } - .h-full { - height: 100%; - } - .min-h-full { - min-height: 100%; - } - .w-5 { - width: calc(var(--spacing) * 5); - } - .w-6 { - width: calc(var(--spacing) * 6); - } - .w-36 { - width: calc(var(--spacing) * 36); - } - .w-48 { - width: calc(var(--spacing) * 48); - } - .w-56 { - width: calc(var(--spacing) * 56); - } - .w-64 { - width: calc(var(--spacing) * 64); - } - .w-full { - width: 100%; - } - .max-w-3xl { - max-width: var(--container-3xl); - } - .max-w-none { - max-width: none; - } - .max-w-sm { - max-width: var(--container-sm); - } - .min-w-0 { - min-width: calc(var(--spacing) * 0); - } - .flex-auto { - flex: auto; - } - .flex-none { - flex: none; - } - .basis-0 { - flex-basis: calc(var(--spacing) * 0); - } - .transform { - transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - } - .flex-wrap { - flex-wrap: wrap; - } - .items-center { - align-items: center; - } - .justify-between { - justify-content: space-between; - } - .justify-center { - justify-content: center; - } - .justify-end { - justify-content: flex-end; - } - .gap-2 { - gap: calc(var(--spacing) * 2); - } - .gap-4 { - gap: calc(var(--spacing) * 4); - } - .gap-6 { - gap: calc(var(--spacing) * 6); - } - .space-y-2 { - :where(& > :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))); - } - } - .space-y-3 { - :where(& > :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))); - } - } - .space-y-9 { - :where(& > :not(:last-child)) { - --tw-space-y-reverse: 0; - margin-block-start: calc(calc(var(--spacing) * 9) * var(--tw-space-y-reverse)); - margin-block-end: calc(calc(var(--spacing) * 9) * calc(1 - var(--tw-space-y-reverse))); - } - } - .space-x-1 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse))); - } - } - .overflow-hidden { - overflow: hidden; - } - .overflow-x-hidden { - overflow-x: hidden; - } - .overflow-y-auto { - overflow-y: auto; - } - .rounded { - border-radius: 0.25rem; - } - .rounded-lg { - border-radius: var(--radius-lg); - } - .rounded-xl { - border-radius: var(--radius-xl); - } - .border-l-2 { - border-left-style: var(--tw-border-style); - border-left-width: 2px; - } - .border-slate-100 { - border-color: var(--color-slate-100); - } - .bg-black\/30 { - background-color: color-mix(in srgb, #000 30%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-black) 30%, transparent); - } - } - .bg-blue-500 { - background-color: var(--color-blue-500); - } - .bg-blue-900\/20 { - background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent); - } - } - .bg-gray-100 { - background-color: var(--color-gray-100); - } - .bg-green-500 { - background-color: var(--color-green-500); - } - .bg-white { - background-color: var(--color-white); - } - .fill-slate-400 { - fill: var(--color-slate-400); - } - .stroke-sky-500 { - stroke: var(--color-sky-500); - } - .p-1 { - padding: calc(var(--spacing) * 1); - } - .p-2 { - padding: calc(var(--spacing) * 2); - } - .p-4 { - padding: calc(var(--spacing) * 4); - } - .p-6 { - padding: calc(var(--spacing) * 6); - } - .p-8 { - padding: calc(var(--spacing) * 8); - } - .px-3 { - padding-inline: calc(var(--spacing) * 3); - } - .px-4 { - padding-inline: calc(var(--spacing) * 4); - } - .py-1 { - padding-block: calc(var(--spacing) * 1); - } - .py-2 { - padding-block: calc(var(--spacing) * 2); - } - .py-5 { - padding-block: calc(var(--spacing) * 5); - } - .py-8 { - padding-block: calc(var(--spacing) * 8); - } - .py-16 { - padding-block: calc(var(--spacing) * 16); - } - .pr-6 { - padding-right: calc(var(--spacing) * 6); - } - .pr-8 { - padding-right: calc(var(--spacing) * 8); - } - .pl-0\.5 { - padding-left: calc(var(--spacing) * 0.5); - } - .pl-3\.5 { - padding-left: calc(var(--spacing) * 3.5); - } - .font-sans { - font-family: var(--font-sans); - } - .text-3xl { - font-size: var(--text-3xl); - line-height: var(--tw-leading, var(--text-3xl--line-height)); - } - .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-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - .font-bold { - --tw-font-weight: var(--font-weight-bold); - font-weight: var(--font-weight-bold); - } - .font-medium { - --tw-font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-medium); - } - .font-semibold { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - } - .tracking-wider { - --tw-tracking: var(--tracking-wider); - letter-spacing: var(--tracking-wider); - } - .text-blue-600 { - color: var(--color-blue-600); - } - .text-gray-600 { - color: var(--color-gray-600); - } - .text-gray-900 { - color: var(--color-gray-900); - } - .text-sky-500 { - color: var(--color-sky-500); - } - .text-slate-500 { - color: var(--color-slate-500); - } - .text-slate-700 { - color: var(--color-slate-700); - } - .text-slate-900 { - color: var(--color-slate-900); - } - .text-white { - color: var(--color-white); - } - .text-zinc-500 { - color: var(--color-zinc-500); - } - .text-zinc-900 { - color: var(--color-zinc-900); - } - .antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - .shadow-lg { - --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - .shadow-md { - --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - 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); - } - .shadow-black\/5 { - --tw-shadow-color: color-mix(in srgb, #000 5%, transparent); - @supports (color: color-mix(in lab, red, red)) { - --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 5%, transparent) var(--tw-shadow-alpha), transparent); - } - } - .shadow-slate-900\/5 { - --tw-shadow-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 5%, transparent); - @supports (color: color-mix(in lab, red, red)) { - --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-slate-900) 5%, transparent) var(--tw-shadow-alpha), transparent); - } - } - .ring-black\/5 { - --tw-ring-color: color-mix(in srgb, #000 5%, transparent); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent); - } - } - .ring-slate-900\/10 { - --tw-ring-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 10%, transparent); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--color-slate-900) 10%, transparent); - } - } - .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, visibility, 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)); - } - .duration-500 { - --tw-duration: 500ms; - transition-duration: 500ms; - } - .prose-slate { - --tw-prose-body: oklch(37.2% 0.044 257.287); - --tw-prose-headings: oklch(20.8% 0.042 265.755); - --tw-prose-lead: oklch(44.6% 0.043 257.281); - --tw-prose-links: oklch(20.8% 0.042 265.755); - --tw-prose-bold: oklch(20.8% 0.042 265.755); - --tw-prose-counters: oklch(55.4% 0.046 257.417); - --tw-prose-bullets: oklch(86.9% 0.022 252.894); - --tw-prose-hr: oklch(92.9% 0.013 255.508); - --tw-prose-quotes: oklch(20.8% 0.042 265.755); - --tw-prose-quote-borders: oklch(92.9% 0.013 255.508); - --tw-prose-captions: oklch(55.4% 0.046 257.417); - --tw-prose-kbd: oklch(20.8% 0.042 265.755); - --tw-prose-kbd-shadows: NaN NaN NaN; - --tw-prose-code: oklch(20.8% 0.042 265.755); - --tw-prose-pre-code: oklch(92.9% 0.013 255.508); - --tw-prose-pre-bg: oklch(27.9% 0.041 260.031); - --tw-prose-th-borders: oklch(86.9% 0.022 252.894); - --tw-prose-td-borders: oklch(92.9% 0.013 255.508); - --tw-prose-invert-body: oklch(86.9% 0.022 252.894); - --tw-prose-invert-headings: #fff; - --tw-prose-invert-lead: oklch(70.4% 0.04 256.788); - --tw-prose-invert-links: #fff; - --tw-prose-invert-bold: #fff; - --tw-prose-invert-counters: oklch(70.4% 0.04 256.788); - --tw-prose-invert-bullets: oklch(44.6% 0.043 257.281); - --tw-prose-invert-hr: oklch(37.2% 0.044 257.287); - --tw-prose-invert-quotes: oklch(96.8% 0.007 247.896); - --tw-prose-invert-quote-borders: oklch(37.2% 0.044 257.287); - --tw-prose-invert-captions: oklch(70.4% 0.04 256.788); - --tw-prose-invert-kbd: #fff; - --tw-prose-invert-kbd-shadows: 255 255 255; - --tw-prose-invert-code: #fff; - --tw-prose-invert-pre-code: oklch(86.9% 0.022 252.894); - --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); - --tw-prose-invert-th-borders: oklch(44.6% 0.043 257.281); - --tw-prose-invert-td-borders: oklch(37.2% 0.044 257.287); - } - .group-hover\:fill-slate-500 { - &:is(:where(.group):hover *) { - @media (hover: hover) { - fill: var(--color-slate-500); - } - } - } - .before\:pointer-events-none { - &::before { - content: var(--tw-content); - pointer-events: none; - } - } - .before\:absolute { - &::before { - content: var(--tw-content); - position: absolute; - } - } - .before\:top-1\/2 { - &::before { - content: var(--tw-content); - top: calc(1/2 * 100%); - } - } - .before\:-left-1 { - &::before { - content: var(--tw-content); - left: calc(var(--spacing) * -1); - } - } - .before\:hidden { - &::before { - content: var(--tw-content); - display: none; - } - } - .before\:h-1\.5 { - &::before { - content: var(--tw-content); - height: calc(var(--spacing) * 1.5); - } - } - .before\:w-1\.5 { - &::before { - content: var(--tw-content); - width: calc(var(--spacing) * 1.5); - } - } - .before\:-translate-y-1\/2 { - &::before { - content: var(--tw-content); - --tw-translate-y: 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: calc(infinity * 1px); - } - } - .before\:bg-sky-500 { - &::before { - content: var(--tw-content); - background-color: var(--color-sky-500); - } - } - .before\:bg-slate-300 { - &::before { - content: var(--tw-content); - background-color: var(--color-slate-300); - } - } - .hover\:bg-green-700 { - &:hover { - @media (hover: hover) { - background-color: var(--color-green-700); - } - } - } - .hover\:bg-slate-100 { - &:hover { - @media (hover: hover) { - background-color: var(--color-slate-100); - } - } - } - .hover\:text-slate-600 { - &:hover { - @media (hover: hover) { - color: var(--color-slate-600); - } - } - } - .hover\:text-zinc-600 { - &:hover { - @media (hover: hover) { - color: var(--color-zinc-600); - } - } - } - .hover\:before\:block { - &:hover { - @media (hover: hover) { - &::before { - content: var(--tw-content); - display: block; - } - } - } - } - .sm\:gap-8 { - @media (width >= 40rem) { - gap: calc(var(--spacing) * 8); - } - } - .sm\:px-2 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 2); - } - } - .sm\:px-6 { - @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 6); - } - } - .md\:grow { - @media (width >= 48rem) { - flex-grow: 1; - } - } - .lg\:relative { - @media (width >= 64rem) { - position: relative; - } - } - .lg\:mt-4 { - @media (width >= 64rem) { - margin-top: calc(var(--spacing) * 4); - } - } - .lg\:block { - @media (width >= 64rem) { - display: block; - } - } - .lg\:hidden { - @media (width >= 64rem) { - display: none; - } - } - .lg\:max-w-none { - @media (width >= 64rem) { - max-width: none; - } - } - .lg\:flex-none { - @media (width >= 64rem) { - flex: none; - } - } - .lg\:space-y-4 { - @media (width >= 64rem) { - :where(& > :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))); - } - } - } - .lg\:border-slate-200 { - @media (width >= 64rem) { - border-color: var(--color-slate-200); - } - } - .lg\:px-8 { - @media (width >= 64rem) { - padding-inline: calc(var(--spacing) * 8); - } - } - .lg\:pr-0 { - @media (width >= 64rem) { - padding-right: calc(var(--spacing) * 0); - } - } - .lg\:pl-8 { - @media (width >= 64rem) { - padding-left: calc(var(--spacing) * 8); - } - } - .lg\:text-sm { - @media (width >= 64rem) { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } - } - .xl\:sticky { - @media (width >= 80rem) { - position: sticky; - } - } - .xl\:top-\[4\.75rem\] { - @media (width >= 80rem) { - top: 4.75rem; - } - } - .xl\:-mr-6 { - @media (width >= 80rem) { - margin-right: calc(var(--spacing) * -6); - } - } - .xl\:block { - @media (width >= 80rem) { - display: block; - } - } - .xl\:h-\[calc\(100vh-4\.75rem\)\] { - @media (width >= 80rem) { - height: calc(100vh - 4.75rem); - } - } - .xl\:w-72 { - @media (width >= 80rem) { - width: calc(var(--spacing) * 72); - } - } - .xl\:flex-none { - @media (width >= 80rem) { - flex: none; - } - } - .xl\:overflow-y-auto { - @media (width >= 80rem) { - overflow-y: auto; - } - } - .xl\:px-12 { - @media (width >= 80rem) { - padding-inline: calc(var(--spacing) * 12); - } - } - .xl\:px-16 { - @media (width >= 80rem) { - padding-inline: calc(var(--spacing) * 16); - } - } - .xl\:py-16 { - @media (width >= 80rem) { - padding-block: calc(var(--spacing) * 16); - } - } - .xl\:pr-6 { - @media (width >= 80rem) { - padding-right: calc(var(--spacing) * 6); - } - } - .xl\:pr-16 { - @media (width >= 80rem) { - padding-right: calc(var(--spacing) * 16); - } - } - .dark\:block { - &:where(.dark, .dark *) { - display: block; - } - } - .dark\:hidden { - &:where(.dark, .dark *) { - display: none; - } - } - .dark\:border-slate-800 { - &:where(.dark, .dark *) { - border-color: var(--color-slate-800); - } - } - .dark\:bg-slate-700 { - &:where(.dark, .dark *) { - background-color: var(--color-slate-700); - } - } - .dark\:bg-slate-800 { - &:where(.dark, .dark *) { - background-color: var(--color-slate-800); - } - } - .dark\:bg-slate-900 { - &:where(.dark, .dark *) { - background-color: var(--color-slate-900); - } - } - .dark\:bg-slate-900\/75 { - &:where(.dark, .dark *) { - background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 75%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-slate-900) 75%, transparent); - } - } - } - .dark\:text-slate-300 { - &:where(.dark, .dark *) { - color: var(--color-slate-300); - } - } - .dark\:text-slate-400 { - &:where(.dark, .dark *) { - color: var(--color-slate-400); - } - } - .dark\:text-white { - &:where(.dark, .dark *) { - color: var(--color-white); - } - } - .dark\:text-zinc-400 { - &:where(.dark, .dark *) { - color: var(--color-zinc-400); - } - } - .dark\:shadow-none { - &:where(.dark, .dark *) { - --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); - } - } - .dark\:ring-0 { - &:where(.dark, .dark *) { - --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); - } - } - .dark\:ring-white\/5 { - &:where(.dark, .dark *) { - --tw-ring-color: color-mix(in srgb, #fff 5%, transparent); - @supports (color: color-mix(in lab, red, red)) { - --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent); - } - } - } - .dark\:backdrop-blur { - &:where(.dark, .dark *) { - --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,); - } - } - .dark\:prose-invert { - &:where(.dark, .dark *) { - --tw-prose-body: var(--tw-prose-invert-body); - --tw-prose-headings: var(--tw-prose-invert-headings); - --tw-prose-lead: var(--tw-prose-invert-lead); - --tw-prose-links: var(--tw-prose-invert-links); - --tw-prose-bold: var(--tw-prose-invert-bold); - --tw-prose-counters: var(--tw-prose-invert-counters); - --tw-prose-bullets: var(--tw-prose-invert-bullets); - --tw-prose-hr: var(--tw-prose-invert-hr); - --tw-prose-quotes: var(--tw-prose-invert-quotes); - --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); - --tw-prose-captions: var(--tw-prose-invert-captions); - --tw-prose-kbd: var(--tw-prose-invert-kbd); - --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows); - --tw-prose-code: var(--tw-prose-invert-code); - --tw-prose-pre-code: var(--tw-prose-invert-pre-code); - --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); - --tw-prose-th-borders: var(--tw-prose-invert-th-borders); - --tw-prose-td-borders: var(--tw-prose-invert-td-borders); - } - } - .dark\:ring-inset { - &:where(.dark, .dark *) { - --tw-ring-inset: inset; - } - } - .dark\:group-hover\:fill-slate-300 { - &:where(.dark, .dark *) { - &:is(:where(.group):hover *) { - @media (hover: hover) { - fill: var(--color-slate-300); - } - } - } - } - .dark\:before\:bg-slate-700 { - &:where(.dark, .dark *) { - &::before { - content: var(--tw-content); - background-color: var(--color-slate-700); - } - } - } - .dark\:hover\:bg-slate-700\/50 { - &:where(.dark, .dark *) { - &:hover { - @media (hover: hover) { - background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent); - } - } - } - } - } - .dark\:hover\:text-slate-300 { - &:where(.dark, .dark *) { - &:hover { - @media (hover: hover) { - color: var(--color-slate-300); - } - } - } - } - .dark\:hover\:text-zinc-300 { - &:where(.dark, .dark *) { - &:hover { - @media (hover: hover) { - color: var(--color-zinc-300); - } - } - } - } -} -.prose pre { - position: relative; - border-radius: 0.75rem; - background-color: rgb(15 23 42); - border: 1px solid rgb(30 41 59); - box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - overflow-x: auto; -} -.prose pre code { - background-color: transparent !important; - border-radius: 0; - padding: 0; - color: rgb(226 232 240); - font-size: 0.875rem; - line-height: 1.7; - font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Cascadia Code', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; -} -.prose pre code .hljs-keyword { - color: rgb(168 85 247); -} -.prose pre code .hljs-string { - color: rgb(34 197 94); -} -.prose pre code .hljs-comment { - color: rgb(148 163 184); - font-style: italic; -} -.prose pre code .hljs-function { - color: rgb(59 130 246); -} -.prose pre code .hljs-number { - color: rgb(251 146 60); -} -.prose :not(pre) > code { - background-color: rgb(51 65 85) !important; - color: rgb(226 232 240) !important; - padding: 0.25rem 0.5rem !important; - border-radius: 0.375rem !important; - font-size: 0.875rem !important; - font-weight: 500 !important; -} -.prose code::before, .prose code::after { - content: none !important; -} -@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-space-x-reverse { - syntax: "*"; - inherits: false; - initial-value: 0; -} -@property --tw-border-style { - syntax: "*"; - inherits: false; - initial-value: solid; -} -@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: ""; - 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: ""; - 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: ""; - inherits: false; - initial-value: 0px; -} -@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-duration { - syntax: "*"; - inherits: false; -} -@property --tw-content { - syntax: "*"; - initial-value: ""; - inherits: false; -} -@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-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; -} -@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-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-space-x-reverse: 0; - --tw-border-style: solid; - --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-duration: initial; - --tw-content: ""; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-translate-z: 0; - --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; - } - } -} +@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-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-space-x-reverse:0;--tw-border-style:solid;--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-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-content:"";--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-sky-500:oklch(68.5% .169 237.323);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-900:oklch(37.9% .146 265.522);--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-slate-950:oklch(12.9% .042 264.695);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-900:oklch(21% .034 264.665);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-900:oklch(21% .006 285.885);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-3xl:48rem;--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-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:.05em;--radius-lg:.5rem;--radius-xl:.75rem;--blur-sm:8px;--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,ui-sans-serif,system-ui,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{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-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-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}:-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}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.inset-y-0{inset-block:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-\[4\.75rem\]{top:4.75rem}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-50{z-index:50}.z-\[70\]{z-index:70}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);margin-top:1.2em;margin-bottom:1.2em;font-size:1.25em;line-height:1.6}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);font-weight:500;text-decoration:underline}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:decimal}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em;list-style-type:disc}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-counters);font-weight:400}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.25em;font-weight:600}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em;font-style:italic;font-weight:500}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:0;margin-bottom:.888889em;font-size:2.25em;font-weight:800;line-height:1.11111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:900}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:2em;margin-bottom:1em;font-size:1.5em;font-weight:700;line-height:1.33333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:800}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.6em;margin-bottom:.6em;font-size:1.25em;font-weight:600;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:700}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);margin-top:1.5em;margin-bottom:.5em;font-weight:600;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:700}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em;display:block}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;border-radius:.3125rem;padding-inline-start:.375em;font-family:inherit;font-size:.875em;font-weight:500}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-size:.875em;font-weight:600}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before,.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);padding-top:.857143em;padding-inline-end:1.14286em;padding-bottom:.857143em;border-radius:.375rem;margin-top:1.71429em;margin-bottom:1.71429em;padding-inline-start:1.14286em;font-size:.875em;font-weight:400;line-height:1.71429;overflow-x:auto}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;background-color:#0000;border-width:0;border-radius:0;padding:0}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before,.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){table-layout:auto;width:100%;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.71429}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);vertical-align:bottom;padding-inline-end:.571429em;padding-bottom:.571429em;padding-inline-start:.571429em;font-weight:600}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);margin-top:.857143em;font-size:.875em;line-height:1.42857}.prose{--tw-prose-body:oklch(37.3% .034 259.733);--tw-prose-headings:oklch(21% .034 264.665);--tw-prose-lead:oklch(44.6% .03 256.802);--tw-prose-links:oklch(21% .034 264.665);--tw-prose-bold:oklch(21% .034 264.665);--tw-prose-counters:oklch(55.1% .027 264.364);--tw-prose-bullets:oklch(87.2% .01 258.338);--tw-prose-hr:oklch(92.8% .006 264.531);--tw-prose-quotes:oklch(21% .034 264.665);--tw-prose-quote-borders:oklch(92.8% .006 264.531);--tw-prose-captions:oklch(55.1% .027 264.364);--tw-prose-kbd:oklch(21% .034 264.665);--tw-prose-kbd-shadows:NaN NaN NaN;--tw-prose-code:oklch(21% .034 264.665);--tw-prose-pre-code:oklch(92.8% .006 264.531);--tw-prose-pre-bg:oklch(27.8% .033 256.848);--tw-prose-th-borders:oklch(87.2% .01 258.338);--tw-prose-td-borders:oklch(92.8% .006 264.531);--tw-prose-invert-body:oklch(87.2% .01 258.338);--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:oklch(70.7% .022 261.325);--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:oklch(70.7% .022 261.325);--tw-prose-invert-bullets:oklch(44.6% .03 256.802);--tw-prose-invert-hr:oklch(37.3% .034 259.733);--tw-prose-invert-quotes:oklch(96.7% .003 264.542);--tw-prose-invert-quote-borders:oklch(37.3% .034 259.733);--tw-prose-invert-captions:oklch(70.7% .022 261.325);--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:oklch(87.2% .01 258.338);--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:oklch(44.6% .03 256.802);--tw-prose-invert-td-borders:oklch(37.3% .034 259.733);font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.571429em;padding-inline-end:.571429em;padding-bottom:.571429em;padding-inline-start:.571429em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.-mr-6{margin-right:calc(var(--spacing)*-6)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.-ml-0\.5{margin-left:calc(var(--spacing)*-.5)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-\[calc\(100vh-4\.75rem\)\]{height:calc(100vh - 4.75rem)}.h-full{height:100%}.min-h-full{min-height:100%}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-36{width:calc(var(--spacing)*36)}.w-48{width:calc(var(--spacing)*48)}.w-56{width:calc(var(--spacing)*56)}.w-64{width:calc(var(--spacing)*64)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-none{max-width:none}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-auto{flex:auto}.flex-none{flex:none}.basis-0{flex-basis:calc(var(--spacing)*0)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}: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-9>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*9)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*9)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-slate-100{border-color:var(--color-slate-100)}.bg-black\/30{background-color:#0000004d}@supports (color:color-mix(in lab, red, red)){.bg-black\/30{background-color:color-mix(in oklab,var(--color-black)30%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-900\/20{background-color:#1c398e33}@supports (color:color-mix(in lab, red, red)){.bg-blue-900\/20{background-color:color-mix(in oklab,var(--color-blue-900)20%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-slate-950\/60{background-color:#02061899}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/60{background-color:color-mix(in oklab,var(--color-slate-950)60%,transparent)}}.bg-white{background-color:var(--color-white)}.bg-white\/75{background-color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.bg-white\/75{background-color:color-mix(in oklab,var(--color-white)75%,transparent)}}.fill-slate-400{fill:var(--color-slate-400)}.stroke-sky-500{stroke:var(--color-sky-500)}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-5{padding-block:calc(var(--spacing)*5)}.py-8{padding-block:calc(var(--spacing)*8)}.py-16{padding-block:calc(var(--spacing)*16)}.pt-6{padding-top:calc(var(--spacing)*6)}.pr-6{padding-right:calc(var(--spacing)*6)}.pr-8{padding-right:calc(var(--spacing)*8)}.pb-12{padding-bottom:calc(var(--spacing)*12)}.pl-0\.5{padding-left:calc(var(--spacing)*.5)}.pl-3\.5{padding-left:calc(var(--spacing)*3.5)}.font-sans{font-family:var(--font-sans)}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.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-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-blue-600{color:var(--color-blue-600)}.text-gray-600{color:var(--color-gray-600)}.text-gray-900{color:var(--color-gray-900)}.text-sky-500{color:var(--color-sky-500)}.text-slate-500{color:var(--color-slate-500)}.text-slate-700{color:var(--color-slate-700)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.text-zinc-500{color:var(--color-zinc-500)}.text-zinc-900{color:var(--color-zinc-900)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);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-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px 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)}.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)}.shadow-slate-900\/5{--tw-shadow-color:#0f172b0d}@supports (color:color-mix(in lab, red, red)){.shadow-slate-900\/5{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-slate-900)5%,transparent)var(--tw-shadow-alpha),transparent)}}.ring-slate-900\/10{--tw-ring-color:#0f172b1a}@supports (color:color-mix(in lab, red, red)){.ring-slate-900\/10{--tw-ring-color:color-mix(in oklab,var(--color-slate-900)10%,transparent)}}.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,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-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,visibility,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-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))}.duration-500{--tw-duration:.5s;transition-duration:.5s}.prose-slate{--tw-prose-body:oklch(37.2% .044 257.287);--tw-prose-headings:oklch(20.8% .042 265.755);--tw-prose-lead:oklch(44.6% .043 257.281);--tw-prose-links:oklch(20.8% .042 265.755);--tw-prose-bold:oklch(20.8% .042 265.755);--tw-prose-counters:oklch(55.4% .046 257.417);--tw-prose-bullets:oklch(86.9% .022 252.894);--tw-prose-hr:oklch(92.9% .013 255.508);--tw-prose-quotes:oklch(20.8% .042 265.755);--tw-prose-quote-borders:oklch(92.9% .013 255.508);--tw-prose-captions:oklch(55.4% .046 257.417);--tw-prose-kbd:oklch(20.8% .042 265.755);--tw-prose-kbd-shadows:NaN NaN NaN;--tw-prose-code:oklch(20.8% .042 265.755);--tw-prose-pre-code:oklch(92.9% .013 255.508);--tw-prose-pre-bg:oklch(27.9% .041 260.031);--tw-prose-th-borders:oklch(86.9% .022 252.894);--tw-prose-td-borders:oklch(92.9% .013 255.508);--tw-prose-invert-body:oklch(86.9% .022 252.894);--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:oklch(70.4% .04 256.788);--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:oklch(70.4% .04 256.788);--tw-prose-invert-bullets:oklch(44.6% .043 257.281);--tw-prose-invert-hr:oklch(37.2% .044 257.287);--tw-prose-invert-quotes:oklch(96.8% .007 247.896);--tw-prose-invert-quote-borders:oklch(37.2% .044 257.287);--tw-prose-invert-captions:oklch(70.4% .04 256.788);--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:oklch(86.9% .022 252.894);--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:oklch(44.6% .043 257.281);--tw-prose-invert-td-borders:oklch(37.2% .044 257.287)}@media (hover:hover){.group-hover\:fill-slate-500:is(:where(.group):hover *){fill:var(--color-slate-500)}}.before\:pointer-events-none:before{content:var(--tw-content);pointer-events:none}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:top-1\/2:before{content:var(--tw-content);top:50%}.before\:-left-1:before{content:var(--tw-content);left:calc(var(--spacing)*-1)}.before\:hidden:before{content:var(--tw-content);display:none}.before\:h-1\.5:before{content:var(--tw-content);height:calc(var(--spacing)*1.5)}.before\:w-1\.5:before{content:var(--tw-content);width:calc(var(--spacing)*1.5)}.before\:-translate-y-1\/2:before{content:var(--tw-content);--tw-translate-y: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-sky-500:before{content:var(--tw-content);background-color:var(--color-sky-500)}.before\:bg-slate-300:before{content:var(--tw-content);background-color:var(--color-slate-300)}@media (hover:hover){.hover\:bg-green-700:hover{background-color:var(--color-green-700)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:text-slate-600:hover{color:var(--color-slate-600)}.hover\:text-zinc-600:hover{color:var(--color-zinc-600)}.hover\:before\:block:hover:before{content:var(--tw-content);display:block}}@media (min-width:40rem){.sm\:gap-8{gap:calc(var(--spacing)*8)}.sm\:px-2{padding-inline:calc(var(--spacing)*2)}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}}@media (min-width:48rem){.md\:grow{flex-grow:1}}@media (min-width:64rem){.lg\:relative{position:relative}.lg\:mt-4{margin-top:calc(var(--spacing)*4)}.lg\:block{display:block}.lg\:hidden{display:none}.lg\:max-w-none{max-width:none}.lg\:flex-none{flex:none}:where(.lg\: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)))}.lg\:border-slate-200{border-color:var(--color-slate-200)}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}.lg\:pr-0{padding-right:calc(var(--spacing)*0)}.lg\:pl-8{padding-left:calc(var(--spacing)*8)}.lg\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:80rem){.xl\:sticky{position:sticky}.xl\:top-\[4\.75rem\]{top:4.75rem}.xl\:-mr-6{margin-right:calc(var(--spacing)*-6)}.xl\:block{display:block}.xl\:h-\[calc\(100vh-4\.75rem\)\]{height:calc(100vh - 4.75rem)}.xl\:w-72{width:calc(var(--spacing)*72)}.xl\:flex-none{flex:none}.xl\:overflow-y-auto{overflow-y:auto}.xl\:px-12{padding-inline:calc(var(--spacing)*12)}.xl\:px-16{padding-inline:calc(var(--spacing)*16)}.xl\:py-12{padding-block:calc(var(--spacing)*12)}.xl\:pr-6{padding-right:calc(var(--spacing)*6)}.xl\:pr-16{padding-right:calc(var(--spacing)*16)}}.dark\:block:where(.dark,.dark *){display:block}.dark\:hidden:where(.dark,.dark *){display:none}.dark\:border-slate-800:where(.dark,.dark *){border-color:var(--color-slate-800)}.dark\:bg-slate-800:where(.dark,.dark *){background-color:var(--color-slate-800)}.dark\:bg-slate-900:where(.dark,.dark *){background-color:var(--color-slate-900)}.dark\:bg-slate-900\/75:where(.dark,.dark *){background-color:#0f172bbf}@supports (color:color-mix(in lab, red, red)){.dark\:bg-slate-900\/75:where(.dark,.dark *){background-color:color-mix(in oklab,var(--color-slate-900)75%,transparent)}}.dark\:text-slate-300:where(.dark,.dark *){color:var(--color-slate-300)}.dark\:text-slate-400:where(.dark,.dark *){color:var(--color-slate-400)}.dark\:text-white:where(.dark,.dark *){color:var(--color-white)}.dark\:text-zinc-400:where(.dark,.dark *){color:var(--color-zinc-400)}.dark\:shadow-none:where(.dark,.dark *){--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)}.dark\:ring-0:where(.dark,.dark *){--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)}.dark\:ring-white\/10:where(.dark,.dark *){--tw-ring-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:ring-white\/10:where(.dark,.dark *){--tw-ring-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.dark\:backdrop-blur:where(.dark,.dark *){--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,)}.dark\:prose-invert:where(.dark,.dark *){--tw-prose-body:var(--tw-prose-invert-body);--tw-prose-headings:var(--tw-prose-invert-headings);--tw-prose-lead:var(--tw-prose-invert-lead);--tw-prose-links:var(--tw-prose-invert-links);--tw-prose-bold:var(--tw-prose-invert-bold);--tw-prose-counters:var(--tw-prose-invert-counters);--tw-prose-bullets:var(--tw-prose-invert-bullets);--tw-prose-hr:var(--tw-prose-invert-hr);--tw-prose-quotes:var(--tw-prose-invert-quotes);--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);--tw-prose-captions:var(--tw-prose-invert-captions);--tw-prose-kbd:var(--tw-prose-invert-kbd);--tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);--tw-prose-code:var(--tw-prose-invert-code);--tw-prose-pre-code:var(--tw-prose-invert-pre-code);--tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);--tw-prose-th-borders:var(--tw-prose-invert-th-borders);--tw-prose-td-borders:var(--tw-prose-invert-td-borders)}@media (hover:hover){.dark\:group-hover\:fill-slate-300:where(.dark,.dark *):is(:where(.group):hover *){fill:var(--color-slate-300)}}.dark\:before\:bg-slate-700:where(.dark,.dark *):before{content:var(--tw-content);background-color:var(--color-slate-700)}@media (hover:hover){.dark\:hover\:bg-slate-700:where(.dark,.dark *):hover{background-color:var(--color-slate-700)}.dark\:hover\:bg-slate-700\/50:where(.dark,.dark *):hover{background-color:#31415880}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-slate-700\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab,var(--color-slate-700)50%,transparent)}}.dark\:hover\:text-slate-300:where(.dark,.dark *):hover{color:var(--color-slate-300)}.dark\:hover\:text-zinc-300:where(.dark,.dark *):hover{color:var(--color-zinc-300)}}.\[\&_h1\]\:scroll-mt-28 h1,.\[\&_h2\]\:scroll-mt-28 h2,.\[\&_h3\]\:scroll-mt-28 h3{scroll-margin-top:calc(var(--spacing)*28)}}[x-cloak]{display:none!important}.prose pre{background-color:#0f172a;border:1px solid #1e293b;border-radius:.75rem;position:relative;overflow-x:auto;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.prose pre code{color:#e2e8f0;border-radius:0;padding:0;font-family:Fira Code,JetBrains Mono,Monaco,Cascadia Code,Segoe UI Mono,Roboto Mono,Oxygen Mono,Ubuntu Monospace,Source Code Pro,Fira Mono,Droid Sans Mono,Courier New,monospace;font-size:.875rem;line-height:1.7;background-color:#0000!important}.prose pre code .hljs-keyword{color:#a855f7}.prose pre code .hljs-string{color:#22c55e}.prose pre code .hljs-comment{color:#94a3b8;font-style:italic}.prose pre code .hljs-function{color:#3b82f6}.prose pre code .hljs-number{color:#fb923c}.prose :not(pre)>code{color:#e2e8f0!important;background-color:#334155!important;border-radius:.375rem!important;padding:.25rem .5rem!important;font-size:.875rem!important;font-weight:500!important}.prose code:before,.prose code:after{content:none!important}@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-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@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:"";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:"";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:"";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-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-content{syntax:"*";inherits:false;initial-value:""}@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} \ No newline at end of file diff --git a/sln/src/Docs/wwwroot/favicon-16x16.png b/sln/src/Docs/wwwroot/favicon-16x16.png index 18875a4..38b1f31 100644 Binary files a/sln/src/Docs/wwwroot/favicon-16x16.png and b/sln/src/Docs/wwwroot/favicon-16x16.png differ diff --git a/sln/src/Docs/wwwroot/favicon-32x32.png b/sln/src/Docs/wwwroot/favicon-32x32.png index 2e3065f..1edcedf 100644 Binary files a/sln/src/Docs/wwwroot/favicon-32x32.png and b/sln/src/Docs/wwwroot/favicon-32x32.png differ diff --git a/sln/src/Docs/wwwroot/favicon.ico b/sln/src/Docs/wwwroot/favicon.ico index 719dd27..07950b7 100644 Binary files a/sln/src/Docs/wwwroot/favicon.ico and b/sln/src/Docs/wwwroot/favicon.ico differ diff --git a/sln/src/Docs/wwwroot/favicon.svg b/sln/src/Docs/wwwroot/favicon.svg new file mode 100644 index 0000000..c1762d2 --- /dev/null +++ b/sln/src/Docs/wwwroot/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sln/src/Docs/wwwroot/logo.png b/sln/src/Docs/wwwroot/logo.png deleted file mode 100644 index d75e5fd..0000000 Binary files a/sln/src/Docs/wwwroot/logo.png and /dev/null differ diff --git a/sln/src/Docs/wwwroot/logo.svg b/sln/src/Docs/wwwroot/logo.svg new file mode 100644 index 0000000..c1762d2 --- /dev/null +++ b/sln/src/Docs/wwwroot/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sln/src/Docs/wwwroot/site.webmanifest b/sln/src/Docs/wwwroot/site.webmanifest index 45dc8a2..a4eb6f7 100644 --- a/sln/src/Docs/wwwroot/site.webmanifest +++ b/sln/src/Docs/wwwroot/site.webmanifest @@ -1 +1,19 @@ -{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file +{ + "name": "FSharp.ViewEngine", + "short_name": "FSharp.ViewEngine", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#448cb6", + "background_color": "#ffffff", + "display": "standalone" +}