/* page.css — GENERATED by tools/build.sh. Do not edit: edit src/skin-r2.css, src/css/resources.css or the donor port. */
/* 1. Lovable (the blog-post template's donor), pruned + scoped verbatim */

  .pg-resources {   --spacing: .25rem; --text-sm: .875rem; --text-sm--line-height: inherit; --text-base: 1rem; --text-base--line-height: inherit; --text-lg: 1.125rem; --text-lg--line-height: inherit; --text-xl: 1.25rem; --text-xl--line-height: inherit; --text-2xl: 1.5rem; --text-2xl--line-height: inherit; --text-3xl: 1.875rem; --text-3xl--line-height: inherit; --text-4xl: 2.25rem; --text-4xl--line-height: inherit; --text-5xl: 3rem; --text-5xl--line-height: inherit;  --tracking-tight: -.025em; --leading-tight: 1.25; --ease-in-out: cubic-bezier(.4, 0, .2, 1); --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --color-gray-350: oklch(69.39% .01 106.66); --color-gray-700: oklch(42.63% .006 106.67); --color-gray-750: oklch(35.51% .005 106.66); --color-gray-850: oklch(27.2% .004 106.64); --color-blue-200: oklch(80.31% .0691 264.41); --color-blue-300: oklch(70.62% .1391 264.41); --color-blue-400: oklch(61.32% .2106 264.41); --color-blue-800: oklch(28.14% .0917 264.41); --color-blue-900: oklch(20.84% .044 264.41); --color-red-300: oklch(76.15% .1564 26.56); --color-red-400: oklch(67.3% .2102 26.56); --color-red-900: oklch(24.2% .0737 26.56); --color-orange-200: oklch(84.94% .0887 40.04); --color-orange-300: oklch(75.82% .1594 40.04); --color-orange-400: oklch(66.84% .1815 40.04); --color-orange-500: oklch(58.01% .1819 40.04); --color-orange-900: oklch(24.15% .0704 40.04); --color-green-200: oklch(82.82% .0903 138.23); --color-green-300: oklch(72.92% .155 138.23); --color-green-400: oklch(63.46% .168 138.23); --color-green-500: oklch(54.42% .1689 138.23); --color-green-800: oklch(29.91% .0862 138.23); --color-green-900: oklch(22.6% .0613 138.23); --color-purple-400: oklch(67.75% .2382 294.88); --color-purple-900: oklch(24.97% .0311 294.88); --color-white: oklch(100% 0 0); --color-black: oklch(0% 0 0); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); }
  .pg-resources h1,
.pg-resources h2,
.pg-resources h3 { font-size: inherit; font-weight: inherit; }
  .pg-resources a { color: inherit; text-decoration: inherit; }
  .pg-resources img,
.pg-resources svg,
.pg-resources canvas { vertical-align: middle; display: block; }
  .pg-resources img { max-width: 100%; height: auto; }
  .pg-resources button,
.pg-resources input { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
  .pg-resources button,
.pg-resources input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
  .pg-resources[data-zoom-lock]:not(:has([data-allow-pinch-zoom])) { touch-action: pan-x pan-y; }
  @media (pointer: coarse) {
  .pg-resources:not(.desktop-app) [data-chat-panel][data-confining-selection] [data-selectable]:not([data-selection-source]) { user-select: none; }
}
  @media not all and (width >= 48rem) {
  @media (pointer: coarse) {
  @supports (-webkit-touch-callout:none) {
}
}
}
  .pg-resources { background-color: var(--bg-base); color: var(--fg-primary); font-size: var(--text-base); line-height: var(--tw-leading,var(--text-base--line-height)); }
  .pg-resources h1 { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)); font-weight: var(--font-weight-medium); }
  .pg-resources h2 { font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)); font-weight: var(--font-weight-medium); }
  .pg-resources h3 { font-size: var(--text-lg); line-height: var(--tw-leading,var(--text-lg--line-height)); font-weight: var(--font-weight-medium); }
  .pg-resources button:not(:disabled) { cursor: pointer; }
  .pg-resources .dark { color-scheme: dark; }
  .pg-resources { background-color: var(--bg-base); color: var(--fg-primary); margin: 0px; font-size: 1rem; }
  .pg-resources h1 { font-size: 1.5rem; font-weight: 480; }
  .pg-resources h2 { font-size: 1.25rem; font-weight: 480; }
  .pg-resources h3 { font-size: 1.125rem; font-weight: 480; }
  .pg-resources button:not(:disabled) { cursor: pointer; }
  .pg-resources :where([data-slot="data-table-bottom"]) > :not(:first-child) { border-top: 1px solid var(--border-primary); }
  .pg-resources :where([data-slot="data-table"]) > :where(tbody, tfoot) :where(a, button, input, select, textarea, summary, [tabindex]),
.pg-resources :where([data-slot="data-table"]):not([data-sticky-header]) > thead :where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-block-start: calc(var(--data-table-scrollbar-header,0px) + 8px); }
  .pg-resources :where([data-slot="data-table-scroll-area"]) > [data-slot="scroll-area-viewport"] { scroll-padding-bottom: 8px; scroll-padding-inline: calc(var(--data-table-pinned-inset-start,0px) + 8px) calc(var(--data-table-pinned-inset-end,0px) + 8px); }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg { --_sort-y: 0px; --_sort-scale: var(--_sort-idle-scale); --_sort-opacity: 1; color: var(--fg-tertiary); translate: 0 var(--_sort-y); scale: var(--_sort-scale); opacity: var(--_sort-opacity); --_sort-ease: cubic-bezier(.23, 1, .32, 1); transition: translate .2s var(--_sort-ease), scale .2s var(--_sort-ease), rotate .2s var(--_sort-ease), opacity .11s var(--_sort-ease), color .12s var(--_sort-ease); position: absolute; inset-block-start: calc(50% - var(--_sort-icon) / 2); inset-inline-start: calc(50% - var(--_sort-icon) / 2); }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg[data-pos="top"] { --_sort-y: calc(var(--_sort-sep) / -2); }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg[data-pos="bottom"] { --_sort-y: calc(var(--_sort-sep) / 2); }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg[data-role="active"] { --_sort-scale: 1; color: var(--fg-primary); }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg[data-role="absorbed"] { --_sort-scale: var(--_sort-rest-scale); --_sort-opacity: 0; }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg[data-snap],
