contain-css-svelte 1.0.2 → 1.1.1

package/dist/Card.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import { injectVars } from "./util";
-let { header, footer, children, height = "", fixedHeight, center, ...restProps } = $props();
-let cssVars = injectVars({ height, ...restProps }, "card", [
+let { header, footer, children, height, fixedHeight, center, ...restProps } = $props();
+const cssVars = $derived(injectVars({ height, ...restProps }, "card", [
     "bg",
     "fg",
     "padding",
     "width",
     "height",
-]);
+]));
 const forceFixedHeight = (h) => {
     if (h && !fixedHeight) {
         fixedHeight = true;
@@ -29,190 +29,39 @@ let hasFooter = $derived(Boolean(footer));
   </footer>
 </div>
 
-<style>/* Warning: because we define a fallback
+<style>@charset "UTF-8";
+/* Warning: because we define a fallback
   media query, the media query can override the container
   if we stack a bunch of these in a row and aren't thoughtful about the order.
   Put min-width queries *after* max-width queries so that smaller
   container queries don't get their styles overridden by large media queries.
   */
 /* Convenience groupings */
+/* ── Card shell ─────────────────────────────────────────── */
 .card {
   --w: var(--card-width);
   --h: var(--card-height);
-  box-shadow: var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space)))) var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space)))) var(--card-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--card-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
-  background: var(--card-bg, var(--container-bg, var(--bg, unset)));
-  color: var(--card-fg, var(--container-fg, var(--fg, unset)));
-  --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
-  --link-fg: var(--card-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
-  --fg: var(--card-fg, var(--container-fg, var(--fg, unset)));
-  --bg: var(--card-bg, var(--container-bg, var(--bg, unset)));
-  border-radius: var(--card-border-radius, var(--container-border-radius, var(--border-radius, 0)));
-  border: var(--card-border, var(--container-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
   display: flex;
   flex-direction: column;
-  margin: var(--card-margin, var(--margin, 16px));
-}
-
-.card section {
-  flex-grow: 1;
-  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
-  font-family: var(--card-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
-  font-family: var(--card-font-family, var(--container-font-family, var(--font-family, unset)));
-  text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform, unset)));
-  text-decoration: var(--card-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
-  font-size: var(--card-font-size, var(--container-font-size, var(--font-size, unset)));
-  font-weight: var(--card-font-weight, var(--container-font-weight, var(--font-weight, unset)));
-  line-height: var(--card-line-height, var(--container-line-height, var(--line-height, unset)));
-  letter-spacing: var(--card-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
-  margin-top: var(--card-margin, var(--container-margin, var(--margin, unset)));
-  margin-top: var(--card-margin-top, var(--container-margin-top, var(--margin-top, unset)));
-  margin-bottom: var(--card-margin, var(--container-margin, var(--margin, unset)));
-  margin-bottom: var(--card-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
-  text-indent: var(--card-indent, var(--container-indent, var(--indent, unset)));
-  font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant, unset)));
-  text-align: var(--card-text-align, var(--container-text-align, var(--text-align, unset)));
-}
-
-.card section :global(p),
-.card section :global(blockquote),
-.card section :global(dl),
-.card section :global(ul),
-.card section :global(ol) {
-  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, 40em)));
-  font-family: var(--card-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
-  line-height: var(--card-line-height, var(--container-line-height, var(--line-height, 1.5)));
-  margin-left: auto;
-  margin-right: auto;
-  font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
-}
-
-.card section :global(h1),
-.card section :global(h2),
-.card section :global(h3),
-.card section :global(h4),
-.card section :global(h5),
-.card section :global(h6) {
-  color: var(--card-heading-fg, var(--container-heading-fg, var(--heading-fg, unset)));
-  background: var(--card-heading-bg, var(--container-heading-bg, var(--heading-bg, transparent)));
-  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: var(--card-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
-  margin-top: var(--card-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
-  /* Typography */
-  font-family: var(--card-heading-font-family, var(--container-heading-font-family, var(--heading-font-family, var(--heading-font-family, inherit))));
-  text-transform: var(--card-heading-text-transform, var(--container-heading-text-transform, var(--heading-text-transform, var(--heading-text-transform, inherit))));
-  text-decoration: var(--card-heading-text-decoration, var(--container-heading-text-decoration, var(--heading-text-decoration, var(--heading-text-decoration, inherit))));
-  font-size: var(--card-heading-font-size, var(--container-heading-font-size, var(--heading-font-size, var(--heading-font-size, inherit))));
-  font-weight: var(--card-heading-font-weight, var(--container-heading-font-weight, var(--heading-font-weight, var(--heading-font-weight, inherit))));
-  line-height: var(--card-heading-line-height, var(--container-heading-line-height, var(--heading-line-height, var(--heading-line-height, inherit))));
-  letter-spacing: var(--card-heading-letter-spacing, var(--container-heading-letter-spacing, var(--heading-letter-spacing, var(--heading-letter-spacing, inherit))));
-  text-indent: var(--card-heading-indent, var(--container-heading-indent, var(--heading-indent, var(--heading-indent, inherit))));
-  font-variant: var(--card-heading-font-variant, var(--container-heading-font-variant, var(--heading-font-variant, var(--heading-font-variant, inherit))));
-  text-align: var(--card-heading-text-align, var(--container-heading-text-align, var(--heading-text-align, var(--heading-text-align, inherit))));
-  /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
-    font-size: fn.var(--heading-font-size, inherit);
-    font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
-    line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
-    letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
-    text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
-    font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
-    text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
-}
-
-.card section :global(p) {
-  font-family: var(--card-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
-  text-transform: var(--card-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit))));
-  text-decoration: var(--card-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-text-decoration, var(--paragraph-text-decoration, inherit))));
-  font-size: var(--card-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--paragraph-font-size, inherit))));
-  font-weight: var(--card-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-font-weight, var(--paragraph-font-weight, inherit))));
-  line-height: var(--card-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--paragraph-line-height, inherit))));
-  letter-spacing: var(--card-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit))));
-  text-indent: var(--card-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-indent, var(--paragraph-indent, inherit))));
-  font-variant: var(--card-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit))));
-  text-align: var(--card-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit))));
-}
-
-.card section :global(p:first-of-type),
-.card section :global(h1 + p),
-.card section :global(h2 + p),
-.card section :global(h3 + p),
-.card section :global(h4 + p),
-.card section :global(h5 + p),
-.card section :global(h6 + p) {
-  font-family: var(--card-first-paragraph-font-family, var(--container-first-paragraph-font-family, var(--first-paragraph-font-family, var(--first-paragraph-font-family, inherit))));
-  text-transform: var(--card-first-paragraph-text-transform, var(--container-first-paragraph-text-transform, var(--first-paragraph-text-transform, var(--first-paragraph-text-transform, inherit))));
-  text-decoration: var(--card-first-paragraph-text-decoration, var(--container-first-paragraph-text-decoration, var(--first-paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit))));
-  font-size: var(--card-first-paragraph-font-size, var(--container-first-paragraph-font-size, var(--first-paragraph-font-size, var(--first-paragraph-font-size, inherit))));
-  font-weight: var(--card-first-paragraph-font-weight, var(--container-first-paragraph-font-weight, var(--first-paragraph-font-weight, var(--first-paragraph-font-weight, inherit))));
-  line-height: var(--card-first-paragraph-line-height, var(--container-first-paragraph-line-height, var(--first-paragraph-line-height, var(--first-paragraph-line-height, inherit))));
-  letter-spacing: var(--card-first-paragraph-letter-spacing, var(--container-first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit))));
-  text-indent: var(--card-first-paragraph-indent, var(--container-first-paragraph-indent, var(--first-paragraph-indent, var(--first-paragraph-indent, inherit))));
-  font-variant: var(--card-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--first-paragraph-font-variant, var(--first-paragraph-font-variant, inherit))));
-  text-align: var(--card-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
-  font-size: var(--card-first-paragraph-first-paragraph-font-size, var(--container-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--card-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--card-font-size, var(--container-font-size, var(--font-size, inherit)))))))));
-  line-height: var(--card-first-paragraph-first-paragraph-line-height, var(--container-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--card-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--card-line-height, var(--container-line-height, var(--line-height, inherit)))))))));
-  margin-block-start: var(--card-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
-}
-
-.card section :global(p:first-of-type::first-line) {
-  font-family: var(--first-line-font-family, var(--card-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
-  text-transform: var(--first-line-text-transform, var(--card-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
-  text-decoration: var(--first-line-text-decoration, var(--card-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, var(--first-line-text-decoration, inherit)))));
-  font-size: var(--first-line-font-size, var(--card-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, var(--first-line-font-size, inherit)))));
-  font-weight: var(--first-line-font-weight, var(--card-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, var(--first-line-font-weight, inherit)))));
-  line-height: var(--first-line-line-height, var(--card-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, var(--first-line-line-height, inherit)))));
-  letter-spacing: var(--first-line-letter-spacing, var(--card-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, var(--first-line-letter-spacing, inherit)))));
-  text-indent: var(--first-line-indent, var(--card-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, var(--first-line-indent, inherit)))));
-  font-variant: var(--first-line-font-variant, var(--card-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
-  text-align: var(--first-line-text-align, var(--card-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
-}
-
-.card section :global(p:first-of-type::first-letter) {
-  font-family: var(--first-letter-font-family, var(--card-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit))));
-  text-transform: var(--first-letter-text-transform, var(--card-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit))));
-  text-decoration: var(--first-letter-text-decoration, var(--card-first-letter-text-decoration, var(--container-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit))));
-  font-size: var(--first-letter-font-size, var(--card-first-letter-font-size, var(--container-first-letter-font-size, var(--container-first-letter-font-size, inherit))));
-  font-weight: var(--first-letter-font-weight, var(--card-first-letter-font-weight, var(--container-first-letter-font-weight, var(--container-first-letter-font-weight, inherit))));
-  line-height: var(--first-letter-line-height, var(--card-first-letter-line-height, var(--container-first-letter-line-height, var(--container-first-letter-line-height, inherit))));
-  letter-spacing: var(--first-letter-letter-spacing, var(--card-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit))));
-  text-indent: var(--first-letter-indent, var(--card-first-letter-indent, var(--container-first-letter-indent, var(--container-first-letter-indent, inherit))));
-  font-variant: var(--first-letter-font-variant, var(--card-first-letter-font-variant, var(--container-first-letter-font-variant, var(--container-first-letter-font-variant, inherit))));
-  text-align: var(--first-letter-text-align, var(--card-first-letter-text-align, var(--container-first-letter-text-align, var(--container-first-letter-text-align, inherit))));
-  --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
-  --link-fg: var(--card-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
-  background: var(--card-first-letter-bg, var(--container-first-letter-bg, var(--first-letter-bg, inherit)));
-  color: var(--card-first-letter-fg, var(--container-first-letter-fg, var(--first-letter-fg, inherit)));
-}
-
-@container (max-width: 600px) {
-  .card {
-    --w: var(--card-width-small);
-    --h: var(--card-height-small);
-    --sidebar-width: calc(var(--card-width-small) - var(--padding) * 2);
-  }
-}
-@container (min-width: 1921px) {
-  .card {
-    --w: var(--card-width-large);
-    --h: var(--card-height-large);
-  }
-}
-.card.center {
-  display: grid;
-  place-content: center;
-}
-
-.card {
   overflow-x: hidden;
   container-type: inline-size;
   width: var(--w);
+  margin: var(--card-margin, var(--margin, 16px));
+  border-radius: var(--card-border-radius, var(--container-border-radius, var(--border-radius, 0)));
+  border: var(--card-border, var(--container-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
+  --_background-color: var(--card-bg, var(--container-bg, var(--bg, unset)));
+  --_color: var(--card-fg, var(--container-fg, var(--fg, unset)));
+  --link-bg: var(--card-link-bg, var(--container-link-bg, inherit));
+  --link-fg: var(--card-link-fg, var(--container-link-fg, inherit));
+  background-color: var(--_background-color);
+  color: var(--_color);
+  box-shadow: var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space)))) var(--card-shadow-distance, var(--container-shadow-distance, var(--shadow-distance, var(--space)))) var(--card-shadow-blur, var(--container-shadow-blur, var(--shadow-blur, var(--space)))) var(--card-shadow-color, var(--container-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
 }
 
-.card section {
-  line-height: var(--line-height);
-  max-width: var(--line-width);
-  width: calc(100% - var(--card-padding, var(--padding, container)));
+.card.center section {
+  display: grid;
+  place-content: center;
+  text-align: center;
 }
 
 .card.fixedHeight {
@@ -250,7 +99,7 @@ let hasFooter = $derived(Boolean(footer));
   background: var(--card-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5))));
 }
 
