From 56567ae21ac8588d88c7085a470bfeaf78c28a73 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Fri, 10 Apr 2026 05:37:42 +0400
Subject: [PATCH] fix

---
 .../components/design-system-provider.tsx     |  2 +-
 .../preview-02/cards/contribution-history.tsx | 12 +++++--
 .../preview-02/cards/dividend-income.tsx      |  7 +++-
 .../preview-02/cards/index-investing.tsx      |  2 +-
 .../blocks/preview-02/cards/power-usage.tsx   |  7 +++-
 .../blocks/preview-02/cards/preferences.tsx   |  4 +--
 .../preview-02/cards/receiving-method.tsx     | 11 +++----
 .../blocks/preview-02/cards/social-links.tsx  |  6 ++--
 .../preview-02/cards/stock-performance.tsx    |  2 +-
 .../preview-02/cards/upcoming-payments.tsx    |  2 +-
 .../preview/cards/activate-agent-dialog.tsx   |  4 +--
 .../blocks/preview/cards/bar-chart-card.tsx   |  8 +++--
 .../preview/cards/contributions-activity.tsx  |  2 +-
 .../blocks/preview/cards/feedback-form.tsx    |  2 +-
 .../blocks/preview/cards/github-profile.tsx   |  2 +-
 .../preview/cards/icon-preview-grid.tsx       |  2 +-
 .../base/blocks/preview/cards/report-bug.tsx  |  6 ++--
 .../blocks/preview/cards/style-overview.tsx   |  6 ++--
 .../preview/cards/typography-specimen.tsx     |  2 +-
 .../base/blocks/preview/cards/ui-elements.tsx |  9 ++++--
 apps/v4/registry/bases/base/examples/demo.tsx | 32 +++++++++----------
 .../preview-02/cards/contribution-history.tsx | 12 +++++--
 .../preview-02/cards/dividend-income.tsx      |  6 +++-
 .../preview-02/cards/index-investing.tsx      |  2 +-
 .../blocks/preview-02/cards/power-usage.tsx   |  6 +++-
 .../blocks/preview-02/cards/preferences.tsx   |  4 +--
 .../preview-02/cards/receiving-method.tsx     | 11 +++----
 .../blocks/preview-02/cards/social-links.tsx  |  8 +++--
 .../preview-02/cards/stock-performance.tsx    |  2 +-
 .../preview-02/cards/upcoming-payments.tsx    |  2 +-
 .../preview/cards/activate-agent-dialog.tsx   |  6 ++--
 .../blocks/preview/cards/bar-chart-card.tsx   |  8 +++--
 .../preview/cards/contributions-activity.tsx  |  4 ++-
 .../blocks/preview/cards/feedback-form.tsx    |  6 +++-
 .../blocks/preview/cards/github-profile.tsx   |  4 ++-
 .../preview/cards/icon-preview-grid.tsx       |  2 +-
 .../radix/blocks/preview/cards/report-bug.tsx | 11 +++++--
 .../blocks/preview/cards/style-overview.tsx   |  6 ++--
 .../preview/cards/typography-specimen.tsx     |  2 +-
 .../blocks/preview/cards/ui-elements.tsx      | 13 ++++++--
 .../v4/registry/bases/radix/examples/demo.tsx | 32 +++++++++----------
 .../bases/radix/examples/tabs-example.tsx     | 10 +++---
 apps/v4/registry/styles/style-sera.css        | 31 +++++++-----------
 43 files changed, 184 insertions(+), 134 deletions(-)

