/* Pennington content-visibility markers. */ /* .humans-only — visible in the browser; stripped from llms.txt extraction. */ /* .robots-only — hidden in the browser; kept in llms.txt extraction. */ .robots-only { display: none; } /* ---- reset safety net (harmless if MonorailCSS preflight already does it) ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } html { scroll-padding-top: 5rem; } /* ---- fonts: IBM Plex is part of the brand identity ---- */ :root { --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; } body { font-family: var(--font-sans); } /* ---- signature dot-grid surface (apply to our own diagram frames) ---- */ .dot-grid { background-color: var(--color-base-50); background-image: radial-gradient(var(--color-base-200) 1px, transparent 1px); background-size: 16px 16px; } .dark .dot-grid { background-color: var(--color-base-900); background-image: radial-gradient(var(--color-base-800) 1px, transparent 1px); } /* ---- hand-authored code-sample syntax tokens (hero + API pages) ---- */ .tok-key { color: var(--color-primary-700); } .tok-accent { color: var(--color-primary-700); } .tok-punct { color: var(--color-base-400); } .tok-str { color: #b45309; } .dark .tok-key { color: var(--color-primary-400); } .dark .tok-accent { color: var(--color-primary-400); } .dark .tok-punct { color: var(--color-base-500); } .dark .tok-str { color: #e0b341; } /* ---- Beck engine embeds (Beck injects this DOM; can't utility-class it) ---- */ /* A hydrated ```beck fence becomes
; frame it on the dot-grid surface so every live diagram reads as a framed preview. */ .beck-embed { position: relative; border: 1px solid var(--color-base-200); border-radius: 12px; background-color: var(--color-base-50); background-image: radial-gradient(var(--color-base-200) 1px, transparent 1px); background-size: 16px 16px; padding: 26px 18px; margin: 0 0 24px; display: flex; align-items: center; justify-content: center; min-height: 200px; max-width: 100%; overflow: auto; } .dark .beck-embed { border-color: var(--color-base-800); background-color: var(--color-base-900); background-image: radial-gradient(var(--color-base-800) 1px, transparent 1px); } .prose .beck-embed > .beck-root { max-width: 100%; } beck-diagram { display: block; max-width: 100%; } /* The playground renders into its own canvas — strip the fence frame there. */ .pg-preview-canvas .beck-embed { border: 0; background: none; padding: 0; margin: 0; min-height: 0; } /* ---- Beck accent remap: differentiate from the emerald brand ---- */ /* The engine maps `success`->emerald and `info`->violet. On this emerald-branded site `success` would collide with `primary` (both emerald), and the violet ramp is never emitted (MonorailCSS only emits ramps a utility class references), so `info` can't adopt the live palette. Re-point both at ramps this site DOES emit: `success` -> green (a distinct green from the emerald primary) and `info` -> sky (also recolours the `db` kind, whose default accent is info). The `body` prefix lifts specificity above the engine's own `.beck-root` defaults, which it injects into AFTER this stylesheet (equal-specificity rules would otherwise let the engine default win). */ body .beck-root { --beck-success: var(--color-green-500, #22c55e); --beck-info: var(--color-sky-500, #0ea5e9); } /* ---- playground: elements created / class-toggled by site.js ---- */ /* IL discovery can't see classes that exist only inside a JS string, so these stay declarative CSS rather than utilities. */ #pg-editor-host { flex: 1 1 0%; min-height: 0; width: 100%; overflow: hidden; background: var(--color-base-50); } .dark #pg-editor-host { background: var(--color-base-900); } #pg-editor-host .monaco-editor, #pg-editor-host .monaco-editor .overflow-guard { border-radius: 0; } .pg-editor { flex: 1; border: none; outline: none; resize: none; width: 100%; padding: 16px 18px; font-family: var(--font-mono); font-size: 14px; line-height: 1.8; background: var(--color-base-50); color: var(--color-base-900); tab-size: 2; } .dark .pg-editor { background: var(--color-base-900); color: var(--color-base-50); } #pg-status.ok { color: var(--color-primary-600); } #pg-status.err { color: #e6685b; } /* ---- hero: site.js writes the YAML while the diagram renders in step ---- */ /* #hero-code is the typewriter target (Tailwind classes do the framing); the caret site.js slots in needs colouring + a blink, and the host a clean overflow. Re-rendering the caret each keystroke restarts the animation, so it sits solid while typing and only blinks during the pauses between lines. */ #hero-code { overflow: hidden; } #hero-code .beck-caret { color: var(--color-primary-600); font-weight: 400; animation: beck-caret-blink 1s steps(1) infinite; } .dark #hero-code .beck-caret { color: var(--color-primary-400); } @keyframes beck-caret-blink { 50% { opacity: 0; } } #hero-host .beck-root { max-width: 100%; } /* ---- syntax cheatsheet: filter chips (class-toggled by site.js) ---- */ /* site.js swaps `.is-active` between chips; declarative so the toggle never depends on IL-discovered utility classes that live only in a JS string. */ .syntax-chip { font: inherit; font-weight: 500; font-size: 13px; padding: 6px 14px; border-radius: 9999px; cursor: pointer; background: #fff; color: var(--color-base-600); border: 1px solid var(--color-base-300); transition: background-color .15s, color .15s, border-color .15s; } .dark .syntax-chip { background: var(--color-base-900); color: var(--color-base-400); border-color: var(--color-base-700); } .syntax-chip:hover { border-color: var(--color-base-400); color: var(--color-base-900); } .dark .syntax-chip:hover { border-color: var(--color-base-600); color: var(--color-base-50); } .syntax-chip.is-active { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; } .dark .syntax-chip.is-active { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #fff; } /* ---- syntax cheatsheet: live-diagram canvas ---- */ /* Each card emits a ```beck fence the client hydrates into a light-DOM .beck-embed. Hide the raw YAML until then, and strip the fence's framed-preview chrome so the diagram sits directly on the card's own dot-grid cell (no nested frame). */ .syntax-canvas > pre { display: none; } .syntax-canvas .beck-embed { border: 0; background: none; padding: 0; margin: 0; min-height: 0; width: 100%; } /* ---- icon reference gallery ---- */ /* site.js fills [data-beck-icon-gallery] from window.Beck.icons (the engine's own registry), so these card/chip classes exist only in a JS string and must be declarative CSS. The chip echoes a node's accent-tinted icon chip, in brand primary. */ [data-beck-icon-gallery] { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; } .beck-icon-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; text-align: center; border: 1px solid var(--color-base-200); border-radius: 12px; background: #fff; } .dark .beck-icon-card { border-color: var(--color-base-800); background: var(--color-base-900); } .beck-icon-chip { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--color-primary-600) 12%, var(--color-base-100)); color: var(--color-primary-700); } .dark .beck-icon-chip { background: color-mix(in srgb, var(--color-primary-500) 18%, var(--color-base-800)); color: var(--color-primary-400); } .beck-icon-chip svg { width: 22px; height: 22px; } .beck-icon-key { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-base-900); } .dark .beck-icon-key { color: var(--color-base-50); } .beck-icon-aliases { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4; color: var(--color-base-400); word-break: break-word; } .dark .beck-icon-aliases { color: var(--color-base-500); } /* ---- API reference sidebar links (scroll-spy class-toggled by site.js) ---- */ .api-nav-link { display: block; width: 100%; text-align: left; font-family: var(--font-mono); font-size: 13px; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--color-base-600); transition: background-color .15s, color .15s; } .dark .api-nav-link { color: var(--color-base-400); } .api-nav-link:hover { background: var(--color-base-50); color: var(--color-base-900); } .dark .api-nav-link:hover { background: var(--color-base-900); color: var(--color-base-50); } .api-nav-link.is-active { background: var(--color-primary-50); color: var(--color-primary-700); } .dark .api-nav-link.is-active { background: color-mix(in srgb, var(--color-primary-950) 40%, transparent); color: var(--color-primary-400); } /* ---- docs sidebar: mobile disclosure chevron ---- */ /* site.js toggles the nav's `hidden` and the button's aria-expanded; the chevron flips off that attribute (a JS-only class wouldn't be IL-discovered). */ .docs-nav-chevron { transition: transform .2s ease; } .docs-nav-toggle[aria-expanded="true"] .docs-nav-chevron { transform: rotate(180deg); } /* ---- global scrollbar polish ---- */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--color-base-300); border-radius: 7px; } .dark ::-webkit-scrollbar-thumb { background: var(--color-base-700); } ::-webkit-scrollbar-track { background: transparent; } @layer theme, base, components, utilities; @layer theme { :root, :host { --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-base-100: var(--color-slate-100); --color-base-200: var(--color-slate-200); --color-base-300: var(--color-slate-300); --color-base-400: var(--color-slate-400); --color-base-50: var(--color-slate-50); --color-base-500: var(--color-slate-500); --color-base-600: var(--color-slate-600); --color-base-700: var(--color-slate-700); --color-base-800: var(--color-slate-800); --color-base-900: var(--color-slate-900); --color-base-950: var(--color-slate-950); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-primary-100: var(--color-emerald-100); --color-primary-200: var(--color-emerald-200); --color-primary-300: var(--color-emerald-300); --color-primary-400: var(--color-emerald-400); --color-primary-50: var(--color-emerald-50); --color-primary-500: var(--color-emerald-500); --color-primary-600: var(--color-emerald-600); --color-primary-700: var(--color-emerald-700); --color-primary-800: var(--color-emerald-800); --color-primary-900: var(--color-emerald-900); --color-primary-950: var(--color-emerald-950); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-50: oklch(97.1% 0.013 17.38); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-white: #fff; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-weight-bold: 700; --font-weight-medium: 500; --font-weight-normal: 400; --font-weight-semibold: 600; --leading-relaxed: 1.625; --leading-snug: 1.375; --radius-2xl: 1rem; --radius-lg: 0.5rem; --radius-md: 0.375rem; --radius-xl: 0.75rem; --spacing: 0.25rem; --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --tracking-normal: 0em; --tracking-tight: -0.025em; --tracking-wide: 0.025em; } } @layer base { /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Remove default margins and padding 3. Reset all borders. */ *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 2 */ border: 0 solid; /* 3 */ } /* 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. 7. Disable tap highlights on iOS. */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ tab-size: 4; /* 3 */ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); /* 4 */ font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */ font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 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. Reset the default border style to a 1px solid border. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); /* 1 */ font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 2 */ font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Make lists unstyled by default. */ ol, ul, menu { list-style: none; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* 1. Inherit font styles in all browsers. 2. Remove border radius in all browsers. 3. Remove background color in all browsers. 4. Ensure consistent opacity for disabled states in all browsers. */ button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ border-radius: 0; /* 2 */ background-color: transparent; /* 3 */ opacity: 1; /* 4 */ } /* Restore default font weight. */ :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } /* Restore indentation. */ :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } /* Restore space after button. */ ::file-selector-button { margin-inline-end: 4px; } /* Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) */ ::placeholder { opacity: 1; } /* Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) */ @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Ensure date/time inputs have the same height when empty in iOS Safari. 2. Ensure text alignment can be changed on date/time inputs in iOS Safari. */ ::-webkit-date-and-time-value { min-height: 1lh; /* 1 */ text-align: inherit; /* 2 */ } /* Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`. */ ::-webkit-datetime-edit { display: inline-flex; } /* Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers. */ ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } /* Center dropdown marker shown on inputs with paired ``s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499) */ ::-webkit-calendar-picker-indicator { line-height: 1; } /* 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; } /* Correct the inability to style the border radius in iOS Safari. */ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default. */ [hidden]:where(:not([hidden='until-found'])) { display: none!important; } } @layer components { .search-modal-backdrop { position: fixed; inset: calc(var(--spacing) * 0); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding-top: 4.5rem; padding-inline: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 4); background-color: color-mix(in oklab, var(--color-base-700) 30%, transparent); --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .search-modal-backdrop:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-base-950) 70%, transparent); } .code-highlight-wrapper .codeblock-lang { color: var(--color-base-500); } .code-highlight-wrapper .codeblock-lang:where(.dark, .dark *) { color: var(--color-base-400); } .markdown-alert strong { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-base-900); } .markdown-alert strong:where(.dark, .dark *) { color: var(--color-base-50); } .search-foot { display: flex; align-items: center; justify-content: flex-end; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-base-200); background-color: color-mix(in oklab, var(--color-base-100) 60%, transparent); font-size: 11px; color: var(--color-base-500); flex-shrink: 0; } .search-foot:where(.dark, .dark *) { border-color: var(--color-base-800); background-color: color-mix(in oklab, var(--color-base-900) 50%, transparent); } .tab-panel .code-highlight-wrapper { margin-block: calc(var(--spacing) * 0); border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; background-color: transparent; } .tab-panel .code-highlight-wrapper:where(.dark, .dark *) { background-color: transparent; } .search-page-group-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 3); } .markdown-alert-caution { background-color: color-mix(in oklab, var(--color-orange-500) 8%, transparent); border-color: color-mix(in oklab, var(--color-orange-500) 22%, transparent); fill: var(--color-orange-700); } .markdown-alert-caution:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent); border-color: color-mix(in oklab, var(--color-orange-500) 25%, transparent); fill: var(--color-orange-300); } .hljs-number { color: var(--color-emerald-800); } .hljs-number:where(.dark, .dark *) { color: var(--color-emerald-300); } .hljs-comment { color: var(--color-slate-600); font-style: italic; } .hljs-comment:where(.dark, .dark *) { color: var(--color-slate-400); } .hljs-link { color: var(--color-blue-800); } .hljs-link:where(.dark, .dark *) { color: var(--color-blue-300); } .search-recent-sub { font-size: 11.5px; color: var(--color-base-500); margin-top: calc(var(--spacing) * 0.5); } .markdown-alert > ul { list-style-type: disc; } .search-result-breadcrumb .sep { color: var(--color-base-300); } .search-result-breadcrumb .sep:where(.dark, .dark *) { color: var(--color-base-600); } .search-nr-btn { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); padding-inline: calc(var(--spacing) * 3.5); padding-block: calc(var(--spacing) * 2); border-radius: var(--radius-lg); font-size: 12.5px; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); background-color: var(--color-base-100); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); color: var(--color-base-700); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .search-nr-btn:hover { --tw-translate-y: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } .search-nr-btn:where(.dark, .dark *) { background-color: var(--color-base-800); border-color: var(--color-base-700); color: var(--color-base-200); } .search-state-actions { display: flex; justify-content: center; gap: calc(var(--spacing) * 2); flex-wrap: wrap; } .code-highlight-wrapper pre code { font-family: var(--font-mono); display: inline-block; min-width: 100%; } .search-skel-row { display: grid; grid-template-columns: 1.1rem 1fr; column-gap: calc(var(--spacing) * 3); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3.5); padding-left: calc(var(--spacing) * 10); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-base-100); } .search-skel-row:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-base-800) 70%, transparent); } .hljs { color: var(--color-base-900); } .hljs:where(.dark, .dark *) { color: var(--color-base-200); } .search-result[data-selected=true] .search-result-heading { color: var(--color-base-900); } .search-result[data-selected=true] .search-result-heading:where(.dark, .dark *) { color: var(--color-base-100); } .code-highlight-wrapper pre { padding-block: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 4); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; --tw-leading: 1.6; line-height: 1.6; width: 100%; } @media (min-width: 768px) { .code-highlight-wrapper pre { padding-inline: calc(var(--spacing) * 5); } } .code-highlight-wrapper pre :where(.dark, .dark *) { color-scheme: dark; } .hljs-string { color: var(--color-emerald-800); } .hljs-string:where(.dark, .dark *) { color: var(--color-emerald-300); } .code-highlight-wrapper .line.error { background-color: color-mix(in oklab, var(--color-red-300) 50%, transparent); } .code-highlight-wrapper .line.error:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } .search-recent-row { display: flex; align-items: center; gap: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2); cursor: pointer; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; --tw-border-style: dashed; border-style: dashed; border-color: color-mix(in oklab, var(--color-base-300) 50%, transparent); } .search-recent-row:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } .search-recent-row:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-base-700) 40%, transparent); } .markdown-alert code { font-family: var(--font-mono); font-size: 0.86em; padding-inline: calc(var(--spacing) * 1); padding-block: 1px; border-radius: 0.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-200); background-color: var(--color-base-100); color: var(--color-base-700); } .markdown-alert code:where(.dark, .dark *) { border-color: var(--color-base-700); background-color: var(--color-base-800); color: var(--color-base-200); } .search-result { position: relative; display: block; cursor: pointer; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .search-result:hover { background-color: color-mix(in oklab, var(--color-base-100) 70%, transparent); } .search-result:where(.dark, .dark *):hover { background-color: color-mix(in oklab, var(--color-base-800) 50%, transparent); } .ctab-btn { white-space: nowrap; margin-bottom: -1px; border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; border-color: transparent; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-600); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .ctab-btn:where(.dark, .dark *) { color: var(--color-base-400); } .ctab-btn:hover { color: var(--color-base-900); } .ctab-btn:where(.dark, .dark *):hover { color: var(--color-base-50); } .ctab-btn[data-active="true"] { color: var(--color-primary-700); border-color: var(--color-primary-600); } .ctab-btn:where(.dark, .dark *)[data-active="true"] { color: var(--color-primary-300); border-color: var(--color-primary-300); } .hljs-operator { color: var(--color-base-800); } .hljs-operator:where(.dark, .dark *) { color: var(--color-base-300); } .search-dot[data-area=how-to] { background-color: var(--color-emerald-400); } .markdown-alert-warning { background-color: color-mix(in oklab, var(--color-amber-500) 8%, transparent); border-color: color-mix(in oklab, var(--color-amber-500) 22%, transparent); fill: var(--color-amber-700); } .markdown-alert-warning:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent); border-color: color-mix(in oklab, var(--color-amber-500) 25%, transparent); fill: var(--color-amber-300); } .search-highlight { background-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent); color: var(--color-primary-800); border-radius: 3px; padding-inline: calc(var(--spacing) * 0.5); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .search-highlight:where(.dark, .dark *) { color: var(--color-primary-100); } .hljs-punctuation { color: var(--color-base-800); } .hljs-punctuation:where(.dark, .dark *) { color: var(--color-base-300); } .code-highlight-wrapper .codeblock-head { display: flex; align-items: center; justify-content: space-between; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 1.5); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-base-200); background-color: var(--color-base-100); font-family: var(--font-mono); font-size: 12px; } .code-highlight-wrapper .codeblock-head:where(.dark, .dark *) { border-color: var(--color-base-800); background-color: var(--color-base-900); } .code-highlight-wrapper .word-highlight-with-message { border-style: var(--tw-border-style); border-width: 1px; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-primary-600); border-radius: 0.25rem; padding-inline: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * 1); background-color: color-mix(in oklab, var(--color-primary-100) 25%, transparent); position: relative; } .code-highlight-wrapper .word-highlight-with-message:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-primary-300) 25%, transparent); background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent); } .search-area-pill[data-area=blog] { background-color: color-mix(in oklab, var(--color-pink-500) 15%, transparent); color: var(--color-pink-700); } .search-area-pill[data-area=blog][data-area=blog]:where(.dark, .dark *) { color: var(--color-pink-200); } .search-state-icon-warn { background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent); border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent); color: var(--color-amber-600); } .search-state-icon-warn:where(.dark, .dark *) { color: var(--color-amber-300); } .markdown-alert-tip { background-color: color-mix(in oklab, var(--color-emerald-500) 8%, transparent); border-color: color-mix(in oklab, var(--color-emerald-500) 22%, transparent); fill: var(--color-emerald-700); } .markdown-alert-tip:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent); border-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent); fill: var(--color-emerald-300); } .markdown-alert em { font-style: italic; } .search-area-pill[data-area=reference] { background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent); color: var(--color-primary-700); } .search-area-pill[data-area=reference][data-area=reference]:where(.dark, .dark *) { color: var(--color-primary-200); } .search-more-in-page { display: flex; align-items: center; gap: calc(var(--spacing) * 1.5); padding-left: calc(var(--spacing) * 10); padding-right: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 1); padding-bottom: calc(var(--spacing) * 3.5); font-size: 12px; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-primary-600); cursor: pointer; } .search-more-in-page:hover { text-decoration-line: underline; } .search-more-in-page:where(.dark, .dark *) { color: var(--color-primary-300); } .search-dot { border-radius: calc(infinity * 1px); flex-shrink: 0; background-color: var(--color-base-500); } .code-highlight-wrapper .line.diff-add { background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent); --tw-shadow: inset 2px 0 0 var(--color-emerald-600); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .code-highlight-wrapper .line.diff-add:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent); --tw-shadow: inset 2px 0 0 var(--color-emerald-400); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .code-highlight-wrapper .line.diff-add::before { position: absolute; left: calc(var(--spacing) * 1); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-content: '+'; content: var(--tw-content); color: var(--color-emerald-700); } .code-highlight-wrapper .line.diff-add:where(.dark, .dark *)::before { color: var(--color-emerald-400); } .ctab-panel { display: none; padding-top: calc(var(--spacing) * 5); } .ctab-panel[data-active="true"] { display: block; } .ctab-panel { margin-top: calc(var(--spacing) * 0); margin-bottom: calc(var(--spacing) * 0); } .search-area-pill[data-area=how-to] { background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent); color: var(--color-emerald-700); } .search-area-pill[data-area=how-to][data-area=how-to]:where(.dark, .dark *) { color: var(--color-emerald-200); } .search-area-pill[data-area=tutorials] { background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent); color: var(--color-sky-700); } .search-area-pill[data-area=tutorials][data-area=tutorials]:where(.dark, .dark *) { color: var(--color-sky-200); } .search-clear-btn { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); border-radius: calc(infinity * 1px); color: var(--color-base-500); background-color: var(--color-base-100); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); } .search-clear-btn:hover { color: var(--color-base-800); } .search-clear-btn:where(.dark, .dark *) { background-color: var(--color-base-800); border-color: var(--color-base-700); } .search-clear-btn:where(.dark, .dark *):hover { color: var(--color-base-200); } .hljs-quote { color: color-mix(in oklab, var(--color-slate-800) 50%, transparent); font-style: italic; } .hljs-quote:where(.dark, .dark *) { color: var(--color-slate-300); } .code-highlight-wrapper .word-highlight-wrapper { position: relative; display: inline-block; } .hljs-keyword { color: var(--color-sky-800); } .hljs-keyword:where(.dark, .dark *) { color: var(--color-sky-300); } .markdown-alert-note .markdown-alert-title { color: var(--color-sky-800); } .markdown-alert-note .markdown-alert-title:where(.dark, .dark *) { color: var(--color-sky-200); } .code-highlight-wrapper .line.diff-remove > * { opacity: 60%; } .steps-thread .step { position: relative; padding-bottom: calc(var(--spacing) * 8); } .steps-thread .step:last-child { padding-bottom: calc(var(--spacing) * 1); } .search-recent-row:hover .search-recent-title { color: var(--color-primary-600); } .search-recent-row:hover .search-recent-title:where(.dark, .dark *) { color: var(--color-primary-300); } .search-dot[data-area=explanation] { background-color: var(--color-amber-400); } .hljs-tag { color: var(--color-sky-800); } .hljs-tag:where(.dark, .dark *) { color: var(--color-sky-300); } .tab-list { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-inline: calc(var(--spacing) * 2); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-base-200); background-color: var(--color-base-100); scrollbar-width: none; } .tab-list:where(.dark, .dark *) { border-color: var(--color-base-800); background-color: var(--color-base-900); } .tab-list::-webkit-scrollbar { display: none; } .search-area-pill { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 0.5); border-radius: calc(infinity * 1px); font-size: 10.5px; --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); text-transform: uppercase; --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); background-color: color-mix(in oklab, var(--color-base-500) 15%, transparent); color: var(--color-base-700); } .search-area-pill:where(.dark, .dark *) { color: var(--color-base-300); } .search-empty-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); text-transform: uppercase; --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); color: var(--color-base-500); margin-bottom: calc(var(--spacing) * 2); } .search-pill-dot { width: 5px; height: 5px; } .markdown-alert > p + p, .markdown-alert > p + ul, .markdown-alert > p + ol, .markdown-alert > ul + p, .markdown-alert > ol + p { margin-top: calc(var(--spacing) * 2); } .markdown-alert-title { display: flex; align-items: center; gap: calc(var(--spacing) * 2); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); font-size: 14px; } .hljs-built_in { color: var(--color-amber-700); } .hljs-built_in:where(.dark, .dark *) { color: var(--color-amber-300); } .search-dot[data-area=blog] { background-color: var(--color-pink-400); } .code-highlight-wrapper .word-highlight-message { font-family: var(--font-sans); position: absolute; top: 100%; left: calc(var(--spacing) * 0); margin-top: calc(var(--spacing) * 3); padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); color: var(--color-base-800); background-color: color-mix(in oklab, var(--color-base-200) 25%, transparent); border-radius: 0.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: color-mix(in oklab, var(--color-primary-500) 50%, transparent); white-space: nowrap; z-index: 10; -webkit-user-select: none; user-select: none; pointer-events: none; } .code-highlight-wrapper .word-highlight-message:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-primary-700) 20%, transparent); color: var(--color-primary-200); } .markdown-alert > ul, .markdown-alert > ol { margin: calc(var(--spacing) * 0); padding-left: calc(var(--spacing) * 5); list-style-position: outside; } .hljs-attribute { color: var(--color-rose-800); } .hljs-attribute:where(.dark, .dark *) { color: var(--color-rose-300); } .hljs-literal { color: var(--color-sky-800); } .hljs-literal:where(.dark, .dark *) { color: var(--color-sky-300); } .markdown-alert li > p { margin: calc(var(--spacing) * 0); } .steps-thread .step-title { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-900); margin-bottom: calc(var(--spacing) * 2); } .steps-thread .step-title:where(.dark, .dark *) { color: var(--color-base-50); } .code-highlight-wrapper .line { display: inline-block; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: 300ms; --tw-duration: 300ms; padding-inline: calc(var(--spacing) * 5); margin-inline: calc(var(--spacing) * -5); width: calc(100% + 2.5rem); position: relative; } @media (min-width: 1024px) { .code-highlight-wrapper .line { padding-block: 1px; } } .hljs-title { color: var(--color-amber-800); } .hljs-title:where(.dark, .dark *) { color: var(--color-amber-300); } .search-area-pill[data-area=explanation] { background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent); color: var(--color-amber-800); } .search-area-pill[data-area=explanation][data-area=explanation]:where(.dark, .dark *) { color: var(--color-amber-200); } .code-highlight-wrapper pre.has-focused:hover .line { --tw-blur: blur(0); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); opacity: 100%; } .pn-card { background-color: color-mix(in oklch,var(--card-tint) 10%,transparent); border-color: color-mix(in oklch,var(--card-tint) 30%,transparent); color: color-mix(in oklch,var(--card-tint) 88%,var(--color-base-950)); } .pn-card:where(.dark, .dark *) { background-color: color-mix(in oklch,var(--card-tint) 12%,transparent); border-color: color-mix(in oklch,var(--card-tint) 30%,transparent); color: color-mix(in oklch,var(--card-tint) 80%,white); } .steps-thread .step-num { position: absolute; left: calc(var(--spacing) * -10); top: calc(var(--spacing) * -0.5); display: inline-flex; align-items: center; justify-content: center; width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); border-radius: calc(infinity * 1px); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); font-size: 13px; color: var(--color-primary-700); background-color: var(--color-base-50); border-style: var(--tw-border-style); border-width: 1.5px; border-color: var(--color-primary-300); --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--color-base-50); } .steps-thread .step-num:where(.dark, .dark *) { color: var(--color-primary-300); background-color: var(--color-base-900); border-color: color-mix(in oklab, var(--color-primary-300) 40%, transparent); --tw-ring-color: var(--color-base-950); } .tab-container { display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-200); background-color: var(--color-base-50); } .tab-container:where(.dark, .dark *) { background-color: var(--color-base-900); border-color: var(--color-base-800); } .ctabs-bar { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; gap: calc(var(--spacing) * 1); overflow-x: auto; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-base-200); scrollbar-width: none; } .ctabs-bar:where(.dark, .dark *) { border-color: var(--color-base-800); } .ctabs-bar::-webkit-scrollbar { display: none; } .search-dot[data-area=reference] { background-color: var(--color-primary-400); } .markdown-alert-important { background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent); border-color: color-mix(in oklab, var(--color-primary-500) 22%, transparent); fill: var(--color-primary-700); } .markdown-alert-important:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent); border-color: color-mix(in oklab, var(--color-primary-500) 25%, transparent); fill: var(--color-primary-300); } .search-empty-section { padding-inline: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 1); } .tab-button { white-space: nowrap; border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; border-color: transparent; margin-bottom: -1px; padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); font-size: 12px; font-family: var(--font-mono); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-500); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .tab-button:where(.dark, .dark *) { color: var(--color-base-400); } .tab-button:hover { color: var(--color-base-800); } .tab-button:where(.dark, .dark *):hover { color: var(--color-base-200); } .tab-button:disabled { pointer-events: none; opacity: 50%; } .tab-button[data-selected="true"] { color: var(--color-primary-700); border-color: var(--color-primary-600); } .tab-button:where(.dark, .dark *)[data-selected="true"] { color: var(--color-primary-300); border-color: var(--color-primary-300); } .code-highlight-wrapper .line.warning { background-color: color-mix(in oklab, var(--color-amber-300) 50%, transparent); } .code-highlight-wrapper .line.warning:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent); } .code-highlight-wrapper .word-highlight { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-primary-600); border-radius: 0.25rem; padding-inline: calc(var(--spacing) * 0.5); padding-block: calc(var(--spacing) * 0); background-color: color-mix(in oklab, var(--color-primary-100) 25%, transparent); } .code-highlight-wrapper .word-highlight:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-primary-300) 25%, transparent); background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent); } .markdown-alert li::marker { color: color-mix(in oklab, var(--color-base-500) 60%, transparent); } .markdown-alert li:where(.dark, .dark *)::marker { color: color-mix(in oklab, var(--color-base-400) 60%, transparent); } .markdown-alert li { margin-block: calc(var(--spacing) * 0.5); } .hljs-selector-tag { color: var(--color-sky-700); } .hljs-selector-tag:where(.dark, .dark *) { color: var(--color-sky-300); } .search-result-sub { padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 1.5); } .search-state-sub { font-size: 13.5px; --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); color: var(--color-base-600); max-width: 30rem; margin-inline: auto; margin-bottom: calc(var(--spacing) * 5); } .search-state-sub:where(.dark, .dark *) { color: var(--color-base-400); } .hljs-variable { color: var(--color-rose-800); } .hljs-variable:where(.dark, .dark *) { color: var(--color-rose-300); } .search-results-body { flex: 1; min-height: calc(var(--spacing) * 0); overflow-y: auto; padding-block: calc(var(--spacing) * 2); } .pn-card-link { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .pn-card-link:hover { background-color: color-mix(in oklch,var(--card-tint) 20%,transparent); } .pn-card-link:where(.dark, .dark *):hover { background-color: color-mix(in oklch,var(--card-tint) 22%,transparent); } .markdown-alert-warning .markdown-alert-title { color: var(--color-amber-800); } .markdown-alert-warning .markdown-alert-title:where(.dark, .dark *) { color: var(--color-amber-200); } .search-recent-title { font-size: 13.5px; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-800); } .search-recent-title:where(.dark, .dark *) { color: var(--color-base-100); } .steps-thread { position: relative; margin-block: calc(var(--spacing) * 8); padding-left: calc(var(--spacing) * 10); } .steps-thread::before { --tw-content: ''; content: var(--tw-content); position: absolute; left: calc(var(--spacing) * 4); top: calc(var(--spacing) * 3); bottom: calc(var(--spacing) * 3); width: calc(var(--spacing) * 0.5); border-radius: calc(infinity * 1px); background-color: var(--color-base-200); } .steps-thread:where(.dark, .dark *)::before { background-color: var(--color-base-800); } .code-highlight-wrapper .line.highlight { background-color: color-mix(in oklab, var(--color-primary-700) 15%, transparent); } .code-highlight-wrapper .line.highlight:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent); } .code-highlight-wrapper .line.diff-remove { background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent); --tw-shadow: inset 2px 0 0 var(--color-rose-600); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .code-highlight-wrapper .line.diff-remove:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent); --tw-shadow: inset 2px 0 0 var(--color-rose-400); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .code-highlight-wrapper .line.diff-remove::before { position: absolute; left: calc(var(--spacing) * 1); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); --tw-content: '-'; content: var(--tw-content); color: var(--color-rose-700); } .code-highlight-wrapper .line.diff-remove:where(.dark, .dark *)::before { color: var(--color-rose-400); } .search-skel { animation: var(--animate-pulse); background-color: color-mix(in oklab, var(--color-base-300) 60%, transparent); border-radius: 0.25rem; } .search-skel:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-base-700) 50%, transparent); } .search-recent-icon { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; color: var(--color-base-500); } .search-page-group-title { min-width: calc(var(--spacing) * 0); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); font-size: 15px; --tw-leading: var(--leading-snug); line-height: var(--leading-snug); color: var(--color-base-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-page-group-title:where(.dark, .dark *) { color: var(--color-base-50); } .search-result[data-selected=true] .search-page-group-title { color: var(--color-base-950); } .search-result[data-selected=true] .search-page-group-title:where(.dark, .dark *) { color: var(--color-white); } .search-state-title { font-size: 16px; --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-base-900); margin-bottom: calc(var(--spacing) * 1.5); } .search-state-title:where(.dark, .dark *) { color: var(--color-base-50); } .markdown-alert a { text-decoration-line: underline; } .search-input-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--color-base-500); } .hljs-params { color: var(--color-amber-800); } .hljs-params:where(.dark, .dark *) { color: var(--color-amber-300); } .search-input { flex: 1; min-width: calc(var(--spacing) * 0); background-color: transparent; border-style: var(--tw-border-style); border-width: 0px; --tw-outline-style: none; outline-style: none; font-size: 17px; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-900); } .search-input:where(.dark, .dark *) { color: var(--color-base-50); } .markdown-alert-note { background-color: color-mix(in oklab, var(--color-sky-500) 8%, transparent); border-color: color-mix(in oklab, var(--color-sky-500) 22%, transparent); fill: var(--color-sky-700); } .markdown-alert-note:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent); border-color: color-mix(in oklab, var(--color-sky-500) 25%, transparent); fill: var(--color-sky-300); } .hljs-symbol { color: var(--color-rose-800); } .hljs-symbol:where(.dark, .dark *) { color: var(--color-rose-300); } .markdown-alert-caution .markdown-alert-title { color: var(--color-orange-800); } .markdown-alert-caution .markdown-alert-title:where(.dark, .dark *) { color: var(--color-orange-200); } .search-result-heading { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); font-size: 13.5px; --tw-leading: var(--leading-snug); line-height: var(--leading-snug); color: var(--color-base-600); } .search-result-heading:where(.dark, .dark *) { color: var(--color-base-400); } .pn-card-icon { color: color-mix(in oklch,var(--card-tint) 72%,var(--color-base-950)); fill: color-mix(in oklch,var(--card-tint) 28%,transparent); } .pn-card-icon:where(.dark, .dark *) { color: var(--card-tint); fill: color-mix(in oklch,var(--card-tint) 25%,var(--color-base-950)); } .code-highlight-wrapper pre.has-focused .line.focused { --tw-blur: blur(0); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); opacity: 100%; } .markdown-alert > ol { list-style-type: decimal; } .code-highlight-wrapper .word-highlight-message::selection { background-color: transparent; } .search-state { padding-inline: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 10); padding-bottom: calc(var(--spacing) * 9); text-align: center; } .code-highlight-wrapper pre.has-focused .line { --tw-blur: blur(0.05rem); 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,); opacity: 75%; } .code-highlight-wrapper .standalone-code-container { overflow-x: auto; } .hljs-meta { color: var(--color-base-800); } .hljs-meta:where(.dark, .dark *) { color: var(--color-base-300); } .search-esc-kbd { font-family: var(--font-mono); font-size: 11px; padding-inline: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 0.5); border-radius: var(--radius-md); color: var(--color-base-500); background-color: var(--color-base-100); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .search-esc-kbd:where(.dark, .dark *) { color: var(--color-base-400); background-color: var(--color-base-800); border-color: var(--color-base-700); } .search-modal { display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: calc(100vh - 6rem); overflow: hidden; border-radius: var(--radius-2xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-200); background-color: var(--color-base-50); color: var(--color-base-900); --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .search-modal:where(.dark, .dark *) { color-scheme: dark; border-color: var(--color-base-800); background-color: var(--color-base-900); color: var(--color-base-50); } .search-recent-chevron { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); margin-left: auto; flex-shrink: 0; color: var(--color-base-400); } .search-recent-chevron:where(.dark, .dark *) { color: var(--color-base-600); } .search-result-snippet { font-size: 12.5px; --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); color: var(--color-base-500); margin-top: calc(var(--spacing) * 0.5); } .search-result-snippet:where(.dark, .dark *) { color: var(--color-base-500); } .markdown-alert-title svg { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); flex-shrink: 0; } .search-empty-clear { text-transform: none; --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); font-size: 11.5px; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-500); cursor: pointer; } .search-empty-clear:hover { color: var(--color-base-800); } .search-empty-clear:where(.dark, .dark *):hover { color: var(--color-base-200); } .markdown-alert-important .markdown-alert-title { color: var(--color-primary-800); } .markdown-alert-important .markdown-alert-title:where(.dark, .dark *) { color: var(--color-primary-200); } .search-nr-btn-primary { background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent); border-color: color-mix(in oklab, var(--color-primary-400) 35%, transparent); color: var(--color-primary-700); } .search-nr-btn-primary:where(.dark, .dark *) { color: var(--color-primary-200); } .code-highlight-wrapper .line:has(.word-highlight-wrapper) { margin-bottom: calc(var(--spacing) * 12); } .hljs-class { color: var(--color-sky-800); } .hljs-class:where(.dark, .dark *) { color: var(--color-sky-300); } .search-input-row { display: flex; align-items: center; gap: calc(var(--spacing) * 3.5); padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 4); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-base-200); } .search-input-row:where(.dark, .dark *) { border-color: var(--color-base-800); } .tab-panel { display: none; } .tab-panel[data-selected="true"] { display: block; } .search-result[data-selected=true] { background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent); --tw-shadow: inset 2px 0 0 var(--color-primary-500); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .search-result[data-selected=true][data-selected=true]:where(.dark, .dark *) { --tw-shadow: inset 2px 0 0 var(--color-primary-300); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hljs-type { color: var(--color-base-700); } .hljs-type:where(.dark, .dark *) { color: var(--color-base-300); } .hljs-addition { color: var(--color-green-800); } .hljs-addition:where(.dark, .dark *) { color: var(--color-green-300); } .search-result-breadcrumb { display: flex; align-items: center; gap: calc(var(--spacing) * 1); flex-wrap: wrap; font-size: 11px; color: var(--color-base-400); margin-bottom: calc(var(--spacing) * 0.5); } .search-result-breadcrumb:where(.dark, .dark *) { color: var(--color-base-500); } .hljs-function { color: var(--color-amber-800); } .hljs-function:where(.dark, .dark *) { color: var(--color-amber-300); } .ctabs { margin-block: calc(var(--spacing) * 7); } .markdown-alert > p { margin: calc(var(--spacing) * 0); } .search-page-group { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: color-mix(in oklab, var(--color-base-200) 60%, transparent); padding-block: calc(var(--spacing) * 1.5); } .search-page-group:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } .search-page-group:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-base-800) 60%, transparent); } .search-powered { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); } .code-highlight-wrapper { margin-block: calc(var(--spacing) * 6); border-radius: var(--radius-xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-200); background-color: var(--color-base-50); overflow: hidden; } .code-highlight-wrapper:where(.dark, .dark *) { background-color: var(--color-base-900); border-color: var(--color-base-800); } .search-state-icon { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); margin-inline: auto; margin-bottom: calc(var(--spacing) * 4); border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: center; background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent); border-style: var(--tw-border-style); border-width: 1px; border-color: color-mix(in oklab, var(--color-primary-400) 20%, transparent); color: var(--color-primary-600); } .search-state-icon:where(.dark, .dark *) { color: var(--color-primary-300); } .search-page-group-title.is-mono { font-family: var(--font-mono); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); font-size: 13.5px; --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .search-dot[data-area=tutorials] { background-color: var(--color-sky-400); } .hljs-regexp { color: var(--color-emerald-800); } .hljs-regexp:where(.dark, .dark *) { color: var(--color-emerald-300); } .hljs-name { color: var(--color-rose-800); } .hljs-name:where(.dark, .dark *) { color: var(--color-rose-300); } .markdown-alert-checkpoint { background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent); border-color: color-mix(in oklab, var(--color-primary-500) 22%, transparent); fill: var(--color-primary-700); } .markdown-alert-checkpoint:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent); border-color: color-mix(in oklab, var(--color-primary-500) 25%, transparent); fill: var(--color-primary-300); } .markdown-alert-tip .markdown-alert-title { color: var(--color-emerald-800); } .markdown-alert-tip .markdown-alert-title:where(.dark, .dark *) { color: var(--color-emerald-200); } .markdown-alert-checkpoint .markdown-alert-title { color: var(--color-primary-800); } .markdown-alert-checkpoint .markdown-alert-title:where(.dark, .dark *) { color: var(--color-primary-200); } .hljs-deletion { color: var(--color-red-800); } .hljs-deletion:where(.dark, .dark *) { color: var(--color-red-300); } .markdown-alert { margin-block: calc(var(--spacing) * 6); padding: calc(var(--spacing) * 4); border-radius: 10px; border-style: var(--tw-border-style); border-width: 1px; font-size: 14.5px; --tw-leading: 1.6; line-height: 1.6; color: var(--color-base-700); } .markdown-alert:where(.dark, .dark *) { color: var(--color-base-300); } .hljs-attr { color: var(--color-rose-800); } .hljs-attr:where(.dark, .dark *) { color: var(--color-rose-300); } } @layer utilities { .prose { max-width: 65ch; font-size: 1rem; line-height: 1.75; --tw-prose-body: oklch(37.3% 0.034 259.733); --tw-prose-invert-body: oklch(87.2% 0.01 258.338); --tw-prose-headings: oklch(21% 0.034 264.665); --tw-prose-invert-headings: #fff; --tw-prose-lead: oklch(44.6% 0.03 256.802); --tw-prose-invert-lead: oklch(70.7% 0.022 261.325); --tw-prose-links: oklch(21% 0.034 264.665); --tw-prose-invert-links: #fff; --tw-prose-bold: oklch(21% 0.034 264.665); --tw-prose-invert-bold: #fff; --tw-prose-counters: oklch(55.1% 0.027 264.364); --tw-prose-invert-counters: oklch(70.7% 0.022 261.325); --tw-prose-bullets: oklch(87.2% 0.01 258.338); --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802); --tw-prose-hr: oklch(92.8% 0.006 264.531); --tw-prose-invert-hr: oklch(37.3% 0.034 259.733); --tw-prose-quotes: oklch(21% 0.034 264.665); --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542); --tw-prose-quote-borders: oklch(92.8% 0.006 264.531); --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733); --tw-prose-captions: oklch(55.1% 0.027 264.364); --tw-prose-invert-captions: oklch(70.7% 0.022 261.325); --tw-prose-kbd: oklch(21% 0.034 264.665); --tw-prose-invert-kbd: #fff; --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent); --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%); --tw-prose-code: oklch(21% 0.034 264.665); --tw-prose-invert-code: #fff; --tw-prose-pre-code: oklch(92.8% 0.006 264.531); --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338); --tw-prose-pre-bg: oklch(27.8% 0.033 256.848); --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-th-borders: oklch(87.2% 0.01 258.338); --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802); --tw-prose-td-borders: oklch(92.8% 0.006 264.531); --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733); color: var(--tw-prose-body); } .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; text-wrap: pretty; } .prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; color: var(--tw-prose-lead); } .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--color-emerald-700); text-decoration: underline; font-weight: 500; text-decoration-line: underline; text-underline-offset: 3px; } .prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--color-slate-900); font-weight: 600; } .prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; } .prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; list-style-type: decimal; } .prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; list-style-type: disc; } .prose :where(ol > li::marker):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 400; color: var(--tw-prose-counters); } .prose :where(ul > li::marker):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-bullets); } .prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; color: var(--tw-prose-headings); font-weight: 600; } .prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 3em; margin-bottom: 3em; border-color: var(--tw-prose-hr); border-top-width: 1px; border: 0; border-top: 1px solid var(--color-slate-200); margin: 3rem 0; } .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; border-inline-start-width: 0.25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; font-style: italic; font-weight: 500; color: var(--tw-prose-quotes); border-left-width: 4px; padding-left: 1rem; border-color: var(--color-slate-300); } .prose :where(blockquote p:first-of-type::before):not(:where([class~="not-prose"],[class~="not-prose"] *)) { content: open-quote; } .prose :where(blockquote p:last-of-type::after):not(:where([class~="not-prose"],[class~="not-prose"] *)) { content: close-quote; } .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; color: var(--tw-prose-headings); font-weight: 800; } .prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-weight: 900; } .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; color: var(--tw-prose-headings); font-weight: 700; scroll-margin-top: 5rem; } .prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-weight: 800; } .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; color: var(--tw-prose-headings); font-weight: 600; scroll-margin-top: 5rem; } .prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-weight: 700; } .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; color: var(--tw-prose-headings); font-weight: 600; } .prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-weight: 700; } .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { display: block; margin-top: 2em; margin-bottom: 2em; } .prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-inline-end: 0.375em; padding-bottom: 0.1875em; padding-inline-start: 0.375em; font-family: inherit; color: var(--tw-prose-kbd); font-weight: 500; box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows); } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 0.875em; color: var(--tw-prose-code); font-weight: 400; } .prose :where(code::before):not(:where([class~="not-prose"],[class~="not-prose"] *)) { content: "`"; } .prose :where(code::after):not(:where([class~="not-prose"],[class~="not-prose"] *)) { content: "`"; } .prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.875em; } .prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.9em; } .prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.4rem; padding-top: 0.8571429em; padding-inline-end: 1.1428571em; padding-bottom: 0.8571429em; padding-inline-start: 1.1428571em; color: var(--tw-prose-pre-code); background-color: var(--color-slate-100); overflow-x: auto; font-weight: 400; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } .prose :where(pre code::before):not(:where([class~="not-prose"],[class~="not-prose"] *)) { content: none; } .prose :where(pre code::after):not(:where([class~="not-prose"],[class~="not-prose"] *)) { content: none; } .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0.375em; } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0.375em; } .prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; padding-inline-start: 1.625em; color: var(--tw-prose-body); } .prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { width: 100%; table-layout: auto; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; } .prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } .prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } .prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 0; } .prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: baseline; } .prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } .prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: top; } .prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { text-align: start; } .prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0; } .prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-end: 0; } .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-top: 0.5714286em; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0; } .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-end: 0; } .prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; color: var(--tw-prose-captions); } .prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 0; } .prose :where(pre > code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: inherit; } .prose :where(:not(pre) > code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-size: 0.86em; } .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .-top-0\.5 { top: calc(var(--spacing) * -0.5); } .top-0 { top: calc(var(--spacing) * 0); } .top-\[62px\] { top: 62px; } .top-full { top: 100%; } .-left-10 { left: calc(var(--spacing) * -10); } .left-0 { left: calc(var(--spacing) * 0); } .z-10 { z-index: 10; } .z-50 { z-index: 50; } .z-\[4\] { z-index: 4; } .col-start-2 { grid-column-start: 2; } .m-0 { margin: calc(var(--spacing) * 0); } .m-1 { margin: calc(var(--spacing) * 1); } .m-97 { margin: calc(var(--spacing) * 97); } .m\[0\] { margin: 0; } .m\[1\] { margin: 1; } .-mx-5 { margin-inline: calc(var(--spacing) * -5); } .mx-1 { margin-inline: calc(var(--spacing) * 1); } .mx-1\.5 { margin-inline: calc(var(--spacing) * 1.5); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-auto { margin-inline: auto; } .my-0 { margin-block: calc(var(--spacing) * 0); } .my-0\.5 { margin-block: calc(var(--spacing) * 0.5); } .my-4 { margin-block: calc(var(--spacing) * 4); } .my-6 { margin-block: calc(var(--spacing) * 6); } .my-7 { margin-block: calc(var(--spacing) * 7); } .my-8 { margin-block: calc(var(--spacing) * 8); } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-9 { margin-top: calc(var(--spacing) * 9); } .-mb-px { margin-bottom: -1px; } .mb-0 { margin-bottom: calc(var(--spacing) * 0); } .mb-0\.5 { margin-bottom: calc(var(--spacing) * 0.5); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-3\.5 { margin-bottom: calc(var(--spacing) * 3.5); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-\[11px\] { margin-bottom: 11px; } .mb-\[15px\] { margin-bottom: 15px; } .mb-\[22px\] { margin-bottom: 22px; } .mb-\[26px\] { margin-bottom: 26px; } .mb-\[30px\] { margin-bottom: 30px; } .mb-\[72px\] { margin-bottom: 72px; } .ml-1\.5 { margin-left: calc(var(--spacing) * 1.5); } .ml-2\.5 { margin-left: calc(var(--spacing) * 2.5); } .ml-auto { margin-left: auto; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .none { display: none; } .table { display: table; } .table-row { display: table-row; } .table-row-group { display: table-row-group; } .h-12 { height: calc(var(--spacing) * 12); } .h-4 { height: calc(var(--spacing) * 4); } .h-6 { height: calc(var(--spacing) * 6); } .h-8 { height: calc(var(--spacing) * 8); } .h-\[1\.15rem\] { height: 1.15rem; } .h-\[11px\] { height: 11px; } .h-\[18px\] { height: 18px; } .h-\[19px\] { height: 19px; } .h-\[34px\] { height: 34px; } .h-\[38px\] { height: 38px; } .h-\[5px\] { height: 5px; } .h-\[62px\] { height: 62px; } .h-\[7px\] { height: 7px; } .h-\[calc\(100vh-62px\)\] { height: calc(100vh - 62px); } .max-h-\[calc\(100vh-62px\)\] { max-height: calc(100vh - 62px); } .max-h-\[calc\(100vh-6rem\)\] { max-height: calc(100vh - 6rem); } .min-h-0 { min-height: calc(var(--spacing) * 0); } .min-h-\[132px\] { min-height: 132px; } .min-h-\[150px\] { min-height: 150px; } .min-h-\[300px\] { min-height: 300px; } .min-h-\[450px\] { min-height: 450px; } .container { @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } width: 100%; } .w-12 { width: calc(var(--spacing) * 12); } .w-4 { width: calc(var(--spacing) * 4); } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-\[1\.15rem\] { width: 1.15rem; } .w-\[11px\] { width: 11px; } .w-\[18px\] { width: 18px; } .w-\[19px\] { width: 19px; } .w-\[34px\] { width: 34px; } .w-\[38px\] { width: 38px; } .w-\[5px\] { width: 5px; } .w-\[7px\] { width: 7px; } .w-\[calc\(100\%\+2\.5rem\)\] { width: calc(100% + 2.5rem); } .w-full { width: 100%; } .max-w-\[1180px\] { max-width: 1180px; } .max-w-\[1240px\] { max-width: 1240px; } .max-w-\[240px\] { max-width: 240px; } .max-w-\[30rem\] { max-width: 30rem; } .max-w-\[460px\] { max-width: 460px; } .max-w-\[480px\] { max-width: 480px; } .max-w-\[540px\] { max-width: 540px; } .max-w-\[600px\] { max-width: 600px; } .max-w-\[720px\] { max-width: 720px; } .max-w-\[760px\] { max-width: 760px; } .max-w-none { max-width: none; } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-\[180px\] { min-width: 180px; } .min-w-full { min-width: 100%; } .flex-1 { flex: 1; } .flex-none { flex: none; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .transform { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } .animate-pulse { animation: var(--animate-pulse); } .cursor-pointer { cursor: pointer; } .resize { resize: both; } .list-outside { list-style-position: outside; } .list-decimal { list-style-type: decimal; } .list-disc { list-style-type: disc; } .appearance-auto { appearance: auto; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-\[1\.1rem_1fr\] { grid-template-columns: 1.1rem 1fr; } .grid-cols-\[1\.4fr_1fr_1fr_1fr\] { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .grid-cols-\[230px_1fr\] { grid-template-columns: 230px 1fr; } .grid-cols-\[250px_1fr\] { grid-template-columns: 250px 1fr; } .grid-cols-\[minmax\(0\,0\.92fr\)_minmax\(0\,1\.08fr\)\] { grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); } .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.9fr\)\] { grid-template-columns: minmax(0,1fr) minmax(0,1.9fr); } .grid-cols-\[repeat\(auto-fill\,minmax\(240px\,1fr\)\)\] { grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); } .grid-cols-\[repeat\(auto-fill\,minmax\(460px\,1fr\)\)\] { grid-template-columns: repeat(auto-fill,minmax(460px,1fr)); } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-12 { gap: calc(var(--spacing) * 12); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-2\.5 { gap: calc(var(--spacing) * 2.5); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-3\.5 { gap: calc(var(--spacing) * 3.5); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-\[11px\] { gap: 11px; } .gap-\[22px\] { gap: 22px; } .gap-\[26px\] { gap: 26px; } .gap-\[30px\] { gap: 30px; } .gap-\[3px\] { gap: 3px; } .gap-\[52px\] { gap: 52px; } .gap-\[7px\] { gap: 7px; } .gap-\[9px\] { gap: 9px; } .gap-px { gap: 1px; } .gap-x-12 { column-gap: calc(var(--spacing) * 12); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .self-start { align-self: flex-start; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-\[10px\] { border-radius: 10px; } .rounded-\[11px\] { border-radius: 11px; } .rounded-\[14px\] { border-radius: 14px; } .rounded-\[3px\] { border-radius: 3px; } .rounded-\[9px\] { border-radius: 9px; } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-none { border-radius: 0; } .rounded-xl { border-radius: var(--radius-xl); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .border-\[1\.5px\] { border-style: var(--tw-border-style); border-width: 1.5px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-\[color-mix\(in_oklch\,var\(--card-tint\)_30\%\,transparent\)\] { border-color: color-mix(in oklch,var(--card-tint) 30%,transparent); } .border-amber-400\/30 { border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent); } .border-base-100 { border-color: var(--color-base-100); } .border-base-200 { border-color: var(--color-base-200); } .border-base-200\/60 { border-color: color-mix(in oklab, var(--color-base-200) 60%, transparent); } .border-base-300 { border-color: var(--color-base-300); } .border-base-300\/50 { border-color: color-mix(in oklab, var(--color-base-300) 50%, transparent); } .border-primary-300 { border-color: var(--color-primary-300); } .border-primary-400\/20 { border-color: color-mix(in oklab, var(--color-primary-400) 20%, transparent); } .border-primary-400\/35 { border-color: color-mix(in oklab, var(--color-primary-400) 35%, transparent); } .border-primary-500\/22 { border-color: color-mix(in oklab, var(--color-primary-500) 22%, transparent); } .border-primary-500\/50 { border-color: color-mix(in oklab, var(--color-primary-500) 50%, transparent); } .border-primary-600 { border-color: var(--color-primary-600); } .border-transparent { border-color: transparent; } .bg-\[\#5fb866\] { background-color: #5fb866; } .bg-\[\#e0b341\] { background-color: #e0b341; } .bg-\[\#e6685b\] { background-color: #e6685b; } .bg-\[color-mix\(in_oklch\,var\(--card-tint\)_10\%\,transparent\)\] { background-color: color-mix(in oklch,var(--card-tint) 10%,transparent); } .bg-amber-300\/50 { background-color: color-mix(in oklab, var(--color-amber-300) 50%, transparent); } .bg-amber-400 { background-color: var(--color-amber-400); } .bg-amber-500\/15 { background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent); } .bg-base-100 { background-color: var(--color-base-100); } .bg-base-100\/60 { background-color: color-mix(in oklab, var(--color-base-100) 60%, transparent); } .bg-base-200\/25 { background-color: color-mix(in oklab, var(--color-base-200) 25%, transparent); } .bg-base-300\/60 { background-color: color-mix(in oklab, var(--color-base-300) 60%, transparent); } .bg-base-50 { background-color: var(--color-base-50); } .bg-base-500 { background-color: var(--color-base-500); } .bg-base-500\/15 { background-color: color-mix(in oklab, var(--color-base-500) 15%, transparent); } .bg-base-700\/30 { background-color: color-mix(in oklab, var(--color-base-700) 30%, transparent); } .bg-emerald-400 { background-color: var(--color-emerald-400); } .bg-emerald-500\/10 { background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent); } .bg-emerald-500\/15 { background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent); } .bg-pink-400 { background-color: var(--color-pink-400); } .bg-pink-500\/15 { background-color: color-mix(in oklab, var(--color-pink-500) 15%, transparent); } .bg-primary-100\/25 { background-color: color-mix(in oklab, var(--color-primary-100) 25%, transparent); } .bg-primary-400 { background-color: var(--color-primary-400); } .bg-primary-50 { background-color: var(--color-primary-50); } .bg-primary-500\/10 { background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent); } .bg-primary-500\/15 { background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent); } .bg-primary-500\/20 { background-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent); } .bg-primary-500\/8 { background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent); } .bg-primary-600 { background-color: var(--color-primary-600); } .bg-primary-700\/15 { background-color: color-mix(in oklab, var(--color-primary-700) 15%, transparent); } .bg-red-300\/50 { background-color: color-mix(in oklab, var(--color-red-300) 50%, transparent); } .bg-rose-500\/10 { background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent); } .bg-sky-400 { background-color: var(--color-sky-400); } .bg-sky-500\/15 { background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent); } .bg-transparent { background-color: transparent; } .bg-white { background-color: var(--color-white); } .bg-white\/85 { background-color: color-mix(in oklab, var(--color-white) 85%, transparent); } .fill-\[color-mix\(in_oklch\,var\(--card-tint\)_28\%\,transparent\)\] { fill: color-mix(in oklch,var(--card-tint) 28%,transparent); } .fill-primary-700 { fill: var(--color-primary-700); } .\!p\[4\] { padding: 4 !important; } .p-4 { padding: calc(var(--spacing) * 4); } .p-6 { padding: calc(var(--spacing) * 6); } .p\[10\] { padding: 10; } .p\[11\] { padding: 11; } .p-\[18px\] { padding: 18px; } .p\[1\] { padding: 1; } .p\[3\] { padding: 3; } .p\[4\] { padding: 4; } .p\[5\] { padding: 5; } .p\[6\] { padding: 6; } .p\[7\] { padding: 7; } .p\[9\] { padding: 9; } .px-0\.5 { padding-inline: calc(var(--spacing) * 0.5); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-3\.5 { padding-inline: calc(var(--spacing) * 3.5); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .px-\[0\.35rem\] { padding-inline: 0.35rem; } .px-\[11px\] { padding-inline: 11px; } .px-\[13px\] { padding-inline: 13px; } .px-\[14px\] { padding-inline: 14px; } .px-\[15px\] { padding-inline: 15px; } .px-\[7px\] { padding-inline: 7px; } .px-\[9px\] { padding-inline: 9px; } .py-0 { padding-block: calc(var(--spacing) * 0); } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-11 { padding-block: calc(var(--spacing) * 11); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-20 { padding-block: calc(var(--spacing) * 20); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-3\.5 { padding-block: calc(var(--spacing) * 3.5); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-\[11px\] { padding-block: 11px; } .py-\[13px\] { padding-block: 13px; } .py-\[14px\] { padding-block: 14px; } .py-\[18px\] { padding-block: 18px; } .py-\[34px\] { padding-block: 34px; } .py-\[3px\] { padding-block: 3px; } .py-\[72px\] { padding-block: 72px; } .py-\[7px\] { padding-block: 7px; } .py-\[9px\] { padding-block: 9px; } .py-px { padding-block: 1px; } .pt-1 { padding-top: calc(var(--spacing) * 1); } .pt-1\.5 { padding-top: calc(var(--spacing) * 1.5); } .pt-10 { padding-top: calc(var(--spacing) * 10); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-\[14px\] { padding-top: 14px; } .pt-\[18px\] { padding-top: 18px; } .pt-\[4\.5rem\] { padding-top: 4.5rem; } .pt-\[44px\] { padding-top: 44px; } .pt-\[5px\] { padding-top: 5px; } .pt-\[78px\] { padding-top: 78px; } .pr-4 { padding-right: calc(var(--spacing) * 4); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-16 { padding-bottom: calc(var(--spacing) * 16); } .pb-3\.5 { padding-bottom: calc(var(--spacing) * 3.5); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } .pb-9 { padding-bottom: calc(var(--spacing) * 9); } .pb-\[13px\] { padding-bottom: 13px; } .pb-\[60px\] { padding-bottom: 60px; } .pb-\[90px\] { padding-bottom: 90px; } .pb-\[9px\] { padding-bottom: 9px; } .pl-10 { padding-left: calc(var(--spacing) * 10); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-5 { padding-left: calc(var(--spacing) * 5); } .text-center { text-align: center; } .text-left { text-align: left; } .font-mono { font-family: var(--font-mono); } .font-sans { font-family: var(--font-sans); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-\[0\.62rem\] { font-size: 0.62rem; } .text-\[0\.65rem\] { font-size: 0.65rem; } .text-\[0\.72rem\] { font-size: 0.72rem; } .text-\[0\.7rem\] { font-size: 0.7rem; } .text-\[0\.86em\] { font-size: 0.86em; } .text-\[0\.9rem\] { font-size: 0.9rem; } .text-\[10\.5px\] { font-size: 10.5px; } .text-\[11\.5px\] { font-size: 11.5px; } .text-\[11px\] { font-size: 11px; } .text-\[12\.5px\] { font-size: 12.5px; } .text-\[12px\] { font-size: 12px; } .text-\[13\.5px\] { font-size: 13.5px; } .text-\[13px\] { font-size: 13px; } .text-\[14\.5px\] { font-size: 14.5px; } .text-\[14px\] { font-size: 14px; } .text-\[15\.5px\] { font-size: 15.5px; } .text-\[15px\] { font-size: 15px; } .text-\[16px\] { font-size: 16px; } .text-\[17px\] { font-size: 17px; } .text-\[40px\] { font-size: 40px; } .text-\[54px\] { font-size: 54px; } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .leading-\[1\.04\] { --tw-leading: 1.04; line-height: 1.04; } .leading-\[1\.2\] { --tw-leading: 1.2; line-height: 1.2; } .leading-\[1\.35\] { --tw-leading: 1.35; line-height: 1.35; } .leading-\[1\.3\] { --tw-leading: 1.3; line-height: 1.3; } .leading-\[1\.65\] { --tw-leading: 1.65; line-height: 1.65; } .leading-\[1\.6\] { --tw-leading: 1.6; line-height: 1.6; } .leading-\[1\.75\] { --tw-leading: 1.75; line-height: 1.75; } .leading-\[1\.85\] { --tw-leading: 1.85; line-height: 1.85; } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[-0\.01em\] { --tw-tracking: -0.01em; letter-spacing: -0.01em; } .tracking-\[-0\.025em\] { --tw-tracking: -0.025em; letter-spacing: -0.025em; } .tracking-\[-0\.02em\] { --tw-tracking: -0.02em; letter-spacing: -0.02em; } .tracking-\[0\.04em\] { --tw-tracking: 0.04em; letter-spacing: 0.04em; } .tracking-\[0\.08em\] { --tw-tracking: 0.08em; letter-spacing: 0.08em; } .tracking-\[0\.15em\] { --tw-tracking: 0.15em; letter-spacing: 0.15em; } .tracking-\[0\.1em\] { --tw-tracking: 0.1em; letter-spacing: 0.1em; } .tracking-normal { --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .text-wrap { text-wrap: wrap; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .placeholder-base-500 { &::placeholder { color: var(--color-base-500); } } .text-\[color-mix\(in_oklch\,var\(--card-tint\)_72\%\,var\(--color-base-950\)\)\] { color: color-mix(in oklch,var(--card-tint) 72%,var(--color-base-950)); } .text-\[color-mix\(in_oklch\,var\(--card-tint\)_88\%\,var\(--color-base-950\)\)\] { color: color-mix(in oklch,var(--card-tint) 88%,var(--color-base-950)); } .text-amber-600 { color: var(--color-amber-600); } .text-amber-800 { color: var(--color-amber-800); } .text-base-300 { color: var(--color-base-300); } .text-base-400 { color: var(--color-base-400); } .text-base-500 { color: var(--color-base-500); } .text-base-600 { color: var(--color-base-600); } .text-base-700 { color: var(--color-base-700); } .text-base-800 { color: var(--color-base-800); } .text-base-900 { color: var(--color-base-900); } .text-base-950 { color: var(--color-base-950); } .text-blue-800 { color: var(--color-blue-800); } .text-emerald-700 { color: var(--color-emerald-700); } .text-green-800 { color: var(--color-green-800); } .text-pink-700 { color: var(--color-pink-700); } .text-primary-600 { color: var(--color-primary-600); } .text-primary-700 { color: var(--color-primary-700); } .text-primary-800 { color: var(--color-primary-800); } .text-red-800 { color: var(--color-red-800); } .text-sky-700 { color: var(--color-sky-700); } .text-white { color: var(--color-white); } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .underline { text-decoration-line: underline; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .opacity-100 { opacity: 100%; } .opacity-60 { opacity: 60%; } .opacity-75 { opacity: 75%; } .ring { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-4 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_12px_40px_-16px_rgba\(20\,45\,35\,0\.12\)\] { --tw-shadow: 0 12px 40px -16px rgba(20,45,35,0.12); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[inset_2px_0_0_var\(--color-emerald-600\)\] { --tw-shadow: inset 2px 0 0 var(--color-emerald-600); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[inset_2px_0_0_var\(--color-primary-500\)\] { --tw-shadow: inset 2px 0 0 var(--color-primary-500); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[inset_2px_0_0_var\(--color-rose-600\)\] { --tw-shadow: inset 2px 0 0 var(--color-rose-600); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-base-50 { --tw-ring-color: var(--color-base-50); } .blur { --tw-blur: blur(8px); 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,); } .blur-\[0\.05rem\] { --tw-blur: blur(0.05rem); 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,); } .blur-\[0\] { --tw-blur: blur(0); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .invert { --tw-invert: invert(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .backdrop-blur-md { --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,); } .backdrop-blur-sm { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-saturate-150 { --tw-backdrop-saturate: saturate(150%); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .\[0-9a-z\5c -\#\3b \/\3f \:\@\&\=\+\24 \,_\.\!\~\*\'\(\)\5c \[\5c \]\] { 0-9a-z\-#;/?: @&=+$, .!~*'()\[\]; } .\[scrollbar-width\:none\] { scrollbar-width: none; } .outline-none { --tw-outline-style: none; outline-style: none; } .scrollbar-color { scrollbar-color: var(--tw-scrollbar-thumb-color) var(--tw-scrollbar-track-color); } .scrollbar-thin { scrollbar-width: thin; } .scrollbar-track-transparent { --tw-scrollbar-track-color: transparent; } .select-none { -webkit-user-select: none; user-select: none; } .hover\:-translate-y-px:hover { --tw-translate-y: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } .hover\:border-base-300:hover { border-color: var(--color-base-300); } .hover\:bg-\[color-mix\(in_oklch\,var\(--card-tint\)_20\%\,transparent\)\]:hover { background-color: color-mix(in oklch,var(--card-tint) 20%,transparent); } .hover\:bg-base-100\/70:hover { background-color: color-mix(in oklab, var(--color-base-100) 70%, transparent); } .hover\:bg-base-50:hover { background-color: var(--color-base-50); } .hover\:bg-primary-700:hover { background-color: var(--color-primary-700); } .hover\:text-base-600:hover { color: var(--color-base-600); } .hover\:text-base-800:hover { color: var(--color-base-800); } .hover\:text-base-900:hover { color: var(--color-base-900); } .hover\:underline:hover { text-decoration-line: underline; } .disabled\:pointer-events-none:disabled { pointer-events: none; } .disabled\:opacity-50:disabled { opacity: 50%; } .data-\[active\=true\]\:block[data-active="true"] { display: block; } .data-\[selected\=true\]\:block[data-selected="true"] { display: block; } .data-\[active\=true\]\:border-primary-600[data-active="true"] { border-color: var(--color-primary-600); } .data-\[selected\=true\]\:border-primary-600[data-selected="true"] { border-color: var(--color-primary-600); } .data-\[active\=true\]\:text-primary-700[data-active="true"] { color: var(--color-primary-700); } .data-\[selected\=true\]\:text-primary-700[data-selected="true"] { color: var(--color-primary-700); } .\[\&\>\:first-child\]\:mt-0 { &>:first-child { margin-top: calc(var(--spacing) * 0); } } .\[\&\>\:last-child\]\:mb-0 { &>:last-child { margin-bottom: calc(var(--spacing) * 0); } } .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { display: none; } .last\:border-b-0:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } .last\:pb-1:last-child { padding-bottom: calc(var(--spacing) * 1); } .before\:absolute::before { content: var(--tw-content); position: absolute; } .before\:top-3::before { content: var(--tw-content); top: calc(var(--spacing) * 3); } .before\:bottom-3::before { content: var(--tw-content); bottom: calc(var(--spacing) * 3); } .before\:left-1::before { content: var(--tw-content); left: calc(var(--spacing) * 1); } .before\:left-4::before { content: var(--tw-content); left: calc(var(--spacing) * 4); } .before\:w-0\.5::before { content: var(--tw-content); width: calc(var(--spacing) * 0.5); } .before\:rounded-full::before { content: var(--tw-content); border-radius: calc(infinity * 1px); } .before\:bg-base-200::before { content: var(--tw-content); background-color: var(--color-base-200); } .before\:font-semibold::before { content: var(--tw-content); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .before\:text-emerald-700::before { content: var(--tw-content); color: var(--color-emerald-700); } .before\:text-rose-700::before { content: var(--tw-content); color: var(--color-rose-700); } .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); } .marker\:text-base-500\/60::marker { color: color-mix(in oklab, var(--color-base-500) 60%, transparent); } @media (min-width: 768px) { .md\:px-5 { padding-inline: calc(var(--spacing) * 5); } } @media (min-width: 1024px) { .lg\:sticky { position: sticky; } .lg\:top-\[62px\] { top: 62px; } .lg\:mt-0 { margin-top: calc(var(--spacing) * 0); } .lg\:block { display: block; } .lg\:hidden { display: none; } .lg\:max-h-\[calc\(100vh-62px\)\] { max-height: calc(100vh - 62px); } .lg\:overflow-y-auto { overflow-y: auto; } .lg\:py-\[1px\] { padding-block: 1px; } .lg\:py-\[34px\] { padding-block: 34px; } } @media not all and (min-width: 64rem) { .max-lg\:hidden { display: none; } .max-lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media not all and (min-width: 48rem) { .max-md\:hidden { display: none; } .max-md\:inline-flex { display: inline-flex; } .max-md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .max-md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .max-md\:grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } } @media not all and (min-width: 820px) { .max-\[820px\]\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .max-\[820px\]\:pt-12 { padding-top: calc(var(--spacing) * 12); } } @media not all and (min-width: 40rem) { .max-sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .max-sm\:px-5 { padding-inline: calc(var(--spacing) * 5); } } .dark\:prose-invert:where(.dark, .dark *) { --tw-prose-body: var(--tw-prose-invert-body); --tw-prose-headings: var(--tw-prose-invert-headings); --tw-prose-lead: var(--tw-prose-invert-lead); --tw-prose-links: var(--tw-prose-invert-links); --tw-prose-bold: var(--tw-prose-invert-bold); --tw-prose-counters: var(--tw-prose-invert-counters); --tw-prose-bullets: var(--tw-prose-invert-bullets); --tw-prose-hr: var(--tw-prose-invert-hr); --tw-prose-quotes: var(--tw-prose-invert-quotes); --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders); --tw-prose-captions: var(--tw-prose-invert-captions); --tw-prose-kbd: var(--tw-prose-invert-kbd); --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows); --tw-prose-code: var(--tw-prose-invert-code); --tw-prose-pre-code: var(--tw-prose-invert-pre-code); --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg); --tw-prose-th-borders: var(--tw-prose-invert-th-borders); --tw-prose-td-borders: var(--tw-prose-invert-td-borders); } .dark\:prose-invert:where(.dark, .dark *) :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--color-emerald-300); } .dark\:prose-invert:where(.dark, .dark *) :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--color-slate-50); } .dark\:prose-invert:where(.dark, .dark *) :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-top-color: var(--color-slate-800); } .dark\:prose-invert:where(.dark, .dark *) :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-color: var(--color-slate-700); } .dark\:prose-invert:where(.dark, .dark *) :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { background-color: var(--color-slate-800); } .dark\:block:where(.dark, .dark *) { display: block; } .dark\:hidden:where(.dark, .dark *) { display: none; } .dark\:border-\[color-mix\(in_oklch\,var\(--card-tint\)_30\%\,transparent\)\]:where(.dark, .dark *) { border-color: color-mix(in oklch,var(--card-tint) 30%,transparent); } .dark\:border-base-700:where(.dark, .dark *) { border-color: var(--color-base-700); } .dark\:border-base-700\/40:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-base-700) 40%, transparent); } .dark\:border-base-800:where(.dark, .dark *) { border-color: var(--color-base-800); } .dark\:border-base-800\/60:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-base-800) 60%, transparent); } .dark\:border-base-800\/70:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-base-800) 70%, transparent); } .dark\:border-primary-300\/25:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-primary-300) 25%, transparent); } .dark\:border-primary-300\/40:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-primary-300) 40%, transparent); } .dark\:border-primary-500:where(.dark, .dark *) { border-color: var(--color-primary-500); } .dark\:border-primary-500\/25:where(.dark, .dark *) { border-color: color-mix(in oklab, var(--color-primary-500) 25%, transparent); } .dark\:bg-\[color-mix\(in_oklch\,var\(--card-tint\)_12\%\,transparent\)\]:where(.dark, .dark *) { background-color: color-mix(in oklch,var(--card-tint) 12%,transparent); } .dark\:bg-amber-400\/20:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent); } .dark\:bg-base-700\/50:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-base-700) 50%, transparent); } .dark\:bg-base-800:where(.dark, .dark *) { background-color: var(--color-base-800); } .dark\:bg-base-900:where(.dark, .dark *) { background-color: var(--color-base-900); } .dark\:bg-base-900\/50:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-base-900) 50%, transparent); } .dark\:bg-base-950:where(.dark, .dark *) { background-color: var(--color-base-950); } .dark\:bg-base-950\/70:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-base-950) 70%, transparent); } .dark\:bg-base-950\/85:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-base-950) 85%, transparent); } .dark\:bg-emerald-500\/15:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent); } .dark\:bg-primary-400:where(.dark, .dark *) { background-color: var(--color-primary-400); } .dark\:bg-primary-500:where(.dark, .dark *) { background-color: var(--color-primary-500); } .dark\:bg-primary-500\/10:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent); } .dark\:bg-primary-500\/15:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent); } .dark\:bg-primary-700\/20:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-primary-700) 20%, transparent); } .dark\:bg-primary-950\/40:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-primary-950) 40%, transparent); } .dark\:bg-red-500\/20:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); } .dark\:bg-rose-500\/15:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent); } .dark\:bg-transparent:where(.dark, .dark *) { background-color: transparent; } .dark\:fill-\[color-mix\(in_oklch\,var\(--card-tint\)_25\%\,var\(--color-base-950\)\)\]:where(.dark, .dark *) { fill: color-mix(in oklch,var(--card-tint) 25%,var(--color-base-950)); } .dark\:fill-primary-300:where(.dark, .dark *) { fill: var(--color-primary-300); } .dark\:text-\[color-mix\(in_oklch\,var\(--card-tint\)_80\%\,white\)\]:where(.dark, .dark *) { color: color-mix(in oklch,var(--card-tint) 80%,white); } .dark\:text-\[var\(--card-tint\)\]:where(.dark, .dark *) { color: var(--card-tint); } .dark\:text-amber-200:where(.dark, .dark *) { color: var(--color-amber-200); } .dark\:text-amber-300:where(.dark, .dark *) { color: var(--color-amber-300); } .dark\:text-base-100:where(.dark, .dark *) { color: var(--color-base-100); } .dark\:text-base-200:where(.dark, .dark *) { color: var(--color-base-200); } .dark\:text-base-300:where(.dark, .dark *) { color: var(--color-base-300); } .dark\:text-base-400:where(.dark, .dark *) { color: var(--color-base-400); } .dark\:text-base-50:where(.dark, .dark *) { color: var(--color-base-50); } .dark\:text-base-500:where(.dark, .dark *) { color: var(--color-base-500); } .dark\:text-base-600:where(.dark, .dark *) { color: var(--color-base-600); } .dark\:text-blue-300:where(.dark, .dark *) { color: var(--color-blue-300); } .dark\:text-emerald-200:where(.dark, .dark *) { color: var(--color-emerald-200); } .dark\:text-green-300:where(.dark, .dark *) { color: var(--color-green-300); } .dark\:text-pink-200:where(.dark, .dark *) { color: var(--color-pink-200); } .dark\:text-primary-100:where(.dark, .dark *) { color: var(--color-primary-100); } .dark\:text-primary-200:where(.dark, .dark *) { color: var(--color-primary-200); } .dark\:text-primary-300:where(.dark, .dark *) { color: var(--color-primary-300); } .dark\:text-primary-400:where(.dark, .dark *) { color: var(--color-primary-400); } .dark\:text-red-300:where(.dark, .dark *) { color: var(--color-red-300); } .dark\:text-sky-200:where(.dark, .dark *) { color: var(--color-sky-200); } .dark\:text-white:where(.dark, .dark *) { color: var(--color-white); } .dark\:scheme-dark:where(.dark, .dark *) { color-scheme: dark; } .dark\:shadow-\[inset_2px_0_0_var\(--color-emerald-400\)\]:where(.dark, .dark *) { --tw-shadow: inset 2px 0 0 var(--color-emerald-400); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .dark\:shadow-\[inset_2px_0_0_var\(--color-primary-300\)\]:where(.dark, .dark *) { --tw-shadow: inset 2px 0 0 var(--color-primary-300); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .dark\:shadow-\[inset_2px_0_0_var\(--color-rose-400\)\]:where(.dark, .dark *) { --tw-shadow: inset 2px 0 0 var(--color-rose-400); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .dark\:ring-base-950:where(.dark, .dark *) { --tw-ring-color: var(--color-base-950); } .dark\:hover\:border-base-700:where(.dark, .dark *):hover { border-color: var(--color-base-700); } .dark\:hover\:bg-\[color-mix\(in_oklch\,var\(--card-tint\)_22\%\,transparent\)\]:where(.dark, .dark *):hover { background-color: color-mix(in oklch,var(--card-tint) 22%,transparent); } .dark\:hover\:bg-base-800\/50:where(.dark, .dark *):hover { background-color: color-mix(in oklab, var(--color-base-800) 50%, transparent); } .dark\:hover\:bg-base-900:where(.dark, .dark *):hover { background-color: var(--color-base-900); } .dark\:hover\:bg-primary-400:where(.dark, .dark *):hover { background-color: var(--color-primary-400); } .dark\:hover\:text-base-200:where(.dark, .dark *):hover { color: var(--color-base-200); } .dark\:hover\:text-base-400:where(.dark, .dark *):hover { color: var(--color-base-400); } .dark\:hover\:text-base-50:where(.dark, .dark *):hover { color: var(--color-base-50); } .dark\:data-\[active\=true\]\:border-primary-300:where(.dark, .dark *)[data-active="true"] { border-color: var(--color-primary-300); } .dark\:data-\[selected\=true\]\:border-primary-300:where(.dark, .dark *)[data-selected="true"] { border-color: var(--color-primary-300); } .dark\:data-\[active\=true\]\:text-primary-300:where(.dark, .dark *)[data-active="true"] { color: var(--color-primary-300); } .dark\:data-\[selected\=true\]\:text-primary-300:where(.dark, .dark *)[data-selected="true"] { color: var(--color-primary-300); } .dark\:before\:bg-base-800:where(.dark, .dark *)::before { content: var(--tw-content); background-color: var(--color-base-800); } .dark\:before\:text-emerald-400:where(.dark, .dark *)::before { content: var(--tw-content); color: var(--color-emerald-400); } .dark\:before\:text-rose-400:where(.dark, .dark *)::before { content: var(--tw-content); color: var(--color-rose-400); } .dark\:marker\:text-base-400\/60:where(.dark, .dark *)::marker { color: color-mix(in oklab, var(--color-base-400) 60%, transparent); } .overflow\:visible { visibility: visible; } .position\:absolute { position: absolute; } .position\:fixed { position: fixed; } .position\:relative { position: relative; } .animation\:none { display: none; } .box-shadow\:none { display: none; } .display\:flex { display: flex; } .display\:inline-block { display: inline-block; } .display\:inline-flex { display: inline-flex; } .overflow-y\:hidden { display: none; } .pointer-events\:none { display: none; } .text-decoration\:none { display: none; } .transition\:none { display: none; } .user-select\:none { display: none; } .will-change\:transform { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } .text-transform\:uppercase { text-transform: uppercase; } .-webkit-backdrop-filter\:blur { --tw-blur: blur(8px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .backdrop-filter\:blur { --tw-blur: blur(8px); 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,); } } @keyframes pulse { 50% { opacity: 0.5; } } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; initial-value: 150ms; } @property --tw-ease { syntax: "*"; inherits: false; initial-value: ease; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-border-style: solid; --tw-content: ""; --tw-duration: 150ms; --tw-ease: ease; --tw-gradient-from: #0000; --tw-gradient-from-position: 0%; --tw-gradient-to: #0000; --tw-gradient-to-position: 100%; --tw-gradient-via: #0000; --tw-gradient-via-position: 50%; --tw-inset-ring-shadow: 0 0 #0000; --tw-inset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; } } }