@maggioli-design-system/styles 17.3.0 → 17.5.0

package/dist/css/tokens.editor.css

@@ -85,6 +85,26 @@
     --text-size-code-hack: 0.875rem;
     --text-size-code-hack--font-weight: 400;
     --text-size-code-hack--line-height: 1.25rem;
+    --text-size-title-page: var(--text-size-title-h3);
+    --text-size-title-page--font-weight: var(--text-size-title-h3--font-weight);
+    --text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing);
+    --text-size-title-page--line-height: var(--text-size-title-h3--line-height);
+    --text-size-title-section: var(--text-size-title-h5);
+    --text-size-title-section--font-weight: var(--text-size-title-h5--font-weight);
+    --text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing);
+    --text-size-title-section--line-height: var(--text-size-title-h5--line-height);
+    --text-size-title-dialog: var(--text-size-title-h5);
+    --text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight);
+    --text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing);
+    --text-size-title-dialog--line-height: var(--text-size-title-h5--line-height);
+    --text-size-title-part: var(--text-size-title-h6);
+    --text-size-title-part--font-weight: var(--text-size-title-h6--font-weight);
+    --text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing);
+    --text-size-title-part--line-height: var(--text-size-title-h6--line-height);
+    --text-size-title-group: var(--text-size-title-h6);
+    --text-size-title-group--font-weight: var(--text-size-title-h6--font-weight);
+    --text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing);
+    --text-size-title-group--line-height: var(--text-size-title-h6--line-height);
     --leading-2xs: 0.625rem;
     --leading-xs: 1rem;
     --leading-sm: 1.25rem;
@@ -106,7 +126,7 @@
     --spacing-4xl: 96px;
     --spacing-phrase: 50ch;
     --spacing-prose: 65ch;
-    --spacing-text: 75ch;
+    --spacing-text: var(--magma-width-reading, 56ch);
     --spacing-title: 30ch;
     --container-4xs: 128px;
     --container-3xs: 192px;
@@ -122,6 +142,21 @@
     --container-5xl: 1024px;
     --container-6xl: 1152px;
     --container-7xl: 1280px;
+    --magma-rhythm-inline: 12px;
+    --magma-rhythm-title-content: 12px;
+    --magma-rhythm-label-control: 12px;
+    --magma-rhythm-between-containers: 16px;
+    --magma-rhythm-between-fields: 24px;
+    --magma-rhythm-content-actions: 24px;
+    --magma-rhythm-inset: 24px;
+    --magma-rhythm-between-groups: 40px;
+    --magma-rhythm-between-sections: 64px;
+    --magma-width-reading: 56ch;
+    --magma-width-form: var(--magma-width-reading);
+    --magma-width-page: 1280px;
+    --magma-width-page-gutter: 24px;
+    --magma-width-dialog: calc(var(--magma-width-form) + 2 * var(--magma-rhythm-inset));
+    --magma-container-actions: 23.75rem;
     --breakpoint-mobile: 480px;
     --breakpoint-tablet: 768px;
     --breakpoint-desktop: 1024px;
@@ -651,7 +686,7 @@
     --magma-tint-scale-09: var(--tone-neutral-09);
     --magma-tint-scale-10: var(--tone-neutral-10);
     --magma-surface-sunken: var(--magma-tint-sunken); /* Below the page: wells, insets, code blocks, tracks. */
-    --magma-surface-muted: var(--magma-tint-muted); /* Same-plane grouping on the page: zebra rows, a subtle section. */
+    --magma-surface-muted: var(--magma-tint-muted); /* Same-plane grouping inside a component: zebra rows; never the background of a section. */
     --magma-surface-default: var(--magma-tint-default); /* The page canvas, the background of the body. */
     --magma-surface-raised: var(--magma-tint-raised); /* Above the page: cards, panels, sticky headers. */
     --magma-surface-overlay: var(--magma-tint-overlay); /* Floating above everything: modal, dropdown, popover, sheet. */
@@ -779,63 +814,63 @@
     --magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid fill of the AI accent. */
 
     /* globals */