.pg-resources [data-slot="data-table-sort-indicator"] > svg[data-snap] path { transition: none; }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg path { stroke: currentcolor; stroke-width: 0; stroke-linejoin: round; transition: stroke-width .2s var(--_sort-ease); }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg[data-role="idle"] path { stroke-width: var(--_sort-idle-stroke); }
  @media (hover: hover) {
  .pg-resources [data-slot="data-table-sort"]:not([aria-disabled="true"]):hover [data-slot="data-table-sort-indicator"] > svg[data-role="idle"] { color: var(--fg-primary); }
}
  @media (prefers-reduced-motion: reduce) {
  .pg-resources [data-slot="data-table-sort-indicator"] > svg { transition-duration: 0s, 0s, 0s, 0.11s, 0.12s; }
  .pg-resources [data-slot="data-table-sort-indicator"] > svg path { transition-duration: 0s; }
}
  .pg-resources .sr-only { clip-path: inset(50%); white-space: nowrap; border-width: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
  .pg-resources .absolute { position: absolute; }
  .pg-resources .relative { position: relative; }
  .pg-resources .inset-0 { inset: calc(var(--spacing) * 0); }
  .pg-resources .z-10 { z-index: 10; }
  .pg-resources .typestyle-prose-base :where(h1, h2, h3, h4) { text-wrap: balance; }
  .pg-resources .typestyle-prose-base :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
  .pg-resources .typestyle-prose-base :where(h1, h2, h3, h4) :where(em, i) { font-style: normal; }
  .pg-resources .typestyle-prose-sm :where(h1, h2, h3, h4) { text-wrap: balance; }
  .pg-resources .typestyle-prose-sm :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
  .pg-resources .typestyle-prose-sm :where(h1, h2, h3, h4) :where(em, i) { font-style: normal; }
  .pg-resources .mt-1 { margin-top: calc(var(--spacing) * 1); }
  .pg-resources .mt-2 { margin-top: calc(var(--spacing) * 2); }
  .pg-resources .mt-16 { margin-top: calc(var(--spacing) * 16); }
  .pg-resources .mb-2 { margin-bottom: calc(var(--spacing) * 2); }
  .pg-resources .mb-4 { margin-bottom: calc(var(--spacing) * 4); }
  .pg-resources .flex { display: flex; }
  .pg-resources .grid { display: grid; }
  .pg-resources .aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
  .pg-resources .h-full { height: 100%; }
  .pg-resources .min-h-screen { min-height: 100vh; }
  .pg-resources .w-full { width: 100%; }
  .pg-resources .flex-1 { flex: 1 1 0%; }
  .pg-resources .grid-cols-1 { grid-template-columns: repeat(1, minmax(0px, 1fr)); }
  .pg-resources .flex-col { flex-direction: column; }
  .pg-resources .items-center { align-items: center; }
  .pg-resources .gap-2 { gap: calc(var(--spacing) * 2); }
  .pg-resources .gap-4 { gap: calc(var(--spacing) * 4); }
  .pg-resources .gap-8 { gap: calc(var(--spacing) * 8); }
  .pg-resources .gap-x-12 { column-gap: calc(var(--spacing) * 12); }
  .pg-resources .gap-y-12 { row-gap: calc(var(--spacing) * 12); }
  .pg-resources .overflow-hidden { overflow: hidden; }
  .pg-resources .overflow-x-auto { overflow-x: auto; }
  .pg-resources .rounded-2 { border-radius: calc(var(--spacing) * 2); }
  .pg-resources .border { border-style: var(--tw-border-style); border-width: var(--border-default); }
  .pg-resources .border-marketing-border { border-color: hsl(var(--marketing-border)); }
  .pg-resources .object-cover { object-fit: cover; }
  .pg-resources .px-1 { padding-inline: calc(var(--spacing) * 1); }
  .pg-resources .px-4 { padding-inline: calc(var(--spacing) * 4); }
  .pg-resources .py-16 { padding-block: calc(var(--spacing) * 16); }
  .pg-resources .pt-16 { padding-top: calc(var(--spacing) * 16); }
  .pg-resources .pb-4 { padding-bottom: calc(var(--spacing) * 4); }
  .pg-resources .pb-20 { padding-bottom: calc(var(--spacing) * 20); }
  .pg-resources .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)); }
  .pg-resources .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading,var(--text-5xl--line-height)); }
  .pg-resources .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)); }
  .pg-resources .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); }
  .pg-resources .font-medium { font-weight: var(--font-weight-medium); }
  .pg-resources .whitespace-nowrap { white-space: nowrap; }
  .pg-resources .text-marketing-foreground { color: hsl(var(--marketing-foreground)); }
  .pg-resources .text-marketing-muted-foreground { color: hsl(var(--marketing-muted-foreground)); }
  .pg-resources .fx-interaction:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: var(--_dark-resting); }
  @media (hover: hover) {
  .pg-resources [data-button]:hover:not(:active):where(:not(:disabled):not([aria-disabled="true"])) .fx-interaction:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: var(--_dark-hover); }
}
  .pg-resources [data-button]:active .fx-interaction:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: var(--_dark-pressed); }
  .pg-resources [data-button][aria-disabled="true"] .fx-interaction:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: var(--_dark-resting); }
  @media (hover: hover) {
  .pg-resources [data-button][data-pressed]:hover:not(:active):not(:disabled):not([aria-disabled="true"]) .fx-engaged-interaction:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: var(--_dark-hover); }
}
  .pg-resources [data-button][data-pressed]:active .fx-engaged-interaction:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: var(--_dark-pressed); }
  @media (hover: hover) {
  .pg-resources [data-button][data-pressed]:hover:not(:active) .fx-interaction-yield-to-engage:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: 0; }
}
  .pg-resources [data-button][data-pressed]:active .fx-interaction-yield-to-engage:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: 0; }
  .pg-resources .shadow-floating-lg:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, calc(var(--shadow-surface-border-alpha) * 1.25)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000052, 0px calc(1px + var(--border-default)) 0px 0px #00000029, 0px calc(1px + var(--border-default)) 1px -.5px #00000029, 0px calc(3px + var(--border-default)) 3px -1.5px #00000029, 0px calc(6px + var(--border-default)) 6px -3px #00000029, 0px calc(12px + var(--border-default)) 12px -6px #00000029, 0px calc(24px + var(--border-default)) 24px -12px #00000029, 0px calc(48px + var(--border-default)) 48px -24px #00000029; }
  .pg-resources .shadow-floating-md:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, calc(var(--shadow-surface-border-alpha) * 1.125)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000047, 0px calc(1px + var(--border-default)) 0px 0px #0000001f, 0px calc(1px + var(--border-default)) 1px -.5px #0000001f, 0px calc(3px + var(--border-default)) 3px -1.5px #0000001f, 0px calc(6px + var(--border-default)) 6px -3px #0000001f, 0px calc(12px + var(--border-default)) 12px -6px #0000001f, 0px calc(24px + var(--border-default)) 24px -12px #0000001f, 0px calc(48px + var(--border-default)) 48px -24px #0000001f; }
  .pg-resources .shadow-floating-sm:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #0000003d, 0px calc(1px + var(--border-default)) 0px 0px #0000001f, 0px calc(1px + var(--border-default)) 1px -.5px #0000001f, 0px calc(3px + var(--border-default)) 3px -1.5px #0000001f, 0px calc(6px + var(--border-default)) 6px -3px #0000001f, 0px calc(12px + var(--border-default)) 12px -6px #0000001f, 0px calc(24px + var(--border-default)) 24px -12px #0000001f; }
  .pg-resources .shadow-surface-lg:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014, 0px calc(3px + var(--border-default)) 3px -1.5px #00000014, 0px calc(6px + var(--border-default)) 6px -3px #00000014, 0px calc(12px + var(--border-default)) 12px -6px #00000014; }
  .pg-resources .shadow-surface-md:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014, 0px calc(3px + var(--border-default)) 3px -1.5px #00000014, 0px calc(6px + var(--border-default)) 6px -3px #00000014; }
  .pg-resources .shadow-surface-sm:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014, 0px calc(3px + var(--border-default)) 3px -1.5px #00000014; }
  .pg-resources .shadow-surface-xl:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014, 0px calc(3px + var(--border-default)) 3px -1.5px #00000014, 0px calc(6px + var(--border-default)) 6px -3px #00000014, 0px calc(12px + var(--border-default)) 12px -6px #00000014, 0px calc(24px + var(--border-default)) 24px -12px #00000014; }
  .pg-resources .shadow-surface-xs:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014; }
  .pg-resources .shadow-surface-xxs:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0 0 0 var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0 0 0 var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0 0 0 calc(var(--border-default) * 2) #00000029, 0 1px 0 0 #00000014; }
  .pg-resources .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)); }
  .pg-resources .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)); }
  .pg-resources .duration-300 { --tw-duration: .3s; transition-duration: 0.3s; }
  .pg-resources .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); }
  .pg-resources .duration-300 { animation-duration: 0.3s; }
  .pg-resources .ease-in-out { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  @media (hover: hover) {
  .pg-resources .group-hover\/run-card\:shadow-surface-lg:is(:where(.group\/run-card):hover *):where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014, 0px calc(3px + var(--border-default)) 3px -1.5px #00000014, 0px calc(6px + var(--border-default)) 6px -3px #00000014, 0px calc(12px + var(--border-default)) 12px -6px #00000014; }
}
  @media (hover: hover) {
  .pg-resources .hover\:scale-\[1\.01\]:hover { scale: 1.01; }
  .pg-resources .hover\:text-marketing-foreground:hover { color: hsl(var(--marketing-foreground)); }
  .pg-resources .hover\:shadow-surface-lg:hover:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014, 0px calc(3px + var(--border-default)) 3px -1.5px #00000014, 0px calc(6px + var(--border-default)) 6px -3px #00000014, 0px calc(12px + var(--border-default)) 12px -6px #00000014; }
}
  .pg-resources .data-\[pressed\]\:shadow-surface-xs[data-pressed]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014; }
  @media (width >= 40rem) {
  .pg-resources .sm\:typestyle-prose-base :where(h1, h2, h3, h4) { text-wrap: balance; }
  .pg-resources .sm\:typestyle-prose-base :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
  .pg-resources .sm\:typestyle-prose-base :where(h1, h2, h3, h4) :where(em, i) { font-style: normal; }
  .pg-resources .sm\:typestyle-prose-sm :where(h1, h2, h3, h4) { text-wrap: balance; }
  .pg-resources .sm\:typestyle-prose-sm :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
  .pg-resources .sm\:typestyle-prose-sm :where(h1, h2, h3, h4) :where(em, i) { font-style: normal; }
}
  @media (width >= 48rem) {
  .pg-resources .md\:sticky { position: sticky; }
  .pg-resources .md\:top-20 { top: calc(var(--spacing) * 20); }
  .pg-resources .md\:typestyle-prose-base :where(h1, h2, h3, h4) { text-wrap: balance; }
  .pg-resources .md\:typestyle-prose-base :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
  .pg-resources .md\:typestyle-prose-base :where(h1, h2, h3, h4) :where(em, i) { font-style: normal; }
  .pg-resources .md\:typestyle-prose-sm :where(h1, h2, h3, h4) { text-wrap: balance; }
  .pg-resources .md\:typestyle-prose-sm :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
  .pg-resources .md\:typestyle-prose-sm :where(h1, h2, h3, h4) :where(em, i) { font-style: normal; }
  .pg-resources .md\:mx-0 { margin-inline: calc(var(--spacing) * 0); }
  .pg-resources .md\:w-64 { width: calc(var(--spacing) * 64); }
  .pg-resources .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .pg-resources .md\:flex-col { flex-direction: column; }
  .pg-resources .md\:flex-row { flex-direction: row; }
  .pg-resources .md\:px-8 { padding-inline: calc(var(--spacing) * 8); }
  .pg-resources .md\:pb-0 { padding-bottom: calc(var(--spacing) * 0); }
  .pg-resources .md\:pb-32 { padding-bottom: calc(var(--spacing) * 32); }
  .pg-resources .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)); }
  .pg-resources .md\:text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading,var(--text-4xl--line-height)); }
  .pg-resources .md\:text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)); }
  .pg-resources .md\:shadow-surface-xl:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014, 0px calc(3px + var(--border-default)) 3px -1.5px #00000014, 0px calc(6px + var(--border-default)) 6px -3px #00000014, 0px calc(12px + var(--border-default)) 12px -6px #00000014, 0px calc(24px + var(--border-default)) 24px -12px #00000014; }
  .pg-resources .md\:shadow-surface-xs:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014; }
  .pg-resources .md\:not-has-\[\[data-flush-surface\]\]\:shadow-surface-xl:not(:has([data-flush-surface])):where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #00000029, 0px calc(1px + var(--border-default)) 0px 0px #00000014, 0px calc(1px + var(--border-default)) 1px -.5px #00000014, 0px calc(3px + var(--border-default)) 3px -1.5px #00000014, 0px calc(6px + var(--border-default)) 6px -3px #00000014, 0px calc(12px + var(--border-default)) 12px -6px #00000014, 0px calc(24px + var(--border-default)) 24px -12px #00000014; }
}
  @media (width >= 64rem) {
  .pg-resources .lg\:typestyle-prose-base :where(h1, h2, h3, h4) { text-wrap: balance; }
  .pg-resources .lg\:typestyle-prose-base :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
  .pg-resources .lg\:typestyle-prose-base :where(h1, h2, h3, h4) :where(em, i) { font-style: normal; }
  .pg-resources .lg\:typestyle-prose-sm :where(h1, h2, h3, h4) { text-wrap: balance; }
  .pg-resources .lg\:typestyle-prose-sm :where(h1, h2, h3, h4) :where(strong, b) { font-weight: inherit; }
  .pg-resources .lg\:typestyle-prose-sm :where(h1, h2, h3, h4) :where(em, i) { font-style: normal; }
  .pg-resources .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
  .pg-resources .dark\:inset-0:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { inset: calc(var(--spacing) * 0); }
  .pg-resources .dark\:block:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { display: block; }
  .pg-resources .dark\:flex:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { display: flex; }
  .pg-resources .dark\:hidden:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { display: none; }
  .pg-resources .dark\:\!border-transparent:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgba(0, 0, 0, 0) !important; }
  .pg-resources .dark\:border-\[\#2b2b2b\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgb(43, 43, 43); }
  .pg-resources .dark\:border-\[hsl\(0_0\%_100\%\)\]\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: oklab(1 0 5.96046e-8 / 0.2); }
  .pg-resources .dark\:border-\[hsl\(60_1\.6\%_12\%\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgb(31, 31, 30); }
  .pg-resources .dark\:border-\[hsl\(60_1\.6\%_24\.7\%\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgb(64, 64, 62); }
  .pg-resources .dark\:border-\[hsl\(60_2\.5\%_24\.7\%\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgb(65, 65, 61); }
  .pg-resources .dark\:border-\[var\(--bg-primary\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--bg-primary); }
  .pg-resources .dark\:border-accent-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--border-accent); }
  .pg-resources .dark\:border-blue-800:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--color-blue-800); }
  .pg-resources .dark\:border-blue-900:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--color-blue-900); }
  .pg-resources .dark\:border-gray-700:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--color-gray-700); }
  .pg-resources .dark\:border-green-900:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--color-green-900); }
  .pg-resources .dark\:border-orange-900:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--color-orange-900); }
  .pg-resources .dark\:border-orange-900\/50:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgba(58, 16, 2, 0.5); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:border-orange-900\/50:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: color-mix(in oklab, var(--color-orange-900) 50%, transparent); }
}
  .pg-resources .dark\:border-tertiary-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--border-tertiary); }
  .pg-resources .dark\:border-white\/8:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgba(255, 255, 255, 0.08); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:border-white\/8:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: color-mix(in oklab, var(--color-white) 8%, transparent); }
}
  .pg-resources .dark\:border-white\/24:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgba(255, 255, 255, 0.24); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:border-white\/24:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: color-mix(in oklab, var(--color-white) 24%, transparent); }
}
  .pg-resources .dark\:border-white\/\[0\.08\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: rgba(255, 255, 255, 0.08); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:border-white\/\[0\.08\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: color-mix(in oklab, var(--color-white) 8%, transparent); }
}
  .pg-resources .dark\:border-yellow-900:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { border-color: var(--color-yellow-900); }
  .pg-resources .dark\:\!bg-black\/\[0\.64\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(0, 0, 0, 0.64) !important; }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:\!bg-black\/\[0\.64\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-black) 64%, transparent) !important; }
}
  .pg-resources .dark\:bg-\[\#1e1e1e\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgb(30, 30, 30); }
  .pg-resources .dark\:bg-\[\#171717\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgb(23, 23, 23); }
  .pg-resources .dark\:bg-\[\#262626\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgb(38, 38, 38); }
  .pg-resources .dark\:bg-\[\#363636\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgb(54, 54, 54); }
  .pg-resources .dark\:bg-\[hsl\(60_1\.3\%_15\.1\%\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgb(39, 39, 38); }
  .pg-resources .dark\:bg-\[hsl\(60_1\.6\%_12\%\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgb(31, 31, 30); }
  .pg-resources .dark\:bg-\[hsl\(224\.6_88\.2\%_53\.3\%\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgb(31, 85, 241); }
  .pg-resources .dark\:bg-\[rgba\(255\,255\,255\,0\.04\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(255, 255, 255, 0.04); }
  .pg-resources .dark\:bg-\[var\(--bg-inverse\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--bg-inverse); }
  .pg-resources .dark\:bg-\[var\(--color-orange-500\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-orange-500); }
  .pg-resources .dark\:bg-accent-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--bg-accent); }
  .pg-resources .dark\:bg-base-pulse\/\[60\%\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--bg-base); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-base-pulse\/\[60\%\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--bg-base) 60%, transparent); }
}
  .pg-resources .dark\:bg-black:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-black); }
  .pg-resources .dark\:bg-black\/\[0\.22\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(0, 0, 0, 0.22); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-black\/\[0\.22\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-black) 22%, transparent); }
}
  .pg-resources .dark\:bg-blue-800:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-blue-800); }
  .pg-resources .dark\:bg-blue-800\/40:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(17, 37, 86, 0.4); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-blue-800\/40:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-blue-800) 40%, transparent); }
}
  .pg-resources .dark\:bg-blue-900:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-blue-900); }
  .pg-resources .dark\:bg-blue-900\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(14, 23, 44, 0.2); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-blue-900\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent); }
}
  .pg-resources .dark\:bg-depth-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--bg-depth); }
  .pg-resources .dark\:bg-gray-750:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-gray-750); }
  .pg-resources .dark\:bg-gray-750\/50:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(60, 60, 57, 0.5); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-gray-750\/50:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-gray-750) 50%, transparent); }
}
  .pg-resources .dark\:bg-gray-850:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-gray-850); }
  .pg-resources .dark\:bg-green-800:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-green-800); }
  .pg-resources .dark\:bg-green-800\/40:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(20, 55, 5, 0.4); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-green-800\/40:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-green-800) 40%, transparent); }
}
  .pg-resources .dark\:bg-green-900:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-green-900); }
  .pg-resources .dark\:bg-green-900\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(11, 34, 4, 0.2); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-green-900\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent); }
}
  .pg-resources .dark\:bg-green-900\/60:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(11, 34, 4, 0.6); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-green-900\/60:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-green-900) 60%, transparent); }
}
  .pg-resources .dark\:bg-marketing-muted:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: hsl(var(--marketing-muted)); }
  .pg-resources .dark\:bg-orange-900\/10:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(58, 16, 2, 0.1); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-orange-900\/10:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-orange-900) 10%, transparent); }
}
  .pg-resources .dark\:bg-orange-900\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(58, 16, 2, 0.2); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-orange-900\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-orange-900) 20%, transparent); }
}
  .pg-resources .dark\:bg-orange-900\/40:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(58, 16, 2, 0.4); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-orange-900\/40:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-orange-900) 40%, transparent); }
}
  .pg-resources .dark\:bg-primary-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--bg-primary); }
  .pg-resources .dark\:bg-purple-900\/32:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(34, 31, 47, 0.32); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-purple-900\/32:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-purple-900) 32%, transparent); }
}
  .pg-resources .dark\:bg-red-900\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(60, 13, 11, 0.2); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-red-900\/20:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent); }
}
  .pg-resources .dark\:bg-red-900\/60:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(60, 13, 11, 0.6); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-red-900\/60:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-red-900) 60%, transparent); }
}
  .pg-resources .dark\:bg-secondary-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)),
