diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/construction-geometry/helix.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/construction-geometry/helix.mdx
index a62b2f94..8bb2a03d 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/construction-geometry/helix.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/construction-geometry/helix.mdx
@@ -88,8 +88,8 @@ Helix creates the 3D curve path. To create actual threaded geometry:
 2. Create thread profile sketch (triangular, square, etc.)
 3. Use Sweep to carry profile along helix path
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/EgtNfXFnthk"
             allowFullScreen="allowfullscreen"
@@ -97,13 +97,7 @@ Helix creates the 3D curve path. To create actual threaded geometry:
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/construction-geometry/index.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/construction-geometry/index.mdx
index 1bd30c9b..bdbdea69 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/construction-geometry/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/construction-geometry/index.mdx
@@ -9,8 +9,8 @@ are especially useful in multi-step models and assembly-aware workflows.
 
 ## Video Walkthrough
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/sfSfQYWW4h0"
             title="Offset Plane and Helix in Zoo Design Studio"
@@ -19,13 +19,7 @@ are especially useful in multi-step models and assembly-aware workflows.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/sketching/index.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/sketching/index.mdx
index 72db4888..f24ab87c 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/sketching/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/sketching/index.mdx
@@ -10,8 +10,8 @@ dimensions, and prepare closed regions for downstream 3D features.
 
 ## Video Walkthrough
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/Xmoc6A0pWoo"
             title="Sketch Basics in Zoo Design Studio"
@@ -20,13 +20,7 @@ dimensions, and prepare closed regions for downstream 3D features.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/index.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/index.mdx
index 997356d1..877254b3 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/index.mdx
@@ -9,8 +9,8 @@ creation, merges, cutaways, and overlap-based modeling workflows.
 
 ## Video Walkthrough
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/lkbHEhmGji8"
             title="Union, Subtract, and Intersect in Zoo Design Studio"
@@ -19,13 +19,7 @@ creation, merges, cutaways, and overlap-based modeling workflows.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/intersect.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/intersect.mdx
index 60185873..d60b7c24 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/intersect.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/intersect.mdx
@@ -36,8 +36,8 @@ Analyze material overlap in multi-body assemblies:
 - Calculate interference fits for press-fit assemblies
 - Determine required clearance modifications
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/-uTzBtl76pE"
             allowFullScreen="allowfullscreen"
@@ -45,13 +45,7 @@ Analyze material overlap in multi-body assemblies:
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/subtract.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/subtract.mdx
index 79830f86..8802334b 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/subtract.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/subtract.mdx
@@ -6,8 +6,8 @@ sidebarPosition: 1
 
 Use Subtract to remove one or more tool bodies from target bodies, creating cavities, cutaways, pockets, and negative-space features. Subtract is the primary boolean operation for body-against-body material removal in complex assemblies.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/b6QxAg09JUs"
             allowFullScreen="allowfullscreen"
@@ -15,21 +15,15 @@ Use Subtract to remove one or more tool bodies from target bodies, creating cavi
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
 
 Material removal.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/1Aqmm0abGJI"
             allowFullScreen="allowfullscreen"
@@ -37,13 +31,7 @@ Material removal.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/union.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/union.mdx
index 80e89750..80c23823 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/union.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/boolean-operations/union.mdx
@@ -37,8 +37,8 @@ Union is often used in combination with other boolean operations:
 3. Use Subtract to remove unwanted volumes
 4. Apply finishing operations (fillets, chamfers) to the unified geometry
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/Vje_zc5AnsY"
             allowFullScreen="allowfullscreen"
@@ -46,13 +46,7 @@ Union is often used in combination with other boolean operations:
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/extrude.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/extrude.mdx
index bd2549bf..fadba59e 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/extrude.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/extrude.mdx
@@ -238,8 +238,8 @@ geometry with `MERGE`.
 ## Prefer to learn by watching?
 If you want to find out more in a different way, check out our video walkthrough:
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/cRb137CzYXQ"
             allowFullScreen="allowfullscreen"
@@ -247,13 +247,7 @@ If you want to find out more in a different way, check out our video walkthrough
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/index.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/index.mdx
index 59fc147e..073409f8 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/index.mdx
@@ -10,8 +10,8 @@ shape of a part.
 
 ## Video Walkthrough
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/KRYgKR6it60"
             title="Extrude, Sweep, Loft, and Revolve in Zoo Design Studio"