-    --magma-pref-mode: light;
-    --magma-pref-theme-scheme: light;
-    --magma-pref-theme: default;
-    --magma-pref-consumption: high;
-    --magma-pref-animation: no-preference;
-    --magma-pref-contrast: no-preference;
-    --magma-backdrop-animation-duration: 300ms;
-    --magma-outline-animation-duration: 1.5s;
-    --magma-backdrop-opacity: 0.1;
-    --magma-disabled-opacity: 0.5;
-    --magma-overlay-opacity: 0.5;
-    --magma-backdrop-blur: 4px;
-    --magma-outline-blur-offset: 6px;
-    --magma-outline-focus-offset: 2px;
-    --magma-backdrop-color: rgb(0 0 0);
-    --magma-on-backdrop: rgb(252 252 252);
-    --magma-outline-blur-color: transparent;
-    --magma-outline-focus-color: rgb(0 0 0);
-    --magma-overlay-color: rgb(0 0 0);
-    --magma-selection-background: rgb(0 120 255);
-    --magma-selection-color: rgb(255 255 255);
-    --magma-corner-shape: squircle;
-    --magma-corner-cap: 0.5;
-    --magma-header-z-index: 1000;
-    --magma-notification-z-index: 2000;
-    --magma-modal-z-index: 3000;
-    --magma-backdrop-z-index: 4000;
-    --magma-dropdown-z-index: 5000;
-    --magma-tooltip-z-index: 6000;
-    --magma-theme-overlay-z-index: 7000;
-    --magma-context-menu-z-index: 8000;
-    --magma-view-transition-navigation: auto;
-    --magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity));
-    --magma-outline-blur: 2px solid var(--magma-outline-blur-color);
-    --magma-outline-focus: 2px solid var(--magma-outline-focus-color);
-    --magma-overlay-blur: var(--magma-backdrop-blur);
-    --magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity));
+    --magma-pref-mode: light; /* The active mode preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-theme-scheme: light; /* The active theme-scheme preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-theme: default; /* The active theme preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-consumption: high; /* The active consumption preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-animation: no-preference; /* The active animation preference, as the mds-pref components write it: read it, never set it. */
+    --magma-pref-contrast: no-preference; /* The active contrast preference, as the mds-pref components write it: read it, never set it. */
+    --magma-backdrop-animation-duration: 300ms; /* How long the scrim takes to fade in. */
+    --magma-outline-animation-duration: 1.5s; /* How long one pulse of the focus ring takes. */
+    --magma-backdrop-opacity: 0.1; /* How much the scrim darkens the page. */
+    --magma-disabled-opacity: 0.5; /* The opacity of disabled components. */
+    --magma-overlay-opacity: 0.5; /* How much the modal scrim darkens the page. */
+    --magma-backdrop-blur: 4px; /* How much the scrim blurs the page behind it. */
+    --magma-outline-blur-offset: 6px; /* The gap of the ring without focus, wider than the focus one: the focus ring closes in from it, or pulses out to it. */
+    --magma-outline-focus-offset: 2px; /* The gap between the focus ring and the element. */
+    --magma-backdrop-color: rgb(0 0 0); /* The colour of the scrim, black in both modes; the elevation shadows draw with it too. */
+    --magma-on-backdrop: rgb(252 252 252); /* Text and icons on the scrim, such as the close icon of a modal: light in both modes, as the scrim is black in both. */
+    --magma-outline-blur-color: transparent; /* The colour of the ring without focus: transparent. */
+    --magma-outline-focus-color: rgb(0 0 0); /* The colour of the focus ring. */
+    --magma-overlay-color: rgb(0 0 0); /* The colour of the modal scrim: the backdrop colour. */
+    --magma-selection-background: rgb(0 120 255); /* The background of selected text. */
+    --magma-selection-color: rgb(255 255 255); /* The colour of selected text. */
+    --magma-corner-shape: squircle; /* The shape of the corners: set it through data-corner-shape, which changes the radius scale with it. */
+    --magma-corner-cap: 0.5; /* The part of its height a corner may take, for the controls whose radius is past half their height. */
+    --magma-header-z-index: 1000; /* The z-index of the header, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-notification-z-index: 2000; /* The z-index of notifications, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-modal-z-index: 3000; /* The z-index of modals, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-backdrop-z-index: 4000; /* The stacking level of the scrim, between modals and dropdowns. */
+    --magma-dropdown-z-index: 5000; /* The z-index of dropdowns, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-tooltip-z-index: 6000; /* The z-index of tooltips, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-theme-overlay-z-index: 7000; /* The z-index of the theme overlay, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-context-menu-z-index: 8000; /* The z-index of context menus, on the stacking scale of the floating layers: slot your own layers between its steps. */
+    --magma-view-transition-navigation: auto; /* Whether a navigation between pages animates as a view transition. */
+    --magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity)); /* The scrim as one colour, with its opacity. */
+    --magma-outline-blur: 2px solid var(--magma-outline-blur-color); /* The ring of an element without focus: transparent. */
+    --magma-outline-focus: 2px solid var(--magma-outline-focus-color); /* The focus ring: width, style and colour. */
+    --magma-overlay-blur: var(--magma-backdrop-blur); /* How much the modal scrim blurs the page: the backdrop blur. */
+    --magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity)); /* The scrim of mds-modal as one colour, with its opacity. */
 
     /* globals: corner */