-header,
+/* ── Card regions ───────────────────────────────────────── */
 section {
   padding: var(--padding);
   border-top-right-radius: var(--border-radius);
@@ -259,14 +108,15 @@ section {
 }
 
 header {
-  background: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
-  color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
-  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
-  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
-  --fg: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
-  --bg: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
+  --_background-color: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
+  --_color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
+  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, inherit));
+  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, inherit));
+  background-color: var(--_background-color);
+  color: var(--_color);
   box-sizing: border-box;
-  padding: var(--card-header-padding, var(--bar-padding, var(--padding, 4px)));
+  --_padding: var(--card-header-padding, var(--bar-padding, var(--padding, 4px)));
+  padding: var(--_padding);
   border: var(--card-header-border, var(--bar-border, var(--border, inherit)));
   border-top: var(--card-header-border-top, var(--bar-border-top, var(--border-top, var(--card-header-border, var(--bar-border, var(--border, none))))));
   border-right: var(--card-header-border-right, var(--bar-border-right, var(--border-right, var(--card-header-border, var(--bar-border, var(--border, none))))));
@@ -276,7 +126,7 @@ header {
   border-top-left-radius: var(--card-header-border-radius, var(--border-radius, bar));
   display: flex;
   align-items: center;
-  height: var(--card-header-height, var(--bar-height, var(--height, 2em)));
+  min-height: var(--card-header-height, var(--bar-height, var(--height, 2em)));
 }
 
 header :global(h1),