.pg-resources .dark\:bg-secondary-pulse\/\[88\%\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--bg-secondary); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-secondary-pulse\/\[88\%\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--bg-secondary) 88%, transparent); }
}
  .pg-resources .dark\:bg-tertiary-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--bg-tertiary); }
  .pg-resources .dark\:bg-translucent-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--bg-translucent); }
  .pg-resources .dark\:bg-transparent:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(0, 0, 0, 0); }
  .pg-resources .dark\:bg-white:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-white); }
  .pg-resources .dark\:bg-white\/10:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(255, 255, 255, 0.1); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-white\/10:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); }
}
  .pg-resources .dark\:bg-yellow-500:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-yellow-500); }
  .pg-resources .dark\:bg-yellow-800:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: var(--color-yellow-800); }
  .pg-resources .dark\:bg-yellow-900\/60:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(115, 62, 10, 0.6); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-yellow-900\/60:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-yellow-900) 60%, transparent); }
}
  .pg-resources .dark\:bg-yellow-950\/40:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: rgba(67, 32, 4, 0.4); }
  @supports (color:color-mix(in lab, red, red)) {
  .pg-resources .dark\:bg-yellow-950\/40:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-color: color-mix(in oklab, var(--color-yellow-950) 40%, transparent); }
}
  .pg-resources .dark\:bg-\[image\:var\(--cta-bg-dark\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-image: var(--cta-bg-dark); }
  .pg-resources .dark\:bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.12\)\,rgba\(255\,255\,255\,0\.06\)\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)); }
  .pg-resources .dark\:bg-\[linear-gradient\(var\(--bg-attention-translucent\)\,var\(--bg-attention-translucent\)\)\,linear-gradient\(var\(--bg-depth\)\,var\(--bg-depth\)\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background-image: linear-gradient(var(--bg-attention-translucent),var(--bg-attention-translucent)),linear-gradient(var(--bg-depth),var(--bg-depth)); }
  .pg-resources .dark\:text-\[\#8a8a8a\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: rgb(138, 138, 138); }
  .pg-resources .dark\:text-\[\#C190FF\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: rgb(193, 144, 255); }
  .pg-resources .dark\:text-\[\#FCFBF8\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: rgb(252, 251, 248); }
  .pg-resources .dark\:text-\[\#c2c2c2\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: rgb(194, 194, 194); }
  .pg-resources .dark\:text-\[\#f0f0f0\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: rgb(240, 240, 240); }
  .pg-resources .dark\:text-\[hsl\(60_2\.3\%_73\.9\%\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: rgb(190, 190, 187); }
  .pg-resources .dark\:text-black:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-black); }
  .pg-resources .dark\:text-blue-200:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-blue-200); }
  .pg-resources .dark\:text-blue-300:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-blue-300); }
  .pg-resources .dark\:text-blue-400:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-blue-400); }
  .pg-resources .dark\:text-gray-350:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-gray-350); }
  .pg-resources .dark\:text-green-200:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-green-200); }
  .pg-resources .dark\:text-green-300:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-green-300); }
  .pg-resources .dark\:text-green-400:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-green-400); }
  .pg-resources .dark\:text-green-500:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-green-500); }
  .pg-resources .dark\:text-orange-200:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-orange-200); }
  .pg-resources .dark\:text-orange-300:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-orange-300); }
  .pg-resources .dark\:text-orange-400:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-orange-400); }
  .pg-resources .dark\:text-primary-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--fg-primary); }
  .pg-resources .dark\:text-purple-400:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-purple-400); }
  .pg-resources .dark\:text-red-300:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-red-300); }
  .pg-resources .dark\:text-red-400:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-red-400); }
  .pg-resources .dark\:text-white:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-white); }
  .pg-resources .dark\:text-yellow-300:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-yellow-300); }
  .pg-resources .dark\:text-yellow-400:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-yellow-400); }
  .pg-resources .dark\:text-yellow-500:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { color: var(--color-yellow-500); }
  .pg-resources .dark\:opacity-\[0\.25\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: 0.25; }
  .pg-resources .dark\:shadow-\[0_0\.5px_0_0_rgba\(255\,255\,255\,0\.16\)_inset\,0_-0\.5px_0_0_rgba\(255\,102\,244\,0\.24\)_inset\,0_0_0_var\(--border-default\)_rgba\(119\,119\,113\,0\.32\)_inset\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-shadow: 0 .5px 0 0 var(--tw-shadow-color,#ffffff29) inset, 0 -.5px 0 0 var(--tw-shadow-color,#ff66f43d) inset, 0 0 0 var(--tw-shadow-color,var(--border-default)) #77777152 inset; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
  .pg-resources .dark\:shadow-\[inset_0_0_0_0\.5px_var\(--border-translucent\,rgba\(119\,119\,113\,0\.4\)\)\,inset_0_-0\.5px_0_0_rgba\(255\,255\,255\,0\.08\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-shadow: inset 0 0 0 .5px var(--tw-shadow-color,var(--border-translucent,#77777166)), inset 0 -.5px 0 0 var(--tw-shadow-color,#ffffff14); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
  .pg-resources .dark\:shadow-\[inset_0_0_0_1px_rgba\(255\,255\,255\,0\.09\)\,inset_0_1px_0_rgba\(255\,255\,255\,0\.14\)\,inset_0_-1px_0_rgba\(0\,0\,0\,0\.3\)\,0_8px_24px_-8px_rgba\(0\,0\,0\,0\.45\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,#ffffff17), inset 0 1px 0 var(--tw-shadow-color,#ffffff24), inset 0 -1px 0 var(--tw-shadow-color,#0000004d), 0 8px 24px -8px var(--tw-shadow-color,#00000073); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
  .pg-resources .dark\:shadow-\[inset_0_1px_1px_oklch\(0_0_0\/0\.32\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-shadow: inset 0 1px 1px var(--tw-shadow-color,oklch(0% 0 0/.32)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
  .pg-resources .dark\:shadow-lg:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
  .pg-resources .dark\:shadow-xl:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
  .pg-resources .dark\:brightness-110:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-brightness: brightness(110%); 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,); }
  .pg-resources .dark\:drop-shadow-\[0_0_5px_\#ff66f4b3\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color,#ff66f4b3)); --tw-drop-shadow: var(--tw-drop-shadow-size); 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,); }
  .pg-resources .dark\:invert:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --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,); }
  .pg-resources .dark\:\[filter\:drop-shadow\(0_1px_2px_rgb\(0_0_0_\/_0\.12\)\)_drop-shadow\(0_1px_1px_rgb\(0_0_0_\/_0\.12\)\)\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { filter: drop-shadow(rgba(0, 0, 0, 0.12) 0px 1px 2px) drop-shadow(rgba(0, 0, 0, 0.12) 0px 1px 1px); }
  .pg-resources .dark\:backdrop-brightness-\[1\.1\]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { --tw-backdrop-brightness: brightness(1.1); 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,); }
  .pg-resources .dark\:data-\[pressed\]\:bg-depth-pulse:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *))[data-pressed] { background-color: var(--bg-depth); }
  .pg-resources .prose-headings\:my-1 :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-block: calc(var(--spacing) * 1); }
  .pg-resources .prose-headings\:scroll-mt-20 :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { scroll-margin-top: calc(var(--spacing) * 20); }
  .pg-resources .prose-headings\:scroll-mt-24 :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { scroll-margin-top: calc(var(--spacing) * 24); }
  .pg-resources .prose-headings\:leading-tight :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); }
  .pg-resources .prose-headings\:font-medium :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: var(--font-weight-medium); }
  .pg-resources .prose-headings\:tracking-tight :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { letter-spacing: var(--tracking-tight); }
  .pg-resources .prose-headings\:break-words :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { overflow-wrap: break-word; }
  .pg-resources .prose-headings\:text-primary-pulse :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--fg-primary); }
  @media (width >= 48rem) {
  @media (hover: hover) {
  .pg-resources .md\:can-hover\:shadow-floating-sm:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { box-shadow: 0px 0px 0px var(--border-default) rgba(119, 119, 113, var(--shadow-surface-border-alpha)), 0px 0px 0px var(--border-default) var(--surface-shadow-base,var(--bg-primary)), 0px 0px 0px calc(var(--border-default) * 2) #0000003d, 0px calc(1px + var(--border-default)) 0px 0px #0000001f, 0px calc(1px + var(--border-default)) 1px -.5px #0000001f, 0px calc(3px + var(--border-default)) 3px -1.5px #0000001f, 0px calc(6px + var(--border-default)) 6px -3px #0000001f, 0px calc(12px + var(--border-default)) 12px -6px #0000001f, 0px calc(24px + var(--border-default)) 24px -12px #0000001f; }
}
}
  .pg-resources .dark\:\[\&_\[data-slot\=meter-indicator\]\]\:bg-blue-400:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) [data-slot="meter-indicator"] { background-color: var(--color-blue-400); }
  .pg-resources :where([data-slot="split-button"]) > [data-button]:not(:nth-last-child(1 of [data-button])) { --_seam-end: 16px; border-start-end-radius: 0px; border-end-end-radius: 0px; }
  .pg-resources :where([data-slot="split-button"]) > [data-button]:not(:nth-last-child(1 of [data-button]))::after { right: 0px; }
  .pg-resources :where([data-slot="split-button"]) > [data-button]:not(:nth-child(1 of [data-button])) { --_seam-start: 16px; border-start-start-radius: 0px; border-end-start-radius: 0px; }
  .pg-resources :where([data-slot="split-button"]) > [data-button]:not(:nth-child(1 of [data-button]))::after { left: 0px; }
  .pg-resources :where([data-slot="split-button"]) > [data-button]:not(:nth-child(1 of [data-button]))::before { content: ""; pointer-events: none; top: var(--border-default); bottom: var(--border-default); width: var(--border-default); z-index: 5; background: var(--_seam-color); position: absolute; left: 0px; }
  .pg-resources :where([data-slot="split-button"]) > [data-button] [data-fx-layer="drop-shadow"] { left: calc(-1 * var(--_seam-start,0px)); right: calc(-1 * var(--_seam-end,0px)); clip-path: inset(-8px var(--_seam-end,-8px) -8px var(--_seam-start,-8px)); }
  .pg-resources :where([data-slot="split-button"][data-rounded]) > [data-button][data-square]:not(:nth-last-child(1 of [data-button])) [data-button-content] { translate: var(--_cap-nudge,1px) 0; }
  .pg-resources :where([data-slot="split-button"][data-rounded]) > [data-button][data-square]:not(:nth-child(1 of [data-button])) [data-button-content] { translate: calc(-1 * var(--_cap-nudge,1px)) 0; }
  .pg-resources [data-slot="split-button"] > [data-button][aria-expanded="true"]:not(:disabled) [data-fx-layer="interaction"] { opacity: var(--_pressed); }
  .pg-resources [data-slot="split-button"] > [data-button][aria-expanded="true"]:not(:disabled) [data-fx-layer="interaction"]:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { opacity: var(--_dark-pressed); }/* ==== https://lovable.dev/assets/globals-DLE6YhnY.css ==== */