-    --magma-radius-none: var(--radius-none);
-    --magma-radius-3xs: var(--radius-squircle-3xs);
-    --magma-radius-2xs: var(--radius-squircle-2xs);
-    --magma-radius-xs: var(--radius-squircle-xs);
-    --magma-radius-sm: var(--radius-squircle-sm);
-    --magma-radius-md: var(--radius-squircle-md);
-    --magma-radius-lg: var(--radius-squircle-lg);
-    --magma-radius-xl: var(--radius-squircle-xl);
-    --magma-radius-2xl: var(--radius-squircle-2xl);
-    --magma-radius-3xl: var(--radius-squircle-3xl);
-    --magma-radius-4xl: var(--radius-squircle-4xl);
-    --magma-radius-5xl: var(--radius-squircle-5xl);
-    --magma-radius-full: var(--radius-full);
+    --magma-radius-none: var(--radius-none); /* No rounding. */
+    --magma-radius-3xs: var(--radius-squircle-3xs); /* The 3xs corner radius, on the scale of the active corner shape. */
+    --magma-radius-2xs: var(--radius-squircle-2xs); /* The 2xs corner radius, on the scale of the active corner shape. */
+    --magma-radius-xs: var(--radius-squircle-xs); /* The xs corner radius, on the scale of the active corner shape. */
+    --magma-radius-sm: var(--radius-squircle-sm); /* The sm corner radius, on the scale of the active corner shape. */
+    --magma-radius-md: var(--radius-squircle-md); /* The md corner radius, on the scale of the active corner shape. */
+    --magma-radius-lg: var(--radius-squircle-lg); /* The lg corner radius, on the scale of the active corner shape. */
+    --magma-radius-xl: var(--radius-squircle-xl); /* The xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-2xl: var(--radius-squircle-2xl); /* The 2xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-3xl: var(--radius-squircle-3xl); /* The 3xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-4xl: var(--radius-squircle-4xl); /* The 4xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-5xl: var(--radius-squircle-5xl); /* The 5xl corner radius, on the scale of the active corner shape. */
+    --magma-radius-full: var(--radius-full); /* The pill, the same under every corner shape. */
 
     /* globals: theme */
-    --depth: 1;
-    --mds-elevation-raised: 0 calc(1px * var(--depth)) calc(2px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.06 * var(--depth))), 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.08 * var(--depth)));
-    --mds-elevation-overlay: 0 calc(4px * var(--depth)) calc(12px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.12 * var(--depth))), 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.16 * var(--depth)));
+    --depth: 1; /* The depth axis, from 0 to 1: how strong the elevation shadows are. data-theme-depth="flat" sets it to 0. */
+    --mds-elevation-raised: 0 calc(1px * var(--depth)) calc(2px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.06 * var(--depth))), 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.08 * var(--depth))); /* The shadow of a raised surface, such as a card. */
+    --mds-elevation-overlay: 0 calc(4px * var(--depth)) calc(12px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.12 * var(--depth))), 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.16 * var(--depth))); /* The shadow of an overlay surface, such as a dropdown or a popover. */
 
     /* component: mds-accordion */
     --mds-accordion-color: rgb(var(--magma-text-default));
@@ -929,6 +964,14 @@
     --mds-bibliography-text-decoration: rgb(140 140 140);
     --mds-bibliography-text-decoration-hover: rgb(5 5 5);
 
