diff --git a/src/BlazeKit.Website.Islands/Components/Counter.razor b/src/BlazeKit.Website.Islands/Components/Counter.razor index 83acc9f..1845371 100644 --- a/src/BlazeKit.Website.Islands/Components/Counter.razor +++ b/src/BlazeKit.Website.Islands/Components/Counter.razor @@ -113,13 +113,10 @@

Conditional CSS Classes

-
diff --git a/src/BlazeKit.Website/Components/DocsSitemap.razor b/src/BlazeKit.Website/Components/DocsSitemap.razor index 836d544..a9507ea 100644 --- a/src/BlazeKit.Website/Components/DocsSitemap.razor +++ b/src/BlazeKit.Website/Components/DocsSitemap.razor @@ -49,7 +49,7 @@
@foreach (var heading in Schema.Headings) { - @heading.Title + @heading.Title.Replace("<","<").Replace(">",">") }
diff --git a/src/BlazeKit.Website/Content/Docs/BlazeKit-CLI.md b/src/BlazeKit.Website/Content/Docs/BlazeKit-CLI.md index 3a242db..44a4c29 100644 --- a/src/BlazeKit.Website/Content/Docs/BlazeKit-CLI.md +++ b/src/BlazeKit.Website/Content/Docs/BlazeKit-CLI.md @@ -1,25 +1,26 @@ --- -title: CLI - Docs - BlazeKit +title: Command-Line Interface category: Getting Started draft: false slug: blazekit-cli --- -# BlazeKit CLI -## Introduction -BlazeKit provides a CLI tool to create and build projects. -## Install +# Command-Line Interface +The CLI is designed to make getting started with the BlazeKit as easy as possible. It simplifies the process of adding third-party integrations like TailwindCSS, making it a no-brainer even for developers new to the framework. +Furthermore, the CLI simplifies app deployment by providing support for various hosting vendors such as Vercel or Azure. This means you can focus more on building your application and less on the intricacies of deployment. +In summary, the CLI is a powerful tool that accelerates development, simplifies integration and deployment, and ultimately enhances your productivity when building with BlazeKit. +# Install ```sh # Install the BlazeKit CLI dotnet tool install --global BlazeKit.CLI ``` -## Update +# Update The easiest way to update the BlazeKit CLI is to simply uninstall and reinstall it. ```sh # Update the BlazeKit CLI dotnet tool uninstall -g BlazeKit.CLI dotnet tool install -g BlazeKit.CLI ``` -## Create a Project +# Create a Project ```sh bkit new NextUnicorn ``` @@ -32,7 +33,7 @@ bkit run dev ``` And here it is, your first BalzeKit project 🎉 -## Build +# Build Building the is handled by the CLI as well. ```sh bkit build @@ -43,8 +44,8 @@ bkit build -o ./artifacts/static ``` This will build the app into the `./artifacts/static` directory -## Integrations -### TailwindCSS +# Integrations +## TailwindCSS ```sh bkit add tailwindcss ``` diff --git a/src/BlazeKit.Website/Content/Docs/Content-Collections.md b/src/BlazeKit.Website/Content/Docs/Content-Collections.md index 68acf93..51073be 100644 --- a/src/BlazeKit.Website/Content/Docs/Content-Collections.md +++ b/src/BlazeKit.Website/Content/Docs/Content-Collections.md @@ -1,16 +1,230 @@ --- -title: Content Collections - Docs - BlazeKit +title: Content Collections category: Core Concepts draft: false slug: content-collections --- # Content Collections +In BlazeKit, Content Collections are a core concept that allows you to manage and organize your content in a structured way. Similar to the [Astro](https://astro.build/) framework, a Content Collection in BlazeKit is any top-level directory inside the reserved `/Content` project directory. For example, `/Content/Blog` and `/Content/Authors` could be considered as Content Collections. +# What are Content Collections -## What are Content Collections -A content collection is any top-level directory inside the reserved `/Content` project directory, such as `/Content/Blog` and `/Content/Authors`. +Content Collections provide a way to group related content together. This could be blog posts, author profiles, product descriptions, or any other type of content your project requires. Each item within a Content Collection is a file, and the data within these files can be queried and used throughout your application. -## Defining Collections +This feature allows for a more organized project structure and makes it easier to manage content, especially in large projects. It also enables dynamic routing based on the content files, which can greatly simplify the creation of pages for individual content items. -## Querying Collections +In the following sections, we will discuss how to define, query, and generate routes from Content Collections in BlazeKit. +# Defining Collections +To define a Content Collection, create a new top-level directory inside the `/Content` directory in your project. Usually, the name of the directory represents the name of the Content Collection. For example, to create a Content Collection for blog posts, you would create a `/Content/Blog` directory. -## Generating Routes from Content +Inside this directory, each file represents an item in the collection. The file is a Markdown (.md) file. The frontmatter of the file can contain metadata about the content item. +Here's an example of a Content Collection class for a collection of documents: +```md +--- +title: My First Blog Post +date: 2022-01-01 +author: John Doe +--- + +This is my first blog post. +``` +## Frontmatter +Each Content Collection can have an associated [Frontmatter](https://frontmatter.codes/) Schema. This schema defines the structure of the metadata in the frontmatter of the content files in the collection. The schema is represented by a class that implements the `ISchema` interface from the `BlazeKit.Static.ContentCollections` namespace. +Here's an example of a schema class for a blog post: +```csharp +using BlazeKit.Static.ContentCollections; +using YamlDotNet.Serialization; + +public class BlogPostSchema : ISchema +{ + [YamlMember(Alias = "title")] + public string Title { get; set; } + [YamlMember(Alias = "author")] + public string Author { get; set; } + [YamlMember(Alias = "date")] + public DateTime Date { get; set; } + [YamlMember(Alias = "draft")] + public bool IsDraft { get; set; } + // The content of the markdown file + public bool Content { get; set; } +} +``` +In this example, the `BlogPostSchema` class defines the structure of the metadata in the frontmatter of the blog post files. Each property in the class corresponds to a field in the frontmatter. When you query the Blog collection, you can access the metadata of the blog posts through the properties of the `BlogPostSchema` class. For example, `post.Title` would give you the title of the blog post. + +Remember to replace the property names and types to match the fields in your frontmatter. The property names should be the same as the field names in the frontmatter, and the property types should be compatible with the field values. + +## IContentCollection +The `IContentCollection` interface in BlazeKit is a crucial part of the Content Collection system. It serves as a contract for all Content Collections, ensuring they provide certain functionalities that BlazeKit relies on to handle and serve content. + +Implementing the IContentCollection interface makes a Content Collection available to BlazeKit. This means BlazeKit can access, query, and generate routes for the content items in the collection. + +Here's the basic structure of the IContentCollection interface: +```csharp +public interface IContentCollection +{ + string Name { get; } + IEnumerable Items { get; } + string Route(ISchema item); +} +``` +The IContentCollection interface includes: +- Name: A string property that represents the name of the Content Collection. +- Items: An enumerable of `ISchema` objects that represents the content items in the collection. +- `Route(ISchema item)`: A method that takes an ISchema object and returns a string. This method defines the route for each item in the collection. +- When you create a Content Collection class, you need to implement the `IContentCollection` interface and provide implementations for the Name, Items, and `Route(ISchema item)` members. + +For example, here's how you might implement the IContentCollection interface for a Blog Content Collection: +```csharp +public sealed class BlogCollection : IContentCollection +{ + public string Name => "Blog"; + public IEnumerable Items { get; private set; } + + public DocsCollection(IEnumerable items) + { + Items = items; + } + + public string Route(ISchema item) + { + return $"/Blog/{(item as BlogPostSchema).Slug}"; + } +} +``` +## ContentCollectionEnvelope +The `ContentCollectionEnvelope` class is an abstract class that simplifies the process of implementing the `IContentCollection` interface. It provides a basic structure and common functionalities for a Content Collection, which you can then extend and customize to suit your needs. + +Here's a brief overview of how to use ContentCollectionEnvelope: +```csharp +public sealed class BlogCollection : ContentCollectionEnvelope +{ + public const string CollectionName = "Blog"; + public DocsCollection() : base( + CollectionName, + Path.Combine("Content", CollectionName), + md => { + var schema = md.GetFrontMatter(); + // Do additional stuff with the markdown content such a extracting headers for e.g. sitemaps + // ... + return schema; + }, + schema => (schema as BlogPostSchema).IsDraft == false // Filter out draft items + ) + { } + + public override string Route(ISchema item) + { + // Define the route for each item in the collection + return $"/Blog/{(item as BlogPostSchema).Slug}"; + } +} +``` +In this example, the `BlogCollection` class inherits from `ContentCollectionEnvelope` and provides implementations for the required methods. +The ContentCollectionEnvelope constructor takes three arguments: + +1. The name of the collection. +2. The path to the directory that contains the content files. +3. A function that parses the frontmatter and the content of the markdown files. +4. A function that filters the items in the collection. + +The `Route` method, which is abstract in `ContentCollectionEnvelope` and must be overridden, defines the route for each item in the collection. + +By using `ContentCollectionEnvelope`, you can create a Content Collection with less boilerplate code and a clear, consistent structure. This makes it easier to manage and extend your Content Collections as your project grows. + +## StaticServiceCollection +The `StaticServiceCollection` is a specialized service collection designed for static site generation. It's an implementation of the `IStaticServiceCollection` interface and is used to register and manage services that are required during the static site generation process. + +**Purpose** + +The main purpose of `StaticServiceCollection` is to provide a centralized location for registering and accessing services that are used in static site generation. This includes all Content Collections, which need to be added as KeyedSingleton services. A KeyedSingleton service is a service that is registered with a key and behaves like a singleton service + +In the context of `StaticServiceCollection`, each Content Collection is registered as a KeyedSingleton service. The key for each service is the name of the Content Collection, which allows the service to be retrieved based on the collection name. + +```csharp +/// +/// A static service collection that is used to build a static site +/// +public sealed class StaticServiceCollection : IStaticServiceCollection +{ + private readonly Func services; + + /// + /// A static service collection that is used to build a static site + /// + public StaticServiceCollection() :this( + new ServiceCollection() + ) + { } + + /// + /// A static service collection that is used to build a static site + /// + public StaticServiceCollection(IServiceCollection serviceCollection) + { + this.services = () => { + serviceCollection.AddKeyedSingleton(BlogCollection.CollectionName, new BlogCollection()); + // ... + return serviceCollection; + }; + } + public IServiceCollection Services() => services(); +} +``` + +By using `StaticServiceCollection`, you can manage all the services required for static site generation in a consistent and organized way. This makes it easier to add, remove, and access services as your project grows. + +# Query and Render Content from Collections +In BlazeKit, you can access and render content from a specific item in a Content Collection by querying the collection and filtering the items based on your criteria. +1. Access the Content Collection +You can access the `BlogCollection` in your `Page.razor` by injecting it: +```csharp +[Inject(Key = DocsCollection.CollectionName)] +public DocsCollection Collection {get;set;} +``` +1. Query the Content Collection +To access a specific item in the `BlogCollection`, you can query the collection and filter the items based on e.g. the Slug: +```csharp +this.docItem = + collection.Items.Cast().FirstOrDefault( + item => item.Slug.Equals(Slug, StringComparison.InvariantCultureIgnoreCase) + ); +``` +In this code, `FirstOrDefault` is a LINQ method that returns the first item that matches the provided condition, or null if no items match the condition. +1. Render the Content +Finally, you can render the content of the item in your Razor file: +```razor +@((MarkupString)docItem.Content) +``` + +The full `Page.razor` might look like this: +```razor +@using BlazeKit.Web.Components +@using BlazeKit.Web +@inherits PageComponentBase +@code { + + [Inject(Key = BlogCollection.CollectionName)] + public BlogCollection Collection {get;set;} + + private BlogPostSchema? blogPostItem; + + protected override Task ServerLoadAsync(Uri route, Response response) + { + this.blogPostItem = + Collection.Items.Cast().FirstOrDefault( + item => item.Slug.Equals(Slug, StringComparison.InvariantCultureIgnoreCase) + ); + + // We handle a page not found here. + // This is unlikly to happen since SSG will only have valid slug's. + if (this.blogPostItem is null) + { + throw new ApplicationException($"The Slug '{Slug}' does not exist in {Collection.CollectionName}"); + } + + return Task.FromResult(default(PageDataBase)); + } +} +@blogPostItem.Title - MyBlog +