.pg-resources { --border-default: 1px; }
@media (-webkit-device-pixel-ratio >= 2), (resolution >= 2x) {
  .pg-resources { --border-default: .5px; }
}
.pg-resources { --bg-depth: oklch(95.49% 0 107); --bg-base: oklch(96.99% 0 107); --bg-primary: oklch(98.51% 0 107); --bg-secondary: oklch(99.99% 0 107); --bg-tertiary: oklch(99.99% 0 107); --bg-accent: oklch(52.43% .2396 264.41); --bg-attention-translucent: oklch(58.01% .1819 40.04/.16); --bg-translucent: oklch(100% 0 0/.8); --bg-inverse: oklch(0% 0 0/.88); --fg-primary: oklch(10% 0 0); --fg-tertiary: oklch(50% .001 107); --border-primary: oklch(85.12% 0 107/.4); --border-tertiary: oklch(86.6% 0 107/.4); --border-accent: oklch(61.32% .2106 264.41/.4); --border-translucent: oklch(55% .002 107/.16); --shadow-surface-border-alpha: .16; }
.pg-resources .dark { --bg-depth: oklch(20.42% .002 107); --bg-base: oklch(23% .002 107); --bg-primary: oklch(24.74% .002 107); --bg-secondary: oklch(27.2% .002 107); --bg-tertiary: oklch(30% .002 107); --bg-accent: oklch(52.43% .2396 264.41); --bg-attention-translucent: oklch(58.01% .1819 40.04/.2); --bg-translucent: oklch(56.74% .009 106.68/.16); --bg-inverse: oklch(100% 0 0/.96); --fg-primary: oklch(100% 0 0); --fg-tertiary: oklch(72.34% .002 107); --border-primary: oklch(34.74% .004 107/.4); --border-tertiary: oklch(40% .004 107/.4); --border-accent: oklch(52.43% .2396 264.41/.4); --border-translucent: oklch(55% .002 107/.16); --shadow-surface-border-alpha: .32; }
@media (-webkit-device-pixel-ratio >= 2), (resolution >= 2x) {
  .pg-resources { --border-primary: oklch(85.12% 0 107); --border-tertiary: oklch(86.6% 0 107); --border-accent: oklch(61.32% .2106 264.41); --border-translucent: oklch(55% .002 107/.4); --shadow-surface-border-alpha: .28; }
  .pg-resources .dark { --border-primary: oklch(34.74% .004 107); --border-tertiary: oklch(40% .004 107); --border-accent: oklch(52.43% .2396 264.41); --border-translucent: oklch(55% .002 107/.4); --shadow-surface-border-alpha: .4; }
}
.pg-resources [data-button][data-media-label] [data-button-content] svg { filter: var(--_btn-icon-shadow,none); }
@property --shine-w1 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --shine-w2 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --shine-w3 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --shine-w4 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --shine-w5 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --shine-w6 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --shine-w7 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --shine-w8 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --shine-ph { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --shine-on { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --shine-share { syntax: "<number>"; inherits: false; initial-value: .5; }
@property --shine-t { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --shine-r { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --shine-b { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --shine-l { syntax: "<length>"; inherits: true; initial-value: 1px; }
.pg-resources { --marketing-foreground: 0 0% 11%; --marketing-muted: 42 38% 95%; --marketing-muted-foreground: 60 1% 37%; --marketing-border: 45 17% 91%; }
.pg-resources .dark { --marketing-foreground: 45 40% 98%; --marketing-muted: 60 3% 15%; --marketing-muted-foreground: 40 9% 75%; --marketing-border: 60 3% 15%; }
@property --tw-border-spacing-x { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-border-spacing-y { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-pan-x { syntax: "*"; inherits: false; }
@property --tw-pan-y { syntax: "*"; inherits: false; }
@property --tw-pinch-zoom { syntax: "*"; inherits: false; }
@property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; }
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-gradient-position { syntax: "*"; inherits: false; }
@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-tracking { syntax: "*"; inherits: false; }
@property --tw-ordinal { syntax: "*"; inherits: false; }
@property --tw-slashed-zero { syntax: "*"; inherits: false; }
@property --tw-numeric-figure { syntax: "*"; inherits: false; }
@property --tw-numeric-spacing { syntax: "*"; inherits: false; }
@property --tw-numeric-fraction { syntax: "*"; inherits: false; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: var(--fg); }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-backdrop-blur { syntax: "*"; inherits: false; }
@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }
@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }
@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }
@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-backdrop-invert { syntax: "*"; inherits: false; }
@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }
@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }
@property --tw-ease { syntax: "*"; inherits: false; }
@property --tw-contain-size { syntax: "*"; inherits: false; }
@property --tw-contain-layout { syntax: "*"; inherits: false; }
@property --tw-contain-paint { syntax: "*"; inherits: false; }
@property --tw-contain-style { syntax: "*"; inherits: false; }
@property --tw-content { syntax: "*"; inherits: false; initial-value: ""; }

/* ==== https://lovable.dev/assets/fonts-yKhYizLu.css ==== */

/* ==== https://lovable.dev/assets/index-4PBh0cLs.css ==== */

/* ==== https://lovable.dev/assets/app-shared-C8LL_u4z.css ==== */

/* ==== https://lovable.dev/assets/app-boot-LZ075GGe.css ==== */

/* ==== https://lovable.dev/assets/ui-password-input-3dS9T-mv.css ==== */
.pg-resources .textarea-resize-handle:where(.dark, .dark *):not(:where([data-pulse-theme="light"], [data-pulse-theme="light"] *)) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M6.75.25A.75.75 0 0 1 7.5 1v2.75A3.75 3.75 0 0 1 3.75 7.5H1A.75.75 0 0 1 1 6h2.75A2.25 2.25 0 0 0 6 3.75V1a.75.75 0 0 1 .75-.75Z' fill='%236b6b6b'/%3E%3C/svg%3E") right 4px bottom 4px / 8px 8px no-repeat; }

/* ==== https://lovable.dev/assets/_slug-B7l6mHCa.css ==== */

/* ==== inline ==== */
@view-transition { navigation: auto; }

/* ==== inline ==== */
.pg-resources [data-sonner-toast][data-promise="true"] [data-icon] > svg { opacity: 0; transform: scale(0.8); transform-origin: center center; animation: 0.3s ease 0s 1 normal forwards running pg-resources-sonner-fade-in; }
.pg-resources [data-sonner-toast][data-styled="true"] [data-icon] > * { flex-shrink: 0; }
.pg-resources [data-sonner-toast][data-styled="true"] [data-icon] svg { margin-left: var(--toast-svg-margin-start); margin-right: var(--toast-svg-margin-end); }
.pg-resources [data-sonner-toast][data-styled="true"] [data-button]:first-of-type { margin-left: var(--toast-button-margin-start); margin-right: var(--toast-button-margin-end); }
.pg-resources [data-sonner-toast] > * { transition: opacity 0.4s; }
.pg-resources [data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"] > * { opacity: 0; }
@keyframes pg-resources-sonner-fade-in { 
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion) {
  .pg-resources [data-sonner-toast] > * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}

/* ==== https://lovable.dev/assets/settings-shared-leaves-dYf33hWq.css ==== */

/* ==== https://lovable.dev/assets/dashboard-shared-XaZ9w73w.css ==== */
@property --hover-scroll-leading-alpha { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --hover-scroll-trailing-alpha { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ==== https://lovable.dev/assets/app-lazy-shared-CFS7D3Z1.css ==== */
/* ==== inline ==== */
@view-transition { navigation: auto; }

/* ==== inline ==== */
.pg-resources [data-sonner-toast][data-promise="true"] [data-icon] > svg { opacity: 0; transform: scale(0.8); transform-origin: center center; animation: 0.3s ease 0s 1 normal forwards running pg-resources-sonner-fade-in; }
.pg-resources [data-sonner-toast][data-styled="true"] [data-icon] > * { flex-shrink: 0; }
.pg-resources [data-sonner-toast][data-styled="true"] [data-icon] svg { margin-left: var(--toast-svg-margin-start); margin-right: var(--toast-svg-margin-end); }
.pg-resources [data-sonner-toast][data-styled="true"] [data-button]:first-of-type { margin-left: var(--toast-button-margin-start); margin-right: var(--toast-button-margin-end); }
.pg-resources [data-sonner-toast] > * { transition: opacity 0.4s; }
.pg-resources [data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"] > * { opacity: 0; }
@keyframes pg-resources-sonner-fade-in { 
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion) {
  .pg-resources [data-sonner-toast] > * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}/* 2. Gnar skin + section pull-ins (copied from the blog-post template's src/skin-r2.css) */
/* skin-r2.css — the Gnar skin over Lovable's ported article CSS (round 2, Evan's pick 2026-10-01).
   The four swaps only: colours → kit tokens, fonts → Geist / Geist Mono, sizes → the homepage ladder, plus the
   section pull-ins named in council/DECISIONS.md R2-4 (each block below says which site it comes from).
   Lovable's geometry (container, columns, gaps, radii, leading) stays as ported. */

/* ---------- swap 1: colours. Lovable colours its classes with hsl(var(--marketing-*)); Gnar's text colours are
   white alphas that hsl() cannot carry, so each colour class points at a kit token instead. */
.pg-resources .dark { color: var(--fg); background: var(--bg); }
.pg-resources .text-marketing-foreground,
.pg-resources .hover\:text-marketing-foreground:hover { color: var(--fg); }
.pg-resources .text-marketing-muted-foreground,
.pg-resources .visited\:text-marketing-muted-foreground:visited { color: var(--fg-small); }
.pg-resources .border-marketing-border { border-color: var(--line); }
.pg-resources .border-marketing-primary { border-color: var(--accent); }
.pg-resources .bg-marketing-muted { background-color: var(--surface-1); }
.pg-resources .bg-marketing-primary, .pg-resources .hover\:bg-marketing-primary\/90:hover { background-color: var(--accent); }
.pg-resources .hover\:bg-marketing-primary\/90:hover { background-color: var(--accent-hover); }
.pg-resources .text-marketing-primary-foreground { color: var(--accent-ink); }
.pg-resources .\[\&_a\]\:text-marketing-primary a { color: var(--fg); text-decoration-color: var(--accent); }
.pg-resources .marker\:text-marketing-muted-foreground ::marker { color: var(--fg-caption); }
/* prose: body + headings full white (read floor: prose contrast ≥ 7:1), links white with the orange underline
   (the homepage's link mark), inline code on the plate */
.pg-resources .prose { --tw-prose-body: var(--fg); --tw-prose-headings: var(--fg); --tw-prose-bold: var(--fg); --tw-prose-links: var(--fg);
  --tw-prose-bullets: var(--fg-caption); --tw-prose-counters: var(--fg-caption); --tw-prose-quotes: var(--fg); --tw-prose-quote-borders: var(--accent);
  --tw-prose-hr: var(--line); --tw-prose-code: var(--fg); --tw-prose-pre-bg: var(--surface-1); --tw-prose-pre-code: var(--fg);
  --tw-prose-invert-body: var(--fg); --tw-prose-invert-headings: var(--fg); --tw-prose-invert-links: var(--fg); --tw-prose-invert-bold: var(--fg);
  --tw-prose-invert-bullets: var(--fg-caption); --tw-prose-invert-quotes: var(--fg); --tw-prose-invert-quote-borders: var(--accent); --tw-prose-invert-code: var(--fg); }
.pg-resources .prose a { color: var(--fg); text-decoration-color: var(--accent); text-decoration-thickness: 1px; padding-block: 2px; }
.pg-resources aside.bg-marketing-muted a { padding-block: 3px; }   /* tap height ≥24px (run-all touch), line box unchanged */
.pg-resources .prose a:hover { text-decoration-color: var(--fg); }
.pg-resources .prose p, .pg-resources .prose li, .pg-resources .prose strong { color: var(--fg); }
.pg-resources .prose :not(pre) > code::before, .pg-resources .prose :not(pre) > code::after { content: none; }
.pg-resources .prose :not(pre) > code { background: var(--surface-elevated); color: var(--fg); font-family: var(--font-mono); font-size: .875em; font-weight: 500; padding: .1em .35em; border-radius: 4px; }   /* typography plugin sets 600; Geist Mono runs 400/500 */

/* ---------- swap 2: fonts. Lovable's Camera Plain → Geist; Roboto Mono → Geist Mono */
.pg-resources .dark, .pg-resources .prose { font-family: var(--font-sans); }
.pg-resources { --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --font-weight-medium: 500; }   /* the donor's :root redefines these on the wrapper; the kit's values win */
.pg-resources h1, .pg-resources h2, .pg-resources h3, .pg-resources :is(h1, h2, h3).font-medium, .pg-resources .prose :is(h2, h3) { font-family: var(--font-sans); font-weight: 600; }   /* Lovable's .font-medium (480) outranks a bare h1 rule */

/* ---------- swap 3: sizes onto the homepage ladder (1440: …14, 17, 18.14, 20, 30, 52…; 390: …14-17, 20, 24, 36…).
   Lovable: h1 36 → 52 (36 on phones), h2 30 → 30, h3 ~24 → 20, related titles 24 → 20, body 18 → 18 (17 on phones,
   the read floor), meta 14 stays. */
.pg-resources h1.text-4xl { font-size: 52px; line-height: 1.06; letter-spacing: -.035em; }
.pg-resources .prose :is(h2, h3, h4) { color: var(--fg); }   /* Lovable's prose-h2:text-marketing-foreground paints its cream */
.pg-resources .prose h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.pg-resources .prose h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; margin-top: 2em; }
.pg-resources .mt-16 h3.text-2xl { font-size: 24px; line-height: 1.25; }   /* Lovable's 24 (CP-B: Codex + Opus) */
.pg-resources .mt-16 h2.text-2xl { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.pg-resources #newsletter h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
@media (min-width: 48rem) { .pg-resources .md\:prose-lg { font-size: 18px; line-height: 1.55; } }
@media (max-width: 767px) {
  .pg-resources h1.text-4xl { font-size: 36px; line-height: 1.25; }   /* Lovable's leading-tight 45px pitch (CP-B Codex) */
  .pg-resources .prose { font-size: 17px; line-height: 1.6; }
  .pg-resources .prose h2 { font-size: 24px; }
  .pg-resources #newsletter h2 { font-size: 24px; }
}

/* Lovable's <main class="container"> adds a 16px gutter outside its px-4 (32px a side on phones); our main is the kit's */
.pg-resources .min-h-screen { padding-inline: 16px; }

/* page offset under the kit's fixed nav */
.pg-resources .min-h-screen > .mx-auto { padding-top: calc(var(--nav-clear) + 32px); }
.pg-resources .sticky.top-24 { top: calc(var(--nav-clear) + 24px); }
.pg-resources .prose :is(h2, h3) { scroll-margin-top: calc(var(--nav-clear) + 24px); }

/* reading measure: Geist at 18px runs ~79-84 characters a line in Lovable's 672px column (Lovable's narrower face runs 73);
   the article is capped at 660px so lines stay in the 60-75 band (read-gate R4) */
.pg-resources article.prose { max-width: 660px; }

/* hero: Gnar's file is 600 × 340 — shown at its own size, never stretched (Lovable's slot is 672 wide at 2:1) */
.pg-resources .pg-resources-hero { max-width: 600px; aspect-ratio: 600 / 340; }
.pg-resources .pg-resources-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- pull-in: breadcrumb (Retool: Blog / Category / Title), in Lovable's back-link slot and colour */
.pg-resources .pg-resources-crumbs { margin-bottom: 32px; font-size: 14px; line-height: 20px; }
.pg-resources .pg-resources-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-resources .pg-resources-crumbs li { display: flex; align-items: center; gap: 8px; color: var(--fg-small); min-width: 0; }
.pg-resources .pg-resources-crumbs li + li::before { content: "/"; color: var(--fg-caption); }
.pg-resources .pg-resources-crumbs a { color: var(--fg-small); text-decoration: none; padding: 10px 0; margin: -10px 0; }
.pg-resources .pg-resources-crumbs a:hover { color: var(--fg); }
.pg-resources .pg-resources-crumbs [aria-current] span { color: var(--fg-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
@media (max-width: 767px) { .pg-resources .pg-resources-crumbs [aria-current] { display: none; } }

/* ---------- pull-in: byline row (Sanity: org + date between two hairlines, share icons on the right) */
.pg-resources .pg-resources-byline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 32px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pg-resources .pg-resources-byline__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 14px; line-height: 20px; color: var(--fg-small); }
.pg-resources .pg-resources-byline__org { color: var(--fg); font-weight: 500; }
.pg-resources .pg-resources-byline__share { display: flex; gap: 4px; }
/* share buttons (Sanity set, Lovable's 24px icon), hit area 40px */
.pg-resources .pg-resources-share { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -8px; color: var(--fg-small); background: none; border: 0; border-radius: var(--radius-full); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.pg-resources .pg-resources-share svg { width: 20px; height: 20px; }
.pg-resources .pg-resources-byline .pg-resources-share { margin: 0; }
@media (hover: hover) and (pointer: fine) { .pg-resources .pg-resources-share:hover { color: var(--fg); background: var(--surface-elevated); } }
.pg-resources .pg-resources-share.is-copied { color: var(--accent); }
.pg-resources aside nav .flex.gap-3 { gap: 4px; margin-left: -10px; }
.pg-resources aside nav .flex.gap-3 .pg-resources-share { margin: 0; }
.pg-resources aside nav hr { margin: 0; }

/* ---------- contents rail (Lovable's), with Mintlify's "you are here" marker */
.pg-resources aside nav > .flex.flex-col.gap-2 { gap: 0; }   /* Lovable has no track; only the active marker shows (CP-B, Opus clone judge) */
.pg-resources [data-pg-resources-toc-link] { display: block; padding: 4px 0 4px 12px; border-left: 2px solid transparent; line-height: 20px; }   /* marker inside the rail box: the rail's overflow guard clips anything outside it */   /* one continuous track; Lovable's 8px gap becomes 4+4 padding */
.pg-resources [data-pg-resources-toc-link].is-active { color: var(--fg); border-left-color: var(--accent); }
.pg-resources aside nav > .text-sm { color: var(--fg-small); }

/* ---------- pull-in: AI links (Supabase's row under the contents) */
.pg-resources .pg-resources-ai { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: -16px; font-size: 14px; line-height: 20px; }
/* the rail must fit a 1280×720 laptop: Lovable's 32px group gap → 24, and a height guard so the ask can always be reached */
.pg-resources aside nav.sticky { gap: 24px; max-height: calc(100vh - var(--nav-clear) - 48px); overflow-y: auto; scrollbar-width: none; }
.pg-resources aside nav.sticky::-webkit-scrollbar { display: none; }
.pg-resources .pg-resources-ai :is(a, button) { display: block; text-align: left; padding: 6px 0; color: var(--fg-small); background: none; border: 0; font: inherit; cursor: pointer; text-decoration: none; }
.pg-resources .pg-resources-ai :is(a, button):hover { color: var(--fg); }
.pg-resources .pg-resources-ai button.is-copied { color: var(--accent); }

/* ---------- pull-in: the ask in the rail (Mintlify's rail CTA, one block, no email field) */
.pg-resources .pg-resources-ask { padding-top: 8px; }
.pg-resources .pg-resources-ask p { margin: 0 0 16px; font-size: 14px; line-height: 21px; color: var(--fg-small); }

/* ---------- pull-in: phone contents box (Cursor's collapsible "Table of contents" above the article) */
.pg-resources .pg-resources-mtoc { margin-top: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1); }
.pg-resources .pg-resources-mtoc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-size: 15px; color: var(--fg-small); cursor: pointer; list-style: none; }
.pg-resources .pg-resources-mtoc summary::-webkit-details-marker { display: none; }
.pg-resources .pg-resources-mtoc[open] summary svg { transform: rotate(180deg); }
.pg-resources .pg-resources-mtoc summary svg { transition: transform .2s ease; }
.pg-resources .pg-resources-mtoc ol { list-style: none; margin: 0; padding: 0 16px 12px; }
.pg-resources .pg-resources-mtoc ol ol { padding: 0 0 0 16px; }
.pg-resources .pg-resources-mtoc a { display: block; padding: 8px 0; font-size: 15px; line-height: 21px; color: var(--fg); text-decoration: none; }
.pg-resources .pg-resources-mtoc ol ol a { color: var(--fg-small); }
@media (min-width: 64rem) { .pg-resources .pg-resources-mtoc { display: none; } }

/* ---------- pull-in: heading anchors (Linear's "#" on hover; always visible to keyboard focus) */
.pg-resources .pg-resources-anchor { margin-left: .3em; color: var(--fg-caption); text-decoration: none !important; opacity: 0; transition: opacity .15s ease; font-weight: 400; }
.pg-resources .prose :is(h2, h3):hover .pg-resources-anchor, .pg-resources .pg-resources-anchor:focus-visible { opacity: 1; }
@media not ((hover: hover) and (pointer: fine)) { .pg-resources .pg-resources-anchor { display: none; } }

/* ---------- pull-in: code blocks (Vercel's frame: header bar with the language + copy, 8px radius, hairline border)
   set at 16px Geist Mono (Vercel ships 13px; the read floor is 15), Lovable's wrap kept so nothing runs off a phone */
.pg-resources .pg-resources-code { margin: 24px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1); overflow: hidden; }
.pg-resources .pg-resources-code__bar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.pg-resources .pg-resources-code__lang { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--fg-small); }
.pg-resources .pg-resources-code__copy { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; font-family: var(--font-mono); font-size: 14px; color: var(--fg-small); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.pg-resources .pg-resources-code__copy:hover { color: var(--fg); background: var(--surface-elevated); }
.pg-resources .pg-resources-code__copy.is-copied { color: var(--accent); }
.pg-resources .prose .pg-resources-code pre, .pg-resources .prose .pg-resources-code pre[class] { margin: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; padding: 16px !important; max-height: none; }
.pg-resources .prose .pg-resources-code pre code { font-family: var(--font-mono); font-size: 16px; line-height: 1.6 !important; color: var(--fg); }
/* phones: Ruby wrapped mid-expression loses its indentation, so on phones code keeps its lines and scrolls inside the
   frame, with an edge fade as the "more this way" cue (read-gate R6: scroll cue present) */
@media (max-width: 767px) {
  .pg-resources .prose .pg-resources-code pre, .pg-resources .prose .pg-resources-code pre code { white-space: pre !important; overflow-wrap: normal !important; word-break: normal !important; }
  .pg-resources .prose .pg-resources-code pre code { font-size: 15px; }
}
/* code colours: Lovable's own --hl-* hooks, re-pointed to Gnar's code palette (orange keywords, white alphas) */
.pg-resources .dark .prose-allow-pre-styles { --hl-base: var(--fg); --hl-keyword: var(--accent); --hl-title: var(--fg); --hl-attr: rgba(255,255,255,.82); --hl-string: rgba(255,255,255,.82); --hl-built-in: var(--accent); --hl-comment: rgba(255,255,255,.68); }
.pg-resources .prose .hljs { background: transparent; color: var(--fg); }
.pg-resources .prose :is(.hljs-keyword, .hljs-built_in, .hljs-type, .hljs-literal, .hljs-variable.language_) { color: var(--accent); }
.pg-resources .prose :is(.hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-title.class_.inherited__) { color: var(--fg); }
.pg-resources .prose :is(.hljs-string, .hljs-regexp) { color: rgba(255,255,255,.82); }
.pg-resources .prose :is(.hljs-number, .hljs-symbol, .hljs-attr, .hljs-attribute, .hljs-params, .hljs-variable, .hljs-property, .hljs-operator) { color: rgba(255,255,255,.74); }
.pg-resources .prose :is(.hljs-comment, .hljs-doctag, .hljs-meta) { color: rgba(255,255,255,.68); font-style: normal; }   /* .45 measured 4.46:1 on the raised plate */

/* blockquote (the live "Enjoying this content?" callout): Lovable's prose quote with the accent bar */
.pg-resources .prose blockquote { border-left: 3px solid var(--accent); padding-left: 20px; font-style: normal; }
.pg-resources .prose blockquote p::before, .pg-resources .prose blockquote p::after { content: none; }

/* Lovable's author photo slot holds Gnar's mark (no named author on this post); the mark is contained, not cropped */
.pg-resources .pg-resources-about-mark { object-fit: contain; padding: 8px; background: var(--surface-elevated); }

/* about box (Lovable's author aside) and the button family. Lovable's reset (a { color: inherit }) outranks .k-btn's ink */
.pg-resources a.k-btn, .pg-resources button.k-btn { color: var(--accent-ink); background: var(--accent); border: 1px solid transparent; border-radius: var(--radius-pill); font: var(--btn-font); }   /* Lovable's reset (a/button: inherit, transparent) outranks .k-btn */
.pg-resources a.k-btn:hover, .pg-resources button.k-btn:hover { background: var(--accent-hover); }
.pg-resources aside[aria-labelledby="about-author-heading"] { color: var(--fg-small); }
.pg-resources aside[aria-labelledby="about-author-heading"] > div { font-size: 17px; line-height: 1.6; }   /* Lovable 0.95em of its base = 15.75 here; under the 16px floor */
.pg-resources .pg-resources-about-cta { margin-top: 16px; }   /* the ask at the end of the article, at every width (the rail ask is desktop-only) */
/* plates: Lovable's muted plate sits visibly above its ground; the kit's raised surface gives the same step on Gnar's ground */
.pg-resources .bg-marketing-muted, .pg-resources .pg-resources-code, .pg-resources .pg-resources-mtoc { background-color: var(--surface-raised); }
.pg-resources .pg-resources-ask .k-btn { width: 100%; justify-content: center; }

/* related cards: Gnar's own illustrations keep their picture (Lovable's 16:9 frame matches Gnar's 1200 × 675 heroes) */
.pg-resources .mt-16 .grid a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pg-resources .mt-16 .grid a:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } }

/* newsletter (Lovable's closing band, Gnar's live copy; the form is inert on previews) */
.pg-resources #newsletter { text-align: center; padding-left: 24px; padding-right: 24px; }
.pg-resources #newsletter p { max-width: 56ch; }
.pg-resources .pg-resources-nl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 440px; }
.pg-resources .pg-resources-nl input { flex: 1 1 220px; min-height: 44px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--fg); background: var(--input); border: 1px solid var(--line); border-radius: 8px; }
.pg-resources .pg-resources-nl input::placeholder { color: var(--fg-caption); }
.pg-resources .pg-resources-nl input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pg-resources .pg-resources-nl button { cursor: pointer; }
.pg-resources .pg-resources-nl__msg { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; color: var(--fg-small); }