+    /* component: mds-book */
+    --mds-book-color: rgb(36 103 231);
+    --mds-book-paper-color: rgb(250 248 242);
+    --mds-book-text-color: rgb(255 255 255);
+    --mds-book-publisher-color: rgb(255 255 255);
+    --mds-book-page-weight-max: 0.05;
+    --mds-book-page-weight-min: 0.1;
+
     /* component: mds-breadcrumb */
     --mds-breadcrumb-button-background-disabled: transparent;
     --mds-breadcrumb-arrow-depth-color: rgb(var(--magma-text-subtle));
@@ -990,8 +1033,8 @@
     --mds-calendar-cell-other-month-visibility: visible;
 
     /* component: mds-card */
-    --mds-card-gap: 0;
-    --mds-card-padding: 0;
+    --mds-card-gap: 12px;
+    --mds-card-padding: 24px;
     --mds-card-background: rgb(var(--magma-surface-raised));
 
     /* component: mds-chip */
@@ -1088,6 +1131,7 @@
     --mds-filter-items-padding: 8px;
     --mds-filter-items-radius: 1000px;
     --mds-filter-items-scroll-behavior: smooth;
+    --mds-filter-label-gap: 12px;
     --mds-filter-label-padding: 0 24px;
     --mds-filter-wrapper-shadow-color: rgb(196 196 196);
     --mds-filter-wrapper-shadow-opacity: 0.1;
@@ -1304,7 +1348,7 @@
     --mds-keyboard-key-illumination-dark-opacity: 0.5;
     --mds-keyboard-key-illumination-light-opacity: 0.15;
     --mds-keyboard-key-illumination-shadow: 0 0 1px 0 rgb(255 255 255 / 0.5);
-    --mds-keyboard-illumination-dark: 0 calc(var(--mds-keyboard-illumination-dark-size) * -1) 0 0 rgb(0 0 0 / var(--mds-keyboard-illumination-dark-opacity)) inset;
+    --mds-keyboard-illumination-dark: 0 calc(var(--mds-keyboard-illumination-dark-size) * -1) 0 0 rgb(var(--magma-shadow-ink) / var(--mds-keyboard-illumination-dark-opacity)) inset;
     --mds-keyboard-illumination-light: 0 var(--mds-keyboard-illumination-light-size) 0 0 rgb(255 255 255 / var(--mds-keyboard-illumination-light-opacity)) inset;
 
     /* component: mds-keyboard-key */
@@ -1312,7 +1356,7 @@
     --mds-keyboard-key-illumination-light-size: 2px;
     --mds-keyboard-key-padding: 4px;
     --mds-keyboard-key-transition-duration: 300ms;
-    --mds-keyboard-key-illumination-dark: 0 calc(var(--mds-keyboard-key-illumination-dark-size) * -1) 0 0 rgb(0 0 0 / var(--mds-keyboard-key-illumination-dark-opacity, 0.05)) inset;
+    --mds-keyboard-key-illumination-dark: 0 calc(var(--mds-keyboard-key-illumination-dark-size) * -1) 0 0 rgb(var(--magma-shadow-ink) / var(--mds-keyboard-key-illumination-dark-opacity, 0.05)) inset;
     --mds-keyboard-key-illumination-light: 0 var(--mds-keyboard-key-illumination-light-size) 0 0 rgb(255 255 255 / var(--mds-keyboard-key-illumination-light-opacity, 0.5)) inset;
 
     /* component: mds-kpi */
@@ -1400,6 +1444,8 @@
     --mds-notification-translate-offset-x: -1.75;
     --mds-notification-dot-transition-duration: var(--duration-300);
     --mds-notification-transition-timing-function: var(--ease-out-cubic);
+    --mds-notification-pulse-duration: var(--duration-1000);
+    --mds-notification-pulse-spread: --spacing(200);
 
     /* component: mds-paginator */
     --mds-paginator-background: rgb(225 225 225);
@@ -1471,7 +1517,7 @@
     --mds-push-notification-items-duration: 300ms;
     --mds-push-notification-items-intro-delay: 300ms;
     --mds-push-notification-items-outro-delay: 0ms;
-    --mds-push-notification-background: linear-gradient( to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.5) 20%, rgb(0 0 0 / 0.85) 100% );
+    --mds-push-notification-background: linear-gradient( to right, rgb(var(--magma-backdrop-color) / 0) 0%, rgb(var(--magma-backdrop-color) / 0.5) 20%, rgb(var(--magma-backdrop-color) / 0.85) 100% );
     --mds-push-notification-items-gap: var(--mds-push-notification-gap);
     --mds-push-notification-items-timing-function: var(--ease-in-out-quint);
     --mds-push-notification-item-duration: var(--mds-push-notification-items-duration);
