From 76ac6945425a3c5b9e539098fbc4c4c4d14f8b27 Mon Sep 17 00:00:00 2001 From: Xin Date: Wed, 13 Sep 2023 05:02:38 -0400 Subject: [PATCH] feat: add backdrop blur for nav bar (#53) --- assets/css/compiled/main.css | 5026 +++++++++++++----------------- assets/css/components/navbar.css | 8 + assets/css/styles.css | 6 +- assets/css/tailwind.css | 3 + exampleSite/hugo_stats.json | 3 +- layouts/partials/navbar.html | 4 +- 6 files changed, 2159 insertions(+), 2891 deletions(-) create mode 100644 assets/css/tailwind.css diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 98008744..b045e976 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,3152 +1,2520 @@ -.content h1 { - margin-top: 0.5rem; - font-size: 2.25rem; - font-weight: 700; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); +/* +! tailwindcss v3.3.3 | 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 */ } -:is(html[class~="dark"] .content h1) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); + +::before, +::after { + --tw-content: ''; } - .content h2 { - margin-top: 2.5rem; - border-bottom-width: 1px; - border-color: rgb(229 229 229 / 0.7); - padding-bottom: 0.25rem; - font-size: 1.875rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); + +/* +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 */ } - @media (prefers-contrast: more) { - .content h2 { - --tw-border-opacity: 1; - border-color: rgb(163 163 163 / var(--tw-border-opacity)); - } + +/* +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 */ } - :is(html[class~="dark"] .content h2) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.1); - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); + +/* +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 */ } - @media (prefers-contrast: more) { - :is(html[class~="dark"] .content h2) { - --tw-border-opacity: 1; - border-color: rgb(163 163 163 / var(--tw-border-opacity)); - } + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; } - .content h3 { - margin-top: 2rem; - font-size: 1.5rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; } - :is(html[class~="dark"] .content h3) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; } - .content h4 { - margin-top: 2rem; - font-size: 1.25rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; } - :is(html[class~="dark"] .content h4) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); + +/* +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 */ } - .content h5 { - margin-top: 2rem; - font-size: 1.125rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; } - :is(html[class~="dark"] .content h5) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); + +/* +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; } - .content h6 { - margin-top: 2rem; - font-size: 1rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); + +sub { + bottom: -0.25em; } - :is(html[class~="dark"] .content h6) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); + +sup { + top: -0.5em; } - .content p { - margin-top: 1.5rem; - line-height: 1.75rem; + +/* +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 */ } - .content p:first-child { - margin-top: 0px; + +/* +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 */ } - .content a { - --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); - text-decoration-line: underline; - text-decoration-thickness: from-font; - text-underline-position: from-font; + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; } - .content .not-prose a { - color: currentColor; - text-decoration-line: 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 */ } - .content blockquote { - margin-top: 1.5rem; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - font-style: italic; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - .content blockquote:first-child { - margin-top: 0px; -} - :is([dir="ltr"] .content blockquote) { - border-left-width: 2px; - padding-left: 1.5rem; + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; } - :is([dir="rtl"] .content blockquote) { - border-right-width: 2px; - padding-right: 1.5rem; + +/* +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; } - :is(html[class~="dark"] .content blockquote) { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; } - .content pre:not(.code-block pre) { - margin-bottom: 1rem; - overflow-x: auto; - border-radius: 0.75rem; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); - padding-top: 1rem; - padding-bottom: 1rem; - font-size: .9em; - font-weight: 500; - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; } - @media (prefers-contrast: more) { - .content pre:not(.code-block pre) { - border-width: 1px; - border-color: hsl(var(--primary-hue) 100% 24% / 0.2); - --tw-contrast: contrast(1.5); - 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); - } + +/* +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 */ } - :is(html[class~="dark"] .content pre:not(.code-block pre)) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; } - @media (prefers-contrast: more) { - :is(html[class~="dark"] .content pre:not(.code-block pre)) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.4); - } + +/* +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 */ } - .content code:not(.code-block code) { - overflow-wrap: break-word; - border-radius: 0.375rem; - border-width: 1px; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); - --tw-border-opacity: 0.04; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - --tw-bg-opacity: 0.03; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-left: .25em; - padding-right: .25em; - font-size: .9em; + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; } - :is(html[class~="dark"] .content code:not(.code-block code)) { - border-color: rgb(255 255 255 / 0.1); - background-color: rgb(255 255 255 / 0.1); + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; } - .content table:not(.code-block table) { - margin-top: 1.5rem; - display: block; - overflow-x: auto; - padding: 0px; + +fieldset { + margin: 0; + padding: 0; } - .content table:not(.code-block table):first-child { - margin-top: 0px; + +legend { + padding: 0; } - .content table:not(.code-block table) tr { - margin: 0px; - border-top-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - padding: 0px; + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; } - .content table:not(.code-block table) tr:nth-child(even) { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); + +/* +Reset default styling for dialogs. +*/ +dialog { + padding: 0; } - :is(html[class~="dark"] .content table:not(.code-block table) tr) { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; } - :is(html[class~="dark"] .content table:not(.code-block table) tr):nth-child(even) { - background-color: rgb(75 85 99 / 0.2); + +/* +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 */ } - .content table:not(.code-block table) th { - margin: 0px; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-weight: 600; + +input::placeholder, +textarea::placeholder { + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ } - :is(html[class~="dark"] .content table:not(.code-block table) th) { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; } - .content table:not(.code-block table) td { - margin: 0px; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ +:disabled { + cursor: default; } - :is(html[class~="dark"] .content table:not(.code-block table) td) { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); + +/* +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 */ } - .content ol { - margin-top: 1.5rem; - list-style-type: decimal; + +/* +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; } - .content ol:first-child { - margin-top: 0px; + +/* Make elements with the HTML hidden attribute stay hidden by default */ +[hidden] { + display: none; } - :is([dir="ltr"] .content ol) { - margin-left: 1.5rem; + +*, ::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: ; } - :is([dir="rtl"] .content ol) { - margin-right: 1.5rem; + +::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: ; } - .content ol li { - margin-top: 0.5rem; - margin-bottom: 0.5rem; +.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; } - .content ul { - margin-top: 1.5rem; - list-style-type: disc; +.pointer-events-none { + pointer-events: none; } - .content ul:first-child { - margin-top: 0px; +.absolute { + position: absolute; } - :is([dir="ltr"] .content ul) { - margin-left: 1.5rem; +.relative { + position: relative; } - :is([dir="rtl"] .content ul) { - margin-right: 1.5rem; +.sticky { + position: sticky; } - .content ul li { - margin-top: 0.5rem; - margin-bottom: 0.5rem; +.inset-x-0 { + left: 0px; + right: 0px; } - .content .not-prose ul, .content .not-prose ol { - margin: 0px; - list-style-type: none; +.inset-y-0 { + top: 0px; + bottom: 0px; } - .content .not-prose ul li, .content .not-prose ol li { - margin: 0px; +.bottom-0 { + bottom: 0px; } - .content kbd { - overflow-wrap: break-word; - border-radius: 0.375rem; - border-width: 1px; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); - --tw-border-opacity: 0.04; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - --tw-bg-opacity: 0.03; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-left: .25em; - padding-right: .25em; - font-size: .9em; +.left-\[24px\] { + left: 24px; } - :is(html[class~="dark"] .content kbd) { - border-color: rgb(255 255 255 / 0.1); - background-color: rgb(255 255 255 / 0.1); +.left-\[36px\] { + left: 36px; } - .content pre:not(.code-block pre).mermaid { - border-radius: 0px; - background-color: transparent; +.right-0 { + right: 0px; } - :is(html[class~="dark"] .content pre:not(.code-block pre).mermaid) { - background-color: transparent; +.top-0 { + top: 0px; } - .content img { - margin-left: auto; - margin-right: auto; - margin-top: 1rem; - margin-bottom: 1rem; - border-radius: 0.375rem; +.top-16 { + top: 4rem; } - .content .not-prose img { - margin: 0px; - border-radius: 0px; +.top-8 { + top: 2rem; } - .content figure figcaption { - margin-top: 0.5rem; - display: block; - text-align: center; - font-size: .875rem; - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); +.top-\[40\%\] { + top: 40%; } - :is(html[class~="dark"] .content figure figcaption) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); +.top-full { + top: 100%; } - .content .footnotes { - margin-top: 3rem; - font-size: .875rem; +.z-20 { + z-index: 20; } - -.subheading-anchor { - opacity: 0; - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +.z-\[-1\] { + z-index: -1; } - -:is([dir="ltr"] .subheading-anchor) { - margin-left: 0.25rem; +.order-last { + order: 9999; } - -:is([dir="rtl"] .subheading-anchor) { - margin-right: 0.25rem; +.m-\[11px\] { + margin: 11px; } - -span:target + .subheading-anchor, - :hover > .subheading-anchor, - .subheading-anchor:focus { - opacity: 1; +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; } - -span + .subheading-anchor, - :hover > .subheading-anchor { - text-decoration-line: none !important; +.mx-2 { + margin-left: 0.5rem; + margin-right: 0.5rem; } - -.subheading-anchor:after { - padding-left: 0.25rem; - padding-right: 0.25rem; - --tw-content: '#'; - content: var(--tw-content); - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; } - -:is(html[class~="dark"] .subheading-anchor):after { - --tw-text-opacity: 1; - color: rgb(64 64 64 / var(--tw-text-opacity)); +.mx-auto { + margin-left: auto; + margin-right: auto; } - -span:target + .subheading-anchor:after { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); +.my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; } - -:is(html[class~="dark"] span:target + .subheading-anchor):after { - --tw-text-opacity: 1; - color: rgb(115 115 115 / var(--tw-text-opacity)); +.my-1\.5 { + margin-top: 0.375rem; + margin-bottom: 0.375rem; } - -article.typesetting-article { - font-size: 17px; - font-feature-settings: - 'rlig' 1, - 'calt' 1; +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } - -article.typesetting-article h1 { - margin-top: 1.5rem; +.-mb-0 { + margin-bottom: -0px; +} +.-mb-0\.5 { + margin-bottom: -0.125rem; +} +.-ml-2 { + margin-left: -0.5rem; +} +.-mr-2 { + margin-right: -0.5rem; +} +.-mt-20 { + margin-top: -5rem; +} +.mb-10 { + margin-bottom: 2.5rem; +} +.mb-12 { + margin-bottom: 3rem; +} +.mb-16 { + margin-bottom: 4rem; +} +.mb-2 { + margin-bottom: 0.5rem; +} +.mb-4 { margin-bottom: 1rem; - text-align: center; - font-size: 2.5rem; } - -article.typesetting-article h2 { - border-style: none; +.mb-8 { + margin-bottom: 2rem; } - -article.typesetting-article a { - text-decoration-line: none; +.ml-1 { + margin-left: 0.25rem; } - -article.typesetting-article a:hover { - text-decoration-line: underline; +.ml-4 { + margin-left: 1rem; } - -article.typesetting-article p { - line-height: 2rem; +.mr-2 { + margin-right: 0.5rem; } - -article.typesetting-article code { - border-style: none; +.mt-1 { + margin-top: 0.25rem; } - -:is(html[class~="dark"] article.typesetting-article code) { - --tw-bg-opacity: 1; - background-color: rgb(64 64 64 / var(--tw-bg-opacity)); +.mt-1\.5 { + margin-top: 0.375rem; } - -:is(html[class~="dark"] article.typesetting-article pre code) { - background-color: transparent; +.mt-12 { + margin-top: 3rem; } - -article.typesetting-article .subheading-anchor + a { - text-decoration-line: none; +.mt-16 { + margin-top: 4rem; } - -article.typesetting-article .subheading-anchor + a::after { - content: var(--tw-content); - display: none; +.mt-2 { + margin-top: 0.5rem; } - -article.typesetting-article .subheading-anchor + a:hover { - text-decoration-line: none; +.mt-4 { + margin-top: 1rem; } - -article details > summary::-webkit-details-marker { +.mt-5 { + margin-top: 1.25rem; +} +.mt-6 { + margin-top: 1.5rem; +} +.mt-8 { + margin-top: 2rem; +} +.line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} +.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; } - -article details > summary::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E"); - height: 1.2em; - width: 1.2em; - vertical-align: -4px; - } - -/* Code syntax highlight */ - -/* Light theme for syntax highlight */ - -/* Generated using `hugo gen chromastyles --style=github` */ - -.highlight { - /* Background .bg { background-color: #ffffff; } */ - /* PreWrapper .chroma { background-color: #ffffff; } */ - /* Other .chroma .x { } */ - /* CodeLine .chroma .cl { } */ - /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ - /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */ - /* LineHighlight .chroma .hl { background-color: #ffffcc } */ - /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */ - /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */ - /* Name .chroma .n { } */ - /* NameFunctionMagic .chroma .fm { } */ - /* NameOther .chroma .nx { } */ - /* NameProperty .chroma .py { } */ - /* NameVariableMagic .chroma .vm { } */ - /* Literal .chroma .l { } */ - /* LiteralDate .chroma .ld { } */ - /* Punctuation .chroma .p { } */ - /* Generic .chroma .g { } */ +.aspect-auto { + aspect-ratio: auto; } - -/* Error */ - -.highlight .chroma .err { color: #a61717; background-color: #e3d2d2 } - -/* LineLink */ - -.highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } - -/* Line */ - -.highlight .chroma .line { display: flex; } - -/* Keyword */ - -.highlight .chroma .k { color: #000000; font-weight: bold } - -/* KeywordConstant */ - -.highlight .chroma .kc { color: #000000; font-weight: bold } - -/* KeywordDeclaration */ - -.highlight .chroma .kd { color: #000000; font-weight: bold } - -/* KeywordNamespace */ - -.highlight .chroma .kn { color: #000000; font-weight: bold } - -/* KeywordPseudo */ - -.highlight .chroma .kp { color: #000000; font-weight: bold } - -/* KeywordReserved */ - -.highlight .chroma .kr { color: #000000; font-weight: bold } - -/* KeywordType */ - -.highlight .chroma .kt { color: #445588; font-weight: bold } - -/* NameAttribute */ - -.highlight .chroma .na { color: #008080 } - -/* NameBuiltin */ - -.highlight .chroma .nb { color: #0086b3 } - -/* NameBuiltinPseudo */ - -.highlight .chroma .bp { color: #999999 } - -/* NameClass */ - -.highlight .chroma .nc { color: #445588; font-weight: bold } - -/* NameConstant */ - -.highlight .chroma .no { color: #008080 } - -/* NameDecorator */ - -.highlight .chroma .nd { color: #3c5d5d; font-weight: bold } - -/* NameEntity */ - -.highlight .chroma .ni { color: #800080 } - -/* NameException */ - -.highlight .chroma .ne { color: #990000; font-weight: bold } - -/* NameFunction */ - -.highlight .chroma .nf { color: #990000; font-weight: bold } - -/* NameLabel */ - -.highlight .chroma .nl { color: #990000; font-weight: bold } - -/* NameNamespace */ - -.highlight .chroma .nn { color: #555555 } - -/* NameTag */ - -.highlight .chroma .nt { color: #000080 } - -/* NameVariable */ - -.highlight .chroma .nv { color: #008080 } - -/* NameVariableClass */ - -.highlight .chroma .vc { color: #008080 } - -/* NameVariableGlobal */ - -.highlight .chroma .vg { color: #008080 } - -/* NameVariableInstance */ - -.highlight .chroma .vi { color: #008080 } - -/* LiteralString */ - -.highlight .chroma .s { color: #dd1144 } - -/* LiteralStringAffix */ - -.highlight .chroma .sa { color: #dd1144 } - -/* LiteralStringBacktick */ - -.highlight .chroma .sb { color: #dd1144 } - -/* LiteralStringChar */ - -.highlight .chroma .sc { color: #dd1144 } - -/* LiteralStringDelimiter */ - -.highlight .chroma .dl { color: #dd1144 } - -/* LiteralStringDoc */ - -.highlight .chroma .sd { color: #dd1144 } - -/* LiteralStringDouble */ - -.highlight .chroma .s2 { color: #dd1144 } - -/* LiteralStringEscape */ - -.highlight .chroma .se { color: #dd1144 } - -/* LiteralStringHeredoc */ - -.highlight .chroma .sh { color: #dd1144 } - -/* LiteralStringInterpol */ - -.highlight .chroma .si { color: #dd1144 } - -/* LiteralStringOther */ - -.highlight .chroma .sx { color: #dd1144 } - -/* LiteralStringRegex */ - -.highlight .chroma .sr { color: #009926 } - -/* LiteralStringSingle */ - -.highlight .chroma .s1 { color: #dd1144 } - -/* LiteralStringSymbol */ - -.highlight .chroma .ss { color: #990073 } - -/* LiteralNumber */ - -.highlight .chroma .m { color: #009999 } - -/* LiteralNumberBin */ - -.highlight .chroma .mb { color: #009999 } - -/* LiteralNumberFloat */ - -.highlight .chroma .mf { color: #009999 } - -/* LiteralNumberHex */ - -.highlight .chroma .mh { color: #009999 } - -/* LiteralNumberInteger */ - -.highlight .chroma .mi { color: #009999 } - -/* LiteralNumberIntegerLong */ - -.highlight .chroma .il { color: #009999 } - -/* LiteralNumberOct */ - -.highlight .chroma .mo { color: #009999 } - -/* Operator */ - -.highlight .chroma .o { color: #000000; font-weight: bold } - -/* OperatorWord */ - -.highlight .chroma .ow { color: #000000; font-weight: bold } - -/* Comment */ - -.highlight .chroma .c { color: #999988; font-style: italic } - -/* CommentHashbang */ - -.highlight .chroma .ch { color: #999988; font-style: italic } - -/* CommentMultiline */ - -.highlight .chroma .cm { color: #999988; font-style: italic } - -/* CommentSingle */ - -.highlight .chroma .c1 { color: #999988; font-style: italic } - -/* CommentSpecial */ - -.highlight .chroma .cs { color: #999999; font-weight: bold; font-style: italic } - -/* CommentPreproc */ - -.highlight .chroma .cp { color: #999999; font-weight: bold; font-style: italic } - -/* CommentPreprocFile */ - -.highlight .chroma .cpf { color: #999999; font-weight: bold; font-style: italic } - -/* GenericDeleted */ - -.highlight .chroma .gd { color: #000000; background-color: #ffdddd } - -/* GenericEmph */ - -.highlight .chroma .ge { color: #000000; font-style: italic } - -/* GenericError */ - -.highlight .chroma .gr { color: #aa0000 } - -/* GenericHeading */ - -.highlight .chroma .gh { color: #999999 } - -/* GenericInserted */ - -.highlight .chroma .gi { color: #000000; background-color: #ddffdd } - -/* GenericOutput */ - -.highlight .chroma .go { color: #888888 } - -/* GenericPrompt */ - -.highlight .chroma .gp { color: #555555 } - -/* GenericStrong */ - -.highlight .chroma .gs { font-weight: bold } - -/* GenericSubheading */ - -.highlight .chroma .gu { color: #aaaaaa } - -/* GenericTraceback */ - -.highlight .chroma .gt { color: #aa0000 } - -/* GenericUnderline */ - -.highlight .chroma .gl { text-decoration: underline } - -/* TextWhitespace */ - -.highlight .chroma .w { color: #bbbbbb } - -.dark .highlight { - /* Background .bg { color: #c9d1d9; background-color: #0d1117; } - /* PreWrapper .chroma { color: #c9d1d9; background-color: #0d1117; } */ - /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ - /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */ - /* LineHighlight .chroma .hl { background-color: #ffffcc } */ - /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } */ - /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } */ -} - -/* Other */ - -.dark .highlight .chroma .x { } - -/* Error */ - -.dark .highlight .chroma .err { color: #f85149 } - -/* CodeLine */ - -.dark .highlight .chroma .cl { } - -/* LineLink */ - -.dark .highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } - -/* Line */ - -.dark .highlight .chroma .line { display: flex; } - -/* Keyword */ - -.dark .highlight .chroma .k { color: #ff7b72 } - -/* KeywordConstant */ - -.dark .highlight .chroma .kc { color: #79c0ff } - -/* KeywordDeclaration */ - -.dark .highlight .chroma .kd { color: #ff7b72 } - -/* KeywordNamespace */ - -.dark .highlight .chroma .kn { color: #ff7b72 } - -/* KeywordPseudo */ - -.dark .highlight .chroma .kp { color: #79c0ff } - -/* KeywordReserved */ - -.dark .highlight .chroma .kr { color: #ff7b72 } - -/* KeywordType */ - -.dark .highlight .chroma .kt { color: #ff7b72 } - -/* Name */ - -.dark .highlight .chroma .n { } - -/* NameAttribute */ - -.dark .highlight .chroma .na { } - -/* NameBuiltin */ - -.dark .highlight .chroma .nb { } - -/* NameBuiltinPseudo */ - -.dark .highlight .chroma .bp { } - -/* NameClass */ - -.dark .highlight .chroma .nc { color: #f0883e; font-weight: bold } - -/* NameConstant */ - -.dark .highlight .chroma .no { color: #79c0ff; font-weight: bold } - -/* NameDecorator */ - -.dark .highlight .chroma .nd { color: #d2a8ff; font-weight: bold } - -/* NameEntity */ - -.dark .highlight .chroma .ni { color: #ffa657 } - -/* NameException */ - -.dark .highlight .chroma .ne { color: #f0883e; font-weight: bold } - -/* NameFunction */ - -.dark .highlight .chroma .nf { color: #d2a8ff; font-weight: bold } - -/* NameFunctionMagic */ - -.dark .highlight .chroma .fm { } - -/* NameLabel */ - -.dark .highlight .chroma .nl { color: #79c0ff; font-weight: bold } - -/* NameNamespace */ - -.dark .highlight .chroma .nn { color: #ff7b72 } - -/* NameOther */ - -.dark .highlight .chroma .nx { } - -/* NameProperty */ - -.dark .highlight .chroma .py { color: #79c0ff } - -/* NameTag */ - -.dark .highlight .chroma .nt { color: #7ee787 } - -/* NameVariable */ - -.dark .highlight .chroma .nv { color: #79c0ff } - -/* NameVariableClass */ - -.dark .highlight .chroma .vc { } - -/* NameVariableGlobal */ - -.dark .highlight .chroma .vg { } - -/* NameVariableInstance */ - -.dark .highlight .chroma .vi { } - -/* NameVariableMagic */ - -.dark .highlight .chroma .vm { } - -/* Literal */ - -.dark .highlight .chroma .l { color: #a5d6ff } - -/* LiteralDate */ - -.dark .highlight .chroma .ld { color: #79c0ff } - -/* LiteralString */ - -.dark .highlight .chroma .s { color: #a5d6ff } - -/* LiteralStringAffix */ - -.dark .highlight .chroma .sa { color: #79c0ff } - -/* LiteralStringBacktick */ - -.dark .highlight .chroma .sb { color: #a5d6ff } - -/* LiteralStringChar */ - -.dark .highlight .chroma .sc { color: #a5d6ff } - -/* LiteralStringDelimiter */ - -.dark .highlight .chroma .dl { color: #79c0ff } - -/* LiteralStringDoc */ - -.dark .highlight .chroma .sd { color: #a5d6ff } - -/* LiteralStringDouble */ - -.dark .highlight .chroma .s2 { color: #a5d6ff } - -/* LiteralStringEscape */ - -.dark .highlight .chroma .se { color: #79c0ff } - -/* LiteralStringHeredoc */ - -.dark .highlight .chroma .sh { color: #79c0ff } - -/* LiteralStringInterpol */ - -.dark .highlight .chroma .si { color: #a5d6ff } - -/* LiteralStringOther */ - -.dark .highlight .chroma .sx { color: #a5d6ff } - -/* LiteralStringRegex */ - -.dark .highlight .chroma .sr { color: #79c0ff } - -/* LiteralStringSingle */ - -.dark .highlight .chroma .s1 { color: #a5d6ff } - -/* LiteralStringSymbol */ - -.dark .highlight .chroma .ss { color: #a5d6ff } - -/* LiteralNumber */ - -.dark .highlight .chroma .m { color: #a5d6ff } - -/* LiteralNumberBin */ - -.dark .highlight .chroma .mb { color: #a5d6ff } - -/* LiteralNumberFloat */ - -.dark .highlight .chroma .mf { color: #a5d6ff } - -/* LiteralNumberHex */ - -.dark .highlight .chroma .mh { color: #a5d6ff } - -/* LiteralNumberInteger */ - -.dark .highlight .chroma .mi { color: #a5d6ff } - -/* LiteralNumberIntegerLong */ - -.dark .highlight .chroma .il { color: #a5d6ff } - -/* LiteralNumberOct */ - -.dark .highlight .chroma .mo { color: #a5d6ff } - -/* Operator */ - -.dark .highlight .chroma .o { color: #ff7b72; font-weight: bold } - -/* OperatorWord */ - -.dark .highlight .chroma .ow { color: #ff7b72; font-weight: bold } - -/* Punctuation */ - -.dark .highlight .chroma .p { } - -/* Comment */ - -.dark .highlight .chroma .c { color: #8b949e; font-style: italic } - -/* CommentHashbang */ - -.dark .highlight .chroma .ch { color: #8b949e; font-style: italic } - -/* CommentMultiline */ - -.dark .highlight .chroma .cm { color: #8b949e; font-style: italic } - -/* CommentSingle */ - -.dark .highlight .chroma .c1 { color: #8b949e; font-style: italic } - -/* CommentSpecial */ - -.dark .highlight .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic } - -/* CommentPreproc */ - -.dark .highlight .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic } - -/* CommentPreprocFile */ - -.dark .highlight .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic } - -/* Generic */ - -.dark .highlight .chroma .g { } - -/* GenericDeleted */ - -.dark .highlight .chroma .gd { color: #ffa198; background-color: #490202 } - -/* GenericEmph */ - -.dark .highlight .chroma .ge { font-style: italic } - -/* GenericError */ - -.dark .highlight .chroma .gr { color: #ffa198 } - -/* GenericHeading */ - -.dark .highlight .chroma .gh { color: #79c0ff; font-weight: bold } - -/* GenericInserted */ - -.dark .highlight .chroma .gi { color: #56d364; background-color: #0f5323 } - -/* GenericOutput */ - -.dark .highlight .chroma .go { color: #8b949e } - -/* GenericPrompt */ - -.dark .highlight .chroma .gp { color: #8b949e } - -/* GenericStrong */ - -.dark .highlight .chroma .gs { font-weight: bold } - -/* GenericSubheading */ - -.dark .highlight .chroma .gu { color: #79c0ff } - -/* GenericTraceback */ - -.dark .highlight .chroma .gt { color: #ff7b72 } - -/* GenericUnderline */ - -.dark .highlight .chroma .gl { text-decoration: underline } - -/* TextWhitespace */ - -.dark .highlight .chroma .w { color: #6e7681 } - -.code-block { - font-size: .9em; - line-height: 1.25rem; -} - -.code-block pre { - overflow-x: auto; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); - font-size: .9em; - font-weight: 500; - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; -} - -@media (prefers-contrast: more) { - .code-block pre { - border-width: 1px; - border-color: hsl(var(--primary-hue) 100% 24% / 0.2); - --tw-contrast: contrast(1.5); - 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); - } -} - -:is(html[class~="dark"] .code-block pre) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); -} - -@media (prefers-contrast: more) { - :is(html[class~="dark"] .code-block pre) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.4); - } -} - -.code-block .filename { - position: absolute; - top: 0px; - z-index: 1; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - border-top-left-radius: 0.75rem; - border-top-right-radius: 0.75rem; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - font-size: .75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -:is(html[class~="dark"] .code-block .filename) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.code-block pre:not(.lntable pre) { - margin-bottom: 1rem; - border-radius: 0.75rem; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.code-block div:nth-of-type(2) pre { - padding-top: 3rem; - padding-bottom: 1rem; -} - -.chroma .lntable { - margin: 0px; - display: block; - width: auto; - overflow: auto; - border-radius: 0.75rem; -} - -.chroma .lntable pre { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.chroma .ln, - .chroma .lnt:not(.hl > .lnt), - .chroma .hl { - min-width: 2.6rem; - padding-left: 1rem; - padding-right: 1rem; - --tw-text-opacity: 1; - color: rgb(82 82 82 / var(--tw-text-opacity)); -} - -:is(html[class~="dark"] .chroma .ln),:is(html[class~="dark"] - .chroma .lnt:not(.hl > .lnt)),:is(html[class~="dark"] - .chroma .hl) { - --tw-text-opacity: 1; - color: rgb(212 212 212 / var(--tw-text-opacity)); -} - -.chroma .lntd { - padding: 0px; - vertical-align: top; -} - -.chroma .lntd:last-of-type { - width: 100%; -} - -/* LineHighlight */ - -.chroma .hl { - display: block; - width: 100%; - background-color: hsl(var(--primary-hue) 100% 32% / 0.1); -} - -.hextra-cards { - grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)); -} - -.hextra-card img { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.hextra-card:hover svg { - color: currentColor; +.h-0 { + height: 0px; } - -.hextra-card svg { - width: 1.5rem; - color: #00000033; - transition: color 0.3s ease; +.h-16 { + height: 4rem; } - -.hextra-card p { - margin-top: 0.5rem; +.h-2 { + height: 0.5rem; } - -.dark .hextra-card svg { - color: #ffffff66; +.h-4 { + height: 1rem; } - -.dark .hextra-card:hover svg { - color: currentColor; +.h-5 { + height: 1.25rem; } - -.steps h3 { - counter-increment: step; +.h-7 { + height: 1.75rem; } - -.steps h3:before { - position: absolute; - height: 33px; - width: 33px; - border-width: 4px; - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +.h-\[18px\] { + height: 18px; } - -:is(html[class~="dark"] .steps h3):before { - --tw-border-opacity: 1; - border-color: rgb(17 17 17 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(38 38 38 / var(--tw-bg-opacity)); +.h-full { + height: 100%; } - -.steps h3:before { - border-radius: 9999px; - text-align: center; - text-indent: -1px; - font-size: 1rem; - font-weight: 400; - --tw-text-opacity: 1; - color: rgb(163 163 163 / var(--tw-text-opacity)); - margin-top: 3px; - margin-left: -41px; - content: counter(step); +.max-h-64 { + max-height: 16rem; } - -.search-wrapper li { - margin-left: 0.625rem; - margin-right: 0.625rem; - overflow-wrap: break-word; - border-radius: 0.375rem; - --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); +.max-h-\[calc\(100vh-var\(--navbar-height\)-env\(safe-area-inset-bottom\)\)\] { + max-height: calc(100vh - var(--navbar-height) - env(safe-area-inset-bottom)); } - -@media (prefers-contrast: more) { - .search-wrapper li { - border-width: 1px; - border-color: transparent; - } +.max-h-\[min\(calc\(50vh-11rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] { + max-height: min(calc(50vh - 11rem - env(safe-area-inset-bottom)),400px); } - -:is(html[class~="dark"] .search-wrapper li) { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); +.min-h-\[100px\] { + min-height: 100px; } - -.search-wrapper li a { - display: block; - scroll-margin: 3rem; - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; +.min-h-\[calc\(100vh-var\(--navbar-height\)\)\] { + min-height: calc(100vh - var(--navbar-height)); } - -.search-wrapper li .title { - font-size: 1rem; - font-weight: 600; - line-height: 1.25rem; +.w-2 { + width: 0.5rem; } - -.search-wrapper li .active { - border-radius: 0.375rem; - background-color: hsl(var(--primary-hue) 100% 50% / 0.1); +.w-3 { + width: 0.75rem; } - -@media (prefers-contrast: more) { - .search-wrapper li .active { - --tw-border-opacity: 1; - border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); - } +.w-3\.5 { + width: 0.875rem; } - -.search-wrapper .no-result { - display: block; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - padding: 2rem; - text-align: center; - font-size: .875rem; - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); +.w-4 { + width: 1rem; } - -.search-wrapper .prefix { - margin-left: 0.625rem; - margin-right: 0.625rem; - margin-bottom: 0.5rem; - margin-top: 1.5rem; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - border-bottom-width: 1px; - border-color: rgb(0 0 0 / 0.1); - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-bottom: 0.375rem; - font-size: .75rem; - font-weight: 600; - text-transform: uppercase; - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); +.w-64 { + width: 16rem; } - -.search-wrapper .prefix:first-child { - margin-top: 0px; +.w-\[110\%\] { + width: 110%; } - -@media (prefers-contrast: more) { - .search-wrapper .prefix { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); - } +.w-\[180\%\] { + width: 180%; } - -:is(html[class~="dark"] .search-wrapper .prefix) { - border-color: rgb(255 255 255 / 0.2); - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); +.w-full { + width: 100%; } - -@media (prefers-contrast: more) { - :is(html[class~="dark"] .search-wrapper .prefix) { - --tw-border-opacity: 1; - border-color: rgb(249 250 251 / var(--tw-border-opacity)); - --tw-text-opacity: 1; - color: rgb(249 250 251 / var(--tw-text-opacity)); - } +.w-max { + width: -moz-max-content; + width: max-content; } - -.search-wrapper .excerpt { - margin-top: 0.25rem; - overflow: hidden; - text-overflow: ellipsis; - font-size: .875rem; - line-height: 1.35rem; - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); +.w-screen { + width: 100vw; } - -:is(html[class~="dark"] .search-wrapper .excerpt) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); +.min-w-0 { + min-width: 0px; } - -@media (prefers-contrast: more) { - :is(html[class~="dark"] .search-wrapper .excerpt) { - --tw-text-opacity: 1; - color: rgb(249 250 251 / var(--tw-text-opacity)); - } +.min-w-\[18px\] { + min-width: 18px; } - -.search-wrapper .excerpt { - display: -webkit-box; - line-clamp: 1; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - } - -.search-wrapper .match { - --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); +.min-w-\[24px\] { + min-width: 24px; } - -@media (max-width: 767px) { - .sidebar-container { - position: fixed; - top: 0px; - bottom: 0px; - z-index: 15; - width: 100%; - overscroll-behavior: contain; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - padding-top: calc(var(--navbar-height)); - } - :is(html[class~="dark"] .sidebar-container) { - --tw-bg-opacity: 1; - background-color: rgb(17 17 17 / var(--tw-bg-opacity)); - } - .sidebar-container { - transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); - will-change: transform, opacity; - contain: layout style; - backface-visibility: hidden; - } +.min-w-full { + min-width: 100%; } - -.sidebar-container li > div { - height: 0px; +.max-w-6xl { + max-width: 72rem; } - -.sidebar-container li.open > div { - height: auto; +.max-w-\[50\%\] { + max-width: 50%; } - -.sidebar-container li.open > a > span > svg > path { - --tw-rotate: 90deg; - 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)); +.max-w-\[90rem\] { + max-width: 90rem; } - -nav .search-wrapper { - display: none; +.max-w-\[min\(calc\(100vw-2rem\)\2c calc\(100\%\+20rem\)\)\] { + max-width: min(calc(100vw - 2rem),calc(100% + 20rem)); } - -@media (min-width: 768px) { - nav .search-wrapper { - display: inline-block; - } +.max-w-none { + max-width: none; } - -.hamburger-menu svg g { - transform-origin: center; - transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); +.max-w-screen-xl { + max-width: 1280px; } - -.hamburger-menu svg path { - opacity: 1; - transition: - transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s, - opacity 0.2s ease 0.2s; - } - -.hamburger-menu svg.open path { - transition: - transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), - opacity 0s ease 0.2s; - } - -.hamburger-menu svg.open g { - transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; - } - -.hamburger-menu svg.open > path { - opacity: 0; +.shrink-0 { + flex-shrink: 0; } - -.hamburger-menu svg.open > g:nth-of-type(1) { - --tw-rotate: 45deg; - 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)); +.grow { + flex-grow: 1; } - -.hamburger-menu svg.open > g:nth-of-type(1) path { - transform: translate3d(0, 4px, 0); - } - -.hamburger-menu svg.open > g:nth-of-type(2) { - --tw-rotate: -45deg; - 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)); +.origin-center { + transform-origin: center; } - -.hamburger-menu svg.open > g:nth-of-type(2) path { - transform: translate3d(0, -4px, 0); - } - -/* ! tailwindcss v3.3.3 | 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 */ +.cursor-default { + cursor: default; } - -::before, -::after { - --tw-content: ''; +.cursor-pointer { + cursor: pointer; } - -/* -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 */ +.select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } - -/* -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 */ +.scroll-my-6 { + scroll-margin-top: 1.5rem; + scroll-margin-bottom: 1.5rem; } - -/* -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 */ +.scroll-py-6 { + scroll-padding-top: 1.5rem; + scroll-padding-bottom: 1.5rem; } - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; +.list-none { + list-style-type: none; } - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); } - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; +.flex-col { + flex-direction: column; } - -/* -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 */ +.items-start { + align-items: flex-start; } - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; +.items-center { + align-items: center; } - -/* -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; +.justify-start { + justify-content: flex-start; } - -sub { - bottom: -0.25em; +.justify-end { + justify-content: flex-end; } - -sup { - top: -0.5em; +.justify-center { + justify-content: center; } - -/* -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 */ +.justify-between { + justify-content: space-between; } - -/* -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 */ +.justify-items-start { + justify-items: start; } - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; +.gap-1 { + gap: 0.25rem; } - -/* -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 */ +.gap-2 { + gap: 0.5rem; } - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; +.gap-4 { + gap: 1rem; } - -/* -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; +.overflow-auto { + overflow: auto; } - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; +.overflow-hidden { + overflow: hidden; } - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; +.overflow-x-auto { + overflow-x: 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 */ +.overflow-y-auto { + overflow-y: auto; } - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; +.overflow-x-hidden { + overflow-x: hidden; } - -/* -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 */ +.overscroll-contain { + overscroll-behavior: contain; } - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; +.text-ellipsis { + text-overflow: ellipsis; } - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; +.whitespace-nowrap { + white-space: nowrap; } - -fieldset { - margin: 0; - padding: 0; +.break-words { + overflow-wrap: break-word; } - -legend { - padding: 0; +.rounded { + border-radius: 0.25rem; } - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; +.rounded-3xl { + border-radius: 1.5rem; +} +.rounded-full { + border-radius: 9999px; +} +.rounded-lg { + border-radius: 0.5rem; +} +.rounded-md { + border-radius: 0.375rem; +} +.rounded-sm { + border-radius: 0.125rem; } - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; +.rounded-xl { + border-radius: 0.75rem; } - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; +.rounded-t { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } - -/* -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 */ +.border { + border-width: 1px; } - -input::placeholder, -textarea::placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ +.border-b { + border-bottom-width: 1px; } - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; +.border-b-2 { + border-bottom-width: 2px; } - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; +.border-l { + border-left-width: 1px; } - -/* -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 */ +.border-t { + border-top-width: 1px; } - -/* -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; +.border-black\/5 { + border-color: rgb(0 0 0 / 0.05); } - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; +.border-blue-200 { + --tw-border-opacity: 1; + border-color: rgb(191 219 254 / var(--tw-border-opacity)); } - -*, ::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: ; +.border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } - -::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: ; +.border-orange-100 { + --tw-border-opacity: 1; + border-color: rgb(255 237 213 / var(--tw-border-opacity)); } - -.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; +.border-red-200 { + --tw-border-opacity: 1; + border-color: rgb(254 202 202 / var(--tw-border-opacity)); } - -.pointer-events-none { - pointer-events: none; +.border-transparent { + border-color: transparent; } - -.absolute { - position: absolute; +.border-yellow-100 { + --tw-border-opacity: 1; + border-color: rgb(254 249 195 / var(--tw-border-opacity)); } - -.relative { - position: relative; +.bg-black\/\[\.05\] { + background-color: rgb(0 0 0 / .05); } - -.sticky { - position: sticky; +.bg-blue-100 { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity)); } - -.inset-x-0 { - left: 0px; - right: 0px; +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } - -.inset-y-0 { - top: 0px; - bottom: 0px; +.bg-neutral-50 { + --tw-bg-opacity: 1; + background-color: rgb(250 250 250 / var(--tw-bg-opacity)); } - -.bottom-0 { - bottom: 0px; +.bg-orange-50 { + --tw-bg-opacity: 1; + background-color: rgb(255 247 237 / var(--tw-bg-opacity)); } - -.left-\[24px\] { - left: 24px; +.bg-primary-100 { + --tw-bg-opacity: 1; + background-color: hsl(var(--primary-hue) 100% 94% / var(--tw-bg-opacity)); } - -.left-\[36px\] { - left: 36px; +.bg-primary-400 { + --tw-bg-opacity: 1; + background-color: hsl(var(--primary-hue) 100% 66% / var(--tw-bg-opacity)); } - -.right-0 { - right: 0px; +.bg-primary-600 { + --tw-bg-opacity: 1; + background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity)); } - -.top-0 { - top: 0px; +.bg-primary-700\/5 { + background-color: hsl(var(--primary-hue) 100% 39% / 0.05); } - -.top-16 { - top: 4rem; +.bg-red-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } - -.top-8 { - top: 2rem; +.bg-transparent { + background-color: transparent; } - -.top-\[40\%\] { - top: 40%; +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } - -.top-full { - top: 100%; +.bg-yellow-50 { + --tw-bg-opacity: 1; + background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } - -.z-20 { - z-index: 20; +.bg-gradient-to-b { + background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } - -.z-\[-1\] { - z-index: -1; +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); } - -.order-last { - order: 9999; +.from-gray-800 { + --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } - -.m-\[11px\] { - margin: 11px; +.from-gray-900 { + --tw-gradient-from: #111827 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } - -.mx-1 { - margin-left: 0.25rem; - margin-right: 0.25rem; +.to-gray-600 { + --tw-gradient-to: #4b5563 var(--tw-gradient-to-position); } - -.mx-2 { - margin-left: 0.5rem; - margin-right: 0.5rem; +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; } - -.mx-4 { - margin-left: 1rem; - margin-right: 1rem; +.p-0 { + padding: 0px; } - -.mx-auto { - margin-left: auto; - margin-right: auto; +.p-0\.5 { + padding: 0.125rem; } - -.my-1 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; +.p-1 { + padding: 0.25rem; } - -.my-1\.5 { - margin-top: 0.375rem; - margin-bottom: 0.375rem; +.p-1\.5 { + padding: 0.375rem; } - -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; +.p-2 { + padding: 0.5rem; } - -.-mb-0 { - margin-bottom: -0px; +.p-4 { + padding: 1rem; } - -.-mb-0\.5 { - margin-bottom: -0.125rem; +.p-6 { + padding: 1.5rem; } - -.-ml-2 { - margin-left: -0.5rem; +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; } - -.-mr-2 { - margin-right: -0.5rem; +.px-1\.5 { + padding-left: 0.375rem; + padding-right: 0.375rem; } - -.-mt-20 { - margin-top: -5rem; +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; } - -.mb-10 { - margin-bottom: 2.5rem; +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; } - -.mb-12 { - margin-bottom: 3rem; +.px-4 { + padding-left: 1rem; + padding-right: 1rem; } - -.mb-16 { - margin-bottom: 4rem; +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; } - -.mb-2 { - margin-bottom: 0.5rem; +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; } - -.mb-4 { - margin-bottom: 1rem; +.py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; } - -.mb-8 { - margin-bottom: 2rem; +.py-12 { + padding-top: 3rem; + padding-bottom: 3rem; } - -.ml-1 { - margin-left: 0.25rem; +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } - -.ml-4 { - margin-left: 1rem; +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; } - -.mr-2 { - margin-right: 0.5rem; +.py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; } - -.mt-1 { - margin-top: 0.25rem; +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; } - -.mt-1\.5 { - margin-top: 0.375rem; +.pb-8 { + padding-bottom: 2rem; } - -.mt-12 { - margin-top: 3rem; +.pb-\[env\(safe-area-inset-bottom\)\] { + padding-bottom: env(safe-area-inset-bottom); } - -.mt-16 { - margin-top: 4rem; +.pb-px { + padding-bottom: 1px; } - -.mt-2 { - margin-top: 0.5rem; +.pl-5 { + padding-left: 1.25rem; } - -.mt-4 { - margin-top: 1rem; +.pl-6 { + padding-left: 1.5rem; } - -.mt-5 { - margin-top: 1.25rem; +.pl-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] { + padding-left: max(env(safe-area-inset-left),1.5rem); } - -.mt-6 { - margin-top: 1.5rem; +.pr-4 { + padding-right: 1rem; } - -.mt-8 { - margin-top: 2rem; +.pr-\[calc\(env\(safe-area-inset-right\)-1\.5rem\)\] { + padding-right: calc(env(safe-area-inset-right) - 1.5rem); } - -.line-clamp-3 { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; +.pr-\[max\(env\(safe-area-inset-right\)\2c 1\.5rem\)\] { + padding-right: max(env(safe-area-inset-right),1.5rem); } - -.block { - display: block; +.pt-1 { + padding-top: 0.25rem; +} +.pt-4 { + padding-top: 1rem; } - -.inline-block { - display: inline-block; +.pt-6 { + padding-top: 1.5rem; } - -.inline { - display: inline; +.pt-8 { + padding-top: 2rem; } - -.flex { - display: flex; +.text-left { + text-align: left; } - -.inline-flex { - display: inline-flex; +.text-center { + text-align: center; } - -.table { - display: table; +.align-text-bottom { + vertical-align: text-bottom; } - -.grid { - display: grid; +.font-mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } - -.hidden { - display: none; +.text-2xl { + font-size: 1.5rem; } - -.aspect-auto { - aspect-ratio: auto; +.text-4xl { + font-size: 2.25rem; } - -.h-0 { - height: 0px; +.text-\[10px\] { + font-size: 10px; } - -.h-16 { - height: 4rem; +.text-base { + font-size: 1rem; } - -.h-2 { - height: 0.5rem; +.text-lg { + font-size: 1.125rem; } - -.h-4 { - height: 1rem; +.text-sm { + font-size: .875rem; } - -.h-5 { - height: 1.25rem; +.text-xl { + font-size: 1.25rem; } - -.h-7 { - height: 1.75rem; +.text-xs { + font-size: .75rem; } - -.h-\[18px\] { - height: 18px; +.font-bold { + font-weight: 700; } - -.h-full { - height: 100%; +.font-extrabold { + font-weight: 800; } - -.max-h-64 { - max-height: 16rem; +.font-medium { + font-weight: 500; } - -.max-h-\[calc\(100vh-var\(--navbar-height\)-env\(safe-area-inset-bottom\)\)\] { - max-height: calc(100vh - var(--navbar-height) - env(safe-area-inset-bottom)); +.font-normal { + font-weight: 400; } - -.max-h-\[min\(calc\(50vh-11rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] { - max-height: min(calc(50vh - 11rem - env(safe-area-inset-bottom)),400px); +.font-semibold { + font-weight: 600; } - -.min-h-\[100px\] { - min-height: 100px; +.capitalize { + text-transform: capitalize; } - -.min-h-\[calc\(100vh-var\(--navbar-height\)\)\] { - min-height: calc(100vh - var(--navbar-height)); +.leading-5 { + line-height: 1.25rem; } - -.w-2 { - width: 0.5rem; +.leading-6 { + line-height: 1.5rem; } - -.w-3 { - width: 0.75rem; +.leading-7 { + line-height: 1.75rem; } - -.w-3\.5 { - width: 0.875rem; +.leading-tight { + line-height: 1.25; } - -.w-4 { - width: 1rem; +.tracking-tight { + letter-spacing: -0.015em; } - -.w-64 { - width: 16rem; +.text-\[color\:hsl\(var\(--primary-hue\)\2c 100\%\2c 50\%\)\] { + --tw-text-opacity: 1; + color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity)); } - -.w-\[110\%\] { - width: 110%; +.text-blue-900 { + --tw-text-opacity: 1; + color: rgb(30 58 138 / var(--tw-text-opacity)); } - -.w-\[180\%\] { - width: 180%; +.text-current { + color: currentColor; } - -.w-full { - width: 100%; +.text-gray-100 { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity)); } - -.w-max { - width: -moz-max-content; - width: max-content; +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); } - -.w-screen { - width: 100vw; +.text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); } - -.min-w-0 { - min-width: 0px; +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); } - -.min-w-\[18px\] { - min-width: 18px; +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); } - -.min-w-\[24px\] { - min-width: 24px; +.text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); } - -.min-w-full { - min-width: 100%; +.text-orange-800 { + --tw-text-opacity: 1; + color: rgb(154 52 18 / var(--tw-text-opacity)); } - -.max-w-6xl { - max-width: 72rem; +.text-primary-800 { + --tw-text-opacity: 1; + color: hsl(var(--primary-hue) 100% 32% / var(--tw-text-opacity)); } - -.max-w-\[50\%\] { - max-width: 50%; +.text-red-900 { + --tw-text-opacity: 1; + color: rgb(127 29 29 / var(--tw-text-opacity)); } - -.max-w-\[90rem\] { - max-width: 90rem; +.text-slate-900 { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); } - -.max-w-\[min\(calc\(100vw-2rem\)\2c calc\(100\%\+20rem\)\)\] { - max-width: min(calc(100vw - 2rem),calc(100% + 20rem)); +.text-transparent { + color: transparent; } - -.max-w-none { - max-width: none; +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } - -.max-w-screen-xl { - max-width: 1280px; +.text-yellow-900 { + --tw-text-opacity: 1; + color: rgb(113 63 18 / var(--tw-text-opacity)); } - -.shrink-0 { - flex-shrink: 0; +.underline { + text-decoration-line: underline; } - -.grow { - flex-grow: 1; +.no-underline { + text-decoration-line: none; } - -.origin-center { - transform-origin: center; +.decoration-from-font { + text-decoration-thickness: from-font; } - -.cursor-default { - cursor: default; +.underline-offset-2 { + text-underline-offset: 2px; } - -.cursor-pointer { - cursor: pointer; +.opacity-0 { + opacity: 0; } - -.select-none { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; +.opacity-50 { + opacity: 0.5; +} +.opacity-80 { + opacity: 0.8; } - -.scroll-my-6 { - scroll-margin-top: 1.5rem; - scroll-margin-bottom: 1.5rem; +.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); } - -.scroll-py-6 { - scroll-padding-top: 1.5rem; - scroll-padding-bottom: 1.5rem; +.shadow-\[0_-12px_16px_\#fff\] { + --tw-shadow: 0 -12px 16px #fff; + --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - -.list-none { - list-style-type: none; +.shadow-\[0_-12px_16px_white\] { + --tw-shadow: 0 -12px 16px white; + --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - -.appearance-none { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; +.shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c \.02\)\2c 0_1px_0_rgba\(0\2c 0\2c 0\2c \.06\)\] { + --tw-shadow: 0 2px 4px rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.06); + --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 1px 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); } - -.grid-cols-1 { - grid-template-columns: repeat(1, minmax(0, 1fr)); +.shadow-lg { + --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); } - -.flex-col { - flex-direction: column; +.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); } - -.items-start { - align-items: flex-start; +.shadow-xl { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - -.items-center { - align-items: center; +.shadow-gray-100 { + --tw-shadow-color: #f3f4f6; + --tw-shadow: var(--tw-shadow-colored); } - -.justify-start { - justify-content: flex-start; +.ring-1 { + --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, 0 0 #0000); } - -.justify-end { - justify-content: flex-end; +.ring-black\/5 { + --tw-ring-color: rgb(0 0 0 / 0.05); } - -.justify-center { - justify-content: center; +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } - -.justify-between { - justify-content: space-between; +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } - -.justify-items-start { - justify-items: start; +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } - -.gap-1 { - gap: 0.25rem; +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } - -.gap-2 { - gap: 0.5rem; +.transition-transform { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } - -.gap-4 { - gap: 1rem; +.duration-200 { + transition-duration: 200ms; } - -.overflow-auto { - overflow: auto; +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - -.overflow-hidden { - overflow: hidden; +.\[-webkit-tap-highlight-color\:transparent\] { + -webkit-tap-highlight-color: transparent; } - -.overflow-x-auto { - overflow-x: auto; +.\[-webkit-touch-callout\:none\] { + -webkit-touch-callout: none; } - -.overflow-y-auto { - overflow-y: auto; +.\[counter-reset\:step\] { + counter-reset: step; } - -.overflow-x-hidden { - overflow-x: hidden; +.\[hyphens\:auto\] { + -webkit-hyphens: auto; + hyphens: auto; } - -.overscroll-contain { - overscroll-behavior: contain; +.\[text-underline-position\:from-font\] { + text-underline-position: from-font; } - -.text-ellipsis { - text-overflow: ellipsis; +.\[word-break\:break-word\] { + word-break: break-word; } - -.whitespace-nowrap { - white-space: nowrap; +.content h1 { + margin-top: 0.5rem; + font-size: 2.25rem; + font-weight: 700; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); } - -.break-words { - overflow-wrap: break-word; +:is(html[class~="dark"] .content h1) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); } - -.rounded { - border-radius: 0.25rem; +.content h2 { + margin-top: 2.5rem; + border-bottom-width: 1px; + border-color: rgb(229 229 229 / 0.7); + padding-bottom: 0.25rem; + font-size: 1.875rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); } +@media (prefers-contrast: more) { -.rounded-3xl { - border-radius: 1.5rem; + .content h2 { + --tw-border-opacity: 1; + border-color: rgb(163 163 163 / var(--tw-border-opacity)); + } } - -.rounded-full { - border-radius: 9999px; +:is(html[class~="dark"] .content h2) { + border-color: hsl(var(--primary-hue) 100% 94% / 0.1); + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); } +@media (prefers-contrast: more) { -.rounded-lg { - border-radius: 0.5rem; + :is(html[class~="dark"] .content h2) { + --tw-border-opacity: 1; + border-color: rgb(163 163 163 / var(--tw-border-opacity)); + } } - -.rounded-md { - border-radius: 0.375rem; +.content h3 { + margin-top: 2rem; + font-size: 1.5rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); } - -.rounded-sm { - border-radius: 0.125rem; +:is(html[class~="dark"] .content h3) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); } - -.rounded-xl { - border-radius: 0.75rem; +.content h4 { + margin-top: 2rem; + font-size: 1.25rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); } - -.rounded-t { - border-top-left-radius: 0.25rem; - border-top-right-radius: 0.25rem; +:is(html[class~="dark"] .content h4) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); } - -.border { - border-width: 1px; +.content h5 { + margin-top: 2rem; + font-size: 1.125rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); } - -.border-b { - border-bottom-width: 1px; +:is(html[class~="dark"] .content h5) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); } - -.border-b-2 { - border-bottom-width: 2px; +.content h6 { + margin-top: 2rem; + font-size: 1rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); } - -.border-l { - border-left-width: 1px; +:is(html[class~="dark"] .content h6) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); +} +.content p { + margin-top: 1.5rem; + line-height: 1.75rem; } - -.border-t { - border-top-width: 1px; +.content p:first-child { + margin-top: 0px; } - -.border-black\/5 { - border-color: rgb(0 0 0 / 0.05); +.content a { + --tw-text-opacity: 1; + color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); + text-decoration-line: underline; + text-decoration-thickness: from-font; + text-underline-position: from-font; } - -.border-blue-200 { - --tw-border-opacity: 1; - border-color: rgb(191 219 254 / var(--tw-border-opacity)); +.content .not-prose a { + color: currentColor; + text-decoration-line: none; } - -.border-gray-200 { +.content blockquote { + margin-top: 1.5rem; --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + font-style: italic; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); } - -.border-orange-100 { - --tw-border-opacity: 1; - border-color: rgb(255 237 213 / var(--tw-border-opacity)); +.content blockquote:first-child { + margin-top: 0px; } - -.border-red-200 { - --tw-border-opacity: 1; - border-color: rgb(254 202 202 / var(--tw-border-opacity)); +:is([dir="ltr"] .content blockquote) { + border-left-width: 2px; + padding-left: 1.5rem; } - -.border-transparent { - border-color: transparent; +:is([dir="rtl"] .content blockquote) { + border-right-width: 2px; + padding-right: 1.5rem; } - -.border-yellow-100 { +:is(html[class~="dark"] .content blockquote) { --tw-border-opacity: 1; - border-color: rgb(254 249 195 / var(--tw-border-opacity)); + border-color: rgb(55 65 81 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); } - -.bg-black\/\[\.05\] { - background-color: rgb(0 0 0 / .05); +.content pre:not(.code-block pre) { + margin-bottom: 1rem; + overflow-x: auto; + border-radius: 0.75rem; + background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + padding-top: 1rem; + padding-bottom: 1rem; + font-size: .9em; + font-weight: 500; + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; } +@media (prefers-contrast: more) { -.bg-blue-100 { - --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); + .content pre:not(.code-block pre) { + border-width: 1px; + border-color: hsl(var(--primary-hue) 100% 24% / 0.2); + --tw-contrast: contrast(1.5); + 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); + } } - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +:is(html[class~="dark"] .content pre:not(.code-block pre)) { + background-color: hsl(var(--primary-hue) 100% 77% / 0.1); } +@media (prefers-contrast: more) { -.bg-neutral-50 { - --tw-bg-opacity: 1; - background-color: rgb(250 250 250 / var(--tw-bg-opacity)); + :is(html[class~="dark"] .content pre:not(.code-block pre)) { + border-color: hsl(var(--primary-hue) 100% 94% / 0.4); + } } - -.bg-orange-50 { - --tw-bg-opacity: 1; - background-color: rgb(255 247 237 / var(--tw-bg-opacity)); +.content code:not(.code-block code) { + overflow-wrap: break-word; + border-radius: 0.375rem; + border-width: 1px; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); + --tw-border-opacity: 0.04; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.03; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + padding-left: .25em; + padding-right: .25em; + font-size: .9em; } - -.bg-primary-100 { - --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 94% / var(--tw-bg-opacity)); +:is(html[class~="dark"] .content code:not(.code-block code)) { + border-color: rgb(255 255 255 / 0.1); + background-color: rgb(255 255 255 / 0.1); } - -.bg-primary-400 { - --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 66% / var(--tw-bg-opacity)); +.content table:not(.code-block table) { + margin-top: 1.5rem; + display: block; + overflow-x: auto; + padding: 0px; } - -.bg-primary-600 { - --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity)); +.content table:not(.code-block table):first-child { + margin-top: 0px; } - -.bg-primary-700\/5 { - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); +.content table:not(.code-block table) tr { + margin: 0px; + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + padding: 0px; } - -.bg-red-100 { +.content table:not(.code-block table) tr:nth-child(even) { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } - -.bg-transparent { - background-color: transparent; +:is(html[class~="dark"] .content table:not(.code-block table) tr) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); } - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +:is(html[class~="dark"] .content table:not(.code-block table) tr):nth-child(even) { + background-color: rgb(75 85 99 / 0.2); } - -.bg-yellow-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 252 232 / var(--tw-bg-opacity)); +.content table:not(.code-block table) th { + margin: 0px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-weight: 600; } - -.bg-gradient-to-b { - background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); +:is(html[class~="dark"] .content table:not(.code-block table) th) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); } - -.bg-gradient-to-r { - background-image: linear-gradient(to right, var(--tw-gradient-stops)); +.content table:not(.code-block table) td { + margin: 0px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; } - -.from-gray-800 { - --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +:is(html[class~="dark"] .content table:not(.code-block table) td) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); } - -.from-gray-900 { - --tw-gradient-from: #111827 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +.content ol { + margin-top: 1.5rem; + list-style-type: decimal; } - -.to-gray-600 { - --tw-gradient-to: #4b5563 var(--tw-gradient-to-position); +.content ol:first-child { + margin-top: 0px; } - -.bg-clip-text { - -webkit-background-clip: text; - background-clip: text; +:is([dir="ltr"] .content ol) { + margin-left: 1.5rem; } - -.p-0 { - padding: 0px; +:is([dir="rtl"] .content ol) { + margin-right: 1.5rem; } - -.p-0\.5 { - padding: 0.125rem; +.content ol li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } - -.p-1 { - padding: 0.25rem; +.content ul { + margin-top: 1.5rem; + list-style-type: disc; } - -.p-1\.5 { - padding: 0.375rem; +.content ul:first-child { + margin-top: 0px; } - -.p-2 { - padding: 0.5rem; +:is([dir="ltr"] .content ul) { + margin-left: 1.5rem; } - -.p-4 { - padding: 1rem; +:is([dir="rtl"] .content ul) { + margin-right: 1.5rem; } - -.p-6 { - padding: 1.5rem; +.content ul li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } - -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; +.content .not-prose ul, .content .not-prose ol { + margin: 0px; + list-style-type: none; } - -.px-1\.5 { - padding-left: 0.375rem; - padding-right: 0.375rem; +.content .not-prose ul li, .content .not-prose ol li { + margin: 0px; } - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; +.content kbd { + overflow-wrap: break-word; + border-radius: 0.375rem; + border-width: 1px; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); + --tw-border-opacity: 0.04; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.03; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + padding-left: .25em; + padding-right: .25em; + font-size: .9em; +} +:is(html[class~="dark"] .content kbd) { + border-color: rgb(255 255 255 / 0.1); + background-color: rgb(255 255 255 / 0.1); +} +.content pre:not(.code-block pre).mermaid { + border-radius: 0px; + background-color: transparent; } - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; +:is(html[class~="dark"] .content pre:not(.code-block pre).mermaid) { + background-color: transparent; } - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; +.content img { + margin-left: auto; + margin-right: auto; + margin-top: 1rem; + margin-bottom: 1rem; + border-radius: 0.375rem; } - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; +.content .not-prose img { + margin: 0px; + border-radius: 0px; } - -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; +.content figure figcaption { + margin-top: 0.5rem; + display: block; + text-align: center; + font-size: .875rem; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); } - -.py-1\.5 { - padding-top: 0.375rem; - padding-bottom: 0.375rem; +:is(html[class~="dark"] .content figure figcaption) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); } - -.py-12 { - padding-top: 3rem; - padding-bottom: 3rem; +.content .footnotes { + margin-top: 3rem; + font-size: .875rem; } - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; +.subheading-anchor { + opacity: 0; + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } - -.py-2\.5 { - padding-top: 0.625rem; - padding-bottom: 0.625rem; +:is([dir="ltr"] .subheading-anchor) { + margin-left: 0.25rem; } - -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; +:is([dir="rtl"] .subheading-anchor) { + margin-right: 0.25rem; } - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; +span:target + .subheading-anchor, + :hover > .subheading-anchor, + .subheading-anchor:focus { + opacity: 1; } - -.pb-6 { - padding-bottom: 1.5rem; +span + .subheading-anchor, + :hover > .subheading-anchor { + text-decoration-line: none !important; } - -.pb-8 { - padding-bottom: 2rem; +.subheading-anchor:after { + padding-left: 0.25rem; + padding-right: 0.25rem; + --tw-content: '#'; + content: var(--tw-content); + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); } - -.pb-\[env\(safe-area-inset-bottom\)\] { - padding-bottom: env(safe-area-inset-bottom); +:is(html[class~="dark"] .subheading-anchor):after { + --tw-text-opacity: 1; + color: rgb(64 64 64 / var(--tw-text-opacity)); } - -.pb-px { - padding-bottom: 1px; +span:target + .subheading-anchor:after { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); } - -.pl-5 { - padding-left: 1.25rem; +:is(html[class~="dark"] span:target + .subheading-anchor):after { + --tw-text-opacity: 1; + color: rgb(115 115 115 / var(--tw-text-opacity)); } - -.pl-6 { - padding-left: 1.5rem; +article.typesetting-article { + font-size: 17px; + font-feature-settings: + 'rlig' 1, + 'calt' 1; } - -.pl-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] { - padding-left: max(env(safe-area-inset-left),1.5rem); +article.typesetting-article h1 { + margin-top: 1.5rem; + margin-bottom: 1rem; + text-align: center; + font-size: 2.5rem; } - -.pr-4 { - padding-right: 1rem; +article.typesetting-article h2 { + border-style: none; } - -.pr-\[calc\(env\(safe-area-inset-right\)-1\.5rem\)\] { - padding-right: calc(env(safe-area-inset-right) - 1.5rem); +article.typesetting-article a { + text-decoration-line: none; } - -.pr-\[max\(env\(safe-area-inset-right\)\2c 1\.5rem\)\] { - padding-right: max(env(safe-area-inset-right),1.5rem); +article.typesetting-article a:hover { + text-decoration-line: underline; } - -.pt-1 { - padding-top: 0.25rem; +article.typesetting-article p { + line-height: 2rem; } - -.pt-4 { - padding-top: 1rem; +article.typesetting-article code { + border-style: none; } - -.pt-6 { - padding-top: 1.5rem; +:is(html[class~="dark"] article.typesetting-article code) { + --tw-bg-opacity: 1; + background-color: rgb(64 64 64 / var(--tw-bg-opacity)); } - -.pt-8 { - padding-top: 2rem; +:is(html[class~="dark"] article.typesetting-article pre code) { + background-color: transparent; } - -.text-left { - text-align: left; +article.typesetting-article .subheading-anchor + a { + text-decoration-line: none; } - -.text-center { - text-align: center; +article.typesetting-article .subheading-anchor + a::after { + content: var(--tw-content); + display: none; } - -.align-text-bottom { - vertical-align: text-bottom; +article.typesetting-article .subheading-anchor + a:hover { + text-decoration-line: none; } - -.font-mono { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +article details > summary::-webkit-details-marker { + display: none; } - -.text-2xl { - font-size: 1.5rem; +article details > summary::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E"); + height: 1.2em; + width: 1.2em; + vertical-align: -4px; + } +/* Code syntax highlight */ +/* Light theme for syntax highlight */ +/* Generated using `hugo gen chromastyles --style=github` */ +.highlight { + /* Background .bg { background-color: #ffffff; } */ + /* PreWrapper .chroma { background-color: #ffffff; } */ + /* Other .chroma .x { } */ + /* CodeLine .chroma .cl { } */ + /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ + /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */ + /* LineHighlight .chroma .hl { background-color: #ffffcc } */ + /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */ + /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */ + /* Name .chroma .n { } */ + /* NameFunctionMagic .chroma .fm { } */ + /* NameOther .chroma .nx { } */ + /* NameProperty .chroma .py { } */ + /* NameVariableMagic .chroma .vm { } */ + /* Literal .chroma .l { } */ + /* LiteralDate .chroma .ld { } */ + /* Punctuation .chroma .p { } */ + /* Generic .chroma .g { } */ } - -.text-4xl { - font-size: 2.25rem; +/* Error */ +.highlight .chroma .err { color: #a61717; background-color: #e3d2d2 } +/* LineLink */ +.highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* Line */ +.highlight .chroma .line { display: flex; } +/* Keyword */ +.highlight .chroma .k { color: #000000; font-weight: bold } +/* KeywordConstant */ +.highlight .chroma .kc { color: #000000; font-weight: bold } +/* KeywordDeclaration */ +.highlight .chroma .kd { color: #000000; font-weight: bold } +/* KeywordNamespace */ +.highlight .chroma .kn { color: #000000; font-weight: bold } +/* KeywordPseudo */ +.highlight .chroma .kp { color: #000000; font-weight: bold } +/* KeywordReserved */ +.highlight .chroma .kr { color: #000000; font-weight: bold } +/* KeywordType */ +.highlight .chroma .kt { color: #445588; font-weight: bold } +/* NameAttribute */ +.highlight .chroma .na { color: #008080 } +/* NameBuiltin */ +.highlight .chroma .nb { color: #0086b3 } +/* NameBuiltinPseudo */ +.highlight .chroma .bp { color: #999999 } +/* NameClass */ +.highlight .chroma .nc { color: #445588; font-weight: bold } +/* NameConstant */ +.highlight .chroma .no { color: #008080 } +/* NameDecorator */ +.highlight .chroma .nd { color: #3c5d5d; font-weight: bold } +/* NameEntity */ +.highlight .chroma .ni { color: #800080 } +/* NameException */ +.highlight .chroma .ne { color: #990000; font-weight: bold } +/* NameFunction */ +.highlight .chroma .nf { color: #990000; font-weight: bold } +/* NameLabel */ +.highlight .chroma .nl { color: #990000; font-weight: bold } +/* NameNamespace */ +.highlight .chroma .nn { color: #555555 } +/* NameTag */ +.highlight .chroma .nt { color: #000080 } +/* NameVariable */ +.highlight .chroma .nv { color: #008080 } +/* NameVariableClass */ +.highlight .chroma .vc { color: #008080 } +/* NameVariableGlobal */ +.highlight .chroma .vg { color: #008080 } +/* NameVariableInstance */ +.highlight .chroma .vi { color: #008080 } +/* LiteralString */ +.highlight .chroma .s { color: #dd1144 } +/* LiteralStringAffix */ +.highlight .chroma .sa { color: #dd1144 } +/* LiteralStringBacktick */ +.highlight .chroma .sb { color: #dd1144 } +/* LiteralStringChar */ +.highlight .chroma .sc { color: #dd1144 } +/* LiteralStringDelimiter */ +.highlight .chroma .dl { color: #dd1144 } +/* LiteralStringDoc */ +.highlight .chroma .sd { color: #dd1144 } +/* LiteralStringDouble */ +.highlight .chroma .s2 { color: #dd1144 } +/* LiteralStringEscape */ +.highlight .chroma .se { color: #dd1144 } +/* LiteralStringHeredoc */ +.highlight .chroma .sh { color: #dd1144 } +/* LiteralStringInterpol */ +.highlight .chroma .si { color: #dd1144 } +/* LiteralStringOther */ +.highlight .chroma .sx { color: #dd1144 } +/* LiteralStringRegex */ +.highlight .chroma .sr { color: #009926 } +/* LiteralStringSingle */ +.highlight .chroma .s1 { color: #dd1144 } +/* LiteralStringSymbol */ +.highlight .chroma .ss { color: #990073 } +/* LiteralNumber */ +.highlight .chroma .m { color: #009999 } +/* LiteralNumberBin */ +.highlight .chroma .mb { color: #009999 } +/* LiteralNumberFloat */ +.highlight .chroma .mf { color: #009999 } +/* LiteralNumberHex */ +.highlight .chroma .mh { color: #009999 } +/* LiteralNumberInteger */ +.highlight .chroma .mi { color: #009999 } +/* LiteralNumberIntegerLong */ +.highlight .chroma .il { color: #009999 } +/* LiteralNumberOct */ +.highlight .chroma .mo { color: #009999 } +/* Operator */ +.highlight .chroma .o { color: #000000; font-weight: bold } +/* OperatorWord */ +.highlight .chroma .ow { color: #000000; font-weight: bold } +/* Comment */ +.highlight .chroma .c { color: #999988; font-style: italic } +/* CommentHashbang */ +.highlight .chroma .ch { color: #999988; font-style: italic } +/* CommentMultiline */ +.highlight .chroma .cm { color: #999988; font-style: italic } +/* CommentSingle */ +.highlight .chroma .c1 { color: #999988; font-style: italic } +/* CommentSpecial */ +.highlight .chroma .cs { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreproc */ +.highlight .chroma .cp { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ +.highlight .chroma .cpf { color: #999999; font-weight: bold; font-style: italic } +/* GenericDeleted */ +.highlight .chroma .gd { color: #000000; background-color: #ffdddd } +/* GenericEmph */ +.highlight .chroma .ge { color: #000000; font-style: italic } +/* GenericError */ +.highlight .chroma .gr { color: #aa0000 } +/* GenericHeading */ +.highlight .chroma .gh { color: #999999 } +/* GenericInserted */ +.highlight .chroma .gi { color: #000000; background-color: #ddffdd } +/* GenericOutput */ +.highlight .chroma .go { color: #888888 } +/* GenericPrompt */ +.highlight .chroma .gp { color: #555555 } +/* GenericStrong */ +.highlight .chroma .gs { font-weight: bold } +/* GenericSubheading */ +.highlight .chroma .gu { color: #aaaaaa } +/* GenericTraceback */ +.highlight .chroma .gt { color: #aa0000 } +/* GenericUnderline */ +.highlight .chroma .gl { text-decoration: underline } +/* TextWhitespace */ +.highlight .chroma .w { color: #bbbbbb } +.dark .highlight { + /* Background .bg { color: #c9d1d9; background-color: #0d1117; } + /* PreWrapper .chroma { color: #c9d1d9; background-color: #0d1117; } */ + /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ + /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */ + /* LineHighlight .chroma .hl { background-color: #ffffcc } */ + /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } */ + /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } */ } - -.text-\[10px\] { - font-size: 10px; +/* Other */ +.dark .highlight .chroma .x { } +/* Error */ +.dark .highlight .chroma .err { color: #f85149 } +/* CodeLine */ +.dark .highlight .chroma .cl { } +/* LineLink */ +.dark .highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* Line */ +.dark .highlight .chroma .line { display: flex; } +/* Keyword */ +.dark .highlight .chroma .k { color: #ff7b72 } +/* KeywordConstant */ +.dark .highlight .chroma .kc { color: #79c0ff } +/* KeywordDeclaration */ +.dark .highlight .chroma .kd { color: #ff7b72 } +/* KeywordNamespace */ +.dark .highlight .chroma .kn { color: #ff7b72 } +/* KeywordPseudo */ +.dark .highlight .chroma .kp { color: #79c0ff } +/* KeywordReserved */ +.dark .highlight .chroma .kr { color: #ff7b72 } +/* KeywordType */ +.dark .highlight .chroma .kt { color: #ff7b72 } +/* Name */ +.dark .highlight .chroma .n { } +/* NameAttribute */ +.dark .highlight .chroma .na { } +/* NameBuiltin */ +.dark .highlight .chroma .nb { } +/* NameBuiltinPseudo */ +.dark .highlight .chroma .bp { } +/* NameClass */ +.dark .highlight .chroma .nc { color: #f0883e; font-weight: bold } +/* NameConstant */ +.dark .highlight .chroma .no { color: #79c0ff; font-weight: bold } +/* NameDecorator */ +.dark .highlight .chroma .nd { color: #d2a8ff; font-weight: bold } +/* NameEntity */ +.dark .highlight .chroma .ni { color: #ffa657 } +/* NameException */ +.dark .highlight .chroma .ne { color: #f0883e; font-weight: bold } +/* NameFunction */ +.dark .highlight .chroma .nf { color: #d2a8ff; font-weight: bold } +/* NameFunctionMagic */ +.dark .highlight .chroma .fm { } +/* NameLabel */ +.dark .highlight .chroma .nl { color: #79c0ff; font-weight: bold } +/* NameNamespace */ +.dark .highlight .chroma .nn { color: #ff7b72 } +/* NameOther */ +.dark .highlight .chroma .nx { } +/* NameProperty */ +.dark .highlight .chroma .py { color: #79c0ff } +/* NameTag */ +.dark .highlight .chroma .nt { color: #7ee787 } +/* NameVariable */ +.dark .highlight .chroma .nv { color: #79c0ff } +/* NameVariableClass */ +.dark .highlight .chroma .vc { } +/* NameVariableGlobal */ +.dark .highlight .chroma .vg { } +/* NameVariableInstance */ +.dark .highlight .chroma .vi { } +/* NameVariableMagic */ +.dark .highlight .chroma .vm { } +/* Literal */ +.dark .highlight .chroma .l { color: #a5d6ff } +/* LiteralDate */ +.dark .highlight .chroma .ld { color: #79c0ff } +/* LiteralString */ +.dark .highlight .chroma .s { color: #a5d6ff } +/* LiteralStringAffix */ +.dark .highlight .chroma .sa { color: #79c0ff } +/* LiteralStringBacktick */ +.dark .highlight .chroma .sb { color: #a5d6ff } +/* LiteralStringChar */ +.dark .highlight .chroma .sc { color: #a5d6ff } +/* LiteralStringDelimiter */ +.dark .highlight .chroma .dl { color: #79c0ff } +/* LiteralStringDoc */ +.dark .highlight .chroma .sd { color: #a5d6ff } +/* LiteralStringDouble */ +.dark .highlight .chroma .s2 { color: #a5d6ff } +/* LiteralStringEscape */ +.dark .highlight .chroma .se { color: #79c0ff } +/* LiteralStringHeredoc */ +.dark .highlight .chroma .sh { color: #79c0ff } +/* LiteralStringInterpol */ +.dark .highlight .chroma .si { color: #a5d6ff } +/* LiteralStringOther */ +.dark .highlight .chroma .sx { color: #a5d6ff } +/* LiteralStringRegex */ +.dark .highlight .chroma .sr { color: #79c0ff } +/* LiteralStringSingle */ +.dark .highlight .chroma .s1 { color: #a5d6ff } +/* LiteralStringSymbol */ +.dark .highlight .chroma .ss { color: #a5d6ff } +/* LiteralNumber */ +.dark .highlight .chroma .m { color: #a5d6ff } +/* LiteralNumberBin */ +.dark .highlight .chroma .mb { color: #a5d6ff } +/* LiteralNumberFloat */ +.dark .highlight .chroma .mf { color: #a5d6ff } +/* LiteralNumberHex */ +.dark .highlight .chroma .mh { color: #a5d6ff } +/* LiteralNumberInteger */ +.dark .highlight .chroma .mi { color: #a5d6ff } +/* LiteralNumberIntegerLong */ +.dark .highlight .chroma .il { color: #a5d6ff } +/* LiteralNumberOct */ +.dark .highlight .chroma .mo { color: #a5d6ff } +/* Operator */ +.dark .highlight .chroma .o { color: #ff7b72; font-weight: bold } +/* OperatorWord */ +.dark .highlight .chroma .ow { color: #ff7b72; font-weight: bold } +/* Punctuation */ +.dark .highlight .chroma .p { } +/* Comment */ +.dark .highlight .chroma .c { color: #8b949e; font-style: italic } +/* CommentHashbang */ +.dark .highlight .chroma .ch { color: #8b949e; font-style: italic } +/* CommentMultiline */ +.dark .highlight .chroma .cm { color: #8b949e; font-style: italic } +/* CommentSingle */ +.dark .highlight .chroma .c1 { color: #8b949e; font-style: italic } +/* CommentSpecial */ +.dark .highlight .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic } +/* CommentPreproc */ +.dark .highlight .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ +.dark .highlight .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic } +/* Generic */ +.dark .highlight .chroma .g { } +/* GenericDeleted */ +.dark .highlight .chroma .gd { color: #ffa198; background-color: #490202 } +/* GenericEmph */ +.dark .highlight .chroma .ge { font-style: italic } +/* GenericError */ +.dark .highlight .chroma .gr { color: #ffa198 } +/* GenericHeading */ +.dark .highlight .chroma .gh { color: #79c0ff; font-weight: bold } +/* GenericInserted */ +.dark .highlight .chroma .gi { color: #56d364; background-color: #0f5323 } +/* GenericOutput */ +.dark .highlight .chroma .go { color: #8b949e } +/* GenericPrompt */ +.dark .highlight .chroma .gp { color: #8b949e } +/* GenericStrong */ +.dark .highlight .chroma .gs { font-weight: bold } +/* GenericSubheading */ +.dark .highlight .chroma .gu { color: #79c0ff } +/* GenericTraceback */ +.dark .highlight .chroma .gt { color: #ff7b72 } +/* GenericUnderline */ +.dark .highlight .chroma .gl { text-decoration: underline } +/* TextWhitespace */ +.dark .highlight .chroma .w { color: #6e7681 } +.code-block { + font-size: .9em; + line-height: 1.25rem; } - -.text-base { - font-size: 1rem; +.code-block pre { + overflow-x: auto; + background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + font-size: .9em; + font-weight: 500; + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; } +@media (prefers-contrast: more) { -.text-lg { - font-size: 1.125rem; + .code-block pre { + border-width: 1px; + border-color: hsl(var(--primary-hue) 100% 24% / 0.2); + --tw-contrast: contrast(1.5); + 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); + } } - -.text-sm { - font-size: .875rem; +:is(html[class~="dark"] .code-block pre) { + background-color: hsl(var(--primary-hue) 100% 77% / 0.1); } +@media (prefers-contrast: more) { -.text-xl { - font-size: 1.25rem; + :is(html[class~="dark"] .code-block pre) { + border-color: hsl(var(--primary-hue) 100% 94% / 0.4); + } } - -.text-xs { +.code-block .filename { + position: absolute; + top: 0px; + z-index: 1; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; + background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; font-size: .75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); } - -.font-bold { - font-weight: 700; -} - -.font-extrabold { - font-weight: 800; -} - -.font-medium { - font-weight: 500; -} - -.font-normal { - font-weight: 400; -} - -.font-semibold { - font-weight: 600; -} - -.capitalize { - text-transform: capitalize; -} - -.leading-5 { - line-height: 1.25rem; +:is(html[class~="dark"] .code-block .filename) { + background-color: hsl(var(--primary-hue) 100% 77% / 0.1); + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); } - -.leading-6 { - line-height: 1.5rem; +.code-block pre:not(.lntable pre) { + margin-bottom: 1rem; + border-radius: 0.75rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 1rem; + padding-bottom: 1rem; } - -.leading-7 { - line-height: 1.75rem; +.code-block div:nth-of-type(2) pre { + padding-top: 3rem; + padding-bottom: 1rem; } - -.leading-tight { - line-height: 1.25; +.chroma .lntable { + margin: 0px; + display: block; + width: auto; + overflow: auto; + border-radius: 0.75rem; } - -.tracking-tight { - letter-spacing: -0.015em; +.chroma .lntable pre { + padding-top: 1rem; + padding-bottom: 1rem; } - -.text-\[color\:hsl\(var\(--primary-hue\)\2c 100\%\2c 50\%\)\] { +.chroma .ln, + .chroma .lnt:not(.hl > .lnt), + .chroma .hl { + min-width: 2.6rem; + padding-left: 1rem; + padding-right: 1rem; --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity)); + color: rgb(82 82 82 / var(--tw-text-opacity)); } - -.text-blue-900 { +:is(html[class~="dark"] .chroma .ln),:is(html[class~="dark"] + .chroma .lnt:not(.hl > .lnt)),:is(html[class~="dark"] + .chroma .hl) { --tw-text-opacity: 1; - color: rgb(30 58 138 / var(--tw-text-opacity)); + color: rgb(212 212 212 / var(--tw-text-opacity)); } - -.text-current { - color: currentColor; +.chroma .lntd { + padding: 0px; + vertical-align: top; } - -.text-gray-100 { - --tw-text-opacity: 1; - color: rgb(243 244 246 / var(--tw-text-opacity)); +.chroma .lntd:last-of-type { + width: 100%; } - -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); +/* LineHighlight */ +.chroma .hl { + display: block; + width: 100%; + background-color: hsl(var(--primary-hue) 100% 32% / 0.1); } - -.text-gray-600 { - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); +.hextra-cards { + grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)); } - -.text-gray-700 { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); +.hextra-card img { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } - -.text-gray-800 { - --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); +.hextra-card:hover svg { + color: currentColor; } - -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); +.hextra-card svg { + width: 1.5rem; + color: #00000033; + transition: color 0.3s ease; } - -.text-orange-800 { - --tw-text-opacity: 1; - color: rgb(154 52 18 / var(--tw-text-opacity)); +.hextra-card p { + margin-top: 0.5rem; } - -.text-primary-800 { - --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 32% / var(--tw-text-opacity)); +.dark .hextra-card svg { + color: #ffffff66; } - -.text-red-900 { - --tw-text-opacity: 1; - color: rgb(127 29 29 / var(--tw-text-opacity)); +.dark .hextra-card:hover svg { + color: currentColor; } - -.text-slate-900 { - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); +.steps h3 { + counter-increment: step; } - -.text-transparent { - color: transparent; +.steps h3:before { + position: absolute; + height: 33px; + width: 33px; + border-width: 4px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); +:is(html[class~="dark"] .steps h3):before { + --tw-border-opacity: 1; + border-color: rgb(17 17 17 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(38 38 38 / var(--tw-bg-opacity)); } - -.text-yellow-900 { +.steps h3:before { + border-radius: 9999px; + text-align: center; + text-indent: -1px; + font-size: 1rem; + font-weight: 400; --tw-text-opacity: 1; - color: rgb(113 63 18 / var(--tw-text-opacity)); -} - -.underline { - text-decoration-line: underline; -} - -.no-underline { - text-decoration-line: none; + color: rgb(163 163 163 / var(--tw-text-opacity)); + margin-top: 3px; + margin-left: -41px; + content: counter(step); } - -.decoration-from-font { - text-decoration-thickness: from-font; +.search-wrapper li { + margin-left: 0.625rem; + margin-right: 0.625rem; + overflow-wrap: break-word; + border-radius: 0.375rem; + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); } +@media (prefers-contrast: more) { -.underline-offset-2 { - text-underline-offset: 2px; + .search-wrapper li { + border-width: 1px; + border-color: transparent; + } } - -.opacity-0 { - opacity: 0; +:is(html[class~="dark"] .search-wrapper li) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); } - -.opacity-50 { - opacity: 0.5; +.search-wrapper li a { + display: block; + scroll-margin: 3rem; + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; } - -.opacity-80 { - opacity: 0.8; +.search-wrapper li .title { + font-size: 1rem; + font-weight: 600; + line-height: 1.25rem; } - -.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); +.search-wrapper li .active { + border-radius: 0.375rem; + background-color: hsl(var(--primary-hue) 100% 50% / 0.1); } +@media (prefers-contrast: more) { -.shadow-\[0_-12px_16px_\#fff\] { - --tw-shadow: 0 -12px 16px #fff; - --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + .search-wrapper li .active { + --tw-border-opacity: 1; + border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); + } } - -.shadow-\[0_-12px_16px_white\] { - --tw-shadow: 0 -12px 16px white; - --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.search-wrapper .no-result { + display: block; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + padding: 2rem; + text-align: center; + font-size: .875rem; + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); } - -.shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c \.02\)\2c 0_1px_0_rgba\(0\2c 0\2c 0\2c \.06\)\] { - --tw-shadow: 0 2px 4px rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.06); - --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 1px 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); +.search-wrapper .prefix { + margin-left: 0.625rem; + margin-right: 0.625rem; + margin-bottom: 0.5rem; + margin-top: 1.5rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + border-bottom-width: 1px; + border-color: rgb(0 0 0 / 0.1); + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-bottom: 0.375rem; + font-size: .75rem; + font-weight: 600; + text-transform: uppercase; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); } - -.shadow-lg { - --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); +.search-wrapper .prefix:first-child { + margin-top: 0px; } +@media (prefers-contrast: more) { -.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); + .search-wrapper .prefix { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); + } } - -.shadow-xl { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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(html[class~="dark"] .search-wrapper .prefix) { + border-color: rgb(255 255 255 / 0.2); + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); } +@media (prefers-contrast: more) { -.shadow-gray-100 { - --tw-shadow-color: #f3f4f6; - --tw-shadow: var(--tw-shadow-colored); + :is(html[class~="dark"] .search-wrapper .prefix) { + --tw-border-opacity: 1; + border-color: rgb(249 250 251 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(249 250 251 / var(--tw-text-opacity)); + } } - -.ring-1 { - --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, 0 0 #0000); +.search-wrapper .excerpt { + margin-top: 0.25rem; + overflow: hidden; + text-overflow: ellipsis; + font-size: .875rem; + line-height: 1.35rem; + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); } - -.ring-black\/5 { - --tw-ring-color: rgb(0 0 0 / 0.05); +:is(html[class~="dark"] .search-wrapper .excerpt) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); } +@media (prefers-contrast: more) { -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + :is(html[class~="dark"] .search-wrapper .excerpt) { + --tw-text-opacity: 1; + color: rgb(249 250 251 / var(--tw-text-opacity)); + } } - -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +.search-wrapper .excerpt { + display: -webkit-box; + line-clamp: 1; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + } +.search-wrapper .match { + --tw-text-opacity: 1; + color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - -.transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +@media (max-width: 767px) { + .sidebar-container { + position: fixed; + top: 0px; + bottom: 0px; + z-index: 15; + width: 100%; + overscroll-behavior: contain; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding-top: calc(var(--navbar-height)); + } + :is(html[class~="dark"] .sidebar-container) { + --tw-bg-opacity: 1; + background-color: rgb(17 17 17 / var(--tw-bg-opacity)); + } + .sidebar-container { + transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); + will-change: transform, opacity; + contain: layout style; + backface-visibility: hidden; + } } - -.transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +.sidebar-container li > div { + height: 0px; } - -.transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +.sidebar-container li.open > div { + height: auto; } - -.duration-200 { - transition-duration: 200ms; +.sidebar-container li.open > a > span > svg > path { + --tw-rotate: 90deg; + 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)); } - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +nav .search-wrapper { + display: none; } +@media (min-width: 768px) { -.\[-webkit-tap-highlight-color\:transparent\] { - -webkit-tap-highlight-color: transparent; + nav .search-wrapper { + display: inline-block; + } } - -.\[-webkit-touch-callout\:none\] { - -webkit-touch-callout: none; +@supports ( + ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) +) { + .nav-container-blur { + background-color: rgb(255 255 255 / .85); + --tw-backdrop-blur: blur(12px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + :is(html[class~="dark"] .nav-container-blur) { + background-color: rgb(17 17 17 / 0.8) !important; + } } - -.\[counter-reset\:step\] { - counter-reset: step; +.hamburger-menu svg g { + transform-origin: center; + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); } - -.\[hyphens\:auto\] { - -webkit-hyphens: auto; - hyphens: auto; +.hamburger-menu svg path { + opacity: 1; + transition: + transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s, + opacity 0.2s ease 0.2s; + } +.hamburger-menu svg.open path { + transition: + transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), + opacity 0s ease 0.2s; + } +.hamburger-menu svg.open g { + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; + } +.hamburger-menu svg.open > path { + opacity: 0; } - -.\[text-underline-position\:from-font\] { - text-underline-position: from-font; +.hamburger-menu svg.open > g:nth-of-type(1) { + --tw-rotate: 45deg; + 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)); } - -.\[word-break\:break-word\] { - word-break: break-word; +.hamburger-menu svg.open > g:nth-of-type(1) path { + transform: translate3d(0, 4px, 0); + } +.hamburger-menu svg.open > g:nth-of-type(2) { + --tw-rotate: -45deg; + 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)); } - +.hamburger-menu svg.open > g:nth-of-type(2) path { + transform: translate3d(0, -4px, 0); + } html { font-size: 1rem; -webkit-font-smoothing: antialiased; @@ -3154,1003 +2522,893 @@ html { font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1; -webkit-tap-highlight-color: transparent; } - body { width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] body) { --tw-bg-opacity: 1; background-color: rgb(17 17 17 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } - :root { --primary-hue: 212deg; --navbar-height: 4rem; --menu-height: 3.75rem; } - .dark { --primary-hue: 204deg; } - .placeholder\:text-gray-500::-moz-placeholder { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } - .placeholder\:text-gray-500::placeholder { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } - .before\:pointer-events-none::before { content: var(--tw-content); pointer-events: none; } - .before\:absolute::before { content: var(--tw-content); position: absolute; } - .before\:inset-0::before { content: var(--tw-content); inset: 0px; } - .before\:inset-y-1::before { content: var(--tw-content); top: 0.25rem; bottom: 0.25rem; } - .before\:mr-1::before { content: var(--tw-content); margin-right: 0.25rem; } - .before\:inline-block::before { content: var(--tw-content); display: inline-block; } - .before\:w-px::before { content: var(--tw-content); width: 1px; } - .before\:bg-gray-200::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } - .before\:opacity-25::before { content: var(--tw-content); opacity: 0.25; } - .before\:transition-transform::before { content: var(--tw-content); transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } - .before\:content-\[\'\#\'\]::before { --tw-content: '#'; content: var(--tw-content); } - .before\:content-\[\'\'\]::before { --tw-content: ''; content: var(--tw-content); } - .before\:content-\[\\\"\\\"\]::before { --tw-content: \"\"; content: var(--tw-content); } - .first\:mt-0:first-child { margin-top: 0px; } - .last-of-type\:mb-0:last-of-type { margin-bottom: 0px; } - .hover\:border-gray-200:hover { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } - .hover\:border-gray-300:hover { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } - .hover\:border-gray-400:hover { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity)); } - .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } - .hover\:bg-gray-800\/5:hover { background-color: rgb(31 41 55 / 0.05); } - .hover\:bg-primary-50:hover { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity)); } - .hover\:bg-primary-700:hover { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity)); } - .hover\:bg-slate-50:hover { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity)); } - .hover\:text-black:hover { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } - .hover\:text-gray-800:hover { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } - .hover\:text-gray-900:hover { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } - .hover\:text-primary-600:hover { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - .hover\:opacity-60:hover { opacity: 0.6; } - .hover\:opacity-75:hover { opacity: 0.75; } - .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); } - .hover\:shadow-gray-100:hover { --tw-shadow-color: #f3f4f6; --tw-shadow: var(--tw-shadow-colored); } - .focus\:bg-white:focus { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } - .focus\:ring-4:focus { --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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } - .focus\:ring-primary-300:focus { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--primary-hue) 100% 77% / var(--tw-ring-opacity)); } - .active\:bg-gray-400\/20:active { background-color: rgb(156 163 175 / 0.2); } - .active\:opacity-50:active { opacity: 0.5; } - .active\:shadow-sm:active { --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); } - .active\:shadow-gray-200:active { --tw-shadow-color: #e5e7eb; --tw-shadow: var(--tw-shadow-colored); } - .group[open] .group-open\:before\:rotate-90::before { content: var(--tw-content); --tw-rotate: 90deg; 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)); } - .group\/code:hover .group-hover\/code\:opacity-100 { opacity: 1; } - .group\/copybtn.copied .group-\[\.copied\]\/copybtn\:block { display: block; } - .group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hidden { display: none; } - .data-\[state\=selected\]\:block[data-state=selected] { display: block; } - .data-\[state\=closed\]\:hidden[data-state=closed] { display: none; } - .data-\[state\=open\]\:hidden[data-state=open] { display: none; } - .data-\[state\=selected\]\:border-primary-500[data-state=selected] { --tw-border-opacity: 1; border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); } - .data-\[state\=selected\]\:text-primary-600[data-state=selected] { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - .group[data-theme=dark] .group-data-\[theme\=dark\]\:hidden { display: none; } - .group[data-theme=light] .group-data-\[theme\=light\]\:hidden { display: none; } - :is([dir="ltr"] .ltr\:right-1) { right: 0.25rem; } - :is([dir="ltr"] .ltr\:right-1\.5) { right: 0.375rem; } - :is([dir="ltr"] .ltr\:right-3) { right: 0.75rem; } - :is([dir="ltr"] .ltr\:-mr-4) { margin-right: -1rem; } - :is([dir="ltr"] .ltr\:ml-3) { margin-left: 0.75rem; } - :is([dir="ltr"] .ltr\:ml-auto) { margin-left: auto; } - :is([dir="ltr"] .ltr\:mr-auto) { margin-right: auto; } - :is([dir="ltr"] .ltr\:rotate-180) { --tw-rotate: 180deg; 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)); } - :is([dir="ltr"] .ltr\:pl-12) { padding-left: 3rem; } - :is([dir="ltr"] .ltr\:pl-16) { padding-left: 4rem; } - :is([dir="ltr"] .ltr\:pl-3) { padding-left: 0.75rem; } - :is([dir="ltr"] .ltr\:pl-4) { padding-left: 1rem; } - :is([dir="ltr"] .ltr\:pl-8) { padding-left: 2rem; } - :is([dir="ltr"] .ltr\:pr-0) { padding-right: 0px; } - :is([dir="ltr"] .ltr\:pr-2) { padding-right: 0.5rem; } - :is([dir="ltr"] .ltr\:pr-4) { padding-right: 1rem; } - :is([dir="ltr"] .ltr\:pr-9) { padding-right: 2.25rem; } - :is([dir="ltr"] .ltr\:text-right) { text-align: right; } - :is([dir="ltr"] .ltr\:before\:left-0)::before { content: var(--tw-content); left: 0px; } - :is([dir="rtl"] .rtl\:left-1) { left: 0.25rem; } - :is([dir="rtl"] .rtl\:left-1\.5) { left: 0.375rem; } - :is([dir="rtl"] .rtl\:left-3) { left: 0.75rem; } - :is([dir="rtl"] .rtl\:-ml-4) { margin-left: -1rem; } - :is([dir="rtl"] .rtl\:ml-auto) { margin-left: auto; } - :is([dir="rtl"] .rtl\:mr-3) { margin-right: 0.75rem; } - :is([dir="rtl"] .rtl\:mr-auto) { margin-right: auto; } - :is([dir="rtl"] .rtl\:-rotate-180) { --tw-rotate: -180deg; 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)); } - :is([dir="rtl"] .rtl\:pl-2) { padding-left: 0.5rem; } - :is([dir="rtl"] .rtl\:pl-4) { padding-left: 1rem; } - :is([dir="rtl"] .rtl\:pl-9) { padding-left: 2.25rem; } - :is([dir="rtl"] .rtl\:pr-12) { padding-right: 3rem; } - :is([dir="rtl"] .rtl\:pr-16) { padding-right: 4rem; } - :is([dir="rtl"] .rtl\:pr-3) { padding-right: 0.75rem; } - :is([dir="rtl"] .rtl\:pr-4) { padding-right: 1rem; } - :is([dir="rtl"] .rtl\:pr-8) { padding-right: 2rem; } - :is([dir="rtl"] .rtl\:text-left) { text-align: left; } - :is([dir="rtl"] .rtl\:before\:right-0)::before { content: var(--tw-content); right: 0px; } - :is([dir="rtl"] .rtl\:before\:rotate-180)::before { content: var(--tw-content); --tw-rotate: 180deg; 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)); } - @media (prefers-contrast: more) { + .contrast-more\:border { border-width: 1px; } + .contrast-more\:border-t { border-top-width: 1px; } + .contrast-more\:border-current { border-color: currentColor; } + .contrast-more\:border-gray-900 { --tw-border-opacity: 1; border-color: rgb(17 24 39 / var(--tw-border-opacity)); } + .contrast-more\:border-neutral-400 { --tw-border-opacity: 1; border-color: rgb(163 163 163 / var(--tw-border-opacity)); } + .contrast-more\:border-primary-500 { --tw-border-opacity: 1; border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); } + .contrast-more\:border-transparent { border-color: transparent; } + .contrast-more\:font-bold { font-weight: 700; } + .contrast-more\:text-current { color: currentColor; } + .contrast-more\:text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } + .contrast-more\:text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } + .contrast-more\:text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } + .contrast-more\:underline { text-decoration-line: underline; } + .contrast-more\:shadow-\[0_0_0_1px_\#000\] { --tw-shadow: 0 0 0 1px #000; --tw-shadow-colored: 0 0 0 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); } + .contrast-more\:shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + .contrast-more\:hover\:border-gray-900:hover { --tw-border-opacity: 1; border-color: rgb(17 24 39 / var(--tw-border-opacity)); } } - :is(html[class~="dark"] .dark\:block) { display: block; } - :is(html[class~="dark"] .dark\:hidden) { display: none; } - :is(html[class~="dark"] .dark\:border-blue-200\/30) { border-color: rgb(191 219 254 / 0.3); } - :is(html[class~="dark"] .dark\:border-gray-100\/20) { border-color: rgb(243 244 246 / 0.2); } - :is(html[class~="dark"] .dark\:border-neutral-700) { --tw-border-opacity: 1; border-color: rgb(64 64 64 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:border-neutral-800) { --tw-border-opacity: 1; border-color: rgb(38 38 38 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:border-orange-400\/30) { border-color: rgb(251 146 60 / 0.3); } - :is(html[class~="dark"] .dark\:border-red-200\/30) { border-color: rgb(254 202 202 / 0.3); } - :is(html[class~="dark"] .dark\:border-white\/10) { border-color: rgb(255 255 255 / 0.1); } - :is(html[class~="dark"] .dark\:border-yellow-200\/30) { border-color: rgb(254 240 138 / 0.3); } - :is(html[class~="dark"] .dark\:bg-blue-900\/30) { background-color: rgb(30 58 138 / 0.3); } - :is(html[class~="dark"] .dark\:bg-dark) { --tw-bg-opacity: 1; background-color: rgb(17 17 17 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:bg-dark\/50) { background-color: rgb(17 17 17 / 0.5); } - :is(html[class~="dark"] .dark\:bg-gray-50\/10) { background-color: rgb(249 250 251 / 0.1); } - :is(html[class~="dark"] .dark\:bg-neutral-800) { --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:bg-neutral-900) { --tw-bg-opacity: 1; background-color: rgb(23 23 23 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:bg-orange-400\/20) { background-color: rgb(251 146 60 / 0.2); } - :is(html[class~="dark"] .dark\:bg-primary-300\/10) { background-color: hsl(var(--primary-hue) 100% 77% / 0.1); } - :is(html[class~="dark"] .dark\:bg-primary-400\/10) { background-color: hsl(var(--primary-hue) 100% 66% / 0.1); } - :is(html[class~="dark"] .dark\:bg-primary-600) { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:bg-red-900\/30) { background-color: rgb(127 29 29 / 0.3); } - :is(html[class~="dark"] .dark\:bg-yellow-700\/30) { background-color: rgb(161 98 7 / 0.3); } - :is(html[class~="dark"] .dark\:from-gray-100) { --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } - :is(html[class~="dark"] .dark\:to-gray-400) { --tw-gradient-to: #9ca3af var(--tw-gradient-to-position); } - :is(html[class~="dark"] .dark\:text-blue-200) { --tw-text-opacity: 1; color: rgb(191 219 254 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-100) { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-200) { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-300) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-400) { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-50) { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-neutral-200) { --tw-text-opacity: 1; color: rgb(229 229 229 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-neutral-400) { --tw-text-opacity: 1; color: rgb(163 163 163 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-orange-300) { --tw-text-opacity: 1; color: rgb(253 186 116 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-primary-600) { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-red-200) { --tw-text-opacity: 1; color: rgb(254 202 202 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-slate-100) { --tw-text-opacity: 1; color: rgb(241 245 249 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-yellow-200) { --tw-text-opacity: 1; color: rgb(254 240 138 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:opacity-80) { opacity: 0.8; } - :is(html[class~="dark"] .dark\:shadow-\[0_-12px_16px_\#111\]) { --tw-shadow: 0 -12px 16px #111; --tw-shadow-colored: 0 -12px 16px 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(html[class~="dark"] .dark\:shadow-\[0_-1px_0_rgba\(255\2c 255\2c 255\2c \.1\)_inset\]) { --tw-shadow: 0 -1px 0 rgba(255,255,255,.1) inset; --tw-shadow-colored: inset 0 -1px 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); } - :is(html[class~="dark"] .dark\:shadow-none) { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - :is(html[class~="dark"] .dark\:ring-white\/20) { --tw-ring-color: rgb(255 255 255 / 0.2); } - :is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::-moz-placeholder { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::placeholder { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:before\:bg-neutral-800)::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:before\:invert)::before { content: var(--tw-content); --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); } - :is(html[class~="dark"] .dark\:hover\:border-gray-600:hover) { --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:hover\:border-neutral-500:hover) { --tw-border-opacity: 1; border-color: rgb(115 115 115 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:hover\:border-neutral-700:hover) { --tw-border-opacity: 1; border-color: rgb(64 64 64 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:hover\:border-neutral-800:hover) { --tw-border-opacity: 1; border-color: rgb(38 38 38 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:hover\:bg-gray-100\/5:hover) { background-color: rgb(243 244 246 / 0.05); } - :is(html[class~="dark"] .dark\:hover\:bg-neutral-700:hover) { --tw-bg-opacity: 1; background-color: rgb(64 64 64 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:hover\:bg-neutral-800:hover) { --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) { --tw-bg-opacity: 1; background-color: rgb(23 23 23 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:hover\:bg-primary-100\/5:hover) { background-color: hsl(var(--primary-hue) 100% 94% / 0.05); } - :is(html[class~="dark"] .dark\:hover\:bg-primary-700:hover) { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover { background-color: hsl(var(--primary-hue) 100% 50% / 0.1); } - :is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-gray-200:hover) { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-gray-300:hover) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-gray-50:hover) { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-neutral-50:hover) { --tw-text-opacity: 1; color: rgb(250 250 250 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-white:hover) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .hover\:dark\:text-primary-600):hover { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:shadow-none:hover) { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - :is(html[class~="dark"] .dark\:focus\:bg-dark:focus) { --tw-bg-opacity: 1; background-color: rgb(17 17 17 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:focus\:ring-primary-800:focus) { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--primary-hue) 100% 32% / var(--tw-ring-opacity)); } - @media (prefers-contrast: more) { + :is(html[class~="dark"] .contrast-more\:dark\:border-current) { border-color: currentColor; } + :is(html[class~="dark"] .contrast-more\:dark\:border-gray-50) { --tw-border-opacity: 1; border-color: rgb(249 250 251 / var(--tw-border-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:border-neutral-400) { --tw-border-opacity: 1; border-color: rgb(163 163 163 / var(--tw-border-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:border-primary-500) { --tw-border-opacity: 1; border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); } + :is(html[class~="dark"] .dark\:contrast-more\:border-neutral-400) { --tw-border-opacity: 1; border-color: rgb(163 163 163 / var(--tw-border-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:text-current) { color: currentColor; } + :is(html[class~="dark"] .contrast-more\:dark\:text-gray-100) { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:text-gray-300) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:text-gray-50) { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:shadow-\[0_0_0_1px_\#fff\]) { --tw-shadow: 0 0 0 1px #fff; --tw-shadow-colored: 0 0 0 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); } + :is(html[class~="dark"] .contrast-more\:dark\:shadow-none) { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + :is(html[class~="dark"] .contrast-more\:dark\:hover\:border-gray-50:hover) { --tw-border-opacity: 1; border-color: rgb(249 250 251 / var(--tw-border-opacity)); } } - @media print { + .print\:hidden { display: none; } + .print\:bg-transparent { background-color: transparent; } } - @media not all and (min-width: 1280px) { + .max-xl\:hidden { display: none; } } - @media not all and (min-width: 1024px) { + .max-lg\:min-h-\[340px\] { min-height: 340px; } } - @media not all and (min-width: 768px) { + .max-md\:hidden { display: none; } + .max-md\:min-h-\[340px\] { min-height: 340px; } + .max-md\:\[transform\:translate3d\(0\2c -100\%\2c 0\)\] { transform: translate3d(0,-100%,0); } } - @media (min-width: 640px) { + .sm\:block { display: block; } + .sm\:flex { display: flex; } + .sm\:w-\[110\%\] { width: 110%; } + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .sm\:items-start { align-items: flex-start; } + .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; } + .sm\:text-xl { font-size: 1.25rem; } } - @media (min-width: 768px) { + .md\:sticky { position: sticky; } + .md\:top-16 { top: 4rem; } + .md\:inline-block { display: inline-block; } + .md\:hidden { display: none; } + .md\:aspect-\[1\.1\/1\] { aspect-ratio: 1.1/1; } + .md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] { height: calc(100vh - var(--navbar-height) - var(--menu-height)); } + .md\:max-h-\[min\(calc\(100vh-5rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] { max-height: min(calc(100vh - 5rem - env(safe-area-inset-bottom)),400px); } + .md\:w-64 { width: 16rem; } + .md\:shrink-0 { flex-shrink: 0; } + .md\:justify-start { justify-content: flex-start; } + .md\:self-start { align-self: flex-start; } + .md\:px-12 { padding-left: 3rem; padding-right: 3rem; } + .md\:pt-12 { padding-top: 3rem; } + .md\:text-5xl { font-size: 3rem; } + .md\:text-lg { font-size: 1.125rem; } + .md\:text-sm { font-size: .875rem; } + :is([dir="ltr"] .ltr\:md\:left-auto) { left: auto; } + :is([dir="rtl"] .rtl\:md\:right-auto) { right: auto; } } - @media (min-width: 1024px) { + .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } - @media (min-width: 1280px) { + .xl\:block { display: block; } diff --git a/assets/css/components/navbar.css b/assets/css/components/navbar.css index 01dc81a2..8bca91de 100644 --- a/assets/css/components/navbar.css +++ b/assets/css/components/navbar.css @@ -4,6 +4,14 @@ nav { } } +@supports ( + (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) +) { + .nav-container-blur { + @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80; + } +} + .hamburger-menu svg { g { @apply origin-center; diff --git a/assets/css/styles.css b/assets/css/styles.css index ac80caef..7713e4b5 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,3 +1,5 @@ +@import "tailwind.css"; + @import "typography.css"; @import "highlight.css"; @import "components/cards.css"; @@ -6,10 +8,6 @@ @import "components/sidebar.css"; @import "components/navbar.css"; -@tailwind base; -@tailwind components; -@tailwind utilities; - html { @apply text-base antialiased; font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1; diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css new file mode 100644 index 00000000..b5c61c95 --- /dev/null +++ b/assets/css/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 7ea4a0fc..b584439d 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -407,6 +407,8 @@ "mx-auto", "my-1.5", "my-2", + "nav-container", + "nav-container-blur", "next-error-h1", "no-underline", "not-prose", @@ -428,7 +430,6 @@ "p-2", "p-4", "p-6", - "pb-6", "pb-8", "pb-[env(safe-area-inset-bottom)]", "pb-px", diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 7778c021..3d0da937 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -5,8 +5,8 @@ {{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}} -
-
+
+