@blogPostItem.Author published on @blogPostItem.Date.ToOrdinalWords()

+@((MarkupString)blogPostItem.Content) +``` diff --git a/src/BlazeKit.Website/Content/Docs/DocsCollection.cs b/src/BlazeKit.Website/Content/Docs/DocsCollection.cs index 20387b4..b022cd4 100644 --- a/src/BlazeKit.Website/Content/Docs/DocsCollection.cs +++ b/src/BlazeKit.Website/Content/Docs/DocsCollection.cs @@ -4,23 +4,6 @@ using System.Text.RegularExpressions; using YamlDotNet.Serialization; namespace BlazeKit.Website; -public sealed class DocsSchema : ISchema -{ - [YamlMember(Alias = "title")] - public required string Title { get; set; } - [YamlMember(Alias = "category")] - public required string Category { get; set; } = ""; - [YamlMember(Alias = "slug")] - public required string Slug { get; set; } - [YamlMember(Alias = "draft")] - public required bool IsDraft { get; set; } - public required string Content { get;set; } - - public IList Headings { get; set; } = new List(); - - public record Heading(int Level, string Title, string Id); -} - public sealed class DocsCollection : ContentCollectionEnvelope { public const string CollectionName = "Docs"; diff --git a/src/BlazeKit.Website/Content/Docs/DocsSchema.cs b/src/BlazeKit.Website/Content/Docs/DocsSchema.cs new file mode 100644 index 0000000..0cf3a44 --- /dev/null +++ b/src/BlazeKit.Website/Content/Docs/DocsSchema.cs @@ -0,0 +1,20 @@ +using BlazeKit.Static.ContentCollections; +using YamlDotNet.Serialization; + +namespace BlazeKit.Website; +public sealed class DocsSchema : ISchema +{ + [YamlMember(Alias = "title")] + public required string Title { get; set; } + [YamlMember(Alias = "category")] + public required string Category { get; set; } = ""; + [YamlMember(Alias = "slug")] + public required string Slug { get; set; } + [YamlMember(Alias = "draft")] + public required bool IsDraft { get; set; } + public required string Content { get;set; } + + public IList Headings { get; set; } = new List(); + + public record Heading(int Level, string Title, string Id); +} diff --git a/src/BlazeKit.Website/Content/Docs/Installation.md b/src/BlazeKit.Website/Content/Docs/Installation.md index 22f19c0..f639df4 100644 --- a/src/BlazeKit.Website/Content/Docs/Installation.md +++ b/src/BlazeKit.Website/Content/Docs/Installation.md @@ -1,17 +1,16 @@ --- -title: Installation - Docs - BlazeKit +title: Installation category: Getting Started draft: false slug: installation --- -# Installation -## Requirements +# Requirements Before creating your first BlazeKit project, you should ensure that your local machine has: - .NET 8 - you can find the download [here](https://dotnet.microsoft.com/en-us/download){target="_blank"} That's it 👍 -## Create an app using the CLI +# Create an app using the CLI After you have installed the required dependencies, the easiest way to get a project up an running is by using the BlazeKit CLI. ```shell # Install the BlazeKit CLI @@ -30,7 +29,7 @@ bkit run dev ``` And here it is, your first BalzeKit project 🎉 -## Updating the BlazeKit CLI +# Updating the BlazeKit CLI The easiest way to update the BlazeKit CLI is to simply uninstall and reinstall it. ```shell dotnet tool uninstall -g BlazeKit.CLI diff --git a/src/BlazeKit.Website/Content/Docs/Introduction.md b/src/BlazeKit.Website/Content/Docs/Introduction.md index 4566eaa..1f70b4e 100644 --- a/src/BlazeKit.Website/Content/Docs/Introduction.md +++ b/src/BlazeKit.Website/Content/Docs/Introduction.md @@ -1,5 +1,5 @@ --- -title: Introduction - Docs - BlazeKit +title: Introduction category: Getting Started draft: false slug: introduction diff --git a/src/BlazeKit.Website/Content/Docs/Project-Structure.md b/src/BlazeKit.Website/Content/Docs/Project-Structure.md index 88821f5..dc58c9b 100644 --- a/src/BlazeKit.Website/Content/Docs/Project-Structure.md +++ b/src/BlazeKit.Website/Content/Docs/Project-Structure.md @@ -1,5 +1,5 @@ --- -title: Project Structure - Docs - BlazeKit +title: Project Structure category: Getting Started draft: false slug: project-structure diff --git a/src/BlazeKit.Website/Content/Docs/Reactivity.md b/src/BlazeKit.Website/Content/Docs/Reactivity.md index d85b247..817add0 100644 --- a/src/BlazeKit.Website/Content/Docs/Reactivity.md +++ b/src/BlazeKit.Website/Content/Docs/Reactivity.md @@ -4,9 +4,12 @@ category: Reactivity draft: false slug: reactivity --- -# Overview -BlazeKit provides a set of reactive primitives which are inspired by the signals pattern. -All primitives are based on the `ISignal` interface which is defined as follows: +# Reactivity +BlazeKit with a reactivity system that allows developers to create interactive and dynamic web applications. This system is built around the concept of reactive primitives, which are inspired by the signals pattern. Reactive primitives are objects that hold a value and notify subscribers when this value changes. + +# ISignal<T> +The foundation of the reactivity system is the `ISignal` interface. This interface encapsulates a value of type T and provides a Subscribe method for subscribing to changes in the value. + ```csharp public interface ISignal { @@ -15,50 +18,53 @@ public interface ISignal } ``` -## Signal +# Signal +The `Signal` class is a fundamental part of the reactivity system. It is a type of reactive primitive that encapsulates a value and notifies all subscribers when the value changes. A Signal encapsulates a value of type `T` and notifies all subscribers when the value changes. +The main purpose of the `Signal` class is to hold a value and allow components to react to changes in this value. This makes it easy to create dynamic and interactive applications where e.g. the UI updates in response to changes in the application's state. + ```csharp +// Create a new signal var counter = new Signal(0); -``` -When ever the value of `counter` changes, the component will be re-rendered. -A signal can be subscribed by calling the `Subscribe` method. -```csharp -counter.Subscribe((value) => { - Debug.WriteLine($"Counter is: {value}"); -}); -``` +// Subscribe to changes in the signal +counter.Subscribe(value => Debug.WriteLine($"Counter is: {value}")); -## Computed -This class is used to derive a new value from one or more other signals. -```csharp - var doubled = - new Computed( - () => { - // side-effect free -> do not change the state in derived states - var doubled = Counter.Value * 2; - Debug.WriteLine($"Doubled is: {doubled}"); - return doubled; - } - ); +// Change the value of the signal +counter.Value = 1; // This will trigger the subscription and print "Counter is: 1" to the debug console ``` -Since the `Computed` class is a `ISignal` it can be subscribed as well. +In this example, a `Signal` is created that holds an integer value. The `Subscribe` method is used to subscribe to changes in the value of the signal. Whenever the value of the signal changes, the provided function is called with the new value. + +The `Signal` class provides a simple and efficient way to manage state in a application. By using signals, you can create components that automatically update in response to changes in your application's state. + +# Computed +The `Computed` class is used to derive a new value from one or more other signals. It's a type of reactive primitive that automatically updates its value when any of its dependencies change. ```csharp -doubled.Subscribe((value) => { - Debug.WriteLine($"Doubled is: {value}"); -}); +// Define signals for the length and width of the rectangle +var length = new Signal(5.0); +var width = new Signal(10.0); +// Define a computed for the area of the rectangle +var area = new Computed(() => length.Value * width.Value); +// Subscribe to changes in the area +area.Subscribe(value => Debug.WriteLine($"Area is: {value}")); ``` -## Effect -An effect is used to execute a side-effect when signals change. +# Effect + An `Effect` class is used to handle side effects in response to changes in signals. A side effect is any operation that interacts with the outside world, such as writing to the console, making a network request, or updating the DOM. + +The Effect class takes a function in its constructor, which is executed whenever any of the signals that it depends on change. Here's an example: ```csharp new Effect(() => { Debug.WriteLine($"Counter is: {counter}"); } ); ``` -# Blazor specific Signals +In this example, an `Effect` is created that depends on the counter signal. The function passed to the `Effect` constructor writes the current value of the counter to the debug console. This function is executed whenever the counter changes. + +This allows you to easily perform side effects in response to changes in your application's state. The `Effect` class ensures that your side effects are always in sync with your state, and it manages the subscriptions to the signals for you. + +# Blazor Signals These primitives can be used to build reactive components which are updated when the state changes. Have you ever forget the `StateHasChanged` call after updating a value? I bet you did. With the Blazor specific `Signals` this will not happen again. The call to `StateHasChanged` will be handled for you when ever the value of the `Signal` changes. 🎉 diff --git a/src/BlazeKit.Website/Content/Docs/Roadmap.md b/src/BlazeKit.Website/Content/Docs/Roadmap.md index 2bdcc59..7fc9375 100644 --- a/src/BlazeKit.Website/Content/Docs/Roadmap.md +++ b/src/BlazeKit.Website/Content/Docs/Roadmap.md @@ -3,5 +3,5 @@ title: Roadmap - Docs - BlazeKit draft: false slug: roadmap --- -# Project Structure +# Roadmap *TODO* diff --git a/src/BlazeKit.Website/Content/Docs/Routing.md b/src/BlazeKit.Website/Content/Docs/Routing.md index 0b1e270..4fbcb07 100644 --- a/src/BlazeKit.Website/Content/Docs/Routing.md +++ b/src/BlazeKit.Website/Content/Docs/Routing.md @@ -1,11 +1,19 @@ --- -title: Routing - Docs - BlazeKit +title: Routing category: Core Concepts draft: false slug: routing --- -# File-based Routing +# Routing +Routing is a fundamental concept in web apps. It is the mechanism by which users are directed to different parts of your app based on the URL they request. + +In a web application, routing plays a crucial role in defining the user experience. It allows users to navigate through the application and access its various features. Without routing, every request would lead to the same place, making the application essentially a single page. + +Moreover, routing is important for SEO (Search Engine Optimization). Well-structured URLs and proper routing can help improve the visibility of your web application in search engine results. + +# Page Routes The routing in BlazeKit is based on the filesystem. Each route is represented by a folder which contains a `Page.razor` or a `Page.md` file. +In the context of BlazeKit, routing is file-based. This means that the structure of the routes is determined by the filesystem, making it intuitive and easy to manage, even for large applications. The folder structure is used to define the route of the page. For example the following folder structure: ```none Routes/ diff --git a/src/BlazeKit.Website/Routes/Docs/[Slug]/Page.razor b/src/BlazeKit.Website/Routes/Docs/[Slug]/Page.razor index 0f56d95..86102be 100644 --- a/src/BlazeKit.Website/Routes/Docs/[Slug]/Page.razor +++ b/src/BlazeKit.Website/Routes/Docs/[Slug]/Page.razor @@ -22,6 +22,9 @@ response?.SetStatusCode(404); } + // add the title heading to the docITem.HEading + @* docItem.Headings.Prepend(new DocsSchema.Heading(1,docItem.Title,"doc-section")); *@ + return Task.FromResult(default(PageDataBase)); } } @@ -30,7 +33,7 @@