/* optional slots (rendered only when a post carries the data) */
/* Key takeaways: Lovable's About-box shape (raised plate, 3px accent bar, 8px radius) above the article */
.pg-resources .pg-resources-takeaways { max-width: 660px; margin: 0 0 40px; padding: 20px 24px; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface-raised); }
.pg-resources .pg-resources-takeaways__title { margin: 0 0 12px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--fg); }
.pg-resources .pg-resources-takeaways ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; list-style: disc; }   /* Lovable reset strips list markers outside .prose */
.pg-resources .pg-resources-takeaways li { font-size: 18px; line-height: 1.55; color: var(--fg); }
.pg-resources .pg-resources-takeaways li::marker { color: var(--accent); }
/* FAQ: separate raised rows with gaps, no divider lines (Evan: grey lines are slop) */
.pg-resources .pg-resources-faq { max-width: 660px; margin-top: 64px; }
.pg-resources .pg-resources-faq h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; color: var(--fg); }
.pg-resources .pg-resources-faq details { margin-top: 8px; border-radius: 8px; background: var(--surface-raised); }
.pg-resources .pg-resources-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--fg); }
.pg-resources .pg-resources-faq summary::-webkit-details-marker { display: none; }
.pg-resources .pg-resources-faq summary svg { flex-shrink: 0; transition: transform .2s ease; color: var(--fg-small); }
.pg-resources .pg-resources-faq details[open] summary svg { transform: rotate(180deg); }
.pg-resources .pg-resources-faq details p { margin: 0; padding: 0 20px 18px; font-size: 17px; line-height: 1.6; color: var(--fg-small); }
@media (max-width: 767px) { .pg-resources .pg-resources-faq h2 { font-size: 24px; } .pg-resources .pg-resources-takeaways li, .pg-resources .pg-resources-faq summary { font-size: 17px; } }

