Highlight method section

Author: Tom-Notch

src/components/InteractiveFramework.tsx

@@ -555,6 +555,8 @@ function CardDeck({
     }
   };
 
+  const SHADOW_BLEED = 12;
+
   return (
     <div className="flex flex-col items-center">
       {/* Card stack area — extra padding for diagonal offset + shadow */}
@@ -563,10 +565,11 @@ function CardDeck({
         className="relative"
         style={{
           width: fullWidth
-            ? `calc(100% - ${DIAGONAL_X * (maxVisible - 1)}px)`
-            : `min(560px, calc(100% - ${DIAGONAL_X * (maxVisible - 1)}px))`,
+            ? `calc(100% - ${DIAGONAL_X * (maxVisible - 1) + SHADOW_BLEED}px)`
+            : `min(560px, calc(100% - ${DIAGONAL_X * (maxVisible - 1) + SHADOW_BLEED}px))`,
           aspectRatio: cards[frontIndex].aspectRatio,
           marginRight: `${DIAGONAL_X * (maxVisible - 1)}px`,
+          marginLeft: `${SHADOW_BLEED}px`,
           marginTop: `${DIAGONAL_Y * (maxVisible - 1)}px`,
           transition: "aspect-ratio 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
         }}
@@ -959,7 +962,7 @@ export function InteractiveFramework() {
             <rect
               width="100%"
               height="100%"
-              className="fill-white dark:fill-zinc-900"
+              className="fill-zinc-200 dark:fill-zinc-800"
               mask="url(#usf-dim-mask)"
               style={{
                 opacity: primarySpotlight ? (activeSection ? 0.75 : 0.5) : 0,
@@ -1080,7 +1083,7 @@ export function InteractiveFramework() {
           integration.
         </p>
         <div
-          className="pointer-events-none absolute inset-0 rounded bg-white dark:bg-zinc-900"
+          className="pointer-events-none absolute inset-0 rounded bg-zinc-200 dark:bg-zinc-800"
           style={{
             opacity: primarySpotlight ? (activeSection ? 0.75 : 0.5) : 0,
             transition: "opacity 0.6s ease",
@@ -1098,7 +1101,7 @@ export function InteractiveFramework() {
           if (!activeSection) setDisplayedSection(null);
         }}
       >
-        <div className="overflow-hidden">
+        <div className="overflow-y-hidden">
           {displayedSection && (
             <div className="pt-6 pb-4">
               {displayedSection.layout === "vertical" ? (

src/paper.mdx

@@ -105,10 +105,14 @@ Most vision pipelines apply planar CNNs that assume a pinhole camera and operate
 
 A model is **rotation-equivariant** if rotating its input produces an equivalently rotated output. This is a desirable property for any system where camera orientation may vary at test time. USF achieves both lens-agnostic processing and rotation-equivariance while supporting **plug-and-play** replacement of planar layers in any existing backbone, providing a generic framework for modern vision.
 
+<HighlightedSection>
+
 ## Methodology
 
 <InteractiveFramework client:idle />
 
+</HighlightedSection>
+
 ## Results
 
 We replace standard planar layers with spherical counterparts while keeping all other aspects of the models and training protocol **identical**. All evaluation is performed in the **planar domain** for consistency. **NR** and **RR** denote non-rotated and randomly rotated settings. Prior spectral-domain spherical CNNs are compared only in the low-resolution MNIST experiment due to their prohibitive cost at higher resolutions.