@@ -1585,7 +1631,7 @@
     --mds-tab-item-hover-color: rgb(var(--magma-text-default));
     --mds-tab-item-radius: min( calc(var(--mds-tab-tabs-radius) - var(--mds-tab-tabs-padding)), var(--magma-corner-cap) * var(--private-tab-item-height) );
     --mds-tab-scroll-behavior: smooth;
-    --mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) --spacing(-50) rgb(0 0 0 / 0.375);
+    --mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) --spacing(-50) rgb(var(--magma-shadow-ink) / 0.375);
     --mds-tab-transition-timing-function: var(--ease-out-expo);
     --mds-tab-corner-shape: var(--magma-corner-shape);
     --mds-tab-item-hover-shadow: none;

package/dist/css/transitions.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:02 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:02 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {
@@ -73,6 +73,27 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --text-size-code-hack--font-weight: 400;
   --text-size-code-hack--line-height: 1.25rem;
 
+  --text-size-title-page: var(--text-size-title-h3);
+  --text-size-title-page--font-weight: var(--text-size-title-h3--font-weight);
+  --text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing);
+  --text-size-title-page--line-height: var(--text-size-title-h3--line-height);
+  --text-size-title-section: var(--text-size-title-h5);
+  --text-size-title-section--font-weight: var(--text-size-title-h5--font-weight);
+  --text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing);
+  --text-size-title-section--line-height: var(--text-size-title-h5--line-height);
+  --text-size-title-dialog: var(--text-size-title-h5);
+  --text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight);
+  --text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing);
+  --text-size-title-dialog--line-height: var(--text-size-title-h5--line-height);
+  --text-size-title-part: var(--text-size-title-h6);
+  --text-size-title-part--font-weight: var(--text-size-title-h6--font-weight);
+  --text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing);
+  --text-size-title-part--line-height: var(--text-size-title-h6--line-height);
+  --text-size-title-group: var(--text-size-title-h6);
+  --text-size-title-group--font-weight: var(--text-size-title-h6--font-weight);
+  --text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing);
+  --text-size-title-group--line-height: var(--text-size-title-h6--line-height);
+
   --leading-2xs: 0.625rem;
   --leading-xs: 1rem;
   --leading-sm: 1.25rem;
@@ -95,7 +116,7 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --spacing-4xl: 96px;
   --spacing-phrase: 50ch;
   --spacing-prose: 65ch;
-  --spacing-text: 75ch;
+  --spacing-text: var(--magma-width-reading, 56ch);
   --spacing-title: 30ch;
 
   --container-4xs: 128px;
@@ -113,6 +134,22 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --container-6xl: 1152px;
   --container-7xl: 1280px;
 
+  --magma-rhythm-inline: 12px;
+  --magma-rhythm-title-content: 12px;
+  --magma-rhythm-label-control: 12px;
+  --magma-rhythm-between-containers: 16px;
+  --magma-rhythm-between-fields: 24px;
+  --magma-rhythm-content-actions: 24px;
+  --magma-rhythm-inset: 24px;
+  --magma-rhythm-between-groups: 40px;
+  --magma-rhythm-between-sections: 64px;
+  --magma-width-reading: 56ch;
+  --magma-width-form: var(--magma-width-reading);
+  --magma-width-page: 1280px;
+  --magma-width-page-gutter: 24px;
+  --magma-width-dialog: calc(var(--magma-width-form) + 2 * var(--magma-rhythm-inset));
+  --magma-container-actions: 23.75rem;
+
   --breakpoint-mobile: 480px;
   --breakpoint-tablet: 768px;
   --breakpoint-desktop: 1024px;

package/dist/css/utility-typography.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer utilities {
   .focus-zoom {
@@ -23,6 +23,9 @@
 .typography-title-h1 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h1, 3rem);
   line-height: var(--tw-leading, var(--text-size-title-h1--line-height, 3rem));
@@ -36,6 +39,9 @@
 .typography-title-h2 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h2, 2.25rem);
   line-height: var(--tw-leading, var(--text-size-title-h2--line-height, 2.5rem));
