@m13v/seo-components 0.9.2 → 0.10.0

package/dist/styles.css

@@ -1,2 +1,2 @@
 *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-left-8{left:-2rem}.bottom-0{bottom:0}.bottom-2{bottom:.5rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-1\/2{left:50%}.left-2\.5{left:.625rem}.left-3{left:.75rem}.left-4{left:1rem}.right-0{right:0}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.m-1{margin:.25rem}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-12{margin-top:3rem;margin-bottom:3rem}.my-16{margin-top:4rem;margin-bottom:4rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.-ml-px{margin-left:-1px}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-14{margin-bottom:3.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-3{margin-left:.75rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-11{height:2.75rem}.h-16{height:4rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[14px\]{height:14px}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-32{max-height:8rem}.min-h-0{min-height:0}.min-h-\[120px\]{min-height:120px}.min-h-\[180px\]{min-height:180px}.min-h-\[200px\]{min-height:200px}.min-h-\[280px\]{min-height:280px}.min-h-\[60px\]{min-height:60px}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-2\.5{width:.625rem}.w-3\.5{width:.875rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-5{width:1.25rem}.w-5\/6{width:83.333333%}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-\[7px\]{width:7px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[300px\]{min-width:300px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[180px\]{max-width:180px}.max-w-\[85\%\]{max-width:85%}.max-w-\[90\%\]{max-width:90%}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-screen-xl{max-width:1280px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-top{transform-origin:top}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-0{--tw-translate-x:0px}.transform,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[shimmer_2\.2s_infinite\]{animation:shimmer 2.2s infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-y-2{row-gap:.5rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-zinc-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(228 228 231/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[var\(--seo-accent\2c \#14b8a6\)\]{border-color:var(--seo-accent,#14b8a6)}.border-emerald-500\/30{border-color:rgba(16,185,129,.3)}.border-teal-100{--tw-border-opacity:1;border-color:rgb(204 251 241/var(--tw-border-opacity,1))}.border-teal-200{--tw-border-opacity:1;border-color:rgb(153 246 228/var(--tw-border-opacity,1))}.border-teal-400{--tw-border-opacity:1;border-color:rgb(45 212 191/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-zinc-100{--tw-border-opacity:1;border-color:rgb(244 244 245/var(--tw-border-opacity,1))}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.border-zinc-800{--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.bg-\[\#0d1117\]{--tw-bg-opacity:1;background-color:rgb(13 17 23/var(--tw-bg-opacity,1))}.bg-\[var\(--seo-accent-light\2c rgba\(20\2c 184\2c 166\2c 0\.08\)\)\]{background-color:var(--seo-accent-light,rgba(20,184,166,.08))}.bg-amber-400\/60{background-color:rgba(251,191,36,.6)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-emerald-400\/60{background-color:rgba(52,211,153,.6)}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-500\/10{background-color:rgba(16,185,129,.1)}.bg-emerald-500\/20{background-color:rgba(16,185,129,.2)}.bg-green-400\/80{background-color:rgba(74,222,128,.8)}.bg-red-400\/60{background-color:hsla(0,91%,71%,.6)}.bg-red-400\/80{background-color:hsla(0,91%,71%,.8)}.bg-teal-300{--tw-bg-opacity:1;background-color:rgb(94 234 212/var(--tw-bg-opacity,1))}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.bg-teal-50\/30{background-color:rgba(240,253,250,.3)}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity,1))}.bg-teal-500\/10{background-color:rgba(20,184,166,.1)}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/50{background-color:hsla(0,0%,100%,.5)}.bg-yellow-400\/80{background-color:rgba(250,204,21,.8)}.bg-zinc-100{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.bg-zinc-900\/50{background-color:rgba(24,24,27,.5)}.bg-zinc-950{--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-cyan-500{--tw-gradient-from:#06b6d4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(6,182,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-400{--tw-gradient-from:#2dd4bf var(--tw-gradient-from-position);--tw-gradient-to:rgba(45,212,191,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-50{--tw-gradient-from:#f0fdfa var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,253,250,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500\/40{--tw-gradient-from:rgba(20,184,166,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,184,166,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-zinc-100{--tw-gradient-from:#f4f4f5 var(--tw-gradient-from-position);--tw-gradient-to:hsla(240,5%,96%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-zinc-50{--tw-gradient-from:#fafafa var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-teal-300{--tw-gradient-to:rgba(94,234,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#5eead4 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-teal-600\/80{--tw-gradient-to:rgba(13,148,136,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,148,136,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/40{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-50\%{--tw-gradient-via-position:50%}.to-cyan-50{--tw-gradient-to:#ecfeff var(--tw-gradient-to-position)}.to-teal-500{--tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)}.to-teal-500\/10{--tw-gradient-to:rgba(20,184,166,.1) var(--tw-gradient-to-position)}.to-teal-600{--tw-gradient-to:#0d9488 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.to-zinc-100{--tw-gradient-to:#f4f4f5 var(--tw-gradient-to-position)}.to-zinc-200{--tw-gradient-to:#e4e4e7 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-no-repeat{background-repeat:no-repeat}.fill-white{fill:#fff}.fill-zinc-900{fill:#18181b}.stroke-amber-400{stroke:#fbbf24}.stroke-emerald-500{stroke:#10b981}.stroke-red-400{stroke:#f87171}.stroke-teal-500{stroke:#14b8a6}.stroke-zinc-200{stroke:#e4e4e7}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[40pt\]{font-size:40pt}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[5rem\]{line-height:5rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#8b949e\]{--tw-text-opacity:1;color:rgb(139 148 158/var(--tw-text-opacity,1))}.text-\[var\(--seo-accent\2c \#14b8a6\)\]{color:var(--seo-accent,#14b8a6)}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-teal-300{--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.text-zinc-300{--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-800{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-zinc-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(161 161 170/var(--tw-placeholder-opacity,1))}.placeholder-zinc-400::placeholder{--tw-placeholder-opacity:1;color:rgb(161 161 170/var(--tw-placeholder-opacity,1))}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-teal-500\/30{--tw-shadow-color:rgba(20,184,166,.3);--tw-shadow:var(--tw-shadow-colored)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow-sm{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)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[-moz-osx-font-smoothing\:grayscale\]{-moz-osx-font-smoothing:grayscale}.\[-webkit-font-smoothing\:antialiased\]{-webkit-font-smoothing:antialiased}.\[animation-delay\:150ms\]{animation-delay:.15s}.\[animation-delay\:300ms\]{animation-delay:.3s}.\[background-position\:0_0\]{background-position:0 0}.\[background-size\:var\(--shimmer-width\)_100\%\]{background-size:var(--shimmer-width) 100%}.\[font-smooth\:antialiased\]{font-smooth:antialiased}.\[text-rendering\:optimizeLegibility\]{text-rendering:optimizeLegibility}.\[transition\:background-position_1s_cubic-bezier\(\.6\2c \.6\2c 0\2c 1\)_infinite\]{transition:background-position infinite 1s cubic-bezier(.6,.6,0,1)}.\[will-change\:filter\2c opacity\]{will-change:filter,opacity}:root{--seo-accent:#14b8a6;--seo-accent-light:#2dd4bf;--seo-accent-dark:#0d9488;--seo-accent-rgb:20,184,166;--seo-accent-gradient-from:#06b6d4;--seo-accent-gradient-to:#14b8a6}.placeholder\:text-zinc-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.placeholder\:text-zinc-400::placeholder{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-\[0\]:before{content:var(--tw-content);inset:0}.before\:aspect-square:before{content:var(--tw-content);aspect-ratio:1/1}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:rounded-\[--border-radius\]:before{content:var(--tw-content);border-radius:var(--border-radius)}.before\:p-\[--border-width\]:before{content:var(--tw-content);padding:var(--border-width)}.before\:will-change-\[background-position\]:before{content:var(--tw-content);will-change:background-position}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\!\[-webkit-mask-composite\:xor\]:before{content:var(--tw-content);-webkit-mask-composite:xor!important}.before\:\[background-image\:var\(--background-radial-gradient\)\]:before{content:var(--tw-content);background-image:var(--background-radial-gradient)}.before\:\[background-size\:300\%_300\%\]:before{content:var(--tw-content);background-size:300% 300%}.before\:\!\[mask-composite\:exclude\]:before{content:var(--tw-content);-webkit-mask-composite:xor!important;mask-composite:exclude!important}.before\:\[mask\:var\(--mask-linear-gradient\)\]:before{content:var(--tw-content);-webkit-mask:var(--mask-linear-gradient);mask:var(--mask-linear-gradient)}.focus-within\:border-teal-300:focus-within{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity,1))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-teal-500\/20:focus-within{--tw-ring-color:rgba(20,184,166,.2)}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-teal-300:hover{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity,1))}.hover\:border-zinc-300:hover{--tw-border-opacity:1;border-color:rgb(212 212 216/var(--tw-border-opacity,1))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.hover\:bg-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity,1))}.hover\:bg-zinc-100:hover{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.hover\:bg-zinc-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.hover\:text-teal-700:hover{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity,1))}.hover\:text-zinc-600:hover{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.hover\:text-zinc-700:hover{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.hover\:text-zinc-800:hover{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.hover\:text-zinc-900:hover{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-\[var\(--seo-accent\2c \#14b8a6\)\]:focus{border-color:var(--seo-accent,#14b8a6)}.focus\:border-teal-500:focus{--tw-border-opacity:1;border-color:rgb(20 184 166/var(--tw-border-opacity,1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-teal-500\/40:focus{--tw-ring-color:rgba(20,184,166,.4)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-zinc-300:disabled{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.disabled\:opacity-60:disabled{opacity:.6}.group[open] .group-open\:rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (prefers-reduced-motion:no-preference){.motion-safe\:before\:animate-\[shine-pulse_var\(--shine-pulse-duration\)_infinite_linear\]:before{content:var(--tw-content);animation:shine-pulse var(--shine-pulse-duration) infinite linear}}.dark\:border-teal-900:is(.dark *){--tw-border-opacity:1;border-color:rgb(19 78 74/var(--tw-border-opacity,1))}.dark\:border-zinc-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.dark\:bg-teal-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(4 47 46/var(--tw-bg-opacity,1))}.dark\:bg-zinc-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(82 82 91/var(--tw-bg-opacity,1))}.dark\:bg-zinc-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\:bg-zinc-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.dark\:bg-zinc-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.dark\:text-zinc-100:is(.dark *){--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.dark\:text-zinc-400:is(.dark *){--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.dark\:text-zinc-500:is(.dark *){--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:text-zinc-600:is(.dark *){--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.dark\:placeholder\:text-zinc-500:is(.dark *)::-moz-placeholder{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:placeholder\:text-zinc-500:is(.dark *)::placeholder{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:focus-within\:border-teal-700:focus-within:is(.dark *){--tw-border-opacity:1;border-color:rgb(15 118 110/var(--tw-border-opacity,1))}.dark\:hover\:border-teal-700:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(15 118 110/var(--tw-border-opacity,1))}.dark\:hover\:border-zinc-700:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(63 63 70/var(--tw-border-opacity,1))}.dark\:hover\:bg-zinc-800:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\:hover\:bg-zinc-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.dark\:hover\:text-teal-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.dark\:hover\:text-zinc-100:hover:is(.dark *){--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.dark\:disabled\:bg-zinc-700:disabled:is(.dark *){--tw-bg-opacity:1;background-color:rgb(63 63 70/var(--tw-bg-opacity,1))}@media (min-width:640px){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:block{display:block}.md\:h-24{height:6rem}.md\:min-w-\[340px\]{min-width:340px}.md\:flex-initial{flex:0 1 auto}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-12{padding:3rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-12{width:3rem}.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:text-\[6rem\]{font-size:6rem}}@media (min-width:1280px){.xl\:flex{display:flex}}@media (min-width:1536px){.\32xl\:w-96{width:24rem}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-left-8{left:-2rem}.bottom-0{bottom:0}.bottom-2{bottom:.5rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-1\/2{left:50%}.left-2\.5{left:.625rem}.left-3{left:.75rem}.left-4{left:1rem}.right-0{right:0}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.m-1{margin:.25rem}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-12{margin-top:3rem;margin-bottom:3rem}.my-16{margin-top:4rem;margin-bottom:4rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.-ml-px{margin-left:-1px}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-14{margin-bottom:3.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-3{margin-left:.75rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-11{height:2.75rem}.h-16{height:4rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[14px\]{height:14px}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-32{max-height:8rem}.min-h-0{min-height:0}.min-h-\[120px\]{min-height:120px}.min-h-\[180px\]{min-height:180px}.min-h-\[200px\]{min-height:200px}.min-h-\[280px\]{min-height:280px}.min-h-\[60px\]{min-height:60px}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-2\.5{width:.625rem}.w-3\.5{width:.875rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-5{width:1.25rem}.w-5\/6{width:83.333333%}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-\[7px\]{width:7px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[300px\]{min-width:300px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[180px\]{max-width:180px}.max-w-\[85\%\]{max-width:85%}.max-w-\[90\%\]{max-width:90%}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-screen-xl{max-width:1280px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-top{transform-origin:top}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-0{--tw-translate-x:0px}.transform,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[shimmer_2\.2s_infinite\]{animation:shimmer 2.2s infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-y-2{row-gap:.5rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-zinc-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(228 228 231/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[var\(--seo-accent\2c \#14b8a6\)\]{border-color:var(--seo-accent,#14b8a6)}.border-emerald-500\/30{border-color:rgba(16,185,129,.3)}.border-teal-100{--tw-border-opacity:1;border-color:rgb(204 251 241/var(--tw-border-opacity,1))}.border-teal-200{--tw-border-opacity:1;border-color:rgb(153 246 228/var(--tw-border-opacity,1))}.border-teal-400{--tw-border-opacity:1;border-color:rgb(45 212 191/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-zinc-100{--tw-border-opacity:1;border-color:rgb(244 244 245/var(--tw-border-opacity,1))}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.border-zinc-800{--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.bg-\[\#0d1117\]{--tw-bg-opacity:1;background-color:rgb(13 17 23/var(--tw-bg-opacity,1))}.bg-\[var\(--seo-accent-light\2c rgba\(20\2c 184\2c 166\2c 0\.08\)\)\]{background-color:var(--seo-accent-light,rgba(20,184,166,.08))}.bg-amber-400\/60{background-color:rgba(251,191,36,.6)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-emerald-400\/60{background-color:rgba(52,211,153,.6)}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-500\/10{background-color:rgba(16,185,129,.1)}.bg-emerald-500\/20{background-color:rgba(16,185,129,.2)}.bg-green-400\/80{background-color:rgba(74,222,128,.8)}.bg-red-400\/60{background-color:hsla(0,91%,71%,.6)}.bg-red-400\/80{background-color:hsla(0,91%,71%,.8)}.bg-teal-300{--tw-bg-opacity:1;background-color:rgb(94 234 212/var(--tw-bg-opacity,1))}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.bg-teal-50\/30{background-color:rgba(240,253,250,.3)}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity,1))}.bg-teal-500\/10{background-color:rgba(20,184,166,.1)}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/50{background-color:hsla(0,0%,100%,.5)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-yellow-400\/80{background-color:rgba(250,204,21,.8)}.bg-zinc-100{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.bg-zinc-900\/50{background-color:rgba(24,24,27,.5)}.bg-zinc-950{--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-cyan-500{--tw-gradient-from:#06b6d4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(6,182,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-400{--tw-gradient-from:#2dd4bf var(--tw-gradient-from-position);--tw-gradient-to:rgba(45,212,191,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-50{--tw-gradient-from:#f0fdfa var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,253,250,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500\/40{--tw-gradient-from:rgba(20,184,166,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,184,166,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-zinc-100{--tw-gradient-from:#f4f4f5 var(--tw-gradient-from-position);--tw-gradient-to:hsla(240,5%,96%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-zinc-50{--tw-gradient-from:#fafafa var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-teal-300{--tw-gradient-to:rgba(94,234,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#5eead4 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-teal-600\/80{--tw-gradient-to:rgba(13,148,136,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,148,136,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/40{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-50\%{--tw-gradient-via-position:50%}.to-cyan-50{--tw-gradient-to:#ecfeff var(--tw-gradient-to-position)}.to-teal-500{--tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)}.to-teal-500\/10{--tw-gradient-to:rgba(20,184,166,.1) var(--tw-gradient-to-position)}.to-teal-600{--tw-gradient-to:#0d9488 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.to-zinc-100{--tw-gradient-to:#f4f4f5 var(--tw-gradient-to-position)}.to-zinc-200{--tw-gradient-to:#e4e4e7 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-no-repeat{background-repeat:no-repeat}.fill-white{fill:#fff}.fill-zinc-900{fill:#18181b}.stroke-amber-400{stroke:#fbbf24}.stroke-emerald-500{stroke:#10b981}.stroke-red-400{stroke:#f87171}.stroke-teal-500{stroke:#14b8a6}.stroke-zinc-200{stroke:#e4e4e7}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[40pt\]{font-size:40pt}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[5rem\]{line-height:5rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#8b949e\]{--tw-text-opacity:1;color:rgb(139 148 158/var(--tw-text-opacity,1))}.text-\[var\(--seo-accent\2c \#14b8a6\)\]{color:var(--seo-accent,#14b8a6)}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-teal-300{--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.text-zinc-300{--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-800{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-zinc-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(161 161 170/var(--tw-placeholder-opacity,1))}.placeholder-zinc-400::placeholder{--tw-placeholder-opacity:1;color:rgb(161 161 170/var(--tw-placeholder-opacity,1))}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-teal-500\/30{--tw-shadow-color:rgba(20,184,166,.3);--tw-shadow:var(--tw-shadow-colored)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow-sm{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)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[-moz-osx-font-smoothing\:grayscale\]{-moz-osx-font-smoothing:grayscale}.\[-webkit-font-smoothing\:antialiased\]{-webkit-font-smoothing:antialiased}.\[animation-delay\:150ms\]{animation-delay:.15s}.\[animation-delay\:300ms\]{animation-delay:.3s}.\[background-position\:0_0\]{background-position:0 0}.\[background-size\:var\(--shimmer-width\)_100\%\]{background-size:var(--shimmer-width) 100%}.\[font-smooth\:antialiased\]{font-smooth:antialiased}.\[text-rendering\:optimizeLegibility\]{text-rendering:optimizeLegibility}.\[transition\:background-position_1s_cubic-bezier\(\.6\2c \.6\2c 0\2c 1\)_infinite\]{transition:background-position infinite 1s cubic-bezier(.6,.6,0,1)}.\[will-change\:filter\2c opacity\]{will-change:filter,opacity}:root{--seo-accent:#14b8a6;--seo-accent-light:#2dd4bf;--seo-accent-dark:#0d9488;--seo-accent-rgb:20,184,166;--seo-accent-gradient-from:#06b6d4;--seo-accent-gradient-to:#14b8a6}.placeholder\:text-zinc-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.placeholder\:text-zinc-400::placeholder{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-\[0\]:before{content:var(--tw-content);inset:0}.before\:aspect-square:before{content:var(--tw-content);aspect-ratio:1/1}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:rounded-\[--border-radius\]:before{content:var(--tw-content);border-radius:var(--border-radius)}.before\:p-\[--border-width\]:before{content:var(--tw-content);padding:var(--border-width)}.before\:will-change-\[background-position\]:before{content:var(--tw-content);will-change:background-position}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\!\[-webkit-mask-composite\:xor\]:before{content:var(--tw-content);-webkit-mask-composite:xor!important}.before\:\[background-image\:var\(--background-radial-gradient\)\]:before{content:var(--tw-content);background-image:var(--background-radial-gradient)}.before\:\[background-size\:300\%_300\%\]:before{content:var(--tw-content);background-size:300% 300%}.before\:\!\[mask-composite\:exclude\]:before{content:var(--tw-content);-webkit-mask-composite:xor!important;mask-composite:exclude!important}.before\:\[mask\:var\(--mask-linear-gradient\)\]:before{content:var(--tw-content);-webkit-mask:var(--mask-linear-gradient);mask:var(--mask-linear-gradient)}.focus-within\:border-teal-300:focus-within{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity,1))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-teal-500\/20:focus-within{--tw-ring-color:rgba(20,184,166,.2)}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-teal-300:hover{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity,1))}.hover\:border-zinc-300:hover{--tw-border-opacity:1;border-color:rgb(212 212 216/var(--tw-border-opacity,1))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.hover\:bg-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity,1))}.hover\:bg-zinc-100:hover{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.hover\:bg-zinc-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.hover\:text-teal-700:hover{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity,1))}.hover\:text-zinc-600:hover{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.hover\:text-zinc-700:hover{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.hover\:text-zinc-800:hover{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.hover\:text-zinc-900:hover{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-\[var\(--seo-accent\2c \#14b8a6\)\]:focus{border-color:var(--seo-accent,#14b8a6)}.focus\:border-teal-500:focus{--tw-border-opacity:1;border-color:rgb(20 184 166/var(--tw-border-opacity,1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-teal-500\/40:focus{--tw-ring-color:rgba(20,184,166,.4)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-zinc-300:disabled{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.disabled\:opacity-60:disabled{opacity:.6}.group[open] .group-open\:rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (prefers-reduced-motion:no-preference){.motion-safe\:before\:animate-\[shine-pulse_var\(--shine-pulse-duration\)_infinite_linear\]:before{content:var(--tw-content);animation:shine-pulse var(--shine-pulse-duration) infinite linear}}.dark\:divide-zinc-800:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(39 39 42/var(--tw-divide-opacity,1))}.dark\:border-teal-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(17 94 89/var(--tw-border-opacity,1))}.dark\:border-teal-800\/60:is(.dark *){border-color:rgba(17,94,89,.6)}.dark\:border-teal-900:is(.dark *){--tw-border-opacity:1;border-color:rgb(19 78 74/var(--tw-border-opacity,1))}.dark\:border-zinc-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(63 63 70/var(--tw-border-opacity,1))}.dark\:border-zinc-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.dark\:border-zinc-900:is(.dark *){--tw-border-opacity:1;border-color:rgb(24 24 27/var(--tw-border-opacity,1))}.dark\:bg-teal-900\/30:is(.dark *){background-color:rgba(19,78,74,.3)}.dark\:bg-teal-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(4 47 46/var(--tw-bg-opacity,1))}.dark\:bg-teal-950\/60:is(.dark *){background-color:rgba(4,47,46,.6)}.dark\:bg-zinc-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(82 82 91/var(--tw-bg-opacity,1))}.dark\:bg-zinc-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\:bg-zinc-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.dark\:bg-zinc-900\/50:is(.dark *){background-color:rgba(24,24,27,.5)}.dark\:bg-zinc-900\/90:is(.dark *){background-color:rgba(24,24,27,.9)}.dark\:bg-zinc-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.dark\:from-teal-900\/20:is(.dark *){--tw-gradient-from:rgba(19,78,74,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(19,78,74,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:fill-zinc-800:is(.dark *){fill:#27272a}.dark\:stroke-zinc-700:is(.dark *){stroke:#3f3f46}.dark\:text-teal-300:is(.dark *){--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.dark\:text-teal-400:is(.dark *){--tw-text-opacity:1;color:rgb(45 212 191/var(--tw-text-opacity,1))}.dark\:text-zinc-100:is(.dark *){--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.dark\:text-zinc-200:is(.dark *){--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.dark\:text-zinc-300:is(.dark *){--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.dark\:text-zinc-400:is(.dark *){--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.dark\:text-zinc-600:is(.dark *){--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.dark\:placeholder\:text-zinc-500:is(.dark *)::-moz-placeholder{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:placeholder\:text-zinc-500:is(.dark *)::placeholder{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:focus-within\:border-teal-700:focus-within:is(.dark *){--tw-border-opacity:1;border-color:rgb(15 118 110/var(--tw-border-opacity,1))}.dark\:hover\:border-teal-700:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(15 118 110/var(--tw-border-opacity,1))}.dark\:hover\:border-zinc-700:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(63 63 70/var(--tw-border-opacity,1))}.dark\:hover\:bg-zinc-800:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\:hover\:bg-zinc-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.dark\:hover\:text-teal-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.dark\:hover\:text-zinc-100:hover:is(.dark *){--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.dark\:disabled\:bg-zinc-700:disabled:is(.dark *){--tw-bg-opacity:1;background-color:rgb(63 63 70/var(--tw-bg-opacity,1))}@media (min-width:640px){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:block{display:block}.md\:h-24{height:6rem}.md\:min-w-\[340px\]{min-width:340px}.md\:flex-initial{flex:0 1 auto}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-12{padding:3rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-12{width:3rem}.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:text-\[6rem\]{font-size:6rem}}@media (min-width:1280px){.xl\:flex{display:flex}}@media (min-width:1536px){.\32xl\:w-96{width:24rem}}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "scripts": {
     "build:css": "tailwind -i src/_build.css -o dist/styles.css --minify",
     "prepublishOnly": "npm run build:css"
   },
-  "description": "39 animated React components for programmatic SEO pages. Remotion video, Magic UI style animations, trust signals, JSON-LD helpers. Teal/cyan brand, light-theme only.",
+  "description": "39 animated React components for programmatic SEO pages. Remotion video, Magic UI style animations, trust signals, JSON-LD helpers. Teal/cyan brand, supports light and dark themes.",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -23,7 +23,8 @@
   },
   "files": [
     "src",
-    "dist"
+    "dist",
+    "registry.json"
   ],
   "keywords": [
     "seo",

package/registry.json

@@ -0,0 +1,278 @@
+{
+  "version": 1,
+  "header": "### Available components",
+  "groups": [
+    {
+      "key": "trust",
+      "heading": "**Trust signals** (required, see below)",
+      "renderMode": "inline",
+      "trailingNote": "JSON-LD helpers (articleSchema, breadcrumbListSchema, faqPageSchema, howToSchema)."
+    },
+    {
+      "key": "video",
+      "heading": "**⭐ Video + motion graphics (MANDATORY — pick at least one):**",
+      "renderMode": "list"
+    },
+    {
+      "key": "magic-ui",
+      "heading": "**⭐ Magic UI style high-signal components (MANDATORY — pick at least TWO):**",
+      "renderMode": "list"
+    },
+    {
+      "key": "visual",
+      "heading": "**Visual content** (pick at least 3 distinct from here + Rich layout, as below):",
+      "renderMode": "list"
+    },
+    {
+      "key": "rich-layout",
+      "heading": "**Rich layout and animation components:**",
+      "renderMode": "list"
+    },
+    {
+      "key": "cta",
+      "heading": "**CTAs:**",
+      "renderMode": "list"
+    }
+  ],
+  "components": [
+    { "name": "Breadcrumbs", "group": "trust" },
+    { "name": "ArticleMeta", "group": "trust" },
+    { "name": "ProofBand", "group": "trust" },
+    { "name": "FaqSection", "group": "trust" },
+
+    {
+      "name": "RemotionClip",
+      "group": "video",
+      "signature": "(title, subtitle?, captions[], accent?, durationInFrames?)",
+      "description": "real Remotion-powered video clip rendered live in the browser via `@remotion/player`. Uses the built-in `ConceptReveal` composition: a gradient background, animated title/subtitle, and a stack of captions that spring in one by one. **This is the single highest-signal component in this library.** Use for concept intros, product pitches, or angle-defining hero animations. Max 4-6 captions per clip.",
+      "quotaTags": ["video-mandatory"]
+    },
+    {
+      "name": "MotionSequence",
+      "group": "video",
+      "signature": "(title?, frames[], defaultDuration?, loop?)",
+      "description": "timeline animation powered by framer-motion. Plays through a list of frames automatically when scrolled into view, each frame has a duration, title, body, and optional `visual` React node. Feels like an embedded explainer video without adding a video file. Use for \"watch it work\" concept animations or step-by-step conceptual walkthroughs.",
+      "quotaTags": ["video-mandatory"]
+    },
+    {
+      "name": "LottiePlayer",
+      "group": "video",
+      "signature": "(animationData or src)",
+      "description": "Lottie JSON player using `lottie-react`. Use when you have a production-grade motion graphic exported from LottieFiles. Only use if you will create the JSON file in `public/` yourself."
+    },
+
+    {
+      "name": "AnimatedBeam",
+      "group": "magic-ui",
+      "signature": "(from[], hub, to[], title?)",
+      "description": "Magic UI style animated beam diagram with a central hub connecting sources on the left to destinations on the right. Glowing teal beams travel along each connection. Use for \"pipeline,\" \"integration,\" or \"how data flows\" visualizations. **Almost always a good fit if the product receives, processes, and returns something.**",
+      "quotaTags": ["magic-mandatory"]
+    },
+    {
+      "name": "OrbitingCircles",
+      "group": "magic-ui",
+      "signature": "(center, items[], radius?, duration?, reverse?)",
+      "description": "central element with smaller items revolving around it on a dashed orbit ring. Use for ecosystem / integrations / \"works with everything\" showcases.",
+      "quotaTags": ["magic-mandatory"]
+    },
+    {
+      "name": "Marquee",
+      "group": "magic-ui",
+      "signature": "(children, speed?, reverse?, pauseOnHover?, fade?)",
+      "description": "infinite horizontal marquee. Wrap logos, testimonials, feature pills, or mini metric cards. Edges fade softly. Pauses on hover. Use for \"trusted by,\" \"works with,\" or a chip row of competitor names.",
+      "quotaTags": ["magic-mandatory"]
+    },
+    {
+      "name": "NumberTicker",
+      "group": "magic-ui",
+      "signature": "(value, decimals?, prefix?, suffix?)",
+      "description": "spring-animated number that counts up from 0 when it scrolls into view. Use inside any metric section. Example: `<NumberTicker value={94} suffix=\"%\" />`.",
+      "quotaTags": ["magic-mandatory"]
+    },
+    {
+      "name": "ShimmerButton",
+      "group": "magic-ui",
+      "signature": "(children, href?)",
+      "description": "premium pill CTA button with a continuous diagonal light shimmer sweeping across it. Use as the hero CTA.",
+      "quotaTags": ["magic-mandatory"]
+    },
+    {
+      "name": "GradientText",
+      "group": "magic-ui",
+      "signature": "(children, variant?, animate?)",
+      "description": "inline gradient text treatment for hero headings. Cyan → teal gradient, optionally animated. Wraps a meaningful word or phrase.",
+      "quotaTags": ["magic-mandatory"]
+    },
+    {
+      "name": "BackgroundGrid",
+      "group": "magic-ui",
+      "signature": "(children, pattern?, glow?)",
+      "description": "Vercel/Linear style wrapper with a subtle dot or line grid background and a soft radial teal glow. Wrap hero sections, standout callouts, or anchor-fact blocks.",
+      "quotaTags": ["magic-mandatory"]
+    },
+    {
+      "name": "MorphingText",
+      "group": "magic-ui",
+      "signature": "(texts[])",
+      "description": "cycles through an array of strings with blur/opacity morph transitions. Use for hero headings that rotate through benefit phrases or product capabilities."
+    },
+    {
+      "name": "Particles",
+      "group": "magic-ui",
+      "signature": "(color?, quantity?, size?)",
+      "description": "canvas-based floating particle background that follows the mouse cursor. Use as a background layer inside a `BackgroundGrid` or standalone hero wrapper."
+    },
+    {
+      "name": "ShineBorder",
+      "group": "magic-ui",
+      "signature": "(children, color?, borderWidth?, duration?)",
+      "description": "wrapper with an animated rotating radial-gradient border (shine effect). Use around key callout cards, pricing, or feature highlights for a premium look."
+    },
+    {
+      "name": "TextShimmer",
+      "group": "magic-ui",
+      "signature": "(children, duration?, spread?)",
+      "description": "inline text with a sweeping teal shimmer highlight. Use for a single standout phrase, stat, or brand name."
+    },
+    {
+      "name": "TypingAnimation",
+      "group": "magic-ui",
+      "signature": "(text, duration?)",
+      "description": "typewriter effect that reveals text character by character. Use for terminal-style headings, command examples, or \"what you can build\" intros."
+    },
+
+    {
+      "name": "AnimatedCodeBlock",
+      "group": "visual",
+      "signature": "(code, language?, filename?, typingSpeed?)",
+      "description": "syntax-highlighted code with typing animation. Use when showing real code, config, or CLI commands from the product.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "TerminalOutput",
+      "group": "visual",
+      "signature": "(lines[], title?)",
+      "description": "terminal session with command/output/success/error lines. Use when showing what happens when you run something.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "FlowDiagram",
+      "group": "visual",
+      "signature": "(title, steps[])",
+      "description": "visual step-by-step flow with arrows. Use when explaining a process or architecture.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "SequenceDiagram",
+      "group": "visual",
+      "signature": "(title, actors[], messages[])",
+      "description": "SVG sequence diagram with lifelines. Use when showing how components communicate.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "CodeComparison",
+      "group": "visual",
+      "signature": "(leftCode, rightCode, leftLabel, rightLabel, title?)",
+      "description": "side-by-side before/after. Use when showing what the product replaces or simplifies.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "AnimatedChecklist",
+      "group": "visual",
+      "signature": "(title, items[])",
+      "description": "animated checklist with checkmarks. Use for feature lists or requirement breakdowns.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "AnimatedMetric / MetricsRow",
+      "componentNames": ["AnimatedMetric", "MetricsRow"],
+      "group": "visual",
+      "signature": "(metrics[])",
+      "description": "animated number counters. Use when you have real metrics (boot time, build count, response time).",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "InlineTestimonial",
+      "group": "visual",
+      "signature": "(quote, name, role?, stars?)",
+      "description": "testimonial card. Use when you can reference a real user or credible source.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "ComparisonTable",
+      "group": "visual",
+      "signature": "(productName, competitorName, rows[])",
+      "description": "feature comparison grid. Use for versus/alternative pages.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "ProofBanner",
+      "group": "visual",
+      "signature": "(quote, source?, metric)",
+      "description": "compact proof with large metric. Use for a standout stat mid-page.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "AnimatedSection",
+      "group": "visual",
+      "signature": "(delay?)",
+      "description": "scroll-triggered fade-in wrapper. Use to stagger content reveals."
+    },
+
+    {
+      "name": "BentoGrid",
+      "group": "rich-layout",
+      "signature": "(cards[])",
+      "description": "bento grid layout with varying card sizes (1x1, 2x1, 1x2, 2x2). Cards have title, description, optional accent color and custom content. Use for feature overviews, capability showcases, or \"what you get\" sections. Do NOT pass decorative emoji as the card icon.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "BeforeAfter",
+      "group": "rich-layout",
+      "signature": "(before, after, title?)",
+      "description": "animated tab toggle between \"before\" and \"after\" states. Each side has content text and highlight bullets (red X marks for before, green checks for after). Use for workflow comparisons, migration stories, or problem/solution sections.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "AnimatedDemo",
+      "group": "rich-layout",
+      "signature": "(title, steps[], code?)",
+      "description": "animated product demo that auto-plays through steps. Shows a dark \"screen\" with step content, progress bar, and step indicators. Optional collapsible code panel showing \"How to build this.\" Use for walkthroughs, feature demos, or \"watch it work\" sections.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "GlowCard",
+      "group": "rich-layout",
+      "signature": "(children)",
+      "description": "card with mouse-tracking glow effect (like Linear/Stripe). Glow follows cursor on hover. Use as a wrapper around feature highlights or key content blocks for premium feel.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "ParallaxSection",
+      "group": "rich-layout",
+      "signature": "(children, background?, intensity?)",
+      "description": "section with parallax scrolling effect. Background moves at a different speed than foreground content. Use for hero-style visual breaks between content sections.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+    {
+      "name": "StepTimeline",
+      "group": "rich-layout",
+      "signature": "(title?, steps[])",
+      "description": "vertical timeline with animated line drawing and staggered step reveals. Each step has a numbered dot, title, description, and optional detail panel. Use for processes, setup guides, or \"how it works\" narratives.",
+      "quotaTags": ["visual-rich-mandatory"]
+    },
+
+    {
+      "name": "InlineCta",
+      "group": "cta",
+      "signature": "(heading, body, linkText?, href?)",
+      "description": "inline CTA block with PostHog tracking."
+    },
+    {
+      "name": "StickyBottomCta",
+      "group": "cta",
+      "signature": "(description, buttonLabel, href)",
+      "description": "fixed bottom bar that appears on scroll. Use instead of (or alongside) InlineCta for variety."
+    }
+  ]
+}

package/src/components/AnimatedBeam.tsx

@@ -50,10 +50,10 @@ export function AnimatedBeam({
 
   return (
     <div
-      className={`my-10 rounded-2xl border border-zinc-200 bg-white p-6 ${className}`}
+      className={`my-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 ${className}`}
     >
       {title && (
-        <h3 className="text-sm font-semibold text-zinc-900 mb-4">{title}</h3>
+        <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-4">{title}</h3>
       )}
       <svg
         viewBox={`0 0 ${width} ${height}`}
@@ -80,7 +80,7 @@ export function AnimatedBeam({
           <path
             key={`from-line-${i}`}
             d={`M ${leftX + 60} ${y} Q ${centerX - 80} ${y}, ${centerX - 40} ${centerY}`}
-            stroke="#e4e4e7"
+            className="stroke-zinc-200 dark:stroke-zinc-700"
             strokeWidth="2"
             fill="none"
           />
@@ -89,7 +89,7 @@ export function AnimatedBeam({
           <path
             key={`to-line-${i}`}
             d={`M ${centerX + 40} ${centerY} Q ${centerX + 80} ${y}, ${rightX - 60} ${y}`}
-            stroke="#e4e4e7"
+            className="stroke-zinc-200 dark:stroke-zinc-700"
             strokeWidth="2"
             fill="none"
           />
@@ -144,8 +144,7 @@ export function AnimatedBeam({
               width="120"
               height="48"
               rx="8"
-              fill="white"
-              stroke="#e4e4e7"
+              className="fill-white dark:fill-zinc-800 stroke-zinc-200 dark:stroke-zinc-700"
               strokeWidth="1.5"
             />
             <foreignObject
@@ -157,6 +156,7 @@ export function AnimatedBeam({
               <div
                 // @ts-expect-error -- xmlns is valid in foreignObject
                 xmlns="http://www.w3.org/1999/xhtml"
+                className="text-zinc-900 dark:text-zinc-100"
                 style={{
                   display: "flex",
                   alignItems: "center",
@@ -167,7 +167,6 @@ export function AnimatedBeam({
                   fontSize: 12,
                   fontWeight: 600,
                   lineHeight: 1.2,
-                  color: "#18181b",
                   overflow: "hidden",
                   wordBreak: "break-word",
                 }}
@@ -237,8 +236,7 @@ export function AnimatedBeam({
               width="120"
               height="48"
               rx="8"
-              fill="white"
-              stroke="#e4e4e7"
+              className="fill-white dark:fill-zinc-800 stroke-zinc-200 dark:stroke-zinc-700"
               strokeWidth="1.5"
             />
             <foreignObject
@@ -250,6 +248,7 @@ export function AnimatedBeam({
               <div
                 // @ts-expect-error -- xmlns is valid in foreignObject
                 xmlns="http://www.w3.org/1999/xhtml"
+                className="text-zinc-900 dark:text-zinc-100"
                 style={{
                   display: "flex",
                   alignItems: "center",
@@ -260,7 +259,6 @@ export function AnimatedBeam({
                   fontSize: 12,
                   fontWeight: 600,
                   lineHeight: 1.2,
-                  color: "#18181b",
                   overflow: "hidden",
                   wordBreak: "break-word",
                 }}

package/src/components/AnimatedChecklist.tsx

@@ -15,7 +15,7 @@ interface AnimatedChecklistProps {
 export function AnimatedChecklist({ title, items }: AnimatedChecklistProps) {
   return (
     <motion.div
-      className="my-8 rounded-2xl border border-zinc-200 bg-white p-6"
+      className="my-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6"
       initial={{ opacity: 0, y: 12 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
@@ -42,7 +42,7 @@ export function AnimatedChecklist({ title, items }: AnimatedChecklistProps) {
               className={`mt-0.5 flex items-center justify-center w-5 h-5 rounded-md border shrink-0 ${
                 item.checked !== false
                   ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
-                  : "border-zinc-200 bg-white text-zinc-500"
+                  : "border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400"
               }`}
               initial={{ scale: 0 }}
               whileInView={{ scale: 1 }}
@@ -57,7 +57,7 @@ export function AnimatedChecklist({ title, items }: AnimatedChecklistProps) {
                 <span className="w-1.5 h-1.5 rounded-full bg-zinc-400" />
               )}
             </motion.span>
-            <span className={`text-sm leading-relaxed ${item.checked !== false ? "text-zinc-900" : "text-zinc-500"}`}>
+            <span className={`text-sm leading-relaxed ${item.checked !== false ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-500 dark:text-zinc-400"}`}>
               {item.text}
             </span>
           </motion.li>

package/src/components/BentoGrid.tsx

@@ -42,18 +42,18 @@ export function BentoGrid({ cards, className = "" }: BentoGridProps) {
           }}
           className={`${SIZE_CLASSES[card.size || "1x1"]} rounded-2xl border ${
             card.accent
-              ? "border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50"
-              : "border-zinc-200 bg-zinc-50"
+              ? "border-teal-200 dark:border-teal-800 bg-gradient-to-br from-teal-50 dark:from-teal-900/20 to-cyan-50"
+              : "border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50"
           } p-6 flex flex-col justify-between group hover:border-teal-300 hover:shadow-md transition-all duration-300`}
         >
           <div>
             {card.icon && (
               <span className="text-2xl mb-3 block">{card.icon}</span>
             )}
-            <h3 className="text-base font-semibold text-zinc-900 mb-2">
+            <h3 className="text-base font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
               {card.title}
             </h3>
-            <p className="text-sm text-zinc-500 leading-relaxed">
+            <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
               {card.description}
             </p>
           </div>

package/src/components/ComparisonTable.tsx

@@ -26,40 +26,40 @@ export function ComparisonTable({
   return (
     <section className={className}>
       {heading && (
-        <h2 className="text-3xl sm:text-4xl font-bold text-zinc-900 mb-4 text-center">
+        <h2 className="text-3xl sm:text-4xl font-bold text-zinc-900 dark:text-zinc-100 mb-4 text-center">
           {heading}
         </h2>
       )}
       {intro && (
-        <p className="text-zinc-500 text-lg text-center mb-8 max-w-2xl mx-auto">
+        <p className="text-zinc-500 dark:text-zinc-400 text-lg text-center mb-8 max-w-2xl mx-auto">
           {intro}
         </p>
       )}
-      <div className="rounded-2xl bg-zinc-50 border border-zinc-200 overflow-hidden">
+      <div className="rounded-2xl bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800 overflow-hidden">
         <table className="w-full text-left">
           <thead>
-            <tr className="border-b border-zinc-200">
-              <th className="px-5 py-4 text-zinc-500 text-sm font-medium">Feature</th>
-              <th className="px-5 py-4 text-zinc-500 text-sm font-medium">{competitorName}</th>
-              <th className="px-5 py-4 text-teal-600 text-sm font-medium">{productName}</th>
+            <tr className="border-b border-zinc-200 dark:border-zinc-800">
+              <th className="px-5 py-4 text-zinc-500 dark:text-zinc-400 text-sm font-medium">Feature</th>
+              <th className="px-5 py-4 text-zinc-500 dark:text-zinc-400 text-sm font-medium">{competitorName}</th>
+              <th className="px-5 py-4 text-teal-600 dark:text-teal-400 text-sm font-medium">{productName}</th>
             </tr>
           </thead>
           <tbody>
             {rows.map((row, i) => (
               <tr
                 key={i}
-                className={i < rows.length - 1 ? "border-b border-zinc-200" : ""}
+                className={i < rows.length - 1 ? "border-b border-zinc-200 dark:border-zinc-800" : ""}
               >
-                <td className="px-5 py-3 text-zinc-900 text-sm font-medium">{row.feature}</td>
-                <td className="px-5 py-3 text-zinc-500 text-sm">{row.competitor}</td>
-                <td className="px-5 py-3 text-zinc-900 text-sm">{row.ours}</td>
+                <td className="px-5 py-3 text-zinc-900 dark:text-zinc-100 text-sm font-medium">{row.feature}</td>
+                <td className="px-5 py-3 text-zinc-500 dark:text-zinc-400 text-sm">{row.competitor}</td>
+                <td className="px-5 py-3 text-zinc-900 dark:text-zinc-100 text-sm">{row.ours}</td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
       {caveat && (
-        <p className="text-zinc-500 text-sm mt-4 text-center">{caveat}</p>
+        <p className="text-zinc-500 dark:text-zinc-400 text-sm mt-4 text-center">{caveat}</p>
       )}
     </section>
   );

package/src/components/FaqSection.tsx

@@ -13,23 +13,23 @@ export function FaqSection({
 }: FaqSectionProps) {
   return (
     <section className={`max-w-4xl mx-auto px-6 my-16 ${className}`}>
-      <h2 className="text-3xl sm:text-4xl font-bold text-zinc-900 mb-8">{heading}</h2>
+      <h2 className="text-3xl sm:text-4xl font-bold text-zinc-900 dark:text-zinc-100 mb-8">{heading}</h2>
       <div className="space-y-4">
         {items.map((faq) => (
           <details
             key={faq.q}
-            className="group p-5 rounded-xl bg-zinc-50 border border-zinc-200"
+            className="group p-5 rounded-xl bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800"
           >
-            <summary className="text-zinc-900 font-semibold cursor-pointer list-none flex items-center justify-between gap-4">
+            <summary className="text-zinc-900 dark:text-zinc-100 font-semibold cursor-pointer list-none flex items-center justify-between gap-4">
               <span>{faq.q}</span>
               <span
-                className="text-zinc-500 group-open:rotate-45 transition-transform text-xl flex-shrink-0"
+                className="text-zinc-500 dark:text-zinc-400 group-open:rotate-45 transition-transform text-xl flex-shrink-0"
                 aria-hidden="true"
               >
                 +
               </span>
             </summary>
-            <p className="text-zinc-500 mt-3 leading-relaxed">{faq.a}</p>
+            <p className="text-zinc-500 dark:text-zinc-400 mt-3 leading-relaxed">{faq.a}</p>
           </details>
         ))}
       </div>

package/src/components/FlowDiagram.tsx

@@ -28,7 +28,7 @@ const icons: Record<string, string> = {
 
 export function FlowDiagram({ title, steps }: FlowDiagramProps) {
   return (
-    <div className="my-10 rounded-2xl border border-zinc-200 bg-white p-6 overflow-x-auto">
+    <div className="my-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 overflow-x-auto">
       <p className="text-xs font-mono uppercase tracking-widest text-emerald-500 mb-5">
         {title}
       </p>
@@ -47,14 +47,14 @@ export function FlowDiagram({ title, steps }: FlowDiagramProps) {
             }}
           >
             <div className="flex flex-col items-center flex-1 min-w-0 max-w-[180px]">
-              <div className="w-11 h-11 rounded-xl bg-white border border-zinc-200 flex items-center justify-center text-lg mb-2">
+              <div className="w-11 h-11 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 flex items-center justify-center text-lg mb-2">
                 {step.icon ? icons[step.icon] || "\u2022" : `${i + 1}`}
               </div>
-              <p className="text-xs font-medium text-zinc-900 text-center leading-tight">
+              <p className="text-xs font-medium text-zinc-900 dark:text-zinc-100 text-center leading-tight">
                 {step.label}
               </p>
               {step.detail && (
-                <p className="text-[10px] text-zinc-500 text-center leading-tight mt-1">
+                <p className="text-[10px] text-zinc-500 dark:text-zinc-400 text-center leading-tight mt-1">
                   {step.detail}
                 </p>
               )}
@@ -72,7 +72,7 @@ export function FlowDiagram({ title, steps }: FlowDiagramProps) {
                 }}
                 style={{ originX: 0 }}
               >
-                <svg width="32" height="12" viewBox="0 0 32 12" className="text-zinc-500">
+                <svg width="32" height="12" viewBox="0 0 32 12" className="text-zinc-500 dark:text-zinc-400">
                   <line x1="0" y1="6" x2="24" y2="6" stroke="currentColor" strokeWidth="1.5" />
                   <polygon points="24,2 32,6 24,10" fill="currentColor" />
                 </svg>

package/src/components/GlowCard.tsx

@@ -38,8 +38,8 @@ export function GlowCard({
       onMouseMove={handleMouseMove}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      className={`relative rounded-2xl border border-zinc-200 bg-white overflow-hidden transition-shadow duration-300 ${
-        isHovered ? "shadow-lg border-teal-200" : ""
+      className={`relative rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-hidden transition-shadow duration-300 ${
+        isHovered ? "shadow-lg border-teal-200 dark:border-teal-800" : ""
       } ${className}`}
     >
       {/* Glow overlay */}

package/src/components/InlineCta.tsx

@@ -17,21 +17,21 @@ export function InlineCta({
 }: InlineCtaProps) {
   return (
     <motion.div
-      className="my-12 mx-auto max-w-2xl p-6 rounded-2xl border border-teal-100 bg-teal-50/30"
+      className="my-12 mx-auto max-w-2xl p-6 rounded-2xl border border-teal-100 dark:border-teal-800/60 bg-teal-50/30 dark:bg-teal-950/60"
       initial={{ opacity: 0, y: 16 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
       transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
     >
-      <p className="text-sm font-semibold text-teal-600 mb-2">
+      <p className="text-sm font-semibold text-teal-600 dark:text-teal-300 mb-2">
         {heading}
       </p>
-      <p className="text-sm text-zinc-500 mb-4">
+      <p className="text-sm text-zinc-500 dark:text-zinc-300 mb-4">
         {body}
       </p>
       <a
         href={href}
-        className="inline-flex items-center gap-2 text-sm font-medium text-teal-600 hover:text-accent-dim transition-colors"
+        className="inline-flex items-center gap-2 text-sm font-medium text-teal-600 dark:text-teal-300 hover:text-accent-dim transition-colors"
         onClick={() => {
           const w = typeof window !== "undefined" ? (window as unknown as { posthog?: { capture: (e: string, p?: Record<string, unknown>) => void } }) : undefined;
           w?.posthog?.capture("cta_clicked", {

package/src/components/InlineTestimonial.tsx

@@ -12,7 +12,7 @@ function Stars({ count }: { count: number }) {
       {Array.from({ length: 5 }, (_, i) => (
         <svg
           key={i}
-          className={`w-4 h-4 ${i < count ? "text-teal-600" : "text-zinc-200"}`}
+          className={`w-4 h-4 ${i < count ? "text-teal-600 dark:text-teal-400" : "text-zinc-200"}`}
           fill="currentColor"
           viewBox="0 0 20 20"
           aria-hidden="true"
@@ -33,10 +33,10 @@ export function InlineTestimonial({
 }: InlineTestimonialProps) {
   return (
     <figure
-      className={`p-6 sm:p-8 rounded-2xl bg-zinc-50 border border-zinc-200 ${className}`}
+      className={`p-6 sm:p-8 rounded-2xl bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800 ${className}`}
     >
       <Stars count={stars} />
-      <blockquote className="mt-4 text-lg sm:text-xl leading-relaxed text-zinc-800">
+      <blockquote className="mt-4 text-lg sm:text-xl leading-relaxed text-zinc-800 dark:text-zinc-200">
         &ldquo;{quote}&rdquo;
       </blockquote>
       <figcaption className="mt-5 flex items-center gap-3">
@@ -44,8 +44,8 @@ export function InlineTestimonial({
           {name.charAt(0)}
         </div>
         <div>
-          <div className="text-sm font-medium text-zinc-900">{name}</div>
-          {role && <div className="text-xs text-zinc-500">{role}</div>}
+          <div className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{name}</div>
+          {role && <div className="text-xs text-zinc-500 dark:text-zinc-400">{role}</div>}
         </div>
       </figcaption>
     </figure>

package/src/components/MetricsRow.tsx

@@ -18,7 +18,7 @@ interface MetricsRowProps {
 export function MetricsRow({ metrics }: MetricsRowProps) {
   return (
     <motion.div
-      className="my-10 rounded-2xl border border-zinc-200 bg-white grid grid-cols-2 md:grid-cols-4 divide-x divide-zinc-200"
+      className="my-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 grid grid-cols-2 md:grid-cols-4 divide-x divide-zinc-200 dark:divide-zinc-800"
       initial={{ opacity: 0, y: 12 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}

package/src/components/NewsletterSignup.tsx

@@ -84,17 +84,16 @@ export function NewsletterSignup({
           animate={{ y: 0 }}
           exit={{ y: "100%" }}
           transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
-          className="fixed bottom-0 left-0 right-0 z-40 border-t border-zinc-200 backdrop-blur-xl py-3 px-4 sm:px-6"
-          style={{ backgroundColor: "rgba(255,255,255,0.92)" }}
+          className="fixed bottom-0 left-0 right-0 z-40 border-t border-zinc-200 dark:border-zinc-800 backdrop-blur-xl py-3 px-4 sm:px-6 bg-white/90 dark:bg-zinc-900/90"
         >
           <div className="mx-auto max-w-7xl flex items-center justify-between gap-3">
             {status === "success" ? (
-              <p className="text-sm font-medium text-teal-600 flex-1">
+              <p className="text-sm font-medium text-teal-600 dark:text-teal-400 flex-1">
                 {successMessage}
               </p>
             ) : (
               <>
-                <p className="text-sm text-zinc-500 hidden md:block flex-shrink-0">
+                <p className="text-sm text-zinc-500 dark:text-zinc-400 hidden md:block flex-shrink-0">
                   {description}
                 </p>
                 <form
@@ -107,7 +106,7 @@ export function NewsletterSignup({
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder={placeholder}
-                    className="flex-1 min-w-0 text-sm px-3 py-2 rounded-lg border border-zinc-200 bg-white text-zinc-900 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-teal-500/40 focus:border-teal-500 transition-shadow"
+                    className="flex-1 min-w-0 text-sm px-3 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-teal-500/40 focus:border-teal-500 transition-shadow"
                     disabled={status === "loading"}
                   />
                   <button

package/src/components/ProofBanner.tsx

@@ -11,20 +11,20 @@ interface ProofBannerProps {
 export function ProofBanner({ quote, source, metric }: ProofBannerProps) {
   return (
     <motion.div
-      className="my-8 p-4 rounded-xl border border-zinc-200 bg-white flex items-start gap-4"
+      className="my-8 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 flex items-start gap-4"
       initial={{ opacity: 0, x: -16 }}
       whileInView={{ opacity: 1, x: 0 }}
       viewport={{ once: true }}
       transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
     >
       <div className="shrink-0 text-center">
-        <span className="text-2xl font-bold text-teal-600">{metric}</span>
+        <span className="text-2xl font-bold text-teal-600 dark:text-teal-400">{metric}</span>
       </div>
       <div>
         <p className="text-sm text-subtle-text italic">
           &ldquo;{quote}&rdquo;
         </p>
-        {source ? <p className="text-xs text-zinc-500 mt-1">{source}</p> : null}
+        {source ? <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1">{source}</p> : null}
       </div>
     </motion.div>
   );

package/src/components/SeoPageComments.tsx

@@ -122,12 +122,12 @@ export function SeoPageComments({
 
   return (
     <section className={`seo-page-comments mx-auto max-w-2xl my-12 ${className}`}>
-      <h2 className="text-xl font-semibold text-zinc-900 mb-1">{title}</h2>
-      <p className="text-sm text-zinc-500 mb-6">Public and anonymous. No signup.</p>
+      <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-1">{title}</h2>
+      <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6">Public and anonymous. No signup.</p>
 
       <form onSubmit={submit} className="mb-8 space-y-2">
         {replyTo != null && (
-          <div className="flex items-center justify-between text-xs text-zinc-500 px-1">
+          <div className="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400 px-1">
             <span>Replying to comment #{replyTo}</span>
             <button type="button" onClick={() => setReplyTo(null)} className="underline hover:text-zinc-700">
               cancel
@@ -140,7 +140,7 @@ export function SeoPageComments({
           placeholder={placeholder}
           rows={3}
           maxLength={4000}
-          className="w-full px-3 py-2 rounded-lg border border-zinc-200 bg-white text-sm text-zinc-900 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:border-[var(--seo-accent,#14b8a6)]"
+          className="w-full px-3 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:border-[var(--seo-accent,#14b8a6)]"
           style={{ outlineColor: "var(--seo-accent, #14b8a6)" }}
           disabled={status === "loading"}
         />
@@ -150,7 +150,7 @@ export function SeoPageComments({
             value={name}
             onChange={(e) => setName(e.target.value.slice(0, 80))}
             placeholder="Name (optional)"
-            className="flex-1 min-w-0 px-3 py-2 rounded-lg border border-zinc-200 bg-white text-sm text-zinc-900 placeholder-zinc-400 focus:outline-none focus:ring-2"
+            className="flex-1 min-w-0 px-3 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2"
             disabled={status === "loading"}
           />
           <button
@@ -169,13 +169,13 @@ export function SeoPageComments({
         {comments == null ? (
           <p className="text-sm text-zinc-400">Loading…</p>
         ) : top.length === 0 ? (
-          <p className="text-sm text-zinc-500">{emptyMessage}</p>
+          <p className="text-sm text-zinc-500 dark:text-zinc-400">{emptyMessage}</p>
         ) : (
           top.map((c) => (
             <div key={c.id}>
               <CommentRow c={c} onReply={() => setReplyTo(c.id)} />
               {(children[c.id] ?? []).length > 0 && (
-                <div className="mt-3 ml-6 pl-4 border-l border-zinc-200 space-y-4">
+                <div className="mt-3 ml-6 pl-4 border-l border-zinc-200 dark:border-zinc-800 space-y-4">
                   {children[c.id].map((r) => (
                     <CommentRow key={r.id} c={r} />
                   ))}
@@ -193,15 +193,15 @@ function CommentRow({ c, onReply }: { c: Comment; onReply?: () => void }) {
   return (
     <div>
       <div className="flex items-baseline gap-2 mb-1">
-        <span className="text-sm font-medium text-zinc-900">{c.author_name || "Anonymous"}</span>
+        <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{c.author_name || "Anonymous"}</span>
         <span className="text-xs text-zinc-400">{formatWhen(c.created_at)}</span>
       </div>
-      <p className="text-sm text-zinc-700 whitespace-pre-wrap">{c.body}</p>
+      <p className="text-sm text-zinc-700 dark:text-zinc-300 whitespace-pre-wrap">{c.body}</p>
       {onReply && (
         <button
           type="button"
           onClick={onReply}
-          className="mt-1 text-xs text-zinc-500 hover:text-zinc-800 underline"
+          className="mt-1 text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-800 underline"
         >
           Reply
         </button>

package/src/components/SitemapSidebar.tsx

@@ -316,14 +316,14 @@ export function SitemapSidebar({
         {/* Page list */}
         <nav ref={navRef} className="flex-1 overflow-y-auto p-3">
           {filtered.length === 0 && (
-            <p className="text-sm text-zinc-400 dark:text-zinc-500 px-3 py-4">No pages found</p>
+            <p className="text-sm text-zinc-400 dark:text-zinc-400 px-3 py-4">No pages found</p>
           )}
 
           {Array.from(groups.entries()).map(([category, categoryPages]) => (
             <div key={category} className="mb-4">
               {/* Category header (only show if more than one category) */}
               {groups.size > 1 && (
-                <div className="px-3 py-1.5 text-xs font-semibold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider">
+                <div className="px-3 py-1.5 text-xs font-semibold text-zinc-400 dark:text-zinc-400 uppercase tracking-wider">
                   {getCategoryLabel(category, categoryLabels)}
                 </div>
               )}
@@ -339,7 +339,7 @@ export function SitemapSidebar({
                       className={`block px-3 py-2.5 rounded-lg transition-colors ${
                         isActive
                           ? "text-zinc-900 dark:text-zinc-100 font-medium"
-                          : "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-900 hover:text-zinc-900 dark:hover:text-zinc-100"
+                          : "text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 hover:text-zinc-900 dark:hover:text-zinc-100"
                       }`}
                       style={
                         isActive
@@ -355,7 +355,7 @@ export function SitemapSidebar({
                         {page.title}
                       </span>
                       {page.datePublished && (
-                        <span className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5 block">
+                        <span className="text-[11px] text-zinc-400 dark:text-zinc-400 mt-0.5 block">
                           {page.datePublished}
                         </span>
                       )}
@@ -377,7 +377,7 @@ export function SitemapSidebar({
                                 className={`block pl-3 pr-2 py-1.5 -ml-px border-l-2 text-[13px] leading-snug transition-colors ${
                                   isSectionActive
                                     ? "font-medium"
-                                    : "border-transparent text-zinc-500 dark:text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 hover:border-zinc-300 dark:hover:border-zinc-700"
+                                    : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:border-zinc-300 dark:hover:border-zinc-700"
                                 }`}
                                 style={
                                   isSectionActive

package/src/components/StepTimeline.tsx

@@ -32,7 +32,7 @@ export function StepTimeline({
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
-          className="text-lg font-semibold text-zinc-900 mb-6"
+          className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-6"
         >
           {title}
         </motion.h3>
@@ -74,12 +74,12 @@ export function StepTimeline({
                   stiffness: 300,
                   damping: 20,
                 }}
-                className="absolute -left-8 top-1 w-6 h-6 rounded-full bg-teal-50 border-2 border-teal-400 flex items-center justify-center"
+                className="absolute -left-8 top-1 w-6 h-6 rounded-full bg-teal-50 dark:bg-teal-900/30 border-2 border-teal-400 flex items-center justify-center"
               >
                 {step.icon ? (
                   <span className="text-xs">{step.icon}</span>
                 ) : (
-                  <span className="text-[10px] font-mono font-bold text-teal-600">
+                  <span className="text-[10px] font-mono font-bold text-teal-600 dark:text-teal-400">
                     {i + 1}
                   </span>
                 )}
@@ -87,14 +87,14 @@ export function StepTimeline({
 
               {/* Content */}
               <div>
-                <h4 className="text-sm font-semibold text-zinc-900 mb-1">
+                <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
                   {step.title}
                 </h4>
-                <p className="text-sm text-zinc-500 leading-relaxed">
+                <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
                   {step.description}
                 </p>
                 {step.detail && (
-                  <div className="mt-3 rounded-lg border border-zinc-100 bg-zinc-50 p-3 text-sm">
+                  <div className="mt-3 rounded-lg border border-zinc-100 dark:border-zinc-900 bg-zinc-50 dark:bg-zinc-900/50 p-3 text-sm">
                     {step.detail}
                   </div>
                 )}