Highlight method section

Author: Tom-Notch

src/components/HighlightedSection.astro

@@ -1,4 +1,6 @@
-<div class="full-bleed bg-zinc-200 py-8 dark:bg-zinc-800">
+<div
+  class="full-bleed bg-zinc-200 py-8 [--dim-bg:var(--color-zinc-200)] dark:bg-zinc-800 dark:[--dim-bg:var(--color-zinc-800)]"
+>
   <div
     class="mx-[var(--actual-inline-margin)] [&>:first-child]:mt-0 [&>:last-child]:mb-0"
   >

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"
+              fill="var(--dim-bg)"
               mask="url(#usf-dim-mask)"
               style={{
                 opacity: primarySpotlight ? (activeSection ? 0.75 : 0.5) : 0,
@@ -1080,8 +1083,9 @@ 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"
           style={{
+            backgroundColor: "var(--dim-bg)",
             opacity: primarySpotlight ? (activeSection ? 0.75 : 0.5) : 0,
             transition: "opacity 0.6s ease",
           }}
@@ -1098,7 +1102,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.

src/styles/global.css

@@ -98,6 +98,7 @@ main .katex-display {
 }
 
 :root {
+  --dim-bg: white;
   --background: var(--color-white);
   --foreground: var(--color-zinc-950);
   --card: var(--color-white);
@@ -129,6 +130,7 @@ main .katex-display {
 }
 
 .dark {
+  --dim-bg: var(--color-zinc-900);
   --background: var(--color-zinc-950);
   --foreground: var(--color-zinc-50);
   --card: var(--color-zinc-900);