diff --git a/apps/v4/app/(app)/create/components/design-system-provider.tsx b/apps/v4/app/(app)/create/components/design-system-provider.tsx
index a06d973bc5..e7b2f22663 100644
--- a/apps/v4/app/(app)/create/components/design-system-provider.tsx
+++ b/apps/v4/app/(app)/create/components/design-system-provider.tsx
@@ -130,7 +130,7 @@ export function DesignSystemProvider({
   useIframeMessageListener("design-system-params", handleDesignSystemMessage)
 
   React.useEffect(() => {
-    if (style === "lyra" && radius !== "none") {
+    if (style === "lyra" || (style === "sera" && radius !== "none")) {
       setSearchParams({ radius: "none" })
     }
   }, [style, radius, setSearchParams])
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx
index 0a43138775..0c5131ed2f 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx
@@ -24,6 +24,7 @@ import {
   ItemContent,
   ItemDescription,
 } from "@/registry/bases/base/ui/item"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
 const chartData = [
   { month: "Dec", amount: 800 },
@@ -42,6 +43,9 @@ const chartConfig = {
 } satisfies ChartConfig
 
 export function ContributionHistory() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
   return (
     <Card>
       <CardHeader>
@@ -71,13 +75,13 @@ export function ContributionHistory() {
             <Bar
               dataKey="amount"
               fill="var(--color-amount)"
-              radius={[6, 6, 0, 0]}
+              radius={isRounded ? [6, 6, 0, 0] : 0}
               maxBarSize={40}
             />
           </BarChart>
         </ChartContainer>
       </CardContent>
-      <CardFooter className="flex-col gap-4">
+      <CardContent>
         <div className="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
           <Item variant="muted" className="flex-col items-stretch">
             <ItemContent className="gap-1">
@@ -106,7 +110,9 @@ export function ContributionHistory() {
             </ItemContent>
           </Item>
         </div>
-        <Button className="w-full">View Full Report</Button>
+      </CardContent>
+      <CardFooter>
+        <Button className="style-sera:w-full">View Full Report</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx
index 0aac06a1c5..99c6a5ab45 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx
@@ -2,6 +2,8 @@
 
 import { Bar, BarChart, XAxis } from "recharts"
 
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
 import { Button } from "@/registry/bases/base/ui/button"
 import {
   Card,
@@ -81,6 +83,9 @@ const miniChartConfig = {
 } satisfies ChartConfig
 
 export function DividendIncome() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
   return (
     <Card>
       <CardHeader>
@@ -123,7 +128,7 @@ export function DividendIncome() {
                   <Bar
                     dataKey="value"
                     fill="var(--color-value)"
-                    radius={[3, 3, 0, 0]}
+                    radius={isRounded ? [3, 3, 0, 0] : 0}
                   />
                 </BarChart>
               </ChartContainer>
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/index-investing.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/index-investing.tsx
index ba7a480896..4d88a0d632 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/index-investing.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/index-investing.tsx
@@ -19,7 +19,7 @@ export function IndexInvesting() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <CardDescription className="mt-3 text-sm leading-relaxed">
+        <CardDescription className="mt-3 text-sm leading-relaxed style-sera:mt-0">
           <a
             href="#"
             className="underline underline-offset-4 hover:text-primary"
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx
index 96d4081480..5c498b8b3a 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx
@@ -2,6 +2,8 @@
 
 import { Bar, BarChart, XAxis } from "recharts"
 
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
 import {
   Card,
   CardContent,
@@ -38,6 +40,9 @@ const chartConfig = {
 } satisfies ChartConfig
 
 export function PowerUsage() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
   return (
     <Card>
       <CardHeader>
@@ -64,7 +69,7 @@ export function PowerUsage() {
             <Bar
               dataKey="usage"
               fill="var(--color-usage)"
-              radius={[4, 4, 0, 0]}
+              radius={isRounded ? [4, 4, 0, 0] : 0}
             />
           </BarChart>
         </ChartContainer>
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/preferences.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/preferences.tsx
index 4d32792e36..894d71871a 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/preferences.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/preferences.tsx
@@ -73,7 +73,7 @@ export function Preferences() {
               </SelectContent>
             </Select>
           </Field>
-          <FieldSeparator className="-my-4" />
+          <FieldSeparator className="-my-4 style-sera:hidden" />
           <Field orientation="horizontal">
             <FieldContent>
               <FieldLabel htmlFor="public-statistics">
@@ -86,7 +86,7 @@ export function Preferences() {
             </FieldContent>
             <Switch id="public-statistics" defaultChecked />
           </Field>
-          <FieldSeparator className="-my-4" />
+          <FieldSeparator className="-my-4 style-sera:hidden" />
           <Field orientation="horizontal">
             <FieldContent>
               <FieldLabel htmlFor="email-notifications">
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/receiving-method.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/receiving-method.tsx
index 3b7fad597a..75f8c94726 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/receiving-method.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/receiving-method.tsx
@@ -18,6 +18,7 @@ import {
   FieldLabel,
   FieldLegend,
   FieldSet,
+  FieldTitle,
 } from "@/registry/bases/base/ui/field"
 import { Input } from "@/registry/bases/base/ui/input"
 import {
@@ -59,15 +60,13 @@ export function ReceivingMethod() {
             <FieldLegend variant="label">Receiving Method</FieldLegend>
             <RadioGroup
               defaultValue="bank"
-              className="grid grid-cols-1 items-start gap-3 md:grid-cols-2"
+              className="grid grid-cols-1 items-start gap-3 md:grid-cols-2 style-sera:grid-cols-1"
             >
               <FieldLabel htmlFor="method-bank">
                 <Field orientation="horizontal" className="pb-2.5">
                   <RadioGroupItem value="bank" id="method-bank" />
                   <FieldContent>
-                    <FieldDescription className="font-medium text-foreground">
-                      Bank Transfer
-                    </FieldDescription>
+                    <FieldTitle>Bank Transfer</FieldTitle>
                     <FieldDescription>SWIFT / IBAN</FieldDescription>
                   </FieldContent>
                 </Field>
@@ -76,9 +75,7 @@ export function ReceivingMethod() {
                 <Field orientation="horizontal" className="pb-2.5">
                   <RadioGroupItem value="paypal" id="method-paypal" />
                   <FieldContent>
-                    <FieldDescription className="font-medium text-foreground">
-                      PayPal
-                    </FieldDescription>
+                    <FieldTitle>PayPal</FieldTitle>
                     <FieldDescription className="line-clamp-1">
                       Instant Payout
                     </FieldDescription>
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx
index 92e5ade9e6..b98cf34ecf 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx
@@ -96,9 +96,9 @@ export function SocialLinks() {
           </Field>
         </FieldGroup>
       </CardContent>
-      <CardFooter className="justify-end gap-2">
-        <Button variant="secondary">Discard</Button>
-        <Button>Save Changes</Button>
+      <CardFooter className="justify-end gap-2 style-sera:justify-center">
+        <Button variant="secondary" className="style-sera:flex-1">Discard</Button>
+        <Button className="style-sera:flex-1">Save Changes</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/stock-performance.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/stock-performance.tsx
index 005347237d..818fc7cc06 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/stock-performance.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/stock-performance.tsx
@@ -103,7 +103,7 @@ export function StockPerformance() {
             </Combobox>
           </Field>
         </FieldGroup>
-        <Separator />
+        <Separator className="style-sera:hidden" />
         <ChartContainer config={chartConfig} className="h-[200px] w-full">
           <AreaChart
             accessibilityLayer
diff --git a/apps/v4/registry/bases/base/blocks/preview-02/cards/upcoming-payments.tsx b/apps/v4/registry/bases/base/blocks/preview-02/cards/upcoming-payments.tsx
index 9332a978c9..703431300a 100644
--- a/apps/v4/registry/bases/base/blocks/preview-02/cards/upcoming-payments.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview-02/cards/upcoming-payments.tsx
@@ -37,7 +37,7 @@ export function UpcomingPayments() {
             mode="single"
             selected={date}
             onSelect={setDate}
-            className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)]"
+            className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)] style-sera:md:[--cell-size:--spacing(9)]"
           />
         </Item>
         <ItemGroup className="w-full">
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
index ad22b7141f..45b8a30a56 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
@@ -95,8 +95,8 @@ export function ActivateAgentDialog() {
         </Alert>
       </CardContent>
       <CardFooter className="justify-end gap-2">
-        <Button variant="outline">Cancel</Button>
-        <Button>Enable with $100 credits</Button>
+        <Button variant="outline" className="style-sera:hidden">Cancel</Button>
+        <Button className="style-sera:w-full">Enable with $100 credits</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
index d9a2c57689..5bc9378968 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 import { Button } from "@/registry/bases/base/ui/button"
 import {
   Card,
@@ -49,6 +50,9 @@ const desktopDelta = Math.round(
 const desktopDeltaPrefix = desktopDelta > 0 ? "+" : ""
 
 export function BarChartCard() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
   return (
     <Card>
       <CardHeader>
@@ -84,12 +88,12 @@ export function BarChartCard() {
             <Bar
               dataKey="desktop"
               fill="var(--color-desktop)"
-              radius={[6, 6, 0, 0]}
+              radius={isRounded ? [6, 6, 0, 0] : 0}
             />
             <Bar
               dataKey="mobile"
               fill="var(--color-mobile)"
-              radius={[6, 6, 0, 0]}
+              radius={isRounded ? [6, 6, 0, 0] : 0}
             />
           </BarChart>
         </ChartContainer>
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
index e39bff08a2..1238e796f5 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
@@ -56,7 +56,7 @@ export function ContributionsActivity() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button form="contributions-activity">Save Changes</Button>
+        <Button form="contributions-activity" className="style-sera:w-full">Save Changes</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
index 17b0d0f50d..172b3c5dd1 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
@@ -57,7 +57,7 @@ export function FeedbackForm() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button type="submit" form="feedback-form">
+        <Button type="submit" form="feedback-form" className="style-sera:w-full">
           Submit
         </Button>
       </CardFooter>
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
index 9889111861..4ab39ca0d2 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
@@ -70,7 +70,7 @@ export function GithubProfile() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button form="profile">Save Profile</Button>
+        <Button form="profile" className="style-sera:w-full">Save Profile</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
index f8ca21becd..8be09ce0db 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
@@ -128,7 +128,7 @@ export function IconPreviewGrid() {
           {PREVIEW_ICONS.map((icon, index) => (
             <div
               key={index}
-              className="flex size-8 items-center justify-center rounded-md ring ring-border *:[svg]:size-4"
+              className="flex size-8 items-center justify-center rounded-md ring ring-border *:[svg]:size-4 style-sera:rounded-none"
             >
               <IconPlaceholder
                 lucide={icon.lucide}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
index c2d01be313..c126193753 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
@@ -98,9 +98,9 @@ export function ReportBug() {
         </FieldGroup>
       </CardContent>
       <CardFooter>
-        <Field orientation="horizontal" className="justify-end">
-          <Button variant="outline">Attach File</Button>
-          <Button>Submit Bug</Button>
+        <Field orientation="horizontal" className="justify-end style-sera:justify-center">
+          <Button variant="outline" className="style-sera:flex-1">Attach File</Button>
+          <Button className="style-sera:flex-1">Submit Bug</Button>
         </Field>
       </CardFooter>
     </Card>
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/style-overview.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/style-overview.tsx
index c252bbbac9..4210906d8a 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/style-overview.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/style-overview.tsx
@@ -29,14 +29,14 @@ export function StyleOverview() {
     <Card>
       <CardContent className="flex flex-col gap-6 style-lyra:gap-4 style-mira:gap-4">
         <div className="flex flex-col gap-1">
-          <div className="cn-font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg">
+          <div className="cn-font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg style-sera:text-lg style-sera:tracking-wide style-sera:uppercase">
             {currentStyle?.title} -{" "}
             {currentFontHeading?.name &&
             currentFontHeading.name !== currentFont?.name
               ? currentFontHeading.name
               : currentFont?.name}
           </div>
-          <div className="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm">
+          <div className="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm style-sera:text-sm style-sera:leading-relaxed">
             Designers love packing quirky glyphs into test phrases. This is a
             preview of the typography styles.
           </div>
@@ -61,7 +61,7 @@ export function StyleOverview() {
               className="flex flex-col flex-wrap items-center gap-2"
             >
               <div
-                className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten"
+                className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten style-sera:rounded-none style-sera:after:rounded-none"
                 style={
                   {
                     "--color": `var(${variant})`,
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/typography-specimen.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/typography-specimen.tsx
index 47096ac683..241ab1dc04 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/typography-specimen.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/typography-specimen.tsx
@@ -52,7 +52,7 @@ export function TypographySpecimen() {
         <div className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
           {headingLabel} - {bodyLabel}
         </div>
-        <p className="cn-font-heading text-2xl font-medium">
+        <p className="cn-font-heading text-2xl font-medium style-sera:text-lg style-sera:font-normal style-sera:tracking-wider style-sera:uppercase">
           Designing with rhythm and hierarchy.
         </p>
         <p className="text-sm leading-relaxed text-muted-foreground">
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
index d793e74a71..dfcc743ef7 100644
--- a/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
@@ -135,8 +135,8 @@ export function UIElements() {
         <div className="flex items-center gap-4">
           <AlertDialog>
             <AlertDialogTrigger render={<Button variant="outline" />}>
-              <span className="hidden md:block">Alert Dialog</span>
-              <span className="block md:hidden">Dialog</span>
+              <span className="hidden md:flex style-sera:md:hidden">Alert Dialog</span>
+              <span className="flex md:hidden style-sera:md:flex">Dialog</span>
             </AlertDialogTrigger>
             <AlertDialogContent size="sm">
               <AlertDialogHeader>
@@ -153,7 +153,10 @@ export function UIElements() {
             </AlertDialogContent>
           </AlertDialog>
           <ButtonGroup>
-            <Button variant="outline">Button Group</Button>
+            <Button variant="outline">
+              <span className="style-sera:hidden">Button Group</span>
+              <span className="hidden style-sera:block">Group</span>
+            </Button>
             <DropdownMenu>
               <DropdownMenuTrigger
                 render={<Button variant="outline" size="icon" />}
diff --git a/apps/v4/registry/bases/base/examples/demo.tsx b/apps/v4/registry/bases/base/examples/demo.tsx
index 68da9bcd13..1fcc61aab9 100644
--- a/apps/v4/registry/bases/base/examples/demo.tsx
+++ b/apps/v4/registry/bases/base/examples/demo.tsx
@@ -120,7 +120,7 @@ export function Demo() {
           <Card>
             <CardContent>
               <div className="grid grid-cols-8 place-items-center gap-4">
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="CopyIcon"
                     tabler="IconCopy"
@@ -129,7 +129,7 @@ export function Demo() {
                     remixicon="RiFileCopyLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="CircleAlertIcon"
                     tabler="IconExclamationCircle"
@@ -138,7 +138,7 @@ export function Demo() {
                     remixicon="RiErrorWarningLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="TrashIcon"
                     tabler="IconTrash"
@@ -147,7 +147,7 @@ export function Demo() {
                     remixicon="RiDeleteBinLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ShareIcon"
                     tabler="IconShare"
@@ -156,7 +156,7 @@ export function Demo() {
                     remixicon="RiShareLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ShoppingBagIcon"
                     tabler="IconShoppingBag"
@@ -165,7 +165,7 @@ export function Demo() {
                     remixicon="RiShoppingBagLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="MoreHorizontalIcon"
                     tabler="IconDots"
@@ -174,7 +174,7 @@ export function Demo() {
                     remixicon="RiMoreLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="Loader2Icon"
                     tabler="IconLoader"
@@ -183,7 +183,7 @@ export function Demo() {
                     remixicon="RiLoaderLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="PlusIcon"
                     tabler="IconPlus"
@@ -192,7 +192,7 @@ export function Demo() {
                     remixicon="RiAddLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="MinusIcon"
                     tabler="IconMinus"
@@ -201,7 +201,7 @@ export function Demo() {
                     remixicon="RiSubtractLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ArrowLeftIcon"
                     tabler="IconArrowLeft"
@@ -210,7 +210,7 @@ export function Demo() {
                     remixicon="RiArrowLeftLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ArrowRightIcon"
                     tabler="IconArrowRight"
@@ -219,7 +219,7 @@ export function Demo() {
                     remixicon="RiArrowRightLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="CheckIcon"
                     tabler="IconCheck"
@@ -228,7 +228,7 @@ export function Demo() {
                     remixicon="RiCheckLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ChevronDownIcon"
                     tabler="IconChevronDown"
@@ -237,7 +237,7 @@ export function Demo() {
                     remixicon="RiArrowDownSLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ChevronRightIcon"
                     tabler="IconChevronRight"
@@ -246,7 +246,7 @@ export function Demo() {
                     remixicon="RiArrowRightSLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="SearchIcon"
                     tabler="IconSearch"
@@ -255,7 +255,7 @@ export function Demo() {
                     remixicon="RiSearchLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="SettingsIcon"
                     tabler="IconSettings"
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx
index e274fcf3ee..313d460828 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx
@@ -24,6 +24,7 @@ import {
   ItemContent,
   ItemDescription,
 } from "@/registry/bases/radix/ui/item"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
 const chartData = [
   { month: "Dec", amount: 800 },
@@ -42,6 +43,9 @@ const chartConfig = {
 } satisfies ChartConfig
 
 export function ContributionHistory() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
   return (
     <Card>
       <CardHeader>
@@ -71,13 +75,13 @@ export function ContributionHistory() {
             <Bar
               dataKey="amount"
               fill="var(--color-amount)"
-              radius={[6, 6, 0, 0]}
+              radius={isRounded ? [6, 6, 0, 0] : 0}
               maxBarSize={40}
             />
           </BarChart>
         </ChartContainer>
       </CardContent>
-      <CardFooter className="flex-col gap-4">
+      <CardContent>
         <div className="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
           <Item variant="muted" className="flex-col items-stretch">
             <ItemContent className="gap-1">
@@ -106,7 +110,9 @@ export function ContributionHistory() {
             </ItemContent>
           </Item>
         </div>
-        <Button className="w-full">View Full Report</Button>
+      </CardContent>
+      <CardFooter className="flex-col gap-4">
+        <Button className="style-sera:w-full">View Full Report</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/dividend-income.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/dividend-income.tsx
index 1d91c1a341..5bab869e60 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/dividend-income.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/dividend-income.tsx
@@ -24,6 +24,7 @@ import {
   ItemGroup,
   ItemTitle,
 } from "@/registry/bases/radix/ui/item"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 const HOLDINGS = [
@@ -81,6 +82,9 @@ const miniChartConfig = {
 } satisfies ChartConfig
 
 export function DividendIncome() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
   return (
     <Card>
       <CardHeader>
@@ -123,7 +127,7 @@ export function DividendIncome() {
                   <Bar
                     dataKey="value"
                     fill="var(--color-value)"
-                    radius={[3, 3, 0, 0]}
+                    radius={isRounded ? [3, 3, 0, 0] : 0}
                   />
                 </BarChart>
               </ChartContainer>
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/index-investing.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/index-investing.tsx
index 2cfdb7dc1c..1c0410b8dd 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/index-investing.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/index-investing.tsx
@@ -19,7 +19,7 @@ export function IndexInvesting() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <CardDescription className="mt-3 text-sm leading-relaxed">
+        <CardDescription className="mt-3 text-sm leading-relaxed style-sera:mt-0">
           <a
             href="#"
             className="underline underline-offset-4 hover:text-primary"
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/power-usage.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/power-usage.tsx
index 89ad93858c..3df26ea445 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/power-usage.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/power-usage.tsx
@@ -18,6 +18,7 @@ import {
 } from "@/registry/bases/radix/ui/chart"
 import { Progress } from "@/registry/bases/radix/ui/progress"
 import { Separator } from "@/registry/bases/radix/ui/separator"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
 const chartData = [
   { hour: "6a", usage: 1.2 },
@@ -38,6 +39,9 @@ const chartConfig = {
 } satisfies ChartConfig
 
 export function PowerUsage() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
   return (
     <Card>
       <CardHeader>
@@ -64,7 +68,7 @@ export function PowerUsage() {
             <Bar
               dataKey="usage"
               fill="var(--color-usage)"
-              radius={[4, 4, 0, 0]}
+              radius={isRounded ? [4, 4, 0, 0] : 0}
             />
           </BarChart>
         </ChartContainer>
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/preferences.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/preferences.tsx
index 5e5a2421c3..00d396834e 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/preferences.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/preferences.tsx
@@ -67,7 +67,7 @@ export function Preferences() {
               </SelectContent>
             </Select>
           </Field>
-          <FieldSeparator className="-my-4" />
+          <FieldSeparator className="-my-4 style-sera:hidden" />
           <Field orientation="horizontal">
             <FieldContent>
               <FieldLabel htmlFor="public-statistics">
@@ -80,7 +80,7 @@ export function Preferences() {
             </FieldContent>
             <Switch id="public-statistics" defaultChecked />
           </Field>
-          <FieldSeparator className="-my-4" />
+          <FieldSeparator className="-my-4 style-sera:hidden" />
           <Field orientation="horizontal">
             <FieldContent>
               <FieldLabel htmlFor="email-notifications">
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/receiving-method.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/receiving-method.tsx
index ceee2f0fcb..c513bf782c 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/receiving-method.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/receiving-method.tsx
@@ -18,6 +18,7 @@ import {
   FieldLabel,
   FieldLegend,
   FieldSet,
+  FieldTitle,
 } from "@/registry/bases/radix/ui/field"
 import { Input } from "@/registry/bases/radix/ui/input"
 import {
@@ -59,15 +60,13 @@ export function ReceivingMethod() {
             <FieldLegend variant="label">Receiving Method</FieldLegend>
             <RadioGroup
               defaultValue="bank"
-              className="grid grid-cols-1 items-start gap-3 md:grid-cols-2"
+              className="grid grid-cols-1 items-start gap-3 md:grid-cols-2 style-sera:grid-cols-1"
             >
               <FieldLabel htmlFor="method-bank">
                 <Field orientation="horizontal" className="pb-2.5">
                   <RadioGroupItem value="bank" id="method-bank" />
                   <FieldContent>
-                    <FieldDescription className="font-medium text-foreground">
-                      Bank Transfer
-                    </FieldDescription>
+                    <FieldTitle>Bank Transfer</FieldTitle>
                     <FieldDescription>SWIFT / IBAN</FieldDescription>
                   </FieldContent>
                 </Field>
@@ -76,9 +75,7 @@ export function ReceivingMethod() {
                 <Field orientation="horizontal" className="pb-2.5">
                   <RadioGroupItem value="paypal" id="method-paypal" />
                   <FieldContent>
-                    <FieldDescription className="font-medium text-foreground">
-                      PayPal
-                    </FieldDescription>
+                    <FieldTitle>PayPal</FieldTitle>
                     <FieldDescription className="line-clamp-1">
                       Instant Payout
                     </FieldDescription>
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/social-links.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/social-links.tsx
index a618906aa6..dfa26d0b95 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/social-links.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/social-links.tsx
@@ -96,9 +96,11 @@ export function SocialLinks() {
           </Field>
         </FieldGroup>
       </CardContent>
-      <CardFooter className="justify-end gap-2">
-        <Button variant="secondary">Discard</Button>
-        <Button>Save Changes</Button>
+      <CardFooter className="justify-end gap-2 style-sera:justify-center">
+        <Button variant="secondary" className="style-sera:flex-1">
+          Discard
+        </Button>
+        <Button className="style-sera:flex-1">Save Changes</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/stock-performance.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/stock-performance.tsx
index 42ac800cdb..a8e905c59a 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/stock-performance.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/stock-performance.tsx
@@ -103,7 +103,7 @@ export function StockPerformance() {
             </Combobox>
           </Field>
         </FieldGroup>
-        <Separator />
+        <Separator className="style-sera:hidden" />
         <ChartContainer config={chartConfig} className="h-[200px] w-full">
           <AreaChart
             accessibilityLayer
diff --git a/apps/v4/registry/bases/radix/blocks/preview-02/cards/upcoming-payments.tsx b/apps/v4/registry/bases/radix/blocks/preview-02/cards/upcoming-payments.tsx
index 183536e024..ff70b18a25 100644
--- a/apps/v4/registry/bases/radix/blocks/preview-02/cards/upcoming-payments.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview-02/cards/upcoming-payments.tsx
@@ -37,7 +37,7 @@ export function UpcomingPayments() {
             mode="single"
             selected={date}
             onSelect={setDate}
-            className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)]"
+            className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)] style-sera:md:[--cell-size:--spacing(9)]"
           />
         </Item>
         <ItemGroup className="w-full">
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/activate-agent-dialog.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/activate-agent-dialog.tsx
index 4a739659af..295b42baac 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/activate-agent-dialog.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/activate-agent-dialog.tsx
@@ -95,8 +95,10 @@ export function ActivateAgentDialog() {
         </Alert>
       </CardContent>
       <CardFooter className="justify-end gap-2">
-        <Button variant="outline">Cancel</Button>
-        <Button>Enable with $100 credits</Button>
+        <Button variant="outline" className="style-sera:hidden">
+          Cancel
+        </Button>
+        <Button className="style-sera:w-full">Enable with $100 credits</Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
index 12b8f646b2..588326fe9e 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 import { Button } from "@/registry/bases/radix/ui/button"
 import {
   Card,
@@ -49,6 +50,9 @@ const desktopDelta = Math.round(
 const desktopDeltaPrefix = desktopDelta > 0 ? "+" : ""
 
 export function BarChartCard() {
+  const [params] = useDesignSystemSearchParams()
+  const isRounded = !["lyra", "sera"].includes(params.style)
+
   return (
     <Card>
       <CardHeader>
@@ -84,12 +88,12 @@ export function BarChartCard() {
             <Bar
               dataKey="desktop"
               fill="var(--color-desktop)"
-              radius={[6, 6, 0, 0]}
+              radius={isRounded ? [6, 6, 0, 0] : 0}
             />
             <Bar
               dataKey="mobile"
               fill="var(--color-mobile)"
-              radius={[6, 6, 0, 0]}
+              radius={isRounded ? [6, 6, 0, 0] : 0}
             />
           </BarChart>
         </ChartContainer>
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/contributions-activity.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/contributions-activity.tsx
index 4855d6727d..f41712f57f 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/contributions-activity.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/contributions-activity.tsx
@@ -56,7 +56,9 @@ export function ContributionsActivity() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button form="contributions-activity">Save Changes</Button>
+        <Button form="contributions-activity" className="style-sera:w-full">
+          Save Changes
+        </Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/feedback-form.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/feedback-form.tsx
index d3eb7df6d6..56645d7208 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/feedback-form.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/feedback-form.tsx
@@ -57,7 +57,11 @@ export function FeedbackForm() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button type="submit" form="feedback-form">
+        <Button
+          type="submit"
+          form="feedback-form"
+          className="style-sera:w-full"
+        >
           Submit
         </Button>
       </CardFooter>
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/github-profile.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/github-profile.tsx
index ca961968b5..9bc37c9ba2 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/github-profile.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/github-profile.tsx
@@ -70,7 +70,9 @@ export function GithubProfile() {
         </form>
       </CardContent>
       <CardFooter>
-        <Button form="profile">Save Profile</Button>
+        <Button form="profile" className="style-sera:w-full">
+          Save Profile
+        </Button>
       </CardFooter>
     </Card>
   )
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/icon-preview-grid.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/icon-preview-grid.tsx
index 3695f027c0..e9a06f7362 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/icon-preview-grid.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/icon-preview-grid.tsx
@@ -128,7 +128,7 @@ export function IconPreviewGrid() {
           {PREVIEW_ICONS.map((icon, index) => (
             <div
               key={index}
-              className="flex size-8 items-center justify-center rounded-md ring ring-border *:[svg]:size-4"
+              className="flex size-8 items-center justify-center rounded-md ring ring-border style-sera:rounded-none *:[svg]:size-4"
             >
               <IconPlaceholder
                 lucide={icon.lucide}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/report-bug.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/report-bug.tsx
index 64430172c4..a123e422e4 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/report-bug.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/report-bug.tsx
@@ -82,9 +82,14 @@ export function ReportBug() {
         </FieldGroup>
       </CardContent>
       <CardFooter>
-        <Field orientation="horizontal" className="justify-end">
-          <Button variant="outline">Attach File</Button>
-          <Button>Submit Bug</Button>
+        <Field
+          orientation="horizontal"
+          className="justify-end style-sera:justify-center"
+        >
+          <Button variant="outline" className="style-sera:flex-1">
+            Attach File
+          </Button>
+          <Button className="style-sera:flex-1">Submit Bug</Button>
         </Field>
       </CardFooter>
     </Card>
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/style-overview.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/style-overview.tsx
index 47097c82f0..6d312ccec3 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/style-overview.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/style-overview.tsx
@@ -29,14 +29,14 @@ export function StyleOverview() {
     <Card>
       <CardContent className="flex flex-col gap-6 style-lyra:gap-4 style-mira:gap-4">
         <div className="flex flex-col gap-1">
-          <div className="cn-font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg">
+          <div className="cn-font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg style-sera:text-lg style-sera:tracking-wide style-sera:uppercase">
             {currentStyle?.title} -{" "}
             {currentFontHeading?.name &&
             currentFontHeading.name !== currentFont?.name
               ? currentFontHeading.name
               : currentFont?.name}
           </div>
-          <div className="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm">
+          <div className="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm style-sera:text-sm style-sera:leading-relaxed">
             Designers love packing quirky glyphs into test phrases. This is a
             preview of the typography styles.
           </div>
@@ -61,7 +61,7 @@ export function StyleOverview() {
               className="flex flex-col flex-wrap items-center gap-2"
             >
               <div
-                className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten"
+                className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten style-sera:rounded-none style-sera:after:rounded-none"
                 style={
                   {
                     "--color": `var(${variant})`,
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/typography-specimen.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/typography-specimen.tsx
index 55f3cb01e1..d9d35791de 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/typography-specimen.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/typography-specimen.tsx
@@ -52,7 +52,7 @@ export function TypographySpecimen() {
         <div className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
           {headingLabel} - {bodyLabel}
         </div>
-        <p className="cn-font-heading text-2xl font-medium">
+        <p className="cn-font-heading text-2xl font-medium style-sera:text-lg style-sera:font-normal style-sera:tracking-wider style-sera:uppercase">
           Designing with rhythm and hierarchy.
         </p>
         <p className="text-sm leading-relaxed text-muted-foreground">
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/ui-elements.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/ui-elements.tsx
index aed41d5a4e..10d7325d1e 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/cards/ui-elements.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/ui-elements.tsx
@@ -136,8 +136,12 @@ export function UIElements() {
           <AlertDialog>
             <AlertDialogTrigger asChild>
               <Button variant="outline">
-                <span className="hidden md:block">Alert Dialog</span>
-                <span className="block md:hidden">Dialog</span>
+                <span className="hidden md:flex style-sera:md:hidden">
+                  Alert Dialog
+                </span>
+                <span className="flex md:hidden style-sera:md:flex">
+                  Dialog
+                </span>
               </Button>
             </AlertDialogTrigger>
             <AlertDialogContent size="sm">
@@ -155,7 +159,10 @@ export function UIElements() {
             </AlertDialogContent>
           </AlertDialog>
           <ButtonGroup>
-            <Button variant="outline">Button Group</Button>
+            <Button variant="outline">
+              <span className="style-sera:hidden">Button Group</span>
+              <span className="hidden style-sera:block">Group</span>
+            </Button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="outline" size="icon">
diff --git a/apps/v4/registry/bases/radix/examples/demo.tsx b/apps/v4/registry/bases/radix/examples/demo.tsx
index cc046c52e4..c5abf96e7a 100644
--- a/apps/v4/registry/bases/radix/examples/demo.tsx
+++ b/apps/v4/registry/bases/radix/examples/demo.tsx
@@ -113,7 +113,7 @@ export function Demo() {
           <Card>
             <CardContent>
               <div className="grid grid-cols-8 place-items-center gap-4">
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="CopyIcon"
                     tabler="IconCopy"
@@ -122,7 +122,7 @@ export function Demo() {
                     remixicon="RiFileCopyLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="CircleAlertIcon"
                     tabler="IconExclamationCircle"
@@ -131,7 +131,7 @@ export function Demo() {
                     remixicon="RiErrorWarningLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="TrashIcon"
                     tabler="IconTrash"
@@ -140,7 +140,7 @@ export function Demo() {
                     remixicon="RiDeleteBinLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ShareIcon"
                     tabler="IconShare"
@@ -149,7 +149,7 @@ export function Demo() {
                     remixicon="RiShareLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ShoppingBagIcon"
                     tabler="IconShoppingBag"
@@ -158,7 +158,7 @@ export function Demo() {
                     remixicon="RiShoppingBagLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="MoreHorizontalIcon"
                     tabler="IconDots"
@@ -167,7 +167,7 @@ export function Demo() {
                     remixicon="RiMoreLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="Loader2Icon"
                     tabler="IconLoader"
@@ -176,7 +176,7 @@ export function Demo() {
                     remixicon="RiLoaderLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="PlusIcon"
                     tabler="IconPlus"
@@ -185,7 +185,7 @@ export function Demo() {
                     remixicon="RiAddLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="MinusIcon"
                     tabler="IconMinus"
@@ -194,7 +194,7 @@ export function Demo() {
                     remixicon="RiSubtractLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ArrowLeftIcon"
                     tabler="IconArrowLeft"
@@ -203,7 +203,7 @@ export function Demo() {
                     remixicon="RiArrowLeftLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ArrowRightIcon"
                     tabler="IconArrowRight"
@@ -212,7 +212,7 @@ export function Demo() {
                     remixicon="RiArrowRightLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="CheckIcon"
                     tabler="IconCheck"
@@ -221,7 +221,7 @@ export function Demo() {
                     remixicon="RiCheckLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ChevronDownIcon"
                     tabler="IconChevronDown"
@@ -230,7 +230,7 @@ export function Demo() {
                     remixicon="RiArrowDownSLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="ChevronRightIcon"
                     tabler="IconChevronRight"
@@ -239,7 +239,7 @@ export function Demo() {
                     remixicon="RiArrowRightSLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="SearchIcon"
                     tabler="IconSearch"
@@ -248,7 +248,7 @@ export function Demo() {
                     remixicon="RiSearchLine"
                   />
                 </Card>
-                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                <Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
                   <IconPlaceholder
                     lucide="SettingsIcon"
                     tabler="IconSettings"
diff --git a/apps/v4/registry/bases/radix/examples/tabs-example.tsx b/apps/v4/registry/bases/radix/examples/tabs-example.tsx
index eba135baae..ae6068ec44 100644
--- a/apps/v4/registry/bases/radix/examples/tabs-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/tabs-example.tsx
@@ -197,7 +197,7 @@ function TabsWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -222,7 +222,7 @@ function TabsLineWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -286,7 +286,7 @@ function TabsWithDropdown() {
           </DropdownMenu>
         </div>
 
-        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
@@ -311,7 +311,7 @@ function TabsVertical() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -344,7 +344,7 @@ function TabsWithInputAndButton() {
             <Button>Action</Button>
           </div>
         </div>
-        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
diff --git a/apps/v4/registry/styles/style-sera.css b/apps/v4/registry/styles/style-sera.css
index bf027ce252..c8df2fbf7c 100644
--- a/apps/v4/registry/styles/style-sera.css
+++ b/apps/v4/registry/styles/style-sera.css
@@ -233,12 +233,12 @@
   }
 
   .cn-calendar-caption-label {
-    @apply h-8 rounded-none pr-2 pl-3;
+    @apply h-8 pr-2 pl-3;
   }
 
   /* MARK: Card */
   .cn-card {
-    @apply bg-card text-card-foreground ring-foreground/10 gap-8 overflow-hidden rounded-none py-8 text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none;
+    @apply bg-card text-card-foreground ring-foreground/5 gap-8 overflow-hidden py-8 text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none;
   }
 
   .cn-card-header {
@@ -246,7 +246,7 @@
   }
 
   .cn-card-title {
-    @apply text-lg font-normal uppercase tracking-wider;
+    @apply text-lg tracking-wider uppercase;
   }
 
   .cn-card-description {
@@ -258,21 +258,12 @@
   }
 
   .cn-card-footer {
-    @apply rounded-none px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5;
-  }
-
-  /* MARK: Carousel */
-  .cn-carousel-previous {
-    @apply rounded-none;
-  }
-
-  .cn-carousel-next {
-    @apply rounded-none;
+    @apply px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5;
   }
 
   /* MARK: Chart */
   .cn-chart-tooltip {
-    @apply bg-popover text-popover-foreground ring-foreground/10 gap-1.5 rounded-none px-2.5 py-1.5 text-xs shadow-sm ring-1;
+    @apply bg-popover text-popover-foreground ring-foreground/10 gap-1.5 px-2.5 py-1.5 text-xs shadow-sm ring-1;
   }
 
   /* MARK: Checkbox */
@@ -548,7 +539,7 @@
 
   /* MARK: Empty */
   .cn-empty {
-    @apply gap-4 rounded-none border-dashed p-12;
+    @apply gap-4 border-dashed p-12;
   }
 
   .cn-empty-header {
@@ -568,7 +559,7 @@
   }
 
   .cn-empty-title {
-    @apply text-lg font-semibold tracking-wide uppercase;
+    @apply text-lg tracking-wider uppercase;
   }
 
   .cn-empty-description {
@@ -1184,11 +1175,11 @@
 
   /* MARK: Switch */
   .cn-switch {
-    @apply data-checked:bg-primary data-unchecked:bg-input data-checked:border-primary border data-unchecked:border-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-none focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-4.5 data-[size=default]:w-9 data-[size=sm]:h-3.5 data-[size=sm]:w-7;
+    @apply data-checked:bg-primary data-unchecked:bg-input data-checked:border-primary border data-unchecked:border-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-none focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-4.5 data-[size=default]:w-8.25 data-[size=sm]:h-3.5 data-[size=sm]:w-6.25;
   }
 
   .cn-switch-thumb {
-    @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%+2px)] data-unchecked:translate-x-0;
+    @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-checked:translate-x-[calc(100%+2px)] data-unchecked:translate-x-0.25;
   }
 
   /* MARK: Table */
@@ -1234,11 +1225,11 @@
   }
 
   .cn-tabs-list {
-    @apply rounded-none p-0.5 group-data-horizontal/tabs:h-10 group-data-vertical/tabs:rounded-none data-[variant=line]:rounded-none;
+    @apply p-1 group-data-horizontal/tabs:h-10;
   }
 
   .cn-tabs-trigger {
-    @apply gap-2 rounded-none border border-transparent! px-4 py-1.5 text-xs font-medium group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 group-data-vertical/tabs:rounded-none [&_svg:not([class*='size-'])]:size-4 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5;
+    @apply gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 [&_svg:not([class*='size-'])]:size-4 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 uppercase tracking-wider;
   }
 
   .cn-tabs-content {