@@ -49,6 +55,9 @@
 .typography-title-h3 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h3, 1.875rem);
   line-height: var(--tw-leading, var(--text-size-title-h3--line-height, 2.25rem));
@@ -62,6 +71,9 @@
 .typography-title-h4 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h4, 1.5rem);
   line-height: var(--tw-leading, var(--text-size-title-h4--line-height, 2rem));
@@ -75,6 +87,9 @@
 .typography-title-h5 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h5, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-title-h5--line-height, 1.75rem));
@@ -88,6 +103,9 @@
 .typography-title-h6 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h6, 1rem);
   line-height: var(--tw-leading, var(--text-size-title-h6--line-height, 1.5rem));
@@ -101,6 +119,9 @@
 .typography-title-action {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-action, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
@@ -110,9 +131,82 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.typography-title-page {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-page, var(--text-size-title-h3, 1.875rem));
+  line-height: var(--tw-leading, var(--text-size-title-page--line-height, var(--text-size-title-h3--line-height, 2.25rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-page--letter-spacing, var(--text-size-title-h3--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-page--font-weight, var(--text-size-title-h3--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-section {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-section, var(--text-size-title-h5, 1.25rem));
+  line-height: var(--tw-leading, var(--text-size-title-section--line-height, var(--text-size-title-h5--line-height, 1.75rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-section--letter-spacing, var(--text-size-title-h5--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-section--font-weight, var(--text-size-title-h5--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-dialog {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-dialog, var(--text-size-title-h5, 1.25rem));
+  line-height: var(--tw-leading, var(--text-size-title-dialog--line-height, var(--text-size-title-h5--line-height, 1.75rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-dialog--letter-spacing, var(--text-size-title-h5--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-dialog--font-weight, var(--text-size-title-h5--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-part {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-part, var(--text-size-title-h6, 1rem));
+  line-height: var(--tw-leading, var(--text-size-title-part--line-height, var(--text-size-title-h6--line-height, 1.5rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-part--letter-spacing, var(--text-size-title-h6--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-part--font-weight, var(--text-size-title-h6--font-weight, 700)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-group {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-group, var(--text-size-title-h6, 1rem));
+  line-height: var(--tw-leading, var(--text-size-title-group--line-height, var(--text-size-title-h6--line-height, 1.5rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-group--letter-spacing, var(--text-size-title-h6--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-group--font-weight, var(--text-size-title-h6--font-weight, 700)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 .typography-info-paragraph {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-paragraph, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height, 2rem));
@@ -123,6 +217,9 @@
 .typography-info-detail {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-detail, 1rem);
   line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
@@ -133,6 +230,9 @@
 .typography-info-caption {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-caption, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-info-caption--line-height, 1.25rem));
@@ -143,6 +243,9 @@
 .typography-info-label {
   min-height: auto;
   text-box: trim-both cap alphabetic;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-label, 0.75rem);
   line-height: var(--tw-leading, var(--text-size-info-label--line-height, 1rem));
@@ -156,6 +259,9 @@
 .typography-info-option {
   min-height: auto;
   text-box: trim-both cap alphabetic;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-option, 0.625rem);
   line-height: var(--tw-leading, var(--text-size-info-option--line-height, 0.625rem));
@@ -170,6 +276,9 @@
 .typography-info-tip {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-tip, 0.75rem);
   line-height: var(--tw-leading, var(--text-size-info-tip--line-height, 1rem));
@@ -180,6 +289,9 @@
 .typography-read-paragraph {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-paragraph, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height, 2rem));
@@ -192,6 +304,9 @@
 .typography-read-detail {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-detail, 1rem);
   line-height: var(--tw-leading, var(--text-size-read-detail--line-height, 1.5rem));
@@ -204,6 +319,9 @@
 .typography-read-caption {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-caption, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-read-caption--line-height, 1.25rem));
@@ -214,6 +332,9 @@
 .typography-code-snippet {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
   font-size: var(--text-size-code-snippet, 1rem);
   line-height: var(--tw-leading, var(--text-size-code-snippet--line-height, 1.5rem));
@@ -224,6 +345,9 @@
 .typography-code-hack {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
   font-size: var(--text-size-code-hack, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-code-hack--line-height, 1.25rem));
@@ -244,7 +368,7 @@
   inherits: false;
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-duration: initial;
       --tw-ease: initial;