🫢 Whoooops.... Sorry there is nothing at this address

} else { - @docItem.Title + @docItem.Title - Docs - BlazeKit @if(!string.IsNullOrEmpty(docItem.Category)) { diff --git a/src/BlazeKit.Website/wwwroot/css/app.css b/src/BlazeKit.Website/wwwroot/css/app.css index 23e0610..c2d429a 100644 --- a/src/BlazeKit.Website/wwwroot/css/app.css +++ b/src/BlazeKit.Website/wwwroot/css/app.css @@ -1 +1,2569 @@ -/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#6b7280;border-width:1px;color:#2563eb;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-bottom:1.2em;margin-top:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);font-weight:500;text-decoration:underline}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-bottom:1.25em;margin-top:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-bottom:1.25em;margin-top:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-counters);font-weight:400}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-bottom:3em;margin-top:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){border-left-color:var(--tw-prose-quote-borders);border-left-width:.25rem;color:var(--tw-prose-quotes);font-style:italic;font-weight:500;margin-bottom:1.6em;margin-top:1.6em;padding-left:1em;quotes:"\201C""\201D""\2018""\2019"}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-size:2.25em;font-weight:800;line-height:1.1111111;margin-bottom:.8888889em;margin-top:0}.prose :where(h1 strong):not(:where([class~=not-prose] *)){color:inherit;font-weight:900}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-size:1.5em;font-weight:700;line-height:1.3333333;margin-bottom:1em;margin-top:2em}.prose :where(h2 strong):not(:where([class~=not-prose] *)){color:inherit;font-weight:800}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-size:1.25em;font-weight:600;line-height:1.6;margin-bottom:.6em;margin-top:1.6em}.prose :where(h3 strong):not(:where([class~=not-prose] *)){color:inherit;font-weight:700}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;line-height:1.5;margin-bottom:.5em;margin-top:1.5em}.prose :where(h4 strong):not(:where([class~=not-prose] *)){color:inherit;font-weight:700}.prose :where(img):not(:where([class~=not-prose] *)){margin-bottom:2em;margin-top:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-bottom:0;margin-top:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-size:.875em;font-weight:600}.prose :where(code):not(:where([class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){background-color:var(--tw-prose-pre-bg);border-radius:.375rem;color:var(--tw-prose-pre-code);font-size:.875em;font-weight:400;line-height:1.7142857;margin-bottom:1.7142857em;margin-top:1.7142857em;overflow-x:auto;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:initial;border-radius:0;border-width:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding:0}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){font-size:.875em;line-height:1.7142857;margin-bottom:2em;margin-top:2em;table-layout:auto;text-align:left;width:100%}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-color:var(--tw-prose-th-borders);border-bottom-width:1px}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;padding-bottom:.5714286em;padding-left:.5714286em;padding-right:.5714286em;vertical-align:bottom}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-color:var(--tw-prose-td-borders);border-bottom-width:1px}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:initial}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-color:var(--tw-prose-th-borders);border-top-width:1px}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(p):not(:where([class~=not-prose] *)){margin-bottom:1.25em;margin-top:1.25em}.prose :where(video):not(:where([class~=not-prose] *)){margin-bottom:2em;margin-top:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-bottom:2em;margin-top:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-bottom:.5em;margin-top:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-bottom:.75em;margin-top:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-bottom:.75em;margin-top:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-sm :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-bottom:.5714286em;margin-top:.5714286em}.prose-sm :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-base :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-bottom:.75em;margin-top:.75em}.prose-base :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-base :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-lg :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-bottom:.8888889em;margin-top:.8888889em}.prose-lg :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-lg :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-bottom:.8em;margin-top:.8em}.prose-xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-2xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-bottom:.8333333em;margin-top:.8333333em}.prose-2xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-2xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.static{position:static}.fixed{position:fixed}.relative{position:relative}.left-\[80\%\]{left:80%}.top-0{top:0}.z-10{z-index:10}.z-\[1\]{z-index:1}.m-1{margin:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.-mr-1{margin-right:-.25rem}.mb-16{margin-bottom:4rem}.mb-8{margin-bottom:2rem}.ml-10{margin-left:2.5rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-8{margin-left:2rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-\[80px\]{margin-top:80px}.inline{display:inline}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-20{height:5rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-auto{height:auto}.h-screen{height:100vh}.max-h-\[400px\]{max-height:400px}.max-h-\[calc\(100\%-50px\)\]{max-height:calc(100% - 50px)}.min-h-\[calc\(100vh-var\(--header-height\)\)\]{min-height:calc(100vh - var(--header-height))}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-5{width:1.25rem}.w-52{width:13rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-auto{width:auto}.w-full{width:100%}.max-w-4xl{max-width:56rem}.max-w-full{max-width:100%}.max-w-xs{max-width:20rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-flow-col{grid-auto-flow:column}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-items-center{justify-items:center}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-bl-lg{border-bottom-left-radius:.5rem}.rounded-tr-lg{border-top-right-radius:.5rem}.bg-\[\#1971c2\]{--tw-bg-opacity:1;background-color:rgb(25 113 194/var(--tw-bg-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(134 239 172/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.via-blue-800{--tw-gradient-to:#1e40af00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1e40af var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.fill-current{fill:currentColor}.p-1{padding:.25rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.pb-12{padding-bottom:3rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-7xl{font-size:4.5rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-transparent{color:#0000}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.no-underline{text-decoration-line:none}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.invert{--tw-invert:invert(100%)}.filter,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}html{scroll-behavior:smooth}.tip{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);background-color:rgb(254 249 195/var(--tw-bg-opacity));border-color:rgb(234 179 8/var(--tw-border-opacity));border-left-width:4px;border-radius:.25rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);margin-bottom:.5rem;padding:.75rem}@media (prefers-color-scheme:dark){.tip{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}}.tip{& p:first-of-type{font-weight:700}& p:first-of-type:before{content:"💡"}&>p{margin-bottom:0;margin-top:0}}.docs-menu .active:before{color:#1b6ec2;content:">";font-size:large;font-weight:900;left:-7px;position:relative}.linear-progress{border-radius:10rem;bottom:0;height:.5rem;left:70%;margin:1rem;overflow:hidden;position:fixed;right:0;z-index:10}.linear-progress:after{background:blue;background:#1971c2;content:"";height:calc(var(--blazor-load-percentage) - 100);inset:0;position:absolute;scale:var(--blazor-load-percentage,0) 100%;transform-origin:left top;transition:scale .5s ease-out}:root{--spacing:0.5rem}.logo-wrapper{align-items:center;display:inline-flex}.logo-panel{background-color:#1971c2;border-bottom-left-radius:10px;border-top-right-radius:10px;display:flex;margin-right:15px;padding:10px}.logo-panel.bootup{margin-right:0}.logo{filter:invert(1);height:20px}@media (prefers-color-scheme:dark){.github-logo{filter:invert(1)}}.callout{align-items:center;display:flex}.callout>div:first-of-type{font-size:xx-large;margin-right:5px}h1:focus{outline:none}#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px #0003;display:none;left:0;padding:.6rem 1.25rem .7rem;position:fixed;width:100%;z-index:1000}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem}.blazor-error-boundary{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMjM1IDUxaDU2djQ5aC01NnoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjYzLjUwNiA1MWE0LjQgNC40IDAgMCAxIDMuMSAxLjI2NmwuNDQ2LjUzMy40ODcuODMgMjIuNjQ2IDM4LjU1NC4zNi42MTIuMTExLjIwMWE0LjI3IDQuMjcgMCAwIDEgLjM0NCAxLjY4MmMwIDIuMzg3LTEuOTYyIDQuMzIyLTQuMzgzIDQuMzIyaC00Ni4yMzRjLTIuNDIgMC00LjM4My0xLjkzNS00LjM4My00LjMyMiAwLS4yOTguMDMxLS41OS4wODktLjg3bC4yNDktLjc5Mi41Mi0uODg1IDIyLjYxNS0zOC41MDIuNDg4LS44My40NDYtLjUzM0E0LjQgNC40IDAgMCAxIDI2My41MDYgNTFabS4wOCAxNS4wMThjLTIuODQ5IDAtNC4yNzMgMS4xMDYtNC4yNzMgMy4zMTkgMCAuMjczLjAxOS41MjQuMDU4Ljc1MmwyLjQyNCAxMy45MjdoMy41ODVsMi40NDEtMTQuMjY5Yy4wMzktLjAxNi4wNTgtLjE2LjA1OC0uNDMgMC0yLjE5OS0xLjQzMS0zLjI5OS00LjI5My0zLjI5OVptLS4wMSAyMC4wMzdjLTIuNTI3IDAtMy43OSAxLjI0NS0zLjc5IDMuNzM3czEuMjYzIDMuNzM3IDMuNzkgMy43MzdjMi41NCAwIDMuODExLTEuMjQ1IDMuODExLTMuNzM3cy0xLjI3MS0zLjczNy0zLjgxMS0zLjczN1oiLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem,#b32121;color:#fff;padding:1rem 1rem 1rem 3.7rem}.blazor-error-boundary:after{content:"An error has occurred."}.loading-progress{display:block;height:8rem;position:relative;width:8rem}.loading-progress circle{fill:none;stroke:#e0e0e0;stroke-width:.6rem;transform:rotate(-90deg);transform-origin:50% 50%}.loading-progress circle:last-child{stroke:gray;stroke-dasharray:calc(var(--blazor-load-percentage, 0%)*3.141*.8),500%;transition:stroke-dasharray .05s ease-in-out}.loading-progress-title{inset:calc(40vh - 3.25rem) 0 auto .2rem}.loading-progress-text,.loading-progress-title{font-weight:700;position:absolute;text-align:center}.loading-progress-text{inset:calc(50vh + 3.25rem) 0 auto .2rem}.loading-progress-text:after{content:var(--blazor-load-percentage-text,"Loading")}.wave{animation-duration:2.5s;animation-iteration-count:infinite;animation-name:wave-animation;display:inline-block;transform-origin:70% 70%}@keyframes wave-animation{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0deg)}to{transform:rotate(0deg)}}@font-face{font-family:Geist Sans;src:url(https://assets.codepen.io/605876/GeistVF.ttf) format("truetype")}*,:after,:before{box-sizing:border-box}:root{--speed:15s;--transition:0.15s}:root:has(#theme:checked) :is(body,.controls,.item){background-color:#1a1a1a;border-color:#404040;color:#fff}:root:has(#theme:checked) article{background-color:#1a1a1a;border-color:#404040;box-shadow:0 10px 20px -5px #00000080;color:#fff}:root:has(#theme:checked) .item{background-color:#000}:root:has(#theme:checked) li:before{background-color:#000}.window article{background:#fff;border:1px solid #e6e6e6;border-radius:6px;box-shadow:0 10px 20px -5px #80808080;container-type:inline-size;margin:0 auto;max-width:min(calc(600px + 8rem),calc(100vw - 2rem));min-width:340px;overflow:hidden;padding:2rem;resize:horizontal;transition:background-color .25s,color .25s,border .25s,box-shadow .25s;width:100%}h2{display:flex;font-size:clamp(1.5rem,4cqi + 1rem,3rem);font-weight:160;gap:.25ch;grid-column:1/-1;margin:0}@keyframes shade{to{background-position:100% 0}}.window article a{align-self:start;background:linear-gradient(90deg,#9333ea,#db2777) 0 0 /200% 100% no-repeat;border:0;border-radius:100px;color:#fff;cursor:pointer;font-weight:120;justify-self:end;padding:.5rem 2rem;text-decoration:none;transition:background-position .15s}.window article a:is(:hover,:focus-visible){background-position:100% 0}p{margin:0}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}[for=theme]{aspect-ratio:1;bottom:1rem;display:grid;place-items:center;position:fixed;right:1rem;width:48px}[for=theme] svg{width:75%}#theme+svg path:first-of-type,#theme:checked+svg path:last-of-type{opacity:0}#theme:checked+svg path:first-of-type{opacity:1}.controls{background:#fff;border:1px solid #e6e6e6;border-radius:6px;display:grid;gap:.5rem;grid-template-columns:1fr auto;padding:1rem;position:fixed;right:1rem;top:1rem;z-index:2}input,label{accent-color:#db2777;cursor:pointer}.window{container-type:inline-size;outline:4px dashed #0000;transform-style:preserve-3d;transition:outline .5s}.scene{--buff:3rem;-webkit-mask:linear-gradient(#0000,#fff var(--buff) calc(100% - var(--buff)),#0000),linear-gradient(90deg,#0000,#fff var(--buff) calc(100% - var(--buff)),#0000);mask:linear-gradient(#0000,#fff var(--buff) calc(100% - var(--buff)),#0000),linear-gradient(90deg,#0000,#fff var(--buff) calc(100% - var(--buff)),#0000);-webkit-mask-composite:source-in,xor;mask-composite:intersect}:root:has(#overflow:checked) .scene{-webkit-mask:unset;mask:unset}:root:has(#overflow:checked) .window{outline:4px dashed #db2777}:root:has(#overflow:checked) .header{opacity:.2}.dev-link{aspect-ratio:1;color:currentColor;display:grid;left:1rem;place-items:center;position:fixed;top:1rem;width:48px}.dev-link svg{width:75%}.window .grid{--count:6;--inset:0;--outset:2.5;display:grid;gap:0 2rem;grid-template-columns:1fr 1fr;height:100%;list-style-type:none;margin:0;padding:0 1rem;position:relative;transform:rotateX(calc(var(--rotate, 0)*20deg)) rotate(calc(var(--rotate, 0)*-20deg)) skewX(calc(var(--rotate, 0)*20deg));transition:transform .5s;width:100%}:root .grid{--rotate:1}.window li{min-height:60px;transform-style:preserve-3d;width:100%;z-index:calc(1 + var(--active))}.window li:before{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;background:#0000001a;border-radius:6px;box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);content:"";filter:blur(calc(var(--active, 0)*8px));inset:4px 4px -2px -2px;position:absolute;scale:1 calc(1 + var(--active, 0)*.05);transform-origin:50% 0;transition:scale var(--transition),opacity var(--transition),translate var(--transition),filter var(--transition);z-index:-1}.grid:hover li{animation-play-state:paused}.grid{gap:1rem;transform-style:preserve-3d}.item{align-items:center;background:#fff;border:1px solid #e6e6e6;border-radius:6px;color:#1a1a1a;cursor:pointer;display:flex;gap:1rem;height:100%;justify-content:start;overflow:hidden;padding:1.25rem;scale:calc(1 + var(--active, 0)*.05);text-align:center;transform:translateZ(calc(var(--active, 0)*24px));transition:transform var(--transition),scale var(--transition),background-color .25s,color .25s,border .25s,box-shadow .25s;width:100%}.item__icon{color:var(--tw-primary);width:24px}.item__text{flex:1;text-align:center}li:first-of-type,li:nth-of-type(2){--index:0}li:nth-of-type(3),li:nth-of-type(4){--index:1}li:nth-of-type(5),li:nth-of-type(6){--index:2}li:nth-of-type(7),li:nth-of-type(8){--index:3}li:nth-of-type(10),li:nth-of-type(9){--index:4}li:nth-of-type(11),li:nth-of-type(12){--index:5}@container (width < 400px){.header{grid-template:auto 1fr/1fr}.header a{justify-self:start}.grid{--count:12;--inset:0;--outset:3;grid-template-columns:1fr}li:first-of-type{--index:0}li:nth-of-type(2){--index:1}li:nth-of-type(3){--index:2}li:nth-of-type(4){--index:3}li:nth-of-type(5){--index:4}li:nth-of-type(6){--index:5}li:nth-of-type(7){--index:6}li:nth-of-type(8){--index:7}li:nth-of-type(9){--index:8}li:nth-of-type(10){--index:9}li:nth-of-type(11){--index:10}li:nth-of-type(12){--index:11}li{--duration:calc(var(--speed)*2);--delay:calc((var(--duration)/var(--count))*(var(--index, 0) - 8))}}@media(prefers-reduced-motion:no-preference){.grid{gap:0 2rem}li{--duration:calc(var(--speed)*1);--delay:calc((var(--duration)/var(--count))*(var(--index, 0) - 8));animation:slide var(--duration) var(--delay) infinite linear;translate:0 calc(((var(--count) - var(--index)) + var(--inset, 0))*100%)}li:hover{--active:1}@keyframes slide{to{translate:0 calc((var(--index) + var(--outset, 0))*-100%)}}@container (width < 400px){li{--duration:calc(var(--speed)*2);--delay:calc((var(--duration)/var(--count))*(var(--index, 0) - 8))}}}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.active\:bg-sky-200:active{--tw-bg-opacity:1;background-color:rgb(186 230 253/var(--tw-bg-opacity))}.group:hover .group-hover\:hidden{display:none}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-7xl{font-size:4.5rem;line-height:1}}@media (min-width:1024px){.lg\:fixed{position:fixed}.lg\:ml-\[269px\]{margin-left:269px}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-1\/2{width:50%}.lg\:w-auto{width:auto}.lg\:flex-row{flex-direction:row}.lg\:justify-center{justify-content:center}.lg\:justify-between{justify-content:space-between}.lg\:gap-20{gap:5rem}.lg\:pl-12{padding-left:3rem}.lg\:pr-12{padding-right:3rem}} \ No newline at end of file +/* +! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #2563eb; +} + +input::-moz-placeholder, textarea::-moz-placeholder { + color: #6b7280; + opacity: 1; +} + +input::placeholder,textarea::placeholder { + color: #6b7280; + opacity: 1; +} + +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +::-webkit-date-and-time-value { + min-height: 1.5em; +} + +::-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-top: 0; + padding-bottom: 0; +} + +select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +[multiple] { + background-image: initial; + background-position: initial; + background-repeat: unset; + background-size: initial; + padding-right: 0.75rem; + -webkit-print-color-adjust: unset; + print-color-adjust: unset; +} + +[type='checkbox'],[type='radio'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +[type='checkbox'] { + border-radius: 0px; +} + +[type='radio'] { + border-radius: 100%; +} + +[type='checkbox']:focus,[type='radio']:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +[type='checkbox']:checked,[type='radio']:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +[type='checkbox']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +[type='radio']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); +} + +[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='checkbox']:indeterminate { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='file'] { + background: unset; + border-color: inherit; + border-width: 0; + border-radius: 0; + padding: 0; + font-size: unset; + line-height: inherit; +} + +[type='file']:focus { + outline: 1px solid ButtonText; + outline: 1px auto -webkit-focus-ring-color; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.prose { + color: var(--tw-prose-body); + max-width: 65ch; +} + +.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-lead); + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose :where(a):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-links); + text-decoration: underline; + font-weight: 500; +} + +.prose :where(strong):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-bold); + font-weight: 600; +} + +.prose :where(a strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(thead th strong):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(ol):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-left: 1.625em; +} + +.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; +} + +.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; +} + +.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-alpha; +} + +.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-alpha; +} + +.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; +} + +.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; +} + +.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) { + list-style-type: upper-roman; +} + +.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) { + list-style-type: lower-roman; +} + +.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) { + list-style-type: decimal; +} + +.prose :where(ul):not(:where([class~="not-prose"] *)) { + list-style-type: disc; + margin-top: 1.25em; + margin-bottom: 1.25em; + padding-left: 1.625em; +} + +.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker { + font-weight: 400; + color: var(--tw-prose-counters); +} + +.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker { + color: var(--tw-prose-bullets); +} + +.prose :where(hr):not(:where([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"] *)) { + font-weight: 500; + font-style: italic; + color: var(--tw-prose-quotes); + border-left-width: 0.25rem; + border-left-color: var(--tw-prose-quote-borders); + quotes: "\201C""\201D""\2018""\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; +} + +.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before { + content: open-quote; +} + +.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after { + content: close-quote; +} + +.prose :where(h1):not(:where([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; +} + +.prose :where(h1 strong):not(:where([class~="not-prose"] *)) { + font-weight: 900; + color: inherit; +} + +.prose :where(h2):not(:where([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; +} + +.prose :where(h2 strong):not(:where([class~="not-prose"] *)) { + font-weight: 800; + color: inherit; +} + +.prose :where(h3):not(:where([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; +} + +.prose :where(h3 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; + color: inherit; +} + +.prose :where(h4):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; +} + +.prose :where(h4 strong):not(:where([class~="not-prose"] *)) { + font-weight: 700; + color: inherit; +} + +.prose :where(img):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose :where(figure > *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; +} + +.prose :where(figcaption):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-captions); + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; +} + +.prose :where(code):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-code); + font-weight: 600; + font-size: 0.875em; +} + +.prose :where(code):not(:where([class~="not-prose"] *))::before { + content: "`"; +} + +.prose :where(code):not(:where([class~="not-prose"] *))::after { + content: "`"; +} + +.prose :where(a code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(h1 code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(h2 code):not(:where([class~="not-prose"] *)) { + color: inherit; + font-size: 0.875em; +} + +.prose :where(h3 code):not(:where([class~="not-prose"] *)) { + color: inherit; + font-size: 0.9em; +} + +.prose :where(h4 code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(blockquote code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(thead th code):not(:where([class~="not-prose"] *)) { + color: inherit; +} + +.prose :where(pre):not(:where([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-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; +} + +.prose :where(pre code):not(:where([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; +} + +.prose :where(pre code):not(:where([class~="not-prose"] *))::before { + content: none; +} + +.prose :where(pre code):not(:where([class~="not-prose"] *))::after { + content: none; +} + +.prose :where(table):not(:where([class~="not-prose"] *)) { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; +} + +.prose :where(thead):not(:where([class~="not-prose"] *)) { + border-bottom-width: 1px; + border-bottom-color: var(--tw-prose-th-borders); +} + +.prose :where(thead th):not(:where([class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 600; + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; +} + +.prose :where(tbody tr):not(:where([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"] *)) { + border-bottom-width: 0; +} + +.prose :where(tbody td):not(:where([class~="not-prose"] *)) { + vertical-align: baseline; +} + +.prose :where(tfoot):not(:where([class~="not-prose"] *)) { + border-top-width: 1px; + border-top-color: var(--tw-prose-th-borders); +} + +.prose :where(tfoot td):not(:where([class~="not-prose"] *)) { + vertical-align: top; +} + +.prose { + --tw-prose-body: #374151; + --tw-prose-headings: #111827; + --tw-prose-lead: #4b5563; + --tw-prose-links: #111827; + --tw-prose-bold: #111827; + --tw-prose-counters: #6b7280; + --tw-prose-bullets: #d1d5db; + --tw-prose-hr: #e5e7eb; + --tw-prose-quotes: #111827; + --tw-prose-quote-borders: #e5e7eb; + --tw-prose-captions: #6b7280; + --tw-prose-code: #111827; + --tw-prose-pre-code: #e5e7eb; + --tw-prose-pre-bg: #1f2937; + --tw-prose-th-borders: #d1d5db; + --tw-prose-td-borders: #e5e7eb; + --tw-prose-invert-body: #d1d5db; + --tw-prose-invert-headings: #fff; + --tw-prose-invert-lead: #9ca3af; + --tw-prose-invert-links: #fff; + --tw-prose-invert-bold: #fff; + --tw-prose-invert-counters: #9ca3af; + --tw-prose-invert-bullets: #4b5563; + --tw-prose-invert-hr: #374151; + --tw-prose-invert-quotes: #f3f4f6; + --tw-prose-invert-quote-borders: #374151; + --tw-prose-invert-captions: #9ca3af; + --tw-prose-invert-code: #fff; + --tw-prose-invert-pre-code: #d1d5db; + --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); + --tw-prose-invert-th-borders: #4b5563; + --tw-prose-invert-td-borders: #374151; + font-size: 1rem; + line-height: 1.75; +} + +.prose :where(p):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose :where(video):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose :where(figure):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose :where(li):not(:where([class~="not-prose"] *)) { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.prose :where(ol > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.375em; +} + +.prose :where(ul > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.375em; +} + +.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose :where(hr + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h2 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h3 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(h4 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; +} + +.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; +} + +.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; +} + +.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; +} + +.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; +} + +.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; +} + +.prose-sm :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.1428571em; +} + +.prose-sm :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.1428571em; +} + +.prose-sm :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.1428571em; +} + +.prose-sm :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.1428571em; +} + +.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose-base :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose-base :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose-base :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.25em; +} + +.prose-base :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.25em; +} + +.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; +} + +.prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; +} + +.prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; +} + +.prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; +} + +.prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; +} + +.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8em; + margin-bottom: 0.8em; +} + +.prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; +} + +.prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.2em; +} + +.prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; +} + +.prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.2em; +} + +.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; +} + +.prose-2xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; +} + +.prose-2xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; +} + +.prose-2xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; +} + +.prose-2xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; +} + +.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; +} + +.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; +} + +.static { + position: static; +} + +.fixed { + position: fixed; +} + +.relative { + position: relative; +} + +.left-\[80\%\] { + left: 80%; +} + +.top-0 { + top: 0px; +} + +.z-10 { + z-index: 10; +} + +.z-\[1\] { + z-index: 1; +} + +.m-1 { + margin: 0.25rem; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.-mr-1 { + margin-right: -0.25rem; +} + +.mb-16 { + margin-bottom: 4rem; +} + +.mb-8 { + margin-bottom: 2rem; +} + +.ml-10 { + margin-left: 2.5rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.ml-3 { + margin-left: 0.75rem; +} + +.ml-4 { + margin-left: 1rem; +} + +.ml-6 { + margin-left: 1.5rem; +} + +.ml-8 { + margin-left: 2rem; +} + +.mt-10 { + margin-top: 2.5rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + +.mt-3 { + margin-top: 0.75rem; +} + +.mt-4 { + margin-top: 1rem; +} + +.mt-5 { + margin-top: 1.25rem; +} + +.mt-\[80px\] { + margin-top: 80px; +} + +.inline { + display: inline; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.hidden { + display: none; +} + +.h-1 { + height: 0.25rem; +} + +.h-20 { + height: 5rem; +} + +.h-5 { + height: 1.25rem; +} + +.h-6 { + height: 1.5rem; +} + +.h-64 { + height: 16rem; +} + +.h-auto { + height: auto; +} + +.h-screen { + height: 100vh; +} + +.max-h-\[400px\] { + max-height: 400px; +} + +.max-h-\[calc\(100\%-50px\)\] { + max-height: calc(100% - 50px); +} + +.min-h-\[calc\(100vh-var\(--header-height\)\)\] { + min-height: calc(100vh - var(--header-height)); +} + +.w-14 { + width: 3.5rem; +} + +.w-16 { + width: 4rem; +} + +.w-20 { + width: 5rem; +} + +.w-24 { + width: 6rem; +} + +.w-5 { + width: 1.25rem; +} + +.w-52 { + width: 13rem; +} + +.w-56 { + width: 14rem; +} + +.w-6 { + width: 1.5rem; +} + +.w-auto { + width: auto; +} + +.w-full { + width: 100%; +} + +.max-w-4xl { + max-width: 56rem; +} + +.max-w-full { + max-width: 100%; +} + +.max-w-xs { + max-width: 20rem; +} + +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.grid-flow-col { + grid-auto-flow: column; +} + +.flex-col { + flex-direction: column; +} + +.items-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.justify-items-center { + justify-items: center; +} + +.gap-10 { + gap: 2.5rem; +} + +.gap-2 { + gap: 0.5rem; +} + +.gap-4 { + gap: 1rem; +} + +.gap-5 { + gap: 1.25rem; +} + +.overflow-y-auto { + overflow-y: auto; +} + +.overflow-x-hidden { + overflow-x: hidden; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-bl-lg { + border-bottom-left-radius: 0.5rem; +} + +.rounded-tr-lg { + border-top-right-radius: 0.5rem; +} + +.bg-\[\#1971c2\] { + --tw-bg-opacity: 1; + background-color: rgb(25 113 194 / var(--tw-bg-opacity)); +} + +.bg-green-300 { + --tw-bg-opacity: 1; + background-color: rgb(134 239 172 / var(--tw-bg-opacity)); +} + +.bg-green-500 { + --tw-bg-opacity: 1; + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); +} + +.bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} + +.bg-gradient-to-b { + background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); +} + +.via-blue-800 { + --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #1e40af var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.to-blue-500 { + --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position); +} + +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; +} + +.fill-current { + fill: currentColor; +} + +.p-1 { + padding: 0.25rem; +} + +.p-10 { + padding: 2.5rem; +} + +.p-2 { + padding: 0.5rem; +} + +.p-5 { + padding: 1.25rem; +} + +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.px-10 { + padding-left: 2.5rem; + padding-right: 2.5rem; +} + +.pb-12 { + padding-bottom: 3rem; +} + +.pl-3 { + padding-left: 0.75rem; +} + +.pr-3 { + padding-right: 0.75rem; +} + +.text-center { + text-align: center; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-7xl { + font-size: 4.5rem; + line-height: 1; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.font-black { + font-weight: 900; +} + +.font-bold { + font-weight: 700; +} + +.uppercase { + text-transform: uppercase; +} + +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.text-transparent { + color: transparent; +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.no-underline { + text-decoration-line: none; +} + +.opacity-0 { + opacity: 0; +} + +.opacity-100 { + opacity: 1; +} + +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.invert { + --tw-invert: invert(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +html { + scroll-behavior: smooth; +} + +.tip { + margin-bottom: 0.5rem; + border-radius: 0.25rem; + border-left-width: 4px; + --tw-border-opacity: 1; + border-color: rgb(234 179 8 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(254 249 195 / var(--tw-bg-opacity)); + padding: 0.75rem; + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +@media (prefers-color-scheme: dark) { + .tip { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); + } +} + +.tip { + & p:first-of-type { + font-weight: 700; + } + & p:first-of-type::before { + content: '💡' + } + & > p { + margin-top: 0px; + } + & > p { + margin-bottom: 0px; + } +} + +.docs-menu .active:before { + color: #1b6ec2; + content: '>'; + font-size: large; + font-weight: 900; + position: relative; + left: -7px; +} + +.linear-progress { + margin: 1rem 1rem; + height: 0.5rem; + border-radius: 10rem; + overflow: hidden; + position: fixed; + bottom: 0; + left: 70%; + z-index: 10; + right: 0; +} + +.linear-progress:after { + content: ''; + position: absolute; + inset: 0; + background: blue; + background: #1971c2; + scale: var(--blazor-load-percentage, 0%) 100%; + transform-origin: left top; + transition: scale ease-out 0.5s; + height: calc(var(--blazor-load-percentage) - 100); +} + +:root { + --spacing: 0.5rem; +} + +.logo-wrapper { + display: inline-flex; + align-items: center; +} + +.logo-panel { + margin-right: 15px; + /* background-color: #702AF7; */ + /* background-color: oklch(0.45229 0.035214 264.131); */ + background-color: #1971c2; + border-bottom-left-radius: 10px; + border-top-right-radius: 10px; + padding: 10px; + display: flex; +} + +.logo-panel.bootup { + margin-right: 0px; +} + +.logo { + height: 20px; + filter: invert(1); +} + +@media (prefers-color-scheme: dark) { + .github-logo { + filter:invert(1); + } +} + +.callout { + display: flex; + align-items: center; +} + +.callout > div:first-of-type { + font-size: xx-large; + margin-right: 5px; +} + +h1:focus { + outline: none; +} + +#blazor-error-ui { + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + +#blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; +} + +.blazor-error-boundary { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; + padding: 1rem 1rem 1rem 3.7rem; + color: white; +} + +.blazor-error-boundary::after { + content: "An error has occurred." +} + +.loading-progress { + position: relative; + display: block; + width: 8rem; + height: 8rem; + /*margin: 30vh auto 1rem auto;*/ + /* margin: 50vh auto 1rem auto; */ +} + +.loading-progress circle { + fill: none; + stroke: #e0e0e0; + stroke-width: 0.6rem; + transform-origin: 50% 50%; + transform: rotate(-90deg); +} + +.loading-progress circle:last-child { + /*stroke: #1b6ec2;*/ + stroke: gray; + stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; + transition: stroke-dasharray 0.05s ease-in-out; +} + +.loading-progress-title { + position: absolute; + text-align: center; + font-weight: bold; + inset: calc(40vh - 3.25rem) 0 auto 0.2rem; +} + +.loading-progress-text { + position: absolute; + text-align: center; + font-weight: bold; + /*inset: calc(30vh + 3.25rem) 0 auto 0.2rem;*/ + inset: calc(50vh + 3.25rem) 0 auto 0.2rem; +} + +.loading-progress-text:after { + content: var(--blazor-load-percentage-text, "Loading"); +} + +/*header { + position: sticky; + top: 0px; + z-index: 10; +} +*/ + +.wave { + animation-name: wave-animation; + /* Refers to the name of your @keyframes element below */ + animation-duration: 2.5s; + /* Change to speed up or slow down */ + animation-iteration-count: infinite; + /* Never stop waving :) */ + transform-origin: 70% 70%; + /* Pivot around the bottom-left palm */ + display: inline-block; +} + +@keyframes wave-animation { + 0% { + transform: rotate( 0.0deg) + } + + 10% { + transform: rotate(14.0deg) + } + + /* The following five values can be played with to make the waving more or less extreme */ + + 20% { + transform: rotate(-8.0deg) + } + + 30% { + transform: rotate(14.0deg) + } + + 40% { + transform: rotate(-4.0deg) + } + + 50% { + transform: rotate(10.0deg) + } + + 60% { + transform: rotate( 0.0deg) + } + + /* Reset for the last half to pause */ + + 100% { + transform: rotate( 0.0deg) + } +} + +/* Path: src/BlazeKit.Website/app.css */ + +@font-face { + font-family: "Geist Sans"; + + src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype"); +} + +*, + *:after, + *:before { + box-sizing: border-box; +} + +:root { + --speed: 15s; + --transition: 0.15s; +} + +:root:has(#theme:checked) :is(body, .controls, .item) { + background-color: hsl(0 0% 10%); + color: hsl(0 0% 100%); + border-color: hsl(0 0% 25%); +} + +:root:has(#theme:checked) article { + background-color: hsl(0 0% 10%); + color: hsl(0 0% 100%); + border-color: hsl(0 0% 25%); + box-shadow: 0 10px 20px -5px hsl(0 0% 0% / 0.5); +} + +:root:has(#theme:checked) .item { + background-color: black; +} + +:root:has(#theme:checked) li::before { + background-color: black; +} + +.window article { + padding: 2rem; + margin: 0 auto; + width: 100%; + box-shadow: 0 10px 20px -5px hsl(0 0% 50% / 0.5); + border: 1px solid hsl(0 0% 90%); + border-radius: 6px; + background: hsl(0 0% 100%); + resize: horizontal; + overflow: hidden; + max-width: min(calc(600px + 8rem), calc(100vw - 2rem)); + min-width: 340px; + container-type: inline-size; + transition: background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s; +} + +h2 { + display: flex; + gap: 0.25ch; + font-size: clamp(1.5rem, 4cqi + 1rem, 3rem); + font-weight: 160; + margin: 0; + grid-column: 1 / -1; +} + +/* h2 span:last-of-type { + display: inline-block; + background: linear-gradient(to right, #9333ea, #db2777, #9333ea) 0 0 / 400% 100% no-repeat; + background-clip: text; + color: transparent; + animation: shade 4s infinite linear; + } */ + +@keyframes shade { + to { + background-position: 100% 0; + } +} + +/* .header { + display: grid; + grid-template: auto 1fr / 6fr 4fr; + gap: 1rem; + margin-bottom: 2rem; + transition: opacity 0.5s; + } */ + +.window article a { + align-self: start; + text-decoration: none; + justify-self: end; + border-radius: 100px; + padding: 0.5rem 2rem; + border: 0; + color: hsl(0 0% 100%); + font-weight: 120; + cursor: pointer; + background: linear-gradient(to right, #9333ea, #db2777) 0 0 / 200% 100% no-repeat; + transition: background-position 0.15s; +} + +.window article a:is(:hover, :focus-visible) { + background-position: 100% 0; +} + +p { + margin: 0; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +[for=theme] { + width: 48px; + aspect-ratio: 1; + position: fixed; + bottom: 1rem; + right: 1rem; + display: grid; + place-items: center; +} + +[for=theme] svg { + width: 75%; +} + +#theme + svg path:first-of-type, + #theme:checked + svg path:last-of-type { + opacity: 0; +} + +#theme:checked + svg path:first-of-type { + opacity: 1; +} + +.controls { + display: grid; + grid-template-columns: 1fr auto; + gap: 0.5rem; + padding: 1rem; + border: 1px solid hsl(0 0% 90%); + border-radius: 6px; + background: hsl(0 0% 100%); + position: fixed; + top: 1rem; + right: 1rem; + z-index: 2; +} + +label, input { + accent-color: #db2777; + cursor: pointer; +} + +/* border: 2px solid red;*/ + +.window { + container-type: inline-size; + transform-style: preserve-3d; + outline: 4px dashed transparent; + transition: outline 0.5s; +} + +.scene { + --buff: 3rem; + -webkit-mask: + linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), + linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); + mask: + linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent), + linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent); + -webkit-mask-composite: source-in, xor; + mask-composite: intersect; +} + +:root:has(#overflow:checked) .scene { + -webkit-mask: unset; + mask: unset; +} + +:root:has(#overflow:checked) .window { + outline: 4px dashed #db2777; +} + +:root:has(#overflow:checked) .header { + opacity: 0.2; +} + +.dev-link { + width: 48px; + aspect-ratio: 1; + position: fixed; + top: 1rem; + left: 1rem; + display: grid; + place-items: center; + color: currentColor; +} + +.dev-link svg { + width: 75%; +} + +.window .grid { + --count: 6; + /* The number of items you have */ + --inset: 0; + /* Controls the grid animation offset on entry/exit */ + --outset: 2.5; + height: 100%; + width: 100%; + margin: 0; + list-style-type: none; + position: relative; + padding: 0 1rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 2rem; + transition: transform 0.5s; + /* 3D translation */ + transform: + rotateX(calc(var(--rotate, 0) * 20deg)) + rotateZ(calc(var(--rotate, 0) * -20deg)) + skewX(calc(var(--rotate, 0) * 20deg)); +} + +:root .grid { + --rotate: 1; +} + +.window li { + min-height: 60px; + transform-style: preserve-3d; + width: 100%; + z-index: calc(1 + var(--active)); +} + +.window li::before { + content: ""; + position: absolute; + inset: 4px 4px -2px -2px; + border-radius: 6px; + background: hsl(0 0% 0% / 0.1); + filter: blur(calc(var(--active, 0) * 8px)); + z-index: -1; + transition: scale var(--transition), opacity var(--transition), translate var(--transition), filter var(--transition); + transform-origin: 50% 0; + scale: 1 calc(1 + (var(--active, 0) * 0.05)); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow); +} + +.grid:hover li { + animation-play-state: paused; +} + +.grid { + transform-style: preserve-3d; + gap: 1rem; +} + +.item { + align-items: center; + background: hsl(0 0% 100%); + border: 1px solid hsl(0 0% 90%); + color: hsl(0 0% 10%); + border-radius: 6px; + cursor: pointer; + display: flex; + gap: 1rem; + height: 100%; + justify-content: start; + overflow: hidden; + padding: 1.25rem; + text-align: center; + width: 100%; + transition: transform var(--transition), scale var(--transition), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s; + scale: calc(1 + (var(--active, 0) * 0.05)); + transform: translate3d(0, 0, calc(var(--active, 0) * 24px)); +} + +.item__icon { + width: 24px; + color: var(--tw-primary); +} + +.item__text { + flex: 1; + text-align: center; +} + +li:nth-of-type(1) { + --index: 0; +} + +li:nth-of-type(2) { + --index: 0; +} + +li:nth-of-type(3) { + --index: 1; +} + +li:nth-of-type(4) { + --index: 1; +} + +li:nth-of-type(5) { + --index: 2; +} + +li:nth-of-type(6) { + --index: 2; +} + +li:nth-of-type(7) { + --index: 3; +} + +li:nth-of-type(8) { + --index: 3; +} + +li:nth-of-type(9) { + --index: 4; +} + +li:nth-of-type(10) { + --index: 4; +} + +li:nth-of-type(11) { + --index: 5; +} + +li:nth-of-type(12) { + --index: 5; +} + +@container (width < 400px) { + .header { + grid-template: auto 1fr / 1fr; + } + + .header a { + justify-self: start; + } + + .grid { + --count: 12; + --inset: 0; + --outset: 3; + grid-template-columns: 1fr; + } + + li:nth-of-type(1) { + --index: 0; + } + + li:nth-of-type(2) { + --index: 1; + } + + li:nth-of-type(3) { + --index: 2; + } + + li:nth-of-type(4) { + --index: 3; + } + + li:nth-of-type(5) { + --index: 4; + } + + li:nth-of-type(6) { + --index: 5; + } + + li:nth-of-type(7) { + --index: 6; + } + + li:nth-of-type(8) { + --index: 7; + } + + li:nth-of-type(9) { + --index: 8; + } + + li:nth-of-type(10) { + --index: 9; + } + + li:nth-of-type(11) { + --index: 10; + } + + li:nth-of-type(12) { + --index: 11; + } + + li { + --duration: calc(var(--speed) * 2); + --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8)); + } +} + +@media(prefers-reduced-motion: no-preference) { + .grid { + gap: 0 2rem; + } + + li { + --duration: calc(var(--speed) * 1); + --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8)); + animation: slide var(--duration) var(--delay) infinite linear; + translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%); + } + + li:hover { + --active: 1; + } + + @keyframes slide { + 100% { + translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%)); + } + } + + @container (width < 400px) { + li { + --duration: calc(var(--speed) * 2); + --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8)); + } + } +} + +.hover\:text-gray-500:hover { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.active\:bg-sky-200:active { + --tw-bg-opacity: 1; + background-color: rgb(186 230 253 / var(--tw-bg-opacity)); +} + +.group:hover .group-hover\:hidden { + display: none; +} + +.group:hover .group-hover\:opacity-100 { + opacity: 1; +} + +@media (min-width: 640px) { + .sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .sm\:text-7xl { + font-size: 4.5rem; + line-height: 1; + } +} + +@media (min-width: 1024px) { + .lg\:fixed { + position: fixed; + } + + .lg\:ml-\[269px\] { + margin-left: 269px; + } + + .lg\:block { + display: block; + } + + .lg\:flex { + display: flex; + } + + .lg\:hidden { + display: none; + } + + .lg\:w-1\/2 { + width: 50%; + } + + .lg\:w-auto { + width: auto; + } + + .lg\:flex-row { + flex-direction: row; + } + + .lg\:justify-center { + justify-content: center; + } + + .lg\:justify-between { + justify-content: space-between; + } + + .lg\:gap-20 { + gap: 5rem; + } + + .lg\:pl-12 { + padding-left: 3rem; + } + + .lg\:pr-12 { + padding-right: 3rem; + } +}