/* focus ring: the kit's orange ring everywhere in the page */
.pg-resources :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .pg-resources * { transition: none !important; } }
/* short laptop screens (≤760px tall): the rail ask keeps its button and drops its line, so the button is always in view */
@media (max-height: 760px) { .pg-resources .pg-resources-ask p { display: none; } }

/* the TG_* glossary (live CMS flattened it into one run-on paragraph; rendered as a definition list, words unchanged) */
.pg-resources .prose .pg-resources-dl { display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; margin: 24px 0; }
.pg-resources .prose .pg-resources-dl dt { margin: 0; font-weight: 400; }
.pg-resources .prose .pg-resources-dl dd { margin: 0; padding: 0; color: var(--fg); }
@media (max-width: 767px) { .pg-resources .prose .pg-resources-dl { grid-template-columns: 1fr; gap: 4px; } .pg-resources .prose .pg-resources-dl dd { margin-bottom: 12px; } }
/* code keeps its lines at every width (wrapping Ruby/SQL mid-expression loses the indentation that carries meaning);
   long lines scroll inside the frame with the edge fade as the cue. Logged deviation from Lovable's pre-wrap. */
.pg-resources .prose .pg-resources-code pre, .pg-resources .prose .pg-resources-code pre code { white-space: pre !important; overflow-wrap: normal !important; word-break: normal !important; }
.pg-resources .prose .pg-resources-code pre { overflow-x: auto !important; }
.pg-resources .prose .pg-resources-code pre.has-overflow:not(.is-scrolled-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
/* phones: the About box stacks (the 64px mark beside 17px text left ~18 characters a line) and the article starts closer */
@media (max-width: 639px) {
  .pg-resources aside[aria-labelledby="about-author-heading"] { flex-direction: column; gap: 12px; }
  .pg-resources .pt-12 { padding-top: 32px; }
}
/* the frame's <pre> is the scroller (hljs ships `pre code.hljs { overflow-x: auto }`, which made the inner <code> scroll
   silently and left the fade off) */
.pg-resources .prose .pg-resources-code pre code, .pg-resources .prose .pg-resources-code pre code.hljs { overflow: visible !important; padding: 0 !important; display: block; width: max-content; min-width: 100%; }

/* ================================================================ INDEX (Lovable /blog) */
.pg-resources .flex.min-h-screen.pt-16 { padding-top: calc(var(--nav-clear) + 48px); }
.pg-resources aside .md\:sticky.md\:top-20 { top: calc(var(--nav-clear) + 24px); }
.pg-resources aside h1.text-5xl { font-size: 36px; line-height: 1.1; letter-spacing: -.035em; }   /* phones 36px, desktop 40px: the title was larger on phones than on desktop (design review 10/14) */

.pg-resources aside h1.text-5xl + p { font-size: 17px; line-height: 1.55; color: var(--fg-small); }
@media (min-width: 48rem) { .pg-resources aside h1.text-5xl + p { font-size: 15px; line-height: 1.5; } }
.pg-resources nav[data-pg-resources-jump] a { padding-block: 10px; margin-block: -10px; text-decoration: none; }
@media (min-width: 48rem) { .pg-resources nav[data-pg-resources-jump] { gap: 12px; } .pg-resources nav[data-pg-resources-jump] a { padding-block: 4px; margin-block: 0; } }
.pg-resources nav[data-pg-resources-jump] a.active { color: var(--fg); }
.pg-resources nav[data-pg-resources-jump] a.active::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 1px; background: var(--accent); vertical-align: 2px; }   /* the "you are here" mark, same as the post's contents marker */
.pg-resources [data-pg-resources-grid] h3.text-2xl { font-size: 24px; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
.pg-resources [data-pg-resources-grid] p.line-clamp-2 { font-size: 17px; line-height: 1.55; color: var(--fg-small); }
.pg-resources [data-pg-resources-grid] > a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pg-resources [data-pg-resources-grid] > a:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } }
.pg-resources [data-pg-resources-grid] > a[hidden] { display: none; }
/* search (pull-in: Gnar's live /blog search, in Lovable's field dialect: hairline, 8px radius) */
.pg-resources .pg-resources-search { position: relative; display: flex; align-items: center; color: var(--fg-caption); }
.pg-resources .pg-resources-search svg { position: absolute; left: 12px; pointer-events: none; }
.pg-resources .pg-resources-search input { width: 100%; min-height: 44px; padding: 0 12px 0 36px; font: inherit; font-size: 16px; color: var(--fg); background: var(--input); border: 1px solid var(--line); border-radius: 8px; }
.pg-resources .pg-resources-search input::placeholder { color: var(--fg-caption); }
.pg-resources .pg-resources-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pg-resources .pg-resources-empty { color: var(--fg-small); font-size: 17px; }
.pg-resources .pg-resources-empty a { color: var(--fg); text-decoration-color: var(--accent); }
@media (max-width: 47.99rem) {
  .pg-resources .flex.min-h-screen.pt-16 > aside { margin-bottom: 40px; }
  /* the category row scrolls sideways on phones (Lovable's); an edge fade says there is more */
  .pg-resources nav[data-pg-resources-jump] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 32px; }
}

