@donotdev/ui 0.0.13 → 0.0.15

package/dist/dndev.css

@@ -125,6 +125,15 @@
   --popover: var(--card);
   --popover-foreground: var(--card-foreground);
 
+  /*
+   * Root card snapshot — computed once on :root from --card/--card-foreground,
+   * then inherited unchanged. Variant blocks (e.g. primary) override --card but
+   * never touch these, so data-variant='default' can reset --card back to the
+   * root value even when nested inside another variant.
+   */
+  --card-base: var(--card);
+  --card-foreground-base: var(--card-foreground);
+
   /* ===========================
      BORDER RADIUS - 3 VALUES ONLY
      =========================== */
@@ -220,6 +229,16 @@
     -6px 12px 24px -6px var(--shadow-color),
     -3px 6px 12px -3px var(--shadow-color-light);
 
+  /* Root shadow snapshots — same principle as --card-base (see above) */
+  --shadow-md-base: var(--shadow-md);
+  --shadow-xl-base: var(--shadow-xl);
+
+  /* Per-variant shadows — essences override these with different colors/shapes */
+  --shadow-primary: var(--shadow-md);
+  --shadow-primary-xl: var(--shadow-xl);
+  --shadow-secondary: var(--shadow-md);
+  --shadow-secondary-xl: var(--shadow-xl);
+
   /* Interactive shadows */
   --shadow-interactive: 0 0 0 3px
     color-mix(in oklab, var(--ring) 20%, transparent);
