/* Generated by scripts/sync-hig-site-css.mjs — do not edit by hand.
   Source: Design System scss/styles.scss (HIG via html[data-style=hig]).
   Regenerate only when asked: npm run sync:pbp-css
*/

@charset "UTF-8";
:root {
  --primary: #6f52b5;
  --primary-hover: #6046a3;
  --on-primary: #ffffff;
  --primary-container: #d8cdf7;
  --primary-container-hover: #cbc0ea;
  --on-primary-container: #2f185f;
  --secondary: #68607f;
  --on-secondary: #ffffff;
  --secondary-container: #e0dce9;
  --secondary-container-hover: #d8ccef;
  --on-secondary-container: #2b2540;
  --tertiary: #9b506c;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffd8e6;
  --on-tertiary-container: #3f001d;
  --background: #f4eef2;
  --surface: #ffffff;
  --on-surface: #1d1b20;
  --surface-variant: #eee8ef;
  --on-surface-variant: #625b66;
  --outline: #8b8490;
  --outline-variant: #d3ccd8;
  --outline-subtle: #e4dfe8;
  --surface-lowest: #ffffff;
  --surface-low: #fbf8fb;
  --surface-low-hover: var(--surface);
  --surface-container: #f2eff4;
  --surface-high: #e8e4ed;
  --surface-highest: #dedbe3;
  --field-fill: var(--surface-lowest);
  --inverse-surface: #1d1b20;
  --inverse-on-surface: #ffffff;
  --error: #be1d24;
  --on-error: #ffffff;
  --nav-background: #f4eef2;
  --nav-hover: #e9dde3;
  --nav-selected: #d9d4f4;
  --nav-selected-hover: #cbc7e8;
  --nav-parent-selected: #e8dde3;
  --nav-parent-selected-hover: #ded4da;
  --state-hover: rgba(29, 27, 32, 0.06);
  --row-hover: rgba(29, 27, 32, 0.035);
  --canvas: var(--background);
  --font: "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-xxl: 48px;
  --radius-full: 9999px;
  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 hsl(var(--shadow-color) / 0.3), 0 1px 3px 1px hsl(var(--shadow-color) / 0.15);
  --elevation-2: 0 1px 2px 0 hsl(var(--shadow-color) / 0.3), 0 2px 6px 2px hsl(var(--shadow-color) / 0.15);
  --elevation-3: 0 4px 8px 3px hsl(var(--shadow-color) / 0.15), 0 1px 3px 0 hsl(var(--shadow-color) / 0.3);
  --shadow-color: 260 12% 30%;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --btn-radius: 999px;
  --icon-button-radius: 999px;
  --fab-radius: 18px;
  --chip-radius: 8px;
  --control-height: 40px;
  --icon-button-size: 40px;
  --primary-state: color-mix(in srgb, var(--primary) 8%, transparent);
  --switch-on: var(--primary);
}

:root[data-theme=dark] {
  --primary: #d8cdf7;
  --primary-hover: #c3b8e0;
  --on-primary: #2f185f;
  --primary-container: #4f3a82;
  --primary-container-hover: #5a458f;
  --on-primary-container: #eee7ff;
  --secondary: #d0c8dd;
  --on-secondary: #332d45;
  --secondary-container: #4a435c;
  --secondary-container-hover: #554e68;
  --on-secondary-container: #eee7f8;
  --tertiary: #ebb8c8;
  --on-tertiary: #572033;
  --tertiary-container: #743349;
  --on-tertiary-container: #ffd8e6;
  --background: #151218;
  --surface: #1d1a22;
  --on-surface: #eee9f0;
  --surface-variant: #4b4650;
  --on-surface-variant: #d1c8d6;
  --outline: #988f9e;
  --outline-variant: #4f4855;
  --outline-subtle: #38343e;
  --surface-lowest: #100d13;
  --surface-low: #24212a;
  --surface-low-hover: var(--surface);
  --surface-container: #24212a;
  --surface-high: #2f2b35;
  --surface-highest: #3a3540;
  --inverse-surface: #eee9f0;
  --inverse-on-surface: #1d1b20;
  --error: #ffb4ab;
  --on-error: #690005;
  --nav-background: #151218;
  --nav-hover: #2a252e;
  --nav-selected: #413a5d;
  --nav-selected-hover: #4b4369;
  --nav-parent-selected: #332c36;
  --nav-parent-selected-hover: #3f3742;
  --state-hover: rgba(238, 233, 240, 0.08);
  --row-hover: rgba(238, 233, 240, 0.055);
  --canvas: var(--background);
  --shadow-color: 260 18% 4%;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

:root[data-style=hig] {
  --primary: #007aff;
  --primary-hover: #0066d6;
  --on-primary: #ffffff;
  --primary-container: #e5f1ff;
  --primary-container-hover: #d6e8ff;
  --on-primary-container: #003a75;
  --secondary: #5856d6;
  --on-secondary: #ffffff;
  --secondary-container: #ecebff;
  --secondary-container-hover: #e0deff;
  --on-secondary-container: #1c1b4d;
  --tertiary: #af52de;
  --on-tertiary: #ffffff;
  --tertiary-container: #f6e6ff;
  --on-tertiary-container: #3b0a57;
  --background: #f2f2f7;
  --surface: #ffffff;
  --on-surface: #000000;
  --surface-variant: #e5e5ea;
  --on-surface-variant: #6c6c70;
  --outline: #c6c6c8;
  --outline-variant: #e5e5ea;
  --outline-subtle: #f2f2f7;
  --surface-lowest: #ffffff;
  --surface-low: #f2f2f7;
  --surface-low-hover: #ebebf0;
  --surface-container: #ffffff;
  --surface-high: #e5e5ea;
  --surface-highest: #d1d1d6;
  --field-fill: var(--surface-lowest);
  --inverse-surface: #1c1c1e;
  --inverse-on-surface: #ffffff;
  --error: #ff3b30;
  --on-error: #ffffff;
  --nav-background: #f2f2f7;
  --nav-hover: #e5e5ea;
  --nav-selected: #d6e8ff;
  --nav-selected-hover: #c5ddff;
  --nav-parent-selected: #ebebf0;
  --nav-parent-selected-hover: #e0e0e5;
  --state-hover: rgba(0, 0, 0, 0.05);
  --row-hover: rgba(0, 0, 0, 0.03);
  --canvas: var(--background);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --shadow-color: 0 0% 0%;
  --shadow: 0 0.5px 0 rgba(0, 0, 0, 0.08);
  --elevation-0: none;
  --elevation-1: 0 0.5px 0 rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  --elevation-2: 0 8px 28px rgba(0, 0, 0, 0.12);
  --elevation-3: 0 16px 40px rgba(0, 0, 0, 0.16);
  --primary-state: color-mix(in srgb, var(--primary) 10%, transparent);
  --switch-on: #34c759;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 32px;
  --btn-radius: var(--radius-full);
  --icon-button-radius: var(--radius-full);
  --fab-radius: var(--radius-full);
  --chip-radius: var(--radius-full);
  --control-height: 44px;
  --icon-button-size: 40px;
  --hero-card-radius: 28px;
  /* Shape rounded-xl is 28px; HIG remaps --radius-xl to 16px. */
}
:root[data-style=hig] .call-to-action-card .task-list-new-task-card {
  border-radius: 28px;
  padding: 32px;
}
:root[data-style=hig] .static-small-card,
:root[data-style=hig] .portfolio-hero--stacked .task-list-new-task-card {
  border-radius: 28px;
}
:root[data-style=hig] .call-to-action-card.call-to-action-card--medium .task-list-new-task-card {
  padding: 80px;
}
:root[data-style=hig] {
  /* 48px image overlap + 32px inner padding */
}
:root[data-style=hig] .portfolio-hero--stacked:not(.portfolio-hero--text) .portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-card {
  padding: 80px 32px 32px;
}

:root[data-style=hig][data-theme=dark] {
  --primary: #0a84ff;
  --primary-hover: #409cff;
  --on-primary: #ffffff;
  --primary-container: #0b3a75;
  --primary-container-hover: #124888;
  --on-primary-container: #d6e8ff;
  --secondary: #5e5ce6;
  --on-secondary: #ffffff;
  --secondary-container: #2c2a63;
  --secondary-container-hover: #383575;
  --on-secondary-container: #ecebff;
  --tertiary: #bf5af2;
  --on-tertiary: #ffffff;
  --tertiary-container: #4a1a63;
  --on-tertiary-container: #f6e6ff;
  --background: #000000;
  --surface: #1c1c1e;
  --on-surface: #ffffff;
  --surface-variant: #3a3a3c;
  --on-surface-variant: #98989d;
  --outline: #636366;
  --outline-variant: #3a3a3c;
  --outline-subtle: #2c2c2e;
  --surface-lowest: #000000;
  --surface-low: #1c1c1e;
  --surface-low-hover: #2c2c2e;
  --surface-container: #1c1c1e;
  --surface-high: #2c2c2e;
  --surface-highest: #3a3a3c;
  --inverse-surface: #f2f2f7;
  --inverse-on-surface: #000000;
  --error: #ff453a;
  --on-error: #ffffff;
  --nav-background: #000000;
  --nav-hover: #2c2c2e;
  --nav-selected: #0b3a75;
  --nav-selected-hover: #124888;
  --nav-parent-selected: #2c2c2e;
  --nav-parent-selected-hover: #3a3a3c;
  --state-hover: rgba(255, 255, 255, 0.08);
  --row-hover: rgba(255, 255, 255, 0.05);
  --canvas: var(--background);
  --shadow: 0 0.5px 0 rgba(255, 255, 255, 0.08);
  --elevation-1: 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
  --elevation-2: 0 12px 32px rgba(0, 0, 0, 0.5);
  --elevation-3: 0 20px 48px rgba(0, 0, 0, 0.58);
  --switch-on: #30d158;
}

:root[data-style=fat-hig] {
  --primary: #007aff;
  --primary-hover: #0066d6;
  --on-primary: #ffffff;
  --primary-container: #e5f1ff;
  --primary-container-hover: #d6e8ff;
  --on-primary-container: #003a75;
  --secondary: #5856d6;
  --on-secondary: #ffffff;
  --secondary-container: #ecebff;
  --secondary-container-hover: #e0deff;
  --on-secondary-container: #1c1b4d;
  --tertiary: #af52de;
  --on-tertiary: #ffffff;
  --tertiary-container: #f6e6ff;
  --on-tertiary-container: #3b0a57;
  --background: #f2f2f7;
  --surface: #ffffff;
  --on-surface: #000000;
  --surface-variant: #e5e5ea;
  --on-surface-variant: #6c6c70;
  --outline: #c6c6c8;
  --outline-variant: #e5e5ea;
  --outline-subtle: #f2f2f7;
  --surface-lowest: #ffffff;
  --surface-low: #f2f2f7;
  --surface-low-hover: #ebebf0;
  --surface-container: #ffffff;
  --surface-high: #e5e5ea;
  --surface-highest: #d1d1d6;
  --field-fill: var(--surface-lowest);
  --inverse-surface: #1c1c1e;
  --inverse-on-surface: #ffffff;
  --error: #ff3b30;
  --on-error: #ffffff;
  --nav-background: #f2f2f7;
  --nav-hover: #e5e5ea;
  --nav-selected: #d6e8ff;
  --nav-selected-hover: #c5ddff;
  --nav-parent-selected: #ebebf0;
  --nav-parent-selected-hover: #e0e0e5;
  --state-hover: rgba(0, 0, 0, 0.05);
  --row-hover: rgba(0, 0, 0, 0.03);
  --canvas: var(--background);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --shadow-color: 0 0% 0%;
  --shadow: 0 0.5px 0 rgba(0, 0, 0, 0.08);
  --elevation-0: none;
  --elevation-1: 0 0.5px 0 rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  --elevation-2: 0 8px 28px rgba(0, 0, 0, 0.12);
  --elevation-3: 0 16px 40px rgba(0, 0, 0, 0.16);
  --primary-state: color-mix(in srgb, var(--primary) 10%, transparent);
  --switch-on: #34c759;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-xxl: 48px;
  --btn-radius: var(--radius-full);
  --icon-button-radius: var(--radius-full);
  --fab-radius: var(--radius-full);
  --chip-radius: var(--radius-full);
  --control-height: 52px;
  --icon-button-size: 48px;
  --hero-card-radius: var(--radius-xxl);
}
:root[data-style=fat-hig] .call-to-action-card .task-list-new-task-card {
  border-radius: var(--radius-xxl);
  padding: 48px;
}
:root[data-style=fat-hig] .call-to-action-card.call-to-action-card--medium .task-list-new-task-card {
  padding: 80px;
}
:root[data-style=fat-hig] {
  /* 48px image overlap + 48px inner padding */
}
:root[data-style=fat-hig] .portfolio-hero--stacked:not(.portfolio-hero--text) .portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-card {
  padding: 96px 48px 48px;
}

:root[data-style=fat-hig][data-theme=dark] {
  --primary: #0a84ff;
  --primary-hover: #409cff;
  --on-primary: #ffffff;
  --primary-container: #0b3a75;
  --primary-container-hover: #124888;
  --on-primary-container: #d6e8ff;
  --secondary: #5e5ce6;
  --on-secondary: #ffffff;
  --secondary-container: #2c2a63;
  --secondary-container-hover: #383575;
  --on-secondary-container: #ecebff;
  --tertiary: #bf5af2;
  --on-tertiary: #ffffff;
  --tertiary-container: #4a1a63;
  --on-tertiary-container: #f6e6ff;
  --background: #000000;
  --surface: #1c1c1e;
  --on-surface: #ffffff;
  --surface-variant: #3a3a3c;
  --on-surface-variant: #98989d;
  --outline: #636366;
  --outline-variant: #3a3a3c;
  --outline-subtle: #2c2c2e;
  --surface-lowest: #000000;
  --surface-low: #1c1c1e;
  --surface-low-hover: #2c2c2e;
  --surface-container: #1c1c1e;
  --surface-high: #2c2c2e;
  --surface-highest: #3a3a3c;
  --inverse-surface: #f2f2f7;
  --inverse-on-surface: #000000;
  --error: #ff453a;
  --on-error: #ffffff;
  --nav-background: #000000;
  --nav-hover: #2c2c2e;
  --nav-selected: #0b3a75;
  --nav-selected-hover: #124888;
  --nav-parent-selected: #2c2c2e;
  --nav-parent-selected-hover: #3a3a3c;
  --state-hover: rgba(255, 255, 255, 0.08);
  --row-hover: rgba(255, 255, 255, 0.05);
  --canvas: var(--background);
  --shadow: 0 0.5px 0 rgba(255, 255, 255, 0.08);
  --elevation-1: 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
  --elevation-2: 0 12px 32px rgba(0, 0, 0, 0.5);
  --elevation-3: 0 20px 48px rgba(0, 0, 0, 0.58);
  --switch-on: #30d158;
}

:root[data-style=hig],
:root[data-style=fat-hig] {
  -webkit-font-smoothing: antialiased;
}
:root[data-style=hig] .display-medium,
:root[data-style=hig] .display-small,
:root[data-style=hig] .headline-large,
:root[data-style=hig] .headline-medium,
:root[data-style=hig] .headline-small,
:root[data-style=fat-hig] .display-medium,
:root[data-style=fat-hig] .display-small,
:root[data-style=fat-hig] .headline-large,
:root[data-style=fat-hig] .headline-medium,
:root[data-style=fat-hig] .headline-small {
  font-weight: 700;
}
:root[data-style=hig] .display-large,
:root[data-style=fat-hig] .display-large {
  font-weight: 600;
}
:root[data-style=hig] .portfolio-hook__text,
:root[data-style=fat-hig] .portfolio-hook__text {
  font-weight: 600;
}
:root[data-style=hig] body[data-site-section=design-system],
:root[data-style=fat-hig] body[data-site-section=design-system] {
  --canvas: color-mix(in srgb, var(--background) 97%, black);
  --nav-background: color-mix(in srgb, var(--background) 97%, black);
}
:root[data-style=hig] body[data-site-section=design-system] .brand-text,
:root[data-style=fat-hig] body[data-site-section=design-system] .brand-text {
  font-weight: 600;
}
:root[data-style=hig] body[data-site-section=design-system] .main-card,
:root[data-style=fat-hig] body[data-site-section=design-system] .main-card {
  background: var(--background);
  border: 0;
  border-radius: var(--radius-xxl);
}
:root[data-style=hig] body[data-site-section=design-system] .main-card .content,
:root[data-style=fat-hig] body[data-site-section=design-system] .main-card .content {
  --field-fill: var(--background);
}
:root[data-style=hig] .title-large,
:root[data-style=hig] .title-medium,
:root[data-style=hig] .title-small,
:root[data-style=hig] .label-large,
:root[data-style=hig] .label-medium,
:root[data-style=hig] .label-small,
:root[data-style=fat-hig] .title-large,
:root[data-style=fat-hig] .title-medium,
:root[data-style=fat-hig] .title-small,
:root[data-style=fat-hig] .label-large,
:root[data-style=fat-hig] .label-medium,
:root[data-style=fat-hig] .label-small {
  font-weight: 700;
}
:root[data-style=hig] .call-to-action-card .call-to-action-card__sup,
:root[data-style=fat-hig] .call-to-action-card .call-to-action-card__sup {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.15px;
}
:root[data-style=hig] .portfolio-hero-card:not(.portfolio-hero-card--media):not(.call-to-action-card--primary-container):not(.call-to-action-card--primary):not(.call-to-action-card--on-primary-container):not(.call-to-action-card--secondary):not(.call-to-action-card--secondary-container):not(.call-to-action-card--on-secondary-container):not(.call-to-action-card--tertiary):not(.call-to-action-card--tertiary-container):not(.call-to-action-card--on-tertiary-container):not(.call-to-action-card--error):not(.call-to-action-card--inverse-surface) .task-list-new-task-card,
:root[data-style=hig] .task-list-new-task > .task-list-new-task-card,
:root[data-style=hig] .static-small-card,
:root[data-style=fat-hig] .portfolio-hero-card:not(.portfolio-hero-card--media):not(.call-to-action-card--primary-container):not(.call-to-action-card--primary):not(.call-to-action-card--on-primary-container):not(.call-to-action-card--secondary):not(.call-to-action-card--secondary-container):not(.call-to-action-card--on-secondary-container):not(.call-to-action-card--tertiary):not(.call-to-action-card--tertiary-container):not(.call-to-action-card--on-tertiary-container):not(.call-to-action-card--error):not(.call-to-action-card--inverse-surface) .task-list-new-task-card,
:root[data-style=fat-hig] .task-list-new-task > .task-list-new-task-card,
:root[data-style=fat-hig] .static-small-card {
  background: var(--surface);
  --cta-enabled-fill: var(--surface);
  --field-fill: var(--surface);
}
:root[data-style=hig] .portfolio-feature-grid,
:root[data-style=hig] .home-cta-grid,
:root[data-style=hig] .projects-cta-grid,
:root[data-style=hig] .static-small-cards,
:root[data-style=fat-hig] .portfolio-feature-grid,
:root[data-style=fat-hig] .home-cta-grid,
:root[data-style=fat-hig] .projects-cta-grid,
:root[data-style=fat-hig] .static-small-cards {
  gap: 32px;
}
:root[data-style=hig] .call-to-action-card,
:root[data-style=hig] .portfolio-hero,
:root[data-style=fat-hig] .call-to-action-card,
:root[data-style=fat-hig] .portfolio-hero {
  position: relative;
  transform-origin: center center;
  transition: transform 180ms ease;
}
:root[data-style=hig] .call-to-action-card:hover,
:root[data-style=hig] .portfolio-hero:hover,
:root[data-style=fat-hig] .call-to-action-card:hover,
:root[data-style=fat-hig] .portfolio-hero:hover {
  z-index: 1;
  transform: scale(1.02);
}
:root[data-style=hig] .portfolio-hero:not(.portfolio-hero--stacked) > .call-to-action-card,
:root[data-style=hig] .portfolio-hero:not(.portfolio-hero--stacked) > .call-to-action-card:hover,
:root[data-style=fat-hig] .portfolio-hero:not(.portfolio-hero--stacked) > .call-to-action-card,
:root[data-style=fat-hig] .portfolio-hero:not(.portfolio-hero--stacked) > .call-to-action-card:hover {
  transform: none;
}
:root[data-style=hig] .portfolio-hero:not(.portfolio-hero--stacked),
:root[data-style=fat-hig] .portfolio-hero:not(.portfolio-hero--stacked) {
  gap: 0;
  overflow: hidden;
  border-radius: var(--hero-card-radius);
}
:root[data-style=hig] .portfolio-hero:not(.portfolio-hero--stacked) .portfolio-hero-card--media .task-list-new-task-card,
:root[data-style=fat-hig] .portfolio-hero:not(.portfolio-hero--stacked) .portfolio-hero-card--media .task-list-new-task-card {
  border-radius: var(--hero-card-radius) 0 0 var(--hero-card-radius);
}
:root[data-style=hig] .portfolio-hero:not(.portfolio-hero--stacked) .portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-card,
:root[data-style=fat-hig] .portfolio-hero:not(.portfolio-hero--stacked) .portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-card {
  border-radius: 0 var(--hero-card-radius) var(--hero-card-radius) 0;
}
@media (max-width: 1179px) {
  :root[data-style=hig] .portfolio-hero:not(.portfolio-hero--stacked) .portfolio-hero-card--media .task-list-new-task-card,
  :root[data-style=fat-hig] .portfolio-hero:not(.portfolio-hero--stacked) .portfolio-hero-card--media .task-list-new-task-card {
    border-radius: var(--hero-card-radius) var(--hero-card-radius) 0 0;
  }
  :root[data-style=hig] .portfolio-hero:not(.portfolio-hero--stacked) .portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-card,
  :root[data-style=fat-hig] .portfolio-hero:not(.portfolio-hero--stacked) .portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-card {
    border-radius: 0 0 var(--hero-card-radius) var(--hero-card-radius);
  }
}
:root[data-style=hig] .portfolio-hero-card:not(.portfolio-hero-card--media):not(.call-to-action-card--primary-container):not(.call-to-action-card--primary):not(.call-to-action-card--on-primary-container):not(.call-to-action-card--secondary):not(.call-to-action-card--secondary-container):not(.call-to-action-card--on-secondary-container):not(.call-to-action-card--tertiary):not(.call-to-action-card--tertiary-container):not(.call-to-action-card--on-tertiary-container):not(.call-to-action-card--error):not(.call-to-action-card--inverse-surface) .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--primary-container .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--primary .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--on-primary-container .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--secondary .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--secondary-container .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--on-secondary-container .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--tertiary .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--tertiary-container .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--on-tertiary-container .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--error .task-list-new-task-card:hover,
:root[data-style=hig] .call-to-action-card--inverse-surface .task-list-new-task-card:hover,
:root[data-style=fat-hig] .portfolio-hero-card:not(.portfolio-hero-card--media):not(.call-to-action-card--primary-container):not(.call-to-action-card--primary):not(.call-to-action-card--on-primary-container):not(.call-to-action-card--secondary):not(.call-to-action-card--secondary-container):not(.call-to-action-card--on-secondary-container):not(.call-to-action-card--tertiary):not(.call-to-action-card--tertiary-container):not(.call-to-action-card--on-tertiary-container):not(.call-to-action-card--error):not(.call-to-action-card--inverse-surface) .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--primary-container .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--primary .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--on-primary-container .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--secondary .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--secondary-container .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--on-secondary-container .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--tertiary .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--tertiary-container .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--on-tertiary-container .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--error .task-list-new-task-card:hover,
:root[data-style=fat-hig] .call-to-action-card--inverse-surface .task-list-new-task-card:hover {
  background: var(--cta-enabled-fill);
  --field-fill: var(--cta-enabled-fill);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .call-to-action-card,
  :root[data-style=hig] .portfolio-hero,
  :root[data-style=fat-hig] .call-to-action-card,
  :root[data-style=fat-hig] .portfolio-hero {
    transition: none;
  }
  :root[data-style=hig] .call-to-action-card:hover,
  :root[data-style=hig] .portfolio-hero:hover,
  :root[data-style=fat-hig] .call-to-action-card:hover,
  :root[data-style=fat-hig] .portfolio-hero:hover {
    transform: none;
  }
}
:root[data-style=hig] .btn,
:root[data-style=fat-hig] .btn {
  min-height: var(--control-height);
  border-radius: var(--btn-radius);
  font-weight: 600;
}
:root[data-style=hig] .btn:not(.filled):not(.tonal):not(.elevated):hover,
:root[data-style=hig] .fab:not(.filled):not(.tonal):not(.elevated):hover,
:root[data-style=fat-hig] .btn:not(.filled):not(.tonal):not(.elevated):hover,
:root[data-style=fat-hig] .fab:not(.filled):not(.tonal):not(.elevated):hover {
  background: var(--primary-state);
}
:root[data-style=hig] .btn.small,
:root[data-style=fat-hig] .btn.small {
  min-height: calc(var(--control-height) - 12px);
  border-radius: calc(var(--btn-radius) - 2px);
}
:root[data-style=hig] .btn.icon-only,
:root[data-style=fat-hig] .btn.icon-only {
  box-sizing: border-box;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  min-width: var(--icon-button-size);
  min-height: var(--icon-button-size);
  padding: 0;
  border-radius: 50%;
}
:root[data-style=hig] .btn.icon-only.small,
:root[data-style=fat-hig] .btn.icon-only.small {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
}
:root[data-style=hig] .split-button,
:root[data-style=fat-hig] .split-button {
  border-radius: var(--btn-radius);
  min-height: var(--control-height);
}
:root[data-style=hig] .split-action,
:root[data-style=hig] .split-menu,
:root[data-style=fat-hig] .split-action,
:root[data-style=fat-hig] .split-menu {
  min-height: var(--control-height);
}
:root[data-style=hig] .tab.active,
:root[data-style=fat-hig] .tab.active {
  font-weight: 600;
}
:root[data-style=hig] .btn.large,
:root[data-style=hig] .btn.xlarge,
:root[data-style=hig] .btn.regular,
:root[data-style=hig] .btn.with-icon:not(.small):not(.large):not(.xlarge):not(.compact),
:root[data-style=fat-hig] .btn.large,
:root[data-style=fat-hig] .btn.xlarge,
:root[data-style=fat-hig] .btn.regular,
:root[data-style=fat-hig] .btn.with-icon:not(.small):not(.large):not(.xlarge):not(.compact) {
  min-height: var(--control-height);
  height: auto;
  border-radius: var(--btn-radius);
}
:root[data-style=hig] .icon-button,
:root[data-style=hig] .nav-toggle,
:root[data-style=fat-hig] .icon-button,
:root[data-style=fat-hig] .nav-toggle {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  border-radius: var(--icon-button-radius);
}
:root[data-style=hig] .icon-button:hover,
:root[data-style=fat-hig] .icon-button:hover {
  background: var(--state-hover);
}
:root[data-style=hig] .fab,
:root[data-style=fat-hig] .fab {
  border-radius: var(--fab-radius);
}
:root[data-style=hig] .fab.large,
:root[data-style=fat-hig] .fab.large {
  border-radius: var(--fab-radius);
}
:root[data-style=hig] .chip,
:root[data-style=fat-hig] .chip {
  border-radius: var(--chip-radius);
}
:root[data-style=hig] .menu-surface,
:root[data-style=fat-hig] .menu-surface {
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
}
:root[data-style=hig] .menu-item,
:root[data-style=fat-hig] .menu-item {
  border-radius: var(--radius-md);
}
:root[data-style=hig] .dialog-card,
:root[data-style=fat-hig] .dialog-card {
  box-shadow: var(--elevation-2);
}
:root[data-style=hig] .adaptive-date-picker,
:root[data-style=hig] .adaptive-date-fullscreen-dialog,
:root[data-style=hig] .time-picker-panel,
:root[data-style=hig] .dialog-card,
:root[data-style=hig] .embedded-basic-dialog,
:root[data-style=hig] .embedded-fullscreen-dialog,
:root[data-style=hig] .data-table-card,
:root[data-style=fat-hig] .adaptive-date-picker,
:root[data-style=fat-hig] .adaptive-date-fullscreen-dialog,
:root[data-style=fat-hig] .time-picker-panel,
:root[data-style=fat-hig] .dialog-card,
:root[data-style=fat-hig] .embedded-basic-dialog,
:root[data-style=fat-hig] .embedded-fullscreen-dialog,
:root[data-style=fat-hig] .data-table-card {
  border-radius: 28px;
}
:root[data-style=hig] .navigation-rail-demo,
:root[data-style=fat-hig] .navigation-rail-demo {
  border-radius: 28px;
}
:root[data-style=hig] .material-bottom-sheet,
:root[data-style=fat-hig] .material-bottom-sheet {
  border-radius: 28px 28px 0 0;
}
:root[data-style=hig] .material-side-sheet,
:root[data-style=fat-hig] .material-side-sheet {
  border-radius: 28px 0 0 28px;
}
:root[data-style=hig] .adaptive-fullscreen-dialog,
:root[data-style=hig] .date-picker-backdrop .adaptive-date-fullscreen-dialog,
:root[data-style=fat-hig] .adaptive-fullscreen-dialog,
:root[data-style=fat-hig] .date-picker-backdrop .adaptive-date-fullscreen-dialog {
  border-radius: 28px 28px 0 0;
}
@media (min-width: 600px) {
  :root[data-style=hig] .adaptive-fullscreen-dialog,
  :root[data-style=hig] .date-picker-backdrop .adaptive-date-fullscreen-dialog,
  :root[data-style=fat-hig] .adaptive-fullscreen-dialog,
  :root[data-style=fat-hig] .date-picker-backdrop .adaptive-date-fullscreen-dialog {
    border-radius: 28px;
  }
}
@media (max-width: 599px) {
  :root[data-style=hig] .time-picker-backdrop .time-picker-panel,
  :root[data-style=fat-hig] .time-picker-backdrop .time-picker-panel {
    border-radius: 28px 28px 0 0;
  }
}
:root[data-style=hig] .segmented-control,
:root[data-style=fat-hig] .segmented-control {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-high);
  padding: 2px;
  gap: 2px;
}
:root[data-style=hig] .segment,
:root[data-style=fat-hig] .segment {
  border: 0;
  border-left: 0;
  border-radius: calc(var(--radius-md) - 2px);
  min-height: calc(var(--control-height) - 8px);
}
:root[data-style=hig] .segment.selected,
:root[data-style=hig] .segment[aria-pressed=true],
:root[data-style=fat-hig] .segment.selected,
:root[data-style=fat-hig] .segment[aria-pressed=true] {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: var(--on-surface);
}
:root[data-style=hig] .switch:has(input:checked),
:root[data-style=fat-hig] .switch:has(input:checked) {
  background: var(--switch-on);
}
:root[data-style=hig] .small-app-bar .icon[data-icon=arrow_back],
:root[data-style=hig] .medium-flexible-app-bar .icon[data-icon=arrow_back],
:root[data-style=hig] .large-flexible-app-bar .icon[data-icon=arrow_back],
:root[data-style=fat-hig] .small-app-bar .icon[data-icon=arrow_back],
:root[data-style=fat-hig] .medium-flexible-app-bar .icon[data-icon=arrow_back],
:root[data-style=fat-hig] .large-flexible-app-bar .icon[data-icon=arrow_back] {
  --icon-url: url("../icons/arrow_back_ios_new.svg?v=opsz24-2");
}
:root[data-style=hig] .nav-accordion-icon.closed,
:root[data-style=hig] .nav-accordion-icon.open,
:root[data-style=fat-hig] .nav-accordion-icon.closed,
:root[data-style=fat-hig] .nav-accordion-icon.open {
  --icon-url: url("../icons/keyboard_arrow_down.svg?v=opsz24-2");
}
:root[data-style=hig] .nav-accordion-icon.open,
:root[data-style=fat-hig] .nav-accordion-icon.open {
  transform: rotate(180deg);
}
:root[data-style=hig] .sidebar .nav-link,
:root[data-style=hig] .sidebar .nav-accordion-trigger,
:root[data-style=fat-hig] .sidebar .nav-link,
:root[data-style=fat-hig] .sidebar .nav-accordion-trigger {
  border-radius: var(--radius-sm);
}
:root[data-style=hig] .rail-icon-wrap,
:root[data-style=fat-hig] .rail-icon-wrap {
  box-sizing: border-box;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  min-width: var(--icon-button-size);
  min-height: var(--icon-button-size);
  padding: 0;
  border-radius: 50%;
}
:root[data-style=hig] .rail-badge,
:root[data-style=fat-hig] .rail-badge {
  top: 0;
  right: 0;
}
:root[data-style=hig] .rail-dot,
:root[data-style=fat-hig] .rail-dot {
  top: 2px;
  right: 2px;
}
:root[data-style=hig] .navigation-bar-icon-wrap,
:root[data-style=fat-hig] .navigation-bar-icon-wrap {
  border-radius: var(--radius-md);
}
:root[data-style=hig] .card-link,
:root[data-style=hig] .info-card,
:root[data-style=fat-hig] .card-link,
:root[data-style=fat-hig] .info-card {
  border-color: var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
:root[data-style=hig] .call-to-action-card .btn.icon-only.standard,
:root[data-style=fat-hig] .call-to-action-card .btn.icon-only.standard {
  background: var(--primary);
  color: var(--on-primary);
}
:root[data-style=hig] .call-to-action-card .btn.icon-only.standard:hover,
:root[data-style=fat-hig] .call-to-action-card .btn.icon-only.standard:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
}
:root[data-style=hig] .call-to-action-card--primary .btn.icon-only.standard,
:root[data-style=fat-hig] .call-to-action-card--primary .btn.icon-only.standard {
  background: var(--on-primary);
  color: var(--primary);
}
:root[data-style=hig] .call-to-action-card--primary .btn.icon-only.standard:hover,
:root[data-style=fat-hig] .call-to-action-card--primary .btn.icon-only.standard:hover {
  background: color-mix(in srgb, var(--on-primary) 88%, var(--primary));
  color: var(--primary);
}
:root[data-style=hig] .call-to-action-card--secondary .btn.icon-only.standard,
:root[data-style=fat-hig] .call-to-action-card--secondary .btn.icon-only.standard {
  background: var(--on-secondary);
  color: var(--secondary);
}
:root[data-style=hig] .call-to-action-card--secondary .btn.icon-only.standard:hover,
:root[data-style=fat-hig] .call-to-action-card--secondary .btn.icon-only.standard:hover {
  background: color-mix(in srgb, var(--on-secondary) 88%, var(--secondary));
  color: var(--secondary);
}
:root[data-style=hig] .call-to-action-card--tertiary .btn.icon-only.standard,
:root[data-style=fat-hig] .call-to-action-card--tertiary .btn.icon-only.standard {
  background: var(--on-tertiary);
  color: var(--tertiary);
}
:root[data-style=hig] .call-to-action-card--tertiary .btn.icon-only.standard:hover,
:root[data-style=fat-hig] .call-to-action-card--tertiary .btn.icon-only.standard:hover {
  background: color-mix(in srgb, var(--on-tertiary) 88%, var(--tertiary));
  color: var(--tertiary);
}
:root[data-style=hig] .call-to-action-card--error .btn.icon-only.standard,
:root[data-style=fat-hig] .call-to-action-card--error .btn.icon-only.standard {
  background: var(--on-error);
  color: var(--error);
}
:root[data-style=hig] .call-to-action-card--error .btn.icon-only.standard:hover,
:root[data-style=fat-hig] .call-to-action-card--error .btn.icon-only.standard:hover {
  background: color-mix(in srgb, var(--on-error) 88%, var(--error));
  color: var(--error);
}
:root[data-style=hig] .call-to-action-card--inverse-surface .btn.icon-only.standard,
:root[data-style=fat-hig] .call-to-action-card--inverse-surface .btn.icon-only.standard {
  background: var(--inverse-on-surface);
  color: var(--inverse-surface);
}
:root[data-style=hig] .call-to-action-card--inverse-surface .btn.icon-only.standard:hover,
:root[data-style=fat-hig] .call-to-action-card--inverse-surface .btn.icon-only.standard:hover {
  background: color-mix(in srgb, var(--inverse-on-surface) 88%, var(--inverse-surface));
  color: var(--inverse-surface);
}
:root[data-style=hig] .call-to-action-card .btn.icon-only .icon[data-icon=arrow_forward],
:root[data-style=fat-hig] .call-to-action-card .btn.icon-only .icon[data-icon=arrow_forward] {
  --icon-url: url("../icons/arrow_forward_bold.svg?v=opsz24-2");
}

:root[data-style=hig] .navigation-rail-demo,
:root[data-style=hig] .navigation-rail-demo.rounded-xl,
:root[data-style=hig] body[data-site-section=portfolio] .navigation-rail-demo.sidebar {
  /* Shape rounded-xl is 28px; HIG remaps --radius-xl to 16px. */
  border-radius: 28px;
  padding-left: 8px;
  padding-right: 8px;
  align-items: stretch;
}

:root[data-style=fat-hig] .navigation-rail-demo,
:root[data-style=fat-hig] .navigation-rail-demo.rounded-xl {
  border-radius: 28px;
}

:root[data-style=hig] body[data-site-section=portfolio] .rail-items {
  align-items: stretch;
  width: 100%;
}

:root[data-style=hig] .navigation-rail-demo .rail-item {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 8px 16px;
  border-radius: var(--radius-md);
  transition: background-color 160ms ease, color 160ms ease;
}

:root[data-style=hig] .navigation-rail-demo .rail-icon-wrap + span {
  margin-top: -8px;
}

:root[data-style=hig] .navigation-rail-demo .rail-item:hover {
  background: transparent;
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-rail-demo .rail-item:hover .rail-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-rail-demo .rail-item:focus-visible {
  background: var(--state-hover);
}

:root[data-style=hig] .navigation-rail-demo .rail-item:focus-visible .rail-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-rail-demo .rail-item.active {
  background: transparent;
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-rail-demo .rail-item.active .rail-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-rail-demo .rail-item.active:hover {
  background: transparent;
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-rail-demo .rail-item.active:hover .rail-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-rail-demo .rail-item.active:focus-visible {
  background: var(--state-hover);
}

:root[data-style=hig] .navigation-rail-demo .rail-item.active:focus-visible .rail-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-bar-demo {
  /* Shape rounded-xl is 28px; HIG remaps --radius-xl to 16px. */
  border-radius: 28px;
  padding: 8px 16px;
  gap: 12px;
  align-items: stretch;
  background: var(--surface-container);
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 8px 16px;
  border-radius: var(--radius-md);
  transition: background-color 160ms ease, color 160ms ease;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-icon-wrap {
  box-sizing: border-box;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  min-width: var(--icon-button-size);
  min-height: var(--icon-button-size);
  padding: 0;
  border-radius: 50%;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-icon-wrap + .navigation-bar-label {
  margin-top: -8px;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-badge {
  top: 0;
  right: 0;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-dot {
  top: 2px;
  right: 2px;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item:hover {
  background: transparent;
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item:hover .navigation-bar-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item:hover .icon {
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item:focus-visible {
  background: var(--state-hover);
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item:focus-visible .navigation-bar-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item.active {
  background: transparent;
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item.active .navigation-bar-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item.active .icon {
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item.active:hover {
  background: transparent;
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item.active:hover .navigation-bar-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item.active:focus-visible {
  background: var(--state-hover);
}

:root[data-style=hig] .navigation-bar-demo .navigation-bar-item.active:focus-visible .navigation-bar-icon-wrap {
  background: transparent;
}

:root[data-style=hig] .navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item,
:root[data-style=hig] .navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item .icon {
  color: var(--on-surface-variant);
}

:root[data-style=hig] .navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item:hover,
:root[data-style=hig] .navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item:hover .icon {
  color: var(--on-surface);
}

:root[data-style=hig] .navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item.active,
:root[data-style=hig] .navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item.active .icon {
  color: var(--primary);
}

:root[data-style=hig] .navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item.active:hover,
:root[data-style=hig] .navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item.active:hover .icon {
  color: var(--primary-hover);
}

:root[data-style=fat-hig] .btn {
  padding: 14px 22px;
  font-size: 17px;
}
:root[data-style=fat-hig] .btn.small {
  padding: 8px 16px;
  font-size: 15px;
}
:root[data-style=fat-hig] .btn.compact.with-icon {
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 10px 18px 10px 12px;
}
:root[data-style=fat-hig] .chip {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 15px;
}
:root[data-style=fat-hig] .fab {
  width: 64px;
  height: 64px;
}
:root[data-style=fat-hig] .fab.large {
  width: 96px;
  height: 96px;
}
:root[data-style=fat-hig] .switch {
  width: 60px;
  height: 36px;
}
:root[data-style=fat-hig] .switch .thumb {
  width: 28px;
  height: 28px;
}
:root[data-style=fat-hig] .switch input:checked + .thumb {
  transform: translateX(24px);
}
:root[data-style=fat-hig] .material-input-field__control {
  height: 60px;
  min-height: 60px;
}
:root[data-style=fat-hig] .menu-item {
  min-height: 52px;
}
:root[data-style=fat-hig] .segment {
  min-height: 44px;
  padding-inline: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--canvas);
  color: var(--on-surface);
  font-family: var(--font);
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

a[href],
button:not(:disabled),
summary {
  cursor: pointer;
}

button:disabled,
:disabled,
[aria-disabled=true] {
  cursor: not-allowed;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 500;
  transform: translateY(-120px);
  border-radius: 10px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 10px 16px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--on-primary);
  outline-offset: 2px;
}

.app-shell {
  display: flex;
  min-height: 100dvh;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
}

.top-bar {
  z-index: 50;
  display: flex;
  height: 64px;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--canvas);
}

@media (min-width: 1180px) {
  .top-bar {
    height: 72px;
  }
}
.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 24px;
  color: var(--on-surface);
  text-decoration: none;
}

.brand-logo {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("../images/material-design-logo.svg") center/contain no-repeat;
  mask: url("../images/material-design-logo.svg") center/contain no-repeat;
}

.brand-label {
  display: none;
}

:root:not([data-style]) .brand-label[data-style-label=m3],
:root[data-style=m3] .brand-label[data-style-label=m3] {
  display: inline;
}

:root[data-style=hig] .brand-label[data-style-label=hig],
:root[data-style=fat-hig] .brand-label[data-style-label=fat-hig] {
  display: inline;
}

:root[data-style=hig] body[data-site-section=design-system] .brand-logo,
:root[data-style=fat-hig] body[data-site-section=design-system] .brand-logo {
  width: 26px;
  height: 26px;
  -webkit-mask: url("../images/apple-logo.svg") center/contain no-repeat;
  mask: url("../images/apple-logo.svg") center/contain no-repeat;
}

body[data-site-section=portfolio] .brand {
  color: var(--on-surface);
  gap: 12px;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio] .brand {
    margin-left: 26px;
  }
}
body[data-site-section=portfolio] .brand-text {
  font-weight: 500;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio] .brand-text {
    margin-left: 36px;
  }
}
body[data-site-section=design-system] .brand {
  min-width: 0;
  gap: 12px;
}

body[data-site-section=design-system] .brand-text {
  font-weight: 500;
}

body[data-site-section=portfolio] .brand-logo {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-size: 28px;
  line-height: 28px;
}

.brand-text {
  font-size: 22px;
  line-height: 28px;
}

.top-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.top-bar--with-center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.top-bar__start {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
  justify-self: start;
}

.top-bar__center {
  min-width: 0;
  justify-self: center;
}

.top-bar__end {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}

.top-bar__segmented.segmented-control {
  max-width: 100%;
}

@media (max-width: 1179px) {
  .top-bar__segmented.segmented-control .segment-label {
    display: none;
  }
  .top-bar__segmented.segmented-control .segment {
    min-width: 40px;
    padding-inline: 12px;
  }
}
@media (max-width: 1179px) {
  .top-bar__center .segmented-control {
    display: inline-flex;
    width: auto;
  }
  .top-bar__center .segmented-control .segment {
    flex: 0 0 auto;
  }
}
.icon-button,
.nav-toggle {
  display: inline-flex;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--icon-button-radius);
  background: transparent;
  color: var(--on-surface);
  cursor: pointer;
  text-decoration: none;
}

.icon-button:hover,
.nav-toggle:hover {
  background: var(--state-hover);
}

.nav-toggle.selected {
  background: var(--nav-selected);
  color: var(--primary);
}

.nav-toggle.selected:hover {
  background: var(--nav-selected-hover);
}

.body-shell {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.sidebar {
  display: flex;
  width: 260px;
  min-height: 0;
  flex: 0 0 260px;
  flex-direction: column;
  overflow: hidden;
  background: var(--nav-background);
  padding: 24px 0 24px 16px;
}

body[data-site-section=portfolio] .sidebar {
  padding-top: 0;
}

.sidebar-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--outline-variant) transparent;
}
.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: var(--outline-variant);
}

.sidebar-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 8px;
  padding-right: 12px;
  background: var(--nav-background);
}

.sidebar-footer .nav-section {
  margin-bottom: 0;
}

.nav-section {
  margin-bottom: 32px;
}

.nav-section-title {
  margin: 0 12px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 2px;
}

.nav-link {
  display: block;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--on-surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.nav-link:hover {
  background: var(--nav-hover);
}

.nav-link.active {
  background: var(--nav-selected);
  font-weight: 700;
}

.nav-link.active:hover {
  background: var(--nav-selected-hover);
}

.nav-link.disabled,
.nav-link[aria-disabled=true] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-link.disabled:hover,
.nav-link[aria-disabled=true]:hover {
  background: transparent;
}

.sidebar .nav-link-with-icon {
  display: inline-flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
}

.sidebar .nav-link-with-icon .icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.nav-accordion {
  border-radius: 20px;
}

.nav-accordion-trigger {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 999px;
  padding: 8px 8px 8px 12px;
  color: var(--on-surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  list-style: none;
}

.nav-accordion-trigger::-webkit-details-marker {
  display: none;
}

.nav-accordion-icon {
  flex: 0 0 auto;
  font-size: 24px;
}

.nav-accordion-icon.open,
.nav-accordion[open] .nav-accordion-icon.closed {
  display: none;
}

.nav-accordion[open] .nav-accordion-icon.open {
  display: inline-block;
}

.nav-accordion-trigger:hover {
  background: var(--nav-hover);
}

.nav-accordion-trigger.active {
  background: var(--nav-parent-selected);
  font-weight: 700;
}

.nav-accordion-trigger.active:hover {
  background: var(--nav-parent-selected-hover);
}

.nav-sublist {
  margin-top: 2px;
  padding-left: 16px;
}

.nav-link.nested {
  font-size: 13px;
}

.nav-divider {
  height: 1px;
  margin: 0 12px 32px;
  background: rgba(202, 196, 208, 0.7);
}

.main-wrap {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  padding: 0 24px 24px 4px;
}

.main-card {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: none;
}

.content-layout {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.scroll-column {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.content {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px;
  --field-fill: var(--surface-lowest);
}

.content.with-toc {
  max-width: none;
  padding-left: 56px;
}

.toc-rail {
  width: 224px;
  flex: 0 0 224px;
  overflow-y: auto;
  padding: 120px 16px 40px 0;
}

.toc-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.toc-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc-button {
  width: 100%;
  justify-content: flex-start;
  justify-self: stretch;
  text-align: left;
  text-decoration: none;
}

.toc-button.btn {
  justify-content: flex-start;
}

.icons-toc .toc-list {
  grid-template-columns: repeat(5, 32px);
  gap: 8px;
}

.icons-toc .toc-button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  justify-content: center;
  justify-self: center;
  border-radius: 999px;
  padding: 0;
  text-align: center;
}

.icons-toc .toc-button.btn {
  justify-content: center;
}

.eyebrow {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
}

h2 {
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
}

h3 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

p {
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 24px;
}

code {
  border-radius: 8px;
  background: var(--surface-high);
  padding: 2px 6px;
  font-size: 0.9em;
}

.table-card,
.panel {
  border: 1px solid rgba(29, 27, 32, 0.1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.component-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.component-table th {
  height: 52px;
  border-bottom: 1px solid rgba(29, 27, 32, 0.1);
  background: var(--surface-variant);
  padding: 0 16px;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 700;
}

.component-table td {
  height: 52px;
  border-bottom: 1px solid rgba(29, 27, 32, 0.1);
  padding: 0 16px;
  font-size: 16px;
}

.component-table tbody td:first-child {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: var(--on-surface);
}

.component-table tbody td:not(:first-child) {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--on-surface-variant);
}

.component-table tr:last-child td {
  border-bottom: 0;
}

.component-table tbody tr:hover {
  background: var(--row-hover);
}

.text-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.component-table td:first-child a {
  color: var(--on-surface);
  text-decoration: none;
}

.component-table td:first-child a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-link,
.info-card {
  display: block;
  min-height: 132px;
  border: 1px solid rgba(29, 27, 32, 0.1);
  border-radius: 20px;
  background: rgba(231, 224, 236, 0.55);
  padding: 20px;
  color: var(--on-surface);
  text-decoration: none;
  transition: background 160ms ease;
  cursor: pointer;
}

.card-link:hover {
  background: var(--surface-variant);
}

.card-title {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.section-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.demo-block {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.demo-block[id],
.table-card[id],
.panel[id] {
  scroll-margin-top: 24px;
}

.demo-header {
  margin-bottom: 18px;
}

.demo-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.demo-title-row h2 {
  margin-bottom: 0;
}

.demo-ref-button {
  flex: 0 0 auto;
  color: var(--on-surface-variant);
}

.demo-ref-button.copied {
  color: var(--primary);
}

.demo-header p {
  margin-bottom: 0;
}

.demo-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--btn-radius);
  padding: 10px 16px;
  color: var(--primary);
  background: transparent;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.btn:hover {
  background: var(--primary-state);
}

.btn.filled {
  background: var(--primary);
  color: var(--on-primary);
}

.btn.filled:hover {
  background: var(--primary-hover);
}

.btn.tonal {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.btn.tonal:hover {
  background: var(--primary-container-hover);
}

.btn.outlined {
  border: 1px solid var(--outline);
  background: transparent;
}

.btn.outlined:hover {
  border-color: var(--primary);
  background: var(--primary-state);
}

.btn.elevated {
  background: var(--surface-lowest);
}

.btn.elevated:hover {
  background: var(--surface-low);
}

.btn.standard {
  color: var(--on-surface);
}

.btn.standard:hover {
  background: var(--state-hover);
}

.btn.small {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 13px;
}

.btn.large {
  min-height: 48px;
  padding: 14px 16px;
}

.btn.xlarge {
  min-height: 52px;
  padding: 16px 18px;
}

.btn.with-icon {
  padding-inline-start: 10px;
}

.btn.regular {
  height: 44px;
  min-height: 44px;
  padding: 12px 16px;
}

.btn.compact.with-icon {
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 8px 16px 8px 8px;
}

.btn.with-icon:not(.small):not(.large):not(.xlarge):not(.compact) {
  height: 44px;
  min-height: 44px;
  padding: 10px 16px 10px 10px;
}

.btn.small.with-icon {
  min-height: 32px;
  gap: 4px;
  padding: 4px 14px 4px 6px;
}

.btn.large.with-icon {
  gap: 10px;
  height: 48px;
  min-height: 48px;
  padding: 12px 16px 12px 12px;
}

.btn.xlarge.with-icon {
  gap: 10px;
  padding-inline-start: 16px;
}

.btn.with-icon .icon {
  width: 24px;
  height: 24px;
}

.btn.small.with-icon .icon {
  width: 20px;
  height: 20px;
}

.btn.icon-only {
  width: 40px;
  padding: 0;
}

.btn.icon-only.small {
  width: 32px;
  padding: 0;
}

.btn.icon-only .icon {
  width: 24px;
  height: 24px;
}

.btn.icon-only.small .icon {
  width: 18px;
  height: 18px;
}

.badge-demo-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
}

.badge-sample {
  display: grid;
  min-height: 88px;
  place-items: center;
  gap: 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.material-badge {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--error);
  color: var(--on-error);
  padding: 0 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.material-badge.dot {
  width: 6px;
  min-width: 6px;
  height: 6px;
  padding: 0;
}

.fab {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--fab-radius);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.fab:hover {
  background: var(--primary-state);
}

.fab.filled {
  background: var(--primary);
  color: var(--on-primary);
}

.fab.filled:hover {
  background: var(--primary-hover);
}

.fab.tonal {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.fab.tonal:hover {
  background: var(--primary-container-hover);
}

.fab.outlined {
  border: 1px solid var(--outline);
  background: transparent;
}

.fab.outlined:hover {
  border-color: var(--primary);
  background: var(--primary-state);
}

.fab.elevated {
  background: var(--surface-lowest);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.fab.elevated:hover {
  background: var(--surface-low);
}

.fab.standard {
  color: var(--on-surface);
}

.fab.standard:hover {
  background: var(--state-hover);
}

.fab.large {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-xl);
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .fab:hover,
:root[data-style=m3] .fab:hover {
  box-shadow: 0 4px 8px 3px hsl(var(--shadow-color)/0.3), 0 1px 3px 0 hsl(var(--shadow-color)/0.55);
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .fab.elevated:hover,
:root[data-style=m3] .fab.elevated:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.36);
}

:root[data-style=hig] .fab,
:root[data-style=fat-hig] .fab {
  transform: scale(1);
  transform-origin: center center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 180ms ease;
}

:root[data-style=hig] .fab:hover,
:root[data-style=fat-hig] .fab:hover {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .fab,
  :root[data-style=fat-hig] .fab {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  }
  :root[data-style=hig] .fab:hover,
  :root[data-style=fat-hig] .fab:hover {
    transform: none;
  }
}
.color-page {
  max-width: 960px;
}

.color-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.color-swatch {
  display: grid;
  gap: 8px;
}

.color-chip {
  display: flex;
  min-height: 64px;
  align-items: flex-end;
  border: 1px solid rgba(29, 27, 32, 0.1);
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  font-weight: 700;
}

.color-swatch code {
  width: fit-content;
  background: transparent;
  padding: 0;
  color: var(--on-surface-variant);
}

.data-table-card {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(29, 27, 32, 0.14);
  border-radius: 14px;
  background: var(--surface-container);
}

.data-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: var(--on-surface);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

.data-table caption {
  caption-side: bottom;
  border-top: 1px solid rgba(29, 27, 32, 0.1);
  padding: 12px;
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid rgba(29, 27, 32, 0.1);
  padding: 18px 16px;
  vertical-align: middle;
}

.data-table th {
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 600;
}

.data-table tbody td:first-child {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: var(--on-surface);
}

.data-table tbody td:not(:first-child):not(.task-bank-actions) {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--on-surface-variant);
}

.data-table tbody tr:hover {
  background: var(--row-hover);
}

.data-table tbody tr:last-child td,
.data-table tfoot tr:last-child th,
.data-table tfoot tr:last-child td {
  border-bottom: 0;
}

.data-table tfoot th,
.data-table tfoot td {
  font-weight: 700;
}

.data-table .number {
  text-align: right;
}

.data-table [data-sort-key] {
  cursor: pointer;
  user-select: none;
}

.data-table [data-sort-key] span {
  color: var(--on-surface-variant);
  font-size: 12px;
}

.data-table.compact th,
.data-table.compact td {
  padding-block: 8px;
}

.status-pill {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-high);
  padding: 2px 8px;
  color: var(--on-surface);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.status-pill.stable {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.status-pill.beta {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.icon-grid {
  display: grid;
  width: 100%;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.icon-section-stack {
  display: grid;
  width: 100%;
  gap: 32px;
}

.icon-letter-section {
  display: grid;
  gap: 16px;
  scroll-margin-top: 24px;
}

.icon-letter-section h3 {
  margin: 0;
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}

.icon-card {
  position: relative;
  display: grid;
  min-height: 136px;
  place-items: center;
  gap: 8px;
  border: 1px solid rgba(29, 27, 32, 0.12);
  border-radius: 18px;
  background: var(--surface-container);
  padding: 20px 12px;
  text-align: center;
}

.icon-card > .icon {
  color: var(--primary);
  width: 32px;
  height: 32px;
}

#icons-inventory .icon-card > .icon {
  color: var(--on-surface);
}

.icon-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
}

.icon-copy-button .icon {
  width: 18px;
  height: 18px;
}

.icon-card strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.icon-card code {
  display: none;
}

.shape-page {
  max-width: 960px;
}

.shape-page > h1 {
  margin-bottom: 16px;
}

.shape-section {
  display: grid;
  gap: 16px;
}

.shape-radius-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shape-token {
  display: grid;
  gap: 6px;
}

.shape-radius-sample {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1/1;
  min-height: 160px;
  border: 1px solid rgba(29, 27, 32, 0.1);
  background: var(--primary-container);
}

.shape-token code,
.shape-elevation-item code {
  background: transparent;
  padding: 0;
  color: var(--on-surface);
  font-size: 12px;
}

.shape-token span {
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

.shape-elevation-card {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(29, 27, 32, 0.14);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.shape-elevation-item {
  display: grid;
  gap: 12px;
}

.shape-elevation-sample {
  display: grid;
  min-height: 72px;
  place-items: center;
  border: 1px solid rgba(29, 27, 32, 0.08);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.field span {
  color: var(--on-surface-variant);
}

.input,
.select,
.textarea {
  min-height: 48px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  background: var(--surface-lowest);
  color: var(--on-surface);
  padding: 10px 14px;
}

.textarea {
  min-height: 90px;
  resize: vertical;
}

.material-select-field--compact {
  width: auto;
}

.material-select-field--compact .material-select-field__control {
  display: inline-flex;
  align-items: center;
  height: 40px;
  min-height: 40px;
  width: auto;
  padding-inline: 12px 4px;
}

.material-select-field--compact .material-select-field__trigger {
  position: static;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
}

.material-select-field--compact .material-select-field__content {
  position: static;
  inset: auto;
  top: auto;
  display: inline-flex;
  align-items: center;
  height: auto;
  gap: 4px;
  transform: none;
}

.material-select-field--compact .material-select-field__value {
  flex: 0 0 auto;
  overflow: visible;
}

.material-select-field--compact .material-select-field__trailing {
  flex: 0 0 32px;
  width: 32px;
  min-height: 32px;
}

.material-select-field--compact .material-select-field__menu .menu-item {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding-inline: 12px;
}

.field .material-select-field {
  width: 100%;
}

.material-input-field {
  display: grid;
  width: min(100%, 360px);
  gap: 4px;
}

.material-input-field__control {
  position: relative;
  height: 56px;
  min-height: 56px;
  box-sizing: border-box;
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  background: var(--field-fill);
  padding: 0 8px 0 12px;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.material-input-field__content {
  position: absolute;
  inset-inline-start: 12px;
  inset-inline-end: 8px;
  top: 50%;
  display: flex;
  height: 24px;
  align-items: center;
  gap: 16px;
  transform: translateY(-50%);
}

.material-input-field__leading-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--on-surface-variant);
}

.material-input-field__control input {
  min-width: 0;
  flex: 1 1 auto;
  height: 24px;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--on-surface);
  padding: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.material-input-field__control label {
  position: absolute;
  top: 50%;
  max-width: calc(100% - 24px);
  transform: translateY(-50%);
  color: var(--on-surface-variant);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  pointer-events: none;
  transition: top 160ms ease, transform 160ms ease, font-size 160ms ease, line-height 160ms ease, color 160ms ease, left 160ms ease;
}

.material-input-field:not(.has-leading-icon) .material-input-field__control label {
  left: 16px;
}

.material-input-field.has-leading-icon .material-input-field__control label {
  left: 52px;
}

.material-input-field.filled .material-input-field__control label,
.material-input-field__control:has(input:not(:placeholder-shown)) label {
  top: 0;
  left: 12px;
  padding: 0 4px;
  transform: translateY(-50%);
  background: var(--field-fill);
  font-size: 12px;
  line-height: 16px;
}

.material-input-field__control:hover:not(:focus-within),
.material-input-field.hover-demo:not(.focus-demo) .material-input-field__control {
  border-color: var(--on-surface);
  box-shadow: 0 0 0 1px var(--on-surface);
}

.material-input-field__control:focus-within,
.material-input-field.focus-demo .material-input-field__control {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.material-input-field__control:focus-within label,
.material-input-field.focus-demo .material-input-field__control label {
  color: var(--primary);
}

.material-input-field__trailing {
  display: none;
  flex: 0 0 40px;
  width: 40px;
  min-height: 40px;
}

.material-input-field__control:focus-within .material-input-field__trailing[data-input-clear],
.material-input-field.focus-demo .material-input-field__trailing[data-input-clear],
.material-input-field.filled .material-input-field__trailing[data-input-clear],
.material-input-field__control:has(input:not(:placeholder-shown)) .material-input-field__trailing[data-input-clear] {
  display: inline-flex;
}

.material-input-field.error .material-input-field__trailing[data-input-error] {
  display: inline-flex;
  color: var(--error);
}

.material-input-field.error .material-input-field__error-icon .icon {
  color: var(--error);
}

.material-input-field__supporting {
  padding: 0 16px;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.material-input-field.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.material-input-field.disabled .material-input-field__control {
  border-style: dashed;
}

.material-input-field.disabled .material-input-field__control input,
.material-input-field.disabled .material-input-field__trailing {
  cursor: not-allowed;
}

.material-input-field.error .material-input-field__control {
  border-color: var(--error);
}

.material-input-field.error .material-input-field__control label,
.material-input-field.error .material-input-field__supporting,
.material-input-field.error .material-input-field__leading-icon,
.material-input-field.error .material-input-field__error-icon {
  color: var(--error);
}

.material-input-field.error .material-input-field__control:focus-within,
.material-input-field.error.focus-demo .material-input-field__control {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.material-input-field.error .material-input-field__control:focus-within label,
.material-input-field.error.focus-demo .material-input-field__control label {
  color: var(--error);
}

.material-input-field.error .material-input-field__control:hover:not(:focus-within),
.material-input-field.error.hover-demo:not(.focus-demo) .material-input-field__control {
  border-color: var(--on-surface);
  box-shadow: 0 0 0 1px var(--on-surface);
}

.material-input-field.error .material-input-field__control:hover label,
.material-input-field.error.hover-demo .material-input-field__control label,
.material-input-field.error .material-input-field__control:hover .material-input-field__error-icon,
.material-input-field.error.hover-demo .material-input-field__error-icon {
  color: var(--error);
}

.material-textarea-field {
  display: grid;
  width: min(100%, 360px);
  gap: 4px;
}

.material-textarea-field__control {
  position: relative;
  min-height: 120px;
  box-sizing: border-box;
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  background: var(--field-fill);
  padding: 16px 12px 12px;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.material-textarea-field__control label {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(100% - 24px);
  color: var(--on-surface-variant);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  pointer-events: none;
  transition: top 160ms ease, transform 160ms ease, font-size 160ms ease, line-height 160ms ease, color 160ms ease, left 160ms ease;
}

.material-textarea-field__control textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--on-surface);
  padding: 8px 0 0;
  resize: vertical;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.material-textarea-field.filled .material-textarea-field__control label,
.material-textarea-field__control:focus-within label,
.material-textarea-field__control:has(textarea:not(:placeholder-shown)) label {
  top: 0;
  left: 12px;
  padding: 0 4px;
  transform: translateY(-50%);
  background: var(--field-fill);
  font-size: 12px;
  line-height: 16px;
}

.material-textarea-field--fixed-label .material-textarea-field__control label {
  top: 0;
  left: 12px;
  padding: 0 4px;
  transform: translateY(-50%);
  background: var(--field-fill);
  font-size: 12px;
  line-height: 16px;
}

.material-textarea-field--fixed-label .material-textarea-field__control:focus-within label {
  color: var(--primary);
}

.material-textarea-field__control:hover:not(:focus-within) {
  border-color: var(--on-surface);
  box-shadow: 0 0 0 1px var(--on-surface);
}

.material-textarea-field__control:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.material-textarea-field__control:focus-within label {
  color: var(--primary);
}

.material-textarea-field.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.material-textarea-field.disabled .material-textarea-field__control {
  border-style: dashed;
}

.material-textarea-field.disabled .material-textarea-field__control textarea {
  pointer-events: none;
}

.material-external-input-field {
  display: grid;
  width: min(100%, 360px);
  gap: 4px;
}

.material-external-input-field .field {
  min-width: 0;
  gap: 4px;
}

.material-external-input-field .input {
  min-height: 56px;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  background: var(--field-fill);
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.material-external-input-field .input:hover:not(:disabled),
.material-external-input-field.hover-demo:not(.focus-demo) .input {
  border-color: var(--on-surface);
  box-shadow: 0 0 0 1px var(--on-surface);
}

.material-external-input-field .input:focus,
.material-external-input-field.focus-demo .input {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
  outline: 0;
}

.material-external-input-field.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.material-external-input-field.disabled .input {
  border-style: dashed;
  pointer-events: none;
}

.material-external-input-field.error .input {
  border-color: var(--error);
}

.material-external-input-field.error .material-input-field__supporting {
  color: var(--error);
}

.material-external-input-field.error .input:focus,
.material-external-input-field.error.focus-demo .input {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.material-external-input-field.error .input:hover:not(:disabled),
.material-external-input-field.error.hover-demo:not(.focus-demo) .input {
  border-color: var(--on-surface);
  box-shadow: 0 0 0 1px var(--on-surface);
}

.input-field-demo-stack,
.input-field-state-grid {
  display: grid;
  width: 100%;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

.input-field-demo-stack .material-input-field,
.input-field-demo-stack .material-select-field,
.input-field-demo-stack .material-external-input-field,
.input-field-state-grid .material-input-field,
.input-field-state-grid .material-select-field,
.input-field-state-grid .material-external-input-field {
  width: 100%;
}

.input-field-state-example {
  display: grid;
  width: 100%;
  gap: 8px;
}

.input-field-state-example > span {
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.material-select-field {
  display: grid;
  width: min(100%, 360px);
  gap: 4px;
}

.material-select-field__control {
  position: relative;
  height: 56px;
  min-height: 56px;
  box-sizing: border-box;
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  background: var(--field-fill);
  padding: 0 8px 0 12px;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.material-select-field__trigger {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.material-select-field__content {
  position: absolute;
  inset-inline-start: 12px;
  inset-inline-end: 8px;
  top: 50%;
  display: flex;
  height: 24px;
  align-items: center;
  gap: 16px;
  transform: translateY(-50%);
}

.material-select-field__leading-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--on-surface-variant);
}

.material-select-field__value {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--on-surface);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-select-field__value:empty {
  display: block;
}

.material-select-field:not(.filled) .material-select-field__value {
  visibility: hidden;
}

.material-select-field__label {
  position: absolute;
  top: 50%;
  max-width: calc(100% - 24px);
  transform: translateY(-50%);
  color: var(--on-surface-variant);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  pointer-events: none;
  transition: top 160ms ease, transform 160ms ease, font-size 160ms ease, line-height 160ms ease, color 160ms ease, left 160ms ease;
}

.material-select-field:not(.has-leading-icon) .material-select-field__label {
  left: 16px;
}

.material-select-field.has-leading-icon .material-select-field__label {
  left: 52px;
}

.material-select-field.filled .material-select-field__label {
  top: 0;
  left: 12px;
  padding: 0 4px;
  transform: translateY(-50%);
  background: var(--field-fill);
  font-size: 12px;
  line-height: 16px;
  color: var(--on-surface-variant);
}

.material-select-field__trailing {
  display: inline-flex;
  flex: 0 0 40px;
  width: 40px;
  min-height: 40px;
  pointer-events: none;
}

.material-select-field__control:hover,
.material-select-field.hover-demo .material-select-field__control {
  border-color: var(--on-surface);
  box-shadow: 0 0 0 1px var(--on-surface);
}

.material-select-field__control:has(.material-select-field__trigger:focus-visible),
.material-select-field.focus-demo .material-select-field__control,
.material-select-field.open .material-select-field__control {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.material-select-field__control:has(.material-select-field__trigger:focus-visible) .material-select-field__label,
.material-select-field.focus-demo .material-select-field__label,
.material-select-field.open .material-select-field__label {
  top: 0;
  left: 12px;
  padding: 0 4px;
  transform: translateY(-50%);
  background: var(--field-fill);
  font-size: 12px;
  line-height: 16px;
  color: var(--primary);
}

.material-select-field.filled .material-select-field__control:has(.material-select-field__trigger:focus-visible) .material-select-field__label,
.material-select-field.filled.focus-demo .material-select-field__label,
.material-select-field.filled.open .material-select-field__label {
  color: var(--primary);
}

.material-select-field__menu {
  position: absolute;
  top: calc(100% + 4px);
  bottom: auto;
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-width: max-content;
}

.material-select-field.open-above .material-select-field__menu {
  top: auto;
  bottom: calc(100% + 4px);
}

.material-select-field__menu.menu-surface {
  width: 100%;
  min-width: max-content;
  max-width: none;
}

.material-select-field__menu .menu-item {
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
}

.material-select-field__menu[hidden] {
  display: none;
}

.material-select-field.focus-demo .material-select-field__menu[hidden] {
  display: grid;
}

.material-select-field__supporting {
  padding: 0 16px;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.material-select-field.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.material-select-field.disabled .material-select-field__control {
  border-style: dashed;
}

.material-select-field.disabled .material-select-field__trigger,
.material-select-field.disabled .material-select-field__trailing {
  cursor: not-allowed;
}

.material-select-field.error .material-select-field__control {
  border-color: var(--error);
}

.material-select-field.error .material-select-field__label,
.material-select-field.error .material-select-field__supporting,
.material-select-field.error .material-select-field__leading-icon,
.material-select-field.error .material-select-field__trailing {
  color: var(--error);
}

.material-select-field.error .material-select-field__control:has(.material-select-field__trigger:focus-visible),
.material-select-field.error.focus-demo .material-select-field__control,
.material-select-field.error.open .material-select-field__control {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.material-select-field.error .material-select-field__control:has(.material-select-field__trigger:focus-visible) .material-select-field__label,
.material-select-field.error.focus-demo .material-select-field__label,
.material-select-field.error.open .material-select-field__label {
  color: var(--error);
}

.material-select-field.error .material-select-field__control:hover,
.material-select-field.error.hover-demo .material-select-field__control {
  border-color: var(--on-surface);
  box-shadow: 0 0 0 1px var(--on-surface);
}

.material-select-field.error .material-select-field__control:hover .material-select-field__label,
.material-select-field.error.hover-demo .material-select-field__label,
.material-select-field.error .material-select-field__control:hover .material-select-field__trailing,
.material-select-field.error.hover-demo .material-select-field__trailing {
  color: var(--error);
}

.switch {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 32px;
  align-items: center;
  border-radius: 999px;
  background: var(--outline);
  padding: 4px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch .thumb {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface);
  transition: transform 160ms ease;
}

.switch input:checked + .thumb {
  transform: translateX(20px);
  background: var(--on-primary);
}

.switch:has(input:checked) {
  background: var(--switch-on);
}

.checkbox-list,
.radio-list {
  display: grid;
  width: min(100%, 440px);
  gap: 8px;
}

.checkbox-grid,
.radio-grid {
  display: grid;
  width: 100%;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkbox-field,
.radio-field {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-lg);
  color: var(--on-surface);
  cursor: pointer;
}

.checkbox-control,
.radio-control {
  position: relative;
  display: inline-grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
}

.checkbox-control input,
.radio-control input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.checkbox-state-layer,
.radio-state-layer {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-full);
  transition: background-color 160ms ease, outline-color 160ms ease, transform 120ms ease;
}

.checkbox-icon,
.radio-icon {
  color: var(--on-surface-variant);
}

.checkbox-icon.checked,
.checkbox-icon.indeterminate {
  display: none;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 2px;
  background: var(--primary);
  color: var(--on-primary);
  -webkit-mask: none;
  mask: none;
  position: relative;
}

.checkbox-icon.checked::after,
.checkbox-icon.indeterminate::after {
  content: "";
  position: absolute;
  inset: 1px;
  background-color: var(--on-primary);
  -webkit-mask: var(--icon-url) center/contain no-repeat;
  mask: var(--icon-url) center/contain no-repeat;
}

.checkbox-control input:checked ~ .checkbox-state-layer .checkbox-icon.unchecked,
.checkbox-control input[data-indeterminate] ~ .checkbox-state-layer .checkbox-icon.unchecked,
.checkbox-control input[data-indeterminate] ~ .checkbox-state-layer .checkbox-icon.checked,
.checkbox-control input:indeterminate ~ .checkbox-state-layer .checkbox-icon.unchecked,
.checkbox-control input:indeterminate ~ .checkbox-state-layer .checkbox-icon.checked {
  display: none;
}

.checkbox-control input:checked ~ .checkbox-state-layer .checkbox-icon.checked,
.checkbox-control input[data-indeterminate] ~ .checkbox-state-layer .checkbox-icon.indeterminate,
.checkbox-control input:indeterminate ~ .checkbox-state-layer .checkbox-icon.indeterminate {
  display: inline-grid;
}

.radio-icon.checked {
  display: none;
  color: var(--primary);
}

.radio-control input:checked ~ .radio-state-layer .radio-icon.unchecked {
  display: none;
}

.radio-control input:checked ~ .radio-state-layer .radio-icon.checked {
  display: inline-block;
}

.checkbox-field:hover .checkbox-control input:not(:disabled) ~ .checkbox-state-layer,
.checkbox-field.hover-demo .checkbox-state-layer,
.radio-field:hover .radio-control input:not(:disabled) ~ .radio-state-layer,
.radio-field.hover-demo .radio-state-layer {
  background: var(--state-hover);
}

.checkbox-control input:focus-visible ~ .checkbox-state-layer,
.checkbox-field.focus-demo .checkbox-state-layer,
.radio-control input:focus-visible ~ .radio-state-layer,
.radio-field.focus-demo .radio-state-layer {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.checkbox-control input:active ~ .checkbox-state-layer,
.checkbox-field.pressed-demo .checkbox-state-layer,
.radio-control input:active ~ .radio-state-layer,
.radio-field.pressed-demo .radio-state-layer {
  background: rgba(111, 82, 181, 0.18);
  transform: scale(0.96);
}

.checkbox-copy,
.radio-copy {
  display: grid;
  gap: 2px;
}

.checkbox-label,
.radio-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.checkbox-supporting,
.radio-supporting {
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

.checkbox-field.disabled,
.radio-field.disabled {
  color: rgba(29, 27, 32, 0.38);
  cursor: not-allowed;
}

.checkbox-field.disabled .checkbox-control input,
.radio-field.disabled .radio-control input {
  cursor: not-allowed;
}

.checkbox-field.disabled .checkbox-icon,
.checkbox-field.disabled .checkbox-supporting,
.radio-field.disabled .radio-icon,
.radio-field.disabled .radio-supporting {
  color: rgba(29, 27, 32, 0.38);
}

.chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--chip-radius);
  background: var(--surface-lowest);
  padding: 6px 12px;
  color: var(--on-surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.chip:hover {
  background: var(--state-hover);
}

.chip.selected {
  border-color: transparent;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  outline: none;
  box-shadow: none;
}

.chip.selected:hover {
  background: var(--secondary-container-hover);
}

.chip.selected.filled {
  border-color: transparent;
  background: var(--primary);
  color: var(--on-primary);
  outline: none;
  box-shadow: none;
}

.chip.selected.filled:hover {
  background: var(--primary-hover);
}

.chip.elevated {
  border-color: transparent;
  background: var(--surface-lowest);
  box-shadow: var(--elevation-1);
}

.chip.elevated:hover {
  background: var(--surface-low);
}

.chip.with-icon {
  padding-inline-start: 10px;
}

.chip .icon {
  width: 18px;
  height: 18px;
}

.chip.compound {
  overflow: hidden;
  gap: 0;
  padding: 0;
}

.chip.compound:hover {
  background: var(--surface-lowest);
}

.chip.compound.selected,
.chip.compound.selected.filled {
  border: 0;
  min-height: 34px;
  outline: none;
  box-shadow: none;
}

.chip.compound.selected:hover {
  background: var(--secondary-container);
}

.chip.compound.selected.filled:hover {
  background: var(--primary);
}

.chip.compound.elevated:hover {
  background: var(--surface-lowest);
}

.chip-main,
.chip-action {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.chip-main {
  padding: 6px 10px 6px 12px;
}

.chip-action {
  width: 40px;
  align-self: stretch;
  border-left: 1px solid var(--outline-variant);
  padding: 0;
}

/* Selected tonal/filled compound: container-colored divider, no outer outline */
.chip.compound.selected .chip-action,
.chip.compound.selected.filled .chip-action {
  border-left-color: var(--field-fill, var(--surface-low));
}

.chip.compound.selected .chip-main,
.chip.compound.selected .chip-action,
.chip.compound.selected.filled .chip-main,
.chip.compound.selected.filled .chip-action {
  min-height: 34px;
}

.chip-main:hover,
.chip-action:hover {
  background: var(--state-hover);
}

.chip.compound.selected .chip-main:hover,
.chip.compound.selected .chip-action:hover {
  background: var(--secondary-container-hover);
}

.chip.compound.selected.filled .chip-main:hover,
.chip.compound.selected.filled .chip-action:hover {
  background: var(--primary-hover);
}

.chip.compound.elevated .chip-main:hover,
.chip.compound.elevated .chip-action:hover {
  background: var(--surface-low);
}

.menu-demo-frame {
  display: grid;
  align-items: start;
  gap: 12px;
}

.menu-surface {
  display: grid;
  width: min(100%, 320px);
  min-width: 112px;
  max-width: 320px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-container);
  box-shadow: var(--elevation-1);
  padding: 4px;
}

.menu-surface[hidden] {
  display: none;
}

.menu-surface.vibrant {
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
}

.menu-surface.context {
  position: absolute;
  right: 18px;
  bottom: 18px;
}

.menu-item {
  display: grid;
  min-height: 48px;
  width: 100%;
  grid-template-columns: 24px 8px minmax(0, 1fr) 20px minmax(0, auto);
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 20px;
  padding: 0 8px;
  text-align: left;
  text-decoration: none;
}

.menu-item > :nth-child(2) {
  grid-column: 3;
}

.menu-item > :nth-child(3) {
  grid-column: 5;
}

.menu-item.supporting {
  grid-template-rows: auto auto;
}

.menu-item.supporting .menu-supporting {
  grid-column: 3/span 3;
}

.menu-item:hover,
.menu-item.hover-demo {
  background: var(--state-hover);
}

.menu-item:focus-visible,
.menu-item.focus-demo {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--state-hover);
}

.menu-item:active,
.menu-item.pressed-demo {
  background: var(--surface-high);
}

.menu-surface.vibrant .menu-item:hover {
  background: var(--state-hover);
}

.menu-item .icon {
  color: var(--on-surface-variant);
  width: 20px;
  height: 20px;
}

.menu-surface.vibrant .menu-item .icon {
  color: currentColor;
}

.menu-item kbd,
.menu-trailing {
  color: var(--on-surface-variant);
  font: 500 12px/16px var(--font-mono);
}

.menu-surface.vibrant .menu-item kbd,
.menu-surface.vibrant .menu-trailing {
  color: currentColor;
  opacity: 0.72;
}

.menu-item.disabled {
  color: var(--on-surface-variant);
  cursor: not-allowed;
  opacity: 0.38;
}

.menu-item.disabled:hover {
  background: transparent;
}

.menu-item.disabled .icon,
.menu-item.disabled kbd {
  color: currentColor;
}

.menu-item.danger {
  color: var(--error);
}

.menu-item.selected {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.menu-item.selected:hover,
.menu-item.selected.hover-demo {
  background: var(--secondary-container-hover);
}

.menu-item.selected:focus-visible,
.menu-item.selected.focus-demo {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--secondary-container-hover);
}

.menu-item.selected:active,
.menu-item.selected.pressed-demo {
  background: var(--nav-selected-hover);
}

.menu-surface.dense .menu-item {
  min-height: 40px;
  padding-block: 8px;
}

.menu-surface.dense .menu-label {
  padding-top: 6px;
}

.menu-item:not(.selected) .icon:first-child {
  opacity: 0.88;
}

.menu-item[role=menuitemradio]:not(.selected) .icon,
.menu-item[role=menuitemcheckbox]:not(.selected) .icon {
  opacity: 0;
}

.menu-divider {
  width: calc(100% - 24px);
  border: 0;
  border-top: 1px solid var(--outline-variant);
  margin: 2px 12px;
}

.menu-label {
  display: flex;
  min-height: 32px;
  align-items: center;
  margin: 0;
  padding: 0 12px;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.menu-badge {
  min-width: 32px;
  border-radius: var(--radius-xs);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  padding: 0 8px;
  text-align: center;
}

.menu-supporting {
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

.menu-pair {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}

.submenu-demo {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 4px;
}

.submenu-demo .menu-surface {
  flex: 0 1 280px;
}

.submenu-surface {
  margin-top: 96px;
}

.context-menu-demo {
  position: relative;
  width: min(100%, 520px);
  min-height: 260px;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-low);
  padding: 24px;
}

.context-target {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-lowest);
  padding: 14px 16px;
}

.progress {
  width: 220px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-high);
}

.progress.full-width {
  width: 100%;
}

.progress span {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.slider-field {
  display: grid;
  width: 100%;
  gap: 12px;
  color: var(--on-surface);
}

.slider-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.material-slider {
  position: relative;
  display: grid;
  height: 40px;
  align-items: center;
}

.material-slider input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 40px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}

.slider-track {
  position: relative;
  display: block;
  height: 8px;
  overflow: visible;
  border-radius: 999px;
  background: var(--surface-high);
}

.slider-active-track {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--slider-value, 64%);
  border-radius: inherit;
  background: var(--primary);
}

.slider-active-track::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--primary);
  box-shadow: var(--elevation-1);
  content: "";
  transform: translate(50%, -50%);
}

.material-slider:hover .slider-active-track::after {
  box-shadow: var(--elevation-2);
}

.material-slider input:focus-visible + .slider-track .slider-active-track::after {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.material-list-preview {
  display: grid;
  width: min(100%, 360px);
  overflow: hidden;
  border-radius: 0;
  background: var(--surface-lowest);
}

.list-component-preview {
  width: 100%;
}

.material-list-item {
  position: relative;
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface);
  padding-inline: 16px;
}

.material-list-item::before {
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-md);
  background: transparent;
  content: "";
  pointer-events: none;
}

.material-list-item > * {
  position: relative;
  z-index: 1;
}

.material-list-item:hover::before {
  background: var(--state-hover);
}

.material-list-item:active::before {
  background: var(--surface-high);
}

.material-list-item:last-child {
  border-bottom: 0;
}

.material-list-item.one-line {
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 8px;
}

.material-list-item.one-line.with-leading-icon {
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 16px;
}

.material-list-item.one-line.with-leading-avatar,
.material-list-item.one-line.with-leading-image {
  column-gap: 16px;
}

.material-list-item.one-line.with-leading-avatar {
  grid-template-columns: 40px minmax(0, 1fr) 24px;
}

.material-list-item.one-line.with-leading-image.image-56 {
  min-height: 72px;
  grid-template-columns: 56px minmax(0, 1fr) 24px;
}

.material-list-item.one-line.with-leading-image.image-64 {
  min-height: 88px;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  padding-block: 12px;
}

.material-list-item.two-line {
  min-height: 72px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: 12px;
  padding-block: 10px;
}

.material-list-item.three-line {
  min-height: 88px;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: start;
  column-gap: 12px;
  padding-block: 10px;
}

.list-leading-icon {
  width: 20px;
  height: 20px;
  color: var(--on-surface-variant);
  font-size: 20px;
  line-height: 20px;
}

.list-avatar {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 0;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.list-image {
  display: inline-grid;
  place-items: center;
  border-radius: 0;
  background: var(--surface-high);
  color: var(--on-surface-variant);
}

.image-56 .list-image {
  width: 56px;
  height: 56px;
}

.image-64 .list-image {
  width: 64px;
  height: 64px;
}

.list-image .icon {
  width: 32px;
  height: 32px;
}

.list-copy {
  display: grid;
  min-width: 0;
}

.list-label {
  overflow: hidden;
  font-size: 16px;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-supporting {
  display: -webkit-box;
  overflow: hidden;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.list-trailing-text {
  color: var(--on-surface);
  font-size: 14px;
  line-height: 20px;
}

.list-checkbox-field {
  min-height: 24px;
  gap: 0;
  border-radius: 0;
}

.list-checkbox-field .checkbox-control {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

.list-checkbox-field .checkbox-state-layer {
  width: 24px;
  height: 24px;
}

.list-trailing-action {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  align-self: start;
  padding: 0;
}

.list-trailing-action .icon {
  width: 20px;
  height: 20px;
}

.list-preview {
  width: min(100%, 360px);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  border-radius: 18px;
  background: var(--surface-lowest);
}

.list-preview li {
  display: grid;
  min-height: 64px;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.avatar {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-weight: 700;
}

.muted {
  color: var(--on-surface-variant);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--outline-variant);
}

.tab {
  position: relative;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--on-surface-variant);
  padding: 12px 18px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease;
}

.tab:hover {
  color: var(--on-surface);
}

.tab.active {
  color: var(--primary);
}

.tab.active:hover {
  color: var(--primary-hover);
}

.tab.active::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
  content: "";
  transition: background-color 160ms ease;
}

.tab.active:hover::after {
  background: var(--primary-hover);
}

.segmented-control {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--outline);
  border-radius: var(--radius-full);
  background: inherit;
}

.segment {
  display: inline-flex;
  min-width: 96px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-left: 1px solid var(--outline);
  background: inherit;
  color: var(--on-surface);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.segment:first-child {
  border-left: 0;
}

.segment:not(.selected):hover {
  background: var(--state-hover);
}

.segment.selected {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.segment.selected:hover {
  background: var(--secondary-container-hover);
}

.segment .icon {
  width: 18px;
  height: 18px;
}

.split-button {
  display: inline-flex;
  gap: 2px;
  min-height: 40px;
  overflow: hidden;
  border-radius: var(--radius-full);
  box-shadow: var(--elevation-0);
}

.split-action,
.split-menu {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.split-action {
  border-radius: 0 4px 4px 0;
  padding: 10px 20px 10px 18px;
}

.split-menu {
  width: 40px;
  border-radius: 4px 0 0 4px;
  padding: 0;
}

.split-action .icon,
.split-menu .icon {
  width: 20px;
  height: 20px;
}

.split-menu .icon {
  transition: transform 160ms ease;
}

.split-button.small {
  min-height: 32px;
}

.split-button.small .split-action,
.split-button.small .split-menu {
  min-height: 32px;
  font-size: 13px;
}

.split-button.small .split-action {
  padding: 6px 16px 6px 14px;
}

.split-button.small .split-menu {
  width: 32px;
}

.split-button.small .icon {
  width: 18px;
  height: 18px;
}

.split-button.open .split-menu {
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}

.split-button.open .split-menu .icon {
  transform: rotate(180deg);
}

.split-button.filled .split-action,
.split-button.filled .split-menu {
  background: var(--primary);
  color: var(--on-primary);
}

.split-button.filled .split-action:hover,
.split-button.filled .split-menu:hover {
  background: var(--primary-hover);
}

.split-button.tonal .split-action,
.split-button.tonal .split-menu {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.split-button.tonal .split-action:hover,
.split-button.tonal .split-menu:hover {
  background: var(--primary-container-hover);
}

.split-button.outlined {
  border: 0;
}

.split-button.outlined .split-action,
.split-button.outlined .split-menu {
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--primary);
}

.split-button.outlined .split-action {
  border-radius: var(--radius-full) 4px 4px var(--radius-full);
}

.split-button.outlined .split-menu {
  border-radius: 4px var(--radius-full) var(--radius-full) 4px;
}

.split-button.outlined.open .split-menu {
  border-radius: var(--radius-full);
}

.split-button.outlined .split-action:hover,
.split-button.outlined .split-menu:hover {
  background: rgba(111, 82, 181, 0.08);
}

.guidance-grid {
  display: grid;
  width: 100%;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guidance-card {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-low);
  padding: 16px;
}

.guidance-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--on-surface);
  font-weight: 500;
}

.guidance-card p {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.32);
  padding: 24px;
}

.dialog-backdrop.open {
  display: grid;
}

.dialog-card {
  width: min(420px, 100%);
  border-radius: var(--radius-xl);
  background: var(--surface-container);
  padding: 24px;
  box-shadow: var(--elevation-1);
}

.drag-handle {
  display: block;
  width: 32px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--outline);
}

.sheet-demo-stack {
  display: grid;
  width: 100%;
  gap: 16px;
}

.sheet-preview-frame {
  display: grid;
  min-height: 360px;
  place-items: center;
  gap: 24px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}

.sheet-preview-frame h3 {
  margin: 0 0 8px;
  color: var(--on-surface);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.sheet-preview-frame p {
  max-width: 420px;
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.sheet-preview-frame.interactive-underlay {
  background: transparent;
}

.sheet-preview-frame.modal-preview {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.24);
}

.bottom-sheet-preview {
  align-items: end;
  justify-items: center;
}

.side-sheet-preview {
  align-items: stretch;
  justify-items: end;
}

.material-bottom-sheet.embedded-bottom-sheet {
  width: min(100%, 560px);
  max-height: none;
  transform: none;
}

.material-side-sheet.embedded-side-sheet {
  width: min(100%, 360px);
  height: 360px;
  transform: none;
}

.embedded-bottom-sheet .bottom-sheet-content,
.embedded-side-sheet .side-sheet-content {
  text-align: left;
}

.sheet-underlay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 430;
  display: grid;
  align-items: end;
  justify-items: stretch;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  padding: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.bottom-sheet-backdrop.open,
.bottom-sheet-backdrop.closing {
  visibility: visible;
  pointer-events: auto;
}

.bottom-sheet-backdrop.open {
  opacity: 1;
}

.bottom-sheet-backdrop.standard {
  background: transparent;
}

.side-sheet-backdrop.standard {
  background: transparent;
}

.bottom-sheet-backdrop.standard.open,
.bottom-sheet-backdrop.standard.closing,
.side-sheet-backdrop.standard.open,
.side-sheet-backdrop.standard.closing {
  pointer-events: none;
}

.bottom-sheet-backdrop.standard .material-bottom-sheet,
.side-sheet-backdrop.standard .material-side-sheet {
  pointer-events: auto;
}

.material-bottom-sheet {
  width: 100%;
  max-height: calc(100dvh - 42px);
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface-container);
  color: var(--on-surface);
  box-shadow: var(--elevation-1);
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.material-bottom-sheet.dragging {
  transition: none;
}

.bottom-sheet-backdrop.open .material-bottom-sheet {
  transform: translateY(0);
}

.bottom-sheet-backdrop.closing .material-bottom-sheet {
  transform: translateY(100%);
}

.material-bottom-sheet .drag-handle {
  position: relative;
  z-index: 2;
  display: grid;
  width: 48px;
  height: 28px;
  margin: 0 auto;
  place-items: center;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.material-bottom-sheet .drag-handle::before {
  display: block;
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: var(--outline-variant);
  content: "";
}

.material-bottom-sheet.dragging .drag-handle {
  cursor: grabbing;
}

.bottom-sheet-header {
  display: grid;
  box-sizing: content-box;
  height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--outline-variant);
  padding: 0 12px;
}

.bottom-sheet-header h3 {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  margin: 0;
  min-height: 40px;
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  text-align: left;
}

.bottom-sheet-header .btn.icon-only {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.bottom-sheet-content {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding: 24px 24px 32px 20px;
}

.bottom-sheet-item {
  position: relative;
  display: grid;
  min-height: 48px;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 18px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--on-surface);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.bottom-sheet-item::before {
  position: absolute;
  inset: 0 -16px 0 -12px;
  border-radius: var(--radius-sm);
  background: transparent;
  content: "";
  transition: background-color 160ms ease;
}

.bottom-sheet-item:hover::before {
  background: var(--state-hover);
}

.bottom-sheet-item > * {
  position: relative;
  z-index: 1;
}

.bottom-sheet-item .icon {
  color: var(--on-surface-variant);
  width: 22px;
  height: 22px;
}

.side-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 430;
  display: grid;
  justify-items: end;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.side-sheet-backdrop.open,
.side-sheet-backdrop.closing {
  visibility: visible;
  pointer-events: auto;
}

.side-sheet-backdrop.open {
  opacity: 1;
}

.side-sheet-backdrop.standard {
  background: transparent;
}

.side-sheet-backdrop.standard.open,
.side-sheet-backdrop.standard.closing {
  pointer-events: none;
}

.material-side-sheet {
  display: grid;
  width: min(100%, 400px);
  height: 100dvh;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: var(--surface-container);
  color: var(--on-surface);
  box-shadow: var(--elevation-1);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.side-sheet-backdrop.open .material-side-sheet {
  transform: translateX(0);
}

.side-sheet-backdrop.closing .material-side-sheet {
  transform: translateX(100%);
}

.side-sheet-header {
  display: grid;
  box-sizing: content-box;
  height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--outline-variant);
  padding: 0 12px;
}

.side-sheet-header h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  text-align: left;
}

.side-sheet-header .btn.icon-only {
  grid-column: 1;
  grid-row: 1;
}

.side-sheet-content {
  display: grid;
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  padding: 24px;
}

.side-sheet-content .muted {
  margin: 0;
}

.side-sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--outline-variant);
  padding: 16px 24px 24px;
}

.dialog-demo-stack {
  display: grid;
  width: min(100%, 640px);
  gap: 20px;
}

.dialog-demo-stack.full-width {
  width: 100%;
}

.dialog-demo-stack.full-width > .embedded-dialog-frame {
  width: 100%;
}

.dialog-demo-stack > .btn {
  justify-self: center;
}

.embedded-dialog-frame {
  display: grid;
  min-height: 0;
  place-items: start center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.embedded-basic-dialog {
  width: min(100%, 360px);
  border-radius: var(--radius-xl);
  background: var(--surface-container);
  color: var(--on-surface);
  padding: 24px;
  box-shadow: var(--elevation-1);
}

.embedded-basic-dialog h3 {
  margin: 0;
  color: var(--on-surface);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.embedded-basic-dialog p {
  margin: 16px 0 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.embedded-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.fullscreen-preview-frame {
  min-height: 0;
  place-items: start center;
  padding: 0;
}

.embedded-fullscreen-dialog {
  display: grid;
  width: min(100%, 560px);
  height: 360px;
  grid-template-rows: auto 1fr 96px;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: var(--elevation-1);
}

/* Overlay app bars: 12px between leading icon button and title / search field */
.date-fullscreen-bar,
.adaptive-dialog-bar,
.embedded-fullscreen-bar,
.bottom-sheet-header,
.side-sheet-header {
  gap: 12px;
  column-gap: 12px;
}

.date-fullscreen-bar > :is(h2, h3),
.adaptive-dialog-bar > :is(h2, h3),
.embedded-fullscreen-bar > :is(h2, h3),
.bottom-sheet-header > h3,
.side-sheet-header > h3 {
  margin-inline-start: 0;
  padding-inline-start: 0;
}

.embedded-fullscreen-bar,
.embedded-fullscreen-footer {
  display: flex;
  align-items: center;
  background: var(--surface);
}

.embedded-fullscreen-bar {
  box-sizing: content-box;
  height: 64px;
  gap: 12px;
  border-bottom: 1px solid var(--outline-variant);
  padding: 0 12px;
}

.embedded-fullscreen-bar h3 {
  flex: 1 1 auto;
  margin: 0;
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}

.adaptive-dialog-bar .btn.icon-only,
.date-fullscreen-bar .btn.icon-only,
.embedded-fullscreen-bar .btn.icon-only {
  flex-shrink: 0;
}

.embedded-fullscreen-body {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  padding: 24px;
}

.embedded-fullscreen-body .eyebrow {
  margin: 0 0 -4px;
}

.embedded-fullscreen-body h4 {
  margin: 0;
  color: var(--on-surface);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.embedded-fullscreen-body p:not([class*=label-]):not([class*=body-]) {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.embedded-search-fullscreen-dialog {
  grid-template-rows: auto minmax(0, 1fr);
}

.search-fullscreen-bar .search-box {
  width: 100%;
  min-width: 0;
}

.search-fullscreen-body {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  overflow-y: auto;
  padding: 0;
}

.search-fullscreen-dialog .adaptive-dialog-body {
  padding: 64px 0 0;
}

.search-fullscreen-results {
  display: grid;
  width: 100%;
  align-content: start;
  padding: 0;
}

.search-fullscreen-dialog-content-search {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.search-fullscreen-small-app-bar {
  box-sizing: content-box;
  height: 64px;
  grid-template-columns: auto minmax(0, auto) 1fr auto auto auto;
  align-items: center;
  column-gap: 12px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--outline-variant);
}

.search-fullscreen-small-app-bar .small-app-bar-action {
  width: 40px;
  height: 40px;
  padding: 0;
}

.search-fullscreen-small-app-bar h3 {
  margin: 0;
  padding-inline-start: 0;
}

.search-fullscreen-content-body {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface);
}

.search-fullscreen-content-search {
  display: grid;
  padding: 8px 16px 0;
  background: var(--surface);
  --field-fill: var(--surface);
}

.search-fullscreen-content-search .search-box {
  width: 100%;
  min-width: 0;
}

.search-fullscreen-content-scroll {
  min-height: 0;
  overflow-y: auto;
}

.embedded-field-preview {
  display: grid;
  gap: 4px;
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  padding: 10px 14px;
}

.embedded-field-preview span {
  color: var(--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}

.embedded-field-preview strong {
  color: var(--on-surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.embedded-fullscreen-footer {
  position: relative;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 24px;
}

.embedded-fullscreen-footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--outline-variant);
  content: "";
}

.adaptive-dialog-section h3 {
  margin: 0;
  color: var(--on-surface);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.adaptive-dialog-section p {
  margin: 6px 0 0;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.fullscreen-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  align-items: end;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.fullscreen-dialog-backdrop.open,
.fullscreen-dialog-backdrop.closing {
  visibility: visible;
  pointer-events: auto;
}

.fullscreen-dialog-backdrop.open {
  opacity: 1;
}

.adaptive-fullscreen-dialog {
  position: relative;
  width: 100%;
  height: calc(100dvh - 42px);
  max-height: calc(100dvh - 42px);
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface);
  color: var(--on-surface);
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

.fullscreen-dialog-backdrop.open .adaptive-fullscreen-dialog {
  transform: translateY(0);
}

.adaptive-dialog-bar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  box-sizing: content-box;
  height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface);
  padding: 0 12px;
}

.adaptive-dialog-bar h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}

.icon-button {
  display: inline-grid;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  place-items: center;
  border: 0;
  border-radius: var(--icon-button-radius);
  background: transparent;
  color: var(--on-surface);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.icon-button:hover {
  background: var(--state-hover);
}

.adaptive-dialog-body {
  height: 100%;
  overflow-y: auto;
  padding: 88px 24px 124px;
  background: var(--surface);
  color: var(--on-surface);
  scrollbar-gutter: stable;
}

.adaptive-dialog-section {
  display: grid;
  gap: 16px;
}

.adaptive-dialog-section + .adaptive-dialog-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--outline-variant);
}

.adaptive-dialog-section .eyebrow {
  margin: 0 0 -8px;
}

.adaptive-dialog-footer {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 96px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  padding: 16px 24px 24px;
}

.adaptive-dialog-footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--outline-variant);
  content: "";
  opacity: 1;
  transition: opacity 180ms ease;
}

.fullscreen-dialog-backdrop.at-scroll-end .adaptive-dialog-footer::before {
  opacity: 0;
}

.adaptive-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.fullscreen-dialog-settings .adaptive-dialog-body,
.embedded-fullscreen-body:has(.fullscreen-dialog-settings__content) {
  --field-fill: var(--surface);
}

.fullscreen-dialog-settings .adaptive-dialog-body {
  padding-bottom: 84px;
}

.fullscreen-dialog-settings .adaptive-dialog-footer,
.embedded-fullscreen-dialog.fullscreen-dialog-settings .embedded-fullscreen-footer {
  min-height: 80px;
}

.fullscreen-dialog-settings .adaptive-dialog-footer,
.embedded-fullscreen-footer--actions-end {
  justify-content: flex-end;
}

.embedded-fullscreen-dialog.fullscreen-dialog-settings {
  height: 420px;
  grid-template-rows: auto minmax(0, 1fr) 80px;
}

.embedded-fullscreen-dialog.fullscreen-dialog-settings .embedded-fullscreen-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.embedded-fullscreen-dialog.fullscreen-dialog-settings .embedded-fullscreen-bar h3 {
  flex: none;
}

.embedded-fullscreen-dialog.fullscreen-dialog-settings .embedded-fullscreen-body {
  gap: 0;
}

.embedded-fullscreen-dialog.fullscreen-dialog-settings .embedded-fullscreen-footer {
  align-items: flex-start;
}

.fullscreen-dialog-settings__content {
  display: grid;
  gap: 16px;
  max-width: 560px;
}

.fullscreen-dialog-settings__field {
  display: grid;
  gap: 4px;
}

.fullscreen-dialog-settings__field--topic {
  margin-bottom: 8px;
}

.fullscreen-dialog-settings__field--type {
  margin-bottom: 16px;
}

.fullscreen-dialog-settings__bloom {
  margin-bottom: 24px;
}

.fullscreen-dialog-settings__field.tooltip-anchor {
  position: relative;
  width: fit-content;
  max-width: 100%;
  outline: none;
}

.fullscreen-dialog-settings__field.tooltip-anchor .tooltip-bubble {
  position: absolute;
  inset: auto auto calc(100% + 8px) 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.fullscreen-dialog-settings__field.tooltip-anchor:hover .tooltip-bubble,
.fullscreen-dialog-settings__field.tooltip-anchor:focus-visible .tooltip-bubble {
  opacity: 1;
  visibility: visible;
}

.fullscreen-dialog-settings__sup {
  margin: 0;
  color: var(--on-surface-variant);
}

.fullscreen-dialog-settings__body {
  margin: 0;
  color: var(--on-surface);
}

.fullscreen-dialog-settings .material-select-field,
.fullscreen-dialog-settings .material-textarea-field {
  width: 100%;
}

.fullscreen-dialog-settings__notes {
  display: grid;
  gap: 4px;
}

.fullscreen-dialog-settings__notes .material-textarea-field__control {
  padding-top: 8px;
}

.fullscreen-dialog-settings__counter {
  margin: 0;
  justify-self: end;
  color: var(--on-surface-variant);
}

@media (min-width: 600px) {
  .bottom-sheet-backdrop {
    justify-items: center;
  }
  .material-bottom-sheet {
    width: min(100%, 560px);
  }
  .fullscreen-dialog-backdrop {
    place-items: center;
    padding: 24px;
  }
  .adaptive-fullscreen-dialog {
    width: 560px;
    height: 420px;
    max-height: 420px;
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-1);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0, 0, 1);
  }
  .fullscreen-dialog-backdrop.open .adaptive-fullscreen-dialog {
    opacity: 1;
    transform: scale(1);
  }
  .fullscreen-dialog-backdrop.closing .adaptive-fullscreen-dialog {
    opacity: 0;
    transform: scale(0.96);
  }
}
@media (max-width: 599px) {
  .sheet-preview-frame {
    min-height: 320px;
    padding: 0;
  }
  .material-side-sheet {
    width: min(100%, 360px);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }
  .embedded-dialog-frame {
    padding: 0;
  }
  .fullscreen-preview-frame {
    min-height: 0;
    padding: 0;
  }
  .embedded-fullscreen-dialog {
    height: 340px;
  }
  .embedded-fullscreen-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
.top-app-preview {
  width: min(100%, 560px);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
}

.preview-bar {
  display: flex;
  height: 64px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--surface);
}

.preview-body {
  min-height: 120px;
  padding: 20px;
  background: var(--surface-low);
}

.search-app-bar-preview,
.small-app-bar-preview,
.page-app-bar-preview,
.section-app-bar-preview,
.card-app-bar-preview,
.medium-flexible-app-bar-preview,
.large-flexible-app-bar-preview {
  display: grid;
  width: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.search-app-bar {
  display: grid;
  width: 100%;
  height: 64px;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  padding: 0 4px;
  --field-fill: var(--surface);
}

.search-app-bar .search-box.large {
  width: 100%;
  min-width: 0;
  padding: 0 20px;
}

.small-app-bar {
  display: grid;
  width: 100%;
  height: 64px;
  grid-template-columns: 48px minmax(0, auto) 1fr 48px 48px 48px;
  align-items: center;
  column-gap: 0;
  background: var(--surface);
}

.small-app-bar h3 {
  margin: 0;
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  text-align: left;
}

.small-app-bar-action {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 4px;
}

.small-app-bar-action .btn.icon-only {
  width: 40px;
  height: 40px;
  min-height: 40px;
}

.small-app-bar-action .icon {
  width: 24px;
  height: 24px;
}

.app-bar-avatar-button {
  width: 40px;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  border-radius: var(--radius-full);
  padding: 0;
}

.medium-flexible-app-bar {
  display: grid;
  width: 100%;
  height: 120px;
  grid-template-rows: 56px minmax(0, 1fr);
  background: var(--surface);
  padding: 0 0 12px 16px;
}

.medium-flexible-app-bar-actions {
  display: grid;
  height: 48px;
  grid-template-columns: 48px 1fr 48px 48px 48px;
  align-items: center;
  margin-top: 8px;
  margin-inline-start: -16px;
}

.medium-flexible-app-bar h3 {
  align-self: end;
  margin: 0;
  color: var(--on-surface);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  text-align: left;
}

.large-flexible-app-bar {
  display: grid;
  width: 100%;
  height: 128px;
  grid-template-rows: 56px minmax(0, 1fr);
  background: var(--surface);
  padding: 0 0 12px 16px;
}

.large-flexible-app-bar-actions {
  display: grid;
  height: 48px;
  grid-template-columns: 48px 1fr 48px 48px 48px;
  align-items: center;
  margin-top: 8px;
  margin-inline-start: -16px;
}

.large-flexible-app-bar h3 {
  align-self: end;
  margin: 0;
  color: var(--on-surface);
  font-size: 36px;
  font-weight: 400;
  line-height: 44px;
  text-align: left;
}

.search-box {
  display: flex;
  width: min(100%, 520px);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--field-fill);
  padding: 0 16px;
  color: var(--on-surface-variant);
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.search-box:hover,
.search-box.hover-demo {
  border-color: var(--outline);
}

.search-box:focus-within,
.search-box.focus-demo {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
  color: var(--on-surface);
}

.search-box.disabled {
  color: rgba(29, 27, 32, 0.38);
  cursor: not-allowed;
  opacity: 0.72;
}

.search-box.small {
  gap: 8px;
  padding: 0 12px;
}

.search-box.large {
  gap: 12px;
  padding: 0 20px;
}

.search-box.small .icon {
  width: 18px;
  height: 18px;
}

.search-box input {
  min-height: 40px;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--on-surface);
  font: inherit;
}

.search-box input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-box input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.search-box.small input {
  min-height: 32px;
  font-size: 13px;
}

.search-box.large input {
  min-height: 48px;
}

.search-box input::placeholder {
  color: var(--on-surface-variant);
}

.search-clear-button {
  display: none;
  flex: 0 0 auto;
}

.search-box.has-value .search-clear-button {
  display: inline-flex;
}

.search-box.has-value {
  padding-right: 4px;
}

.search-box.small.has-value {
  padding-right: 0;
}

.search-box.large.has-value {
  padding-right: 8px;
}

.search-box.small .search-clear-button {
  width: 32px;
}

.search-box.disabled input,
.search-box.disabled input::placeholder {
  color: currentColor;
  cursor: not-allowed;
}

.search-size-stack {
  display: grid;
  width: 100%;
  gap: 16px;
}

.search-state-grid {
  display: grid;
  width: 100%;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-state-example {
  display: grid;
  gap: 8px;
}

.search-state-example > span {
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.date-picker-demo-stack {
  display: grid;
  width: 100%;
  gap: 20px;
  justify-items: center;
}

.date-picker-preview-frame {
  display: grid;
  width: 100%;
  min-height: 0;
  place-items: start center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.date-picker-preview-frame.compact {
  min-height: 0;
}

.date-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 440;
  display: grid;
  align-items: end;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.date-picker-backdrop.open,
.date-picker-backdrop.closing {
  visibility: visible;
  pointer-events: auto;
}

.date-picker-backdrop.open {
  opacity: 1;
}

.adaptive-date-picker {
  display: grid;
  width: min(100%, 360px);
  min-height: 524px;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  color: var(--on-surface);
  box-shadow: var(--elevation-1);
}

.adaptive-date-picker.year-mode {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.adaptive-date-fullscreen-dialog {
  position: relative;
  display: grid;
  width: min(100%, 560px);
  height: 524px;
  max-height: 524px;
  grid-template-rows: auto minmax(0, 1fr) 72px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: var(--elevation-1);
}

.date-picker-backdrop .adaptive-date-fullscreen-dialog {
  width: 100%;
  height: calc(100dvh - 42px);
  max-height: calc(100dvh - 42px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

.date-picker-backdrop.open .adaptive-date-fullscreen-dialog {
  transform: translateY(0);
}

.date-fullscreen-bar {
  display: grid;
  box-sizing: content-box;
  height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface);
  padding: 0 12px;
}

.date-fullscreen-bar h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}

.date-fullscreen-body {
  min-height: 0;
  overflow-y: auto;
  background: var(--surface);
  padding: 0;
}

.date-fullscreen-footer {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface);
  padding: 12px 24px;
}

.date-picker-calendar {
  display: grid;
  width: 100%;
  min-height: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  margin: 0 auto;
  color: var(--on-surface);
}

.date-picker-calendar-scroll {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.date-picker-sticky-header {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--surface);
}

.date-picker-header {
  display: grid;
  grid-template-rows: 52px 68px;
}

.date-picker-header p {
  align-self: end;
  margin: 0;
  padding: 0 24px 8px;
  color: var(--on-surface);
  font-size: 14px;
  line-height: 20px;
}

.date-picker-headline {
  display: grid;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 0 14px 6px 26px;
}

.date-picker-headline h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 40px;
}

.date-picker-toolbar {
  display: grid;
  min-height: 56px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 16px;
}

.date-picker-select {
  width: fit-content;
  min-height: 40px;
  gap: 4px;
  padding: 8px 12px;
  color: var(--on-surface);
  font-size: 14px;
}

.date-picker-select-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

/* HIG date picker: keep the date on one line. The Today / month / year group wraps together. */
:root[data-style=hig] .date-picker-calendar:not(.date-range-calendar) .date-picker-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
}

:root[data-style=hig] .date-picker-calendar:not(.date-range-calendar) .date-picker-headline h3 {
  flex: 0 0 auto;
  white-space: nowrap;
}

:root[data-style=hig] .date-picker-calendar:not(.date-range-calendar) .date-picker-select-group {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.date-picker-select .icon {
  width: 18px;
  height: 18px;
}

.date-picker-nav-actions {
  display: flex;
  gap: 8px;
}

.date-picker-weekdays {
  display: grid;
  min-height: 48px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  padding: 0;
  color: var(--on-surface);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.date-picker-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(7, minmax(40px, 1fr));
  grid-template-rows: repeat(6, minmax(40px, 1fr));
  align-items: center;
  padding: 0 0 8px;
}

.date-picker-month-list {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
}

.date-picker-month-section h4 {
  margin: 0;
  padding: 12px 26px 4px;
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.date-picker-month-section .date-picker-grid {
  grid-template-rows: repeat(6, 40px);
  padding-bottom: 16px;
}

.date-picker-day-spacer {
  min-height: 40px;
}

.btn.date-picker-day {
  width: 40px;
  height: 40px;
  min-height: 40px;
  place-self: center;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0;
  color: var(--on-surface);
  font-size: 16px;
  line-height: 24px;
}

.btn.date-picker-day:hover {
  background: var(--state-hover);
}
:root[data-style=hig] .date-picker-calendar:not(.date-range-calendar) .btn.date-picker-day {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}
:root[data-style=hig] .date-picker-calendar:not(.date-range-calendar) .btn.date-picker-day:not(.selected):hover {
  background: transparent;
}
:root[data-style=hig] .date-picker-calendar:not(.date-range-calendar) .btn.date-picker-day:not(.selected):hover::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--state-hover);
  content: "";
  transform: translate(-50%, -50%);
}

.btn.date-picker-day.muted {
  color: var(--on-surface-variant);
  opacity: 0.56;
}

.btn.date-picker-day.today,
.btn.date-picker-day.focused {
  outline: 1px solid var(--primary);
  outline-offset: -1px;
}

.btn.date-picker-day.selected,
.btn.date-picker-month.selected {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.btn.date-picker-year.selected {
  background: var(--primary);
  color: var(--on-primary);
}

.btn.date-picker-day.selected:hover,
.btn.date-picker-month.selected:hover {
  background: var(--primary-container-hover);
}

.btn.date-picker-year.selected:hover {
  background: var(--primary-hover);
}

.btn.date-picker-day.in-range {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.btn.date-picker-day.in-range:hover {
  background: var(--secondary-container-hover);
}

.date-range-calendar .date-picker-grid {
  row-gap: 8px;
}

.date-range-calendar .btn.date-picker-day {
  position: relative;
  width: 100%;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.date-range-calendar .btn.date-picker-day:hover {
  background: transparent;
}

:root[data-style=m3] .date-range-calendar .btn.date-picker-day:not(.in-range):not(.selected):not(.focused):hover::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--state-hover);
  content: "";
  transform: translate(-50%, -50%);
}
:root[data-style=hig] .date-picker-calendar.date-range-calendar .btn.date-picker-day:not(.selected):hover {
  background: transparent;
}
:root[data-style=hig] .date-range-calendar .btn.date-picker-day:not(.in-range):not(.selected):not(.focused):hover::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--state-hover);
  content: "";
  transform: translate(-50%, -50%);
}

.date-range-calendar .date-picker-day-label {
  position: relative;
  z-index: 2;
}

.date-range-calendar .btn.date-picker-day.in-range,
.date-range-calendar .btn.date-picker-day.selected {
  color: var(--on-secondary-container);
}

.date-range-calendar .btn.date-picker-day.focused {
  outline: 0;
}

.date-range-calendar .btn.date-picker-day.in-range::before,
.date-range-calendar .btn.date-picker-day.selected::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--state-hover);
  content: "";
}

.date-range-calendar .btn.date-picker-day.in-range:hover::before,
.date-range-calendar .btn.date-picker-day.selected:hover::before {
  background: var(--state-hover);
}

.date-range-calendar .btn.date-picker-day.range-start::before {
  inset-inline-start: 50%;
}

.date-range-calendar .btn.date-picker-day.range-row-end::before,
.date-range-calendar .btn.date-picker-day.range-end::before {
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.date-range-calendar .btn.date-picker-day.range-row-start::before {
  inset-inline-start: calc(50% - 20px);
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}

.date-range-calendar .btn.date-picker-day.range-end::before {
  inset-inline-end: calc(50% - 20px);
}

.date-range-calendar .btn.date-picker-day.range-row-end::before {
  inset-inline-end: calc(50% - 20px);
}

.date-range-calendar .btn.date-picker-day.selected::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary-container);
  content: "";
  transform: translate(-50%, -50%);
}

.date-range-calendar .btn.date-picker-day.focused::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid var(--on-surface);
  border-radius: var(--radius-full);
  content: "";
  transform: translate(-50%, -50%);
}

.date-range-calendar .btn.date-picker-day.in-range:not(.selected):hover::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--state-hover);
  content: "";
  transform: translate(-50%, -50%);
}

.date-range-calendar .btn.date-picker-day.selected {
  color: var(--on-primary-container);
}

.date-picker-year-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 48px;
  align-content: start;
  gap: 0;
  overflow-y: auto;
  padding: 0;
}

.date-picker-year-content {
  display: grid;
  min-height: 100%;
  align-content: start;
}

.btn.date-picker-year {
  width: fit-content;
  height: 40px;
  min-height: 40px;
  justify-self: center;
  padding: 10px 24px;
}

.month-picker-list {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: transparent;
  padding: 0;
}

.month-list-item {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.month-list-item.selected {
  color: var(--on-primary-container);
}

.month-list-item.selected::before {
  background: var(--primary-container);
}

.month-list-item.selected:hover::before {
  background: var(--primary-container-hover);
}

.date-picker-actions {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px;
  border-top: 1px solid var(--outline-variant);
}

@media (min-width: 600px) {
  .date-picker-backdrop {
    place-items: center;
    padding: 24px;
  }
  .date-picker-backdrop .adaptive-date-fullscreen-dialog {
    width: min(100%, 560px);
    height: min(524px, 100dvh - 48px);
    max-height: min(524px, 100dvh - 48px);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-1);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0, 0, 1);
  }
  .date-picker-backdrop.open .adaptive-date-fullscreen-dialog {
    opacity: 1;
    transform: scale(1);
  }
  .date-picker-backdrop.closing .adaptive-date-fullscreen-dialog {
    opacity: 0;
    transform: scale(0.96);
  }
}
@media (max-width: 599px) {
  .date-picker-preview-frame {
    min-height: 0;
    padding: 0;
  }
  .adaptive-date-picker {
    width: min(100%, 360px);
  }
  .date-picker-grid {
    grid-template-columns: repeat(7, minmax(36px, 1fr));
    padding-inline: 0;
  }
  .btn.date-picker-day {
    width: 36px;
    height: 36px;
    min-height: 36px;
    font-size: 14px;
  }
  :root[data-style=hig] .date-picker-calendar:not(.date-range-calendar) .btn.date-picker-day {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  :root[data-style=hig] .date-picker-calendar:not(.date-range-calendar) .btn.date-picker-day:not(.selected):hover::after {
    width: 36px;
    height: 36px;
  }
}
.time-picker-preview-frame {
  display: grid;
  width: 100%;
  place-items: start center;
}

.time-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 440;
  display: grid;
  place-items: center;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  padding: 24px;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.time-picker-backdrop.open,
.time-picker-backdrop.closing {
  visibility: visible;
  pointer-events: auto;
}

.time-picker-backdrop.open {
  opacity: 1;
}

.time-picker-backdrop .time-picker-panel {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.time-picker-backdrop.open .time-picker-panel {
  opacity: 1;
  transform: scale(1);
}

.time-picker-backdrop.closing .time-picker-panel {
  opacity: 0;
  transform: scale(0.96);
}

.time-picker-panel {
  display: grid;
  width: min(100%, 360px);
  min-height: 244px;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  border-radius: var(--radius-xl);
  background: var(--surface-container);
  color: var(--on-surface);
  box-shadow: var(--elevation-1);
  padding: 24px;
}

.time-picker-panel h3 {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.time-picker-input-row {
  display: grid;
  grid-template-columns: 96px 12px 96px 52px;
  align-items: start;
  gap: 24px;
}

.time-picker-field {
  display: grid;
  gap: 8px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.time-picker-field input {
  width: 96px;
  height: 72px;
  border: 0;
  border-radius: var(--radius-md);
  outline: 0;
  background: var(--surface-high);
  color: var(--on-surface);
  font: inherit;
  font-size: 48px;
  font-weight: 400;
  line-height: 56px;
  text-align: center;
}

.time-picker-field.selected input {
  border: 2px solid var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.time-picker-separator {
  display: grid;
  height: 72px;
  place-items: center;
  color: var(--on-surface);
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
}

.time-picker-period {
  display: grid;
  width: 52px;
  height: 72px;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
}

.btn.time-period-button {
  width: 100%;
  min-height: 0;
  border-radius: 0;
  padding: 0;
  color: var(--on-surface-variant);
  font-size: 16px;
  font-weight: 600;
}

.btn.time-period-button + .btn.time-period-button {
  border-top: 1px solid var(--outline);
}

.btn.time-period-button.selected {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.time-picker-actions {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.time-picker-actions > div {
  display: flex;
  gap: 8px;
}

@media (max-width: 599px) {
  .time-picker-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .time-picker-backdrop .time-picker-panel {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
  }
  .time-picker-backdrop.open .time-picker-panel {
    transform: translateY(0);
  }
  .time-picker-panel {
    width: 100%;
    padding: 24px 16px;
  }
  .time-picker-input-row {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 52px;
    gap: 12px;
  }
  .time-picker-field input {
    width: 100%;
    font-size: 44px;
  }
  .search-state-grid {
    grid-template-columns: 1fr;
  }
}
.navigation-bar-demo {
  display: grid;
  width: 100%;
  min-height: 80px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  background: var(--surface);
  padding: 12px 0 16px;
}

.navigation-bar-item {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 4px;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
}

.navigation-bar-icon-wrap {
  position: relative;
  display: grid;
  width: 64px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius-full);
  transition: background-color 160ms ease;
}

.navigation-bar-icon-wrap .icon {
  color: var(--on-surface-variant);
}

.navigation-bar-item:hover .navigation-bar-icon-wrap,
.navigation-bar-item:focus-visible .navigation-bar-icon-wrap {
  background: var(--state-hover);
}

.navigation-bar-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.navigation-bar-item.active {
  color: var(--on-secondary-container);
}

.navigation-bar-item.active .navigation-bar-icon-wrap {
  background: var(--secondary-container);
}

.navigation-bar-item.active:hover .navigation-bar-icon-wrap,
.navigation-bar-item.active:focus-visible .navigation-bar-icon-wrap {
  background: var(--secondary-container-hover);
}

.navigation-bar-item.active .icon {
  color: var(--on-secondary-container);
}

.navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item,
.navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item .icon {
  transition: color 160ms ease;
}

.navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item:hover,
.navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item:hover .icon {
  color: var(--on-surface);
}

.navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item:hover .navigation-bar-icon-wrap {
  background: transparent;
}

.navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item.active:hover,
.navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item.active:hover .icon {
  color: var(--on-surface);
}

.navigation-bar-demo:not(.portfolio-navigation-bar) .navigation-bar-item.active:hover .navigation-bar-icon-wrap {
  background: var(--secondary-container);
}

.navigation-bar-badge {
  position: absolute;
  top: 2px;
  right: 16px;
}

.navigation-bar-dot {
  position: absolute;
  top: 5px;
  right: 20px;
}

.navigation-bar-horizontal-demo {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: repeat(4, max-content);
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--surface);
  padding: 8px 16px;
}

.navigation-bar-horizontal-item {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-full);
  padding: 0 16px 0 12px;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.navigation-bar-horizontal-item:hover,
.navigation-bar-horizontal-item:focus-visible {
  background: var(--state-hover);
}

.navigation-bar-horizontal-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.navigation-bar-horizontal-item.active {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.navigation-bar-horizontal-item.active:hover,
.navigation-bar-horizontal-item.active:focus-visible {
  background: var(--secondary-container-hover);
}

.navigation-bar-horizontal-item .icon {
  width: 24px;
  height: 24px;
}

.navigation-bar-horizontal-icon-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.navigation-bar-horizontal-badge {
  position: absolute;
  top: -8px;
  right: -10px;
}

.navigation-bar-horizontal-dot {
  position: absolute;
  top: -3px;
  right: -4px;
}

.navigation-drawer-demo-frame {
  display: flex;
  width: 100%;
  min-height: 560px;
  align-items: stretch;
  background: var(--surface-low);
}

.navigation-drawer-demo-surface {
  display: flex;
  width: min(304px, 100%);
  min-height: 0;
  flex: 0 0 min(304px, 100%);
  flex-direction: column;
  overflow-y: auto;
  background: var(--nav-background);
  padding: 24px 12px;
}

.navigation-drawer-demo-surface .nav-section:last-child {
  margin-bottom: 0;
}

.navigation-drawer-demo-surface .nav-divider {
  margin-inline: -12px;
}

.navigation-drawer-demo-surface .nav-link-with-icon {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 4px;
  padding-inline: 6px 12px;
}

.navigation-drawer-demo-surface .nav-link-with-icon .icon,
.navigation-drawer-demo-surface .nav-accordion-label-with-icon .icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.navigation-drawer-demo-surface .nav-accordion-trigger-with-icon {
  padding-inline-start: 6px;
}

.navigation-drawer-demo-surface .nav-accordion-label-with-icon {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.navigation-rail-demo {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--radius-xl);
  padding: 16px 12px;
  background: var(--surface-container);
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .navigation-rail-demo:not(.sidebar),
:root[data-style=m3] .navigation-rail-demo:not(.sidebar) {
  position: relative;
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .navigation-rail-demo:not(.sidebar):hover,
:root[data-style=m3] .navigation-rail-demo:not(.sidebar):hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

:root[data-style=hig] .navigation-rail-demo:not(.sidebar),
:root[data-style=fat-hig] .navigation-rail-demo:not(.sidebar),
:root[data-style=hig] .navigation-bar-demo {
  position: relative;
  transform-origin: center center;
  transition: transform 180ms ease;
}

:root[data-style=hig] .navigation-rail-demo:not(.sidebar):hover,
:root[data-style=fat-hig] .navigation-rail-demo:not(.sidebar):hover,
:root[data-style=hig] .navigation-bar-demo:hover {
  z-index: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .navigation-rail-demo:not(.sidebar),
  :root[data-style=fat-hig] .navigation-rail-demo:not(.sidebar),
  :root[data-style=hig] .navigation-bar-demo {
    transition: none;
  }
  :root[data-style=hig] .navigation-rail-demo:not(.sidebar):hover,
  :root[data-style=fat-hig] .navigation-rail-demo:not(.sidebar):hover,
  :root[data-style=hig] .navigation-bar-demo:hover {
    transform: none;
  }
}
.rail-item {
  display: grid;
  min-width: 72px;
  justify-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  padding: 8px 12px;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-decoration: none;
  cursor: pointer;
}

.rail-icon-wrap {
  position: relative;
  display: grid;
  width: 56px;
  min-height: 32px;
  place-items: center;
  border-radius: var(--radius-full);
  padding: 4px 0;
  transition: background-color 160ms ease;
}

.rail-item .icon {
  width: 24px;
  height: 24px;
}

.rail-item:hover .rail-icon-wrap,
.rail-item:focus-visible .rail-icon-wrap {
  background: var(--state-hover);
}

.rail-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.rail-item.active {
  color: var(--on-secondary-container);
}

.rail-item.active .rail-icon-wrap {
  background: var(--secondary-container);
}

.rail-item.active:hover .rail-icon-wrap,
.rail-item.active:focus-visible .rail-icon-wrap {
  background: var(--secondary-container-hover);
}

.rail-badge {
  position: absolute;
  top: 0;
  right: 10px;
}

.rail-dot {
  position: absolute;
  top: 4px;
  right: 14px;
}

.snackbar-demo {
  display: flex;
  width: min(100%, 440px);
  min-height: 48px;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 8px 8px 8px 16px;
  background: var(--on-surface);
  color: var(--surface-lowest);
  box-shadow: var(--elevation-1);
}

.snackbar-demo > span:first-child {
  flex: 1;
  min-width: 0;
}

.snackbar-demo .btn {
  color: var(--primary-container);
}

.toolbar-demo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-full);
  padding: 4px;
  background: var(--surface-container);
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--outline-variant);
}

.divider-preview {
  display: grid;
  width: 100%;
  gap: 8px;
}

.divider-label {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.material-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--outline-variant);
  margin: 0;
}

.tooltip-demo {
  position: relative;
  display: inline-grid;
  justify-items: center;
  gap: 8px;
  padding-block-start: 36px;
}

.tooltip-bubble {
  position: absolute;
  inset-block-start: 0;
  width: max-content;
  max-width: 200px;
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  font-size: 12px;
  line-height: 16px;
  box-shadow: var(--elevation-1);
}

.page-app-bar-preview {
  display: block;
  width: 100%;
  overflow: visible;
  background: var(--surface-lowest);
  --field-fill: var(--surface-lowest);
  border-radius: var(--radius-md);
}

.portfolio-page-app-bar-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
  width: calc(100% + 80px);
  margin-bottom: 24px;
  margin-inline: -40px;
  padding-inline: 40px;
  background: var(--surface-lowest);
}

.portfolio-page-app-bar-sticky:has(+ .portfolio-page-description) {
  margin-bottom: 0;
}

.portfolio-page-app-bar-bar:has(> .portfolio-page-app-bar-action:last-child):not(.task-list-app-bar) {
  padding-right: 8px;
}

.portfolio-page-app-bar-sticky .portfolio-page-app-bar-bar {
  background: var(--surface-lowest);
}

.portfolio-page-app-bar-divider {
  width: auto;
  margin-inline: -40px;
  border-top-color: transparent;
  transition: border-color 160ms ease;
}

.task-bank-page .portfolio-page-app-bar-sticky,
.task-lists-page .portfolio-page-app-bar-sticky,
.task-list-page .portfolio-page-app-bar-sticky,
.projects-page .portfolio-page-app-bar-sticky {
  width: calc(100% + 56px);
  margin-inline: -28px;
  padding-inline: 28px;
}

.task-bank-page .portfolio-page-app-bar-divider,
.task-lists-page .portfolio-page-app-bar-divider,
.task-list-page .portfolio-page-app-bar-divider,
.projects-page .portfolio-page-app-bar-divider {
  margin-inline: -28px;
}

.portfolio-page-app-bar-sticky.is-scrolled .portfolio-page-app-bar-divider {
  border-top-color: var(--outline-variant);
}

.portfolio-page-app-bar-bar {
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
}

.portfolio-page-app-bar-bar h3 {
  padding-left: 4px;
}

.portfolio-page-app-bar-bar > .small-app-bar-action {
  padding-left: 0;
}

.portfolio-page-app-bar-bar:has(> .small-app-bar-action:first-child) > h3,
.portfolio-page-app-bar-bar:has(> .portfolio-page-app-bar-leading) > h3 {
  margin-left: -8px;
}

.portfolio-page-app-bar-leading {
  display: flex;
  align-items: center;
  min-width: 0;
}

.portfolio-page-app-bar-leading > .small-app-bar-action {
  padding-left: 0;
}

.portfolio-page-app-bar-sticky .sandbox-chrome-brand {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--on-surface);
  text-decoration: none;
}

.portfolio-page-app-bar-sticky .sandbox-chrome-brand .icon {
  width: 28px;
  height: 28px;
}

.portfolio-page-app-bar-action {
  display: flex;
  width: auto;
  height: auto;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.portfolio-page-description {
  margin: -6px 0 24px 4px;
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 24px;
}

.task-list-app-bar,
.portfolio-page-app-bar-bar.task-list-app-bar {
  height: auto;
  min-height: 64px;
  grid-template-columns: 48px auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding-block: 4px;
}

.task-list-app-bar h3 {
  padding-left: 0;
}

.task-list-app-bar__trailing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  padding-right: 0;
}

@media (min-width: 1180px) {
  .portfolio-page-app-bar-sticky .portfolio-page-app-bar-bar {
    height: 64px;
    box-sizing: border-box;
    padding-bottom: 0;
  }
  .portfolio-page-app-bar-sticky .portfolio-page-app-bar-bar.task-list-app-bar {
    height: auto;
    min-height: 64px;
    padding-block: 0;
  }
  .portfolio-page-app-bar-bar:has(> .small-app-bar-action:first-child),
  .portfolio-page-app-bar-bar:has(> .portfolio-page-app-bar-leading) {
    --app-bar-bleed-left: 18px;
  }
  .portfolio-page-app-bar-leading {
    width: 48px;
    flex: 0 0 48px;
    justify-content: center;
  }
  .portfolio-page-app-bar-bar:is(:has(> .portfolio-page-app-bar-action:last-child),
  :has(> .task-list-app-bar__trailing:last-child)) {
    --app-bar-bleed-right: 14px;
  }
  .portfolio-page-app-bar-bar:has(> .small-app-bar-action:first-child):is(:has(> .portfolio-page-app-bar-action:last-child),
  :has(> .task-list-app-bar__trailing:last-child)),
  .portfolio-page-app-bar-bar:has(> .portfolio-page-app-bar-leading):is(:has(> .portfolio-page-app-bar-action:last-child),
  :has(> .task-list-app-bar__trailing:last-child)) {
    --app-bar-bleed-right: 24px;
  }
  .portfolio-page-app-bar-bar:where(:has(> .small-app-bar-action:first-child),
  :has(> .portfolio-page-app-bar-leading),
  :has(> .portfolio-page-app-bar-action:last-child),
  :has(> .task-list-app-bar__trailing:last-child)) {
    width: calc(100% + var(--app-bar-bleed-left, 0px) + var(--app-bar-bleed-right, 0px));
    max-width: calc(100% + var(--app-bar-bleed-left, 0px) + var(--app-bar-bleed-right, 0px));
    margin-left: calc(-1 * var(--app-bar-bleed-left, 0px));
    margin-right: calc(-1 * var(--app-bar-bleed-right, 0px));
  }
}
@media (max-width: 1179px) {
  .portfolio-page-app-bar-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 64px;
    padding-block: 0;
  }
  .portfolio-page-app-bar-sticky {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .portfolio-page-app-bar-divider {
    margin-inline: -20px;
  }
  .task-bank-page .portfolio-page-app-bar-sticky,
  .task-lists-page .portfolio-page-app-bar-sticky,
  .task-list-page .portfolio-page-app-bar-sticky,
  .projects-page .portfolio-page-app-bar-sticky {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .task-bank-page .portfolio-page-app-bar-divider,
  .task-lists-page .portfolio-page-app-bar-divider,
  .task-list-page .portfolio-page-app-bar-divider,
  .projects-page .portfolio-page-app-bar-divider {
    margin-inline: -20px;
  }
  .portfolio-page-app-bar-bar h3 {
    grid-column: 1;
    grid-row: 1;
  }
  .portfolio-page-app-bar-bar .small-app-bar-spacer {
    display: none;
  }
  .portfolio-page-app-bar-action {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .portfolio-page-app-bar-bar:has(> .portfolio-page-app-bar-action:last-child) > .portfolio-page-app-bar-action,
  .portfolio-page-app-bar-bar:has(> .task-list-app-bar__trailing:last-child) > .task-list-app-bar__trailing {
    margin-right: 2px;
  }
  .task-list-app-bar,
  .portfolio-page-app-bar-bar.task-list-app-bar {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 8px;
    padding-block: 0;
  }
  .portfolio-page-app-bar-bar.task-list-app-bar > .small-app-bar-action,
  .portfolio-page-app-bar-bar.task-list-app-bar > .portfolio-page-app-bar-leading {
    grid-column: 1;
    grid-row: 1;
  }
  .portfolio-page-app-bar-bar.task-list-app-bar:has(> .portfolio-page-app-bar-leading) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .portfolio-page-app-bar-leading {
    gap: 8px;
  }
  .portfolio-page-app-bar-sticky .sandbox-chrome-brand {
    margin-left: 12px;
  }
  .task-list-app-bar h3 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .task-list-app-bar__trailing {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    padding: 0;
  }
  .portfolio-page-app-bar-bar:has(> .small-app-bar-action:first-child),
  .portfolio-page-app-bar-bar:has(> .portfolio-page-app-bar-leading) {
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    margin-inline: -10px;
  }
  .task-bank-page .portfolio-page-app-bar-bar--title-action,
  .task-lists-page .portfolio-page-app-bar-bar--title-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 8px;
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    height: auto;
    min-height: 64px;
    box-sizing: border-box;
    margin-inline: -10px;
    padding-block: 0;
  }
  .task-bank-page .portfolio-page-app-bar-bar--title-action:has(> .sandbox-chrome-brand),
  .task-lists-page .portfolio-page-app-bar-bar--title-action:has(> .sandbox-chrome-brand) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .task-bank-page .portfolio-page-app-bar-bar--title-action > .sandbox-chrome-brand,
  .task-lists-page .portfolio-page-app-bar-bar--title-action > .sandbox-chrome-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .task-bank-page .portfolio-page-app-bar-bar--title-action h3,
  .task-lists-page .portfolio-page-app-bar-bar--title-action h3 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin-left: 8px;
    padding-left: 0;
  }
  .task-bank-page .portfolio-page-app-bar-bar--title-action:has(> .sandbox-chrome-brand) h3,
  .task-lists-page .portfolio-page-app-bar-bar--title-action:has(> .sandbox-chrome-brand) h3 {
    grid-column: 2;
    margin-left: 0;
  }
  .task-bank-page .portfolio-page-app-bar-bar--title-action .task-list-app-bar__trailing,
  .task-lists-page .portfolio-page-app-bar-bar--title-action .task-list-app-bar__trailing {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    margin-right: 2px;
    padding: 0;
  }
  .task-bank-page .portfolio-page-app-bar-bar--title-action:has(> .sandbox-chrome-brand) .task-list-app-bar__trailing,
  .task-lists-page .portfolio-page-app-bar-bar--title-action:has(> .sandbox-chrome-brand) .task-list-app-bar__trailing {
    grid-column: 3;
  }
}
.demo-block:has(.page-app-bar-preview) {
  overflow: visible;
}

.page-app-bar-preview .portfolio-page-app-bar-sticky {
  position: static;
  z-index: auto;
  width: auto;
  margin-bottom: 0;
  margin-inline: 0;
  padding-inline: 0;
}

.page-app-bar-preview .portfolio-page-app-bar-sticky:has(+ .portfolio-page-description) {
  margin-bottom: 0;
}

.page-app-bar-preview .portfolio-page-app-bar-divider {
  margin-inline: 0;
  border-top-color: var(--outline-variant);
}

.page-app-bar-preview .small-app-bar.portfolio-page-app-bar-bar {
  height: auto;
  min-height: 64px;
  box-sizing: border-box;
}

.page-app-bar-preview .portfolio-page-app-bar-bar {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.page-app-bar-preview .portfolio-page-description {
  margin: 8px 0 0 4px;
  padding-bottom: 4px;
}

@media (min-width: 1180px) {
  .page-app-bar-preview .portfolio-page-app-bar-sticky .portfolio-page-app-bar-bar {
    height: auto;
    min-height: 64px;
  }
  .page-app-bar-preview .portfolio-page-app-bar-sticky .portfolio-page-app-bar-bar.task-list-app-bar {
    padding-block: 4px;
  }
}
:root[data-style=hig] .small-app-bar:not(.search-fullscreen-small-app-bar) h3,
:root[data-style=fat-hig] .small-app-bar:not(.search-fullscreen-small-app-bar) h3 {
  margin: 0;
  padding-left: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-style=hig] .small-app-bar:not(.search-fullscreen-small-app-bar):not(.portfolio-page-app-bar-bar),
:root[data-style=fat-hig] .small-app-bar:not(.search-fullscreen-small-app-bar):not(.portfolio-page-app-bar-bar) {
  position: relative;
  grid-template-columns: 48px 1fr 48px 48px 48px;
}
:root[data-style=hig] .small-app-bar:not(.search-fullscreen-small-app-bar):not(.portfolio-page-app-bar-bar) h3,
:root[data-style=fat-hig] .small-app-bar:not(.search-fullscreen-small-app-bar):not(.portfolio-page-app-bar-bar) h3 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  box-sizing: border-box;
  max-width: calc(100% - 96px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
:root[data-style=hig] .small-app-bar:not(.search-fullscreen-small-app-bar):not(.portfolio-page-app-bar-bar) > .small-app-bar-action,
:root[data-style=fat-hig] .small-app-bar:not(.search-fullscreen-small-app-bar):not(.portfolio-page-app-bar-bar) > .small-app-bar-action {
  position: relative;
  z-index: 1;
}
:root[data-style=hig] .portfolio-page-app-bar-bar,
:root[data-style=fat-hig] .portfolio-page-app-bar-bar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
:root[data-style=hig] .portfolio-page-app-bar-bar:has(> .portfolio-page-app-bar-action:last-child):not(.task-list-app-bar),
:root[data-style=fat-hig] .portfolio-page-app-bar-bar:has(> .portfolio-page-app-bar-action:last-child):not(.task-list-app-bar) {
  padding-right: 0;
}
:root[data-style=hig] .portfolio-page-app-bar-bar > h3,
:root[data-style=fat-hig] .portfolio-page-app-bar-bar > h3 {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  max-width: 100%;
}
:root[data-style=hig] .portfolio-page-app-bar-bar > .small-app-bar-action:first-child,
:root[data-style=hig] .portfolio-page-app-bar-bar > .portfolio-page-app-bar-leading,
:root[data-style=fat-hig] .portfolio-page-app-bar-bar > .small-app-bar-action:first-child,
:root[data-style=fat-hig] .portfolio-page-app-bar-bar > .portfolio-page-app-bar-leading {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
:root[data-style=hig] .portfolio-page-app-bar-bar > .portfolio-page-app-bar-action,
:root[data-style=hig] .portfolio-page-app-bar-bar > .task-list-app-bar__trailing,
:root[data-style=fat-hig] .portfolio-page-app-bar-bar > .portfolio-page-app-bar-action,
:root[data-style=fat-hig] .portfolio-page-app-bar-bar > .task-list-app-bar__trailing {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  justify-self: end;
}
:root[data-style=hig] .portfolio-page-app-bar-bar .small-app-bar-spacer,
:root[data-style=fat-hig] .portfolio-page-app-bar-bar .small-app-bar-spacer {
  display: none;
}
:root[data-style=hig] .page-app-bar-preview .portfolio-page-app-bar-bar,
:root[data-style=hig] .section-app-bar-preview .section-app-bar-bar,
:root[data-style=hig] .card-app-bar-preview .card-app-bar-bar,
:root[data-style=fat-hig] .page-app-bar-preview .portfolio-page-app-bar-bar,
:root[data-style=fat-hig] .section-app-bar-preview .section-app-bar-bar,
:root[data-style=fat-hig] .card-app-bar-preview .card-app-bar-bar {
  container-type: inline-size;
  container-name: ds-app-bar;
}
@container ds-app-bar (max-width: 1179px) {
  :root[data-style=hig] .btn.with-icon,
  :root[data-style=hig] .btn.compact.with-icon,
  :root[data-style=fat-hig] .btn.with-icon,
  :root[data-style=fat-hig] .btn.compact.with-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    min-width: var(--icon-button-size);
    min-height: var(--icon-button-size);
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
  }
  :root[data-style=hig] .btn.with-icon .icon,
  :root[data-style=fat-hig] .btn.with-icon .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
  }
}

.section-app-bar {
  margin-bottom: 16px;
}

.section-app-bar-bar {
  display: grid;
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
  column-gap: 8px;
  padding-block: 4px;
  padding-right: 8px;
  background: transparent;
}

.section-app-bar-title {
  margin: 0;
  padding-left: 4px;
  color: var(--on-surface);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}

.section-app-bar-spacer {
  min-width: 0;
}

.section-app-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  padding-right: 0;
}

@media (min-width: 1180px) {
  .section-app-bar-bar {
    height: auto;
    padding-block: 0;
  }
  .task-list-page .section-app-bar-bar {
    padding-block: 0;
  }
  .section-app-bar-bar:has(> .section-app-bar-actions:last-child) {
    --section-app-bar-bleed-right: 14px;
  }
  .task-list-page .section-app-bar-bar:has(> .section-app-bar-actions:last-child) {
    --section-app-bar-bleed-right: 24px;
  }
  .section-app-bar-bar:where(:has(> .section-app-bar-actions:last-child)) {
    width: calc(100% + var(--section-app-bar-bleed-right, 0px));
    max-width: calc(100% + var(--section-app-bar-bleed-right, 0px));
    margin-right: calc(-1 * var(--section-app-bar-bleed-right, 0px));
  }
}
@media (max-width: 1179px) {
  .section-app-bar-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    min-height: 64px;
    padding-block: 0;
  }
  .section-app-bar-spacer {
    display: none;
  }
  .section-app-bar-title {
    grid-column: 1;
    min-width: 0;
  }
  .section-app-bar-actions {
    grid-column: 2;
  }
}
.section-app-bar-preview {
  display: block;
  width: 100%;
  overflow: visible;
  background: var(--surface-lowest);
  --field-fill: var(--surface-lowest);
  border-radius: var(--radius-md);
}

.section-app-bar-preview .section-app-bar {
  margin-bottom: 0;
  background: var(--surface-lowest);
}

.section-app-bar-preview .section-app-bar-bar {
  height: auto;
  min-height: 64px;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-block: 4px;
}

.demo-block:has(.section-app-bar-preview) {
  overflow: visible;
}

.card-app-bar {
  margin-bottom: 12px;
}

.card-app-bar-bar {
  display: grid;
  width: 100%;
  height: 64px;
  min-height: 64px;
  box-sizing: border-box;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
  column-gap: 8px;
  padding-right: 8px;
  background: transparent;
}

.card-app-bar-title {
  margin: 0;
  color: var(--on-surface);
}

.card-app-bar-spacer {
  min-width: 0;
}

.card-app-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  padding-right: 0;
}

@media (max-width: 1179px) {
  .card-app-bar-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    min-height: 64px;
  }
  .card-app-bar-spacer {
    display: none;
  }
  .card-app-bar-title {
    grid-column: 1;
    min-width: 0;
  }
  .card-app-bar-actions {
    grid-column: 2;
  }
}
.card-app-bar-preview {
  display: block;
  width: 100%;
  overflow: visible;
  background: var(--surface-lowest);
  --field-fill: var(--surface-lowest);
  border-radius: 0;
}

.card-app-bar-preview .card-app-bar {
  margin-bottom: 0;
}

.card-app-bar-preview .card-app-bar-bar {
  height: 64px;
  min-height: 64px;
}

.demo-block:has(.card-app-bar-preview) {
  overflow: visible;
}

.large-9-16-hero-card-demo {
  width: 100%;
  max-width: 100%;
}

.large-9-16-hero-card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 9/16;
  min-width: 0;
  padding: 48px;
  cursor: pointer;
  container-name: large-9-16-hero-card;
  container-type: inline-size;
  background: var(--surface-low);
  --field-fill: var(--surface-low);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.large-9-16-hero-card__image {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  transform: translateY(-50%);
}

.large-9-16-hero-card > :not(.large-9-16-hero-card__image) {
  position: relative;
  z-index: 1;
}

a.large-9-16-hero-card {
  text-decoration: none;
  color: inherit;
}

a.large-9-16-hero-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.large-9-16-hero-card__sup {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
}

.large-9-16-hero-card .display-large {
  margin: 0;
  color: var(--on-surface);
}

@container large-9-16-hero-card (max-width: 480px) {
  .large-9-16-hero-card .display-large {
    font-size: clamp(36px, 6vw, 45px);
    line-height: 52px;
    letter-spacing: 0;
  }
}
.large-9-16-hero-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-9-16-hero-card,
:root[data-style=m3] .large-9-16-hero-card {
  position: relative;
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-9-16-hero-card:hover,
:root[data-style=m3] .large-9-16-hero-card:hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

:root[data-style=hig] .large-9-16-hero-card,
:root[data-style=fat-hig] .large-9-16-hero-card {
  position: relative;
  background: var(--surface);
  --field-fill: var(--surface);
  transform-origin: center center;
  transition: transform 180ms ease;
}

:root[data-style=hig] .large-9-16-hero-card {
  padding: 32px;
  border-radius: var(--hero-card-radius, 28px);
}

:root[data-style=fat-hig] .large-9-16-hero-card {
  padding: 48px;
  border-radius: var(--hero-card-radius, var(--radius-xxl));
}

:root[data-style=hig] .large-9-16-hero-card__sup,
:root[data-style=fat-hig] .large-9-16-hero-card__sup {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.15px;
}

:root[data-style=hig] .large-9-16-hero-card:hover,
:root[data-style=fat-hig] .large-9-16-hero-card:hover {
  z-index: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .large-9-16-hero-card,
  :root[data-style=fat-hig] .large-9-16-hero-card {
    transition: none;
  }
  :root[data-style=hig] .large-9-16-hero-card:hover,
  :root[data-style=fat-hig] .large-9-16-hero-card:hover {
    transform: none;
  }
}
.large-1-1-hero-card-demo {
  width: 100%;
  max-width: 100%;
}

.large-1-1-hero-card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 1/1;
  min-width: 0;
  padding: 48px;
  cursor: pointer;
  container-name: large-1-1-hero-card;
  container-type: inline-size;
  background: var(--surface-low);
  --field-fill: var(--surface-low);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.large-1-1-hero-card__image {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  pointer-events: none;
  object-fit: cover;
  object-position: center;
}

.large-1-1-hero-card > :not(.large-1-1-hero-card__image) {
  position: relative;
  z-index: 1;
}

a.large-1-1-hero-card {
  text-decoration: none;
  color: inherit;
}

a.large-1-1-hero-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.large-1-1-hero-card__sup {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
}

.large-1-1-hero-card .display-large {
  margin: 0;
  color: var(--on-surface);
}

@container large-1-1-hero-card (max-width: 480px) {
  .large-1-1-hero-card .display-large {
    font-size: clamp(36px, 6vw, 45px);
    line-height: 52px;
    letter-spacing: 0;
  }
}
.large-1-1-hero-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-1-1-hero-card,
:root[data-style=m3] .large-1-1-hero-card {
  position: relative;
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-1-1-hero-card:hover,
:root[data-style=m3] .large-1-1-hero-card:hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

:root[data-style=hig] .large-1-1-hero-card,
:root[data-style=fat-hig] .large-1-1-hero-card {
  position: relative;
  background: var(--surface);
  --field-fill: var(--surface);
  transform-origin: center center;
  transition: transform 180ms ease;
}

:root[data-style=hig] .large-1-1-hero-card {
  padding: 32px;
  border-radius: var(--hero-card-radius, 28px);
}

:root[data-style=fat-hig] .large-1-1-hero-card {
  padding: 48px;
  border-radius: var(--hero-card-radius, var(--radius-xxl));
}

:root[data-style=hig] .large-1-1-hero-card__sup,
:root[data-style=fat-hig] .large-1-1-hero-card__sup {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.15px;
}

:root[data-style=hig] .large-1-1-hero-card:hover,
:root[data-style=fat-hig] .large-1-1-hero-card:hover {
  z-index: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .large-1-1-hero-card,
  :root[data-style=fat-hig] .large-1-1-hero-card {
    transition: none;
  }
  :root[data-style=hig] .large-1-1-hero-card:hover,
  :root[data-style=fat-hig] .large-1-1-hero-card:hover {
    transform: none;
  }
}
.large-1-1-hero-card-image-top-left-demo {
  width: 100%;
  max-width: 100%;
}

.large-1-1-hero-card-image-top-left {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 1/1;
  min-width: 0;
  padding: 48px;
  cursor: pointer;
  container-name: large-1-1-hero-card-image-top-left;
  container-type: inline-size;
  anchor-scope: --large-1-1-hero-card-image-top-left-title;
  background: var(--surface-low);
  --field-fill: var(--surface-low);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.large-1-1-hero-card-image-top-left__image {
  position: absolute;
  z-index: 0;
  left: 20%;
  top: 220px;
  top: calc(anchor(--large-1-1-hero-card-image-top-left-title bottom) + 80px);
  width: auto;
  height: 150%;
  max-width: none;
  display: block;
  pointer-events: none;
  border-radius: var(--radius-lg);
}

.large-1-1-hero-card-image-top-left > :not(.large-1-1-hero-card-image-top-left__image) {
  position: relative;
  z-index: 1;
}

a.large-1-1-hero-card-image-top-left {
  text-decoration: none;
  color: inherit;
}

a.large-1-1-hero-card-image-top-left:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.large-1-1-hero-card-image-top-left__sup {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
}

.large-1-1-hero-card-image-top-left .display-large {
  margin: 0;
  color: var(--on-surface);
  anchor-name: --large-1-1-hero-card-image-top-left-title;
}

@container large-1-1-hero-card-image-top-left (max-width: 480px) {
  .large-1-1-hero-card-image-top-left .display-large {
    font-size: clamp(36px, 6vw, 45px);
    line-height: 52px;
    letter-spacing: 0;
  }
}
.large-1-1-hero-card-image-top-left__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-1-1-hero-card-image-top-left,
:root[data-style=m3] .large-1-1-hero-card-image-top-left {
  position: relative;
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-1-1-hero-card-image-top-left:hover,
:root[data-style=m3] .large-1-1-hero-card-image-top-left:hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

:root[data-style=hig] .large-1-1-hero-card-image-top-left,
:root[data-style=fat-hig] .large-1-1-hero-card-image-top-left {
  position: relative;
  background: var(--surface);
  --field-fill: var(--surface);
  transform-origin: center center;
  transition: transform 180ms ease;
}

:root[data-style=hig] .large-1-1-hero-card-image-top-left {
  padding: 32px;
  border-radius: var(--hero-card-radius, 28px);
}

:root[data-style=fat-hig] .large-1-1-hero-card-image-top-left {
  padding: 48px;
  border-radius: var(--hero-card-radius, var(--radius-xxl));
}

:root[data-style=hig] .large-1-1-hero-card-image-top-left__sup,
:root[data-style=fat-hig] .large-1-1-hero-card-image-top-left__sup {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.15px;
}

:root[data-style=hig] .large-1-1-hero-card-image-top-left:hover,
:root[data-style=fat-hig] .large-1-1-hero-card-image-top-left:hover {
  z-index: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .large-1-1-hero-card-image-top-left,
  :root[data-style=fat-hig] .large-1-1-hero-card-image-top-left {
    transition: none;
  }
  :root[data-style=hig] .large-1-1-hero-card-image-top-left:hover,
  :root[data-style=fat-hig] .large-1-1-hero-card-image-top-left:hover {
    transform: none;
  }
}
.large-square-hero-card-demo {
  width: 100%;
  max-width: 100%;
}

.large-square-hero-card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 4/3;
  min-width: 0;
  padding: 48px;
  cursor: pointer;
  container-name: large-square-hero-card;
  container-type: inline-size;
  background: var(--surface-low);
  --field-fill: var(--surface-low);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.large-square-hero-card__image {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  transform: translateY(-50%);
}

.large-square-hero-card > :not(.large-square-hero-card__image) {
  position: relative;
  z-index: 1;
}

a.large-square-hero-card {
  text-decoration: none;
  color: inherit;
}

a.large-square-hero-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.large-square-hero-card__sup {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
}

.large-square-hero-card .display-large {
  margin: 0;
  color: var(--on-surface);
}

@container large-square-hero-card (max-width: 480px) {
  .large-square-hero-card .display-large {
    font-size: clamp(36px, 6vw, 45px);
    line-height: 52px;
    letter-spacing: 0;
  }
}
.large-square-hero-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-square-hero-card,
:root[data-style=m3] .large-square-hero-card {
  position: relative;
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-square-hero-card:hover,
:root[data-style=m3] .large-square-hero-card:hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

:root[data-style=hig] .large-square-hero-card,
:root[data-style=fat-hig] .large-square-hero-card {
  position: relative;
  background: var(--surface);
  --field-fill: var(--surface);
  transform-origin: center center;
  transition: transform 180ms ease;
}

:root[data-style=hig] .large-square-hero-card {
  padding: 32px;
  border-radius: var(--hero-card-radius, 28px);
}

:root[data-style=fat-hig] .large-square-hero-card {
  padding: 48px;
  border-radius: var(--hero-card-radius, var(--radius-xxl));
}

:root[data-style=hig] .large-square-hero-card__sup,
:root[data-style=fat-hig] .large-square-hero-card__sup {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.15px;
}

:root[data-style=hig] .large-square-hero-card:hover,
:root[data-style=fat-hig] .large-square-hero-card:hover {
  z-index: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .large-square-hero-card,
  :root[data-style=fat-hig] .large-square-hero-card {
    transition: none;
  }
  :root[data-style=hig] .large-square-hero-card:hover,
  :root[data-style=fat-hig] .large-square-hero-card:hover {
    transform: none;
  }
}
.large-4-3-hero-card-image-top-left-demo {
  width: 100%;
  max-width: 100%;
}

.large-4-3-hero-card-image-top-left {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 4/3;
  min-width: 0;
  padding: 48px;
  cursor: pointer;
  container-name: large-4-3-hero-card-image-top-left;
  container-type: inline-size;
  anchor-scope: --large-4-3-hero-card-image-top-left-title;
  background: var(--surface-low);
  --field-fill: var(--surface-low);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.large-4-3-hero-card-image-top-left__image {
  position: absolute;
  z-index: 0;
  left: 80px;
  top: 220px;
  top: calc(anchor(--large-4-3-hero-card-image-top-left-title bottom) + 80px);
  width: auto;
  height: 120%;
  max-width: none;
  display: block;
  pointer-events: none;
  border-radius: var(--radius-lg);
}

.large-4-3-hero-card-image-top-left > :not(.large-4-3-hero-card-image-top-left__image) {
  position: relative;
  z-index: 1;
}

a.large-4-3-hero-card-image-top-left {
  text-decoration: none;
  color: inherit;
}

a.large-4-3-hero-card-image-top-left:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.large-4-3-hero-card-image-top-left__sup {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
}

.large-4-3-hero-card-image-top-left .display-large {
  margin: 0;
  color: var(--on-surface);
  anchor-name: --large-4-3-hero-card-image-top-left-title;
}

@container large-4-3-hero-card-image-top-left (max-width: 480px) {
  .large-4-3-hero-card-image-top-left .display-large {
    font-size: clamp(36px, 6vw, 45px);
    line-height: 52px;
    letter-spacing: 0;
  }
}
.large-4-3-hero-card-image-top-left__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-4-3-hero-card-image-top-left,
:root[data-style=m3] .large-4-3-hero-card-image-top-left {
  position: relative;
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-4-3-hero-card-image-top-left:hover,
:root[data-style=m3] .large-4-3-hero-card-image-top-left:hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

:root[data-style=hig] .large-4-3-hero-card-image-top-left,
:root[data-style=fat-hig] .large-4-3-hero-card-image-top-left {
  position: relative;
  background: var(--surface);
  --field-fill: var(--surface);
  transform-origin: center center;
  transition: transform 180ms ease;
}

:root[data-style=hig] .large-4-3-hero-card-image-top-left {
  padding: 32px;
  border-radius: var(--hero-card-radius, 28px);
}

:root[data-style=fat-hig] .large-4-3-hero-card-image-top-left {
  padding: 48px;
  border-radius: var(--hero-card-radius, var(--radius-xxl));
}

:root[data-style=hig] .large-4-3-hero-card-image-top-left__sup,
:root[data-style=fat-hig] .large-4-3-hero-card-image-top-left__sup {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.15px;
}

:root[data-style=hig] .large-4-3-hero-card-image-top-left:hover,
:root[data-style=fat-hig] .large-4-3-hero-card-image-top-left:hover {
  z-index: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .large-4-3-hero-card-image-top-left,
  :root[data-style=fat-hig] .large-4-3-hero-card-image-top-left {
    transition: none;
  }
  :root[data-style=hig] .large-4-3-hero-card-image-top-left:hover,
  :root[data-style=fat-hig] .large-4-3-hero-card-image-top-left:hover {
    transform: none;
  }
}
.large-16-9-hero-card-demo {
  width: 100%;
  max-width: 100%;
}

.large-16-9-hero-card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 16/9;
  min-width: 0;
  padding: 48px;
  cursor: pointer;
  container-name: large-16-9-hero-card;
  container-type: inline-size;
  background: var(--surface-low);
  --field-fill: var(--surface-low);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.large-16-9-hero-card__image {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  transform: translateY(-50%);
}

.large-16-9-hero-card > :not(.large-16-9-hero-card__image) {
  position: relative;
  z-index: 1;
}

a.large-16-9-hero-card {
  text-decoration: none;
  color: inherit;
}

a.large-16-9-hero-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.large-16-9-hero-card__sup {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
}

.large-16-9-hero-card .display-large {
  margin: 0;
  color: var(--on-surface);
}

@container large-16-9-hero-card (max-width: 480px) {
  .large-16-9-hero-card .display-large {
    font-size: clamp(36px, 6vw, 45px);
    line-height: 52px;
    letter-spacing: 0;
  }
}
.large-16-9-hero-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-16-9-hero-card,
:root[data-style=m3] .large-16-9-hero-card {
  position: relative;
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .large-16-9-hero-card:hover,
:root[data-style=m3] .large-16-9-hero-card:hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

:root[data-style=hig] .large-16-9-hero-card,
:root[data-style=fat-hig] .large-16-9-hero-card {
  position: relative;
  background: var(--surface);
  --field-fill: var(--surface);
  transform-origin: center center;
  transition: transform 180ms ease;
}

:root[data-style=hig] .large-16-9-hero-card {
  padding: 32px;
  border-radius: var(--hero-card-radius, 28px);
}

:root[data-style=fat-hig] .large-16-9-hero-card {
  padding: 48px;
  border-radius: var(--hero-card-radius, var(--radius-xxl));
}

:root[data-style=hig] .large-16-9-hero-card__sup,
:root[data-style=fat-hig] .large-16-9-hero-card__sup {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.15px;
}

:root[data-style=hig] .large-16-9-hero-card:hover,
:root[data-style=fat-hig] .large-16-9-hero-card:hover {
  z-index: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .large-16-9-hero-card,
  :root[data-style=fat-hig] .large-16-9-hero-card {
    transition: none;
  }
  :root[data-style=hig] .large-16-9-hero-card:hover,
  :root[data-style=fat-hig] .large-16-9-hero-card:hover {
    transform: none;
  }
}
.slider-hero-cards-demo {
  width: 100%;
  max-width: 100%;
}

.slider-hero-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.slider-hero-cards .icon[data-icon=play_arrow] {
  --icon-url: url("../icons/play_arrow.svg?v=opsz24-2");
}

.slider-hero-cards .icon[data-icon=pause] {
  --icon-url: url("../icons/pause.svg?v=opsz24-2");
}

:root[data-style=hig] .slider-hero-cards__play .icon[data-icon=play_arrow],
:root[data-style=fat-hig] .slider-hero-cards__play .icon[data-icon=play_arrow] {
  --icon-url: url("../icons/fill1/play_arrow.svg?v=opsz24-fill1-wght300");
}

:root[data-style=hig] .slider-hero-cards__play .icon[data-icon=pause],
:root[data-style=fat-hig] .slider-hero-cards__play .icon[data-icon=pause] {
  --icon-url: url("../icons/fill1/pause.svg?v=opsz24-fill1-wght300");
}

.slider-hero-cards .large-16-9-hero-card {
  cursor: default;
}

:root[data-style=hig] .slider-hero-cards .large-16-9-hero-card,
:root[data-style=fat-hig] .slider-hero-cards .large-16-9-hero-card,
:root[data-style=hig] .slider-hero-cards .large-16-9-hero-card:hover,
:root[data-style=fat-hig] .slider-hero-cards .large-16-9-hero-card:hover {
  z-index: auto;
  transform: none;
}

.slider-hero-cards .large-16-9-hero-card > .slider-hero-cards__viewport {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.slider-hero-cards .large-16-9-hero-card__sup,
.slider-hero-cards .large-16-9-hero-card .display-large {
  position: relative;
  z-index: 1;
  pointer-events: none;
  transform: none;
}

.slider-hero-cards__track {
  position: relative;
  height: 100%;
}

.slider-hero-cards__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  padding: 32px;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.slider-hero-cards__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.slider-hero-cards__slide.is-enter-next,
.slider-hero-cards__slide.is-enter-prev {
  z-index: 2;
}

.slider-hero-cards .large-16-9-hero-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.slider-hero-cards__slide.is-enter-next:not(.is-active) .large-16-9-hero-card__image,
.slider-hero-cards__slide.is-enter-prev:not(.is-active) .large-16-9-hero-card__image {
  transform: scale(1.03);
  transition: none;
}

.slider-hero-cards__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  --slider-hero-cards-fill: var(--nav-background);
  --slider-hero-cards-fill-hover: var(--nav-hover);
  --slider-hero-cards-on: var(--on-surface);
  --slider-hero-cards-dot: color-mix(in srgb, var(--on-surface-variant) 55%, transparent);
  --slider-hero-cards-bar: var(--on-surface);
  --slider-hero-cards-bar-track: color-mix(in srgb, var(--on-surface-variant) 32%, transparent);
  --slider-hero-cards-bar-fill: var(--on-surface);
}

.slider-hero-cards__play.btn.icon-only.standard {
  appearance: none;
  -webkit-appearance: none;
  background: var(--slider-hero-cards-fill);
  color: var(--slider-hero-cards-on);
}

.slider-hero-cards__play.btn.icon-only.standard:hover {
  background: var(--slider-hero-cards-fill-hover);
}

:root[data-style=hig] .slider-hero-cards__play.btn.icon-only.standard:hover,
:root[data-style=fat-hig] .slider-hero-cards__play.btn.icon-only.standard:hover {
  background: var(--nav-hover);
}

.slider-hero-cards__play .icon[data-icon=pause] {
  width: 20px;
  height: 20px;
}

.slider-hero-cards__indicators {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--slider-hero-cards-fill);
  gap: 10px;
  transition: background-color 160ms ease;
}

.slider-hero-cards__indicators:hover {
  background: var(--slider-hero-cards-fill-hover);
}

:root[data-style=hig] .slider-hero-cards__indicators:hover,
:root[data-style=fat-hig] .slider-hero-cards__indicators:hover {
  background: var(--nav-hover);
}

.slider-hero-cards__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-hero-cards__indicator.is-active {
  width: 34px;
}

.slider-hero-cards__indicator-track {
  display: block;
  width: 6px;
  height: 6px;
  overflow: hidden;
  border-radius: 100px;
  background: var(--slider-hero-cards-dot);
  transform-origin: center;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1), background-color 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-hero-cards__indicator.is-active .slider-hero-cards__indicator-track {
  width: 22px;
  background: var(--slider-hero-cards-bar);
}

.slider-hero-cards.is-playing .slider-hero-cards__indicator.is-active .slider-hero-cards__indicator-track {
  background: var(--slider-hero-cards-bar-track);
}

.slider-hero-cards__indicator-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--slider-hero-cards-bar-fill);
}

.slider-hero-cards:not(.is-playing) .slider-hero-cards__indicator.is-active .slider-hero-cards__indicator-fill {
  width: 100%;
  background: transparent;
}

.slider-hero-cards.is-playing .slider-hero-cards__indicator.is-active .slider-hero-cards__indicator-fill {
  animation: slider-hero-cards-progress 5s linear forwards;
}

@keyframes slider-hero-cards-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slider-hero-cards.is-playing .slider-hero-cards__indicator.is-active .slider-hero-cards__indicator-fill {
    animation: none;
    width: 100%;
  }
  .slider-hero-cards__indicator,
  .slider-hero-cards__indicator-track {
    transition: none;
  }
  .slider-hero-cards__slide {
    transition: none;
  }
  .slider-hero-cards .large-16-9-hero-card__image {
    transition: none;
    transform: scale(1);
  }
}
.swipe-card-demo {
  width: 100%;
  max-width: 100%;
}

.swipe-card {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 4/3;
  min-width: 0;
  padding: 48px;
  cursor: pointer;
  container-name: swipe-card;
  container-type: inline-size;
  background: var(--surface-low);
  --field-fill: var(--surface-low);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.swipe-card__image {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  transform: translateY(-50%);
}

.swipe-card > :not(.swipe-card__image) {
  position: relative;
  z-index: 1;
}

a.swipe-card {
  text-decoration: none;
  color: inherit;
}

a.swipe-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.swipe-card__sup {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
}

.swipe-card .display-large {
  margin: 0;
  color: var(--on-surface);
}

@container swipe-card (max-width: 480px) {
  .swipe-card .display-large {
    font-size: clamp(36px, 6vw, 45px);
    line-height: 52px;
    letter-spacing: 0;
  }
}
.swipe-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .swipe-card,
:root[data-style=m3] .swipe-card {
  position: relative;
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .swipe-card:hover,
:root[data-style=m3] .swipe-card:hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

:root[data-style=hig] .swipe-card,
:root[data-style=fat-hig] .swipe-card {
  position: relative;
  background: var(--surface);
  --field-fill: var(--surface);
  transform-origin: center center;
  transition: transform 180ms ease;
}

:root[data-style=hig] .swipe-card {
  padding: 32px;
  border-radius: var(--hero-card-radius, 28px);
}

:root[data-style=fat-hig] .swipe-card {
  padding: 48px;
  border-radius: var(--hero-card-radius, var(--radius-xxl));
}

:root[data-style=hig] .swipe-card__sup,
:root[data-style=fat-hig] .swipe-card__sup {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.15px;
}

:root[data-style=hig] .swipe-card:hover,
:root[data-style=fat-hig] .swipe-card:hover {
  z-index: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-style=hig] .swipe-card,
  :root[data-style=fat-hig] .swipe-card {
    transition: none;
  }
  :root[data-style=hig] .swipe-card:hover,
  :root[data-style=fat-hig] .swipe-card:hover {
    transform: none;
  }
}
.static-small-cards-demo {
  width: 100%;
  max-width: 100%;
}

.static-small-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 0;
}

.static-small-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
  padding: 28px;
  background: var(--surface-low);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.static-small-card .headline-small {
  margin: 0;
  color: var(--on-surface);
}

.static-small-card .body-large {
  margin: 12px 0 0;
  color: var(--on-surface-variant);
}

@media (max-width: 1179px) {
  .static-small-cards {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: unset;
  }
}
.task-list-field-box {
  position: relative;
  border: 1px solid var(--outline-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
}

.task-list-task-card__description > .task-list-field-box,
.task-list-task-card__solution > .task-list-field-box {
  flex: 1 1 auto;
  width: 100%;
}

.task-list-field-box__inner {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.task-list-field-box--description .task-list-field-box__inner {
  padding-block: 12px 8px;
  padding-inline: 12px;
}

.task-list-field-box__inner > .body-medium {
  margin: 0;
  color: var(--on-surface);
}

.task-list-field-box--description .task-list-field-box__inner > .body-medium {
  margin-left: 4px;
  padding-top: 4px;
}

.task-list-field-box--description .task-list-field-box__inner > .task-list-options {
  margin-left: -4px;
}

.task-list-radio-label-muted {
  color: var(--on-surface-variant);
}

.task-list-field-box__label {
  position: absolute;
  top: 0;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 0 4px;
  transform: translateY(-50%);
  background: var(--surface-lowest);
  color: var(--on-surface-variant);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  pointer-events: none;
}

.task-card-demo {
  width: 100%;
}

.demo-block:has(.task-list-task-card) .demo-stage {
  display: block;
  width: 100%;
}

.demo-block:has(.task-list-task-card) .task-list-task-card {
  width: 100%;
}

.typography-page {
  max-width: 960px;
}

.typography-page [data-style-copy] {
  display: none;
}

:root:not([data-style]) .typography-page p[data-style-copy=m3],
:root[data-style=m3] .typography-page p[data-style-copy=m3] {
  display: block;
}

:root[data-style=hig] .typography-page p[data-style-copy=hig],
:root[data-style=fat-hig] .typography-page p[data-style-copy=hig] {
  display: block;
}

:root:not([data-style]) .typography-page span[data-style-copy=m3],
:root[data-style=m3] .typography-page span[data-style-copy=m3] {
  display: inline;
}

:root[data-style=hig] .typography-page span[data-style-copy=hig],
:root[data-style=fat-hig] .typography-page span[data-style-copy=hig] {
  display: inline;
}

.typography-page > h1 {
  margin-bottom: 16px;
}

.type-scale {
  display: grid;
  gap: 48px;
  margin-top: 24px;
}

.type-section {
  display: grid;
  gap: 16px;
}

.type-family-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(29, 27, 32, 0.14);
  border-radius: 14px;
  padding: 24px;
}

.type-family-card > span {
  color: var(--on-surface-variant);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.type-family-card strong {
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
}

.type-family-card.mono strong,
.type-family-card.mono code,
.type-meta {
  font-family: var(--font-mono);
}

.type-family-card code {
  background: transparent;
  padding: 0;
}

.type-table {
  overflow: hidden;
  border: 1px solid rgba(29, 27, 32, 0.14);
  border-radius: 14px;
  background: var(--surface);
}

.type-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 24px;
  align-items: center;
  min-height: 76px;
  border-bottom: 1px solid rgba(29, 27, 32, 0.1);
  padding: 20px 24px;
}

.type-row:last-child {
  border-bottom: 0;
}

.type-row p {
  margin: 0;
  color: var(--on-surface);
}

.type-meta {
  display: grid;
  gap: 6px;
  color: var(--on-surface-variant);
  font-size: 11px;
  line-height: 16px;
}

.type-meta code {
  background: transparent;
  padding: 0;
  color: var(--on-surface);
  font-size: inherit;
}

.display-large {
  font-size: clamp(44px, 7vw, 57px);
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -0.25px;
}

.display-medium {
  font-size: clamp(36px, 6vw, 45px);
  font-weight: 400;
  line-height: 52px;
  letter-spacing: 0;
}

.display-small {
  font-size: 36px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: 0;
}

.headline-large {
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0;
}

.headline-medium {
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0;
}

.headline-small {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0;
}

.title-large {
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
}

.title-medium {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.15px;
}

.title-small {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.body-large {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.5px;
}

.body-medium {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.body-small {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.4px;
}

.label-large {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.label-medium {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.label-small {
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.top-bar-appearance {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
}

.style-switcher,
.section-switcher {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.style-switcher-menu,
.section-switcher-menu {
  min-width: 180px;
  max-width: 240px;
}

.style-switcher-menu.is-open,
.section-switcher-menu.is-open {
  z-index: 400;
}

.style-switcher--nav-bar {
  min-width: 0;
}

.style-switcher--nav-bar .navigation-bar-item {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center/contain no-repeat;
  mask: var(--icon-url) center/contain no-repeat;
}

.icon[data-icon=account_circle] {
  --icon-url: url("../icons/account_circle.svg?v=opsz24-2");
}

.icon[data-icon=add] {
  --icon-url: url("../icons/add.svg?v=opsz24-2");
}

.icon[data-icon=ads_click] {
  --icon-url: url("../icons/ads_click.svg?v=opsz24-2");
}

.icon[data-icon=apps] {
  --icon-url: url("../icons/apps.svg?v=opsz24-2");
}

.icon[data-icon=archive] {
  --icon-url: url("../icons/archive.svg?v=opsz24-2");
}

.icon[data-icon=arrow_back] {
  --icon-url: url("../icons/arrow_back.svg?v=opsz24-2");
}

.icon[data-icon=arrow_back_ios_new] {
  --icon-url: url("../icons/arrow_back_ios_new.svg?v=opsz24-2");
}

.icon[data-icon=arrow_drop_down] {
  --icon-url: url("../icons/arrow_drop_down.svg?v=opsz24-2");
}

.icon[data-icon=arrow_drop_up] {
  --icon-url: url("../icons/arrow_drop_up.svg?v=opsz24-2");
}

.icon[data-icon=arrow_forward] {
  --icon-url: url("../icons/arrow_forward.svg?v=opsz24-2");
}

.icon[data-icon=arrow_forward_bold] {
  --icon-url: url("../icons/arrow_forward_bold.svg?v=opsz24-2");
}

.icon[data-icon=arrow_right] {
  --icon-url: url("../icons/arrow_right.svg?v=opsz24-2");
}

.icon[data-icon=arrow_split] {
  --icon-url: url("../icons/arrow_split.svg?v=opsz24-2");
}

.icon[data-icon=arrow_upward] {
  --icon-url: url("../icons/arrow_upward.svg?v=opsz24-2");
}

.icon[data-icon=auto_awesome] {
  --icon-url: url("../icons/auto_awesome.svg?v=opsz24-2");
}

.icon[data-icon=automation] {
  --icon-url: url("../icons/automation.svg?v=opsz24-2");
}

.icon[data-icon=block] {
  --icon-url: url("../icons/block.svg?v=opsz24-2");
}

.icon[data-icon=bolt] {
  --icon-url: url("../icons/bolt.svg?v=opsz24-2");
}

.icon[data-icon=bookmark] {
  --icon-url: url("../icons/bookmark.svg?v=opsz24-2");
}

.icon[data-icon=calendar_month] {
  --icon-url: url("../icons/calendar_month.svg?v=opsz24-2");
}

.icon[data-icon=calendar_today] {
  --icon-url: url("../icons/calendar_today.svg?v=opsz24-2");
}

.icon[data-icon=casino] {
  --icon-url: url("../icons/casino.svg?v=opsz24-2");
}

.icon[data-icon=chat_bubble] {
  --icon-url: url("../icons/chat_bubble.svg?v=opsz24-2");
}

.icon[data-icon=check] {
  --icon-url: url("../icons/check.svg?v=opsz24-2");
}

.icon[data-icon=check_box_outline_blank] {
  --icon-url: url("../icons/check_box_outline_blank.svg?v=opsz24-2");
}

.icon[data-icon=chevron_backward] {
  --icon-url: url("../icons/chevron_backward.svg?v=opsz24-2");
}

.icon[data-icon=chevron_forward] {
  --icon-url: url("../icons/chevron_forward.svg?v=opsz24-2");
}

.icon[data-icon=circle_circle] {
  --icon-url: url("../icons/circle_circle.svg?v=opsz24-2");
}

.icon[data-icon=close] {
  --icon-url: url("../icons/close.svg?v=opsz24-2");
}

.icon[data-icon=content_copy] {
  --icon-url: url("../icons/content_copy.svg?v=opsz24-2");
}

.icon[data-icon=dark_mode] {
  --icon-url: url("../icons/dark_mode.svg?v=opsz24-2");
}

.icon[data-icon=delete] {
  --icon-url: url("../icons/delete.svg?v=opsz24-2");
}

.icon[data-icon=description] {
  --icon-url: url("../icons/description.svg?v=opsz24-2");
}

.icon[data-icon=download] {
  --icon-url: url("../icons/download.svg?v=opsz24-2");
}

.icon[data-icon=draft] {
  --icon-url: url("../icons/draft.svg?v=opsz24-2");
}

.icon[data-icon=drag_indicator] {
  --icon-url: url("../icons/drag_indicator.svg?v=opsz24-2");
}

.icon[data-icon=drive_file_move] {
  --icon-url: url("../icons/drive_file_move.svg?v=opsz24-2");
}

.icon[data-icon=edit] {
  --icon-url: url("../icons/edit.svg?v=opsz24-2");
}

.icon[data-icon=error] {
  --icon-url: url("../icons/error.svg?v=opsz24-2");
}

.icon[data-icon=explore] {
  --icon-url: url("../icons/explore.svg?v=opsz24-2");
}

.icon[data-icon=favorite] {
  --icon-url: url("../icons/favorite.svg?v=opsz24-2");
}

.icon[data-icon=file_download] {
  --icon-url: url("../icons/file_download.svg?v=opsz24-2");
}

.icon[data-icon=fingerprint] {
  --icon-url: url("../icons/fingerprint.svg?v=opsz24-4");
}

.icon[data-icon=first_page] {
  --icon-url: url("../icons/first_page.svg?v=opsz24-2");
}

.icon[data-icon=folder_open] {
  --icon-url: url("../icons/folder_open.svg?v=opsz24-2");
}

.icon[data-icon=format_bold] {
  --icon-url: url("../icons/format_bold.svg?v=opsz24-2");
}

.icon[data-icon=format_clear] {
  --icon-url: url("../icons/format_clear.svg?v=opsz24-2");
}

.icon[data-icon=format_italic] {
  --icon-url: url("../icons/format_italic.svg?v=opsz24-2");
}

.icon[data-icon=format_list_bulleted] {
  --icon-url: url("../icons/format_list_bulleted.svg?v=opsz24-2");
}

.icon[data-icon=front_hand] {
  --icon-url: url("../icons/front_hand.svg?v=opsz24-2");
}

.icon[data-icon=gesture] {
  --icon-url: url("../icons/gesture.svg?v=opsz24-3");
}

.icon[data-icon=grade] {
  --icon-url: url("../icons/grade.svg?v=opsz24-2");
}

.icon[data-icon=group_add] {
  --icon-url: url("../icons/group_add.svg?v=opsz24-2");
}

.icon[data-icon=home] {
  --icon-url: url("../icons/home.svg?v=opsz24-2");
}

.icon[data-icon=image] {
  --icon-url: url("../icons/image.svg?v=opsz24-2");
}

.icon[data-icon=info] {
  --icon-url: url("../icons/info.svg?v=opsz24-2");
}

.icon[data-icon=ios_share] {
  --icon-url: url("../icons/ios_share.svg?v=opsz24-2");
}

.icon[data-icon=key] {
  --icon-url: url("../icons/key.svg?v=opsz24-2");
}

.icon[data-icon=keyboard] {
  --icon-url: url("../icons/keyboard.svg?v=opsz24-2");
}

.icon[data-icon=keyboard_arrow_down] {
  --icon-url: url("../icons/keyboard_arrow_down.svg?v=opsz24-2");
}

.icon[data-icon=kid_star] {
  --icon-url: url("../icons/kid_star.svg?v=opsz24-2");
}

.icon[data-icon=label] {
  --icon-url: url("../icons/label.svg?v=opsz24-2");
}

.icon[data-icon=last_page] {
  --icon-url: url("../icons/last_page.svg?v=opsz24-2");
}

.icon[data-icon=library_music] {
  --icon-url: url("../icons/library_music.svg?v=opsz24-2");
}

.icon[data-icon=light_mode] {
  --icon-url: url("../icons/light_mode.svg?v=opsz24-2");
}

.icon[data-icon=lightbulb] {
  --icon-url: url("../icons/lightbulb.svg?v=opsz24-2");
}

.icon[data-icon=link] {
  --icon-url: url("../icons/link.svg?v=opsz24-2");
}

.icon[data-icon=local_library] {
  --icon-url: url("../icons/local_library.svg?v=opsz24-2");
}

.icon[data-icon=mail] {
  --icon-url: url("../icons/mail.svg?v=opsz24-2");
}

.icon[data-icon=menu] {
  --icon-url: url("../icons/menu.svg?v=opsz24-2");
}

.icon[data-icon=more_vert] {
  --icon-url: url("../icons/more_vert.svg?v=opsz24-2");
}

.icon[data-icon=movie] {
  --icon-url: url("../icons/movie.svg?v=opsz24-2");
}

.icon[data-icon=note_add] {
  --icon-url: url("../icons/note_add.svg?v=opsz24-2");
}

.icon[data-icon=open_in_new] {
  --icon-url: url("../icons/open_in_new.svg?v=opsz24-2");
}

.icon[data-icon=palette] {
  --icon-url: url("../icons/palette.svg?v=opsz24-2");
}

.icon[data-icon=person] {
  --icon-url: url("../icons/person.svg?v=opsz24-2");
}

.icon[data-icon=print] {
  --icon-url: url("../icons/print.svg?v=opsz24-2");
}

.icon[data-icon=radio] {
  --icon-url: url("../icons/radio.svg?v=opsz24-2");
}

.icon[data-icon=radio_button_checked] {
  --icon-url: url("../icons/radio_button_checked.svg?v=opsz24-2");
}

.icon[data-icon=radio_button_unchecked] {
  --icon-url: url("../icons/radio_button_unchecked.svg?v=opsz24-2");
}

.icon[data-icon=redo] {
  --icon-url: url("../icons/redo.svg?v=opsz24-2");
}

.icon[data-icon=remove] {
  --icon-url: url("../icons/remove.svg?v=opsz24-2");
}

.icon[data-icon=remove_done] {
  --icon-url: url("../icons/remove_done.svg?v=opsz24-2");
}

.icon[data-icon=report] {
  --icon-url: url("../icons/report.svg?v=opsz24-2");
}

.icon[data-icon=schedule] {
  --icon-url: url("../icons/schedule.svg?v=opsz24-2");
}

.icon[data-icon=school] {
  --icon-url: url("../icons/school.svg?v=opsz24-2");
}

.icon[data-icon=search] {
  --icon-url: url("../icons/search.svg?v=opsz24-2");
}

.icon[data-icon=send] {
  --icon-url: url("../icons/send.svg?v=opsz24-2");
}

.icon[data-icon=share] {
  --icon-url: url("../icons/share.svg?v=opsz24-2");
}

.icon[data-icon=stars] {
  --icon-url: url("../icons/stars.svg?v=opsz24-2");
}

.icon[data-icon=style] {
  --icon-url: url("../icons/style.svg?v=opsz24-2");
}

.icon[data-icon=swap_vert] {
  --icon-url: url("../icons/swap_vert.svg?v=opsz24-2");
}

.icon[data-icon=touch_app] {
  --icon-url: url("../icons/touch_app.svg?v=opsz24-2");
}

.icon[data-icon=upload_file] {
  --icon-url: url("../icons/upload_file.svg?v=opsz24-2");
}

.icon[data-icon=view_week] {
  --icon-url: url("../icons/view_week.svg?v=opsz24-2");
}

.icon[data-icon=wand_stars] {
  --icon-url: url("../icons/wand_stars.svg?v=opsz24-2");
}

.icon[data-icon=work] {
  --icon-url: url("../icons/work.svg?v=opsz24-2");
}

.content.portfolio-content {
  max-width: none;
  padding-top: 0;
  padding-bottom: 92px;
}

/* Sandbox has no outer .app-shell; body is the viewport flex root. */
body[data-site-section=portfolio][data-app-section=pbp] {
  --sandbox-rail-width: 96px;
  --sandbox-rail-inset-left: 28px;
  --sandbox-rail-inset-top: 28px;
  --sandbox-rail-inset-bottom: 28px;
  --sandbox-top-section-height: 65px;
  --sandbox-content-inline: 28px;
  display: flex;
  min-height: 100dvh;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
}

body[data-site-section=portfolio][data-app-section=pbp] .body-shell {
  flex: 1 1 auto;
}

body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-column {
  width: var(--sandbox-rail-width);
  flex: 0 0 var(--sandbox-rail-width);
  margin: calc(var(--sandbox-top-section-height) + var(--sandbox-rail-inset-top)) 0 var(--sandbox-rail-inset-bottom) var(--sandbox-rail-inset-left);
}

body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  border-radius: 28px;
  background: color-mix(in srgb, var(--on-surface) 8%, var(--canvas));
}

:root[data-style=hig] body[data-site-section=portfolio] .navigation-rail-demo.sidebar,
:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar {
  padding-left: 8px;
  padding-right: 8px;
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] {
    --sandbox-content-inline: 20px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-column {
    margin: 0;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .free-hero {
    width: calc(100% + 2 * var(--sandbox-content-inline));
    margin-left: calc(-1 * var(--sandbox-content-inline));
  }
}
@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-column {
    position: absolute;
    z-index: 15;
    top: calc(var(--sandbox-top-section-height) + var(--sandbox-rail-inset-top));
    bottom: var(--sandbox-rail-inset-bottom);
    left: var(--sandbox-rail-inset-left);
    margin: 0;
  }
  /* Extend the sticky page app bar over the rail column so the logo stays in the bar. */
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-page-app-bar-sticky {
    width: calc(100% + 56px + var(--sandbox-rail-inset-left) + var(--sandbox-rail-width));
    margin-left: calc(-28px - var(--sandbox-rail-inset-left) - var(--sandbox-rail-width));
    margin-right: -28px;
    padding-left: calc(28px + var(--sandbox-rail-inset-left) + var(--sandbox-rail-width));
    padding-right: 28px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-page-app-bar-sticky .sandbox-chrome-brand {
    position: absolute;
    top: 0;
    left: calc(var(--sandbox-rail-inset-left) + (var(--sandbox-rail-width) - 28px) / 2);
    z-index: 1;
    height: var(--sandbox-top-section-height);
    padding: 0;
    background: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content {
    --sandbox-content-pad-left: calc(var(--sandbox-rail-inset-left) + var(--sandbox-rail-width) + var(--sandbox-content-inline));
    padding-left: var(--sandbox-content-pad-left);
    padding-right: var(--sandbox-content-inline);
  }
  body[data-site-section=portfolio][data-app-section=pbp] .free-hero {
    width: calc(100% + var(--sandbox-content-pad-left) + var(--sandbox-content-inline));
    margin-left: calc(-1 * var(--sandbox-content-pad-left));
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-page-app-bar-divider,
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-page-app-bar-sticky.is-scrolled .portfolio-page-app-bar-divider {
    border-top-color: transparent;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .body-shell::after {
    content: "";
    position: absolute;
    z-index: 21;
    left: 0;
    right: 16px;
    top: calc(var(--sandbox-top-section-height) - 1px);
    height: 1px;
    background-color: transparent;
    pointer-events: none;
    transition: background-color 160ms ease;
  }
  body[data-site-section=portfolio][data-app-section=pbp]:has(.portfolio-page-app-bar-sticky.is-scrolled) .body-shell::after {
    background-color: var(--outline-variant);
  }
  :root:not([data-style=hig]):not([data-style=fat-hig]) body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar,
  :root[data-style=m3] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar {
    transition: box-shadow 150ms ease;
  }
  :root:not([data-style=hig]):not([data-style=fat-hig]) body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar:hover,
  :root[data-style=m3] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar:hover {
    box-shadow: var(--elevation-1);
  }
  :root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar,
  :root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar {
    transform-origin: center center;
    transition: transform 180ms ease;
  }
  :root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar:hover,
  :root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar:hover {
    transform: scale(1.02);
  }
}
@media (min-width: 1180px) and (prefers-reduced-motion: reduce) {
  :root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar,
  :root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar {
    transition: none;
  }
  :root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar:hover,
  :root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-demo.sidebar:hover {
    transform: none;
  }
}
/* PBP has no Top App Bar. The whole site, rail included, stops at 1920px. */
html:has(body[data-site-section=portfolio][data-app-section=pbp]) {
  background: var(--canvas);
}

body[data-site-section=portfolio][data-app-section=pbp] {
  --sandbox-top-section-height: 0px;
  --sandbox-rail-inset-top: 46px;
  --sandbox-rail-inset-bottom: 46px;
  --content-vertical-space-fill: transparent;
  width: min(100%, 1920px);
  margin-inline: auto;
}

body[data-site-section=portfolio][data-app-section=pbp] .scroll-column {
  isolation: isolate;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

body[data-site-section=portfolio][data-app-section=pbp] .scroll-column::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-scrollbar {
  position: absolute;
  z-index: 35;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  pointer-events: none;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-scrollbar__thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 8px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  pointer-events: auto;
  touch-action: none;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .body-shell::after {
    content: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .navigation-rail-column {
    top: var(--sandbox-rail-inset-top);
  }
  :root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .rail-header,
  :root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .rail-footer {
    align-items: stretch;
    width: 100%;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .rail-header .rail-item,
  body[data-site-section=portfolio][data-app-section=pbp] .rail-footer .rail-item {
    padding-bottom: 8px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .rail-theme-mirror {
    color: var(--on-surface-variant);
  }
  body[data-site-section=portfolio][data-app-section=pbp] .rail-theme-mirror:hover {
    color: var(--on-surface);
  }
  body[data-site-section=portfolio][data-app-section=pbp] .rail-theme-mirror:hover .rail-icon-wrap {
    background: transparent;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .rail-theme-mirror .icon {
    width: 32px;
    height: 32px;
  }
}
body[data-site-section=portfolio][data-app-section=pbp] .main-wrap {
  padding: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .main-card {
  border-radius: 0;
}

body[data-site-section=portfolio][data-app-section=pbp].is-task-list-agent-open .body-shell,
body[data-site-section=portfolio][data-app-section=pbp].is-task-list-agent-open .main-wrap {
  padding-right: 0;
}

body[data-site-section=portfolio] .sidebar-create-action {
  margin-bottom: 24px;
}

/* Portfolio shell: top app bar background should match main area */
body[data-site-section=portfolio] .portfolio-page-app-bar-sticky {
  background: var(--canvas);
}

body[data-site-section=portfolio] .portfolio-page-app-bar-sticky .portfolio-page-app-bar-bar {
  background: var(--canvas);
}

/* Portfolio shell: Navigation rail (@Navigationrail#9b1zmu) — desktop */
body[data-site-section=portfolio] .top-bar {
  height: 24px;
  min-height: 24px;
  padding: 0;
  gap: 0;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio] .top-bar {
    height: 24px;
  }
}
body[data-site-section=portfolio] .navigation-rail-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  flex: 0 0 auto;
  gap: 24px;
  min-width: 0;
  min-height: 0;
  margin: 0 0 24px 12px;
  overflow: visible;
}

body[data-site-section=portfolio] .navigation-rail-demo.sidebar {
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 12px;
  border-radius: 28px;
  background: var(--canvas);
}

body[data-site-section=portfolio] .rail-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--on-surface);
  text-decoration: none;
}

body[data-site-section=portfolio] .rail-brand .icon {
  width: 28px;
  height: 28px;
}

body[data-site-section=portfolio] .rail-items {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

body[data-site-section=portfolio] .rail-header,
body[data-site-section=portfolio] .rail-footer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  overflow: visible;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] button.rail-item {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    box-shadow: none;
  }
}
body[data-site-section=portfolio] .main-wrap {
  padding-left: 12px;
}

/* Portfolio shell: Navigation bar (@Verticalnavigationbar#1batyd) — mobile */
body[data-site-section=portfolio] .portfolio-navigation-bar {
  display: none;
  flex: 0 0 auto;
  grid-template-columns: none;
  box-shadow: none;
}

body[data-site-section=portfolio] .portfolio-navigation-bar .navigation-bar-item {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] {
    --pbp-mobile-nav-height: 92px;
    --pbp-mobile-top-nav-height: 56px;
    --pbp-mobile-fab-height: 56px;
    --pbp-mobile-fab-gap: 24px;
    --pbp-mobile-nav-inset: 20px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .body-shell {
    background: transparent;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar {
    position: absolute;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0;
    left: var(--pbp-mobile-nav-inset);
    right: var(--pbp-mobile-nav-inset);
    bottom: calc(var(--pbp-mobile-nav-inset) + env(safe-area-inset-bottom));
    box-sizing: border-box;
    width: auto;
    height: 92px;
    min-height: 92px;
    margin: 0;
    padding: 0 24px 8px;
    background: color-mix(in srgb, var(--on-surface) 8%, var(--canvas));
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar:not(.portfolio-navigation-bar--top) {
    bottom: calc(var(--pbp-mobile-nav-inset) + env(safe-area-inset-bottom));
    --pbp-mobile-nav-radius: 28px;
  }
  body[data-site-section=portfolio][data-app-section=pbp]::before {
    content: "";
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--pbp-mobile-nav-height) + var(--pbp-mobile-nav-inset) + env(safe-area-inset-bottom));
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, var(--canvas) 33.333%, var(--canvas) 100%);
  }
  body[data-site-section=portfolio][data-app-section=pbp]::after {
    content: "";
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--pbp-mobile-top-nav-height) + var(--pbp-mobile-nav-inset) + env(safe-area-inset-top));
    pointer-events: none;
    background: linear-gradient(to top, transparent 0%, var(--canvas) 33.333%, var(--canvas) 100%);
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar:not(.portfolio-navigation-bar--top)::before {
    content: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar:not(.portfolio-navigation-bar--top)::after {
    content: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar:not(.portfolio-navigation-bar--top):hover,
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar:not(.portfolio-navigation-bar--top):focus-within,
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar:not(.portfolio-navigation-bar--top):active {
    z-index: 30;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar--top {
    top: calc(var(--pbp-mobile-nav-inset) + env(safe-area-inset-top));
    bottom: auto;
    display: grid;
    grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
    align-items: center;
    height: 56px;
    min-height: 56px;
    justify-content: stretch;
    padding-top: 8px;
    padding-inline: 10px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar--top .portfolio-nav-logo {
    grid-column: 2;
    justify-self: center;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar--top .portfolio-nav-back {
    grid-column: 1;
    justify-self: start;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar--top:hover,
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar--top:focus-within,
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar--top:active {
    z-index: 30;
  }
  :root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar {
    background: color-mix(in srgb, var(--on-surface) 8%, var(--canvas));
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-fab {
    bottom: calc(var(--pbp-mobile-nav-inset) + var(--pbp-mobile-nav-height) + var(--pbp-mobile-fab-gap) + env(safe-area-inset-bottom));
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar .navigation-bar-item {
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar .portfolio-nav-logo,
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar .portfolio-nav-back {
    flex: 0 0 auto;
    width: var(--icon-button-size);
    min-width: var(--icon-button-size);
    padding-left: 0;
    padding-right: 0;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar .portfolio-nav-logo .icon {
    width: 32px;
    height: 32px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-navigation-bar .portfolio-nav-back .icon {
    width: 28px;
    height: 28px;
    transform: translateX(-4px);
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-nav-destinations {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
    gap: 0;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-nav-destinations .navigation-bar-item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}
body[data-site-section=portfolio] .nav-toggle {
  display: none;
}

body[data-site-section=portfolio] .sidebar-design-system-link {
  color: transparent;
  background: transparent;
  text-decoration: none;
}

body[data-site-section=portfolio] .sidebar-design-system-link .icon {
  color: transparent;
}

body[data-site-section=portfolio] .sidebar-design-system-link:hover,
body[data-site-section=portfolio] .sidebar-design-system-link:focus-visible {
  color: transparent;
  background: transparent;
}

body[data-site-section=portfolio] .nav-link-filled {
  background: var(--primary);
  color: var(--on-primary);
}

body[data-site-section=portfolio] .nav-link-filled.disabled,
body[data-site-section=portfolio] .nav-link-filled[aria-disabled=true] {
  opacity: 0.38;
}

body[data-site-section=portfolio] .nav-link-filled.disabled:hover,
body[data-site-section=portfolio] .nav-link-filled[aria-disabled=true]:hover {
  background: var(--primary);
}

body[data-site-section=portfolio] .main-card {
  position: relative;
  background: var(--canvas);
}

body[data-site-section=portfolio] .portfolio-fab {
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 40;
  box-shadow: var(--elevation-3);
}

.content.portfolio-content:has(.task-bank-page),
.content.portfolio-content:has(.task-lists-page),
.content.portfolio-content:has(.task-list-page),
.content.portfolio-content:has(.projects-page) {
  padding-inline: 28px;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio] .content.portfolio-content:has(.task-list-page) {
    padding-bottom: 72px;
  }
}
.task-bank-search {
  margin-bottom: 16px;
}

.task-bank-search .search-box {
  width: 100%;
  max-width: none;
}

.task-bank-search .search-clear-button {
  margin-left: 12px;
}

.task-bank-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.task-bank-filters-scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.task-bank-reset {
  flex: 0 0 auto;
}

.task-bank-actions {
  width: 56px;
  padding-inline: 8px;
  text-align: center;
}

.task-bank-page .data-table-card {
  border-radius: var(--radius-xl);
  background: transparent;
}

.task-bank-page:not(.task-lists-page) .task-bank-table th:nth-child(3),
.task-bank-page:not(.task-lists-page) .task-bank-table td:nth-child(3),
.task-bank-page:not(.task-lists-page) .task-bank-table th:nth-child(4),
.task-bank-page:not(.task-lists-page) .task-bank-table td:nth-child(4) {
  white-space: nowrap;
}

.task-lists-page .task-bank-table th:nth-child(2),
.task-lists-page .task-bank-table td:nth-child(2) {
  white-space: nowrap;
}

.task-lists-page .task-bank-table th:nth-child(5),
.task-lists-page .task-bank-table td:nth-child(5) {
  white-space: nowrap;
}

.task-bank-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.task-bank-page-size {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.task-bank-page-size .material-select-field {
  width: auto;
}

.task-bank-page-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.task-bank-page-range {
  color: var(--on-surface-variant);
  font-size: 14px;
  line-height: 20px;
}

.task-bank-page-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-bank-page-buttons .icon-button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.task-bank-page-buttons .icon-button:disabled:hover {
  background: transparent;
  color: var(--on-surface);
}

.task-lists-row {
  cursor: pointer;
}

.task-lists-row-link {
  color: inherit;
  text-decoration: none;
}

.task-lists-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.task-list-header-card {
  margin-bottom: 24px;
}

.free-hero {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  overflow: hidden;
}

.free-hero__image {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
}

.portfolio-hook {
  box-sizing: border-box;
  padding: 120px;
  text-align: center;
}

.portfolio-hook--section {
  padding: 90px;
}

.portfolio-hook__text {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 96px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.portfolio-hook--section .portfolio-hook__text {
  font-size: 72px; /* 75% of Top hero text (96px) */
}

.portfolio-hook .portfolio-hook__text {
  max-width: 1024px;
  margin-inline: auto;
}

.portfolio-hook + .portfolio-hero,
.free-hero + .portfolio-hero {
  margin-top: 0;
}

.portfolio-page > .portfolio-hook__text {
  margin: 120px;
  text-align: center;
}

.pbp-statement-copy > .portfolio-hook {
  padding-bottom: 40px; /* 20px + 20px; all PBP statement pages */
}

.pbp-statement-copy > .portfolio-hook--section {
  padding-top: 45px;
}

.pbp-statement-copy > .portfolio-intro {
  margin-top: 0;
  margin-bottom: 40px;
  text-align: center;
}

.pbp-statement-copy > .portfolio-intro .pbp-project-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 1024px;
  margin: 0 auto;
}

.pbp-statement-copy > .portfolio-intro > .content-small-vertical-space {
  width: calc(100% + 320px);
  max-width: none;
  margin-inline: -160px;
}

@media (max-width: 1179px) {
  .pbp-statement-copy > .portfolio-intro > .content-small-vertical-space {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}

body[data-app-section=pbp] .pbp-project-chips .chip,
body[data-app-section=pbp] .pbp-project-chips .chip:hover {
  background: transparent;
}
body[data-app-section=pbp]:not(.pbp-moonset-page):not(.pbp-doo-connect-page) .pbp-project-chips .chip,
body[data-app-section=pbp]:not(.pbp-moonset-page):not(.pbp-doo-connect-page) .pbp-project-chips .chip:hover {
  border-color: color-mix(in srgb, var(--outline-variant) 90%, black);
}

/* What + project pages only (not How / Why / Who):
   +120px above display text, +40px below supporting text. */
body[data-app-section=pbp] .pbp-what-page .pbp-statement-copy {
  padding-top: 120px;
}

body[data-app-section=pbp] .pbp-what-page .pbp-statement-copy > .portfolio-intro {
  margin-bottom: 80px;
}

/* Moonset project page: independent color treatment (raw hex, not DS tokens). */
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page {
  --pbp-moonset-page: #041636;
  --pbp-moonset-rail: #0a2348;
  --pbp-moonset-on: #ffffff;
  --pbp-moonset-on-muted: #c9d3e5;
  --pbp-moonset-rail-unselected: #8995a7;
  --pbp-moonset-surface-low: #0d2a52;
  --pbp-moonset-surface-low-hover: #12315c;
  --pbp-moonset-outline: #3d5278;
  --canvas: var(--pbp-moonset-page);
  --background: var(--pbp-moonset-page);
  --surface: var(--pbp-moonset-surface-low);
  --surface-lowest: var(--pbp-moonset-page);
  --surface-low: var(--pbp-moonset-surface-low);
  --surface-low-hover: var(--pbp-moonset-surface-low-hover);
  --surface-container: var(--pbp-moonset-rail);
  --surface-high: var(--pbp-moonset-rail);
  --surface-highest: var(--pbp-moonset-rail);
  --surface-container-high: var(--pbp-moonset-rail);
  --surface-container-highest: var(--pbp-moonset-rail);
  --on-surface: var(--pbp-moonset-on);
  --on-surface-variant: var(--pbp-moonset-on-muted);
  --outline-variant: var(--pbp-moonset-outline);
  --nav-background: var(--pbp-moonset-page);
  --nav-hover: var(--pbp-moonset-surface-low-hover);
  --state-hover: rgba(255, 255, 255, 0.08);
  --row-hover: rgba(255, 255, 255, 0.05);
  background: var(--pbp-moonset-page);
  color: var(--pbp-moonset-on);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .main-card {
  background: var(--pbp-moonset-page);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .navigation-rail-demo.sidebar {
  background: var(--pbp-moonset-rail);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .navigation-rail-demo .rail-items .rail-item:not(.active) {
  color: var(--pbp-moonset-rail-unselected);
}

:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .navigation-rail-demo .rail-items .rail-item:not(.active):hover,
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .navigation-rail-demo .rail-items .rail-item:not(.active):hover {
  color: var(--pbp-moonset-on);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .large-16-9-hero-card {
  background: var(--pbp-moonset-rail);
  --field-fill: var(--pbp-moonset-rail);
}

:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .large-16-9-hero-card,
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .large-16-9-hero-card {
  background: var(--pbp-moonset-rail);
  --field-fill: var(--pbp-moonset-rail);
}

@media (max-width: 1179px) {
  :root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-navigation-bar {
    background: var(--pbp-moonset-rail);
  }
}
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-opening {
  position: relative;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-opening::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: -100vw;
    right: -100vw;
    top: 100%;
    height: 800px;
    background: var(--pbp-moonset-page);
    pointer-events: none;
  }
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-opening ~ * {
  position: relative;
  z-index: 1;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-statement-copy {
  position: relative;
  overflow: visible;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .scroll-column {
  overflow-x: clip;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .content.portfolio-content {
  overflow-x: clip;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-top-media__image {
  position: absolute;
  top: 600px;
  left: 50%;
  z-index: 0;
  width: 2000px;
  max-width: none;
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-scene-spacer {
  visibility: hidden;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-ocean-media {
  position: relative;
  overflow: visible;
  height: calc(140vw * (3251 - 45 - 553) / 2500);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-ocean-media + .portfolio-hook--section {
  margin-top: 80px;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-ocean-media > .pbp-moonset-top-media__image {
  top: calc(140vw * -553 / 2500);
  width: 140vw;
  height: auto;
  transform: translateX(-50%);
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-ocean-media > .pbp-moonset-top-media__image {
    top: calc(140vw * -553 / 2500);
  }

  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-ocean-media {
    height: calc(140vw * (3251 - 45 - 553) / 2500);
  }
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid {
  margin-inline: 0;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid .portfolio-hero {
  cursor: default;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid .portfolio-hero--stacked .portfolio-hero-card--media .task-list-new-task-card {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background: #082449;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid .portfolio-hero--stacked .portfolio-hero-card--media .portfolio-hero-card__image {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  margin: -1px;
}

:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid .portfolio-hero,
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid .portfolio-hero,
:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid .portfolio-hero:hover,
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid .portfolio-hero:hover {
  z-index: auto;
  transform: none;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid {
    --pbp-moonset-swipe-gap: 16px;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--pbp-moonset-swipe-gap);
    margin-inline: calc(-1 * var(--pbp-mobile-nav-inset));
    padding-inline: var(--pbp-mobile-nav-inset);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pbp-mobile-nav-inset);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid::-webkit-scrollbar {
    display: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .portfolio-feature-grid .portfolio-hero {
    flex: 0 0 calc((100% + var(--pbp-mobile-nav-inset) - var(--pbp-moonset-swipe-gap)) / 1.5);
    width: calc((100% + var(--pbp-mobile-nav-inset) - var(--pbp-moonset-swipe-gap)) / 1.5);
    max-width: none;
    height: auto;
    margin-inline: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-statement-copy > .portfolio-hook,
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-statement-copy > .portfolio-intro,
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-statement-copy > .content-vertical-space,
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-statement-copy > .content-small-vertical-space {
  position: relative;
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-statement-copy > .pbp-moonset-top-media__image {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: none;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .icon[data-icon=play_arrow] {
  --icon-url: url("../icons/play_arrow.svg?v=opsz24-2");
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .icon[data-icon=pause] {
  --icon-url: url("../icons/pause.svg?v=opsz24-2");
}

:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__play .icon[data-icon=play_arrow],
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__play .icon[data-icon=play_arrow] {
  --icon-url: url("../icons/fill1/play_arrow.svg?v=opsz24-fill1-wght300");
}

:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__play .icon[data-icon=pause],
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__play .icon[data-icon=pause] {
  --icon-url: url("../icons/fill1/pause.svg?v=opsz24-fill1-wght300");
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card {
  cursor: default;
}

:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card,
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card,
:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card:hover,
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card:hover {
  z-index: auto;
  transform: none;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card > .pbp-moonset-hero-slider__viewport {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card__sup,
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card .display-large {
  position: relative;
  z-index: 1;
  pointer-events: none;
  transform: none;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__track {
  position: relative;
  height: 100%;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  padding: 32px;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__slide.is-enter-next,
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__slide.is-enter-prev {
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__slide.is-enter-next:not(.is-active) .large-16-9-hero-card__image,
body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__slide.is-enter-prev:not(.is-active) .large-16-9-hero-card__image {
  transform: scale(1.03);
  transition: none;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  --moonset-slider-fill: var(--nav-background);
  --moonset-slider-fill-hover: var(--nav-hover);
  --moonset-slider-on: var(--pbp-moonset-on);
  --moonset-slider-dot: rgba(201, 211, 229, 0.55);
  --moonset-slider-bar: var(--pbp-moonset-on);
  --moonset-slider-bar-track: rgba(201, 211, 229, 0.32);
  --moonset-slider-bar-fill: var(--pbp-moonset-on);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__play.btn.icon-only.standard {
  appearance: none;
  -webkit-appearance: none;
  background: var(--moonset-slider-fill);
  color: var(--moonset-slider-on);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__play.btn.icon-only.standard:hover {
  background: var(--moonset-slider-fill-hover);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__play .icon[data-icon=pause] {
  width: 20px;
  height: 20px;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicators {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--moonset-slider-fill);
  gap: 10px;
  transition: background-color 160ms ease;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicators:hover {
  background: var(--moonset-slider-fill-hover);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicator.is-active {
  width: 34px;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicator-track {
  display: block;
  width: 6px;
  height: 6px;
  overflow: hidden;
  border-radius: 100px;
  background: var(--moonset-slider-dot);
  transform-origin: center;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1), background-color 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicator.is-active .pbp-moonset-hero-slider__indicator-track {
  width: 22px;
  background: var(--moonset-slider-bar);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider.is-playing .pbp-moonset-hero-slider__indicator.is-active .pbp-moonset-hero-slider__indicator-track {
  background: var(--moonset-slider-bar-track);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicator-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--moonset-slider-bar-fill);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider:not(.is-playing) .pbp-moonset-hero-slider__indicator.is-active .pbp-moonset-hero-slider__indicator-fill {
  width: 100%;
  background: transparent;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider.is-playing .pbp-moonset-hero-slider__indicator.is-active .pbp-moonset-hero-slider__indicator-fill {
  animation: pbp-moonset-hero-progress 5s linear forwards;
}

@keyframes pbp-moonset-hero-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider.is-playing .pbp-moonset-hero-slider__indicator.is-active .pbp-moonset-hero-slider__indicator-fill {
    animation: none;
    width: 100%;
  }
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicator,
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__indicator-track {
    transition: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider__slide {
    transition: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-moonset-hero-slider .large-16-9-hero-card__image {
    transition: none;
    transform: scale(1);
  }
}
/* Regiondo standalone image sliders: Moonset controls/behavior, no card chrome. */
body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening + .pbp-image-slider,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-statement-copy + .pbp-image-slider,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-statement-copy + .pbp-regiondo-kiosk-media {
  margin-top: 120px;
}
body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening + .pbp-image-slider[data-pbp-slider-label="Lesson laptop slides"] {
  margin-top: 0;
  margin-bottom: 0;
}
body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening + .pbp-image-slider[data-pbp-slider-label="Regiondo laptop slides"] {
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
}
body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening + .pbp-regiondo-browsers {
  gap: 0;
  margin-top: -160px;
  margin-bottom: -120px;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-regiondo-browsers + .content-vertical-space,
body[data-site-section=portfolio][data-app-section=pbp].pbp-regiondo-page .pbp-regiondo-kiosk-media + .content-vertical-space {
  position: relative;
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening:has(+ .pbp-regiondo-browsers) {
  position: relative;
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-regiondo-browsers {
  width: 200%;
  max-width: none;
  margin-inline: -50%;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-regiondo-browsers .pbp-image-slider__viewport {
  width: 100%;
  max-width: none;
  aspect-ratio: 3676 / 2847;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening:has(+ .pbp-image-slider) .pbp-statement-copy > .portfolio-intro,
body[data-site-section=portfolio][data-app-section=pbp] .portfolio-page > .pbp-statement-copy:has(+ .pbp-image-slider) > .portfolio-intro,
body[data-site-section=portfolio][data-app-section=pbp] .portfolio-page > .pbp-statement-copy:has(+ .pbp-regiondo-kiosk-media) > .portfolio-intro {
  margin-bottom: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider--laptop,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider--browser {
  margin-bottom: 120px;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider--laptop {
  --pbp-image-slider-natural-width: 1954px;
  --pbp-image-slider-natural-height: 1191px;
  --pbp-image-slider-aspect: 1954 / 1191;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider--browser {
  --pbp-image-slider-natural-width: 1603px;
  --pbp-image-slider-natural-height: 1066px;
  --pbp-image-slider-aspect: 1603 / 1066;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider .icon[data-icon=play_arrow] {
  --icon-url: url("../icons/play_arrow.svg?v=opsz24-2");
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider .icon[data-icon=pause] {
  --icon-url: url("../icons/pause.svg?v=opsz24-2");
}

:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__play .icon[data-icon=play_arrow],
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__play .icon[data-icon=play_arrow] {
  --icon-url: url("../icons/fill1/play_arrow.svg?v=opsz24-fill1-wght300");
}

:root[data-style=hig] body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__play .icon[data-icon=pause],
:root[data-style=fat-hig] body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__play .icon[data-icon=pause] {
  --icon-url: url("../icons/fill1/pause.svg?v=opsz24-fill1-wght300");
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__stage {
  display: block;
  width: 100%;
  min-width: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__viewport {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: min(100%, var(--pbp-image-slider-natural-width));
  margin-inline: auto;
  aspect-ratio: var(--pbp-image-slider-aspect);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__track {
  position: relative;
  height: 100%;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__slide.is-enter-next,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__slide.is-enter-prev {
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  --pbp-image-slider-fill: color-mix(in srgb, var(--background) 97%, black);
  --pbp-image-slider-fill-hover: var(--nav-hover);
  --pbp-image-slider-on: var(--on-surface);
  --pbp-image-slider-dot: color-mix(in srgb, var(--on-surface-variant) 55%, transparent);
  --pbp-image-slider-bar: var(--on-surface);
  --pbp-image-slider-bar-track: color-mix(in srgb, var(--on-surface-variant) 32%, transparent);
  --pbp-image-slider-bar-fill: var(--on-surface);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__play.btn.icon-only.standard {
  appearance: none;
  -webkit-appearance: none;
  background: var(--pbp-image-slider-fill);
  color: var(--pbp-image-slider-on);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__play.btn.icon-only.standard:hover {
  background: var(--pbp-image-slider-fill-hover);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__play .icon[data-icon=pause] {
  width: 20px;
  height: 20px;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicators {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--pbp-image-slider-fill);
  gap: 10px;
  transition: background-color 160ms ease;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicators:hover {
  background: var(--pbp-image-slider-fill-hover);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicator.is-active {
  width: 34px;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicator-track {
  display: block;
  width: 6px;
  height: 6px;
  overflow: hidden;
  border-radius: 100px;
  background: var(--pbp-image-slider-dot);
  transform-origin: center;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1), background-color 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicator.is-active .pbp-image-slider__indicator-track {
  width: 22px;
  background: var(--pbp-image-slider-bar);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider.is-playing .pbp-image-slider__indicator.is-active .pbp-image-slider__indicator-track {
  background: var(--pbp-image-slider-bar-track);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicator-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--pbp-image-slider-bar-fill);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider:not(.is-playing) .pbp-image-slider__indicator.is-active .pbp-image-slider__indicator-fill {
  width: 100%;
  background: transparent;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider.is-playing .pbp-image-slider__indicator.is-active .pbp-image-slider__indicator-fill {
  animation: pbp-image-slider-progress 5s linear forwards;
}

@keyframes pbp-image-slider-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening + .pbp-image-slider,
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-statement-copy + .pbp-image-slider,
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-statement-copy + .pbp-regiondo-kiosk-media {
    margin-top: 48px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening + .pbp-regiondo-browsers,
  body[data-site-section=portfolio][data-app-section=pbp].pbp-regiondo-page .pbp-statement-copy + .pbp-regiondo-kiosk-media {
    margin-top: 0;
    margin-bottom: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider.is-playing .pbp-image-slider__indicator.is-active .pbp-image-slider__indicator-fill {
    animation: none;
    width: 100%;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicator,
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__indicator-track {
    transition: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-image-slider__slide {
    transition: none;
  }
}
body[data-site-section=portfolio][data-app-section=pbp] .scroll-column:has(.pbp-regiondo-kiosk-media),
body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content:has(.pbp-regiondo-kiosk-media) {
  overflow-x: clip;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-regiondo-kiosk-media {
  position: relative;
  overflow: visible;
  height: 2000px;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-regiondo-kiosk-media__image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 2500px;
  max-width: none;
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-lesson-page .pbp-opening:has(+ .pbp-regiondo-kiosk-media),
body[data-site-section=portfolio][data-app-section=pbp].pbp-lesson-page .pbp-statement-copy:has(+ .pbp-regiondo-kiosk-media) {
  position: relative;
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-lesson-page .pbp-regiondo-kiosk-media {
  display: block;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: 160%;
  max-width: none;
  height: auto;
  margin-top: -160px;
  margin-bottom: -120px;
  margin-inline: -30%;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-lesson-page .pbp-opening + .pbp-regiondo-kiosk-media {
  width: 200%;
  margin-inline: -50%;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-lesson-page .pbp-regiondo-kiosk-media + .content-vertical-space {
  position: relative;
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-lesson-page .pbp-regiondo-kiosk-media__image {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp].pbp-lesson-page .pbp-regiondo-kiosk-media {
    margin-top: 0;
    margin-bottom: 0;
  }

  body[data-site-section=portfolio][data-app-section=pbp].pbp-lesson-page .pbp-statement-copy + .pbp-regiondo-kiosk-media {
    margin-top: 48px;
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-regiondo-kiosk-media + .portfolio-hook--section {
  margin-top: 80px;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-regiondo-page .pbp-statement-copy:has(+ .pbp-regiondo-kiosk-media) {
  position: relative;
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-regiondo-page .pbp-statement-copy + .pbp-regiondo-kiosk-media {
  position: relative;
  z-index: 1;
  overflow: visible;
  width: 160%;
  max-width: none;
  height: auto;
  margin-top: -160px;
  margin-bottom: -120px;
  margin-inline: -30%;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-regiondo-page .pbp-regiondo-kiosk-media__image {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp].pbp-regiondo-page .pbp-statement-copy + .pbp-regiondo-kiosk-media {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Doo Connect project page: independent layout; colors match PBP HIG dark. */
body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page {
  --primary: #0a84ff;
  --primary-hover: #409cff;
  --on-primary: #ffffff;
  --primary-container: #0b3a75;
  --primary-container-hover: #124888;
  --on-primary-container: #d6e8ff;
  --secondary: #5e5ce6;
  --on-secondary: #ffffff;
  --secondary-container: #2c2a63;
  --secondary-container-hover: #383575;
  --on-secondary-container: #ecebff;
  --tertiary: #bf5af2;
  --on-tertiary: #ffffff;
  --tertiary-container: #4a1a63;
  --on-tertiary-container: #f6e6ff;
  --background: #000000;
  --surface: #1c1c1e;
  --on-surface: #ffffff;
  --surface-variant: #3a3a3c;
  --on-surface-variant: #98989d;
  --outline: #636366;
  --outline-variant: #3a3a3c;
  --outline-subtle: #2c2c2e;
  --surface-lowest: #000000;
  --surface-low: #1c1c1e;
  --surface-low-hover: #2c2c2e;
  --surface-container: #1c1c1e;
  --surface-high: #2c2c2e;
  --surface-highest: #3a3a3c;
  --inverse-surface: #f2f2f7;
  --inverse-on-surface: #000000;
  --error: #ff453a;
  --on-error: #ffffff;
  --nav-background: #000000;
  --nav-hover: #2c2c2e;
  --nav-selected: #0b3a75;
  --nav-selected-hover: #124888;
  --nav-parent-selected: #2c2c2e;
  --nav-parent-selected-hover: #3a3a3c;
  --state-hover: rgba(255, 255, 255, 0.08);
  --row-hover: rgba(255, 255, 255, 0.05);
  --canvas: var(--background);
  --field-fill: var(--surface-lowest);
  --shadow: 0 0.5px 0 rgba(255, 255, 255, 0.08);
  --elevation-1: 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
  --elevation-2: 0 12px 32px rgba(0, 0, 0, 0.5);
  --elevation-3: 0 20px 48px rgba(0, 0, 0, 0.58);
  --switch-on: #30d158;
  color-scheme: dark;
  background: var(--background);
  color: var(--on-surface);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .main-card {
  background: var(--background);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-statement-copy {
  position: relative;
  overflow: visible;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .scroll-column {
  overflow-x: clip;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .content.portfolio-content {
  overflow-x: clip;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-statement-copy > .portfolio-intro {
  margin-bottom: 0;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-doo-connect-logo-media {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-doo-connect-logo-media__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-doo-connect-logo-media__image {
    width: 80%;
    max-width: 80%;
  }
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-doo-connect-phones-media {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-doo-connect-phones-media__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-canvas-phones-media {
  display: block;
  flex: 0 0 auto;
  width: 150%;
  max-width: none;
  min-width: 0;
  margin-inline: -25%;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-canvas-phones-media__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-inline: auto;
}

body[data-site-section=portfolio][data-app-section=pbp] .scroll-column:has(.pbp-canvas-top-media),
body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content:has(.pbp-canvas-top-media) {
  overflow-x: clip;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-canvas-top-media {
  display: block;
  flex: 0 0 auto;
  width: calc(100% + 2 * var(--sandbox-content-inline, 20px));
  min-width: 0;
  margin-left: calc(-1 * var(--sandbox-content-inline, 20px));
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-canvas-top-media__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-canvas-top-media {
    width: calc(100% + var(--sandbox-content-pad-left) + var(--sandbox-content-inline));
    margin-left: calc(-1 * var(--sandbox-content-pad-left));
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .scroll-column:has(.pbp-rebezle-top-media),
body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content:has(.pbp-rebezle-top-media) {
  overflow-x: clip;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening:has(+ .pbp-rebezle-top-media) {
  position: relative;
  z-index: 1;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-rebezle-top-media + .content-vertical-space {
  position: relative;
  z-index: 1;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-rebezle-top-media + .portfolio-hook__text {
  margin-top: -160px;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-rebezle-top-media {
  display: block;
  flex: 0 0 auto;
  width: calc(100% + 2 * var(--sandbox-content-inline, 20px));
  min-width: 0;
  margin-left: calc(-1 * var(--sandbox-content-inline, 20px));
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-rebezle-top-media__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-top: calc(100% * -332 / 2000);
  margin-bottom: calc(100% * -366 / 2000);
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-rebezle-top-media {
    width: calc(100% + var(--sandbox-content-pad-left) + var(--sandbox-content-inline));
    margin-left: calc(-1 * var(--sandbox-content-pad-left));
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening:has(.pbp-sisifussy-top-media) .pbp-statement-copy,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-opening:has(.pbp-sisifussy-top-media) ~ * {
  position: relative;
  z-index: 2;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-sisifussy-top-media {
  position: relative;
  z-index: 0;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-sisifussy-top-media__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-sisifussy-top-media {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-top: -80px;
    margin-bottom: -80px;
  }
}
@media (max-width: 599px) {
  body[data-site-section=portfolio][data-app-section=pbp] .portfolio-page > .pbp-opening:first-child .pbp-sisifussy-top-media {
    margin-top: -120px;
  }
}
@media (min-width: 600px) and (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-sisifussy-top-media {
    margin-top: -160px;
    margin-bottom: -120px;
  }
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-sisifussy-top-media {
    width: calc(100% + var(--sandbox-content-pad-left) + var(--sandbox-content-inline));
    margin-bottom: -260px;
    margin-left: calc(-1 * var(--sandbox-content-pad-left));
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-sisifussy-top-media__image {
    margin-top: calc(100% * -602 / 2000);
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-rebezle-laptop-slide-media {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-rebezle-laptop-slide-media__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-canvas-offline-phones-media {
  display: block;
  flex: 0 0 auto;
  width: 150%;
  max-width: none;
  min-width: 0;
  margin-inline: -25%;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-canvas-offline-phones-media__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-inline: auto;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-doo-connect-landing-media {
  display: block;
  width: 100%;
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-doo-connect-page .pbp-doo-connect-landing-media__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

@media (min-width: 1180px) {
  .content-layout:has(.pbp-statement-page) {
    flex: 1 1 auto;
    height: 100%;
  }
  .scroll-column:has(.pbp-statement-page) {
    display: flex;
    flex-direction: column;
  }
  body[data-site-section=portfolio] .content.portfolio-content:has(.pbp-statement-page) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 0;
  }
  .pbp-statement-page {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 100%;
  }
  .pbp-statement-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  .pbp-statement-copy::before {
    content: "";
    flex: 1 1 0;
    min-height: 0;
  }
  .pbp-statement-copy::after {
    content: "";
    flex: 1 1 0;
    min-height: 0;
  }
  .pbp-statement-copy > .portfolio-hook,
  .pbp-statement-copy > .portfolio-intro {
    flex: 0 0 auto;
  }
  .pbp-statement-copy > .portfolio-hook:not(.portfolio-hook--section) {
    padding-top: 0;
  }
  .pbp-statement-copy > .portfolio-hook--section {
    padding-bottom: 0;
  }
}

/* Who: filled Contact button uses navigation-rail link colors. */
body[data-site-section=portfolio][data-app-section=pbp] .pbp-who-contact.btn.filled {
  display: flex;
  align-self: center;
  flex: 0 0 auto;
  width: fit-content;
  margin-inline: auto;
  background: color-mix(in srgb, var(--on-surface) 70%, var(--on-surface-variant));
  color: var(--on-primary);
}
body[data-site-section=portfolio][data-app-section=pbp] .pbp-who-contact.btn.filled:visited {
  color: var(--on-primary);
}
body[data-site-section=portfolio][data-app-section=pbp] .pbp-who-contact.btn.filled:hover,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-who-contact.btn.filled:active {
  background: var(--on-surface);
  color: var(--on-primary);
}
body[data-site-section=portfolio][data-app-section=pbp] .pbp-who-contact.btn.filled:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (min-width: 1180px) {
  /* What + project pages: size the page to its content. How / Why / Who keep
     the first-fold flex fill. Bottom padding clears the fixed FAB
     (30px inset + 56px height + 24px gap). */
  body[data-site-section=portfolio] .content.portfolio-content:has(.pbp-what-page) {
    flex: 0 0 auto;
    height: auto;
    padding-bottom: 0;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content:has(.pbp-what-page:not(.pbp-project-page)) {
    width: 100%;
    margin-inline: 0;
    align-self: stretch;
    box-sizing: border-box;
  }
  .pbp-what-page:not(.pbp-project-page) {
    width: 100%;
  }
  .pbp-what-page > .portfolio-page-app-bar-sticky {
    flex: 0 0 auto;
    align-self: stretch;
  }
  .pbp-what-page .pbp-statement-copy {
    flex: 0 0 auto;
  }
  .pbp-opening {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    box-sizing: border-box;
  }
  .pbp-opening:has(> .large-16-9-hero-card):not(:has(> .pbp-ai-ds-plain-card)),
  .pbp-opening:has(> .pbp-moonset-hero-slider) {
    min-height: 100dvh;
  }
  .pbp-opening > .pbp-statement-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  .pbp-opening > .pbp-statement-copy::before {
    content: none;
    display: none;
  }
  .pbp-opening > .pbp-statement-copy::after {
    content: "";
    flex: 1 1 auto;
    min-height: 0;
  }
  .pbp-opening > .large-16-9-hero-card,
  .pbp-opening > .pbp-moonset-hero-slider {
    flex: 0 0 auto;
  }
}

/* Temporary: AI Design System opening card is a plain grid of Small app bars. */
.large-16-9-hero-card.pbp-ai-ds-plain-card {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  cursor: default;
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
  align-self: auto;
  overflow: visible;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  --primary: #9334EA;
  --primary-hover: #7B2CC5;
  --primary-container: #F4EBFD;
  --primary-container-hover: #EDDEFC;
  --on-primary-container: #45186E;
  --primary-state: color-mix(in srgb, var(--primary) 10%, transparent);
}
:root[data-style=hig] .large-16-9-hero-card.pbp-ai-ds-plain-card,
:root[data-style=fat-hig] .large-16-9-hero-card.pbp-ai-ds-plain-card,
:root[data-style=m3] .large-16-9-hero-card.pbp-ai-ds-plain-card,
:root:not([data-style=hig]):not([data-style=fat-hig]) .large-16-9-hero-card.pbp-ai-ds-plain-card {
  aspect-ratio: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
:root[data-style=hig] .large-16-9-hero-card.pbp-ai-ds-plain-card:hover,
:root[data-style=fat-hig] .large-16-9-hero-card.pbp-ai-ds-plain-card:hover,
:root[data-style=m3] .large-16-9-hero-card.pbp-ai-ds-plain-card:hover,
:root:not([data-style=hig]):not([data-style=fat-hig]) .large-16-9-hero-card.pbp-ai-ds-plain-card:hover {
  z-index: auto;
  box-shadow: none;
  transform: none;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  height: auto;
  min-height: auto;
  align-items: start;
}
:root[data-style=hig] .pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid {
  column-gap: 32px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}
:root[data-style=hig] .pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column {
  gap: 32px;
}
@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid {
    --pbp-cards-inline: 20px;
    --pbp-cards-peek: 24px;
    grid-template-columns: repeat(3, calc(100% - var(--pbp-cards-peek)));
    column-gap: var(--pbp-cards-inline);
    box-sizing: border-box;
    width: calc(100% + (2 * var(--pbp-cards-inline)));
    margin-left: calc(-1 * var(--pbp-cards-inline));
    margin-right: calc(-1 * var(--pbp-cards-inline));
    padding-left: var(--pbp-cards-inline);
    padding-right: var(--pbp-cards-inline);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pbp-cards-inline);
    scrollbar-width: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid::-webkit-scrollbar {
    display: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > * {
    scroll-snap-stop: always;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > :nth-child(3n + 1) {
    scroll-snap-align: start;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > :nth-child(3n + 2) {
    scroll-snap-align: center;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > :nth-child(3n) {
    scroll-snap-align: end;
  }
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > * {
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .true-false-card {
  align-self: stretch;
  width: 100%;
  max-width: none;
  border-radius: 0;
  overflow: visible;
}
.pbp-ai-ds-plain-card .true-false-card__image {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
.pbp-ai-ds-plain-card .true-false-card__body {
  background: #eae3f7;
}
.pbp-ai-ds-plain-card .true-false-card__back--farther {
  background: #d9cee9;
}
.pbp-ai-ds-plain-card .true-false-card__back--far {
  background: color-mix(in srgb, #d9cee9 70%, #fff);
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .pbp-ai-ds-input-slot {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: #eae3f7;
  --field-fill: #eae3f7;
  border-radius: 28px;
  padding: 20px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-input-slot .material-input-field.filled .material-input-field__control label,
.pbp-ai-ds-plain-card .pbp-ai-ds-input-slot .material-input-field__control:has(input:not(:placeholder-shown)) label {
  background: #eae3f7;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-input-slot .material-input-field__control {
  height: 54px;
  min-height: 54px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .embedded-basic-dialog {
  align-self: start;
  width: 100%;
  border-radius: 28px;
  background: #eae3f7;
  color: #45186e;
  box-shadow: none;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .embedded-fullscreen-dialog {
  align-self: start;
  width: 100%;
  border-radius: 28px;
  background: #eae3f7;
  color: #45186e;
  box-shadow: none;
  --field-fill: #eae3f7;
}
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .embedded-fullscreen-body {
  --field-fill: #eae3f7;
}
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .embedded-fullscreen-bar,
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .embedded-fullscreen-footer {
  background: #eae3f7;
}
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .embedded-fullscreen-bar {
  border-bottom-color: #cfc0e2;
}
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .embedded-fullscreen-footer::before {
  background: #cfc0e2;
}
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .embedded-fullscreen-bar h3,
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .fullscreen-dialog-settings__body {
  color: #45186e;
}
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .fullscreen-dialog-settings__sup,
.pbp-ai-ds-plain-card .embedded-fullscreen-dialog .fullscreen-dialog-settings__counter {
  color: #6b5484;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .search-app-bar-preview,
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .pbp-ai-ds-tabs-slot {
  align-self: stretch;
  width: 100%;
  height: 64px;
}
.pbp-ai-ds-plain-card .embedded-basic-dialog h3 {
  color: #45186e;
}
.pbp-ai-ds-plain-card .embedded-basic-dialog p {
  color: #6b5484;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .adaptive-date-fullscreen-dialog {
  align-self: start;
  width: 100%;
  max-width: none;
  border-radius: 28px;
  background: #eae3f7;
  color: #45186e;
  box-shadow: none;
  /* Clip the rounded shell without making it a scroll container. Safari drops sticky layers inside overflow:hidden while the page scrolls. */
  overflow: clip;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-fullscreen-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-calendar-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-sticky-header {
  position: relative;
  top: auto;
  flex: 0 0 auto;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-month-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-fullscreen-bar,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-fullscreen-body,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-fullscreen-footer,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-sticky-header,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-calendar {
  background: #eae3f7;
  color: #45186e;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-fullscreen-bar {
  border-bottom-color: #cfc0e2;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-fullscreen-footer {
  border-top-color: #cfc0e2;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-fullscreen-bar h2,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-headline h3,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-weekdays,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-select,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .btn.date-picker-day:not(.selected) {
  color: #45186e;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-month-section h4 {
  color: #6b5484;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-headline {
  padding: 0 24px 6px;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-month-section h4 {
  padding-right: 24px;
  padding-left: 24px;
}
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-weekdays,
.pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-grid {
  box-sizing: border-box;
  grid-template-columns: repeat(7, 40px);
  justify-content: space-between;
  padding-right: 9px;
  padding-left: 9px;
}
@media (max-width: 599px) {
  .pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-weekdays,
  .pbp-ai-ds-plain-card .adaptive-date-fullscreen-dialog .date-picker-grid {
    grid-template-columns: repeat(7, 36px);
    padding-right: 11px;
    padding-left: 11px;
  }
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .pbp-ai-ds-compact-buttons {
  align-self: stretch;
  width: 100%;
  height: 64px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .pbp-ai-ds-segmented-slot {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: #eae3f7;
  padding: 12px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-segmented-slot > .segmented-control {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  background: #d9cee9;
  border-radius: var(--radius-full);
}
.pbp-ai-ds-plain-card .pbp-ai-ds-segmented-slot > .segmented-control .segment {
  flex: 1 1 0;
  min-width: 0;
  color: #45186e;
  border-radius: var(--radius-full);
}
.pbp-ai-ds-plain-card .pbp-ai-ds-segmented-slot > .segmented-control .segment:not(.selected):hover {
  background: #c9bade;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-segmented-slot > .segmented-control .segment.selected,
.pbp-ai-ds-plain-card .pbp-ai-ds-segmented-slot > .segmented-control .segment[aria-checked=true] {
  background: #ffffff;
  box-shadow: none;
  color: #45186e;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-segmented-slot > .segmented-control .segment.selected:hover {
  background: #f8f4fe;
}
:root[data-style=hig] .pbp-ai-ds-plain-card .search-app-bar .btn.app-bar-avatar-button {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
}
.pbp-ai-ds-plain-card .search-app-bar {
  background: #EAE3F7;
  --field-fill: #EAE3F7;
  padding-left: 8px;
  padding-right: 8px;
}
.pbp-ai-ds-plain-card .search-app-bar .search-box {
  border-color: #aeaeb2;
}
.pbp-ai-ds-plain-card .search-app-bar .search-box:hover {
  border-color: #8e8e93;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-compact-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: #EAE3F7;
  padding-left: 12px;
  padding-right: 12px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-compact-buttons > .btn {
  flex: 1 1 0;
  min-width: 0;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-compact-buttons > .btn.tonal {
  background: #ffffff;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-compact-buttons > .btn.tonal:hover {
  background: #f8f4fe;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-compact-icon-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: #EAE3F7;
  padding: 12px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-compact-icon-buttons > .btn.tonal {
  background: #ffffff;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-compact-icon-buttons > .btn.tonal:hover {
  background: #f8f4fe;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-slider-slot {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  min-width: 0;
  background: #eae3f7;
  padding-left: 32px;
  padding-right: 32px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-slider-slot > .slider-field {
  min-width: 0;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-slider-slot .slider-track {
  background: #cfc0e2;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-tabs-slot {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: #eae3f7;
  padding-left: 28px;
  padding-right: 28px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-tabs-slot > .tabs {
  width: 100%;
  min-width: 0;
  border-bottom: 0;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-tabs-slot > .tabs > .tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-top: 3px;
  padding-bottom: 0;
  text-align: center;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .small-app-bar {
  min-width: 0;
  background: #EAE3F7;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .small-app-bar:first-child {
  padding-left: 8px;
  padding-right: 8px;
}
.pbp-ai-ds-plain-card .pbp-ai-ds-app-bar-grid > .pbp-ai-ds-column > .small-app-bar h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-plain-card .navigation-bar-demo,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-plain-card .navigation-bar-demo:hover {
  align-self: stretch;
  background: #eae3f7;
  border-radius: 28px;
  transform: none;
}

/* AI Design System: standalone spiral, full available width, bleeding under the headline and summary cards. */
.pbp-ai-ds-spiral {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: calc(-34% - 160px);
  margin-bottom: calc(-34% - 80px);
  top: -20px;
}
.portfolio-page > .portfolio-hook__text:has(+ .pbp-ai-ds-spiral),
.portfolio-page > .portfolio-hook__text:has(+ .content-vertical-space + .pbp-ai-ds-spiral) {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  background: transparent;
}
.portfolio-page:has(.pbp-ai-ds-spiral) > .content-vertical-space:has(+ .portfolio-hook__text),
.portfolio-page:has(.pbp-ai-ds-spiral) > .portfolio-hook__text + .content-vertical-space {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: var(--content-vertical-space);
  min-height: var(--content-vertical-space);
}
.pbp-ai-ds-spiral + .static-small-cards {
  position: relative;
  z-index: 2;
  margin-top: 60px;
  background: transparent;
}
@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-spiral {
    width: calc(100% + 2 * var(--sandbox-content-inline, 20px));
    margin-left: calc(-1 * var(--sandbox-content-inline, 20px));
    margin-top: 0;
    margin-bottom: 0;
    top: 0;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-spiral + .static-small-cards {
    margin-top: 0;
  }
}
@media (min-width: 600px) and (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-spiral {
    margin-top: -200px;
    margin-bottom: -120px;
  }
}
@media (max-width: 599px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-spiral {
    margin-top: -140px;
    margin-bottom: -60px;
  }
}
@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-ai-ds-spiral {
    width: calc(100% + var(--sandbox-content-pad-left) + var(--sandbox-content-inline));
    margin-left: calc(-1 * var(--sandbox-content-pad-left));
  }
  .portfolio-page > .portfolio-hook__text:has(+ .pbp-ai-ds-spiral),
  .portfolio-page > .portfolio-hook__text:has(+ .content-vertical-space + .pbp-ai-ds-spiral) {
    margin-top: 0;
  }
}
.portfolio-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: -22px;
  margin-bottom: 48px;
  margin-inline: -16px;
  cursor: pointer;
}

.portfolio-hero--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-inline: 0;
  height: 100%;
  min-height: 0;
}

.portfolio-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-top: 0;
  margin-bottom: 48px;
  margin-inline: 160px;
}

.home-youtube-section {
  margin-top: 0;
  margin-bottom: 48px;
  margin-inline: 160px;
}

.home-youtube-video {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-low);
}

.home-youtube-video iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.home-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-top: 0;
  margin-bottom: 48px;
  margin-inline: 160px;
}

.pbp-what-page:not(.pbp-project-page) > .home-cta-grid {
  margin-inline: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page > .home-cta-grid {
  container-type: inline-size;
  margin-bottom: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .pbp-what-standard-card-grid {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: 1fr;
  gap: inherit;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .pbp-what-standard-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .pbp-what-standard-card-grid > .large-1-1-hero-card-image-top-left {
  aspect-ratio: 4/5;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .display-large {
  font-size: clamp(36px, 6vw, 45px);
  line-height: 52px;
  letter-spacing: 0;
}
@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .display-large {
    font-size: clamp(44px, 7vw, 57px);
    line-height: 64px;
    letter-spacing: -0.25px;
  }
}
body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .large-1-1-hero-card-image-top-left__sup {
  margin-bottom: 0;
}
body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .display-large {
  margin-top: calc(0.16em - (1lh - 1em) / 2 - 4px);
}
@media (max-width: 599px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .large-1-1-hero-card-image-top-left {
    padding: 24px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .large-1-1-hero-card-image-top-left__sup {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.1px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .display-large {
    line-height: 44px;
    margin-top: calc(0.16em - (1lh - 1em) / 2 - 4px + 8px);
  }
}
@media (min-width: 600px) and (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .display-large {
    margin-top: calc(0.16em - (1lh - 1em) / 2 - 4px + 8px);
  }
}
@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .display-large {
    margin-top: calc(0.16em - (1lh - 1em) / 2 - 4px + 8px);
  }
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .pbp-what-standard-card-grid > .large-1-1-hero-card-image-top-left:not(.pbp-what-ai-ds-card) {
    aspect-ratio: 3/4;
  }

  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .pbp-what-standard-card-grid > .pbp-what-ai-ds-card {
    grid-column: span 2;
    aspect-ratio: auto;
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-ai-ds-card.large-1-1-hero-card-image-top-left {
  background: #ffffff;
  --field-fill: #ffffff;
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-ai-ds-card .large-1-1-hero-card-image-top-left__sup {
  color: #6c6c70;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-ai-ds-card .display-large {
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-ai-ds-card .btn.icon-only.standard {
  background: #000000;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-ai-ds-card .btn.icon-only.standard:hover {
  background: #000000;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-ai-ds-card .large-1-1-hero-card-image-top-left__image,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-lesson-card .large-1-1-hero-card-image-top-left__image {
  left: 50%;
  top: 0;
  bottom: 0;
  width: auto;
  height: 100%;
  aspect-ratio: 2831 / 1621;
  max-width: none;
  object-fit: contain;
  transform: translateX(-50%);
  border-radius: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-sisifussy-card.large-1-1-hero-card-image-top-left {
  grid-column: 1/-1;
  aspect-ratio: auto;
  height: calc(100cqw * 5 / 4);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-sisifussy-card .large-1-1-hero-card-image-top-left__image {
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  border-radius: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-sisifussy-card .btn.icon-only.standard {
  background: #000000;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-sisifussy-card .btn.icon-only.standard:hover {
  background: #000000;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-doo-desktop-card.large-1-1-hero-card-image-top-left {
  grid-column: 1/-1;
  aspect-ratio: auto;
  height: calc(((100cqw - 32px) / 2) * 5 / 4);
  background: #000000;
  --field-fill: #000000;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-doo-desktop-card .large-1-1-hero-card-image-top-left__sup {
  color: #d1d1d6;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-doo-desktop-card .display-large {
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-doo-desktop-card .btn.icon-only.standard {
  background: #ffffff;
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-doo-desktop-card .btn.icon-only.standard:hover {
  background: #ffffff;
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-lesson-card.large-1-1-hero-card-image-top-left {
  background: #9435eb;
  --field-fill: #9435eb;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-lesson-card .large-1-1-hero-card-image-top-left__sup {
  color: #f3e8ff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-lesson-card .display-large {
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-lesson-card .btn.icon-only.standard {
  background: #ffffff;
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-lesson-card .btn.icon-only.standard:hover {
  background: #ffffff;
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-canvas-card.large-1-1-hero-card-image-top-left {
  background: #fefefe;
  --field-fill: #fefefe;
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-canvas-card .large-1-1-hero-card-image-top-left__sup {
  color: #6c6c70;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-canvas-card .display-large {
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-canvas-card .btn.icon-only.standard,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-canvas-card .btn.icon-only.standard:hover {
  background: #000000;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-canvas-card__media {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: calc(anchor(--large-1-1-hero-card-image-top-left-title bottom) + 32px);
  bottom: 32px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-canvas-card__media .large-1-1-hero-card-image-top-left__image {
  position: static;
  height: 100%;
  min-height: 0;
  width: auto;
  max-width: none;
  object-fit: contain;
  transform: none;
  border-radius: 0;
}

@media (max-width: 599px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-canvas-card__media {
    top: calc(anchor(--large-1-1-hero-card-image-top-left-title bottom) + 24px);
    bottom: 24px;
  }

  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-doo-desktop-card .pbp-what-canvas-card__media,
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-rebezle-card .pbp-what-canvas-card__media {
    align-items: center;
  }

  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-doo-desktop-card .pbp-what-canvas-card__media .large-1-1-hero-card-image-top-left__image,
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-rebezle-card .pbp-what-canvas-card__media .large-1-1-hero-card-image-top-left__image {
    height: 80%;
  }
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-regiondo-card .pbp-what-canvas-card__media {
    left: 32px;
    right: 32px;
    bottom: auto;
    height: auto;
    align-items: flex-start;
  }

  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-regiondo-card .pbp-what-canvas-card__media .large-1-1-hero-card-image-top-left__image {
    width: 100%;
    height: auto;
    max-height: none;
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-moonset-card.large-1-1-hero-card-image-top-left {
  background: #041636;
  --field-fill: #041636;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-moonset-card .large-1-1-hero-card-image-top-left__sup {
  color: #c9d3e5;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-moonset-card .display-large {
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-moonset-card .btn.icon-only.standard {
  background: #ffffff;
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-moonset-card .btn.icon-only.standard:hover {
  background: #ffffff;
  color: #000000;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-moonset-card .large-1-1-hero-card-image-top-left__image {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-rebezle-card.large-1-1-hero-card-image-top-left {
  grid-column: 1/-1;
  aspect-ratio: auto;
  height: calc(((100cqw - 32px) / 2) * 5 / 4);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-rebezle-card .btn.icon-only.standard {
  background: #000000;
  color: #ffffff;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-rebezle-card .btn.icon-only.standard:hover {
  background: #000000;
  color: #ffffff;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-sisifussy-card.large-1-1-hero-card-image-top-left,
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-doo-desktop-card.large-1-1-hero-card-image-top-left,
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-rebezle-card.large-1-1-hero-card-image-top-left {
    height: calc(100cqw * (100cqw - 64px) / (100cqw - 16px) * 2 / 3);
  }
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .large-1-1-hero-card-image-top-left {
    aspect-ratio: 4/3;
    height: auto;
  }
}
@media (max-width: 599px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .large-1-1-hero-card-image-top-left {
    aspect-ratio: 1/1;
  }

  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page .home-cta-grid .pbp-what-sisifussy-card.large-1-1-hero-card-image-top-left {
    aspect-ratio: 2000 / 1740;
  }

  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-sisifussy-card .large-1-1-hero-card-image-top-left__image {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    transform: none;
    object-fit: contain;
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 0;
  --pbp-pager-fill: var(--surface);
  --pbp-pager-fill-hover: var(--surface-low-hover);
  --pbp-pager-on: var(--on-surface);
}

body[data-site-section=portfolio][data-app-section=pbp].pbp-moonset-page .pbp-project-pager {
  --pbp-pager-fill: var(--pbp-moonset-rail);
  --pbp-pager-fill-hover: var(--pbp-moonset-surface-low-hover);
  --pbp-pager-on: var(--pbp-moonset-on);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled {
  appearance: none;
  -webkit-appearance: none;
  background: var(--pbp-pager-fill);
  color: var(--pbp-pager-on);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled:visited {
  color: var(--pbp-pager-on);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled:hover,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled:active {
  background: var(--pbp-pager-fill-hover);
  color: var(--pbp-pager-on);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled:disabled,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled[aria-disabled=true] {
  background: var(--pbp-pager-fill);
  color: var(--pbp-pager-on);
  opacity: 0.38;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled:disabled:hover,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled[aria-disabled=true]:hover,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled:disabled:active,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-project-pager .btn.filled[aria-disabled=true]:active {
  background: var(--pbp-pager-fill);
  color: var(--pbp-pager-on);
}

.projects-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin: 0;
}

@media (min-width: 1180px) {
  .projects-cta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.portfolio-hero--stacked .portfolio-hero-card--media {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.portfolio-hero--stacked .portfolio-hero-card--media .task-list-new-task-card {
  height: 260px;
  border-radius: var(--radius-xl);
}

.portfolio-hero--stacked .portfolio-hero-card--media-inset .task-list-new-task-card,
.portfolio-hero--stacked .portfolio-hero-card--media-inset-bottom .task-list-new-task-card {
  background: #c7c7cc;
}

.portfolio-hero--stacked .portfolio-hero-card--media-inset .portfolio-hero-card__image,
.portfolio-hero--stacked .portfolio-hero-card--media-inset-bottom .portfolio-hero-card__image {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-hero--stacked .portfolio-hero-card:not(.portfolio-hero-card--media) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: -48px;
}

.portfolio-hero--stacked .portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-card {
  flex: 1 1 auto;
  height: auto;
  min-height: 100%;
  justify-content: flex-start;
  /* 28px visual top padding above title + 48px image overlap */
  padding: 76px 28px 28px;
}

.portfolio-hero--stacked .portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-footer {
  margin-top: auto;
}

.portfolio-hero--stacked .headline-large,
.portfolio-hero--stacked .headline-medium,
.portfolio-hero--stacked .headline-small {
  margin: 0;
  color: var(--on-surface);
}

.portfolio-hero--stacked.portfolio-hero--text .portfolio-hero-card {
  margin-top: 0;
}

.portfolio-hero--stacked.portfolio-hero--text .portfolio-hero-card .task-list-new-task-card {
  height: auto;
  min-height: 100%;
  justify-content: flex-start;
  padding: 28px;
}

.small-cards-demo .task-list-new-task-footer,
.portfolio-feature-grid > .portfolio-hero--stacked.portfolio-hero--text .task-list-new-task-footer {
  padding-top: 16px;
}

.portfolio-hero-card {
  min-width: 0;
}

.portfolio-hero-card .task-list-new-task-card {
  box-sizing: border-box;
  height: 520px;
  padding: 48px;
  box-shadow: none;
  background: var(--surface-low);
  --cta-enabled-fill: var(--surface-low);
  --field-fill: var(--surface-low);
  border-radius: var(--radius-xl);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.portfolio-hero-card:not(.portfolio-hero-card--media) .task-list-new-task-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .call-to-action-card,
:root[data-style=m3] .call-to-action-card,
:root:not([data-style=hig]):not([data-style=fat-hig]) .portfolio-hero-card,
:root[data-style=m3] .portfolio-hero-card,
:root:not([data-style=hig]):not([data-style=fat-hig]) .portfolio-hero--stacked,
:root[data-style=m3] .portfolio-hero--stacked {
  position: relative;
  border-radius: var(--radius-xl);
  transition: box-shadow 150ms ease;
}

:root:not([data-style=hig]):not([data-style=fat-hig]) .call-to-action-card:hover,
:root[data-style=m3] .call-to-action-card:hover,
:root:not([data-style=hig]):not([data-style=fat-hig]) .portfolio-hero:not(.portfolio-hero--stacked):hover .portfolio-hero-card,
:root[data-style=m3] .portfolio-hero:not(.portfolio-hero--stacked):hover .portfolio-hero-card,
:root:not([data-style=hig]):not([data-style=fat-hig]) .portfolio-hero--stacked:hover,
:root[data-style=m3] .portfolio-hero--stacked:hover {
  z-index: 1;
  box-shadow: var(--elevation-1);
}

.portfolio-hero-card--media .task-list-new-task-card {
  padding: 0;
  overflow: hidden;
  transition: none;
  background: #c7c7cc;
}

.portfolio-hero-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-hero-card .display-large,
.portfolio-hero-card .headline-large,
.portfolio-hero-card .title-large {
  margin: 0;
  color: var(--on-surface);
}

.portfolio-hero-card .display-medium {
  margin: 0;
  color: var(--on-surface);
}

.portfolio-hero-card .body-large {
  margin: 12px 0 0;
  color: var(--on-surface-variant);
}

.portfolio-hero:not(.portfolio-hero--stacked) .task-list-new-task-footer {
  justify-content: flex-start;
}

.portfolio-hero:not(.portfolio-hero--stacked) > .call-to-action-card {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}

.portfolio-hero:not(.portfolio-hero--stacked) > .call-to-action-card .task-list-new-task-card {
  justify-content: flex-start;
}

.portfolio-hero:not(.portfolio-hero--stacked) > .call-to-action-card .task-list-new-task-footer {
  justify-content: flex-end;
}

.portfolio-intro {
  margin-top: 120px;
  margin-inline: 160px;
  margin-bottom: 48px;
}

.portfolio-intro .display-large,
.portfolio-intro .display-medium {
  margin: 0;
  color: var(--on-surface);
}

.portfolio-intro .body-large,
.pbp-statement-copy > .portfolio-intro .title-large {
  margin: 12px auto 0;
  max-width: 1024px;
  color: var(--on-surface-variant);
}

.pbp-statement-copy > .content-small-vertical-space + .portfolio-intro .title-large {
  margin-top: 0;
}

.pbp-statement-copy > .portfolio-intro .title-large + .title-large {
  margin-top: 12px;
}

@keyframes pbp-intro-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-app-section=pbp] .pbp-statement-copy .pbp-fade-word,
  body[data-app-section=pbp] .pbp-statement-copy .pbp-fade-block,
  body[data-app-section=pbp] .pbp-statement-copy .pbp-fade-chip {
    opacity: 0;
    animation-name: pbp-intro-fade;
    animation-duration: 429ms;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-fill-mode: forwards;
  }
  body[data-app-section=pbp] .pbp-fade-card {
    opacity: 0;
  }
  body[data-app-section=pbp] .pbp-fade-card.is-pbp-fade {
    animation-name: pbp-intro-fade;
    animation-duration: 603ms;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-fill-mode: forwards;
  }
  body[data-app-section=pbp] .pbp-fade-footer {
    opacity: 0;
  }
  body[data-app-section=pbp] .pbp-fade-footer.is-pbp-fade {
    animation-name: pbp-intro-fade;
    animation-duration: 1005ms;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-fill-mode: forwards;
  }
}

.call-to-action-card-demo .portfolio-hero {
  margin: 0;
}

.call-to-action-card-demo {
  width: 100%;
  max-width: 100%;
}

.call-to-action-card {
  width: 100%;
  aspect-ratio: 1/1;
  min-width: 0;
  cursor: pointer;
  container-name: cta-card;
  container-type: inline-size;
}

a.call-to-action-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.call-to-action-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.call-to-action-card .task-list-new-task-card {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.call-to-action-card--medium .task-list-new-task-card {
  padding: 80px;
}

.call-to-action-card__sup {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
}

.call-to-action-card .display-large,
.call-to-action-card .headline-large,
.call-to-action-card .title-large {
  margin: 0;
  color: var(--on-surface);
}

@container cta-card (max-width: 480px) {
  .call-to-action-card .display-large {
    font-size: clamp(36px, 6vw, 45px);
    line-height: 52px;
    letter-spacing: 0;
  }
}
.call-to-action-card .task-list-new-task-footer {
  margin-top: auto;
  justify-content: flex-end;
}

.call-to-action-card--primary-container .task-list-new-task-card {
  background: var(--primary-container);
  --cta-enabled-fill: var(--primary-container);
  --field-fill: var(--primary-container);
}

.call-to-action-card--primary-container .call-to-action-card__sup,
.call-to-action-card--primary-container .display-large,
.call-to-action-card--primary-container .btn.icon-only {
  color: var(--on-primary-container);
}

.call-to-action-card--primary .task-list-new-task-card {
  background: var(--primary);
  --cta-enabled-fill: var(--primary);
  --field-fill: var(--primary);
}

.call-to-action-card--primary .call-to-action-card__sup,
.call-to-action-card--primary .display-large,
.call-to-action-card--primary .btn.icon-only {
  color: var(--on-primary);
}

.call-to-action-card--on-primary-container .task-list-new-task-card {
  background: var(--on-primary-container);
  --cta-enabled-fill: var(--on-primary-container);
  --field-fill: var(--on-primary-container);
}

.call-to-action-card--on-primary-container .call-to-action-card__sup,
.call-to-action-card--on-primary-container .display-large,
.call-to-action-card--on-primary-container .btn.icon-only {
  color: var(--primary-container);
}

.call-to-action-card--surface .task-list-new-task-card {
  background: var(--surface);
  --cta-enabled-fill: var(--surface);
  --field-fill: var(--surface);
}

.call-to-action-card--secondary .task-list-new-task-card {
  background: var(--secondary);
  --cta-enabled-fill: var(--secondary);
  --field-fill: var(--secondary);
}

.call-to-action-card--secondary .call-to-action-card__sup,
.call-to-action-card--secondary .display-large,
.call-to-action-card--secondary .btn.icon-only {
  color: var(--on-secondary);
}

.call-to-action-card--secondary-container .task-list-new-task-card {
  background: var(--secondary-container);
  --cta-enabled-fill: var(--secondary-container);
  --field-fill: var(--secondary-container);
}

.call-to-action-card--secondary-container .call-to-action-card__sup,
.call-to-action-card--secondary-container .display-large,
.call-to-action-card--secondary-container .btn.icon-only {
  color: var(--on-secondary-container);
}

.call-to-action-card--on-secondary-container .task-list-new-task-card {
  background: var(--on-secondary-container);
  --cta-enabled-fill: var(--on-secondary-container);
  --field-fill: var(--on-secondary-container);
}

.call-to-action-card--on-secondary-container .call-to-action-card__sup,
.call-to-action-card--on-secondary-container .display-large,
.call-to-action-card--on-secondary-container .btn.icon-only {
  color: var(--secondary-container);
}

.call-to-action-card--tertiary .task-list-new-task-card {
  background: var(--tertiary);
  --cta-enabled-fill: var(--tertiary);
  --field-fill: var(--tertiary);
}

.call-to-action-card--tertiary .call-to-action-card__sup,
.call-to-action-card--tertiary .display-large,
.call-to-action-card--tertiary .btn.icon-only {
  color: var(--on-tertiary);
}

.call-to-action-card--tertiary-container .task-list-new-task-card {
  background: var(--tertiary-container);
  --cta-enabled-fill: var(--tertiary-container);
  --field-fill: var(--tertiary-container);
}

.call-to-action-card--tertiary-container .call-to-action-card__sup,
.call-to-action-card--tertiary-container .display-large,
.call-to-action-card--tertiary-container .btn.icon-only {
  color: var(--on-tertiary-container);
}

.call-to-action-card--on-tertiary-container .task-list-new-task-card {
  background: var(--on-tertiary-container);
  --cta-enabled-fill: var(--on-tertiary-container);
  --field-fill: var(--on-tertiary-container);
}

.call-to-action-card--on-tertiary-container .call-to-action-card__sup,
.call-to-action-card--on-tertiary-container .display-large,
.call-to-action-card--on-tertiary-container .btn.icon-only {
  color: var(--tertiary-container);
}

.call-to-action-card--error .task-list-new-task-card {
  background: var(--error);
  --cta-enabled-fill: var(--error);
  --field-fill: var(--error);
}

.call-to-action-card--error .call-to-action-card__sup,
.call-to-action-card--error .display-large,
.call-to-action-card--error .btn.icon-only {
  color: var(--on-error);
}

.call-to-action-card--inverse-surface .task-list-new-task-card {
  background: var(--inverse-surface);
  --cta-enabled-fill: var(--inverse-surface);
  --field-fill: var(--inverse-surface);
}

.call-to-action-card--inverse-surface .call-to-action-card__sup,
.call-to-action-card--inverse-surface .display-large,
.call-to-action-card--inverse-surface .btn.icon-only {
  color: var(--inverse-on-surface);
}

.call-to-action-card .task-list-new-task-card:hover {
  background: var(--cta-enabled-fill);
  --field-fill: var(--cta-enabled-fill);
}

.hero-text-demo .portfolio-hook {
  margin: 0;
}

.hero-text-demo .pbp-statement-copy {
  padding-top: 120px;
}

.hero-text-demo .pbp-statement-copy > .portfolio-intro {
  margin-bottom: 0;
}

.common-card-demo {
  max-width: 420px;
}

.common-card-demo .portfolio-hero--stacked {
  margin: 0;
}

.common-card-group-demo .portfolio-feature-grid {
  margin-inline: 0;
  margin-bottom: 0;
}

.small-cards-demo .portfolio-feature-grid {
  margin-inline: 0;
  margin-bottom: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

@media (max-width: 1179px) {
  .small-cards-demo .portfolio-feature-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: unset;
  }
}
.demo-block:has(.large-9-16-hero-card-demo) .demo-stage,
.demo-block:has(.large-1-1-hero-card-demo) .demo-stage,
.demo-block:has(.large-1-1-hero-card-image-top-left-demo) .demo-stage,
.demo-block:has(.large-square-hero-card-demo) .demo-stage,
.demo-block:has(.large-4-3-hero-card-image-top-left-demo) .demo-stage,
.demo-block:has(.large-16-9-hero-card-demo) .demo-stage,
.demo-block:has(.hero-text-demo) .demo-stage,
.demo-block:has(.common-card-demo) .demo-stage,
.demo-block:has(.common-card-group-demo) .demo-stage,
.demo-block:has(.small-cards-demo) .demo-stage,
.demo-block:has(.static-small-cards-demo) .demo-stage,
.demo-block:has(.swipe-card-demo) .demo-stage,
.demo-block:has(.call-to-action-card-demo) .demo-stage {
  display: block;
  width: 100%;
}

.task-list-page .task-list-header-card {
  margin-bottom: 12px;
}

.task-list-header-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 32px;
}

.task-list-header-card__top h2 {
  margin: 0;
  color: var(--on-surface);
}

.task-list-header-card__meta {
  margin-top: -16px;
  color: var(--on-surface-variant);
}

.task-list-meta-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.task-list-meta-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  padding: 16px;
}

.task-list-meta-card__icon-wrap {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--nav-background);
}

.task-list-meta-card__icon {
  color: var(--on-surface-variant);
  font-size: 22px;
}

.task-list-meta-card__copy {
  display: grid;
  gap: 4px;
}

.task-list-meta-card__label {
  color: var(--on-surface-variant);
}

.task-list-meta-card__value {
  color: var(--on-surface);
}

.task-list-tasks {
  margin-bottom: 32px;
}

.task-list-task-card {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 0 20px 20px;
}

.task-list-task-card > .card-app-bar {
  margin-right: -20px;
  margin-bottom: 0;
  width: calc(100% + 20px);
  max-width: calc(100% + 20px);
}

.task-list-task-card > .card-app-bar .card-app-bar-bar {
  padding-right: 12px;
}

.task-list-task-card + .task-list-task-card,
.task-list-page-break + .task-list-task-card {
  margin-top: 16px;
}

.task-list-task-card__tags-scroll {
  margin-bottom: 28px;
}

.task-list-task-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-list-status-chip.is-pending {
  border-color: transparent;
  background: #fce8ef;
  color: #8f3d5c;
}

.task-list-status-chip.is-approved {
  border-color: transparent;
  background: #e7f4ea;
  color: #2f6b3f;
}

.task-list-tag-chip {
  cursor: default;
}

.task-list-tag-chip:hover {
  background: var(--surface-lowest);
}

.task-list-task-card__body {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.task-list-task-card__description,
.task-list-task-card__solution {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.task-list-field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--on-surface-variant);
}

.task-list-options {
  display: grid;
  gap: 0;
}

.task-list-options .radio-field {
  min-width: 0;
}

.task-list-page-break {
  margin: 16px 0;
}

.task-list-page-break__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;
}

.task-list-page-break__row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 44px;
  top: 50%;
  border-top: 1px solid var(--outline-subtle);
}

.task-list-page-break__label {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0 4px;
  transform: translate(-50%, -50%);
  background: var(--surface-lowest);
  color: var(--on-surface-variant);
  z-index: 1;
}

.task-list-page-break__action {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.task-list-new-task {
  margin-bottom: 32px;
}

.btn-custom-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}

.btn-custom-icon--stacks-load {
  -webkit-mask-image: url("../images/stacks-load.svg");
  mask-image: url("../images/stacks-load.svg");
}

.btn-custom-icon--stacks-select {
  -webkit-mask-image: url("../images/stacks-select.svg");
  mask-image: url("../images/stacks-select.svg");
}

.task-load-menu {
  position: relative;
  display: inline-flex;
}

.task-load-menu__surface {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  width: max-content;
  max-width: min(100vw - 32px, 360px);
}

.task-load-menu__surface .menu-item {
  white-space: nowrap;
}

.task-load-menu__surface .btn-custom-icon {
  color: var(--on-surface-variant);
}

.task-list-new-task-card {
  border-radius: 16px;
  background: var(--surface-low);
  --field-fill: var(--surface-low);
  box-shadow: var(--elevation-1);
  padding: 24px;
}

.task-list-new-task-fields {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
}

.task-list-new-task-field {
  min-width: 0;
}
.task-list-new-task-field .material-select-field,
.task-list-new-task-field .material-textarea-field {
  width: 100%;
}

.task-list-score-field.material-select-field {
  width: 100%;
}
.task-list-score-field.material-select-field .material-select-field__control {
  height: 56px;
  min-height: 56px;
  padding-inline: 8px;
}
.task-list-score-field.material-select-field .task-list-score-stepper {
  position: absolute;
  inset-inline: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0 4px;
}

.task-list-score-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-list-score-value {
  flex: 1 1 auto;
  color: var(--on-surface);
  text-align: center;
}

.task-list-new-task-body {
  display: grid;
  align-items: stretch;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-list-new-task-text {
  display: flex;
  min-width: 0;
}
.task-list-new-task-text .material-textarea-field {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.task-list-new-task-answers {
  display: flex;
  min-width: 0;
}
.task-list-new-task-answers .task-list-field-box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  background: var(--field-fill);
  border-color: var(--outline);
}
.task-list-new-task-answers .task-list-field-box__inner {
  flex: 1 1 auto;
}
.task-list-new-task-answers .task-list-field-box__label {
  background: var(--field-fill);
}

.task-list-new-task-text .material-textarea-field__control {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 220px;
  padding-top: 8px;
}

.task-list-new-task-text .material-textarea-field__control textarea {
  flex: 1 1 auto;
  min-height: 188px;
}

.task-list-answers-list {
  display: grid;
  gap: 8px;
}

.task-list-answer-row {
  display: grid;
  grid-template-columns: 40px 40px minmax(0, 1fr) 40px 40px;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 4px;
}
.task-list-answer-row .material-input-field {
  width: 100%;
  min-width: 0;
}

.task-list-new-task-answers .task-list-answer-row {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  padding: 0 2px;
}

.task-list-new-task-answers .task-list-answer-row .task-list-answer-radio {
  min-height: 0;
}

.task-list-new-task-answers .task-list-answer-row .radio-control {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.task-list-new-task-answers .task-list-answer-row .task-list-answer-drag {
  margin-left: 1px;
}

.task-list-new-task-answers .task-list-answer-row .task-list-answer-more {
  transform: translateX(-1px);
}

.task-list-new-task-answers .task-list-answer-row .material-input-field__control {
  height: 36px;
  min-height: 36px;
  border: 0;
  border-bottom: 1px solid var(--outline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.task-list-new-task-answers .task-list-answer-row .material-input-field__control:hover:not(:focus-within) {
  border-bottom-color: var(--on-surface);
  box-shadow: none;
}

.task-list-new-task-answers .task-list-answer-row .material-input-field__control:focus-within {
  border-bottom-color: var(--primary);
  box-shadow: none;
}

.task-list-new-task-answers .task-list-answer-row .material-input-field.error .material-input-field__control {
  border-bottom-color: var(--error);
}

.task-list-new-task-answers .task-list-answer-row .material-input-field.error .material-input-field__control:hover:not(:focus-within),
.task-list-new-task-answers .task-list-answer-row .material-input-field.error .material-input-field__control:focus-within {
  border-bottom-color: var(--error);
  box-shadow: none;
}

.task-list-new-task-answers .task-list-answer-row .material-input-field__control input::placeholder {
  color: var(--on-surface-variant);
}

.task-list-new-task-answers .task-list-answer-row.is-active {
  padding: 0 2px;
  border-color: transparent;
  background: var(--nav-selected);
}

.task-list-new-task-answers .task-list-answer-row:hover:not(.is-active) {
  background: var(--nav-hover);
}

.task-list-new-task-answers .task-list-answer-row.is-active:hover {
  background: var(--nav-selected-hover);
}

.task-list-answer-radio {
  min-width: 0;
}

.task-list-answer-radio .radio-copy {
  display: none;
}

.task-list-new-task-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio] .portfolio-fab {
    right: 18px;
    bottom: 18px;
  }
  .portfolio-hook {
    padding: 48px 24px;
  }
  .portfolio-page > .portfolio-hook__text {
    margin: 48px 24px;
  }
  .portfolio-hook--section {
    padding: 36px 18px;
  }
  .pbp-statement-copy > .portfolio-hook {
    padding-bottom: 4px; /* 24px − 20px */
  }
  .pbp-statement-copy > .portfolio-hook--section {
    padding-top: 18px;
  }
  .portfolio-hook__text {
    font-size: clamp(40px, 12vw, 96px);
  }
  .portfolio-hook--section .portfolio-hook__text {
    font-size: clamp(30px, 9vw, 72px);
  }
  .portfolio-hero {
    grid-template-columns: 1fr;
    margin-inline: -8px;
  }
  .portfolio-feature-grid {
    grid-template-columns: 1fr;
    margin-inline: 0;
  }
  .portfolio-intro {
    margin-inline: 0;
  }
  .home-youtube-section {
    margin-inline: 0;
  }
  .home-cta-grid,
  .projects-cta-grid {
    grid-template-columns: 1fr;
    margin-inline: 0;
  }
  body[data-site-section=portfolio] .content.portfolio-content {
    padding-bottom: 72px;
  }
  body[data-site-section=portfolio] .content.portfolio-content:has(.task-list-page) {
    padding-bottom: 64px;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content,
  body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content:has(.task-list-page),
  body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content:has(.pbp-what-page) {
    padding-top: calc(var(--pbp-mobile-nav-inset) + var(--pbp-mobile-top-nav-height) + env(safe-area-inset-top));
    padding-bottom: calc(var(--pbp-mobile-nav-height) + var(--pbp-mobile-nav-inset));
  }
  .content.portfolio-content:has(.task-bank-page),
  .content.portfolio-content:has(.task-lists-page),
  .content.portfolio-content:has(.task-list-page),
  .content.portfolio-content:has(.projects-page) {
    padding-inline: 20px;
  }
  .task-bank-page .portfolio-page-description,
  .task-lists-page .portfolio-page-description,
  .projects-page .portfolio-page-description {
    margin-left: 0;
  }
  .task-bank-pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
    column-gap: 16px;
  }
  .task-bank-page-size {
    order: 1;
  }
  .task-bank-page-nav {
    display: contents;
  }
  .task-bank-page-range {
    order: 2;
  }
  .task-bank-page-buttons {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
  }
  .task-bank-filters {
    flex-wrap: nowrap;
    min-width: 0;
  }
  .task-bank-filters-scroll {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .task-bank-filters-scroll .task-bank-filter-chip {
    flex: 0 0 auto;
  }
  .task-list-page .task-list-header-card {
    margin-bottom: 4px;
  }
  .task-list-meta-cards-scroll {
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--outline-variant) transparent;
  }
  .task-list-meta-cards-scroll::-webkit-scrollbar {
    height: 6px;
  }
  .task-list-meta-cards-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .task-list-meta-cards-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: var(--outline-variant);
  }
  .task-list-meta-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .task-list-meta-card {
    flex: 0 0 auto;
    min-width: 180px;
  }
  .task-list-task-card__tags-scroll {
    margin-bottom: 20px;
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--outline-variant) transparent;
  }
  .task-list-task-card__tags-scroll::-webkit-scrollbar {
    height: 6px;
  }
  .task-list-task-card__tags-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .task-list-task-card__tags-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: var(--outline-variant);
  }
  .task-list-task-card__tags {
    flex-wrap: nowrap;
  }
  .task-list-task-card__tags .chip {
    flex: 0 0 auto;
  }
  .task-list-task-card__body,
  .task-list-new-task-body,
  .task-list-new-task-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.task-generate-dialog .dialog-card {
  --field-fill: var(--surface-container);
}

.task-generate-dialog__checkbox {
  margin-top: 8px;
  margin-left: -12px;
}

.task-generate-settings .adaptive-dialog-body {
  --field-fill: var(--surface);
  padding-bottom: 84px;
}

.task-generate-settings .adaptive-dialog-footer {
  min-height: 80px;
  justify-content: flex-end;
}

@media (min-width: 600px) {
  .task-generate-settings .adaptive-fullscreen-dialog {
    height: 444px;
    max-height: 444px;
  }
}
.task-generate-settings__content {
  display: grid;
  gap: 16px;
  max-width: 560px;
}

.task-generate-settings__field {
  display: grid;
  gap: 4px;
}

.task-generate-settings__field--topic {
  margin-bottom: 8px;
}

.task-generate-settings__sup {
  margin: 0;
  color: var(--on-surface-variant);
}

.task-generate-settings__body {
  margin: 0;
  color: var(--on-surface);
}

.task-generate-settings .material-select-field,
.task-generate-settings .material-textarea-field {
  width: 100%;
}

.task-generate-settings__notes {
  display: grid;
  gap: 4px;
}

.task-generate-settings__notes .material-textarea-field__control {
  padding-top: 8px;
}

.task-generate-settings__counter {
  margin: 0;
  justify-self: end;
  color: var(--on-surface-variant);
}

.task-generate-snackbar-host {
  position: fixed;
  z-index: 520;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: grid;
  justify-items: stretch;
  pointer-events: none;
}

.task-generate-snackbar-host > .task-generate-snackbar {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
}

@media (min-width: 1180px) {
  .task-generate-snackbar-host {
    right: auto;
    bottom: 24px;
    left: 24px;
    justify-items: start;
  }
  .task-generate-snackbar-host > .task-generate-snackbar {
    width: min(100%, 440px);
    min-width: 288px;
  }
}
.task-generate-snackbar {
  pointer-events: auto;
}

.task-generate-snackbar[hidden] {
  display: none;
}

.task-generate-snackbar__content {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
}

.task-generate-snackbar__message {
  min-width: 0;
}

.task-generate-snackbar .btn {
  margin-left: auto;
  flex: 0 0 auto;
}

.task-generate-progress {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--surface-lowest);
}

.task-generate-progress__svg {
  display: block;
}

.task-generate-progress__track,
.task-generate-progress__value {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.task-generate-progress__track {
  opacity: 0.38;
}

.task-generate-progress__value {
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 80ms linear;
}

.body-shell {
  --portfolio-agent-panel-width: 260px;
}

.portfolio-agent-panel {
  display: flex;
  width: 0;
  min-width: 0;
  min-height: 0;
  flex: 0 0 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--canvas);
  transition: flex-basis 240ms cubic-bezier(0.2, 0, 0, 1), width 240ms cubic-bezier(0.2, 0, 0, 1);
}

body.is-task-list-agent-open .portfolio-agent-panel {
  width: var(--portfolio-agent-panel-width);
  flex: 0 0 var(--portfolio-agent-panel-width);
}

body.is-task-list-agent-open .body-shell {
  padding-right: 4px;
}

body.is-task-list-agent-open .main-wrap {
  padding-right: 4px;
}

.portfolio-agent-panel__messages {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 0 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--outline-variant) transparent;
}

.portfolio-agent-panel__messages::-webkit-scrollbar {
  width: 4px;
}

.portfolio-agent-panel__messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: var(--outline-variant);
}

.portfolio-agent-message {
  display: flex;
  max-width: 100%;
}

.portfolio-agent-message--user {
  justify-content: flex-end;
}

.portfolio-agent-message--agent {
  justify-content: flex-start;
}

.portfolio-agent-message__text {
  margin: 0;
  border-radius: 16px;
  padding: 14px 16px;
}

.portfolio-agent-message--user .portfolio-agent-message__text {
  border-bottom-right-radius: 4px;
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.portfolio-agent-message--agent .portfolio-agent-message__text {
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--on-surface);
  box-shadow: none;
}

.portfolio-agent-panel__composer {
  flex-shrink: 0;
  padding: 12px 16px 24px;
  --field-fill: var(--surface);
}

.portfolio-agent-composer__field {
  position: relative;
}

.portfolio-agent-composer .material-textarea-field {
  width: 100%;
}

.portfolio-agent-composer .material-textarea-field__control {
  display: flex;
  flex-direction: column;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  padding: 8px 40px 8px 12px;
}

.portfolio-agent-composer .material-textarea-field__control textarea {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-y: auto;
  resize: none;
  padding-top: 0;
}

.portfolio-agent-composer .material-textarea-field__control textarea.body-medium {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25px;
}

.portfolio-agent-composer__send {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
}

.portfolio-agent-composer__send:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

body[data-site-section=portfolio] .icon-button[data-task-list-agent-topbar-toggle].selected {
  background: var(--nav-selected);
  color: var(--primary);
}

body[data-site-section=portfolio] .icon-button[data-task-list-agent-topbar-toggle].selected:hover {
  background: var(--nav-selected-hover);
}

@media (max-width: 1179px) {
  body.is-task-list-agent-open .top-bar {
    z-index: auto;
  }
  body.is-task-list-agent-open .icon-button[data-task-list-agent-topbar-toggle].selected {
    position: fixed;
    z-index: 1000;
    top: 12px;
    right: 16px;
    background: var(--nav-selected);
    color: var(--primary);
  }
  body.is-task-list-agent-open .icon-button[data-task-list-agent-topbar-toggle].selected:hover {
    background: var(--nav-selected-hover);
  }
  .portfolio-agent-panel__composer {
    padding-bottom: 12px;
  }
  .portfolio-agent-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 280;
    width: var(--portfolio-agent-panel-width);
    height: 100dvh;
    box-sizing: border-box;
    padding-top: 64px;
    flex: none;
    border-left: 0;
    box-shadow: none;
    pointer-events: none;
    transform: translateX(105%);
    transition: transform 180ms ease;
  }
  body.is-task-list-agent-open .portfolio-agent-panel {
    width: var(--portfolio-agent-panel-width);
    flex: none;
    padding-left: 4px;
    pointer-events: auto;
    transform: translateX(0);
  }
  body.is-task-list-agent-open .portfolio-agent-scrim {
    position: fixed;
    inset: 0;
    z-index: 260;
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.25);
  }
}
.portfolio-agent-scrim {
  position: fixed;
  inset: 64px 0 0;
  z-index: 200;
  border: 0;
  background: rgba(29, 27, 32, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.portfolio-agent-scrim[hidden] {
  display: none;
}

@media (min-width: 1180px) {
  .portfolio-agent-scrim {
    display: none !important;
  }
}
.mobile-scrim {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Shape radius utilities — match Shape page rounded-{key} tokens */
.rounded-none {
  border-radius: var(--radius-none);
}

.rounded-xs {
  border-radius: var(--radius-xs);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-xxl {
  border-radius: var(--radius-xxl);
}

.rounded-full {
  border-radius: var(--radius-full);
}

@media (max-width: 1179px) {
  .toc-rail {
    display: none;
  }
  .color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guidance-grid {
    grid-template-columns: 1fr;
  }
  .shape-radius-grid,
  .shape-elevation-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .type-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media (max-width: 1179px) {
  .top-bar {
    padding: 0 16px;
  }
  .brand-text {
    display: none;
  }
  body[data-site-section=portfolio] .brand-text,
  body[data-site-section=design-system] .brand-text {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-site-section=design-system] .brand-text {
    font-size: 16px;
    line-height: 24px;
  }
  .nav-toggle {
    display: inline-flex;
  }
  body.is-mobile-nav-open .top-bar {
    z-index: auto;
  }
  .nav-toggle.selected {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 16px;
    background: var(--nav-selected);
    color: var(--primary);
  }
  .nav-toggle.selected:hover {
    background: var(--nav-selected-hover);
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 280;
    width: 260px;
    height: 100dvh;
    box-sizing: border-box;
    padding-top: 64px;
    box-shadow: none;
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }
  .sidebar.open {
    transform: translateX(0);
    padding-right: 4px;
  }
  .mobile-scrim.open {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: block;
    border: 0;
    background: rgba(0, 0, 0, 0.25);
  }
  .main-wrap {
    padding: 4px 12px 12px;
  }
  body[data-site-section=portfolio] .sidebar {
    padding-top: 64px;
  }
  body[data-site-section=portfolio] .body-shell {
    flex-direction: column;
  }
  body[data-site-section=portfolio] .navigation-rail-column,
  body[data-site-section=portfolio] .navigation-rail-demo.sidebar {
    display: none;
    position: static;
    transform: none;
    width: auto;
    height: auto;
    box-shadow: none;
  }
  body[data-site-section=portfolio] .portfolio-navigation-bar {
    display: flex;
    width: auto;
    min-height: 80px;
    flex: 0 0 auto;
    order: 3;
    margin: 0 12px max(8px, env(safe-area-inset-bottom));
  }
  body[data-site-section=portfolio] .portfolio-navigation-bar .navigation-bar-item {
    flex: 1 1 0;
  }
  body[data-site-section=portfolio] .main-wrap {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 12px 8px;
  }
  body[data-site-section=portfolio] .nav-toggle {
    display: none;
  }
  body[data-site-section=portfolio] .mobile-scrim {
    display: none;
  }
  .content,
  .content.with-toc {
    padding: 20px;
  }
  .grid.two {
    grid-template-columns: 1fr;
  }
  .color-grid {
    grid-template-columns: 1fr;
  }
  .icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .btn.with-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    padding-inline: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }
  .btn.with-icon .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .btn.compact.with-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
  .btn.small.with-icon {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  .btn.with-icon:not(.small):not(.large):not(.xlarge):not(.compact) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .btn.large.with-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }
  .btn.xlarge.with-icon {
    width: 52px;
    min-width: 52px;
    min-height: 52px;
  }
  .segmented-control {
    display: flex;
    width: 100%;
  }
  .segment {
    min-width: 0;
    flex: 1;
    padding-inline: 10px;
  }
  .split-button {
    width: 100%;
  }
  .split-action {
    flex: 1;
  }
  .shape-radius-grid,
  .shape-elevation-card {
    grid-template-columns: 1fr;
  }
  .typography-page > h1,
  .shape-page > h1 {
    font-size: 44px;
    line-height: 52px;
  }
}
@media (min-width: 768px) and (max-width: 1179px) {
  .icon-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .icon-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media (min-width: 1180px) {
  .nav-toggle {
    display: none;
  }
}

:root {
  --content-vertical-space: 160px;
  --content-small-vertical-space: 48px;
  --content-vertical-space-fill: rgba(255, 0, 0, 0.2);
}

@media (max-width: 1179px) {
  :root {
    --content-vertical-space: 60px;
    --content-small-vertical-space: 24px;
  }
}

.content-vertical-space {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--content-vertical-space);
  min-height: var(--content-vertical-space);
  margin: 0;
  flex: 0 0 auto;
  align-self: stretch;
  border-radius: var(--radius-lg);
  background: var(--content-vertical-space-fill);
}

.content-small-vertical-space {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--content-small-vertical-space);
  min-height: var(--content-small-vertical-space);
  margin: 0;
  flex: 0 0 auto;
  align-self: stretch;
  border-radius: var(--radius-lg);
  background: var(--content-vertical-space-fill);
}

/* PBP hero text hugs its content. Spacing above and below is .content-vertical-space. */
body[data-app-section=pbp] .portfolio-hook,
body[data-app-section=pbp] .portfolio-hook--section {
  padding-block: 0;
  height: auto;
  min-height: 0;
}

body[data-app-section=pbp] .pbp-statement-copy > .portfolio-hook,
body[data-app-section=pbp] .pbp-statement-copy > .portfolio-hook--section {
  padding-top: 0;
}

body[data-app-section=pbp] .pbp-statement-copy > .portfolio-hook:not(.portfolio-hook--section) {
  padding-bottom: 40px;
}

body[data-app-section=pbp] .pbp-statement-copy > .portfolio-intro,
body[data-app-section=pbp] .pbp-what-page .pbp-statement-copy > .portfolio-intro {
  margin-bottom: 0;
}

@media (max-width: 1179px) {
  body[data-app-section=pbp] .pbp-statement-copy > .portfolio-hook:not(.portfolio-hook--section) {
    padding-bottom: 4px;
  }
}
.pbp-statement-copy > .portfolio-hook:has(+ .content-small-vertical-space),
body[data-app-section=pbp] .pbp-statement-copy > .portfolio-hook:not(.portfolio-hook--section):has(+ .content-small-vertical-space) {
  padding-bottom: 0;
}

body[data-app-section=pbp] .portfolio-page > .portfolio-hook__text {
  margin-block: 0;
}

body[data-app-section=pbp] .pbp-what-page .pbp-statement-copy {
  padding-top: 0;
}

body[data-app-section=pbp] .pbp-what-page .pbp-statement-copy::before,
body[data-app-section=pbp] .pbp-what-page .pbp-statement-copy::after {
  content: none;
  display: none;
}

@media (min-width: 1180px) {
  body[data-site-section=portfolio][data-app-section=pbp] .content.portfolio-content:has(.pbp-what-page) {
    min-height: 0;
    flex: 0 0 auto;
    padding-bottom: 0;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-what-page {
    min-height: 0;
    flex: 0 0 auto;
  }
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .static-small-cards {
    --pbp-cards-inline: 20px;
    --pbp-cards-peek: 24px;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: var(--pbp-cards-inline);
    box-sizing: border-box;
    width: calc(100% + (2 * var(--pbp-cards-inline)));
    margin-left: calc(-1 * var(--pbp-cards-inline));
    margin-right: calc(-1 * var(--pbp-cards-inline));
    padding-left: var(--pbp-cards-inline);
    padding-right: var(--pbp-cards-inline);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pbp-cards-inline);
    scrollbar-width: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .static-small-cards::-webkit-scrollbar {
    display: none;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .static-small-card {
    flex: 0 0 calc(100% - var(--pbp-cards-peek));
    width: calc(100% - var(--pbp-cards-peek));
    max-width: none;
    height: auto;
    align-self: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .static-small-card:nth-child(2) {
    scroll-snap-align: center;
  }
  body[data-site-section=portfolio][data-app-section=pbp] .static-small-card:last-child {
    scroll-snap-align: end;
  }
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-legal {
  box-sizing: border-box;
  width: 100%;
  max-width: calc((100% - 64px) / 3);
  margin-inline: auto;
  text-align: center;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-legal .body-medium,
body[data-site-section=portfolio][data-app-section=pbp] .pbp-legal .body-small {
  margin: 0;
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-legal .body-medium {
  color: var(--on-surface);
}

body[data-site-section=portfolio][data-app-section=pbp] .pbp-legal .body-small {
  margin-top: 8px;
  color: var(--on-surface-variant);
}

@media (max-width: 1179px) {
  body[data-site-section=portfolio][data-app-section=pbp] .pbp-legal {
    max-width: 100%;
  }
}

.true-false-card {
  box-sizing: border-box;
  width: min(100%, 360px);
  min-width: 0;
}
.true-false-card__deck {
  position: relative;
  padding-top: 24px;
}
.true-false-card__back {
  position: absolute;
  height: 28px;
  /* Top corners are Shape rounded-xl (28px). Bottom radii stay 0 so the 28px curve is not reduced on this short stripe. */
  border-radius: 28px 28px 0 0;
  background: var(--surface-container);
  pointer-events: none;
}
.true-false-card__back--farther {
  top: 0;
  left: 48px;
  right: 48px;
  background: color-mix(in srgb, #000 8%, var(--background));
}
.true-false-card__back--far {
  top: 12px;
  left: 24px;
  right: 24px;
  background: color-mix(in srgb, var(--surface) 40%, color-mix(in srgb, #000 8%, var(--background)));
}
.true-false-card__card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Shape rounded-xl is 28px; HIG remaps --radius-xl to 16px. */
  border-radius: 28px;
  background: var(--surface);
}
.true-false-card__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.true-false-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px 20px;
}
.true-false-card__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.true-false-card__title,
.true-false-card__count,
.true-false-card__text {
  margin: 0;
}
.true-false-card__text {
  color: var(--on-surface);
}
.true-false-card__count {
  color: var(--on-surface-variant);
}
.true-false-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.true-false-card__choices {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Rail, bottom navigation, and top app bar icons are embedded so a hover color change does not wait on another SVG download. */

.navigation-rail-column .icon[data-icon="circle_circle"],
.navigation-bar-demo .icon[data-icon="circle_circle"],
.portfolio-page-app-bar .icon[data-icon="circle_circle"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00NzkuOTUtMzU0LjIzcS01Mi4yNiAwLTg4Ljk5LTM2LjY2LTM2LjczLTM2LjY3LTM2LjczLTg5LjA0IDAtNTIuMzggMzYuNjYtODguOTIgMzYuNjctMzYuNTQgODkuMDQtMzYuNTQgNTIuMzggMCA4OC45MiAzNi41OSAzNi41NCAzNi41OCAzNi41NCA4OC44NSAwIDUyLjI2LTM2LjU5IDg4Ljk5LTM2LjU4IDM2LjczLTg4Ljg1IDM2LjczWk0zMzEuODktMTI5Ljc3cS02OS4zNS0yOS43Ny0xMjAuODUtODEuMjd0LTgxLjI3LTEyMC44MVExMDAtNDAxLjE2IDEwMC00NzkuOTZxMC03OC44MSAyOS43Ny0xNDguMTUgMjkuNzctNjkuMzUgODEuMjctMTIwLjY2dDEyMC44MS04MS4yN1E0MDEuMTYtODYwIDQ3OS45Ni04NjBxNzguODEgMCAxNDguMTggMjkuOTJ0MTIwLjY4IDgxLjIxcTUxLjMxIDUxLjI5IDgxLjI1IDEyMC42M1E4NjAtNTU4LjkgODYwLTQ4MC4wN3EwIDc4Ljg0LTI5Ljk2IDE0OC4xOC0yOS45NiA2OS4zNS04MS4yNyAxMjAuODUtNTEuMzEgNTEuNS0xMjAuNjIgODEuMjdRNTU4Ljg0LTEwMCA0ODAuMDQtMTAwcS03OC44MSAwLTE0OC4xNS0yOS43N1pNNDc5LjgxLTE2MFE2MTMtMTYwIDcwNi41LTI1My4zMXQ5My41LTIyNi41UTgwMC02MTMgNzA2LjUtNzA2LjVUNDgwLTgwMHEtMTMzLjM4IDAtMjI2LjY5IDkzLjVUMTYwLTQ4MHEwIDEzMy4zOCA5My4zMSAyMjYuNjlUNDc5LjgxLTE2MFptLjE5LTMyMFptMTMxLjMxIDEzMS41cTU0LjA3LTU0LjI3IDU0LjA3LTEzMS41IDAtNzcuMjMtNTQuMDctMTMxLjMxLTU0LjA4LTU0LjA3LTEzMS4zMS01NC4wN3QtMTMxLjUgNTQuMDdRMjk0LjIzLTU1Ny4yMyAyOTQuMjMtNDgwdDU0LjI3IDEzMS41cTU0LjI3IDU0LjI3IDEzMS41IDU0LjI3IDc3LjIzIDAgMTMxLjMxLTU0LjI3WiIvPjwvc3ZnPg==");
}

.navigation-rail-column .icon[data-icon="apps"],
.navigation-bar-demo .icon[data-icon="apps"],
.portfolio-page-app-bar .icon[data-icon="apps"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0xOTQuMjctMTk0LjI3cS0xOC44OC0xOC44OC0xOC44OC00NS43MyAwLTI2Ljg1IDE4Ljg4LTQ1LjczIDE4Ljg4LTE4Ljg4IDQ1LjczLTE4Ljg4IDI2Ljg1IDAgNDUuNzMgMTguODggMTguODggMTguODggMTguODggNDUuNzMgMCAyNi44NS0xOC44OCA0NS43My0xOC44OCAxOC44OC00NS43MyAxOC44OC0yNi44NSAwLTQ1LjczLTE4Ljg4Wm0yNDAgMHEtMTguODgtMTguODgtMTguODgtNDUuNzMgMC0yNi44NSAxOC44OC00NS43MyAxOC44OC0xOC44OCA0NS43My0xOC44OCAyNi44NSAwIDQ1LjczIDE4Ljg4IDE4Ljg4IDE4Ljg4IDE4Ljg4IDQ1LjczIDAgMjYuODUtMTguODggNDUuNzMtMTguODggMTguODgtNDUuNzMgMTguODgtMjYuODUgMC00NS43My0xOC44OFptMjQwIDBxLTE4Ljg4LTE4Ljg4LTE4Ljg4LTQ1LjczIDAtMjYuODUgMTguODgtNDUuNzMgMTguODgtMTguODggNDUuNzMtMTguODggMjYuODUgMCA0NS43MyAxOC44OCAxOC44OCAxOC44OCAxOC44OCA0NS43MyAwIDI2Ljg1LTE4Ljg4IDQ1LjczLTE4Ljg4IDE4Ljg4LTQ1LjczIDE4Ljg4LTI2Ljg1IDAtNDUuNzMtMTguODhabS00ODAtMjQwcS0xOC44OC0xOC44OC0xOC44OC00NS43MyAwLTI2Ljg1IDE4Ljg4LTQ1LjczIDE4Ljg4LTE4Ljg4IDQ1LjczLTE4Ljg4IDI2Ljg1IDAgNDUuNzMgMTguODggMTguODggMTguODggMTguODggNDUuNzMgMCAyNi44NS0xOC44OCA0NS43My0xOC44OCAxOC44OC00NS43MyAxOC44OC0yNi44NSAwLTQ1LjczLTE4Ljg4Wm0yNDAgMHEtMTguODgtMTguODgtMTguODgtNDUuNzMgMC0yNi44NSAxOC44OC00NS43MyAxOC44OC0xOC44OCA0NS43My0xOC44OCAyNi44NSAwIDQ1LjczIDE4Ljg4IDE4Ljg4IDE4Ljg4IDE4Ljg4IDQ1LjczIDAgMjYuODUtMTguODggNDUuNzMtMTguODggMTguODgtNDUuNzMgMTguODgtMjYuODUgMC00NS43My0xOC44OFptMjQwIDBxLTE4Ljg4LTE4Ljg4LTE4Ljg4LTQ1LjczIDAtMjYuODUgMTguODgtNDUuNzMgMTguODgtMTguODggNDUuNzMtMTguODggMjYuODUgMCA0NS43MyAxOC44OCAxOC44OCAxOC44OCAxOC44OCA0NS43MyAwIDI2Ljg1LTE4Ljg4IDQ1LjczLTE4Ljg4IDE4Ljg4LTQ1LjczIDE4Ljg4LTI2Ljg1IDAtNDUuNzMtMTguODhabS00ODAtMjQwcS0xOC44OC0xOC44OC0xOC44OC00NS43MyAwLTI2Ljg1IDE4Ljg4LTQ1LjczIDE4Ljg4LTE4Ljg4IDQ1LjczLTE4Ljg4IDI2Ljg1IDAgNDUuNzMgMTguODggMTguODggMTguODggMTguODggNDUuNzMgMCAyNi44NS0xOC44OCA0NS43My0xOC44OCAxOC44OC00NS43MyAxOC44OC0yNi44NSAwLTQ1LjczLTE4Ljg4Wm0yNDAgMHEtMTguODgtMTguODgtMTguODgtNDUuNzMgMC0yNi44NSAxOC44OC00NS43MyAxOC44OC0xOC44OCA0NS43My0xOC44OCAyNi44NSAwIDQ1LjczIDE4Ljg4IDE4Ljg4IDE4Ljg4IDE4Ljg4IDQ1LjczIDAgMjYuODUtMTguODggNDUuNzMtMTguODggMTguODgtNDUuNzMgMTguODgtMjYuODUgMC00NS43My0xOC44OFptMjQwIDBxLTE4Ljg4LTE4Ljg4LTE4Ljg4LTQ1LjczIDAtMjYuODUgMTguODgtNDUuNzMgMTguODgtMTguODggNDUuNzMtMTguODggMjYuODUgMCA0NS43MyAxOC44OCAxOC44OCAxOC44OCAxOC44OCA0NS43MyAwIDI2Ljg1LTE4Ljg4IDQ1LjczLTE4Ljg4IDE4Ljg4LTQ1LjczIDE4Ljg4LTI2Ljg1IDAtNDUuNzMtMTguODhaIi8+PC9zdmc+");
}

.navigation-rail-column .icon[data-icon="gesture"],
.navigation-bar-demo .icon[data-icon="gesture"],
.portfolio-page-app-bar .icon[data-icon="gesture"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik01NTIuMDgtMTQwcS01MC4xNiAwLTgzLjEyLTMzLjE2UTQzNi0yMDYuMzEgNDM2LTI1NS42MnEwLTcyLjE1IDYwLjM1LTEyOS40MiA2MC4zNC01Ny4yNyAxNDkuNjUtNjkuNTctMy43Ny00My43LTIwLjEyLTY0Ljg5LTE2LjM0LTIxLjE5LTQ1LjgtMjEuMTktMzIuMzEgMC02OC4wOCAyNS41Ny0zNS43NyAyNS41OC04Ni4wOCA4Ni4wNC02OCA4Mi4yMy0xMDQuMTEgMTA5LjQ2LTM2LjEyIDI3LjIzLTc1LjQyIDI3LjIzLTQ2IDAtNzYuMi0zMy41N1ExNDAtMzU5LjU0IDE0MC00MTAuNDZxMC00OS4zOSAyMS43Ny0xMDIuNDIgMjEuNzctNTMuMDQgNzEuNjItMTIzLjIgMjIuNDYtMzEgMzIuNDItNTEuMyA5Ljk2LTIwLjMxIDkuOTYtMzMuNjIgMC05LjY5LTQuNDItMTQuMzUtNC40My00LjY1LTEyLjg5LTQuNjUtNy4zMSAwLTE2LjIzIDMuOTYtOC45MiAzLjk2LTE5LjIzIDEzLjEyLTEyLjMxIDExLjMtMjcuOTYgMTEuOTItMTUuNjUuNjItMjYuOTYtMTAuNjktMTIuMzEtMTIuNTQtMTIuNjItMjkuNDItLjMtMTYuODkgMTIuNjItMjguMiAyMi44NC0yMC4yMyA0NS42OS0zMC40NlEyMzYuNjItODIwIDI1OC40Ni04MjBxNDEuMzkgMCA2OS4zNSAyNy43NyAyNy45NiAyNy43NyAyNy45NiA3MCAwIDI3Ljg1LTE0LjQyIDYwLjkyLTE0LjQzIDMzLjA4LTQ5LjQzIDgyLjQ2LTM2Ljg0IDUyLjg1LTU0LjM4IDkyLjg5VDIyMC00MTQuMTVxMCAxOS4zIDcuMjMgMzAuNTMgNy4yMyAxMS4yNCAxOS4xNiAxMS4yNCAxMS4xNSAwIDIwLjk2LTYuMDggOS44LTYuMDggMjguNjUtMjQuNzcgMTMtMTIuODUgMjkuNjUtMzIgMTYuNjYtMTkuMTUgNDAuMzUtNDYuNDYgNjMuMzktNzUuNzcgMTEyLjA4LTEwNy4zOSA0OC42OS0zMS42MSAxMDEuNjEtMzEuNjEgNjIuNzcgMCAxMDEuOTIgNDMuNDYgMzkuMTYgNDMuNDYgNDQuMzkgMTE5LjU0aDU0LjM4cTE2Ljc3IDAgMjguMzkgMTEuNjEgMTEuNjEgMTEuNjIgMTEuNjEgMjguMzkgMCAxNi43Ny0xMS42MSAyOC4zOC0xMS42MiAxMS42Mi0yOC4zOSAxMS42Mkg3MjZxLTcuMjMgMTA4LjUzLTU0LjQ2IDE3My4xMVE2MjQuMzEtMTQwIDU1Mi4wOC0xNDBabTEuMjMtODBxMzYuMjMgMCA2MC45Mi00MS4zMSAyNC42OS00MS4zMSAzMS4xNi0xMTIuMDgtNTIuNTQgOC43LTkwLjk3IDQzLjEyUTUxNi0yOTUuODUgNTE2LTI1OC40NnEwIDE3LjQ2IDkuOTIgMjcuOTYgOS45MyAxMC41IDI3LjM5IDEwLjVaIi8+PC9zdmc+");
}

.navigation-rail-column .icon[data-icon="favorite"],
.navigation-bar-demo .icon[data-icon="favorite"],
.portfolio-page-app-bar .icon[data-icon="favorite"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00NTMuODEtMTc2LjIzcS0xMi45Ni00LjYyLTIyLjgxLTE0LjQ2bC01Ny40Ni01Mi4yM3EtMTA2LjM4LTk3LTE4OS45Ni0xOTAuNThRMTAwLTUyNy4wOCAxMDAtNjM0cTAtODUuMTUgNTcuNDItMTQyLjU4UTIxNC44NS04MzQgMzAwLTgzNHE0OC4zOCAwIDk1LjU4IDIyLjMxIDQ3LjE5IDIyLjMxIDg0LjQyIDcyLjQ2IDM3LjIzLTUwLjE1IDg0LjQyLTcyLjQ2UTYxMS42Mi04MzQgNjYwLTgzNHE4NS4xNSAwIDE0Mi41OCA1Ny40MlE4NjAtNzE5LjE1IDg2MC02MzRxMCAxMDguMDgtODUgMjAyLjczLTg1IDk0LjY1LTE4OS41NCAxODguOTZsLTU2Ljg1IDUxLjYycS05Ljg0IDkuODQtMjIuOTkgMTQuNDYtMTMuMTYgNC42MS0yNiA0LjYxLTEyLjg1IDAtMjUuODEtNC42MVptLTIuNTgtNTAyLjIzcS0zMi40Ni00OS40Ni02OC4zNS03Mi41UTM0Ny03NzQgMzAwLTc3NHEtNjAgMC0xMDAgNDB0LTQwIDEwMHEwIDQ4LjE1IDMxLjA0IDEwMC42OXQ3Ny45MiAxMDQuNDZxNDYuODggNTEuOTMgMTAxLjU4IDEwMS40NiA1NC42OSA0OS41NCAxMDEuMzggOTIuMDggMy40NiAzLjA4IDguMDggMy4wOHQ4LjA4LTMuMDhxNDYuNjktNDIuNTQgMTAxLjM4LTkyLjA4IDU0LjctNDkuNTMgMTAxLjU4LTEwMS40NiA0Ni44OC01MS45MiA3Ny45Mi0xMDQuNDZRODAwLTU4NS44NSA4MDAtNjM0cTAtNjAtNDAtMTAwdC0xMDAtNDBxLTQ3IDAtODIuODggMjMuMDQtMzUuODkgMjMuMDQtNjguMzUgNzIuNS01LjA4IDcuNjktMTIuNzcgMTEuNTQtNy42OSAzLjg0LTE2IDMuODQtOC4zMSAwLTE2LTMuODQtNy42OS0zLjg1LTEyLjc3LTExLjU0Wk00ODAtNTAyLjU0WiIvPjwvc3ZnPg==");
}

.navigation-rail-column .icon[data-icon="fingerprint"],
.navigation-bar-demo .icon[data-icon="fingerprint"],
.portfolio-page-app-bar .icon[data-icon="fingerprint"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODIuMTMtNzg2LjY1cTEwNiAwIDE5OS43MiA0NS43OHQxNTUuNTggMTMyLjM1cTkuMjcgMTIuMzkgNS45MiAyMi41LTMuMzUgMTAuMTEtMTEuNjEgMTYuOC04LjI2IDYuMTMtMTguODEgNS4zNS0xMC41NC0uNzgtMTcuNjctMTEuNjEtNTIuNzQtNzYuMy0xMzYuMTMtMTE2LjM5LTgzLjM5LTQwLjA5LTE3Ny00MC42NS05My42MS0uNTctMTc2LjA2IDQwLjA5LTgyLjQ2IDQwLjY1LTEzNC41IDExNy41Mi04LjI3IDEyLjM5LTE5LjM3IDEzLjM5LTExLjExIDEtMTkuMzctNC41Ny05LjI2LTYuMTMtMTEuOS0xNi4xNy0yLjYzLTEwLjA0IDQuNS0xOS43NCA2MC44Ny04Ny44MyAxNTUuMjItMTM2LjI0IDk0LjM1LTQ4LjQxIDIwMS40OC00OC40MVptMCA5NS4xM3ExMzUuNTcgMCAyMzEuNDQgOTEuOTggOTUuODYgOTEuOTcgOTUuODYgMjI1LjU0IDAgNTIuODMtMzYuNjMgODkuNDQtMzYuNjMgMzYuNi04OS4zMiAzNi42LTUyLjcgMC05MC4zMy0zNS4xOS0zNy42My0zNS4yLTM3LjYzLTg3LjQ2IDAtMzAuNzQtMjEuMTEtNTIuMTF0LTUxLjcxLTIxLjM3cS0zMC42MSAwLTUxLjcyIDIxLjM3dC0yMS4xMSA1Mi4xMXEwIDk1LjMxIDU0LjExIDE2MC4zMXQxNTMuNTkgODguMTdxMTEuODIgMi40MyAxNS45NSAxMS43IDQuMTMgOS4yNiAxLjU3IDE5LjUyLTIuNTcgOS4yNi0xMC41NSAxNi4yNC03Ljk3IDYuOTctMjIuMDYgNC40MS0xMTUuMzEtMjQuMy0xODEuMDItMTA1LjQ4LTY1LjcyLTgxLjE3LTY1LjcyLTE5NC44NyAwLTUzLjM5IDM3LjEzLTkwLjV0ODkuODMtMzcuMTFxNTIuNjkgMCA4OS44MiAzNS45OCAzNy4xMyAzNS45OCAzNy4xMyA4OC4yNCAwIDMwLjE3IDIxLjYxIDUxLjU0IDIxLjYxIDIxLjM3IDUyLjIyIDIxLjM3dDUxLjUtMjEuMzdxMjAuODktMjEuMzcgMjAuODktNTEuNTQgMC0xMTEuNDgtODAuMi0xODcuOTMtODAuMTktNzYuNDYtMTkzLjEtNzYuNDYtMTEyLjkyIDAtMTkyLjI3IDc3Ljg3LTc5LjM0IDc3Ljg3LTc5LjM0IDE4OS40OCAwIDM0LjE3IDQuNzggNjcuOTEgNC43OCAzMy43NCAxNy44MyA3MSA0LjEzIDEyLjM5LS4yMiAyMS45My00LjM1IDkuNTUtMTQuNjEgMTMuNjgtMTEuMzkgNC4xMy0yMS4xNS0uNS05Ljc2LTQuNjMtMTUuMDItMTcuMTUtMTIuNzQtMzIuNzktMTkuMjQtNzEuODUtNi41LTM5LjA3LTYuNS04NC41OSAwLTEzNS4yNiA5NS4wOC0yMjguMDkgOTUuMDktOTIuODIgMjMwLjIyLTkyLjgyWm0uNTctMTkycTY1LjEzIDAgMTI2LjY5IDE1LjUgNjEuNTcgMTUuNSAxMTkuMTMgNDUuMDYgMTIuMzkgNi43IDE0Ljc0IDE2LjgxIDIuMzUgMTAuMTEtMS43OCAxOS4zNy00LjcgOS4yNi0xNC41MiAxNC4xMS05LjgzIDQuODQtMjIuMDktMS44NS01MS44Ny0yNy41Ny0xMDguMDktNDEuNS01Ni4yMS0xMy45NC0xMTQuMDgtMTMuOTQtNTggMC0xMTQuMjkgMTMuNS01Ni4yOCAxMy41LTEwNy4yOCA0MS45NC0xMS4zOSA2LjY5LTIyLjUgMy45MS0xMS4xMS0yLjc4LTE2LjgtMTMuMDQtNC41Ny05LjEzLTEuNDQtMTkuNTkgMy4xMy0xMC40NiAxMy4zOS0xNi41OSA1Ny4xMy0zMi44MiAxMjAuMzktNDguMjYgNjMuMjYtMTUuNDMgMTI4LjUzLTE1LjQzWm0wIDI4OC40M3E5My41NiAwIDE2MC41NiA2NC4yIDY3IDY0LjE5IDY3IDE1Ni44OSAwIDEyLjk2LTYuOTEgMjEuMjgtNi45MiA4LjMzLTE5Ljg3IDguMzMtMTIuNTIgMC0xOS45NC04LjMzLTcuNDEtOC4zMi03LjQxLTIxLjI4IDAtNzAuNDgtNTAuOTgtMTE5LTUwLjk4LTQ4LjUyLTEyMi40NS00OC41Mi03Mi4wNSAwLTEyMi4zMSA0OS42NS01MC4yNiA0OS42NS01MC4yNiAxMjEuMjYgMCA3Ni40OCAyNC42MSAxMzIuNyAyNC42MSA1Ni4yMSA3OC4wNCAxMTIuNjUgOC4yNiA4LjI2IDguNTUgMTguOC4yOCAxMC41NS02LjI5IDE4LjI0LTguMjYgOS4zOS0yMC43OCA4LjU1LTEyLjUyLS44NS0yMC43OC05LjExLTU5LTYwLjg3LTg3Ljk2LTEyOC4yLTI4Ljk1LTY3LjMyLTI4Ljk1LTE1My42MyAwLTkzLjgyIDY2LTE1OS4xNSA2Ni02NS4zMyAxNjAuMTMtNjUuMzNabS0uNDQgMTk0LjMxcTEyLjM5IDAgMTkuNTkgOC4yNiA3LjE5IDguMjYgNy4xOSAxOS42NSAwIDc5LjUyIDUyLjMxIDEyMi43MiA1Mi4zIDQzLjE5IDEyNiA0My4xOSA4LjI2IDAgMjAuMTEtMS41NiAxMS44NC0xLjU3IDIzLjI4LTIuNDQgMTEuMjYtLjg3IDE5LjQ2IDUuMzMgOC4xOSA2LjIgOS4wNiAxNy40Ni44NyAxMS4zOS01LjI2IDE4LjI0LTYuMTMgNi44NC0xNS4yNiA5Ljk3LTE1Ljc0IDUtMjkuOCA2LjA3LTE0LjA3IDEuMDYtMjEuNTkgMS4wNi05NS4yMiAwLTE2My41NS01OC41OC02OC4zMi01OC41OS02OC4zMi0xNjEuNDYgMC0xMS4zOSA3LjE5LTE5LjY1IDcuMi04LjI2IDE5LjU5LTguMjZaIi8+PC9zdmc+");
}

.navigation-rail-column .icon[data-icon="arrow_back_ios_new"],
.navigation-bar-demo .icon[data-icon="arrow_back_ios_new"],
.portfolio-page-app-bar .icon[data-icon="arrow_back_ios_new"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0zNjcuMzgtNDgwIDMwMS4zMSAzMDEuMzFxMTEuOTIgMTEuOTIgMTEuNjIgMjguMDctLjMxIDE2LjE2LTEyLjIzIDI4LjA4LTExLjkzIDExLjkyLTI4LjA4IDExLjkydC0yOC4wOC0xMS45MkwzMDUuMDgtNDI4Ljc3cS0xMC44NS0xMC44NS0xNi4wOC0yNC4zMS01LjIzLTEzLjQ2LTUuMjMtMjYuOTJ0NS4yMy0yNi45MnE1LjIzLTEzLjQ2IDE2LjA4LTI0LjMxbDMwNi44NC0zMDYuODVxMTEuOTMtMTEuOTIgMjguMzktMTEuNjEgMTYuNDYuMzEgMjguMzggMTIuMjMgMTEuOTIgMTEuOTIgMTEuOTIgMjguMDggMCAxNi4xNS0xMS45MiAyOC4wN0wzNjcuMzgtNDgwWiIvPjwvc3ZnPg==");
}

.navigation-rail-column .icon[data-icon="arrow_back"],
.navigation-bar-demo .icon[data-icon="arrow_back"],
.portfolio-page-app-bar .icon[data-icon="arrow_back"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0yOTQuOTItNDUwIDIwNi43NyAyMDYuNzdxOC45MiA4LjkyIDguODEgMjAuODgtLjEyIDExLjk2LTkuNDIgMjEuMjctOS4zMSA4LjY5LTIxLjA4IDktMTEuNzcuMzEtMjEuMDgtOUwyMDUuMzEtNDU0LjY5cS01LjYyLTUuNjItNy45Mi0xMS44NS0yLjMxLTYuMjMtMi4zMS0xMy40NnQyLjMxLTEzLjQ2cTIuMy02LjIzIDcuOTItMTEuODVsMjUzLjYxLTI1My42MXE4LjMxLTguMzEgMjAuNTgtOC41IDEyLjI3LS4xOSAyMS41OCA4LjUgOS4zIDkuMzEgOS4zIDIxLjM4IDAgMTIuMDgtOS4zIDIxLjM5TDI5NC45Mi01MTBINzUwcTEyLjc3IDAgMjEuMzggOC42MlE3ODAtNDkyLjc3IDc4MC00ODB0LTguNjIgMjEuMzhRNzYyLjc3LTQ1MCA3NTAtNDUwSDI5NC45MloiLz48L3N2Zz4=");
}

.navigation-rail-column .icon[data-icon="home"],
.navigation-bar-demo .icon[data-icon="home"],
.portfolio-page-app-bar .icon[data-icon="home"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0yNDAtMjAwaDEzMy44NXYtMjAxLjU0cTAtMTUuMzYgMTAuMzktMjUuNzYgMTAuNC0xMC4zOSAyNS43Ni0xMC4zOWgxNDBxMTUuMzYgMCAyNS43NiAxMC4zOSAxMC4zOSAxMC40IDEwLjM5IDI1Ljc2Vi0yMDBINzIwdi0zNTMuODVxMC0zLjA3LTEuMzUtNS41Ny0xLjM0LTIuNS0zLjY1LTQuNDNMNDg3LjMxLTczNXEtMy4wOC0yLjY5LTcuMzEtMi42OS00LjIzIDAtNy4zMSAyLjY5TDI0NS01NjMuODVxLTIuMzEgMS45My0zLjY1IDQuNDMtMS4zNSAyLjUtMS4zNSA1LjU3Vi0yMDBabS02MCAwdi0zNTMuODVxMC0xNy4xNyA3LjY4LTMyLjUzIDcuNjktMTUuMzcgMjEuMjQtMjUuMzFsMjI3LjctMTcxLjU0cTE4Ljk1LTE0LjQ2IDQzLjMyLTE0LjQ2dDQzLjQ0IDE0LjQ2bDIyNy43IDE3MS41NHExMy41NSA5Ljk0IDIxLjI0IDI1LjMxIDcuNjggMTUuMzYgNy42OCAzMi41M1YtMjAwcTAgMjQuNTQtMTcuNzMgNDIuMjdRNzQ0LjU0LTE0MCA3MjAtMTQwSDU2Mi4zMXEtMTUuMzcgMC0yNS43Ni0xMC40LTEwLjQtMTAuMzktMTAuNC0yNS43NnYtMjAxLjUzaC05Mi4zdjIwMS41M3EwIDE1LjM3LTEwLjQgMjUuNzYtMTAuMzkgMTAuNC0yNS43NiAxMC40SDI0MHEtMjQuNTQgMC00Mi4yNy0xNy43M1ExODAtMTc1LjQ2IDE4MC0yMDBabTMwMC0yNjkuMjNaIi8+PC9zdmc+");
}

.navigation-rail-column .icon[data-icon="work"],
.navigation-bar-demo .icon[data-icon="work"],
.portfolio-page-app-bar .icon[data-icon="work"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0xNzIuMzEtMTQwUTE0Mi0xNDAgMTIxLTE2MXEtMjEtMjEtMjEtNTEuMzF2LTQxNS4zOFExMDAtNjU4IDEyMS02NzlxMjEtMjEgNTEuMzEtMjFIMzQwdi02Ny42OVEzNDAtNzk4IDM2MS04MTlxMjEtMjEgNTEuMzEtMjFoMTM1LjM4UTU3OC04NDAgNTk5LTgxOXEyMSAyMSAyMSA1MS4zMVYtNzAwaDE2Ny42OVE4MTgtNzAwIDgzOS02NzlxMjEgMjEgMjEgNTEuMzF2NDE1LjM4UTg2MC0xODIgODM5LTE2MXEtMjEgMjEtNTEuMzEgMjFIMTcyLjMxWm0wLTYwaDYxNS4zOHE0LjYyIDAgOC40Ni0zLjg1IDMuODUtMy44NCAzLjg1LTguNDZ2LTQxNS4zOHEwLTQuNjItMy44NS04LjQ2LTMuODQtMy44NS04LjQ2LTMuODVIMTcyLjMxcS00LjYyIDAtOC40NiAzLjg1LTMuODUgMy44NC0zLjg1IDguNDZ2NDE1LjM4cTAgNC42MiAzLjg1IDguNDYgMy44NCAzLjg1IDguNDYgMy44NVpNNDAwLTcwMGgxNjB2LTY3LjY5cTAtNC42Mi0zLjg1LTguNDYtMy44NC0zLjg1LTguNDYtMy44NUg0MTIuMzFxLTQuNjIgMC04LjQ2IDMuODUtMy44NSAzLjg0LTMuODUgOC40NlYtNzAwWk0xNjAtMjAwdi00NDAgNDQwWiIvPjwvc3ZnPg==");
}

.navigation-rail-column .icon[data-icon="automation"],
.navigation-bar-demo .icon[data-icon="automation"],
.portfolio-page-app-bar .icon[data-icon="automation"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0yOTUuMjMtMjgzLjA4cS0zOC4yMyAzMS45Mi03OS42NSAyOC45Mi00MS40My0zLTcxLjk2LTI4LjMtMzAuNTQtMjUuMzEtNDEuNS02Ni4zOS0xMC45Ni00MS4wNyAxNC45Ni04NC4wN2w3Ni41NC0xMjYuN1ExNjktNTc5LjY5IDE1NC41LTYwOS4yMyAxNDAtNjM4Ljc3IDE0MC02NzMuMDhxMC02MSA0Mi45Ni0xMDMuOTZRMjI1LjkyLTgyMCAyODYuOTItODIwcTYxIDAgMTAzLjk2IDQyLjk2IDQyLjk3IDQyLjk2IDQyLjk3IDEwMy45NiAwIDYxLTQyLjk3IDEwMy45Ni00Mi45NiA0Mi45Ny0xMDMuOTYgNDIuOTctMTAuNTMgMC0yMC42OS0xLjM5LTEwLjE1LTEuMzgtMTkuMzEtNC41NGwtNzguMTUgMTMwLjc3cS0xMi41NCAyMC42OS03Ljc3IDQwLjY5IDQuNzcgMjAgMTkuNyAzMi41MyAxNC45NCAxMi41MiAzNS42MiAxNC4yMyAyMC42OCAxLjcxIDM5Ljk5LTE0LjIybDQwOC44NC0zNDkuNDZxMzcuNzctMzEuOTIgNzkuMTYtMjguOCA0MS4zOCAzLjExIDcyLjQgMjguNCAzMS4wMSAyNS4yOSA0MS45NiA2Ni4zOCAxMC45NCA0MS4xLTE1LjM2IDg0LjQ4TDc2Ni4zOC00MDBxMjQuNjIgMjAuMDggMzkuMTIgNDkuMzUgMTQuNSAyOS4yNiAxNC41IDYzLjczIDAgNjEtNDMuMjQgMTAzLjk2UTczMy41Mi0xNDAgNjcyLjgtMTQwcS02MC43MiAwLTEwMy42OC00My4xNi00Mi45Ny00My4xNi00Mi45Ny0xMDMuNzd0NDMuMDUtMTAzLjc2cTQzLjA1LTQzLjE2IDEwMy40OS00My4xNiAxMC42IDAgMjAuNjEgMS41OHQxOS4xNiA0LjczbDc4Ljc3LTEzMS4xNXExMi41NC0yMC42OSA3Ljk1LTQwLjY3LTQuNTktMTkuOTgtMTkuNS0zMi41NC0xNC45MS0xMi41Ni0zNS42LTE0LjQ1LTIwLjctMS44OC00MCAxNC40M0wyOTUuMjMtMjgzLjA4Wm01My4xOS0zMjguNXEyNS40My0yNS40MiAyNS40My02MS41IDAtMzYuMDctMjUuNDMtNjEuNVEzMjMtNzYwIDI4Ni45Mi03NjBxLTM2LjA3IDAtNjEuNSAyNS40MlEyMDAtNzA5LjE1IDIwMC02NzMuMDhxMCAzNi4wOCAyNS40MiA2MS41IDI1LjQzIDI1LjQzIDYxLjUgMjUuNDMgMzYuMDggMCA2MS41LTI1LjQzWm0zODUuOTIgMzg2LjE2UTc2MC0yNTAuODUgNzYwLTI4Ni45MnEwLTM2LjA4LTI1LjY2LTYxLjUtMjUuNjYtMjUuNDMtNjEuNjktMjUuNDMtMzYuMDQgMC02MS4yNyAyNS40My0yNS4yMyAyNS40Mi0yNS4yMyA2MS41IDAgMzYuMDcgMjUuMjMgNjEuNVE2MzYuNjEtMjAwIDY3Mi42NS0yMDBxMzYuMDMgMCA2MS42OS0yNS40MlpNMjg2LjkyLTY3My4wOFptMzg2LjE2IDM4Ni4xNloiLz48L3N2Zz4=");
}

.navigation-rail-column .icon[data-icon="front_hand"],
.navigation-bar-demo .icon[data-icon="front_hand"],
.portfolio-page-app-bar .icon[data-icon="front_hand"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik01MzcuOTItODgxLjM3cTguNjIgOC42MiA4LjYyIDIxLjM3djM0MHEwIDEyLjc1LTguNjMgMjEuMzctOC42MyA4LjYzLTIxLjM5IDguNjMtMTIuNzUgMC0yMS4zNy04LjYzLTguNjEtOC42Mi04LjYxLTIxLjM3di0zNDBxMC0xMi43NSA4LjYzLTIxLjM3IDguNjMtOC42MyAyMS4zOC04LjYzIDEyLjc2IDAgMjEuMzcgOC42M1ptLTE1My40NiA0MHE4LjYyIDguNjIgOC42MiAyMS4zN3YzMDBxMCAxMi43NS04LjYzIDIxLjM3LTguNjMgOC42My0yMS4zOSA4LjYzLTEyLjc1IDAtMjEuMzctOC42My04LjYxLTguNjItOC42MS0yMS4zN3YtMzAwcTAtMTIuNzUgOC42My0yMS4zNyA4LjYzLTguNjMgMjEuMzgtOC42MyAxMi43NiAwIDIxLjM3IDguNjNaTTUwMC4wOC02MHEtMTMzLjYyIDAtMjI2Ljg1LTkzLjE4UTE4MC0yNDYuMzUgMTgwLTM4MHYtMzcwcTAtMTIuNzUgOC42My0yMS4zNyA4LjYzLTguNjMgMjEuMzgtOC42MyAxMi43NiAwIDIxLjM3IDguNjNRMjQwLTc2Mi43NSAyNDAtNzUwdjM3MHEwIDEwOSA3NS41IDE4NC41VDUwMC0xMjBxMTA5IDAgMTg0LjUtNzUuNVQ3NjAtMzgwdi0xNTBoLTEwcS0yMC44NSAwLTM1LjQyIDE0LjU4UTcwMC01MDAuODUgNzAwLTQ4MHYxMDIuMzFxMCAxNS4zNi0xMC40IDI1Ljc2LTEwLjM5IDEwLjM5LTI1Ljc2IDEwLjM5aC02Mi4zcS0zNy42MiAwLTYzLjgxIDI2LjE5LTI2LjE5IDI2LjE5LTI2LjE5IDYzLjgxdjMwcTAgMTIuNzUtOC42MyAyMS4zNy04LjYzIDguNjMtMjEuMzggOC42My0xMi43NiAwLTIxLjM4LTguNjMtOC42MS04LjYyLTguNjEtMjEuMzd2LTMwcTAtNjIuMTUgNDMuOTItMTA2LjA4IDQzLjkzLTQzLjkyIDEwNi4wOC00My45Mkg2NDBWLTc4MHEwLTEyLjc1IDguNjMtMjEuMzcgOC42My04LjYzIDIxLjM4LTguNjMgMTIuNzYgMCAyMS4zNyA4LjYzUTcwMC03OTIuNzUgNzAwLTc4MHYyMDQuNjlxMTEuMTUtNi44NCAyMy40NS0xMC43N1E3MzUuNzYtNTkwIDc1MC01OTBoMzMuODRxMTUuMzcgMCAyNS43NiAxMC4zOSAxMC40IDEwLjQgMTAuNCAyNS43NlYtMzgwcTAgMTMzLjY1LTkzLjE2IDIyNi44MlE2MzMuNjktNjAgNTAwLjA4LTYwWk01MzAtMzU1WiIvPjwvc3ZnPg==");
}

.navigation-rail-column .icon[data-icon="dark_mode"],
.navigation-bar-demo .icon[data-icon="dark_mode"],
.portfolio-page-app-bar .icon[data-icon="dark_mode"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODEuMTUtMTQwUTMzOS0xNDAgMjQwLjA4LTIzOC45MiAxNDEuMTYtMzM3Ljg1IDE0MS4xNi00ODBxMC0xMTguMzggNzMuMjYtMjEwLjQ2IDczLjI3LTkyLjA4IDE5NS4xOS0xMTguNjkgMTIuNjItMy4xNiAyMi4yMy42MSA5LjYyIDMuNzcgMTUuNjIgMTEuMjMgNiA3LjQ3IDcuMDggMTguMTIgMS4wNyAxMC42NS01IDIxLjI3LTEyLjM5IDIyLjU0LTE4LjM5IDQ2LjgzdC02IDUxLjA5cTAgOTguMzMgNjguODQgMTY3LjE3UTU2Mi44Mi00MjQgNjYxLjE1LTQyNHEyOS40NyAwIDU2LjMxLTcuNDYgMjYuODUtNy40NiA0Ny0xNy4zMSA5Ljg1LTQuMyAxOS4yMy0zLjA0IDkuMzkgMS4yNyAxNi4wMiA2LjI3IDcuMzcgNSAxMC45NCAxMy42NiAzLjU4IDguNjUuODEgMjAuMzQtMjEuMzEgMTE4LTExNC44MSAxOTQuNzdRNjAzLjE1LTE0MCA0ODEuMTUtMTQwWm0wLTYwcTg4IDAgMTU4LTQ4LjV0MTAyLTEyNi41cS0yMCA1LTQwIDh0LTQwIDNxLTEyMyAwLTIwOS41LTg2LjVUMzY1LjE1LTY2MHEwLTIwIDMtNDB0OC00MHEtNzggMzItMTI2LjUgMTAydC00OC41IDE1OHEwIDExNiA4MiAxOTh0MTk4IDgyWm0tMTAtMjcwWiIvPjwvc3ZnPg==");
}

.navigation-rail-column .icon[data-icon="light_mode"],
.navigation-bar-demo .icon[data-icon="light_mode"],
.portfolio-page-app-bar .icon[data-icon="light_mode"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik01NjUtMzk1cTM1LTM1IDM1LTg1dC0zNS04NXEtMzUtMzUtODUtMzV0LTg1IDM1cS0zNSAzNS0zNSA4NXQzNSA4NXEzNSAzNSA4NSAzNXQ4NS0zNVptLTIxMi40NiA0Mi40NlEzMDAtNDA1LjA4IDMwMC00ODBxMC03NC45MiA1Mi41NC0xMjcuNDZRNDA1LjA4LTY2MCA0ODAtNjYwcTc0LjkyIDAgMTI3LjQ2IDUyLjU0UTY2MC01NTQuOTIgNjYwLTQ4MHEwIDc0LjkyLTUyLjU0IDEyNy40NlE1NTQuOTItMzAwIDQ4MC0zMDBxLTc0LjkyIDAtMTI3LjQ2LTUyLjU0Wk04MC00NTBxLTEyLjc3IDAtMjEuMzgtOC42MlE1MC00NjcuMjMgNTAtNDgwdDguNjItMjEuMzhRNjcuMjMtNTEwIDgwLTUxMGg5MHExMi43NyAwIDIxLjM4IDguNjJRMjAwLTQ5Mi43NyAyMDAtNDgwdC04LjYyIDIxLjM4UTE4Mi43Ny00NTAgMTcwLTQ1MEg4MFptNzEwIDBxLTEyLjc3IDAtMjEuMzgtOC42MlE3NjAtNDY3LjIzIDc2MC00ODB0OC42Mi0yMS4zOFE3NzcuMjMtNTEwIDc5MC01MTBoOTBxMTIuNzcgMCAyMS4zOCA4LjYyUTkxMC00OTIuNzcgOTEwLTQ4MHQtOC42MiAyMS4zOFE4OTIuNzctNDUwIDg4MC00NTBoLTkwWk00NTguNjItNzY4LjYyUTQ1MC03NzcuMjMgNDUwLTc5MHYtOTBxMC0xMi43NyA4LjYyLTIxLjM4UTQ2Ny4yMy05MTAgNDgwLTkxMHQyMS4zOCA4LjYyUTUxMC04OTIuNzcgNTEwLTg4MHY5MHEwIDEyLjc3LTguNjIgMjEuMzhRNDkyLjc3LTc2MCA0ODAtNzYwdC0yMS4zOC04LjYyWm0wIDcxMFE0NTAtNjcuMjMgNDUwLTgwdi05MHEwLTEyLjc3IDguNjItMjEuMzhRNDY3LjIzLTIwMCA0ODAtMjAwdDIxLjM4IDguNjJRNTEwLTE4Mi43NyA1MTAtMTcwdjkwcTAgMTIuNzctOC42MiAyMS4zOFE0OTIuNzctNTAgNDgwLTUwdC0yMS4zOC04LjYyWk0yNDAuMjMtNjc4LjM4bC01MC4zMS00OC45M3EtOC45Mi04LjMxLTguNjEtMjAuODguMzEtMTIuNTggOC42MS0yMS44OSA5LjMxLTkuMyAyMS43LTkuMyAxMi4zOCAwIDIxLjA3IDkuM0wyODItNzIwLjE1cTguNjkgOS4zIDguNjkgMjEuMDdUMjgyLTY3OHEtOC4zMSA5LjMxLTIwLjM4IDguODEtMTIuMDgtLjUtMjEuMzktOS4xOVptNDg3LjA4IDQ4OC40Nkw2NzgtMjM5Ljg1cS04LjY5LTkuMy04LjY5LTIxLjM4IDAtMTIuMDggOC42OS0yMC43NyA4LjMxLTkuMzEgMjAuMzgtOC44MSAxMi4wOC41IDIxLjM5IDkuMTlsNTAuMzEgNDguOTNxOC45MiA4LjMxIDguNjEgMjAuODgtLjMxIDEyLjU4LTguNjEgMjEuODktOS4zMSA5LjMtMjEuNyA5LjMtMTIuMzggMC0yMS4wNy05LjNaTTY3OC02NzhxLTkuMzEtOC4zMS04LjgxLTIwLjM4LjUtMTIuMDggOS4xOS0yMS4zOWw0OC45My01MC4zMXE4LjMxLTguOTIgMjAuODgtOC42MSAxMi41OC4zMSAyMS44OSA4LjYxIDkuMyA5LjMxIDkuMyAyMS43IDAgMTIuMzgtOS4zIDIxLjA3TDcyMC4xNS02NzhxLTkuMyA4LjY5LTIxLjA3IDguNjlUNjc4LTY3OFpNMTg5LjkyLTE4OS45MnEtOS4zLTkuMzEtOS4zLTIxLjcgMC0xMi4zOCA5LjMtMjEuMDdMMjM5Ljg1LTI4MnE5LjMtOC42OSAyMS4zOC04LjY5IDEyLjA4IDAgMjAuNzcgOC42OSA4LjkyIDguMzEgOC40MiAyMC4zOC0uNSAxMi4wOC04LjggMjEuMzlsLTQ4LjkzIDUwLjMxcS04LjY5IDkuMy0yMS4wNyA5LTEyLjM5LS4zMS0yMS43LTlaTTQ4MC00ODBaIi8+PC9zdmc+");
}

.navigation-rail-column .icon[data-icon="style"],
.navigation-bar-demo .icon[data-icon="style"],
.portfolio-page-app-bar .icon[data-icon="style"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0xNjUuOTItMTU4IDE0NS0xNjYuNjFRMTEzLjYyLTE4MCAxMDIuOTItMjEycS0xMC42OS0zMiAzLjMxLTYyLjYxbDU5LjY5LTEyOS4wOFYtMTU4Wm0xNzUuMzkgNzUuNjlxLTMzIDAtNTYuNS0yMy41dC0yMy41LTU2LjV2LTE5OS4yM2w5MS4zOCAyNTMuMjNxMyA3LjM5IDYgMTMuNjkgMyA2LjMxIDggMTIuMzFoLTI1LjM4Wm0xODAuNjEtMjAuMTVxLTIzLjkyIDkuMy00Ni42MS0yLjQzLTIyLjY5LTExLjczLTMyLTM2LjAzbC0xNzgtNDg4cS05LjMxLTIzLjkzIDEuNjEtNDYuOTMgMTAuOTMtMjIuOTkgMzQuODUtMzEuNjlsMzAyLTExMHEyMy45Mi05LjMgNDYuMjMgMi40MyAyMi4zMSAxMS43MyAzMS42MSAzNi4wM2wxNzggNDg3LjIzcTkuMzEgMjQuMzEtMS4wMyA0Ny41LTEwLjM1IDIzLjE5LTM0LjY2IDMxLjg5bC0zMDIgMTEwWk00NzEuMzUtNTcxLjVxMTEuNS0xMS41IDExLjUtMjguNXQtMTEuNS0yOC41cS0xMS41LTExLjUtMjguNS0xMS41dC0yOC41IDExLjVxLTExLjUgMTEuNS0xMS41IDI4LjV0MTEuNSAyOC41cTExLjUgMTEuNSAyOC41IDExLjV0MjguNS0xMS41Wm0yOS41IDQxMS41IDMwMi0xMTAtMTc4LTQ5MC0zMDIgMTEwIDE3OCA0OTBabS0xNzgtNDkwIDMwMi0xMTAtMzAyIDExMFoiLz48L3N2Zz4=");
}

.navigation-rail-column .icon[data-icon="arrow_split"],
.navigation-bar-demo .icon[data-icon="arrow_split"],
.portfolio-page-app-bar .icon[data-icon="arrow_split"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0yMTAtNDUwcS0xMi43NSAwLTIxLjM3LTguNjMtOC42My04LjYzLTguNjMtMjEuMzggMC0xMi43NiA4LjYzLTIxLjM3UTE5Ny4yNS01MTAgMjEwLTUxMGgyNTIuODVxMi4zIDAgNC40Mi0uNzd0NC4wNC0yLjY5TDY3Ny44NS03MjBINTkwcS0xMi43NSAwLTIxLjM4LTguNjMtOC42Mi04LjYzLTguNjItMjEuMzggMC0xMi43NiA4LjYyLTIxLjM3UTU3Ny4yNS03ODAgNTkwLTc4MGgxNTMuODRxMTUuMzcgMCAyNS43NiAxMC40IDEwLjQgMTAuMzkgMTAuNCAyNS43NlYtNTkwcTAgMTIuNzUtOC42MyAyMS4zOC04LjYzIDguNjItMjEuMzggOC42Mi0xMi43NiAwLTIxLjM3LTguNjJRNzIwLTU3Ny4yNSA3MjAtNTkwdi04Ny44NUw1MTMuMjMtNDcxLjA4cS05Ljg1IDkuODUtMjMuMTEgMTUuNDYtMTMuMjYgNS42Mi0yNy44OSA1LjYySDIxMFptMzgwIDI3MHEtMTIuNzUgMC0yMS4zOC04LjYzLTguNjItOC42My04LjYyLTIxLjM4IDAtMTIuNzYgOC42Mi0yMS4zN1E1NzcuMjUtMjQwIDU5MC0yNDBoODcuODVMNTU4LjQ2LTM1OC43N3EtOC45Mi04LjkyLTkuMTEtMjEuMTktLjItMTIuMjcgOS4xMS0yMS41OCA5LjMxLTkuMzEgMjEuNjktOS4zMSAxMi4zOSAwIDIxLjY5IDkuMzFMNzIwLTI4Mi4xNVYtMzcwcTAtMTIuNzUgOC42My0yMS4zOCA4LjYzLTguNjIgMjEuMzgtOC42MiAxMi43NiAwIDIxLjM3IDguNjJRNzgwLTM4Mi43NSA3ODAtMzcwdjE1My44NHEwIDE1LjM3LTEwLjQgMjUuNzYtMTAuMzkgMTAuNC0yNS43NiAxMC40SDU5MFoiLz48L3N2Zz4=");
}

.navigation-rail-column .icon[data-icon="auto_awesome"],
.navigation-bar-demo .icon[data-icon="auto_awesome"],
.portfolio-page-app-bar .icon[data-icon="auto_awesome"] {
  --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im02OTQuODUtNzA3LjE1LTYzLjQ3LTI4LjU0cS00LjUzLTIuMy02LjQyLTYuMTMtMS44OC0zLjgzLTEuODgtNy42NnQxLjg4LTcuNXExLjg5LTMuNjYgNi40Mi01Ljg3bDYzLjQ3LTI4LjkyIDI4LjUzLTYzLjA3cTIuMy00LjQ3IDYuMTMtNi43IDMuODMtMi4yMyA3LjY2LTIuMjN0Ny41IDIuMjNxMy42NyAyLjIzIDUuODcgNi43bDI4Ljg2IDYzLjEzIDYzLjE0IDI4Ljg2cTQuNDYgMi4yMSA2LjY5IDUuODcgMi4yMyAzLjY3IDIuMjMgNy41dC0yLjIzIDcuNjZxLTIuMjMgMy44My02LjY5IDYuMTNsLTYzLjA4IDI4LjU0LTI4LjkyIDYzLjQ2cS0yLjIgNC41My01Ljg3IDYuNDItMy42NyAxLjg4LTcuNSAxLjg4dC03LjY2LTEuODhxLTMuODMtMS44OS02LjEzLTYuNDJsLTI4LjUzLTYzLjQ2Wk0yNjIuMzEtMzk1LjM5IDEyMy44NS00NThxLTcuMzctMy4xOS0xMC42NS05LjE3LTMuMjctNS45OC0zLjI3LTEyLjgzdDMuMjctMTIuODNxMy4yOC01Ljk4IDEwLjY1LTkuMTdsMTM4LjQ2LTYyLjYxIDYyLjYxLTEzOC40NnEzLjE5LTcuMzggOS4xNy0xMC42NSA1Ljk5LTMuMjggMTIuODMtMy4yOCA2Ljg1IDAgMTIuODMgMy4yOCA1Ljk4IDMuMjcgOS4xNyAxMC42NWw2Mi42MiAxMzguNDZMNTcwLTUwMnE3LjM3IDMuMTkgMTAuNjQgOS4xNyAzLjI4IDUuOTggMy4yOCAxMi44M3QtMy4yOCAxMi44M3EtMy4yNyA1Ljk4LTEwLjY0IDkuMTdsLTEzOC40NiA2Mi42MS02Mi42MiAxMzguNDZxLTMuMTkgNy4zOC05LjE3IDEwLjY1LTUuOTggMy4yOC0xMi44MyAzLjI4LTYuODQgMC0xMi44My0zLjI4LTUuOTgtMy4yNy05LjE3LTEwLjY1bC02Mi42MS0xMzguNDZaTTM0Ni45Mi0zNTRsNDAtODYgODYtNDAtODYtNDAtNDAtODYtNDAgODYtODYgNDAgODYgNDAgNDAgODZabTM1MC43NyAxODguNjEtNjMuMDgtMjguNTNxLTQuNDYtMi4yMy02Ljg4LTYuMDh0LTIuNDItNy42OXEwLTMuODUgMi40Mi03LjcgMi40Mi0zLjg0IDYuODgtNi4wN0w2OTcuNjktMjUwbDI4LjU0LTYzLjA4cTIuMjMtNC40NiA2LjA4LTYuODggMy44NC0yLjQyIDcuNjktMi40MiAzLjg0IDAgNy42OSAyLjQyIDMuODUgMi40MiA2LjA4IDYuODhMNzgyLjMxLTI1MGw2My4wNyAyOC41NHE0LjQ2IDIuMjMgNi44OSA2LjA3IDIuNDIgMy44NSAyLjQyIDcuNyAwIDMuODQtMi40MiA3LjY5LTIuNDMgMy44NS02Ljg5IDYuMDhsLTYzLjA3IDI4LjUzLTI4LjU0IDYzLjA4cS0yLjIzIDQuNDYtNi4wOCA2Ljg5UTc0My44NC05MyA3NDAtOTNxLTMuODUgMC03LjY5LTIuNDItMy44NS0yLjQzLTYuMDgtNi44OWwtMjguNTQtNjMuMDhaTTM0Ni45Mi00ODBaIi8+PC9zdmc+");
}