/* ================================================================ CP-C fixes */
/* code: Geist Mono's ligatures drew -> as an arrow and != as ≠ (CP-C reader, Opus): code shows the characters typed */
.pg-resources :is(pre, code, kbd, samp) { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
/* code frames use the full article column on desktop (the prose stays at 660px), so fewer lines need scrolling */
@media (min-width: 64rem) { .pg-resources .prose .pg-resources-code { width: min(100%, calc(100vw - 2rem)); } .pg-resources article.prose:has(.pg-resources-code) { max-width: none; } .pg-resources article.prose > :not(.pg-resources-code) { max-width: 660px; } }
/* an explicit cue when a block scrolls sideways (the fade alone read as "faint", CP-C reader + first-principles) */
.pg-resources .pg-resources-code__more { display: none; margin-left: auto; margin-right: 8px; font-family: var(--font-mono); font-size: 14px; color: var(--fg-small); }
.pg-resources .pg-resources-code.has-overflow .pg-resources-code__more { display: inline; }
.pg-resources .prose .pg-resources-code pre.has-overflow:not(.is-scrolled-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0,0,0,.15)); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0,0,0,.15)); }
/* index: Lovable's <main class="container"> (max 1280, 80px gutters) holds the side column + an 800px grid */
@media (min-width: 64rem) { .pg-resources .dark > .flex.min-h-screen.pt-16 { max-width: 1280px; margin-inline: auto; padding-inline: 80px; } }
@media (min-width: 48rem) { .pg-resources aside h1.md\:text-4xl { font-size: 38px; line-height: 1.15; letter-spacing: -.02em; } }
/* phones: the four categories wrap instead of hiding the fourth behind a scroll (CP-C reader + first-principles) */
@media (max-width: 47.99rem) { .pg-resources nav[data-pg-resources-jump] { flex-wrap: wrap; row-gap: 12px; white-space: normal; -webkit-mask-image: none; mask-image: none; padding-right: 0; } }