@@ -20,13 +20,7 @@ shape of a part.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/loft.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/loft.mdx
index c7682c21..e5c21eba 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/loft.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/loft.mdx
@@ -120,8 +120,8 @@ leave this at the default.
 ## Prefer to learn by watching?
 If you want to find out more in a different way, check out our video walkthrough:
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/x0-biMvzV78"
             allowFullScreen="allowfullscreen"
@@ -129,13 +129,7 @@ If you want to find out more in a different way, check out our video walkthrough
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/revolve.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/revolve.mdx
index 2ca4a277..628e21f6 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/revolve.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/revolve.mdx
@@ -196,8 +196,8 @@ leave this at the default.
 ## Prefer to learn by watching?
 If you want to find out more in a different way, check out our video walkthrough:
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-  <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+  <div className="relative w-full aspect-video">
     <iframe
       src="https://www.youtube.com/embed/akD34Y2fk3w"
       allowFullScreen="allowfullscreen"
@@ -205,13 +205,7 @@ If you want to find out more in a different way, check out our video walkthrough
       msallowfullscreen="msallowfullscreen"
       oallowfullscreen="oallowfullscreen"
       webkitallowfullscreen="webkitallowfullscreen"
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-      }}
+      className="absolute inset-0 h-full w-full border-0"
     />
   </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/sweep.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/sweep.mdx
index 9bd544fd..523b64d6 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/sweep.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/create-solids/sweep.mdx
@@ -168,8 +168,8 @@ result looks wrong.
 ## Prefer to learn by watching?
 If you want to find out more in a different way, check out our video walkthrough:
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/ovrVbMHKrCo"
             allowFullScreen="allowfullscreen"
@@ -177,13 +177,7 @@ If you want to find out more in a different way, check out our video walkthrough
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/chamfer.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/chamfer.mdx
index 1d2b1f0f..f6ed4baf 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/chamfer.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/chamfer.mdx
@@ -6,8 +6,8 @@ sidebarPosition: 1
 
 Use Chamfer to create beveled transitions on edges, providing edge breaks, fastener lead-ins, and simplified manufacturable transitions. Chamfers are easier to manufacture than fillets in some processes and provide functional benefits for assembly operations.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/jt5ruyALH1Y"
             title="Using the Chamfer Tool"