@@ -293,23 +143,24 @@ footer :global(h5),
 footer :global(h6) {
   margin-block-start: 0 !important;
   margin-block-end: 0 !important;
-  background: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
-  color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
-  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
-  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
-  --fg: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
-  --bg: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
+  --_background-color: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
+  --_color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
+  --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, inherit));
+  --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, inherit));
+  background-color: var(--_background-color);
+  color: var(--_color);
 }
 
 footer {
-  background: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
-  color: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
-  --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
-  --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
-  --fg: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
-  --bg: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
+  --_background-color: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
+  --_color: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
+  --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, inherit));
+  --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, inherit));
+  background-color: var(--_background-color);
+  color: var(--_color);
   box-sizing: border-box;
-  padding: var(--card-footer-padding, var(--bar-padding, var(--padding, 4px)));
+  --_padding: var(--card-footer-padding, var(--bar-padding, var(--padding, 4px)));
+  padding: var(--_padding);
   border: var(--card-footer-border, var(--bar-border, var(--border, inherit)));
   border-top: var(--card-footer-border-top, var(--bar-border-top, var(--border-top, var(--card-footer-border, var(--bar-border, var(--border, none))))));
   border-right: var(--card-footer-border-right, var(--bar-border-right, var(--border-right, var(--card-footer-border, var(--bar-border, var(--border, none))))));
