feat: upgrade to tailwind v4.

package.json

@@ -184,6 +184,7 @@
   "devDependencies": {
     "@biomejs/biome": "^2.2.5",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/typography": "^0.5.16",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20.17.47",
@@ -194,11 +195,11 @@
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-tailwindcss": "^0.5.14",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "prisma": "^6.13.0",
     "tailwind-scrollbar": "^4.0.2",
     "tailwind-scrollbar-hide": "^2.0.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.2.2",
     "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

src/app/page.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-(family-name:--font-geist-sans)">
       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
         <Image
           className="dark:invert"
@@ -12,10 +12,10 @@ export default function Home() {
           height={38}
           priority
         />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-(family-name:--font-geist-mono)">
           <li className="mb-2">
             Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+            <code className="bg-black/5 dark:bg-white/6 px-1 py-0.5 rounded font-semibold">
               src/app/page.tsx
             </code>
             .
@@ -40,7 +40,7 @@ export default function Home() {
             Deploy now
           </a>
           <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            className="rounded-full border border-solid border-black/8 dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"

src/components/notebook/presentation/components/PresentationDashboard.tsx

@@ -117,7 +117,7 @@ export function PresentationDashboard() {
   return (
     <div className="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-6xl flex-col gap-8 px-4 py-8 sm:px-6">
       <section className="grid gap-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
-        <Card className="border-border/60 bg-background/70 shadow-sm">
+        <Card className="border-border/60 bg-background/70 shadow-xs">
           <CardHeader>
             <CardTitle className="flex items-center gap-2 text-2xl">
               <Sparkles className="h-6 w-6 text-primary" />
@@ -207,7 +207,7 @@ export function PresentationDashboard() {
           </CardContent>
         </Card>
 
-        <Card className="border-border/60 bg-background/70 shadow-sm">
+        <Card className="border-border/60 bg-background/70 shadow-xs">
           <CardHeader>
             <CardTitle className="flex items-center gap-2 text-xl">
               <Presentation className="h-5 w-5 text-primary" />

src/components/notebook/presentation/components/outline/GenerateImageSlidesButton.tsx

@@ -129,7 +129,7 @@ export function GenerateImageSlidesButton({
                     {m.name}
                   </span>
                   {m.premium && (
-                    <span className="rounded-full border border-amber-300 bg-gradient-to-br from-amber-100 to-amber-200 px-1.5 py-[1px] text-[9px] font-bold tracking-wide text-amber-700 uppercase">
+                    <span className="rounded-full border border-amber-300 bg-linear-to-br from-amber-100 to-amber-200 px-1.5 py-px text-[9px] font-bold tracking-wide text-amber-700 uppercase">
                       Premium
                     </span>
                   )}

src/components/notebook/presentation/components/outline/OutlineTemplateModal.tsx

@@ -46,7 +46,7 @@ function SelectableTemplateCard({
     >
       <div
         className={cn(
-          "aspect-[4/3] w-full overflow-hidden rounded-lg border bg-card shadow-sm transition-all",
+          "aspect-4/3 w-full overflow-hidden rounded-lg border bg-card shadow-xs transition-all",
           isSelected
             ? "border-primary ring-2 ring-primary/20"
             : "border-border group-hover:border-primary/50 group-hover:shadow-md",

src/components/notebook/presentation/components/outline/PromptInput.tsx

@@ -20,7 +20,7 @@ export function PromptInput() {
   };
 
   return (
-    <div className="rounded-2xl border border-border/60 bg-background/80 p-3 shadow-sm sm:p-4">
+    <div className="rounded-2xl border border-border/60 bg-background/80 p-3 shadow-xs sm:p-4">
       <div className="mb-3 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div className="space-y-1">
           <h3 className="text-sm font-semibold text-foreground">

src/components/notebook/presentation/components/theme/PresentationCustomizer.tsx

@@ -59,7 +59,7 @@ export function PresentationCustomizer() {
   return (
     <div className="space-y-4 rounded-xl border bg-muted/40">
       {/* Text Content Section */}
-      <div className="border-0 p-6 shadow-sm">
+      <div className="border-0 p-6 shadow-xs">
         <div className="mb-4 flex items-center gap-2">
           <List className="h-5 w-5 text-primary" />
           <h2 className="text-xl font-semibold text-foreground">

src/components/notebook/presentation/components/theme/ThemeModalContent.tsx

@@ -61,7 +61,7 @@ export function ThemeModalContent({
 
   return (
     <div className="flex h-full max-h-[85vh] w-full flex-col overflow-hidden border-border bg-background lg:w-[40%] lg:border-r">
-      <div className="flex flex-shrink-0 items-center justify-between border-b border-border px-2">
+      <div className="flex shrink-0 items-center justify-between border-b border-border px-2">
         <h2 className="p-4 text-lg font-semibold">Themes</h2>
         <div className="flex items-center gap-2">
           <Button size="icon" variant="ghost" onClick={onClose}>
@@ -76,7 +76,7 @@ export function ThemeModalContent({
         onValueChange={onTabChange}
         className="flex min-h-0 flex-1 flex-col overflow-hidden"
       >
-        <div className="flex-shrink-0 px-4 pt-2">
+        <div className="shrink-0 px-4 pt-2">
           <TabsList className="h-auto w-full justify-start gap-6 rounded-none border-b border-border bg-transparent p-0">
             <TabsTrigger
               value="allweone-themes"
@@ -198,7 +198,7 @@ export function ThemeModalContent({
       </Tabs>
 
       {/* Apply Button */}
-      <div className="flex-shrink-0 border-t border-border p-4">
+      <div className="shrink-0 border-t border-border p-4">
         <Button
           onClick={onApplyTheme}
           className="w-full"

src/components/notebook/presentation/components/theme/ThemeModalPreview.tsx

@@ -21,7 +21,7 @@ export function ThemeModalPreview({
   return (
     <div className="hidden h-[calc(85vh)] w-[60%] flex-col overflow-y-auto bg-muted/30 lg:flex">
       {/* Preview Header */}
-      <div className="flex flex-shrink-0 items-center justify-between gap-3 border-b border-border p-4">
+      <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border p-4">
         <h2 className="text-lg font-semibold">Preview</h2>
       </div>
 

src/components/notebook/presentation/components/theme/create-theme/CompactBackgroundSelector/CompactColorGrid.tsx

@@ -25,7 +25,7 @@ export function CompactColorGrid({
             className={cn(
               "group relative aspect-square rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-md",
               selected === c.value
-                ? "z-10 scale-105 shadow-sm ring-2 ring-primary ring-offset-2 ring-offset-card"
+                ? "z-10 scale-105 shadow-xs ring-2 ring-primary ring-offset-2 ring-offset-card"
                 : "hover:ring-2 hover:ring-primary/20 hover:ring-offset-1",
             )}
             style={{ background: c.value }}
@@ -50,7 +50,7 @@ export function CompactColorGrid({
             placeholder="#000000"
           />
           <div
-            className="absolute top-1/2 left-2 size-4 -translate-y-1/2 rounded-full border border-border shadow-sm"
+            className="absolute top-1/2 left-2 size-4 -translate-y-1/2 rounded-full border border-border shadow-xs"
             style={{ background: selected ?? "#ffffff" }}
           />
         </div>

src/components/notebook/presentation/components/theme/create-theme/CompactBackgroundSelector/CompactImageSelector.tsx

@@ -83,28 +83,28 @@ export function CompactImageSelector({
       <TabsList className="mb-4 grid h-9 w-full grid-cols-3 bg-muted/50 p-1">
         <TabsTrigger
           value="upload-url"
-          className="text-xs data-[state=active]:bg-background data-[state=active]:shadow-sm"
+          className="text-xs data-[state=active]:bg-background data-[state=active]:shadow-xs"
         >
           <Upload className="mr-1.5 size-3" />
           Upload
         </TabsTrigger>
         <TabsTrigger
           value="ai"
-          className="text-xs data-[state=active]:bg-background data-[state=active]:shadow-sm"
+          className="text-xs data-[state=active]:bg-background data-[state=active]:shadow-xs"
         >
           <Sparkles className="mr-1.5 size-3" />
           AI Gen
         </TabsTrigger>
         <TabsTrigger
           value="search"
-          className="text-xs data-[state=active]:bg-background data-[state=active]:shadow-sm"
+          className="text-xs data-[state=active]:bg-background data-[state=active]:shadow-xs"
         >
           <ImageLucide className="mr-1.5 size-3" />
           Search
         </TabsTrigger>
       </TabsList>
 
-      <div className="min-h-[200px] rounded-xl border border-border bg-card p-4 shadow-sm">
+      <div className="min-h-[200px] rounded-xl border border-border bg-card p-4 shadow-xs">
         <TabsContent value="upload-url" className="mt-0 space-y-4">
           <div className="space-y-3">
             <div className="space-y-2">

src/components/notebook/presentation/components/theme/create-theme/CompactBackgroundSelector/CompactUploadZone.tsx

@@ -41,7 +41,7 @@ export function CompactUploadZone({
         </div>
       ) : (
         <>
-          <div className="rounded-full bg-background p-2 shadow-sm ring-1 ring-border/50">
+          <div className="rounded-full bg-background p-2 shadow-xs ring-1 ring-border/50">
             <Upload className="size-4 text-muted-foreground" />
           </div>
           <div className="space-y-0.5">

src/components/notebook/presentation/components/theme/create-theme/CompactBackgroundSelector/index.tsx

@@ -119,7 +119,7 @@ export function CompactBackgroundSelector({
       <div className="min-h-[200px]">
         {activeType === "solid" && (
           <div className="space-y-4">
-            <div className="rounded-xl border border-border bg-card p-4 shadow-sm">
+            <div className="rounded-xl border border-border bg-card p-4 shadow-xs">
               <CompactColorGrid
                 selected={value?.override}
                 onPick={handleSolidColorChange}
@@ -130,7 +130,7 @@ export function CompactBackgroundSelector({
 
         {activeType === "gradient" && (
           <div className="space-y-4">
-            <div className="rounded-xl border border-border bg-card p-4 shadow-sm">
+            <div className="rounded-xl border border-border bg-card p-4 shadow-xs">
               <CompactGradientGrid onPick={handleGradientChange} />
             </div>
           </div>

src/components/notebook/presentation/components/theme/create-theme/DesignStep.tsx

@@ -16,28 +16,28 @@ const designStyles: {
   {
     id: "standard",
     name: "Standard",
-    description: "Small border radius with minimal shadow",
-    preview: "rounded-lg shadow-sm",
-    innerPreview: "rounded-md shadow-sm",
+    description: "Small border radius with minimal shadow-sm",
+    preview: "rounded-lg shadow-xs",
+    innerPreview: "rounded-md shadow-xs",
   },
   {
     id: "flat",
     name: "Flat",
-    description: "No shadow and no border radius",
+    description: "No shadow-sm and no border radius",
     preview: "rounded-none shadow-none",
     innerPreview: "rounded-none shadow-none",
   },
   {
     id: "outline",
     name: "Outline",
-    description: "Outline-like effect using shadow",
+    description: "Outline-like effect using shadow-sm",
     preview: "rounded-none shadow-[0_0_0_2px_rgba(37,99,235,1)]",
     innerPreview: "rounded-none shadow-[0_0_0_2px_rgba(37,99,235,1)]",
   },
   {
     id: "blocky",
     name: "Blocky",
-    description: "3D effect using unblurred box shadow",
+    description: "3D effect using unblurred box shadow-sm",
     preview: "rounded-none shadow-[4px_4px_0_0_rgba(0,0,0,0.2)]",
     innerPreview: "rounded-none shadow-[3px_3px_0_0_rgba(0,0,0,0.2)]",
   },
@@ -45,8 +45,8 @@ const designStyles: {
     id: "rounded",
     name: "Rounded",
     description: "Just rounded with gentle shadows",
-    preview: "rounded-3xl shadow-sm",
-    innerPreview: "rounded-full shadow-sm",
+    preview: "rounded-3xl shadow-xs",
+    innerPreview: "rounded-full shadow-xs",
   },
 ];
 

src/components/notebook/presentation/components/theme/create-theme/StepContent.tsx

@@ -78,7 +78,7 @@ export function StepContent({
                   id="theme-name"
                   {...field}
                   placeholder="Enter a name for your theme"
-                  className="w-full rounded-lg border-2 border-border bg-background px-4 py-3 text-foreground transition-all outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
+                  className="w-full rounded-lg border-2 border-border bg-background px-4 py-3 text-foreground transition-all outline-hidden focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
                 />
               )}
             />

src/components/notebook/presentation/components/theme/create-theme/font-step/FontCombinationsList.tsx

@@ -41,7 +41,7 @@ export function FontCombinationsList({
                 <div className="text-xs text-muted-foreground">{pair.body}</div>
               </div>
               {isSelected && (
-                <Check className="h-4 w-4 flex-shrink-0 text-primary" />
+                <Check className="h-4 w-4 shrink-0 text-primary" />
               )}
             </button>
           );

src/components/notebook/presentation/components/theme/create-theme/font-step/FontPickerField.tsx

@@ -63,7 +63,7 @@ export function FontPickerField({
       {currentUrl ? (
         // Show custom uploaded font display
         <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/50 p-3">
-          <FileText className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+          <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
           <div className="min-w-0 flex-1">
             <p
               className="truncate text-sm font-medium"

src/components/notebook/presentation/components/theme/create-theme/font-step/UserFontPairs.tsx

@@ -136,7 +136,7 @@ export function UserFontPairs({
 
                 <div className="flex items-center gap-2">
                   {isSelected && (
-                    <Check className="h-4 w-4 flex-shrink-0 text-primary" />
+                    <Check className="h-4 w-4 shrink-0 text-primary" />
                   )}
                   <button
                     onClick={(e) => handleDelete(e, pair.id)}
@@ -145,7 +145,7 @@ export function UserFontPairs({
                       "rounded-md p-1.5 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive",
                       isDeleting &&
                         "animate-pulse text-destructive opacity-100",
-                      "focus:opacity-100 focus:outline-none",
+                      "focus:opacity-100 focus:outline-hidden",
                     )}
                     title="Delete font pair"
                   >

src/components/notebook/presentation/editor/custom-elements/GenerateSlideUI.tsx

@@ -101,7 +101,7 @@ export function GenerateSlideUI({ slideId, onClose }: GenerateSlideUIProps) {
             </motion.p>
 
             <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="rounded-2xl border border-slate-200/80 bg-white/90 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/5 sm:p-5">
+              <div className="rounded-2xl border border-slate-200/80 bg-white/90 p-4 shadow-xs backdrop-blur-sm dark:border-white/10 dark:bg-white/5 sm:p-5">
                 <div className="flex flex-wrap items-center gap-3">
                   <div className="flex items-center gap-2">
                     <span className="text-xs font-medium text-slate-500 dark:text-white/60">
@@ -180,7 +180,7 @@ export function GenerateSlideUI({ slideId, onClose }: GenerateSlideUIProps) {
                   onKeyDown={handleKeyDown}
                   placeholder="Describe what you want on this slide..."
                   rows={3}
-                  className="mt-4 w-full resize-none rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm focus:border-slate-300 focus:outline-none focus:ring-0 dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-white/40 dark:focus:border-white/30"
+                  className="mt-4 w-full resize-none rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 shadow-xs focus:border-slate-300 focus:outline-hidden focus:ring-0 dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-white/40 dark:focus:border-white/30"
                 />
               </div>
 
@@ -188,7 +188,7 @@ export function GenerateSlideUI({ slideId, onClose }: GenerateSlideUIProps) {
                 <motion.button
                   type="submit"
                   disabled={!prompt.trim()}
-                  className="flex items-center gap-2 rounded-xl border border-slate-900 bg-slate-900 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
+                  className="flex items-center gap-2 rounded-xl border border-slate-900 bg-slate-900 px-4 py-2.5 text-sm font-medium text-white shadow-xs transition-all hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
                   whileHover={{ scale: 1.02, y: -1 }}
                   whileTap={{ scale: 0.98 }}
                   transition={{ type: "spring", stiffness: 400, damping: 25 }}

src/components/notebook/presentation/editor/custom-elements/SlideTemplateModal.tsx

@@ -34,7 +34,7 @@ function TemplateCard({ template, onClick }: TemplateCardProps) {
       whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
     >
-      <div className="aspect-[4/3] w-full overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-all group-hover:border-primary/50 group-hover:shadow-md">
+      <div className="aspect-4/3 w-full overflow-hidden rounded-lg border border-border bg-card shadow-xs transition-all group-hover:border-primary/50 group-hover:shadow-md">
         {template.preview}
       </div>
       <span className="text-xs font-medium text-muted-foreground group-hover:text-foreground">

src/components/notebook/presentation/editor/custom-elements/area-chart.tsx

@@ -73,7 +73,7 @@ export default function AreaChartElement(props: PlateElementProps<TChartNode>) {
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/bar-graph.tsx

@@ -71,7 +71,7 @@ export default function BarGraphElement(props: PlateElementProps<TChartNode>) {
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/box-item.tsx

@@ -21,7 +21,7 @@ const boxItemVariants = cva(
         icon: "bg-opacity-60 gap-3 bg-(--presentation-card-background)",
         solid: "bg-opacity-100 border-0 bg-(--presentation-card-background)",
         sideline:
-          "border-t-1 border-r-1 border-b-1 border-l-5 border-y-primary border-r-primary border-l-(--presentation-card-background)",
+          "border-t border-r border-b border-l-5 border-y-primary border-r-primary border-l-(--presentation-card-background)",
         joined: "rounded-none!",
         leaf: "rounded-none rounded-tl-lg! rounded-br-lg!",
       },

src/components/notebook/presentation/editor/custom-elements/box-plot-chart.tsx

@@ -72,7 +72,7 @@ export default function BoxPlotChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/bubble-chart.tsx

@@ -81,7 +81,7 @@ export default function BubbleChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/candlestick-chart.tsx

@@ -67,7 +67,7 @@ export default function CandlestickChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/chart-data-editor/chart-type-picker.tsx

@@ -102,7 +102,7 @@ export function ChartTypePicker({ value, onChange }: ChartTypePickerProps) {
 
       {isOpen && (
         <div
-          className="absolute top-full left-0 z-[100] mt-1 min-w-[100px] animate-in rounded-md border bg-popover p-1 text-popover-foreground shadow-md fade-in-0 zoom-in-95"
+          className="absolute top-full left-0 z-100 mt-1 min-w-[100px] animate-in rounded-md border bg-popover p-1 text-popover-foreground shadow-md fade-in-0 zoom-in-95"
           onMouseDown={(e) => e.stopPropagation()}
           onClick={(e) => e.stopPropagation()}
         >

src/components/notebook/presentation/editor/custom-elements/chart-data-editor/editable-header.tsx

@@ -54,7 +54,7 @@ export function EditableHeader({
   return (
     <div className="group flex items-center gap-1">
       <div
-        className="h-4 w-2 flex-shrink-0 rounded-sm"
+        className="h-4 w-2 shrink-0 rounded-sm"
         style={{ backgroundColor: `hsl(var(--chart-${(colorIndex % 5) + 1}))` }}
       />
       {showChartTypePicker && onChartTypeChange && (
@@ -66,7 +66,7 @@ export function EditableHeader({
         onBlur={handleBlur}
         onFocus={() => setIsEditing(true)}
         onKeyDown={handleKeyDown}
-        className={`h-6 min-w-0 flex-1 border-0 bg-transparent px-1 text-xs font-semibold outline-none ${isEditing ? "bg-background ring-1 ring-primary" : ""} truncate focus:bg-background focus:ring-1 focus:ring-primary`}
+        className={`h-6 min-w-0 flex-1 border-0 bg-transparent px-1 text-xs font-semibold outline-hidden ${isEditing ? "bg-background ring-1 ring-primary" : ""} truncate focus:bg-background focus:ring-1 focus:ring-primary`}
         placeholder="Series"
       />
       {canRemove && (

src/components/notebook/presentation/editor/custom-elements/chart-data-editor/grid-cell.tsx

@@ -31,7 +31,7 @@ export function GridCell({
       onChange={(e) => onUpdate(e.target.value)}
       onKeyDown={onKeyDown}
       onFocus={onFocus}
-      className={`h-8 w-full border-0 bg-transparent px-2 py-1 text-sm outline-none ${type === "number" ? "text-right font-mono tabular-nums" : "text-left"} ${isFocused ? "bg-primary/5 ring-2 ring-primary ring-inset" : ""} [appearance:textfield] placeholder:text-muted-foreground/50 focus:bg-primary/5 focus:ring-2 focus:ring-primary focus:ring-inset [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none`}
+      className={`h-8 w-full border-0 bg-transparent px-2 py-1 text-sm outline-hidden ${type === "number" ? "text-right font-mono tabular-nums" : "text-left"} ${isFocused ? "bg-primary/5 ring-2 ring-primary ring-inset" : ""} [appearance:textfield] placeholder:text-muted-foreground/50 focus:bg-primary/5 focus:ring-2 focus:ring-primary focus:ring-inset [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none`}
       placeholder={placeholder}
     />
   );

src/components/notebook/presentation/editor/custom-elements/charts/ChartRenderer.tsx

@@ -92,7 +92,7 @@ export function ChartRenderer({
   const primaryColor = (chartOptions.color as string) ?? getChartColor(0);
 
   const containerClass = cn(
-    "h-full w-full rounded-lg border bg-card p-2 shadow-xs",
+    "h-full w-full rounded-lg border bg-card p-2 shadow-2xs",
     className,
   );
   const containerStyle: React.CSSProperties = {

src/components/notebook/presentation/editor/custom-elements/chord-chart.tsx

@@ -46,7 +46,7 @@ export default function ChordChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/compare.tsx

@@ -48,7 +48,7 @@ export default function CompareGroup(props: PlateElementProps) {
             >
               <div
                 className={cn(
-                  "grid h-12 w-12 place-items-center rounded-full text-sm font-bold shadow-xs",
+                  "grid h-12 w-12 place-items-center rounded-full text-sm font-bold shadow-2xs",
                 )}
                 style={{
                   backgroundColor:

src/components/notebook/presentation/editor/custom-elements/composed-chart.tsx

@@ -116,7 +116,7 @@ export default function ComposedChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/cone-funnel-chart.tsx

@@ -51,7 +51,7 @@ export default function ConeFunnelChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/cycle-element.tsx

@@ -240,8 +240,8 @@ export const CycleElement = ({
               isMultiColumn && "col-start-2",
               // Apply row positioning only for multi-column layout
               isMultiColumn &&
-                (!hasOddItems ? "row-start-1 row-end-[-1]" : "row-start-2"),
-              isMultiColumn && totalChildren >= 5 && "row-end-[-1]",
+                (!hasOddItems ? "row-start-1 -row-end-1" : "row-start-2"),
+              isMultiColumn && totalChildren >= 5 && "-row-end-1",
             )}
           >
             {(() => {

src/components/notebook/presentation/editor/custom-elements/donut-chart.tsx

@@ -65,7 +65,7 @@ export default function DonutChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/embeds/EmbedRenderer.tsx

@@ -111,7 +111,7 @@ export function EmbedRenderer({
           id={videoId}
           title="youtube"
           wrapperClass={cn(
-            "!absolute !inset-0 !h-full !w-full",
+            "absolute! inset-0! h-full! w-full!",
             "cursor-pointer bg-black bg-cover bg-center",
             "[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,0,0.2,1)]",
             "[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]",
@@ -119,8 +119,8 @@ export function EmbedRenderer({
             "[&_>_.lty-playbtn]:z-1 [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,0,0.2,1)]",
             "[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100",
             '[&_>_.lty-playbtn]:before:border-y-11 [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-l-19 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[""]',
-            "[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]",
-            "[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]",
+            "[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:transform-[translate3d(-50%,-50%,0)]",
+            "[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:transform-[translate3d(-50%,-50%,0)]",
             "[&.lyt-activated]:cursor-[unset]",
             "[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0",
             "[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:opacity-0!",

src/components/notebook/presentation/editor/custom-elements/funnel-chart.tsx

@@ -51,7 +51,7 @@ export default function FunnelChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/heatmap-chart.tsx

@@ -61,7 +61,7 @@ export default function HeatmapChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/histogram-chart.tsx

@@ -71,7 +71,7 @@ export default function HistogramChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/image-editor/CropModal.tsx

@@ -209,7 +209,7 @@ export function CropModal({
                   <img
                     src={imageUrl}
                     alt=""
-                    className="h-full w-full object-fill opacity-40 grayscale-[30%]"
+                    className="h-full w-full object-fill opacity-40 grayscale-30"
                   />
                   {/* Overlay to dim it further */}
                   <div className="absolute inset-0 bg-black/70" />

src/components/notebook/presentation/editor/custom-elements/image-editor/EmbedControls.tsx

@@ -167,7 +167,7 @@ export function EmbedControls({
       {/* Mini Preview */}
       <div className="flex flex-col gap-2">
         <div className="flex justify-center">
-          <div className="relative flex size-90 items-center justify-center overflow-hidden rounded-md border bg-muted shadow-sm">
+          <div className="relative flex size-90 items-center justify-center overflow-hidden rounded-md border bg-muted shadow-xs">
             {isImageType ? (
               imageDimensions ? (
                 <ImagePreview

src/components/notebook/presentation/editor/custom-elements/image-editor/GenerateControls.tsx

@@ -111,7 +111,7 @@ export function GenerateControls({
 
       <div className="flex flex-col gap-2">
         <div className="flex justify-center">
-          <div className="relative flex size-90 items-center justify-center overflow-hidden rounded-md border bg-muted shadow-sm">
+          <div className="relative flex size-90 items-center justify-center overflow-hidden rounded-md border bg-muted shadow-xs">
             {imageDimensions ? (
               <ImagePreview
                 element={element}

src/components/notebook/presentation/editor/custom-elements/image-editor/ImagePreview.tsx

@@ -191,7 +191,7 @@ export function ImagePreview({
       {/* Image Preview Area */}
       <div
         className={cn(
-          "relative overflow-hidden rounded-md shadow-sm transition-all duration-300",
+          "relative overflow-hidden rounded-md shadow-xs transition-all duration-300",
           currentMode === "crop" && "ring-2 ring-primary ring-offset-2",
         )}
         style={{
@@ -243,7 +243,7 @@ export function ImagePreview({
 
       {/* Floating Controls Toolbar */}
       {!hideControls && (
-        <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 translate-y-2 items-center gap-2 rounded-full border bg-background/80 p-1.5 px-3 opacity-0 shadow-lg backdrop-blur-sm transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
+        <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 translate-y-2 items-center gap-2 rounded-full border bg-background/80 p-1.5 px-3 opacity-0 shadow-lg backdrop-blur-xs transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
           <Button
             variant="ghost"
             size="icon"

src/components/notebook/presentation/editor/custom-elements/line-graph.tsx

@@ -75,7 +75,7 @@ export default function LineGraphElement(props: PlateElementProps<TChartNode>) {
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/linear-gauge.tsx

@@ -53,7 +53,7 @@ export default function LinearGaugeElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/nightingale-chart.tsx

@@ -53,7 +53,7 @@ export default function NightingaleChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/ohlc-chart.tsx

@@ -64,7 +64,7 @@ export default function OhlcChartElement(props: PlateElementProps<TChartNode>) {
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/pie-chart.tsx

@@ -57,7 +57,7 @@ export default function PieChartElement(props: PlateElementProps<TChartNode>) {
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/placeholder-card.tsx

@@ -184,7 +184,7 @@ function TemplateButton({
   return (
     <motion.button
       onClick={onClick}
-      className="group relative flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card/50 backdrop-blur-sm transition-all hover:border-sidebar-accent-foreground/20 hover:bg-sidebar-accent"
+      className="group relative flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card/50 backdrop-blur-xs transition-all hover:border-sidebar-accent-foreground/20 hover:bg-sidebar-accent"
       whileHover={{ scale: 1.02, y: -2 }}
       whileTap={{ scale: 0.98 }}
       transition={{ type: "spring", stiffness: 400, damping: 25 }}

src/components/notebook/presentation/editor/custom-elements/presentation-table-node.tsx

@@ -121,7 +121,7 @@ export const PresentationTableElement = withHOC(
         {...props}
         className={cn(
           "overflow-x-auto py-5",
-          hasControls && "-ml-2 data-[slot=block-selection]:*:left-2",
+          hasControls && "-ml-2 *:data-[slot=block-selection]:left-2",
         )}
         style={{ paddingLeft: marginLeft }}
       >

src/components/notebook/presentation/editor/custom-elements/pyramid-chart.tsx

@@ -51,7 +51,7 @@ export default function PyramidChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/quote.tsx

@@ -10,8 +10,8 @@ const quoteVariants = cva("relative my-6", {
     variant: {
       large: "flex flex-col items-center py-8 text-center",
       "sidequote-icon":
-        "rounded-r-lg border-l-4 border-[var(--presentation-primary)] bg-[var(--presentation-primary)]/5 py-4 pl-6",
-      sidequote: "border-l-4 border-[var(--presentation-primary)] py-2 pl-4",
+        "rounded-r-lg border-l-4 border-(--presentation-primary) bg-(--presentation-primary)/5 py-4 pl-6",
+      sidequote: "border-l-4 border-(--presentation-primary) py-2 pl-4",
     },
   },
   defaultVariants: {
@@ -30,7 +30,7 @@ const QuoteMark = ({
     viewBox="0 0 24 24"
     fill="currentColor"
     className={cn(
-      "size-12 text-[var(--presentation-primary)]/30",
+      "size-12 text-(--presentation-primary)/30",
       flip && "rotate-180",
       className,
     )}
@@ -43,7 +43,7 @@ const QuoteIcon = ({ className }: { className?: string }) => (
   <svg
     viewBox="0 0 24 24"
     fill="currentColor"
-    className={cn("size-6 text-[var(--presentation-primary)]", className)}
+    className={cn("size-6 text-(--presentation-primary)", className)}
   >
     <path d="M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162-.293.408-.492.856-.702 1.299-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539l.025.168.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162-.293.408-.492.856-.702 1.299-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539l.025.168.026-.006A4.5 4.5 0 1 0 17.5 10z" />
   </svg>
@@ -70,12 +70,12 @@ export function QuoteElement({
           <QuoteMark className="-mt-2 shrink-0" />
 
           <div className="flex flex-1 flex-col items-center">
-            <blockquote className="font-serif text-xl text-[var(--presentation-foreground)] italic md:text-2xl">
+            <blockquote className="font-serif text-xl text-(--presentation-foreground) italic md:text-2xl">
               {children}
             </blockquote>
 
             {author && (
-              <p className="mt-4 text-sm font-medium text-[var(--presentation-muted-foreground)]">
+              <p className="mt-4 text-sm font-medium text-(--presentation-muted-foreground)">
                 - {author}
               </p>
             )}
@@ -97,12 +97,12 @@ export function QuoteElement({
       >
         <QuoteIcon className="mb-2" />
 
-        <blockquote className="text-base text-[var(--presentation-foreground)] italic md:text-lg">
+        <blockquote className="text-base text-(--presentation-foreground) italic md:text-lg">
           {children}
         </blockquote>
 
         {author && (
-          <p className="mt-3 text-sm font-semibold text-[var(--presentation-foreground)]">
+          <p className="mt-3 text-sm font-semibold text-(--presentation-foreground)">
             {author}
           </p>
         )}
@@ -117,12 +117,12 @@ export function QuoteElement({
       className={cn(quoteVariants({ variant: "sidequote" }), className)}
       {...props}
     >
-      <blockquote className="text-base text-[var(--presentation-foreground)]">
+      <blockquote className="text-base text-(--presentation-foreground)">
         {children}
       </blockquote>
 
       {author && (
-        <p className="mt-2 text-sm text-[var(--presentation-muted-foreground)]">
+        <p className="mt-2 text-sm text-(--presentation-muted-foreground)">
           - {author}
         </p>
       )}

src/components/notebook/presentation/editor/custom-elements/radar-chart.tsx

@@ -59,7 +59,7 @@ export default function RadarChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/radial-bar-chart.tsx

@@ -60,7 +60,7 @@ export default function RadialBarChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/radial-column-chart.tsx

@@ -51,7 +51,7 @@ export default function RadialColumnChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/radial-gauge.tsx

@@ -59,7 +59,7 @@ export default function RadialGaugeElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/range-area-chart.tsx

@@ -66,7 +66,7 @@ export default function RangeAreaChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/range-bar-chart.tsx

@@ -70,7 +70,7 @@ export default function RangeBarChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/root-image.tsx

@@ -511,7 +511,7 @@ export default function RootImage({
             >
               {/* Chart/Image/Embed drop overlay */}
               {isChartOver && canDropChart && (
-                <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-primary/20 backdrop-blur-sm">
+                <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-primary/20 backdrop-blur-xs">
                   {isImageDrop ? (
                     <>
                       <ImageIcon className="h-12 w-12 text-primary" />

src/components/notebook/presentation/editor/custom-elements/sankey-chart.tsx

@@ -46,7 +46,7 @@ export default function SankeyChartElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/scatter-plot.tsx

@@ -71,7 +71,7 @@ export default function ScatterPlotElement(
     <PlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/area-chart-static.tsx

@@ -87,7 +87,7 @@ export default function AreaChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/bar-graph-static.tsx

@@ -71,7 +71,7 @@ export default function BarGraphStatic(props: SlateElementProps<TChartNode>) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/box-item-static.tsx

@@ -19,7 +19,7 @@ const boxItemVariants = cva(
         icon: "bg-opacity-60 flex items-center gap-3 bg-(--presentation-card-background)",
         solid: "bg-opacity-100 border-0 bg-(--presentation-card-background)",
         sideline:
-          "border-t-1 border-r-1 border-b-1 border-l-5 border-y-primary border-r-primary border-l-(--presentation-card-background)",
+          "border-t border-r border-b border-l-5 border-y-primary border-r-primary border-l-(--presentation-card-background)",
         joined: "rounded-none!",
         leaf: "rounded-none rounded-tl-lg! rounded-br-lg!",
       },
@@ -103,4 +103,3 @@ export function BoxItemStatic(props: SlateElementProps<TBoxItemElement>) {
   );
 }
 
-

src/components/notebook/presentation/editor/custom-elements/static/box-plot-chart-static.tsx

@@ -75,7 +75,7 @@ export default function BoxPlotChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/bubble-chart-static.tsx

@@ -74,7 +74,7 @@ export default function BubbleChartStatic(
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/button-static.tsx

@@ -82,4 +82,3 @@ export default function ButtonStatic(
   );
 }
 
-

src/components/notebook/presentation/editor/custom-elements/static/candlestick-chart-static.tsx

@@ -68,7 +68,7 @@ export default function CandlestickChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/chord-chart-static.tsx

@@ -47,7 +47,7 @@ export default function ChordChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/compare-static.tsx

@@ -49,7 +49,7 @@ export default function CompareGroupStatic(props: SlateElementProps) {
             >
               <div
                 className={cn(
-                  "grid h-12 w-12 place-items-center rounded-full text-sm font-bold shadow-xs",
+                  "grid h-12 w-12 place-items-center rounded-full text-sm font-bold shadow-2xs",
                 )}
                 style={{
                   backgroundColor:

src/components/notebook/presentation/editor/custom-elements/static/composed-chart-static.tsx

@@ -112,7 +112,7 @@ export default function ComposedChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/cone-funnel-chart-static.tsx

@@ -51,7 +51,7 @@ export default function ConeFunnelChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/cycle-element-static.tsx

@@ -34,9 +34,9 @@ export function CycleElementStatic(props: SlateElementProps) {
             className={cn(
               "relative size-64 place-self-center @min-4xl:col-start-2",
               !hasOddItems
-                ? "@min-4xl:row-start-1 @min-4xl:row-end-[-1]"
+                ? "@min-4xl:row-start-1 @min-4xl:-row-end-1"
                 : "@min-4xl:row-start-2",
-              totalChildren >= 5 && "@min-4xl:row-end-[-1]",
+              totalChildren >= 5 && "@min-4xl:-row-end-1",
             )}
           >
             {(() => {

src/components/notebook/presentation/editor/custom-elements/static/donut-chart-static.tsx

@@ -72,7 +72,7 @@ export default function DonutChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/editor-static.tsx

@@ -7,9 +7,9 @@ import { PlateStatic, type PlateStaticProps } from "platejs/static";
 export const editorVariants = cva(
   cn(
     "group/editor",
-    "relative w-full cursor-text overflow-x-hidden break-words whitespace-pre-wrap select-text",
+    "relative w-full cursor-text overflow-x-hidden wrap-break-word whitespace-pre-wrap select-text",
     "rounded-md ring-offset-background focus-visible:outline-hidden",
-    "placeholder:text-muted-foreground/80 data-slate-placeholder:**:top-[auto_!important] data-slate-placeholder:**:text-muted-foreground/80 data-slate-placeholder:**:opacity-100!",
+    "placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!",
     "[&_strong]:font-bold",
   ),
   {

src/components/notebook/presentation/editor/custom-elements/static/funnel-chart-static.tsx

@@ -51,7 +51,7 @@ export default function FunnelChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/heatmap-chart-static.tsx

@@ -60,7 +60,7 @@ export default function HeatmapChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/histogram-chart-static.tsx

@@ -74,7 +74,7 @@ export default function HistogramChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/icon-list-item-static.tsx

@@ -28,7 +28,7 @@ export function IconListItemStatic(
         >
           <PresentationIcon
             icon={displayIcon}
-            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-transparent shadow-xs"
+            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-transparent shadow-2xs"
           />
 
           <div className={cn("min-w-0 flex-1", getAlignmentClasses(alignment))}>

src/components/notebook/presentation/editor/custom-elements/static/icon-static.tsx

@@ -19,7 +19,7 @@ export function IconStatic(props: SlateElementProps<TIconElement>) {
         <div className="mb-2 p-2">
           <PresentationIcon
             icon={icon}
-            className="flex h-10 w-10 items-center justify-center rounded-md border bg-transparent! shadow-xs"
+            className="flex h-10 w-10 items-center justify-center rounded-md border bg-transparent! shadow-2xs"
           />
         </div>
       ) : null}

src/components/notebook/presentation/editor/custom-elements/static/line-graph-static.tsx

@@ -86,7 +86,7 @@ export default function LineGraphStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/linear-gauge-static.tsx

@@ -52,7 +52,7 @@ export default function LinearGaugeStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/media-embed-element-static.tsx

@@ -39,7 +39,7 @@ function MediaEmbedPlaceholderStatic({
     >
       <div className="relative flex min-h-[200px] flex-col items-center justify-center space-y-4 p-6">
         <div className="flex flex-col items-center space-y-2">
-          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/30 text-3xl shadow-sm">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/30 text-3xl shadow-xs">
             {config?.icon || <Video className="h-8 w-8" />}
           </div>
           <div className="text-center">
@@ -109,8 +109,8 @@ export function MediaEmbedElementStatic(
                     "[&_>_.lty-playbtn]:z-1 [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,0,0.2,1)]",
                     "[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100",
                     '[&_>_.lty-playbtn]:before:border-y-11 [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-l-19 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[""]',
-                    "[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]",
-                    "[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]",
+                    "[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:transform-[translate3d(-50%,-50%,0)]",
+                    "[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:transform-[translate3d(-50%,-50%,0)]",
                     "[&.lyt-activated]:cursor-[unset]",
                     "[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0",
                     "[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:opacity-0!",

src/components/notebook/presentation/editor/custom-elements/static/nightingale-chart-static.tsx

@@ -51,7 +51,7 @@ export default function NightingaleChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/ohlc-chart-static.tsx

@@ -68,7 +68,7 @@ export default function OhlcChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/pie-chart-static.tsx

@@ -59,7 +59,7 @@ export default function PieChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/pyramid-chart-static.tsx

@@ -51,7 +51,7 @@ export default function PyramidChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/quote-static.tsx

@@ -8,8 +8,8 @@ const quoteVariants = cva("relative my-6", {
     variant: {
       large: "flex flex-col items-center py-8 text-center",
       "sidequote-icon":
-        "rounded-r-lg border-l-4 border-[var(--presentation-primary)] bg-[var(--presentation-primary)]/5 py-4 pl-6",
-      sidequote: "border-l-4 border-[var(--presentation-primary)] py-2 pl-4",
+        "rounded-r-lg border-l-4 border-(--presentation-primary) bg-(--presentation-primary)/5 py-4 pl-6",
+      sidequote: "border-l-4 border-(--presentation-primary) py-2 pl-4",
     },
   },
   defaultVariants: {
@@ -29,7 +29,7 @@ const QuoteMark = ({
     viewBox="0 0 24 24"
     fill="currentColor"
     className={cn(
-      "size-12 text-[var(--presentation-primary)]/30",
+      "size-12 text-(--presentation-primary)/30",
       flip && "rotate-180",
       className,
     )}
@@ -43,7 +43,7 @@ const QuoteIcon = ({ className }: { className?: string }) => (
   <svg
     viewBox="0 0 24 24"
     fill="currentColor"
-    className={cn("size-6 text-[var(--presentation-primary)]", className)}
+    className={cn("size-6 text-(--presentation-primary)", className)}
   >
     <path d="M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162-.293.408-.492.856-.702 1.299-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539l.025.168.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162-.293.408-.492.856-.702 1.299-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539l.025.168.026-.006A4.5 4.5 0 1 0 17.5 10z" />
   </svg>
@@ -67,13 +67,13 @@ export function QuoteStatic(props: SlateElementProps) {
 
           <div className="flex flex-1 flex-col items-center">
             {/* Quote text */}
-            <blockquote className="font-serif text-xl text-[var(--presentation-foreground)] italic md:text-2xl">
+            <blockquote className="font-serif text-xl text-(--presentation-foreground) italic md:text-2xl">
               {props.children}
             </blockquote>
 
             {/* Author */}
             {author && (
-              <p className="mt-4 text-sm font-medium text-[var(--presentation-muted-foreground)]">
+              <p className="mt-4 text-sm font-medium text-(--presentation-muted-foreground)">
                 — {author}
               </p>
             )}
@@ -96,13 +96,13 @@ export function QuoteStatic(props: SlateElementProps) {
         <QuoteIcon className="mb-2" />
 
         {/* Quote text */}
-        <blockquote className="text-base text-[var(--presentation-foreground)] italic md:text-lg">
+        <blockquote className="text-base text-(--presentation-foreground) italic md:text-lg">
           {props.children}
         </blockquote>
 
         {/* Author */}
         {author && (
-          <p className="mt-3 text-sm font-semibold text-[var(--presentation-foreground)]">
+          <p className="mt-3 text-sm font-semibold text-(--presentation-foreground)">
             {author}
           </p>
         )}
@@ -117,13 +117,13 @@ export function QuoteStatic(props: SlateElementProps) {
       className={cn(quoteVariants({ variant: "sidequote" }), props.className)}
     >
       {/* Quote text */}
-      <blockquote className="text-base text-[var(--presentation-foreground)]">
+      <blockquote className="text-base text-(--presentation-foreground)">
         {props.children}
       </blockquote>
 
       {/* Author */}
       {author && (
-        <p className="mt-2 text-sm text-[var(--presentation-muted-foreground)]">
+        <p className="mt-2 text-sm text-(--presentation-muted-foreground)">
           — {author}
         </p>
       )}

src/components/notebook/presentation/editor/custom-elements/static/radar-chart-static.tsx

@@ -53,7 +53,7 @@ export default function RadarChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",
@@ -69,4 +69,3 @@ export default function RadarChartStatic(props: SlateElementProps) {
   );
 }
 
-

src/components/notebook/presentation/editor/custom-elements/static/radial-bar-chart-static.tsx

@@ -56,7 +56,7 @@ export default function RadialBarChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/radial-column-chart-static.tsx

@@ -51,7 +51,7 @@ export default function RadialColumnChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/radial-gauge-static.tsx

@@ -57,7 +57,7 @@ export default function RadialGaugeStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/range-area-chart-static.tsx

@@ -69,7 +69,7 @@ export default function RangeAreaChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/range-bar-chart-static.tsx

@@ -74,7 +74,7 @@ export default function RangeBarChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/sankey-chart-static.tsx

@@ -47,7 +47,7 @@ export default function SankeyChartStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/scatter-plot-static.tsx

@@ -74,7 +74,7 @@ export default function ScatterPlotStatic(props: SlateElementProps) {
     <SlateElement {...props}>
       <div
         className={cn(
-          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-xs",
+          "relative mb-4 w-full rounded-lg border bg-card p-2 shadow-2xs",
         )}
         style={{
           backgroundColor: "var(--presentation-background)",

src/components/notebook/presentation/editor/custom-elements/static/stats-item-static.tsx

@@ -177,7 +177,7 @@ export function StatsItemStatic(props: SlateElementProps<TStatsItemElement>) {
       case "bar":
         return (
           <div className="flex w-full items-center gap-1">
-            <div className="h-8 w-full flex-1 border-1 border-(--presentation-primary) bg-(--presentation-background)">
+            <div className="h-8 w-full flex-1 border border-(--presentation-primary) bg-(--presentation-background)">
               <div
                 className="h-8 transition-all duration-300"
                 style={{