diff --git a/src/components/card.tsx b/src/components/card.tsx
index 1a5d6b3d..710d46fd 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -16,7 +16,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
           elevation === 1 && "bg-bg shadow-sm dark:ring-0",
           // Subtle top highlight to give the card more depth in dark mode
           elevation === 1 &&
-            "relative dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:z-20 dark:before:rounded-lg dark:before:[box-shadow:inset_0_1px_var(--color-border-secondary)]",
+            "relative dark:2x:before:pointer-events-none dark:2x:before:absolute dark:2x:before:inset-0 dark:2x:before:z-20 dark:2x:before:rounded-lg dark:2x:before:[box-shadow:inset_0_0.5px_var(--color-border-secondary)]",
           elevation === 2 && "bg-bg-overlay shadow-lg",
           elevation === 3 && "bg-bg-overlay shadow-2xl",
           props.tabIndex === 0 &&
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 49471264..ace22cc7 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -9,6 +9,7 @@ module.exports = {
       screens: {
         coarse: { raw: "(pointer: coarse)" },
         fine: { raw: "(pointer: fine)" },
+        "2x": { raw: "(min-resolution: 192dpi)" },
       },
       fontWeight: {
         semibold: "550",