fix(css): replace var() in @media conditions with literal (#40)

CSS custom properties are invalid inside @media conditions — Chromium/Brave drop
the whole block — so every `@media (max-width: calc(theme("screens.lg") -
var(--breakpoint-edge-offset)))` was DEAD. The offset token was added to satisfy the
design-token lint, but `0.02px` is already exempt there, so the token was never
needed and silently broke the queries.

Swapped var(--breakpoint-edge-offset) → 0.02px in all 4 @media conditions (valid,
lint-clean, exclusive breakpoint preserved). Verified valid via matchMedia. This
re-activates 3 previously-dead mobile blocks that were intended but never worked:
full-screen modals on mobile, profile-modal menu/pane switching, and the video-card
tap-active state (plus the profile-nav app-grid).

Co-Authored-By: Claude Opus 4.8 <[email protected]>

css/tailwind.source.css

@@ -1395,7 +1395,7 @@
     overscroll-behavior: contain;
   }
 
-  @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
     .bv-modal {
       align-items: stretch;
       justify-content: stretch;
@@ -3130,7 +3130,7 @@
     }
   }
 
-  @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
     .profile-modal__layout[data-mobile-view="menu"]
       .profile-modal__pane-wrapper {
       display: none;
@@ -3148,7 +3148,7 @@
      use a CSS `var()` — custom properties are invalid inside media conditions and
      Chromium drops the whole block. `theme("screens.lg")` resolves to a literal at
      build time, which is valid. */
-  @media (max-width: theme("screens.lg")) {
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
     .profile-modal__nav {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -6122,7 +6122,7 @@
   }
 
   /* Mobile Active State */
-  @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+  @media (max-width: calc(theme("screens.lg") - 0.02px)) {
     .card[data-mobile-active="true"] {
       --video-card-lift-translate-y: var(--motion-video-card-hover-translate);
       --video-card-backdrop-opacity: 0.425;