/* rail order (CP-C Codex contrarian): the ask now comes before the AI links, so the page makes its case before it offers an exit */
.pg-resources .pg-resources-ask + .pg-resources-ai { margin-top: 0; }

/* Evan 2026-10-01: no grey divider lines in the rail ("AI slop"). Groups separate by space alone: the rail's 24px gap
   plus 8px more before Share and before the ask. Same for the index side column. */
.pg-resources aside nav.sticky > div:has(> .mb-2) { padding-top: 8px; }

/* ================================================================ V22: zero grey lines (Evan 2026-10-01, after V21:
   "Still gray lines between the title, the Gnar company, and the image… look harder"). Every grey border inside the page
   goes; groups separate by space, surfaces by fill. Only the orange marks remain. Gated by tools/line-census.mjs. */
.pg-resources .pg-resources-byline { border-top: 0; border-bottom: 0; padding: 0; margin: 0 0 32px; }
.pg-resources h1.text-4xl.mb-8 { margin-bottom: 20px; }
.pg-resources .pg-resources-code { border: 0; background: var(--surface-raised); }
.pg-resources .pg-resources-code__bar { border-bottom: 0; background: var(--surface-elevated); }
.pg-resources .pg-resources-mtoc { border: 0; background: var(--surface-raised); }
.pg-resources #newsletter { border: 0; background: var(--surface-raised); }
.pg-resources .pg-resources-nl input, .pg-resources .pg-resources-search input { border: 0; background: var(--surface-elevated); }
.pg-resources .pg-resources-search input { background: var(--surface-raised); }

/* V22 hard-look fixes */
/* rail: the three AI links stack (they wrapped raggedly, "Ask Claude" alone on a second line) */
.pg-resources .pg-resources-ai { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.pg-resources .pg-resources-ai :is(a, button) { padding: 4px 0; }
/* one right edge for every box in the column: takeaways, code, FAQ and About all span the full 672px column */
@media (min-width: 64rem) { .pg-resources .pg-resources-takeaways, .pg-resources .pg-resources-faq { max-width: none; } }
/* index side column: the intro line uses the column's full width (it wrapped to 5 lines at 144px) */
@media (min-width: 48rem) { .pg-resources aside .md\:w-3\/4 { width: 100%; } }
/* phones: the four categories sit in a 2 x 2 grid (wrapping left "Product Insights" orphaned on its own line) */
@media (max-width: 47.99rem) { .pg-resources nav[data-pg-resources-jump] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } }

/* ---------- V23 author (Mike 2026-10-01: "add the author and a bio to the blog posts for AEO credibility") */
.pg-resources .pg-resources-byline__author { display: inline-flex; align-items: center; gap: 12px; }
.pg-resources .pg-resources-byline__author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.pg-resources .pg-resources-byline__author > span { display: flex; flex-direction: column; line-height: 20px; }
.pg-resources .pg-resources-byline__role { color: var(--fg-small); }
.pg-resources .pg-resources-byline__who:has(.pg-resources-byline__author) { align-items: center; }
.pg-resources .pg-resources-authorbox__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.pg-resources .pg-resources-authorbox__role { font-size: 14px; color: var(--fg-small); margin-bottom: 10px; }
@media (max-width: 639px) { .pg-resources .pg-resources-byline:has(.pg-resources-byline__author) { flex-wrap: wrap; row-gap: 12px; } .pg-resources .pg-resources-byline:has(.pg-resources-byline__author) .pg-resources-byline__who { flex: 1 1 100%; } }
/* 3. resources page additions (src/css/resources.css) */
/* resources.css — this page's additions to the blog-index template (pages/blog-post src/skin-r2.css, copied as-is).
   Only what the index has no part for: a heading row over each card group (the live page's heading, line and
   "See All" button), the case cards' client name, the "Read full article" line, and the closing CTA band's button. */

/* two card groups in the grid column, separated by space (no lines: Evan 2026-10-01) */
.pg-resources .pg-resources-main { gap: 0; }
.pg-resources .pg-resources-group + .pg-resources-group { margin-top: 96px; }
.pg-resources .pg-resources-group { scroll-margin-top: calc(var(--nav-clear) + 24px); }
.pg-resources .pg-resources-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.pg-resources .pg-resources-head__copy { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.pg-resources .pg-resources-head h2.text-2xl { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
.pg-resources .pg-resources-head p { font-size: 17px; line-height: 1.55; color: var(--fg-small); margin: 0; }
.pg-resources .pg-resources-head .k-btn { flex-shrink: 0; }

/* side column: the live intro is three sentences, so it takes the column's full width (the template's 3/4 is for one line) */
.pg-resources .pg-resources-intro p + p { margin-top: 12px; }

/* cards: tag and client on one line, a small square between them (the template's orange mark, not a typed character) */
.pg-resources .pg-resources-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.pg-resources .pg-resources-client { color: var(--fg); display: inline-flex; align-items: center; gap: 10px; }
.pg-resources .pg-resources-client::before { content: ""; width: 4px; height: 4px; border-radius: 1px; background: var(--accent); }
.pg-resources .pg-resources-more { color: var(--fg); }
.pg-resources .pg-resources-more svg { color: var(--accent); transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) { .pg-resources [data-pg-resources-grid] > a:hover .pg-resources-more svg { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .pg-resources .pg-resources-more svg { transition: none; } }

/* newsletter band sits under the groups */
.pg-resources #newsletter { margin-top: 96px; text-align: center; padding-inline: 24px; }

/* closing CTA band: the kit's .k-cta, with the live button where the kit puts its email pill */
.pg-resources .pg-resources-cta { padding: 0 0 120px; }
.pg-resources .pg-resources-cta-btn { margin-top: 8px; }

@media (max-width: 47.99rem) {
  .pg-resources .pg-resources-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .pg-resources .pg-resources-head h2.text-2xl { font-size: 24px; }
  .pg-resources .pg-resources-group + .pg-resources-group, .pg-resources #newsletter { margin-top: 72px; }
  .pg-resources .pg-resources-cta { padding-bottom: 72px; }
}

/* round 1 fixes (see NOTES "Gates and reviews") */
/* the "See All" buttons are the kit's ghost button; the template skin paints every a.k-btn orange, so the ghost is restored */
.pg-resources a.k-btn.k-btn--ghost { color: var(--fg); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.24); }
.pg-resources a.k-btn.k-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
/* the CTA band's heading and line: Lovable's heading reset outranks the kit's .k-h2 / .k-lede, so their kit values come back */
.pg-resources .k-cta .k-h2 { font: var(--h2-w) var(--h2)/var(--h2-lh) var(--font-sans); letter-spacing: var(--h2-ls); color: var(--fg); }
.pg-resources .k-cta .k-lede { font: 400 var(--body)/var(--body-lh) var(--font-sans); color: var(--fg-body); }
/* three cards per group: the first spans the row (the newest, in live order), the other two sit under it, so no card stands alone */
@media (min-width: 64rem) {
  .pg-resources [data-pg-resources-grid] > .pg-resources-feature { grid-column: 1 / -1; }
  .pg-resources [data-pg-resources-grid] > .pg-resources-feature h3.text-2xl { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; max-width: 680px; text-wrap: balance; }
}

/* V2: 768-1023 (tablets). The side column sits beside a ~450px card column there, so two-up cards were ~210px wide with
   five-line titles. One card per row, and the heading, line and button stack, until the column is wide enough at 1024. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .pg-resources [data-pg-resources-grid] { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .pg-resources .pg-resources-head { flex-direction: column; align-items: flex-start; }
}

/* V3: the template card's 1% hover zoom is motion; people who ask for reduced motion get the underline only */
@media (prefers-reduced-motion: reduce) { .pg-resources [data-pg-resources-grid] > a { transition: none; } .pg-resources [data-pg-resources-grid] > a:hover { transform: none; } }