@@ -317,9 +168,234 @@ footer {
   border-left: var(--card-footer-border-left, var(--bar-border-left, var(--border-left, var(--card-footer-border, var(--bar-border, var(--border, none))))));
   border-bottom-right-radius: var(--card-footer-border-radius, var(--border-radius, bar));
   border-bottom-left-radius: var(--card-footer-border-radius, var(--border-radius, bar));
-  height: var(--card-header-height, var(--bar-height, var(--height, 2em)));
+  min-height: var(--card-footer-height, var(--bar-height, var(--height, 2em)));
+}
+
+section {
+  flex-grow: 1;
+  line-height: var(--line-height);
+  max-width: var(--line-width);
+  width: 100%;
+  box-sizing: border-box;
+  --_background-color: var(--card-content-bg, var(--container-bg, var(--bg, unset)));
+  --_color: var(--card-content-fg, var(--container-fg, var(--fg, unset)));
+  --link-bg: var(--card-content-link-bg, var(--container-link-bg, inherit));
+  --link-fg: var(--card-content-link-fg, var(--container-link-fg, inherit));
+  background-color: var(--_background-color);
+  color: var(--_color);
+  box-sizing: border-box;
+  --_padding: var(--card-content-padding, var(--padding, 4px));
+  padding: var(--_padding);
+  border: var(--card-content-border, var(--border, inherit));
+  border-top: var(--card-content-border-top, var(--border-top, var(--card-content-border, var(--border, none))));
+  border-right: var(--card-content-border-right, var(--border-right, var(--card-content-border, var(--border, none))));
+  border-bottom: var(--card-content-border-bottom, var(--border-bottom, var(--card-content-border, var(--border, none))));
+  border-left: var(--card-content-border-left, var(--border-left, var(--card-content-border, var(--border, none))));
+  border-radius: var(--card-content-border-radius, var(--border-radius, none));
+  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
+  font-family: var(--card-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
+  font-family: var(--card-font-family, var(--container-font-family, var(--font-family, unset)));
+  text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--card-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
+  --_font-size: var(--card-font-size, var(--container-font-size, var(--font-size, unset)));
+  font-size: var(--_font-size);
+  font-weight: var(--card-font-weight, var(--container-font-weight, var(--font-weight, unset)));
+  line-height: var(--card-line-height, var(--container-line-height, var(--line-height, unset)));
+  letter-spacing: var(--card-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
+  --_margin-top: var(--card-margin, var(--container-margin, var(--margin, unset)));
+  --_margin-top: var(--card-margin-top, var(--container-margin-top, var(--margin-top, unset)));
+  margin-top: var(--_margin-top);
+  --_margin-bottom: var(--card-margin, var(--container-margin, var(--margin, unset)));
+  --_margin-bottom: var(--card-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
+  margin-bottom: var(--_margin-bottom);
+  text-indent: var(--card-indent, var(--container-indent, var(--indent, unset)));
+  font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant, unset)));
+  text-align: var(--card-text-align, var(--container-text-align, var(--text-align, unset)));
+}
+
+section :global(p),
+section :global(blockquote),
+section :global(dl),
+section :global(ul),
+section :global(ol) {
+  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, 40em)));
+  font-family: var(--card-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
+  line-height: var(--card-line-height, var(--container-line-height, var(--line-height, 1.5)));
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
+}
+
+section :global(h1),
+section :global(h2),
+section :global(h3),
+section :global(h4),
+section :global(h5),
+section :global(h6) {
+  color: var(--card-heading-fg, var(--container-heading-fg, var(--heading-fg, unset)));
+  background: var(--card-heading-bg, var(--container-heading-bg, var(--heading-bg, transparent)));
+  max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--card-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
+  margin-top: var(--card-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
+  /* Typography */
+  font-family: var(--card-heading-font-family, var(--container-heading-font-family, var(--heading-font-family, inherit)));
+  text-transform: var(--card-heading-text-transform, var(--container-heading-text-transform, var(--heading-text-transform, inherit)));
+  text-decoration: var(--card-heading-text-decoration, var(--container-heading-text-decoration, var(--heading-text-decoration, inherit)));
+  --_font-size: var(--card-heading-font-size, var(--container-heading-font-size, var(--heading-font-size, inherit)));
+  font-size: var(--_font-size);
+  font-weight: var(--card-heading-font-weight, var(--container-heading-font-weight, var(--heading-font-weight, inherit)));
+  line-height: var(--card-heading-line-height, var(--container-heading-line-height, var(--heading-line-height, inherit)));
+  letter-spacing: var(--card-heading-letter-spacing, var(--container-heading-letter-spacing, var(--heading-letter-spacing, inherit)));
+  text-indent: var(--card-heading-indent, var(--container-heading-indent, var(--heading-indent, inherit)));
+  font-variant: var(--card-heading-font-variant, var(--container-heading-font-variant, var(--heading-font-variant, inherit)));
+  text-align: var(--card-heading-text-align, var(--container-heading-text-align, var(--heading-text-align, inherit)));
+  /* font-family: fn.var(--heading-font-family, var(--body-font-family, var(--font-family, inherit)));
+    font-size: fn.var(--heading-font-size, inherit);
+    font-weight: fn.var(--heading-font-weight, var(--body-font-weight, var(--font-weight, inherit)));
+    line-height: fn.var(--heading-line-height, var(--body-line-height, var(--line-height, inherit)));
+    letter-spacing: fn.var(--heading-letter-spacing, var(--body-letter-spacing, var(--letter-spacing, inherit)));
+    text-indent: fn.var(--heading-indent, var(--body-indent, var(--indent, inherit)));
+    font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
+    text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
+}
+
+section :global(p) {
+  font-family: var(--card-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, inherit)));
+  text-transform: var(--card-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, inherit)));
+  text-decoration: var(--card-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-text-decoration, inherit)));
+  --_font-size: var(--card-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, inherit)));
+  font-size: var(--_font-size);
+  font-weight: var(--card-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-font-weight, inherit)));
+  line-height: var(--card-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, inherit)));
+  letter-spacing: var(--card-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-letter-spacing, inherit)));
+  text-indent: var(--card-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-indent, inherit)));
+  font-variant: var(--card-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, inherit)));
+  text-align: var(--card-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, inherit)));
 }
 
+section :global(p:first-of-type),
+section :global(h1 + p),
+section :global(h2 + p),
+section :global(h3 + p),
+section :global(h4 + p),
+section :global(h5 + p),
+section :global(h6 + p) {
+  font-family: var(--card-first-paragraph-font-family, var(--container-first-paragraph-font-family, var(--card-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--first-paragraph-font-family, inherit))))));
+  text-transform: var(--card-first-paragraph-text-transform, var(--container-first-paragraph-text-transform, var(--card-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--first-paragraph-text-transform, inherit))))));
+  text-decoration: var(--card-first-paragraph-text-decoration, var(--container-first-paragraph-text-decoration, var(--card-paragraph-text-decoration, var(--container-paragraph-text-decoration, var(--paragraph-text-decoration, var(--first-paragraph-text-decoration, inherit))))));
+  --_font-size: var(--card-first-paragraph-font-size, var(--container-first-paragraph-font-size, var(--card-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, var(--first-paragraph-font-size, inherit))))));
+  font-size: var(--_font-size);
+  font-weight: var(--card-first-paragraph-font-weight, var(--container-first-paragraph-font-weight, var(--card-paragraph-font-weight, var(--container-paragraph-font-weight, var(--paragraph-font-weight, var(--first-paragraph-font-weight, inherit))))));
+  line-height: var(--card-first-paragraph-line-height, var(--container-first-paragraph-line-height, var(--card-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, var(--first-paragraph-line-height, inherit))))));
+  letter-spacing: var(--card-first-paragraph-letter-spacing, var(--container-first-paragraph-letter-spacing, var(--card-paragraph-letter-spacing, var(--container-paragraph-letter-spacing, var(--paragraph-letter-spacing, var(--first-paragraph-letter-spacing, inherit))))));
+  text-indent: var(--card-first-paragraph-indent, var(--container-first-paragraph-indent, var(--card-paragraph-indent, var(--container-paragraph-indent, var(--paragraph-indent, var(--first-paragraph-indent, inherit))))));
+  font-variant: var(--card-first-paragraph-font-variant, var(--container-first-paragraph-font-variant, var(--card-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, var(--first-paragraph-font-variant, inherit))))));
+  text-align: var(--card-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--card-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, var(--first-paragraph-text-align, inherit))))));
+  font-size: var(--card-first-paragraph-first-paragraph-font-size, var(--container-first-paragraph-first-paragraph-font-size, var(--first-paragraph-font-size, var(--card-paragraph-font-size, var(--container-paragraph-font-size, var(--paragraph-font-size, inherit))))));
+  line-height: var(--card-first-paragraph-first-paragraph-line-height, var(--container-first-paragraph-first-paragraph-line-height, var(--first-paragraph-line-height, var(--card-paragraph-line-height, var(--container-paragraph-line-height, var(--paragraph-line-height, inherit))))));
+  margin-block-start: var(--card-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
+}
+
+section :global(p:first-of-type::first-line),
+section :global(h1 + p::first-line),
+section :global(h2 + p::first-line),
+section :global(h3 + p::first-line),
+section :global(h4 + p::first-line),
+section :global(h5 + p::first-line),
+section :global(h6 + p::first-line) {
+  font-family: var(--first-line-font-family, var(--card-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, inherit))));
+  text-transform: var(--first-line-text-transform, var(--card-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, inherit))));
+  text-decoration: var(--first-line-text-decoration, var(--card-first-line-text-decoration, var(--container-first-line-text-decoration, var(--first-line-text-decoration, inherit))));
+  --_font-size: var(--first-line-font-size, var(--card-first-line-font-size, var(--container-first-line-font-size, var(--first-line-font-size, inherit))));
+  font-size: var(--_font-size);
+  font-weight: var(--first-line-font-weight, var(--card-first-line-font-weight, var(--container-first-line-font-weight, var(--first-line-font-weight, inherit))));
+  line-height: var(--first-line-line-height, var(--card-first-line-line-height, var(--container-first-line-line-height, var(--first-line-line-height, inherit))));
+  letter-spacing: var(--first-line-letter-spacing, var(--card-first-line-letter-spacing, var(--container-first-line-letter-spacing, var(--first-line-letter-spacing, inherit))));
+  text-indent: var(--first-line-indent, var(--card-first-line-indent, var(--container-first-line-indent, var(--first-line-indent, inherit))));
+  font-variant: var(--first-line-font-variant, var(--card-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, inherit))));
+  text-align: var(--first-line-text-align, var(--card-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, inherit))));
+}
+
+section :global(p:first-of-type::first-letter),
+section :global(h1 + p::first-letter),
+section :global(h2 + p::first-letter),
+section :global(h3 + p::first-letter),
+section :global(h4 + p::first-letter),
+section :global(h5 + p::first-letter),
+section :global(h6 + p::first-letter) {
+  font-family: var(--first-letter-font-family, var(--card-first-letter-font-family, var(--container-first-letter-font-family, inherit)));
+  text-transform: var(--first-letter-text-transform, var(--card-first-letter-text-transform, var(--container-first-letter-text-transform, inherit)));
+  text-decoration: var(--first-letter-text-decoration, var(--card-first-letter-text-decoration, var(--container-first-letter-text-decoration, inherit)));
+  --_font-size: var(--first-letter-font-size, var(--card-first-letter-font-size, var(--container-first-letter-font-size, inherit)));
+  font-size: var(--_font-size);
+  font-weight: var(--first-letter-font-weight, var(--card-first-letter-font-weight, var(--container-first-letter-font-weight, inherit)));
+  line-height: var(--first-letter-line-height, var(--card-first-letter-line-height, var(--container-first-letter-line-height, inherit)));
+  letter-spacing: var(--first-letter-letter-spacing, var(--card-first-letter-letter-spacing, var(--container-first-letter-letter-spacing, inherit)));
+  text-indent: var(--first-letter-indent, var(--card-first-letter-indent, var(--container-first-letter-indent, inherit)));
+  font-variant: var(--first-letter-font-variant, var(--card-first-letter-font-variant, var(--container-first-letter-font-variant, inherit)));
+  text-align: var(--first-letter-text-align, var(--card-first-letter-text-align, var(--container-first-letter-text-align, inherit)));
+  --link-bg: var(--card-link-bg, var(--container-link-bg, inherit));
+  --link-fg: var(--card-link-fg, var(--container-link-fg, inherit));
+  background: var(--card-first-letter-bg, var(--first-letter-bg, inherit));
+  color: var(--card-first-letter-fg, var(--first-letter-fg, inherit));
+  float: var(--first-letter-float, none);
+  margin-right: var(--first-letter-margin-right, 0);
+  padding-top: var(--first-letter-padding-top, 0);
+}
+
+/* ── Container queries ──────────────────────────────────── */
+/* NOTE: .card targets the *parent* container; children target the card itself */
+/* Parent context: small — adjust card sizing vars */
+@container (max-width: 600px) {
+  .card {
+    --w: var(--card-width-small);
+    --h: var(--card-height-small);
+    --sidebar-width: calc(var(--card-width-small) - var(--_padding) * 2);
+  }
+}
+/* Card itself: narrow (≤ --card-width-small: 250px) — tighten typography and spacing */
+@container (max-width: 300px) {
+  .card section {
+    font-size: var(--card-font-size-small, calc(0.875 * var(--_font-size)));
+  }
+  .card header,
+  .card section {
+    padding: var(--card-padding-small, calc(0.75 * var(--_padding, 8px)));
+  }
+  .card header {
+    height: var(--card-header-height-small, 2.5em);
+  }
+  .card footer {
+    height: var(--card-footer-height-small, 2.5em);
+    padding: var(--card-footer-padding-small, calc(0.75 * var(--_padding, 8px)));
+  }
+}
+/* Card itself: wide (≥ --card-width-large: 600px) — expand typography and spacing */
+@container (min-width: 500px) {
+  .card section {
+    font-size: var(--card-font-size-large, calc(1.125 * var(--_font-size)));
+  }
+  .card header,
+  .card section {
+    padding: var(--card-padding-large, calc(1.25 * var(--_padding, 8px)));
+  }
+  .card header {
+    height: var(--card-header-height-large, 3em);
+  }
+  .card footer {
+    height: var(--card-footer-height-large, 3em);
+    padding: var(--card-footer-padding-large, calc(1.25 * var(--_padding, 8px)));
+  }
+}
+/* Parent context: large — expand card sizing vars */
+@container (min-width: 1921px) {
+  .card {
+    --w: var(--card-width-large);
+    --h: var(--card-height-large);
+  }
+}
 .hide {
   display: none;
 }</style>