From 3bca0991e8eef395234f9ecdc767fdbbc0b99017 Mon Sep 17 00:00:00 2001 From: Matthias Bussonnier Date: Mon, 25 Dec 2023 19:15:02 +0100 Subject: [PATCH 1/3] Draft: Experiment with React context for local navigation This change the links to have an onClick handler that will trigger a change in local navigation. --- papyri-lab/src/papyri-comp.tsx | 24 +- papyri-lab/src/widgets.tsx | 31 +- papyri-lab/style/app.css | 1940 +------------------------------- papyri-lab/style/base.css | 8 +- 4 files changed, 50 insertions(+), 1953 deletions(-) diff --git a/papyri-lab/src/papyri-comp.tsx b/papyri-lab/src/papyri-comp.tsx index 19665a0b..b3d3a6fb 100644 --- a/papyri-lab/src/papyri-comp.tsx +++ b/papyri-lab/src/papyri-comp.tsx @@ -1,6 +1,27 @@ // Global and other papyri-myst related componets import { DEFAULT_RENDERERS, MyST } from 'myst-to-react'; import React from 'react'; +import { createContext, useContext } from 'react'; + +export const SearchContext = createContext(async (query: string) => { + return true; +}); + +const MyLink = ({ node }: any) => { + const onSearch = useContext(SearchContext); + const parts = node.url.split('/'); + const search_term = parts[parts.length - 1]; + const f = (q: string) => { + console.log('sustom onclick', q, onSearch); + onSearch(q); + }; + + return ( + f(search_term)}> + + + ); +}; const DefaultComponent = ({ node }: { node: any }) => { if (!node.children) { @@ -159,7 +180,8 @@ const LOC = { ParameterNode: ParameterNodeRenderer, Param: Param, MUnimpl: MUnimpl, - DefaultComponent: DefaultComponent + DefaultComponent: DefaultComponent, + link: MyLink }; export const RENDERERS = { ...DEFAULT_RENDERERS, ...LOC }; diff --git a/papyri-lab/src/widgets.tsx b/papyri-lab/src/widgets.tsx index cdcaf392..68d41ebe 100644 --- a/papyri-lab/src/widgets.tsx +++ b/papyri-lab/src/widgets.tsx @@ -1,5 +1,5 @@ import { requestAPI } from './handler'; -import { MyPapyri, RENDERERS } from './papyri-comp'; +import { MyPapyri, RENDERERS, SearchContext } from './papyri-comp'; import { ReactWidget } from '@jupyterlab/apputils'; import { ThemeProvider } from '@myst-theme/providers'; import React, { useState } from 'react'; @@ -19,11 +19,12 @@ const PapyriComponent = (): JSX.Element => { // the current query const [possibilities, setPossibilities] = useState([]); const [root, setRoot] = useState({}); - const [what, setWhat] = useState(''); + + const [searchTerm, setSearchTerm] = useState(''); // callback when typing in the input field. const onChange = async (event: any) => { - setWhat(event.target.value); + setSearchTerm(event.target.value); search(event.target.value); }; const search = async (query: string) => { @@ -42,10 +43,11 @@ const PapyriComponent = (): JSX.Element => { } }; - const onClick = (value: string) => { - setWhat(value); + const onClick = async (query: string) => { + console.log('On click trigger', query); + setSearchTerm(query); try { - search(value); + search(query); } catch (e) { console.error(e); } @@ -54,21 +56,28 @@ const PapyriComponent = (): JSX.Element => { return ( - + - - - + + + + + ); }; diff --git a/papyri-lab/style/app.css b/papyri-lab/style/app.css index d59d008f..f218a5cc 100644 --- a/papyri-lab/style/app.css +++ b/papyri-lab/style/app.css @@ -1,1939 +1 @@ -.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(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 1em; - color: var(--jp-content-font-color1); - font-family: var(--jp-content-font-family); - font-size: var(--jp-content-font-size1); - line-height: var(--jp-content-line-height); -} - -.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-lead); - font-size: 1.25em; - line-height: 1.6; - margin-top: 1.2em; - margin-bottom: 1.2em; -} - -.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--jp-content-link-color, #1976d2); - text-decoration: none; - font-weight: 400; -} - -.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover { - color: var(--jp-content-link-color, #1976d2); - text-decoration: underline; - font-weight: 400; -} - -.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-bold); - font-weight: 600; -} - -.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - 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"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; -} - -.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; -} - -.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-alpha; -} - -.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-alpha; -} - -.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; -} - -.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; -} - -.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: upper-roman; -} - -.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: lower-roman; -} - -.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - list-style-type: decimal; -} - -.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - 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"],[class~="not-prose"] *))::marker { - font-weight: 400; - color: var(--tw-prose-counters); -} - -.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { - color: var(--tw-prose-bullets); -} - -.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.25em; -} - -.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-color: var(--tw-prose-hr); - border-top-width: 1px; - margin-top: 3em; - margin-bottom: 3em; -} - -.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - 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"],[class~="not-prose"] *))::before { - content: none; -} - -.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: close-quote; -} - -.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 800; - font-size: var(--jp-content-font-size5); - margin-top: 0; - margin-bottom: 0.8888889em; - line-height: 1.1111111; -} - -.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 900; - color: inherit; -} - -.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 700; - font-size: var(--jp-content-font-size4); - margin-top: 2em; - margin-bottom: 1em; - line-height: 1.3333333; -} - -.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 800; - color: inherit; -} - -.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - font-size: var(--jp-content-font-size3); - margin-top: 1.6em; - margin-bottom: 0.6em; - line-height: 1.6; -} - -.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; -} - -.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - font-weight: 600; - margin-top: 1.5em; - margin-bottom: 0.5em; - line-height: 1.5; - font-size: var(--jp-content-font-size2); -} - -.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 700; - color: inherit; -} - -.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - display: block; - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-weight: 500; - font-family: inherit; - color: var(--tw-prose-kbd); - box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); - font-size: 0.875em; - border-radius: 0.3125rem; - padding-top: 0.1875em; - padding-right: 0.375em; - padding-bottom: 0.1875em; - padding-left: 0.375em; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--jp-content-font-color1); - font-weight: inherit; - font-size: inherit; - font-family: var(--jp-code-font-family); - line-height: var(--jp-code-line-height); - padding: 1px 5px; - white-space: pre-wrap; - background-color: var(--jp-layout-color2); -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { - content: ; -} - -.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: ; -} - -.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.875em; -} - -.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; - font-size: 0.9em; -} - -.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: inherit; -} - -.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-pre-code); - background-color: var(--tw-prose-pre-bg); - 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"],[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"],[class~="not-prose"] *))::before { - content: none; -} - -.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: none; -} - -.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - 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"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-th-borders); -} - -.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-headings); - 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"],[class~="not-prose"] *)) { - border-bottom-width: 1px; - border-bottom-color: var(--tw-prose-td-borders); -} - -.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-bottom-width: 0; -} - -.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: baseline; -} - -.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - border-top-width: 1px; - border-top-color: var(--tw-prose-th-borders); -} - -.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - vertical-align: top; -} - -.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; -} - -.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - color: var(--tw-prose-captions); - font-size: 0.875em; - line-height: 1.4285714; - margin-top: 0.8571429em; -} - -.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-kbd: #111827; - --tw-prose-kbd-shadows: 17 24 39; - --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-kbd: #fff; - --tw-prose-invert-kbd-shadows: 255 255 255; - --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(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; - margin-bottom: 0; -} - -.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} - -.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-left: 0.375em; -} - -.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-left: 0.375em; -} - -.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; -} - -.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; -} - -.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; -} - -.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; -} - -.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 1.25em; -} - -.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.75em; - margin-bottom: 0.75em; -} - -.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 1.25em; - margin-bottom: 1.25em; -} - -.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.5em; - padding-left: 1.625em; -} - -.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-left: 0; -} - -.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-right: 0; -} - -.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[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"],[class~="not-prose"] *)) { - padding-left: 0; -} - -.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - padding-right: 0; -} - -.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 2em; - margin-bottom: 2em; -} - -.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0; -} - -.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: 0; -} - -.prose :where(h1,h2,h3,h4,h5,h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - line-height: var(--jp-content-heading-line-height, 1); - font-weight: var(--jp-content-heading-font-weight, 500); - font-style: normal; - margin-top: var(--jp-content-heading-margin-top, 1.2em); - margin-bottom: var(--jp-content-heading-margin-bottom, 0.8em); - color: var(--jp-content-font-color1); -} - -.prose :where(h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: calc(0.5 * var(--jp-content-heading-margin-top)); -} - -.prose :where(h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-bottom: calc(0.5 * var(--jp-content-heading-margin-bottom)); -} - -.prose :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: var(--jp-content-font-size1); -} - -.prose :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - font-size: var(--jp-content-font-size0); -} - -.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { - content: none; -} - -.prose :where(li > p, dd > p, header > p, footer > p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} - -.static { - position: static; -} - -.absolute { - position: absolute; -} - -.relative { - position: relative; -} - -.right-1 { - right: 0.25rem; -} - -.top-1 { - top: 0.25rem; -} - -.top-\[32px\] { - top: 32px; -} - -.float-right { - float: right; -} - -.m-0 { - margin: 0px; -} - -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.my-5 { - margin-top: 1.25rem; - margin-bottom: 1.25rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.ml-1 { - margin-left: 0.25rem; -} - -.ml-2 { - margin-left: 0.5rem; -} - -.ml-3 { - margin-left: 0.75rem; -} - -.ml-4 { - margin-left: 1rem; -} - -.mr-1 { - margin-right: 0.25rem; -} - -.mr-2 { - margin-right: 0.5rem; -} - -.mr-3 { - margin-right: 0.75rem; -} - -.mt-2 { - margin-top: 0.5rem; -} - -.mt-3 { - margin-top: 0.75rem; -} - -.block { - display: block; -} - -.inline-block { - display: inline-block; -} - -.inline { - display: inline; -} - -.flex { - display: flex; -} - -.inline-flex { - display: inline-flex; -} - -.table { - display: table; -} - -.grid { - display: grid; -} - -.hidden { - display: none; -} - -.h-4 { - height: 1rem; -} - -.h-\[10px\] { - height: 10px; -} - -.h-\[150px\] { - height: 150px; -} - -.h-full { - height: 100%; -} - -.max-h-\[300px\] { - max-height: 300px; -} - -.max-h-\[4rem\] { - max-height: 4rem; -} - -.min-h-\[2em\] { - min-height: 2em; -} - -.w-4 { - width: 1rem; -} - -.w-\[10px\] { - width: 10px; -} - -.w-\[300px\] { - width: 300px; -} - -.w-\[400px\] { - width: 400px; -} - -.w-\[500px\] { - width: 500px; -} - -.w-full { - width: 100%; -} - -.min-w-0 { - min-width: 0px; -} - -.max-w-\[80vw\] { - max-width: 80vw; -} - -.flex-1 { - flex: 1 1 0%; -} - -.flex-none { - flex: none; -} - -.flex-grow { - flex-grow: 1; -} - -.grow { - flex-grow: 1; -} - -.-translate-y-\[1px\] { - --tw-translate-y: -1px; - 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)); -} - -.-translate-y-px { - --tw-translate-y: -1px; - 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)); -} - -.translate-y-2 { - --tw-translate-y: 0.5rem; - 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)); -} - -.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)); -} - -@keyframes pulse { - 50% { - opacity: .5; - } -} - -.animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -.cursor-help { - cursor: help; -} - -.cursor-pointer { - cursor: pointer; -} - -.select-none { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - -.grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); -} - -.grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); -} - -.grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); -} - -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); -} - -.grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); -} - -.grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); -} - -.grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); -} - -.grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); -} - -.grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); -} - -.flex-row { - flex-direction: row; -} - -.flex-col { - flex-direction: column; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.items-center { - align-items: center; -} - -.gap-4 { - gap: 1rem; -} - -.self-center { - align-self: center; -} - -.overflow-auto { - overflow: auto; -} - -.overflow-hidden { - overflow: hidden; -} - -.overflow-x-auto { - overflow-x: auto; -} - -.overflow-y-hidden { - overflow-y: hidden; -} - -.break-words { - overflow-wrap: break-word; -} - -.rounded { - border-radius: 0.25rem; -} - -.rounded-full { - border-radius: 9999px; -} - -.rounded-md { - border-radius: 0.375rem; -} - -.border { - border-width: 1px; -} - -.border-y { - border-top-width: 1px; - border-bottom-width: 1px; -} - -.border-b { - border-bottom-width: 1px; -} - -.border-b-2 { - border-bottom-width: 2px; -} - -.border-l-2 { - border-left-width: 2px; -} - -.border-l-4 { - border-left-width: 4px; -} - -.border-t { - border-top-width: 1px; -} - -.border-dotted { - border-style: dotted; -} - -.border-amber-500\/70 { - border-color: rgb(245 158 11 / 0.7); -} - -.border-amber-600 { - --tw-border-opacity: 1; - border-color: rgb(217 119 6 / var(--tw-border-opacity)); -} - -.border-blue-500 { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - -.border-blue-500\/60 { - border-color: rgb(59 130 246 / 0.6); -} - -.border-gray-100 { - --tw-border-opacity: 1; - border-color: rgb(243 244 246 / var(--tw-border-opacity)); -} - -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); -} - -.border-gray-500\/60 { - border-color: rgb(107 114 128 / 0.6); -} - -.border-gray-800 { - --tw-border-opacity: 1; - border-color: rgb(31 41 55 / var(--tw-border-opacity)); -} - -.border-green-500\/60 { - border-color: rgb(34 197 94 / 0.6); -} - -.border-green-600 { - --tw-border-opacity: 1; - border-color: rgb(22 163 74 / var(--tw-border-opacity)); -} - -.border-orange-500\/60 { - border-color: rgb(249 115 22 / 0.6); -} - -.border-purple-500\/60 { - border-color: rgb(168 85 247 / 0.6); -} - -.border-red-500\/60 { - border-color: rgb(239 68 68 / 0.6); -} - -.border-red-600 { - --tw-border-opacity: 1; - border-color: rgb(220 38 38 / var(--tw-border-opacity)); -} - -.border-slate-400 { - --tw-border-opacity: 1; - border-color: rgb(148 163 184 / var(--tw-border-opacity)); -} - -.border-b-blue-600 { - --tw-border-opacity: 1; - border-bottom-color: rgb(37 99 235 / var(--tw-border-opacity)); -} - -.border-b-gray-100 { - --tw-border-opacity: 1; - border-bottom-color: rgb(243 244 246 / var(--tw-border-opacity)); -} - -.border-l-blue-400 { - --tw-border-opacity: 1; - border-left-color: rgb(96 165 250 / var(--tw-border-opacity)); -} - -.bg-amber-50 { - --tw-bg-opacity: 1; - background-color: rgb(255 251 235 / var(--tw-bg-opacity)); -} - -.bg-amber-50\/80 { - background-color: rgb(255 251 235 / 0.8); -} - -.bg-blue-50 { - --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity)); -} - -.bg-blue-50\/80 { - background-color: rgb(239 246 255 / 0.8); -} - -.bg-blue-900 { - --tw-bg-opacity: 1; - background-color: rgb(30 58 138 / var(--tw-bg-opacity)); -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - -.bg-gray-50 { - --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); -} - -.bg-gray-50\/10 { - background-color: rgb(249 250 251 / 0.1); -} - -.bg-gray-50\/80 { - background-color: rgb(249 250 251 / 0.8); -} - -.bg-green-50 { - --tw-bg-opacity: 1; - background-color: rgb(240 253 244 / var(--tw-bg-opacity)); -} - -.bg-green-50\/80 { - background-color: rgb(240 253 244 / 0.8); -} - -.bg-orange-50\/80 { - background-color: rgb(255 247 237 / 0.8); -} - -.bg-purple-50\/80 { - background-color: rgb(250 245 255 / 0.8); -} - -.bg-red-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 242 242 / var(--tw-bg-opacity)); -} - -.bg-red-50\/80 { - background-color: rgb(254 242 242 / 0.8); -} - -.bg-slate-100 { - --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity)); -} - -.bg-slate-900 { - --tw-bg-opacity: 1; - background-color: rgb(15 23 42 / var(--tw-bg-opacity)); -} - -.bg-stone-200\/10 { - background-color: rgb(231 229 228 / 0.1); -} - -.bg-stone-700 { - --tw-bg-opacity: 1; - background-color: rgb(68 64 60 / var(--tw-bg-opacity)); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.fill-blue-900 { - fill: #1e3a8a; -} - -.fill-white { - fill: #fff; -} - -.object-cover { - -o-object-fit: cover; - object-fit: cover; -} - -.object-left { - -o-object-position: left; - object-position: left; -} - -.object-top { - -o-object-position: top; - object-position: top; -} - -.p-1 { - padding: 0.25rem; -} - -.p-2 { - padding: 0.5rem; -} - -.p-3 { - padding: 0.75rem; -} - -.p-4 { - padding: 1rem; -} - -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.py-0 { - padding-top: 0px; - padding-bottom: 0px; -} - -.py-0\.5 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; -} - -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.pl-2 { - padding-left: 0.5rem; -} - -.pl-3 { - padding-left: 0.75rem; -} - -.pt-3 { - padding-top: 0.75rem; -} - -.text-right { - text-align: right; -} - -.align-middle { - vertical-align: middle; -} - -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.text-xs { - font-size: 0.75rem; - line-height: 1rem; -} - -.font-bold { - font-weight: 700; -} - -.font-light { - font-weight: 300; -} - -.font-medium { - font-weight: 500; -} - -.font-normal { - font-weight: 400; -} - -.font-semibold { - font-weight: 600; -} - -.font-thin { - font-weight: 100; -} - -.uppercase { - text-transform: uppercase; -} - -.capitalize { - text-transform: capitalize; -} - -.italic { - font-style: italic; -} - -.leading-3 { - line-height: .75rem; -} - -.leading-\[0\] { - line-height: 0; -} - -.text-amber-600 { - --tw-text-opacity: 1; - color: rgb(217 119 6 / var(--tw-text-opacity)); -} - -.text-blue-400 { - --tw-text-opacity: 1; - color: rgb(96 165 250 / var(--tw-text-opacity)); -} - -.text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} - -.text-blue-600 { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); -} - -.text-gray-100 { - --tw-text-opacity: 1; - color: rgb(243 244 246 / var(--tw-text-opacity)); -} - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -.text-green-500 { - --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); -} - -.text-green-600 { - --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); -} - -.text-green-700 { - --tw-text-opacity: 1; - color: rgb(21 128 61 / var(--tw-text-opacity)); -} - -.text-inherit { - color: inherit; -} - -.text-neutral-700 { - --tw-text-opacity: 1; - color: rgb(64 64 64 / var(--tw-text-opacity)); -} - -.text-neutral-900 { - --tw-text-opacity: 1; - color: rgb(23 23 23 / var(--tw-text-opacity)); -} - -.text-orange-600 { - --tw-text-opacity: 1; - color: rgb(234 88 12 / var(--tw-text-opacity)); -} - -.text-purple-600 { - --tw-text-opacity: 1; - color: rgb(147 51 234 / var(--tw-text-opacity)); -} - -.text-purple-700 { - --tw-text-opacity: 1; - color: rgb(126 34 206 / var(--tw-text-opacity)); -} - -.text-red-500 { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); -} - -.text-red-600 { - --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); -} - -.text-slate-600 { - --tw-text-opacity: 1; - color: rgb(71 85 105 / var(--tw-text-opacity)); -} - -.text-slate-700 { - --tw-text-opacity: 1; - color: rgb(51 65 85 / var(--tw-text-opacity)); -} - -.text-success { - --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.text-yellow-600 { - --tw-text-opacity: 1; - color: rgb(202 138 4 / var(--tw-text-opacity)); -} - -.underline { - text-decoration-line: underline; -} - -.no-underline { - text-decoration-line: none; -} - -.opacity-0 { - opacity: 0; -} - -.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); -} - -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-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-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-200 { - transition-duration: 200ms; -} - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.hover\:border-blue-500:hover { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - -.hover\:font-semibold:hover { - font-weight: 600; -} - -.hover\:text-blue-500:hover { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} - -.hover\:text-blue-600:hover { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); -} - -.hover\:text-gray-700:hover { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -.hover\:text-green-500:hover { - --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); -} - -.hover\:text-inherit:hover { - color: inherit; -} - -.hover\:underline:hover { - text-decoration-line: underline; -} - -.hover\:no-underline:hover { - text-decoration-line: none; -} - -.hover\:opacity-100:hover { - opacity: 1; -} - -.hover\:shadow-\[inset_0_0_0px_30px_\#00000003\]:hover { - --tw-shadow: inset 0 0 0px 30px #00000003; - --tw-shadow-colored: inset 0 0 0px 30px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.hover\:shadow-lg:hover { - --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); -} - -.hover\:shadow-md:hover { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.focus\:opacity-100:focus { - opacity: 1; -} - -.active\:opacity-100:active { - opacity: 1; -} - -.group:hover .group-hover\:underline { - text-decoration-line: underline; -} - -.group:hover .group-hover\:opacity-100 { - opacity: 1; -} - -.group:hover .group-hover\:opacity-70 { - opacity: 0.7; -} - -:is([data-jp-theme-light="false"] .dark\:border-y-0) { - border-top-width: 0px; - border-bottom-width: 0px; -} - -:is([data-jp-theme-light="false"] .dark\:border-l-4) { - border-left-width: 4px; -} - -:is([data-jp-theme-light="false"] .dark\:border-amber-500\/70) { - border-color: rgb(245 158 11 / 0.7); -} - -:is([data-jp-theme-light="false"] .dark\:border-blue-500\/60) { - border-color: rgb(59 130 246 / 0.6); -} - -:is([data-jp-theme-light="false"] .dark\:border-gray-500) { - --tw-border-opacity: 1; - border-color: rgb(107 114 128 / var(--tw-border-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:border-gray-500\/60) { - border-color: rgb(107 114 128 / 0.6); -} - -:is([data-jp-theme-light="false"] .dark\:border-gray-800) { - --tw-border-opacity: 1; - border-color: rgb(31 41 55 / var(--tw-border-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:border-green-500\/60) { - border-color: rgb(34 197 94 / 0.6); -} - -:is([data-jp-theme-light="false"] .dark\:border-orange-500\/60) { - border-color: rgb(249 115 22 / 0.6); -} - -:is([data-jp-theme-light="false"] .dark\:border-purple-500\/60) { - border-color: rgb(168 85 247 / 0.6); -} - -:is([data-jp-theme-light="false"] .dark\:border-red-500\/60) { - border-color: rgb(239 68 68 / 0.6); -} - -:is([data-jp-theme-light="false"] .dark\:border-slate-300) { - --tw-border-opacity: 1; - border-color: rgb(203 213 225 / var(--tw-border-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:border-b-white) { - --tw-border-opacity: 1; - border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:border-l-blue-400) { - --tw-border-opacity: 1; - border-left-color: rgb(96 165 250 / var(--tw-border-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:bg-slate-600) { - --tw-bg-opacity: 1; - background-color: rgb(71 85 105 / var(--tw-bg-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:bg-slate-800) { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:bg-slate-900) { - --tw-bg-opacity: 1; - background-color: rgb(15 23 42 / var(--tw-bg-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:bg-stone-700) { - --tw-bg-opacity: 1; - background-color: rgb(68 64 60 / var(--tw-bg-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:bg-stone-800) { - --tw-bg-opacity: 1; - background-color: rgb(41 37 36 / var(--tw-bg-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:bg-white) { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:fill-white) { - fill: #fff; -} - -:is([data-jp-theme-light="false"] .dark\:text-black) { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:text-gray-100) { - --tw-text-opacity: 1; - color: rgb(243 244 246 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:text-gray-300) { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:text-gray-400) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:text-green-500) { - --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:text-neutral-200) { - --tw-text-opacity: 1; - color: rgb(229 229 229 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:text-purple-500) { - --tw-text-opacity: 1; - color: rgb(168 85 247 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:text-slate-100) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:text-white) { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:shadow-2xl) { - --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -:is([data-jp-theme-light="false"] .dark\:shadow-neutral-700) { - --tw-shadow-color: #404040; - --tw-shadow: var(--tw-shadow-colored); -} - -:is([data-jp-theme-light="false"] .dark\:shadow-neutral-800) { - --tw-shadow-color: #262626; - --tw-shadow: var(--tw-shadow-colored); -} - -:is([data-jp-theme-light="false"] .dark\:shadow-neutral-900) { - --tw-shadow-color: #171717; - --tw-shadow: var(--tw-shadow-colored); -} - -:is([data-jp-theme-light="false"] .dark\:hover\:border-blue-400:hover) { - --tw-border-opacity: 1; - border-color: rgb(96 165 250 / var(--tw-border-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:hover\:text-blue-400:hover) { - --tw-text-opacity: 1; - color: rgb(96 165 250 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:hover\:text-gray-100:hover) { - --tw-text-opacity: 1; - color: rgb(243 244 246 / var(--tw-text-opacity)); -} - -:is([data-jp-theme-light="false"] .dark\:hover\:shadow-\[inset_0_0_0px_30px_\#FFFFFF03\]:hover) { - --tw-shadow: inset 0 0 0px 30px #FFFFFF03; - --tw-shadow-colored: inset 0 0 0px 30px 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 (min-width: 640px) { - .sm\:max-w-\[400px\] { - max-width: 400px; - } - - .sm\:max-w-\[500px\] { - max-width: 500px; - } - - .sm\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .sm\:grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .sm\:grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .sm\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .sm\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .sm\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .sm\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .sm\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .sm\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .sm\:grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .sm\:grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .sm\:grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } -} - -@media (min-width: 768px) { - .md\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .md\:grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .md\:grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .md\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .md\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .md\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .md\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .md\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .md\:grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .md\:grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .md\:grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } -} - -@media (min-width: 1024px) { - .lg\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .lg\:grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .lg\:grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .lg\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .lg\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .lg\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .lg\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .lg\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .lg\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .lg\:grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .lg\:grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .lg\:grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } -} - -@media (min-width: 1280px) { - .xl\:grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .xl\:grid-cols-10 { - grid-template-columns: repeat(10, minmax(0, 1fr)); - } - - .xl\:grid-cols-11 { - grid-template-columns: repeat(11, minmax(0, 1fr)); - } - - .xl\:grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); - } - - .xl\:grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .xl\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - .xl\:grid-cols-4 { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - .xl\:grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .xl\:grid-cols-6 { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - .xl\:grid-cols-7 { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } - - .xl\:grid-cols-8 { - grid-template-columns: repeat(8, minmax(0, 1fr)); - } - - .xl\:grid-cols-9 { - grid-template-columns: repeat(9, minmax(0, 1fr)); - } -} +.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(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:1em;color:var(--jp-content-font-color1);font-family:var(--jp-content-font-family);font-size:var(--jp-content-font-size1);line-height:var(--jp-content-line-height)}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--jp-content-link-color,#1976d2);text-decoration:none;font-weight:400}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)):hover{color:var(--jp-content-link-color,#1976d2);text-decoration:underline;font-weight:400}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){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],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){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],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.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],[class~=not-prose] *)):before{content:none}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:var(--jp-content-font-size5);margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:var(--jp-content-font-size4);margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:var(--jp-content-font-size3);margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5;font-size:var(--jp-content-font-size2)}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);font-size:.875em;border-radius:.3125rem;padding:.1875em .375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--jp-content-font-color1);font-weight:inherit;font-size:inherit;font-family:var(--jp-code-font-family);line-height:var(--jp-code-line-height);padding:1px 5px;white-space:pre-wrap;background-color:var(--jp-layout-color2)}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:initial;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],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:initial}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.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-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--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-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--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(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.25rem;margin-bottom:.25rem}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-left:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose :where(h1,h2,h3,h4,h5,h6):not(:where([class~=not-prose],[class~=not-prose] *)){line-height:var(--jp-content-heading-line-height,1);font-weight:var(--jp-content-heading-font-weight,500);font-style:normal;margin-top:var(--jp-content-heading-margin-top,1.2em);margin-bottom:var(--jp-content-heading-margin-bottom,.8em);color:var(--jp-content-font-color1)}.prose :where(h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:calc(var(--jp-content-heading-margin-top)*.5)}.prose :where(h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:calc(var(--jp-content-heading-margin-bottom)*.5)}.prose :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:var(--jp-content-font-size1)}.prose :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:var(--jp-content-font-size0)}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(li>p,dd>p,header>p,footer>p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.25rem;margin-bottom:.25rem}.static{position:static}.absolute{position:absolute}.relative{position:relative}.right-1{right:.25rem}.top-1{top:.25rem}.top-\[32px\]{top:32px}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-4{height:1rem}.h-\[10px\]{height:10px}.h-\[150px\]{height:150px}.h-full{height:100%}.max-h-\[300px\]{max-height:300px}.max-h-\[4rem\]{max-height:4rem}.min-h-\[2em\]{min-height:2em}.w-4{width:1rem}.w-\[10px\]{width:10px}.w-\[300px\]{width:300px}.w-\[400px\]{width:400px}.w-\[500px\]{width:500px}.w-full{width:100%}.min-w-0{min-width:0}.max-w-\[80vw\]{max-width:80vw}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-grow,.grow{flex-grow:1}.-translate-y-\[1px\],.-translate-y-px{--tw-translate-y:-1px}.-translate-y-\[1px\],.-translate-y-px,.translate-y-2{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))}.translate-y-2{--tw-translate-y:0.5rem}.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))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-4{gap:1rem}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-hidden{overflow-y:hidden}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-dotted{border-style:dotted}.border-amber-500\/70{border-color:#f59e0bb3}.border-amber-600{--tw-border-opacity:1;border-color:rgb(217 119 6/var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-blue-500\/60{border-color:#3b82f699}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-500\/60{border-color:#6b728099}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}.border-green-500\/60{border-color:#22c55e99}.border-green-600{--tw-border-opacity:1;border-color:rgb(22 163 74/var(--tw-border-opacity))}.border-orange-500\/60{border-color:#f9731699}.border-purple-500\/60{border-color:#a855f799}.border-red-500\/60{border-color:#ef444499}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.border-b-blue-600{--tw-border-opacity:1;border-bottom-color:rgb(37 99 235/var(--tw-border-opacity))}.border-b-gray-100{--tw-border-opacity:1;border-bottom-color:rgb(243 244 246/var(--tw-border-opacity))}.border-l-blue-400{--tw-border-opacity:1;border-left-color:rgb(96 165 250/var(--tw-border-opacity))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity))}.bg-amber-50\/80{background-color:#fffbebcc}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-50\/80{background-color:#eff6ffcc}.bg-blue-900{--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-50\/10{background-color:#f9fafb1a}.bg-gray-50\/80{background-color:#f9fafbcc}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}.bg-green-50\/80{background-color:#f0fdf4cc}.bg-orange-50\/80{background-color:#fff7edcc}.bg-purple-50\/80{background-color:#faf5ffcc}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-red-50\/80{background-color:#fef2f2cc}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.bg-stone-200\/10{background-color:#e7e5e41a}.bg-stone-700{--tw-bg-opacity:1;background-color:rgb(68 64 60/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.fill-blue-900{fill:#1e3a8a}.fill-white{fill:#fff}.object-cover{-o-object-fit:cover;object-fit:cover}.object-left{-o-object-position:left;object-position:left}.object-top{-o-object-position:top;object-position:top}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pt-3{padding-top:.75rem}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.font-thin{font-weight:100}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-3{line-height:.75rem}.leading-\[0\]{line-height:0}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-inherit{color:inherit}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity))}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity))}.text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-success{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.opacity-0{opacity:0}.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)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-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-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.hover\:font-semibold:hover{font-weight:600}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.hover\:text-inherit:hover{color:inherit}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-\[inset_0_0_0px_30px_\#00000003\]:hover{--tw-shadow:inset 0 0 0px 30px #00000003;--tw-shadow-colored:inset 0 0 0px 30px var(--tw-shadow-color)}.hover\:shadow-\[inset_0_0_0px_30px_\#00000003\]:hover,.hover\:shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--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)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.active\:opacity-100:active,.focus\:opacity-100:focus{opacity:1}.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-70{opacity:.7}:is([data-jp-theme-light=false] .dark\:border-y-0){border-top-width:0;border-bottom-width:0}:is([data-jp-theme-light=false] .dark\:border-l-4){border-left-width:4px}:is([data-jp-theme-light=false] .dark\:border-amber-500\/70){border-color:#f59e0bb3}:is([data-jp-theme-light=false] .dark\:border-blue-500\/60){border-color:#3b82f699}:is([data-jp-theme-light=false] .dark\:border-gray-500){--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}:is([data-jp-theme-light=false] .dark\:border-gray-500\/60){border-color:#6b728099}:is([data-jp-theme-light=false] .dark\:border-gray-800){--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity))}:is([data-jp-theme-light=false] .dark\:border-green-500\/60){border-color:#22c55e99}:is([data-jp-theme-light=false] .dark\:border-orange-500\/60){border-color:#f9731699}:is([data-jp-theme-light=false] .dark\:border-purple-500\/60){border-color:#a855f799}:is([data-jp-theme-light=false] .dark\:border-red-500\/60){border-color:#ef444499}:is([data-jp-theme-light=false] .dark\:border-slate-300){--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}:is([data-jp-theme-light=false] .dark\:border-b-white){--tw-border-opacity:1;border-bottom-color:rgb(255 255 255/var(--tw-border-opacity))}:is([data-jp-theme-light=false] .dark\:border-l-blue-400){--tw-border-opacity:1;border-left-color:rgb(96 165 250/var(--tw-border-opacity))}:is([data-jp-theme-light=false] .dark\:bg-slate-600){--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity))}:is([data-jp-theme-light=false] .dark\:bg-slate-800){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}:is([data-jp-theme-light=false] .dark\:bg-slate-900){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}:is([data-jp-theme-light=false] .dark\:bg-stone-700){--tw-bg-opacity:1;background-color:rgb(68 64 60/var(--tw-bg-opacity))}:is([data-jp-theme-light=false] .dark\:bg-stone-800){--tw-bg-opacity:1;background-color:rgb(41 37 36/var(--tw-bg-opacity))}:is([data-jp-theme-light=false] .dark\:bg-white){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}:is([data-jp-theme-light=false] .dark\:fill-white){fill:#fff}:is([data-jp-theme-light=false] .dark\:text-black){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:text-gray-100){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:text-gray-300){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:text-gray-400){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:text-green-500){--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:text-neutral-200){--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:text-purple-500){--tw-text-opacity:1;color:rgb(168 85 247/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:text-slate-100){--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:text-white){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:shadow-2xl){--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:is([data-jp-theme-light=false] .dark\:shadow-neutral-700){--tw-shadow-color:#404040;--tw-shadow:var(--tw-shadow-colored)}:is([data-jp-theme-light=false] .dark\:shadow-neutral-800){--tw-shadow-color:#262626;--tw-shadow:var(--tw-shadow-colored)}:is([data-jp-theme-light=false] .dark\:shadow-neutral-900){--tw-shadow-color:#171717;--tw-shadow:var(--tw-shadow-colored)}:is([data-jp-theme-light=false] .dark\:hover\:border-blue-400:hover){--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity))}:is([data-jp-theme-light=false] .dark\:hover\:text-blue-400:hover){--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:hover\:text-gray-100:hover){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}:is([data-jp-theme-light=false] .dark\:hover\:shadow-\[inset_0_0_0px_30px_\#FFFFFF03\]:hover){--tw-shadow:inset 0 0 0px 30px #ffffff03;--tw-shadow-colored:inset 0 0 0px 30px 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 (min-width:640px){.sm\:max-w-\[400px\]{max-width:400px}.sm\:max-w-\[500px\]{max-width:500px}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.sm\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.sm\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.sm\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}}@media (min-width:768px){.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.md\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.md\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.lg\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}}@media (min-width:1280px){.xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xl\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xl\:grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xl\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xl\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}} \ No newline at end of file diff --git a/papyri-lab/style/base.css b/papyri-lab/style/base.css index 871c145a..6761fc2d 100644 --- a/papyri-lab/style/base.css +++ b/papyri-lab/style/base.css @@ -20,6 +20,10 @@ code { border: 1px solid orange; } -div#papyri-browser a:hover { - text-decoration: underline; +div#papyri-browser a:hover { + text-decoration: underline; +} + +#papyri-browser a { + font-weight: bold; } From fe2ff1f6bb620d3522f440dda868660acaac81f4 Mon Sep 17 00:00:00 2001 From: Matthias Bussonnier Date: Mon, 25 Dec 2023 21:10:23 +0100 Subject: [PATCH 2/3] basic of navigation --- papyri-lab/src/papyri-comp.tsx | 5 ++--- papyri-lab/src/widgets.tsx | 28 +++++++++++++++++++++++----- papyri-lab/style/base.css | 21 ++++++++++++++++++++- 3 files changed, 45 insertions(+), 9 deletions(-) diff --git a/papyri-lab/src/papyri-comp.tsx b/papyri-lab/src/papyri-comp.tsx index b3d3a6fb..877add4d 100644 --- a/papyri-lab/src/papyri-comp.tsx +++ b/papyri-lab/src/papyri-comp.tsx @@ -12,7 +12,6 @@ const MyLink = ({ node }: any) => { const parts = node.url.split('/'); const search_term = parts[parts.length - 1]; const f = (q: string) => { - console.log('sustom onclick', q, onSearch); onSearch(q); }; @@ -142,7 +141,7 @@ const SignatureRenderer = ({ node }: { node: any }) => { return ( <> - {', '} + {', '} ); } @@ -150,7 +149,7 @@ const SignatureRenderer = ({ node }: { node: any }) => { {')'} - {'->'} {node.return_annotation.data} + {node.return_annotation.data ? '-> ' + node.return_annotation.data : ''} : diff --git a/papyri-lab/src/widgets.tsx b/papyri-lab/src/widgets.tsx index 68d41ebe..cc55528b 100644 --- a/papyri-lab/src/widgets.tsx +++ b/papyri-lab/src/widgets.tsx @@ -18,6 +18,7 @@ const PapyriComponent = (): JSX.Element => { // list of a few pages in the database that matches // the current query const [possibilities, setPossibilities] = useState([]); + const [navs, setNavs] = useState([]); const [root, setRoot] = useState({}); const [searchTerm, setSearchTerm] = useState(''); @@ -27,14 +28,28 @@ const PapyriComponent = (): JSX.Element => { setSearchTerm(event.target.value); search(event.target.value); }; + + const back = async () => { + navs.pop(); + const pen = navs.pop(); + if (pen !== undefined) { + console.log('Settgin search term', pen); + await setSearchTerm(pen); + console.log('... and searchg for ', pen); + await search(pen); + } + }; + const search = async (query: string) => { const res = await requestAPI('get-example', { body: query, method: 'post' }); + console.log('Got a response for', query, 'res.body=', res.body); // response has body (MyST–json if the query has an exact match) // and data if we have some close matches. if (res.body !== null) { + setNavs([...navs, query]); setRoot(res.body); setPossibilities([]); } else { @@ -57,6 +72,7 @@ const PapyriComponent = (): JSX.Element => { return ( +
    {possibilities.map(e => { return ( @@ -73,11 +89,13 @@ const PapyriComponent = (): JSX.Element => { ); })}
- - - - - +
+ + + + + +
); }; diff --git a/papyri-lab/style/base.css b/papyri-lab/style/base.css index 6761fc2d..42bf8d8d 100644 --- a/papyri-lab/style/base.css +++ b/papyri-lab/style/base.css @@ -6,7 +6,6 @@ @import 'app.css'; div#papyri-browser { - overflow: scroll; padding: 15px; } @@ -27,3 +26,23 @@ div#papyri-browser a:hover { #papyri-browser a { font-weight: bold; } + +#papyri-browser .view { + overflow: scroll; + height: 100%; +} + +#papyri-browser { + & span.signature-separator { + white-space: pre; + } + + & span.default-value { + opacity: 30%; + } + & span.type-ann, + & span.ret-ann { + opacity: 30%; + color: gray; + } +} From 6458d414320b304a018bc0ba9d77f636fc1f4e5d Mon Sep 17 00:00:00 2001 From: Matthias Bussonnier Date: Mon, 25 Dec 2023 21:22:51 +0100 Subject: [PATCH 3/3] minor style update --- papyri-lab/src/papyri-comp.tsx | 2 +- papyri-lab/style/base.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/papyri-lab/src/papyri-comp.tsx b/papyri-lab/src/papyri-comp.tsx index 877add4d..44be66d9 100644 --- a/papyri-lab/src/papyri-comp.tsx +++ b/papyri-lab/src/papyri-comp.tsx @@ -126,7 +126,7 @@ const SignatureRenderer = ({ node }: { node: any }) => { acc.push(p); } return ( - + {node.kind.indexOf('async') !== -1 || node.kind.indexOf('coroutine') !== -1 ? 'async ' diff --git a/papyri-lab/style/base.css b/papyri-lab/style/base.css index 42bf8d8d..2a55a222 100644 --- a/papyri-lab/style/base.css +++ b/papyri-lab/style/base.css @@ -45,4 +45,8 @@ div#papyri-browser a:hover { opacity: 30%; color: gray; } + + & span.param-block { + white-space: pre; + } }