@@ -16,13 +16,7 @@ Use Chamfer to create beveled transitions on edges, providing edge breaks, faste
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
@@ -201,8 +195,8 @@ chamfer001 = chamfer(
 Want to find out more about the `chamfer` function? [Check it out](/docs/kcl-std/functions/std-solid-chamfer) in our KCL docs.
 
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/OenyUmr1pZw"
             allowFullScreen="allowfullscreen"
@@ -210,13 +204,7 @@ Want to find out more about the `chamfer` function? [Check it out](/docs/kcl-std
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/fillet.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/fillet.mdx
index ef179168..a9a53e6b 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/fillet.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/fillet.mdx
@@ -6,8 +6,8 @@ sidebarPosition: 0
 
 Use Fillet to create rounded transitions on edges or at face intersections. Fillets reduce stress concentrations, eliminate sharp edges, improve manufacturability, and communicate finished edge intent directly in the solid model.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/z0yUNv0Z5G8"
             title="Using the Fillet Tool"
@@ -16,13 +16,7 @@ Use Fillet to create rounded transitions on edges or at face intersections. Fill
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
@@ -155,8 +149,8 @@ fillet001 = fillet(
 
 Want to find out more about the `fillet` function? [Check it out](/docs/kcl-std/functions/std-solid-fillet) in our KCL docs.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/EIozddgj--w"
             allowFullScreen="allowfullscreen"
@@ -164,13 +158,7 @@ Want to find out more about the `fillet` function? [Check it out](/docs/kcl-std/
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/index.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/index.mdx
index 84e6ef9c..9f8ac22b 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/index.mdx
@@ -11,8 +11,8 @@ exists. Use these tools to apply edge finishing, hollow parts, or add standard b
 
 ### Shell and Hole
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/hnhqPUY8tMc"
             title="Shell and Hole in Zoo Design Studio"
@@ -21,21 +21,15 @@ exists. Use these tools to apply edge finishing, hollow parts, or add standard b
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
 
 ### Fillet and Chamfer
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/2X_d_-Sj-e0"
             title="Fillet and Chamfer in Zoo Design Studio"
@@ -44,13 +38,7 @@ exists. Use these tools to apply edge finishing, hollow parts, or add standard b
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/shell.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/shell.mdx
index 0f28c9c5..94efad29 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/shell.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/solid-modeling/modify-solids/shell.mdx
@@ -30,8 +30,8 @@ Make sure the thickness is smaller than your part's thinnest internal dimension
 
 **Opening Selection:** Pick faces strategically for assembly access, parting lines in molded parts, and material distribution.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/_9bIvqeCegQ"
             allowFullScreen="allowfullscreen"
@@ -39,13 +39,7 @@ Make sure the thickness is smaller than your part's thinnest internal dimension
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/clone.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/clone.mdx
index 349b916a..890a9b17 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/clone.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/clone.mdx
@@ -49,8 +49,8 @@ Manage complex assemblies with separate bodies:
 - Create working copies for boolean operations
 - Maintain both transformed and original geometry
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/bL4GolK_Bkw"
             allowFullScreen="allowfullscreen"
@@ -58,13 +58,7 @@ Manage complex assemblies with separate bodies:
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/index.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/index.mdx
index ff2e6105..ed077e9c 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/index.mdx
@@ -22,8 +22,8 @@ and [Linear Pattern](/docs/zoo-design-studio/features/3d-design/parametric-model
 
 See how to translate, rotate, scale, clone, and mirror geometry in Design Studio.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/psq2Dd15mGs"
             title="Translate, Rotate, Scale, Clone, and Mirror in Zoo Design Studio"
@@ -32,13 +32,7 @@ See how to translate, rotate, scale, clone, and mirror geometry in Design Studio
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/patterns/index.mdx b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/patterns/index.mdx
index 663d7bc8..011a460f 100644
--- a/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/patterns/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/3d-design/parametric-modeling/transforms/patterns/index.mdx
@@ -9,8 +9,8 @@ and easy to edit.
 
 ## Video Walkthrough
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/uBv-eIeZI2A"
             title="Linear and Circular Patterns in Zoo Design Studio"
@@ -19,13 +19,7 @@ and easy to edit.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/data-management/export/index.mdx b/content/pages/docs/zoo-design-studio/features/data-management/export/index.mdx
index 75665675..1eaa014a 100644
--- a/content/pages/docs/zoo-design-studio/features/data-management/export/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/data-management/export/index.mdx
@@ -9,8 +9,8 @@ Export workflows send design data from Zoo Design Studio to external CAD systems
 To save a PNG of the current viewport instead of exporting model geometry, use
 [Capture Screenshot](/docs/zoo-design-studio/features/data-management/export/capture-screenshot).
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/45fIx1zDuWk"
             title="Import and Export in Zoo Design Studio"
@@ -19,13 +19,7 @@ To save a PNG of the current viewport instead of exporting model geometry, use
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/data-management/import.mdx b/content/pages/docs/zoo-design-studio/features/data-management/import.mdx
index cf0c4149..c82c78ba 100644
--- a/content/pages/docs/zoo-design-studio/features/data-management/import.mdx
+++ b/content/pages/docs/zoo-design-studio/features/data-management/import.mdx
@@ -12,8 +12,8 @@ Bring external CAD files, 3D models, and KCL code into Zoo Design Studio in two
 Adding a file makes it available in **Project Files**. Importing it references that file from the
 model's KCL code so its geometry can appear in the Scene.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/45fIx1zDuWk"
             title="Import and Export in Zoo Design Studio"
@@ -22,13 +22,7 @@ model's KCL code so its geometry can appear in the Scene.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/ml-ai/zoodle/index.mdx b/content/pages/docs/zoo-design-studio/features/ml-ai/zoodle/index.mdx
index 5af7f10b..9ff47de0 100644
--- a/content/pages/docs/zoo-design-studio/features/ml-ai/zoodle/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/ml-ai/zoodle/index.mdx
@@ -11,8 +11,8 @@ geometry you mean.
 Use Zoodle when text alone would be too vague: a target face, an edge direction, a hole pattern, a
 cutout location, or an annotation that belongs to a specific feature.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/ugHftTBF3C8"
             title="Using Zoodle in Zoo Design Studio"
@@ -21,13 +21,7 @@ cutout location, or an annotation that belongs to a specific feature.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/features/workspace/index.mdx b/content/pages/docs/zoo-design-studio/features/workspace/index.mdx
index 16a10f84..0e9572e3 100644
--- a/content/pages/docs/zoo-design-studio/features/workspace/index.mdx
+++ b/content/pages/docs/zoo-design-studio/features/workspace/index.mdx
@@ -10,8 +10,8 @@ across part modeling, assemblies, and direct KCL editing.
 
 ## Video Walkthrough
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/q9clNqGUMdY"
             title="UI Overview in Zoo Design Studio"
@@ -20,13 +20,7 @@ across part modeling, assemblies, and direct KCL editing.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/getting-started.mdx b/content/pages/docs/zoo-design-studio/getting-started.mdx
index 33d73011..1b5c88d1 100644
--- a/content/pages/docs/zoo-design-studio/getting-started.mdx
+++ b/content/pages/docs/zoo-design-studio/getting-started.mdx
@@ -20,8 +20,8 @@ Start with this tour of the workspace, feature tree, KCL editor, project files,
 You'll also learn about project libraries, mouse controls, measurements, and the tools for importing
 and exporting your work.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/q9clNqGUMdY"
             title="UI Overview in Zoo Design Studio"
@@ -30,13 +30,7 @@ and exporting your work.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
@@ -45,8 +39,8 @@ and exporting your work.
 
 In the video below, we’ll show you how to create a new, empty project in Zoo Design Studio and start designing from scratch. We’ll also walk through how to explore and use sample projects if you’d prefer a starting point you can inspect, modify, and build on. By the end, you’ll know how to choose the right way to begin, whether you want a blank canvas or an example to work from.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/300B-OpLWRs"
             title="Creating Your First Project in Zoo Design Studio"
@@ -55,13 +49,7 @@ In the video below, we’ll show you how to create a new, empty project in Zoo D
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
@@ -71,8 +59,8 @@ In the video below, we’ll show you how to create a new, empty project in Zoo D
 Learn how to draw lines, circles, arcs, and rectangles, trim sketch geometry, and add constraints
 and dimensions in this introductory lesson.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/Xmoc6A0pWoo"
             title="Sketch Basics in Zoo Design Studio"
@@ -81,13 +69,7 @@ and dimensions in this introductory lesson.
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
@@ -112,8 +94,8 @@ exit the sketch. Select its filled region with Extrude and use a length of 5 mm.
 prepared sketches for its other examples; find the author's starting KCL in the
 [video's YouTube comments](https://www.youtube.com/watch?v=KRYgKR6it60).
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/KRYgKR6it60"
             title="Extrude, Sweep, Loft, and Revolve in Zoo Design Studio"
@@ -122,13 +104,7 @@ prepared sketches for its other examples; find the author's starting KCL in the
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
@@ -143,8 +119,8 @@ construction geometry, and patterns.
 
 In this video, we introduce Zookeeper’s core capabilities and show how to work with it effectively. You’ll learn how to ask Zookeeper for actions, explanations, and guidance, and how to use conversation to explore designs, make changes, and understand design decisions. By the end, you’ll have a solid foundation for using Zookeeper as part of your design workflow.
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/oWvExe3ZFdk"
             title="What Is Zookeeper? A Tour of the Conversational CAD Agent"
@@ -153,13 +129,7 @@ In this video, we introduce Zookeeper’s core capabilities and show how to work
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>
diff --git a/content/pages/docs/zoo-design-studio/point-and-click-tutorials.mdx b/content/pages/docs/zoo-design-studio/point-and-click-tutorials.mdx
index 695103c4..4423de99 100644
--- a/content/pages/docs/zoo-design-studio/point-and-click-tutorials.mdx
+++ b/content/pages/docs/zoo-design-studio/point-and-click-tutorials.mdx
@@ -12,8 +12,8 @@ The player below contains the complete series. Use its playlist menu or previous
 to move between lessons without leaving the docs, or
 [watch the full playlist on YouTube](https://www.youtube.com/playlist?list=PLInwIcwpMOys).
 
-<div style={{ maxWidth: '800px', margin: '0 auto' }}>
-    <div style={{ position: 'relative', width: '100%', paddingBottom: '56.25%' }}>
+<div className="mx-auto w-full max-w-[800px]">
+    <div className="relative w-full aspect-video">
         <iframe
             src="https://www.youtube.com/embed/videoseries?list=PLInwIcwpMOys"
             title="Zoo Design Studio point-and-click tutorial playlist"
@@ -22,13 +22,7 @@ to move between lessons without leaving the docs, or
             msallowfullscreen="msallowfullscreen"
             oallowfullscreen="oallowfullscreen"
             webkitallowfullscreen="webkitallowfullscreen"
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-            }}
+            className="absolute inset-0 h-full w-full border-0"
         />
     </div>
 </div>