@@ -523,7 +542,6 @@ body {
 /* Reset and base styles */
 
 :root {
-  font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -537,9 +555,10 @@ body {
   box-sizing: border-box;
 }
 
-/* Set core body defaults */
+/* Set core body defaults — font-family here so theme tokens on :root cascade cleanly */
 
 body {
+  font-family: var(--font-family, var(--font-sans));
   min-height: 100dvh;
   line-height: var(--line-height);
   text-rendering: optimizeSpeed;
@@ -614,17 +633,21 @@ h6 {
   color: var(--foreground);
   background: transparent;
   text-wrap: balance; /* Equalize line lengths, prevent orphans */
+  text-transform: var(--text-transform-heading, none);
+  letter-spacing: var(--letter-spacing-heading, normal);
 }
 
-h1 {
+:is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-headline);
+}
+
+h1 {
   font-size: var(--font-size-3xl);
   font-weight: var(--font-weight-bold);
   letter-spacing: -0.02em;
 }
 
 h2 {
-  font-family: var(--font-headline);
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   letter-spacing: -0.01em;
@@ -1055,10 +1078,20 @@ em {
    * - accent: Highlighted/active state (--accent colors, sets context for children)
    * - destructive: Error/danger state (--destructive colors)
    * 
-   * Variants only override --card and --card-foreground.
+   * Variants override --card and --card-foreground.
+   * Primary/secondary also override --shadow-md/--shadow-xl for per-variant shadows.
+   * Default resets --card from --card-base (root snapshot) so nested default cards
+   * inside other variants get the root card color, not the parent's.
    * Surface glow gradient is computed from --theme-is-dark flag and not affected by variants.
    */
 
+.dndev-surface[data-variant='default'] {
+    --card: var(--card-base);
+    --card-foreground: var(--card-foreground-base);
+    --shadow-md: var(--shadow-md-base);
+    --shadow-xl: var(--shadow-xl-base);
+  }
+
 .dndev-surface[data-variant='muted'] {
     --card: var(--muted);
     --card-foreground: var(--muted-foreground);
@@ -1068,12 +1101,16 @@ em {
 .dndev-surface[data-variant='primary'] {
     --card: var(--primary);
     --card-foreground: var(--primary-foreground);
+    --shadow-md: var(--shadow-primary);
+    --shadow-xl: var(--shadow-primary-xl);
     border-color: var(--primary);
   }
 
 .dndev-surface[data-variant='secondary'] {
     --card: var(--secondary);
     --card-foreground: var(--secondary-foreground);
+    --shadow-md: var(--shadow-secondary);
+    --shadow-xl: var(--shadow-secondary-xl);
     border-color: var(--secondary);
   }
 
@@ -1355,6 +1392,7 @@ em {
   border-radius: var(--radius-interactive);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
+  text-transform: var(--text-transform-button, none);
   transition: var(--transition-fast);
   cursor: pointer;
   border: var(--border-hairline) solid transparent;
@@ -1645,6 +1683,7 @@ em {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-transform: var(--text-transform-label, none);
 }
 
 /* Compact mode - always hide label */
@@ -1710,7 +1749,8 @@ em {
 
 .dndev-control[data-state='checked'],.dndev-control[data-state='on'],.dndev-control[data-pressed='true'] {
     background-color: var(--control-border);
-    color: var(--background);
+    /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+    color: var(--card);
   }
 
 /* CONTROL GROUP - Shared pattern for grouped controls (RadioGroup, Checkbox groups) */
@@ -2016,7 +2056,7 @@ em {
   height: var(--icon-md);
   border: 2px solid currentColor;
   border-radius: var(--radius-full);
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
   animation: spin 1s linear infinite;
 }
 
@@ -2356,7 +2396,6 @@ em {
   flex-shrink: 0;
   overflow: hidden;
   border-radius: var(--radius-full);
-  border: 1px solid var(--border);
 }
 
 .dndev-avatar-image {
@@ -2813,8 +2852,7 @@ em {
 .dndev-calendar-nav {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   height: var(--touch-target);
   pointer-events: none;
   z-index: 1;
@@ -2844,13 +2882,13 @@ em {
 }
 
 .dndev-calendar-nav-previous {
-  left: 0;
+  inset-inline-start: 0;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 
 .dndev-calendar-nav-next {
-  right: 0;
+  inset-inline-end: 0;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
@@ -3096,13 +3134,10 @@ em {
   background: var(--muted);
 }
 
-.dndev-cta[data-tone='elevated'] {
-  background: var(--background);
-}
-
 .dndev-cta[data-tone='contrast'] {
   background: var(--foreground);
-  color: var(--background);
+  /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+  color: var(--card);
 }
 
 .dndev-cta[data-tone='accent'] {
@@ -3157,7 +3192,8 @@ em {
 
 .dndev-cta-actions .dndev-interactive[data-variant='primary'] {
     background: var(--foreground);
-    color: var(--background);
+    /* --card not --background: inverted text must be opaque */
+    color: var(--card);
     border-color: var(--foreground);
   }
 
@@ -3175,7 +3211,8 @@ em {
 
 :is(.dndev-cta-actions .dndev-interactive[data-variant='outline']):hover {
       background: var(--foreground);
-      color: var(--background);
+      /* --card not --background: inverted text must be opaque */
+      color: var(--card);
       border-color: var(--foreground);
     }
 
@@ -3390,7 +3427,7 @@ em {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  text-align: left;
+  text-align: start;
 }
 
 .dndev-combobox-trigger button {
@@ -3547,6 +3584,10 @@ em {
   flex-shrink: 0;
 }
 
+.dndev-combobox-create-btn:hover {
+  opacity: 0.8;
+}
+
 .dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon svg,
 .dndev-combobox-open .dndev-input-with-trailing-icon .dndev-input-icon > * {
   transform: rotate(180deg);
@@ -3732,8 +3773,9 @@ em {
 }
 
 .dndev-code-line-number {
-  line-height: inherit;
-  /* Inherit from parent */
+  line-height: 1.5;
+  min-height: 1.5em;
+  font-size: inherit;
 }
 
 .dndev-code-code {
@@ -3753,7 +3795,21 @@ em {
 .dndev-code-code code {
   line-height: inherit;
   font-size: inherit;
-  /* Match parent font-size */
+}
+
+/* Shiki wraps each line in <span class="line"> — force consistent sizing */
+
+.dndev-code-code .line {
+  display: block;
+  line-height: 1.5;
+  font-size: inherit;
+  min-height: 1.5em;
+}
+
+/* Empty Shiki lines still need height to stay in sync with line numbers */
+
+.dndev-code-code .line:empty::after {
+  content: '\00a0';
 }
 
 /* packages/components/src/atomic/Command/Command.css */
@@ -3917,7 +3973,7 @@ em {
     order: 3;
     font-size: var(--font-size-xs);
     color: var(--muted-foreground);
-    padding-left: calc(var(--icon-md) + var(--gap-sm));
+    padding-inline-start: calc(var(--icon-md) + var(--gap-sm));
   }
 
   .dndev-command-favorite-button {
@@ -4203,6 +4259,54 @@ em {
   }
 }
 
+/* Responsive templateColumns via custom properties */
+
+.dndev-grid-component[data-responsive-tpl='true'] {
+  grid-template-columns: var(--grid-tpl-mobile);
+}
+
+@media (min-width: 768px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-laptop);
+  }
+}
+
+@media (min-width: 1440px) {
+  .dndev-grid-component[data-responsive-tpl='true'] {
+    grid-template-columns: var(--grid-tpl-desktop);
+  }
+}
+
+/* Responsive grid areas via custom properties */
+
+.dndev-grid-component[data-responsive-areas='true'] {
+  grid-template-areas: var(--grid-areas-mobile);
+}
+
+@media (min-width: 768px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-laptop);
+  }
+}
+
+@media (min-width: 1440px) {
+  .dndev-grid-component[data-responsive-areas='true'] {
+    grid-template-areas: var(--grid-areas-desktop);
+  }
+}
+
 /* Spacing from CSS variables */
 
 .dndev-grid-component[data-gap='none'] {
@@ -4516,7 +4620,8 @@ em {
   height: 44px;
   border: none;
   border-radius: var(--radius-full);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque */
+  background-color: var(--card);
   color: var(--foreground);
   cursor: pointer;
   opacity: 0;
@@ -5083,7 +5188,7 @@ input[type='number'] {
   }
 
 .dndev-nav-menu-content {
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   width: 100%;
 }
@@ -5098,7 +5203,7 @@ input[type='number'] {
 
 .dndev-nav-menu-viewport-wrapper {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 100%;
   display: flex;
   justify-content: center;
@@ -5138,7 +5243,7 @@ input[type='number'] {
   height: var(--gap-sm);
   width: var(--gap-sm);
   transform: rotate(45deg);
-  border-top-left-radius: 2px;
+  border-start-start-radius: 2px;
   background-color: var(--border);
   box-shadow: var(--shadow-md);
 }
@@ -5309,19 +5414,34 @@ input[type='number'] {
   }
 
   .dndev-pagination-size-label {
-    margin-right: var(--gap-sm);
+    margin-inline-end: var(--gap-sm);
   }
 
   .dndev-pagination-nav {
     justify-content: flex-end;
     width: auto;
-    margin-left: auto;
-    /* Push to right */
+    margin-inline-start: auto;
+    /* Push to end */
   }
 }
 
 /* packages/components/src/atomic/Popover/Popover.css */
 
+/* Popover content width constraints and wrapping */
+
+/* Targets Radix UI PopoverContent element */
+
+[data-radix-popover-content],
+.dndev-floating[data-radix-popover-content] {
+  max-width: min(90vw, 400px);
+  width: -moz-max-content;
+  width: max-content;
+  min-width: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
 /* packages/components/src/atomic/Progress/Progress.css */
 
 .dndev-progress {
@@ -5666,9 +5786,10 @@ input[type='number'] {
 /* Content wrapper: constrained + centered + padded */
 
 .dndev-section-content {
-  /* Respects PageContainer's --content-width */
+  /* Respects PageContainer's --content-width (passed through breakthrough root) */
   max-width: var(--content-width);
   margin-inline: auto;
+  min-width: 0; /* Allow shrinking so max-width wins when content would force wider */
   /* Padding with section background - responsive to match PageContainer */
   padding-inline: var(--gap-md);
   padding-top: var(--gap-lg);
@@ -5916,6 +6037,9 @@ input[type='number'] {
 
 /* Sheet positioning by side - SPATIAL METAPHOR */
 
+/* Physical properties intentional: Sheet anchors to viewport edges regardless of text direction.
+     Logical inset-inline would incorrectly swap sides in RTL for left/right sheet variants. */
+
 /* RIGHT / LEFT (Desktop Panels) */
 
 .dndev-sheet-content[data-side='right'],.dndev-sheet-content[data-side='left'] {
@@ -5956,8 +6080,7 @@ input[type='number'] {
     max-height: 92dvh;
     /* Never touch top edge */
     width: 100%;
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
 
     /* On larger screens, constrain width */
   }
@@ -5976,16 +6099,16 @@ input[type='number'] {
     top: 0;
     border-bottom: var(--border-hairline) solid var(--line-1);
     /* Rounded bottom corners only */
-    border-bottom-left-radius: var(--radius-lg);
-    border-bottom-right-radius: var(--radius-lg);
+    border-end-start-radius: var(--radius-lg);
+    border-end-end-radius: var(--radius-lg);
   }
 
 .dndev-sheet-content[data-side='bottom'] {
     bottom: 0;
     border-top: var(--border-hairline) solid var(--line-1);
     /* Rounded top corners only */
-    border-top-left-radius: var(--radius-lg);
-    border-top-right-radius: var(--radius-lg);
+    border-start-start-radius: var(--radius-lg);
+    border-start-end-radius: var(--radius-lg);
   }
 
 /* DRAG HANDLE PILL - Visual affordance for draggable sheets */
@@ -6304,7 +6427,8 @@ input[type='number'] {
   min-width: 1.25rem;
   min-height: 1.25rem;
   border-radius: var(--radius-full);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque (--background can be transparent in some themes) */
+  background-color: var(--card);
   border: 2px solid var(--primary);
   box-shadow: var(--shadow-md);
   transition: all var(--dur-fast) var(--ease-in-out);
@@ -6375,7 +6499,8 @@ input[type='number'] {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   color: var(--foreground);
-  background-color: var(--background);
+  /* --card not --background: surface must be opaque */
+  background-color: var(--card);
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius-interactive);
   box-shadow: var(--shadow-sm);
@@ -6399,7 +6524,7 @@ input[type='number'] {
   height: 1em;
   border: 2px solid transparent;
   border-top-color: var(--primary);
-  border-right-color: var(--primary);
+  border-inline-end-color: var(--primary);
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
   display: inline-block;
@@ -6409,42 +6534,42 @@ input[type='number'] {
 
 .dndev-spinner[data-variant='default'] {
   border-top-color: var(--foreground);
-  border-right-color: var(--foreground);
+  border-inline-end-color: var(--foreground);
 }
 
 .dndev-spinner[data-variant='muted'] {
   border-top-color: var(--muted-foreground);
-  border-right-color: var(--muted-foreground);
+  border-inline-end-color: var(--muted-foreground);
 }
 
 .dndev-spinner[data-variant='primary'] {
   border-top-color: var(--primary);
-  border-right-color: var(--primary);
+  border-inline-end-color: var(--primary);
 }
 
 .dndev-spinner[data-variant='secondary'] {
   border-top-color: var(--secondary);
-  border-right-color: var(--secondary);
+  border-inline-end-color: var(--secondary);
 }
 
 .dndev-spinner[data-variant='accent'] {
   border-top-color: var(--accent);
-  border-right-color: var(--accent);
+  border-inline-end-color: var(--accent);
 }
 
 .dndev-spinner[data-variant='success'] {
   border-top-color: var(--success);
-  border-right-color: var(--success);
+  border-inline-end-color: var(--success);
 }
 
 .dndev-spinner[data-variant='warning'] {
   border-top-color: var(--warning);
-  border-right-color: var(--warning);
+  border-inline-end-color: var(--warning);
 }
 
 .dndev-spinner[data-variant='destructive'] {
   border-top-color: var(--destructive);
-  border-right-color: var(--destructive);
+  border-inline-end-color: var(--destructive);
 }
 
 /* Overlay variant - full-page loading */
@@ -6728,6 +6853,8 @@ input[type='number'] {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--gap-md);
+  margin-top: var(--gap-md);
 }
 
 .dndev-stepper-info {
@@ -7167,19 +7294,20 @@ input[type='number'] {
   word-break: break-word;
   border: var(--border-hairline) solid var(--line-2); /* Show clickable area */
 
-  /* Fallback (no variant): inactive = primary, active = foreground/background */
+  /* Fallback (no variant): inactive = primary, active = foreground/card */
   background-color: var(--primary);
   color: var(--primary-foreground);
 }
 
 .dndev-interactive[data-role='tab-trigger'][data-state='active'] {
-    background-color: var(--background);
+    /* --card not --background: active tab surface must be opaque (--background can be transparent in some themes) */
+    background-color: var(--card);
     color: var(--foreground);
     box-shadow: var(--shadow-sm);
     border-color: var(--primary);
   }
 
-/* Default/Primary variant: inactive = primary, active = foreground/background */
+/* Default/Primary variant: inactive = primary, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='default'],.dndev-interactive[data-role='tab-trigger'][data-variant='primary'] {
     background-color: var(--primary);
@@ -7187,13 +7315,14 @@ input[type='number'] {
   }
 
 [data-state='active']:is(.dndev-interactive[data-role='tab-trigger'][data-variant='default'],.dndev-interactive[data-role='tab-trigger'][data-variant='primary']) {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--primary);
     }
 
-/* Secondary variant: inactive = secondary, active = foreground/background */
+/* Secondary variant: inactive = secondary, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='secondary'] {
     background-color: var(--secondary);
@@ -7201,13 +7330,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='secondary'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--secondary);
     }
 
-/* Accent variant: inactive = accent, active = foreground/background */
+/* Accent variant: inactive = accent, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='accent'] {
     background-color: var(--accent);
@@ -7215,7 +7345,8 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='accent'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--accent);
@@ -7235,7 +7366,7 @@ input[type='number'] {
       border-color: var(--primary);
     }
 
-/* Warning variant: inactive = warning, active = foreground/background */
+/* Warning variant: inactive = warning, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='warning'] {
     background-color: var(--warning);
@@ -7243,13 +7374,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='warning'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--warning);
     }
 
-/* Success variant: inactive = success, active = foreground/background */
+/* Success variant: inactive = success, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='success'] {
     background-color: var(--success);
@@ -7257,13 +7389,14 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='success'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--success);
     }
 
-/* Destructive variant: inactive = destructive, active = foreground/background */
+/* Destructive variant: inactive = destructive, active = foreground/card */
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='destructive'] {
     background-color: var(--destructive);
@@ -7271,7 +7404,8 @@ input[type='number'] {
   }
 
 .dndev-interactive[data-role='tab-trigger'][data-variant='destructive'][data-state='active'] {
-      background-color: var(--background);
+      /* --card not --background: active tab surface must be opaque */
+      background-color: var(--card);
       color: var(--foreground);
       box-shadow: var(--shadow-sm);
       border-color: var(--destructive);
@@ -7318,7 +7452,7 @@ input[type='number'] {
     align-items: center;
     justify-content: center;
     padding: 0;
-    margin-left: 2px;
+    margin-inline-start: 2px;
     background: transparent;
     border: none;
     cursor: pointer;
@@ -7481,7 +7615,11 @@ input[type='number'] {
     border-radius: var(--radius-interactive);
   }
 
-/* Level overrides */
+/* Level overrides — headline font for all heading levels */
+
+.dndev-text-base[data-level^='h'] {
+    font-family: var(--font-headline);
+  }
 
 .dndev-text-base[data-level='h1'] {
     font-size: var(--font-size-3xl);
@@ -7831,7 +7969,8 @@ input[type='number'] {
   z-index: var(--z-tooltip);
   /* Inverted colors for high contrast - industry standard (Vercel, GitHub, Stripe) */
   background: var(--foreground);
-  color: var(--background);
+  /* --card not --background: inverted text must be opaque (--background can be transparent in some themes) */
+  color: var(--card);
   box-shadow: var(--shadow-lg); /* Stronger shadow for visibility */
   padding: 0.375rem 0.5rem; /* 6px 8px - industry standard */
   font-size: var(--font-size-xs); /* 12px */
@@ -8471,6 +8610,12 @@ input[type='number'] {
 
 /* Tone backgrounds - apply directly to section element (like CallToAction) */
 
+/* Ghost (default) - transparent, allows background images to show through */
+
+.dndev-section-full-width[data-tone='ghost'],.dndev-section-full-width:not([data-tone]) {
+    background: transparent;
+  }
+
 .dndev-section-full-width[data-tone='base'] {
     background: var(--background);
   }
@@ -8479,16 +8624,37 @@ input[type='number'] {
     background: var(--muted);
   }
 
-.dndev-section-full-width[data-tone='elevated'] {
+.dndev-section-full-width[data-tone='contrast'] {
     background: var(--background);
+    color: var(--foreground);
   }
 
-.dndev-section-full-width[data-tone='contrast'] {
+.dndev-section-full-width[data-tone='accent'] {
+    background: color-mix(in oklab, var(--accent) 5%, transparent);
+  }
+
+/* HeroSection tone backgrounds - same system as Section/CallToAction */
+
+/* Ghost (default) - transparent, allows background images to show through */
+
+.dndev-hero-section[data-tone='ghost'],.dndev-hero-section:not([data-tone]) {
+    background: transparent;
+  }
+
+.dndev-hero-section[data-tone='base'] {
+    background: var(--background);
+  }
+
+.dndev-hero-section[data-tone='muted'] {
+    background: var(--muted);
+  }
+
+.dndev-hero-section[data-tone='contrast'] {
     background: var(--background);
     color: var(--foreground);
   }
 
-.dndev-section-full-width[data-tone='accent'] {
+.dndev-hero-section[data-tone='accent'] {
     background: color-mix(in oklab, var(--accent) 5%, transparent);
   }
 
@@ -8701,10 +8867,7 @@ h4[data-variant='code'] {
 }
 
 .dndev-inset-0 {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 
 .dndev-inset-y-0 {
@@ -8712,8 +8875,8 @@ h4[data-variant='code'] {
   bottom: 0;
 }
 
-.dndev-left-0 {
-  left: 0;
+.dndev-inset-inline-start-0 {
+  inset-inline-start: 0;
 }
 
 .dndev-min-h-0 {
@@ -9330,9 +9493,12 @@ main[role='main'][data-routing-animation='none'] {
 /* Desktop: opt-in via data-footer-mode="scroll" */
 
 .dndev-layout[data-footer-mode='scroll'] {
-  overflow-y: auto;
+  height: auto;
+  min-height: 100dvh;
+  max-height: none;
+  overflow-y: visible;
   overflow-x: hidden;
-  grid-template-rows: var(--header-height) 1fr auto;
+  grid-template-rows: var(--header-height) minmax(calc(100dvh - var(--header-height)), auto) auto;
 }
 
 .dndev-layout[data-footer-mode='scroll'] header[role='banner'] {
@@ -9350,11 +9516,13 @@ main[role='main'][data-routing-animation='none'] {
 .dndev-layout[data-footer-mode='scroll'] main[role='main'] {
     overflow-y: visible;
     overflow-x: hidden;
+    contain: style;
   }
 
 .dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo'] {
     grid-column: 2 / -1;
     height: auto;
+    margin-top: var(--gap-lg);
   }
 
 :is(.dndev-layout[data-footer-mode='scroll'] footer[role='contentinfo']) > * {
@@ -9366,9 +9534,12 @@ main[role='main'][data-routing-animation='none'] {
 
 @media (width <=1023px) {
   .dndev-layout {
-    overflow-y: auto;
+    height: auto;
+    min-height: 100dvh;
+    max-height: none;
+    overflow-y: visible;
     overflow-x: hidden;
-    grid-template-rows: var(--header-height) 1fr auto;
+    grid-template-rows: var(--header-height) minmax(calc(100dvh - var(--header-height)), auto) auto;
   }
 
     .dndev-layout header[role='banner'] {
@@ -9379,10 +9550,12 @@ main[role='main'][data-routing-animation='none'] {
     .dndev-layout main[role='main'] {
       overflow-y: visible;
       overflow-x: hidden;
+      contain: style;
     }
 
     .dndev-layout footer[role='contentinfo'] {
       height: auto;
+      margin-top: var(--gap-lg);
     }
 
       :is(.dndev-layout footer[role='contentinfo']) > * {
@@ -9416,6 +9589,7 @@ header[role='banner'] {
   position: relative;
   z-index: var(--z-header);
   contain: layout style;
+  overflow: visible; /* Allow absolutely positioned children's shadows to extend beyond bounds */
 
   /* Container queries support for responsive components */
   container-type: inline-size;
@@ -9429,7 +9603,6 @@ header[role='banner'] {
   padding-inline-start: var(--content-padding);
   padding-inline-end: var(--content-padding);
 
-  /* Theme-aware styling - 100% controlled by theme system */
   background: var(--background);
   border-bottom: var(--border-hairline) solid var(--border);
 
@@ -9451,7 +9624,11 @@ header[role='banner'] {
   height: 100%;
   max-height: 100%;
   gap: var(--gap-sm);
-  overflow: hidden;
+  overflow: visible; /* Allow shadows to show */
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 .header-end {
@@ -9463,7 +9640,11 @@ header[role='banner'] {
   max-height: 100%;
   margin-inline-start: auto;
   gap: var(--gap-sm);
-  overflow: hidden;
+  overflow: visible; /* Allow shadows to show */
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 /* Viewport-centered center content - absolutely positioned overlay */
@@ -9476,6 +9657,10 @@ header[role='banner'] .header-center {
   width: -moz-fit-content;
   width: fit-content;
   z-index: 1;
+  /* Theme-controlled padding for shadows that extend beyond bounds (e.g., brutalist hard-offset shadows) */
+  /* Shadows extend rightward, so only end padding needed */
+  /* Defaults to 0 for themes with diffused shadows that don't extend beyond bounds */
+  padding-inline-end: var(--header-shadow-padding, 0);
 }
 
 /* ===========================
@@ -9766,7 +9951,6 @@ footer[role='contentinfo'] {
   min-height: var(--footer-height);
   z-index: var(--z-footer);
 
-  /* Theme-aware styling - 100% controlled by theme system */
   background: var(--background);
   border-top: var(--border-hairline) solid var(--border);
 
@@ -9829,8 +10013,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 .merged-bar {
   position: fixed;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   display: none;
   /* Hidden by default - CSS shows on mobile */
   align-items: center;
@@ -9839,8 +10022,8 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   contain: layout style;
 
   /* Safe area padding for notched devices */
-  padding-left: max(var(--content-padding), env(safe-area-inset-left));
-  padding-right: max(var(--content-padding), env(safe-area-inset-right));
+  padding-inline-start: max(var(--content-padding), env(safe-area-inset-left));
+  padding-inline-end: max(var(--content-padding), env(safe-area-inset-right));
 }
 
 .merged-bar[data-position='top'] {
@@ -10185,6 +10368,7 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 .dndev-container {
   width: 100%;
   max-width: var(--content-width);
+  min-width: 0; /* Allow shrinking in flex so max-width wins */
   flex: 1 1 auto;
 
   /* First child spacing when enabled */
@@ -10300,7 +10484,6 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
 
 .dndev-container > .dndev-section-full-width,
 .dndev-container > .dndev-cta,
-.dndev-container > .dndev-hero-section,
 .dndev-container > .dndev-tech-bento {
   /* Break out of PageContainer padding and max-width constraint */
   /* Account for sidebar: --sidebar-width is 0px for presets without sidebar */
@@ -10310,6 +10493,19 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   /* Eat gap BEFORE section only */
   margin-top: calc(-1 * var(--gap-lg));
   margin-bottom: 0;
+  /* Pass through so inner content (e.g. .dndev-section-content) can use it */
+  --content-width: var(--max-content-width, 100%);
+}
+
+/* HeroSection: only breakthrough when it has fullHeight (needs full viewport background) */
+
+.dndev-container > .dndev-hero-section[style*='height'] {
+  width: calc(100dvw - var(--sidebar-width));
+  max-width: calc(100dvw - var(--sidebar-width));
+  margin-inline: calc((-50dvw + var(--sidebar-width) / 2) + 50%);
+  margin-top: calc(-1 * var(--gap-lg));
+  margin-bottom: 0;
+  --content-width: var(--max-content-width, 100%);
 }
 
 .footer-mobile-button:hover {
@@ -10507,224 +10703,853 @@ footer[role='contentinfo'] a:not(.dndev-interactive):hover {
   display: inline;
 }
 
-/* 2. Fonts */
+/* 2. Fonts from @fontsource (bundled; no external fetch, no public/fonts required) */
 
-/* packages/ui/assets/fonts/fonts.css */
+/* inter-cyrillic-ext-300-normal */
 
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 400;
   font-display: swap;
-  src: url('/fonts/Roboto-400-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
+  font-weight: 300;
+  src: url(./files/inter-cyrillic-ext-300-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-300-normal.woff) format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
 }
 
+/* inter-cyrillic-300-normal */
+
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 700;
   font-display: swap;
-  src: url('/fonts/Roboto-700-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
+  font-weight: 300;
+  src: url(./files/inter-cyrillic-300-normal.woff2) format('woff2'), url(./files/inter-cyrillic-300-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
 }
 
-/* ✅ CRITICAL: Extended character sets load on-demand when needed */
+/* inter-greek-ext-300-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src: url(./files/inter-greek-ext-300-normal.woff2) format('woff2'), url(./files/inter-greek-ext-300-normal.woff) format('woff');
+  unicode-range: U+1F00-1FFF;
+}
 
-/* These load automatically when browser encounters characters in these ranges */
+/* inter-greek-300-normal */
 
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 400;
   font-display: swap;
-  src: url('/fonts/Roboto-400-latin-ext.woff2') format('woff2');
-  unicode-range:
-    U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
-    U+2C60-2C7F, U+A720-A7FF;
+  font-weight: 300;
+  src: url(./files/inter-greek-300-normal.woff2) format('woff2'), url(./files/inter-greek-300-normal.woff) format('woff');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
 }
 
+/* inter-vietnamese-300-normal */
+
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 700;
   font-display: swap;
-  src: url('/fonts/Roboto-700-latin-ext.woff2') format('woff2');
-  unicode-range:
-    U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
-    U+2C60-2C7F, U+A720-A7FF;
+  font-weight: 300;
+  src: url(./files/inter-vietnamese-300-normal.woff2) format('woff2'), url(./files/inter-vietnamese-300-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
 }
 
-/* Cyrillic */
+/* inter-latin-ext-300-normal */
 
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 400;
   font-display: swap;
-  src: url('/fonts/Roboto-400-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-weight: 300;
+  src: url(./files/inter-latin-ext-300-normal.woff2) format('woff2'), url(./files/inter-latin-ext-300-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
 }
 
+/* inter-latin-300-normal */
+
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 700;
   font-display: swap;
-  src: url('/fonts/Roboto-700-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  font-weight: 300;
+  src: url(./files/inter-latin-300-normal.woff2) format('woff2'), url(./files/inter-latin-300-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 
-/* Cyrillic Extended */
+/* inter-cyrillic-ext-400-normal */
 
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
+  font-display: swap;
   font-weight: 400;
+  src: url(./files/inter-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-400-normal.woff) format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-400-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
   font-display: swap;
-  src: url('/fonts/Roboto-400-cyrillic-ext.woff2') format('woff2');
-  unicode-range:
-    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  font-weight: 400;
+  src: url(./files/inter-cyrillic-400-normal.woff2) format('woff2'), url(./files/inter-cyrillic-400-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
 }
 
+/* inter-greek-ext-400-normal */
+
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 700;
   font-display: swap;
-  src: url('/fonts/Roboto-700-cyrillic-ext.woff2') format('woff2');
-  unicode-range:
-    U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  font-weight: 400;
+  src: url(./files/inter-greek-ext-400-normal.woff2) format('woff2'), url(./files/inter-greek-ext-400-normal.woff) format('woff');
+  unicode-range: U+1F00-1FFF;
 }
 
-/* Greek */
+/* inter-greek-400-normal */
 
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
+  font-display: swap;
   font-weight: 400;
+  src: url(./files/inter-greek-400-normal.woff2) format('woff2'), url(./files/inter-greek-400-normal.woff) format('woff');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* inter-vietnamese-400-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
   font-display: swap;
-  src: url('/fonts/Roboto-400-greek.woff2') format('woff2');
-  unicode-range: U+0370-03FF;
+  font-weight: 400;
+  src: url(./files/inter-vietnamese-400-normal.woff2) format('woff2'), url(./files/inter-vietnamese-400-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
 }
 
+/* inter-latin-ext-400-normal */
+
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 700;
   font-display: swap;
-  src: url('/fonts/Roboto-700-greek.woff2') format('woff2');
-  unicode-range: U+0370-03FF;
+  font-weight: 400;
+  src: url(./files/inter-latin-ext-400-normal.woff2) format('woff2'), url(./files/inter-latin-ext-400-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
 }
 
-/* Greek Extended */
+/* inter-latin-400-normal */
 
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
+  font-display: swap;
   font-weight: 400;
+  src: url(./files/inter-latin-400-normal.woff2) format('woff2'), url(./files/inter-latin-400-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* inter-cyrillic-ext-600-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/inter-cyrillic-ext-600-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-600-normal.woff) format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-600-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/inter-cyrillic-600-normal.woff2) format('woff2'), url(./files/inter-cyrillic-600-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* inter-greek-ext-600-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
   font-display: swap;
-  src: url('/fonts/Roboto-400-greek-ext.woff2') format('woff2');
+  font-weight: 600;
+  src: url(./files/inter-greek-ext-600-normal.woff2) format('woff2'), url(./files/inter-greek-ext-600-normal.woff) format('woff');
   unicode-range: U+1F00-1FFF;
 }
 
+/* inter-greek-600-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/inter-greek-600-normal.woff2) format('woff2'), url(./files/inter-greek-600-normal.woff) format('woff');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* inter-vietnamese-600-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/inter-vietnamese-600-normal.woff2) format('woff2'), url(./files/inter-vietnamese-600-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* inter-latin-ext-600-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/inter-latin-ext-600-normal.woff2) format('woff2'), url(./files/inter-latin-ext-600-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* inter-latin-600-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/inter-latin-600-normal.woff2) format('woff2'), url(./files/inter-latin-600-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* inter-cyrillic-ext-700-normal */
+
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
+  font-display: swap;
   font-weight: 700;
+  src: url(./files/inter-cyrillic-ext-700-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-700-normal.woff) format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-700-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
   font-display: swap;
-  src: url('/fonts/Roboto-700-greek-ext.woff2') format('woff2');
-  unicode-range: U+1F00-1FFF;
+  font-weight: 700;
+  src: url(./files/inter-cyrillic-700-normal.woff2) format('woff2'), url(./files/inter-cyrillic-700-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
 }
 
-/* Vietnamese */
+/* inter-greek-ext-700-normal */
 
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 400;
   font-display: swap;
-  src: url('/fonts/Roboto-400-vietnamese.woff2') format('woff2');
-  unicode-range:
-    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  font-weight: 700;
+  src: url(./files/inter-greek-ext-700-normal.woff2) format('woff2'), url(./files/inter-greek-ext-700-normal.woff) format('woff');
+  unicode-range: U+1F00-1FFF;
 }
 
+/* inter-greek-700-normal */
+
 @font-face {
-  font-family: Roboto;
+  font-family: 'Inter';
   font-style: normal;
+  font-display: swap;
   font-weight: 700;
+  src: url(./files/inter-greek-700-normal.woff2) format('woff2'), url(./files/inter-greek-700-normal.woff) format('woff');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* inter-vietnamese-700-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
   font-display: swap;
-  src: url('/fonts/Roboto-700-vietnamese.woff2') format('woff2');
-  unicode-range:
-    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  font-weight: 700;
+  src: url(./files/inter-vietnamese-700-normal.woff2) format('woff2'), url(./files/inter-vietnamese-700-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
 }
 
-/* ===========================
-   Inter - Modern Sans-Serif (Variable Font)
-   Weights: 400-700
-   =========================== */
+/* inter-latin-ext-700-normal */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/inter-latin-ext-700-normal.woff2) format('woff2'), url(./files/inter-latin-ext-700-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
 
-/* Latin - loads first */
+/* inter-latin-700-normal */
 
 @font-face {
-  font-family: Inter;
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 400 700;
-  font-display: swap; /* Changed from optional to swap - we preload this font */
-  src: url('/fonts/Inter-latin.woff2') format('woff2');
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/inter-latin-700-normal.woff2) format('woff2'), url(./files/inter-latin-700-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 
-/* Latin Extended - on-demand */
+/* playfair-display-cyrillic-400-normal */
 
 @font-face {
-  font-family: Inter;
+  font-family: 'Playfair Display';
   font-style: normal;
-  font-weight: 400 700;
   font-display: swap;
-  src: url('/fonts/Inter-latin-ext.woff2') format('woff2');
-  unicode-range:
-    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
-    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-weight: 400;
+  src: url(./files/playfair-display-cyrillic-400-normal.woff2) format('woff2'), url(./files/playfair-display-cyrillic-400-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
 }
 
-/* ===========================
-   Playfair Display - Serif (Variable Font)
-   Weights: 400-700
-   =========================== */
+/* playfair-display-vietnamese-400-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/playfair-display-vietnamese-400-normal.woff2) format('woff2'), url(./files/playfair-display-vietnamese-400-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
 
-/* Latin - loads first */
+/* playfair-display-latin-ext-400-normal */
 
 @font-face {
   font-family: 'Playfair Display';
   font-style: normal;
-  font-weight: 400 700;
   font-display: swap;
-  src: url('/fonts/PlayfairDisplay-latin.woff2') format('woff2');
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
+  font-weight: 400;
+  src: url(./files/playfair-display-latin-ext-400-normal.woff2) format('woff2'), url(./files/playfair-display-latin-ext-400-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
 }
 
-/* Latin Extended - on-demand */
+/* playfair-display-latin-400-normal */
 
 @font-face {
   font-family: 'Playfair Display';
   font-style: normal;
-  font-weight: 400 700;
   font-display: swap;
-  src: url('/fonts/PlayfairDisplay-latin-ext.woff2') format('woff2');
-  unicode-range:
-    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
-    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-weight: 400;
+  src: url(./files/playfair-display-latin-400-normal.woff2) format('woff2'), url(./files/playfair-display-latin-400-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* playfair-display-cyrillic-500-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/playfair-display-cyrillic-500-normal.woff2) format('woff2'), url(./files/playfair-display-cyrillic-500-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* playfair-display-vietnamese-500-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/playfair-display-vietnamese-500-normal.woff2) format('woff2'), url(./files/playfair-display-vietnamese-500-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* playfair-display-latin-ext-500-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/playfair-display-latin-ext-500-normal.woff2) format('woff2'), url(./files/playfair-display-latin-ext-500-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* playfair-display-latin-500-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/playfair-display-latin-500-normal.woff2) format('woff2'), url(./files/playfair-display-latin-500-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* playfair-display-cyrillic-600-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/playfair-display-cyrillic-600-normal.woff2) format('woff2'), url(./files/playfair-display-cyrillic-600-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* playfair-display-vietnamese-600-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/playfair-display-vietnamese-600-normal.woff2) format('woff2'), url(./files/playfair-display-vietnamese-600-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* playfair-display-latin-ext-600-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/playfair-display-latin-ext-600-normal.woff2) format('woff2'), url(./files/playfair-display-latin-ext-600-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* playfair-display-latin-600-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/playfair-display-latin-600-normal.woff2) format('woff2'), url(./files/playfair-display-latin-600-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* playfair-display-cyrillic-700-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/playfair-display-cyrillic-700-normal.woff2) format('woff2'), url(./files/playfair-display-cyrillic-700-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* playfair-display-vietnamese-700-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/playfair-display-vietnamese-700-normal.woff2) format('woff2'), url(./files/playfair-display-vietnamese-700-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* playfair-display-latin-ext-700-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/playfair-display-latin-ext-700-normal.woff2) format('woff2'), url(./files/playfair-display-latin-ext-700-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* playfair-display-latin-700-normal */
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/playfair-display-latin-700-normal.woff2) format('woff2'), url(./files/playfair-display-latin-700-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* roboto-cyrillic-ext-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/roboto-cyrillic-ext-400-normal.woff) format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* roboto-cyrillic-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-cyrillic-400-normal.woff2) format('woff2'), url(./files/roboto-cyrillic-400-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* roboto-greek-ext-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-greek-ext-400-normal.woff2) format('woff2'), url(./files/roboto-greek-ext-400-normal.woff) format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-greek-400-normal.woff2) format('woff2'), url(./files/roboto-greek-400-normal.woff) format('woff');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* roboto-math-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-math-400-normal.woff2) format('woff2'), url(./files/roboto-math-400-normal.woff) format('woff');
+  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
+}
+
+/* roboto-symbols-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-symbols-400-normal.woff2) format('woff2'), url(./files/roboto-symbols-400-normal.woff) format('woff');
+  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
+}
+
+/* roboto-vietnamese-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-vietnamese-400-normal.woff2) format('woff2'), url(./files/roboto-vietnamese-400-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* roboto-latin-ext-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-latin-ext-400-normal.woff2) format('woff2'), url(./files/roboto-latin-ext-400-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* roboto-latin-400-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/roboto-latin-400-normal.woff2) format('woff2'), url(./files/roboto-latin-400-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* roboto-cyrillic-ext-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-cyrillic-ext-700-normal.woff2) format('woff2'), url(./files/roboto-cyrillic-ext-700-normal.woff) format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* roboto-cyrillic-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-cyrillic-700-normal.woff2) format('woff2'), url(./files/roboto-cyrillic-700-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* roboto-greek-ext-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-greek-ext-700-normal.woff2) format('woff2'), url(./files/roboto-greek-ext-700-normal.woff) format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* roboto-greek-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-greek-700-normal.woff2) format('woff2'), url(./files/roboto-greek-700-normal.woff) format('woff');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* roboto-math-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-math-700-normal.woff2) format('woff2'), url(./files/roboto-math-700-normal.woff) format('woff');
+  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
+}
+
+/* roboto-symbols-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-symbols-700-normal.woff2) format('woff2'), url(./files/roboto-symbols-700-normal.woff) format('woff');
+  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
+}
+
+/* roboto-vietnamese-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-vietnamese-700-normal.woff2) format('woff2'), url(./files/roboto-vietnamese-700-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* roboto-latin-ext-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-latin-ext-700-normal.woff2) format('woff2'), url(./files/roboto-latin-ext-700-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* roboto-latin-700-normal */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/roboto-latin-700-normal.woff2) format('woff2'), url(./files/roboto-latin-700-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* space-grotesk-vietnamese-300-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src: url(./files/space-grotesk-vietnamese-300-normal.woff2) format('woff2'), url(./files/space-grotesk-vietnamese-300-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* space-grotesk-latin-ext-300-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src: url(./files/space-grotesk-latin-ext-300-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-ext-300-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* space-grotesk-latin-300-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src: url(./files/space-grotesk-latin-300-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-300-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* space-grotesk-vietnamese-400-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/space-grotesk-vietnamese-400-normal.woff2) format('woff2'), url(./files/space-grotesk-vietnamese-400-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* space-grotesk-latin-ext-400-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/space-grotesk-latin-ext-400-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-ext-400-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* space-grotesk-latin-400-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/space-grotesk-latin-400-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-400-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* space-grotesk-vietnamese-500-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/space-grotesk-vietnamese-500-normal.woff2) format('woff2'), url(./files/space-grotesk-vietnamese-500-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* space-grotesk-latin-ext-500-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/space-grotesk-latin-ext-500-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-ext-500-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* space-grotesk-latin-500-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(./files/space-grotesk-latin-500-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-500-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* space-grotesk-vietnamese-600-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/space-grotesk-vietnamese-600-normal.woff2) format('woff2'), url(./files/space-grotesk-vietnamese-600-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* space-grotesk-latin-ext-600-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/space-grotesk-latin-ext-600-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-ext-600-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* space-grotesk-latin-600-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(./files/space-grotesk-latin-600-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-600-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* space-grotesk-vietnamese-700-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/space-grotesk-vietnamese-700-normal.woff2) format('woff2'), url(./files/space-grotesk-vietnamese-700-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* space-grotesk-latin-ext-700-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/space-grotesk-latin-ext-700-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-ext-700-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* space-grotesk-latin-700-normal */
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/space-grotesk-latin-700-normal.woff2) format('woff2'), url(./files/space-grotesk-latin-700-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 
 /* Ensure valid CSS file termination for Turbopack */