:root {
  --radius-none: 0px;
  --radius-extra-small: 4px;
  --radius-large-increased: 20px;
  --radius-extra-large-increased: 32px;
  --radius-extra-extra-large: 48px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-xl: 8px;
  --radius-small: var(--radius-sm);
  --radius-medium: var(--radius-md);
  --radius-large: var(--radius-lg);
  --radius-extra-large: var(--radius-xl);
  --color-surface: #00216c;
  --color-on-surface: #ffffff;
  --color-primary: #b2c5ff;
  --color-on-primary: #000000;
  --color-accent: #ff6a3d;
  --color-success: #60a217;
  --color-warning: #f5c842;
  --color-error: #ff6a3d;
  --color-primary-container: #314578;
  --color-on-primary-container: #dae2ff;
  --color-secondary: #c0c6dd;
  --color-on-secondary: #2a3042;
  --color-secondary-container: #404659;
  --color-on-secondary-container: #dce2f9;
  --color-tertiary: #e1bbdc;
  --color-on-tertiary: #422741;
  --color-tertiary-container: #5a3d59;
  --color-on-tertiary-container: #fed6f9;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  --color-surface-variant: #45464f;
  --color-surface-container-lowest: #000d37;
  --color-surface-container-low: #003cb3;
  --color-surface-container: #003cb3;
  --color-surface-container-high: #00216c;
  --color-surface-container-highest: #33343a;
  --color-outline-variant: #6f9fff;
  --color-inverse-surface: #e3e2e9;
  --color-on-inverse-surface: #2f3036;
  --color-inverse-primary: #495d92;
  --color-scrim: #000000;
  --color-background: #000d37;
  --color-surface-2: #003cb3;
  --color-text-muted: #e6f0ff;
  --color-border: #6f9fff;
  --color-info: #8cb8ff;
  --color-backdrop: rgba(0, 0, 0, 0.6);
  --color-landing-blue: #205bff;
  --color-landing-blue-soft: #eaf0ff;
  --color-landing-navy: #0e1b3d;
  --color-landing-ink: #16213a;
  --color-landing-muted: #5d6880;
  --color-landing-bg: #f4f6fa;
  --color-landing-line: #e3e7ef;
  --color-landing-red: #a8321e;
  --color-landing-red-soft: #fbeae6;
  --color-landing-gold-ink: #8a6508;
  --color-landing-gold-soft: #fdf5dc;
  --color-login-heading: #0e1880;
  --color-button-quiet: #ffffff;
  --color-button-pressed: #747ee6;
  --color-button-pressed-label: #ffffff;
  --color-button-hover: #4553de;
  --color-button-outline-fill: #ffffff;
  --color-page-tint: #e8e9fb;
  --color-card-fill: #ffffff;
  --color-tile-fill: #edeef0;
  --color-tile-border: #dcdde1;
  --color-card-outline: #d1d4f7;
  --color-banner-back: #ffffff;
  --color-banner-title: #ffffff;
  --color-avatar-ring: #a2a9ef;
  --color-button-outline-label: #05082b;
  --color-button-outline-pressed-label: #0e1880;
  --color-button-disabled-label: #0e3b8b;
  --color-button-outline-disabled-border: #cac4d0;
  --color-button-outline-disabled-label: #1d1b20;
  --color-button-outline-pressed: #f3f4fd;
  --color-login-action: #1728d6;
  --color-nav-ink: #ffffff;
  --color-nav-selected: #1728d6;
  --color-nav-on-selected: #ffffff;
  --color-primary: #2f74ff;
  --color-on-surface-variant: #e6f0ff;
  --color-outline: #6f9fff;
  --color-m3-error: #ff6a3d;
  --color-m3-on-primary: #ffffff;
  --color-figma-selection-purple: #9747ff;
  --color-chart-identity: #8cb8ff;
  --color-chart-location: #5ed7b4;
  --color-chart-contact: #ff9c75;
  --color-chart-relationships: #c7a4ff;
  --color-sumi-ink: #000000;
  --color-vip-gold-deep: #7e5306;
  --color-vip-gold-shadow: #ad791a;
  --color-vip-gold-mid: #c89327;
  --color-vip-gold-warm: #daa533;
  --color-vip-gold-light: #e8bf59;
  --color-vip-gold-highlight: #fff3b3;
  --color-b2b-primary: #015aff;
  --color-b2b-primary-dim: #0046d6;
  --color-b2b-accent: #ff6a3d;
  --color-b2b-success: #60a217;
  --color-b2b-success-dim: #193102;
  --color-b2b-background: #000d37;
  --color-b2b-background-deep: #000d37;
  --color-b2b-surface: #00216c;
  --color-b2b-surface-2: #003cb3;
  --color-b2b-border: #6f9fff;
  --color-b2b-on-surface: #ffffff;
  --color-b2b-on-surface-variant: #e6f0ff;
  --color-b2b-subtle: #e6f0ff;
  --color-b2b-on-primary: #ffffff;
  --color-cluzy-story-blue: #015aff;
  --color-cluzy-story-blue-dim: #0046d6;
  --color-cluzy-story-orange: #ff6a3d;
  --color-cluzy-story-green: #60a217;
  --color-cluzy-story-green-dim: #193102;
  --color-cluzy-story-bg: #000d37;
  --color-cluzy-story-bg-deep: #000d37;
  --color-cluzy-story-panel: #101833;
  --color-cluzy-story-panel-2: #182247;
  --color-cluzy-story-border: #26304f;
  --color-cluzy-story-text: #ffffff;
  --color-cluzy-story-muted: #e6f0ff;
  --color-cluzy-story-subtle: #e6f0ff;
  --color-green-100: #95f829;
  --color-green-200: #7acc20;
  --color-green-300: #60a217;
  --color-green-400: #477a0f;
  --color-green-500: #2f5407;
  --color-green-600: #193102;
  --color-green-700: #071401;
  --color-yellow-100: #feefd6;
  --color-yellow-200: #f5c842;
  --color-yellow-300: #c7a234;
  --color-yellow-400: #9b7d26;
  --color-yellow-500: #715819;
  --color-yellow-600: #493a0d;
  --color-yellow-700: #251c04;
  --color-orange-10: rgba(255, 232, 223, 0.2);
  --color-orange-50: rgba(255, 232, 223, 0.4);
  --color-orange-100: #ffe8df;
  --color-orange-200: #fa9786;
  --color-orange-300: #f05b24;
  --color-orange-400: #b44216;
  --color-orange-500: #7c2b0d;
  --color-orange-600: #481604;
  --color-orange-700: #250701;
  --color-blue-50: rgba(230, 240, 255, 0.4);
  --color-blue-100: #e6f0ff;
  --color-blue-200: #8cb8ff;
  --color-blue-300: #015aff;
  --color-blue-400: #0046d6;
  --color-blue-500: #003cb3;
  --color-blue-600: #00216c;
  --color-blue-700: #000d37;
  --color-clean-data-grey-100: #dbe0d9;
  --color-clean-data-grey-200: #b4b8b2;
  --color-clean-data-grey-300: #8e928d;
  --color-clean-data-grey-400: #6b6d69;
  --color-clean-data-grey-500: #494b4b;
  --color-clean-data-grey-600: #292b29;
  --color-clean-data-grey-700: #101110;
  --color-cluzy-grey-50: rgba(241, 240, 240, 0.4);
  --color-cluzy-grey-100: #f1f0f0;
  --color-cluzy-grey-200: #d7d3d2;
  --color-cluzy-grey-300: #b3aba9;
  --color-cluzy-grey-400: #8e8583;
  --color-cluzy-grey-500: #686260;
  --color-cluzy-grey-600: #45403f;
  --color-cluzy-grey-700: #1e1e1d;
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.6);
  --color-black-70: rgba(0, 0, 0, 0.7);
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-90: rgba(0, 0, 0, 0.9);
  --color-black-100: #000000;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-primary-hover: #a4b5eb;
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --border: var(--color-border);
  --text: var(--color-on-surface);
  --text-muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --error: var(--color-error);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --info: var(--color-info);
  --accent: var(--color-accent);
  --on-surface: var(--color-on-surface);
  --on-primary: var(--color-on-primary);
  --on-error: #000000;
  --on-success: #000000;
  --on-accent: #000000;
  --color-accent-text: #b2c5ff;
  --accent-text: var(--color-accent-text);
  --border-width: 1px;
  --font-display-large: 400 clamp(36px, 2.25rem + 2.625vw, 57px)/1.12 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-display-large: -0.25px;
  --font-display-large-emphasized: 700 clamp(36px, 2.25rem + 2.625vw, 57px)/1.12 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-display-large-emphasized: -0.25px;
  --font-display-medium: 400 clamp(28px, 1.75rem + 2.125vw, 45px)/1.16 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display-medium-emphasized: 700 clamp(28px, 1.75rem + 2.125vw, 45px)/1.16 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display-small: 400 clamp(24px, 1.5rem + 1.5vw, 36px)/1.22 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display-small-emphasized: 700 clamp(24px, 1.5rem + 1.5vw, 36px)/1.22 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-large: 400 clamp(24px, 1.5rem + 1vw, 32px)/1.25 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-large-emphasized: 700 clamp(24px, 1.5rem + 1vw, 32px)/1.25 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-medium: 400 clamp(22px, 1.375rem + 0.75vw, 28px)/1.29 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-medium-emphasized: 700 clamp(22px, 1.375rem + 0.75vw, 28px)/1.29 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-small: 400 clamp(20px, 1.25rem + 0.5vw, 24px)/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-small-emphasized: 700 clamp(20px, 1.25rem + 0.5vw, 24px)/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title-large: 500 clamp(18px, 1.125rem + 0.5vw, 22px)/1.27 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title-large-emphasized: 700 clamp(18px, 1.125rem + 0.5vw, 22px)/1.27 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title-medium: 500 clamp(14px, 0.875rem + 0.25vw, 16px)/1.5 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-title-medium: 0.15px;
  --font-title-medium-emphasized: 700 clamp(14px, 0.875rem + 0.25vw, 16px)/1.5 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-title-medium-emphasized: 0.15px;
  --font-title-small: 500 clamp(12px, 0.75rem + 0.25vw, 14px)/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-title-small: 0.1px;
  --font-title-small-emphasized: 700 clamp(12px, 0.75rem + 0.25vw, 14px)/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-title-small-emphasized: 0.1px;
  --font-body-large: 400 clamp(14px, 0.875rem + 0.25vw, 16px)/1.5 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-large: 0.5px;
  --font-body-large-emphasized: 700 clamp(14px, 0.875rem + 0.25vw, 16px)/1.5 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-large-emphasized: 0.5px;
  --font-body-medium: 400 clamp(12px, 0.75rem + 0.25vw, 14px)/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-medium: 0.25px;
  --font-body-medium-emphasized: 700 clamp(12px, 0.75rem + 0.25vw, 14px)/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-medium-emphasized: 0.25px;
  --font-body-small: 400 clamp(11px, 0.6875rem + 0.125vw, 12px)/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-small: 0.4px;
  --font-body-small-emphasized: 700 clamp(11px, 0.6875rem + 0.125vw, 12px)/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-small-emphasized: 0.4px;
  --font-label-large: 500 14px/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-large: 0.1px;
  --font-label-large-emphasized: 700 14px/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-large-emphasized: 0.1px;
  --font-label-medium: 500 12px/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-medium: 0.5px;
  --font-label-medium-emphasized: 700 12px/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-medium-emphasized: 0.5px;
  --font-label-small: 500 11px/1.45 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-small: 0.5px;
  --font-label-small-emphasized: 700 11px/1.45 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-small-emphasized: 0.5px;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
  --elevation-2: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
  --elevation-3: 0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15);
  --elevation-4: 0 2px 3px rgba(0,0,0,0.30), 0 6px 10px 4px rgba(0,0,0,0.15);
  --elevation-5: 0 4px 4px rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-standard: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --motion-duration-short: var(--duration-fast);
  --motion-duration-medium: var(--duration-standard);
  --motion-duration-long: var(--duration-slow);
  --motion-easing-standard: var(--ease-standard);
  --motion-easing-emphasized: var(--ease-emphasized);
  --loading-spin-duration: 0.9s;
  --loading-spin-easing: linear;
  --loading-pulse-duration: 1.4s;
  --loading-pulse-min-opacity: 0.7;
  --loading-progress-curve-tau: 0.6;
  --loading-progress-bar-height: 2px;
  --loading-progress-bar-color: var(--accent);
  --motion-spring-fast-spatial: linear(0, 0.037, 0.125, 0.237, 0.355, 0.467, 0.57, 0.659, 0.735, 0.797, 0.848, 0.887, 0.918, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-fast-spatial-duration: 224ms;
  --transition-fast-spatial: 224ms linear(0, 0.037, 0.125, 0.237, 0.355, 0.467, 0.57, 0.659, 0.735, 0.797, 0.848, 0.887, 0.918, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-fast-effects: linear(0, 0.044, 0.142, 0.261, 0.381, 0.491, 0.589, 0.672, 0.741, 0.797, 0.842, 0.877, 0.906, 0.928, 0.945, 0.958, 0.968, 0.976, 0.982, 0.986, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-fast-effects-duration: 150ms;
  --transition-fast-effects: 150ms linear(0, 0.044, 0.142, 0.261, 0.381, 0.491, 0.589, 0.672, 0.741, 0.797, 0.842, 0.877, 0.906, 0.928, 0.945, 0.958, 0.968, 0.976, 0.982, 0.986, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-default-spatial: linear(0, 0.038, 0.126, 0.237, 0.355, 0.468, 0.57, 0.66, 0.735, 0.798, 0.848, 0.888, 0.919, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-default-spatial-duration: 317ms;
  --transition-default-spatial: 317ms linear(0, 0.038, 0.126, 0.237, 0.355, 0.468, 0.57, 0.66, 0.735, 0.798, 0.848, 0.888, 0.919, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-default-effects: linear(0, 0.044, 0.143, 0.262, 0.382, 0.493, 0.591, 0.674, 0.742, 0.798, 0.843, 0.879, 0.907, 0.929, 0.946, 0.959, 0.969, 0.976, 0.982, 0.987, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-default-effects-duration: 232ms;
  --transition-default-effects: 232ms linear(0, 0.044, 0.143, 0.262, 0.382, 0.493, 0.591, 0.674, 0.742, 0.798, 0.843, 0.879, 0.907, 0.929, 0.946, 0.959, 0.969, 0.976, 0.982, 0.987, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-slow-spatial: linear(0, 0.037, 0.126, 0.237, 0.355, 0.468, 0.57, 0.659, 0.735, 0.797, 0.848, 0.887, 0.918, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-slow-spatial-duration: 484ms;
  --transition-slow-spatial: 484ms linear(0, 0.037, 0.126, 0.237, 0.355, 0.468, 0.57, 0.659, 0.735, 0.797, 0.848, 0.887, 0.918, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-slow-effects: linear(0, 0.044, 0.142, 0.261, 0.381, 0.492, 0.589, 0.672, 0.741, 0.797, 0.842, 0.878, 0.906, 0.928, 0.945, 0.958, 0.968, 0.976, 0.982, 0.986, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-slow-effects-duration: 327ms;
  --transition-slow-effects: 327ms linear(0, 0.044, 0.142, 0.261, 0.381, 0.492, 0.589, 0.672, 0.741, 0.797, 0.842, 0.878, 0.906, 0.928, 0.945, 0.958, 0.968, 0.976, 0.982, 0.986, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --icon-stroke: 1.5px;
  --icon-radius: 2px;
  --icon-font-family: "Material Symbols Rounded";
  --icon-fill: 0;
  --icon-wght: 400;
  --icon-grad: 0;
  --icon-opsz: 24;
  --icon-size: 24px;
  --density: standard;
  --pangeon-page-gutter: clamp(var(--space-3), 2vw, var(--space-6));
  --pangeon-page-top: clamp(var(--space-2), 1.5vw, var(--space-4));
  --pangeon-page-bottom: clamp(var(--space-6), 5vw, var(--space-12));
  --pangeon-page-header-gap: var(--space-2);
  --pangeon-panel-gap: var(--space-3);
  --pangeon-surface-padding: var(--space-4);
  --pangeon-control-group-gap: var(--space-2);
  --pangeon-toolbar-gap: var(--space-2);
  --pangeon-toolbar-padding: var(--space-1);
  --pangeon-metadata-gap: var(--space-2);
  --pangeon-caption-gap: var(--space-2);
  --pangeon-table-cell-padding: var(--space-2) var(--space-3);
  --pangeon-overlay-inset: var(--space-2);
  --pangeon-overlay-padding: var(--space-1);
  --pangeon-scroll-container-padding: var(--space-3);
  --pangeon-empty-state-padding: var(--space-8);
  --color-overlay-soft: rgba(255,255,255,0.06);
  --color-overlay-light: rgba(255,255,255,0.12);
  --color-overlay-medium: rgba(255,255,255,0.20);
  --color-shadow-soft: rgba(0,0,0,0.15);
  --color-shadow-medium: rgba(0,0,0,0.25);
  --color-shadow-strong: rgba(0,0,0,0.40);
  --color-shadow-heavy: rgba(0,0,0,0.60);
  /* StyleGuide → buttons */
  --button-radius: 4px;
  --button-padding-x: 16px;
  --button-padding-y: 10px;
  --button-font-size: 16px;
  --button-font-weight: 500;
  --button-primary-bg: #1728d6;
  --button-primary-fg: #ffffff;
  --button-primary-border: #ffffff;
  --button-primary-bg-hover: #4553de;
  --button-secondary-bg: #ffffff;
  --button-secondary-fg: #05082b;
  --button-secondary-border: #ffffff;
  --button-secondary-bg-hover: #e8e9fb;
  --button-accent-bg: #1728d6;
  --button-accent-fg: #ffffff;
  --button-accent-border: #ffffff;
  --button-accent-bg-hover: #4553de;
  --button-info-bg: #ffffff;
  --button-info-fg: #05082b;
  --button-info-border: #ffffff;
  --button-info-bg-hover: #e8e9fb;
  --cta-radius: 4px;
  --cta-padding-x: 16px;
  --cta-padding-y: 10px;
  --cta-min-height: 48px;
  --cta-font: 500 16px/1.43 var(--font-body);
  --cta-primary-bg: #1728d6;
  --cta-primary-fg: #ffffff;
  --cta-secondary-bg: #ffffff;
  --cta-secondary-fg: #05082b;
  --cta-secondary-border: 1px solid #1728d6;
  --button-primary-hover-bg: var(--color-button-hover);
  --button-primary-hover-fg: #ffffff;
  --button-primary-hover-border: var(--color-button-hover);
  --button-primary-hover-filter: none;
  --button-primary-focus-bg: var(--button-primary-hover-bg);
  --button-primary-focus-fg: var(--button-primary-hover-fg);
  --button-primary-focus-border: var(--button-primary-hover-border);
  --button-primary-pressed-bg: var(--color-button-pressed);
  --button-primary-pressed-fg: var(--color-button-pressed-label);
  --button-primary-pressed-border: var(--color-button-pressed);
  --button-primary-pressed-filter: none;
  --button-primary-disabled-bg: var(--color-black-10);
  --button-primary-disabled-fg: color-mix(in srgb, var(--color-button-disabled-label) 38%, transparent);
  --button-primary-disabled-border: transparent;
  --button-primary-disabled-opacity: 1;
  --button-secondary-border-width: 2px;
  --button-secondary-hover-bg: #e8e9fb;
  --button-secondary-hover-fg: var(--color-button-outline-label);
  --button-secondary-hover-filter: none;
  --button-secondary-focus-bg: var(--button-secondary-hover-bg);
  --button-secondary-focus-fg: var(--button-secondary-hover-fg);
  --button-secondary-focus-border: var(--button-secondary-hover-border);
  --button-secondary-pressed-bg: var(--color-button-outline-pressed);
  --button-secondary-pressed-fg: var(--color-button-outline-pressed-label);
  --button-secondary-pressed-border: var(--color-button-hover);
  --button-secondary-pressed-filter: none;
  --button-secondary-disabled-bg: var(--color-black-10);
  --button-secondary-disabled-fg: color-mix(in srgb, var(--color-button-outline-disabled-label) 38%, transparent);
  --button-secondary-disabled-border: var(--color-button-outline-disabled-border);
  --button-secondary-disabled-opacity: 1;
  --button-accent-hover-bg: var(--color-button-hover);
  --button-accent-hover-fg: #ffffff;
  --button-accent-hover-border: var(--color-button-hover);
  --button-accent-hover-filter: none;
  --button-accent-focus-bg: var(--button-accent-hover-bg);
  --button-accent-focus-fg: var(--button-accent-hover-fg);
  --button-accent-focus-border: var(--button-accent-hover-border);
  --button-accent-pressed-bg: var(--color-button-pressed);
  --button-accent-pressed-fg: var(--color-button-pressed-label);
  --button-accent-pressed-border: var(--color-button-pressed);
  --button-accent-pressed-filter: none;
  --button-accent-disabled-bg: var(--color-black-10);
  --button-accent-disabled-fg: color-mix(in srgb, var(--color-button-disabled-label) 38%, transparent);
  --button-accent-disabled-border: transparent;
  --button-accent-disabled-opacity: 1;
  --button-info-border-width: 2px;
  --button-info-hover-bg: #e8e9fb;
  --button-info-hover-fg: var(--color-button-outline-label);
  --button-info-hover-filter: none;
  --button-info-focus-bg: var(--button-info-hover-bg);
  --button-info-focus-fg: var(--button-info-hover-fg);
  --button-info-focus-border: var(--button-info-hover-border);
  --button-info-pressed-bg: var(--color-button-outline-pressed);
  --button-info-pressed-fg: var(--color-button-outline-pressed-label);
  --button-info-pressed-border: var(--color-button-hover);
  --button-info-pressed-filter: none;
  --button-info-disabled-bg: var(--color-black-10);
  --button-info-disabled-fg: color-mix(in srgb, var(--color-button-outline-disabled-label) 38%, transparent);
  --button-info-disabled-border: var(--color-button-outline-disabled-border);
  --button-info-disabled-opacity: 1;
  --cta-primary-hover-bg: var(--color-button-hover);
  --cta-primary-hover-fg: #ffffff;
  --cta-primary-hover-border: 1px solid var(--color-button-hover);
  --cta-primary-focus-bg: var(--cta-primary-hover-bg);
  --cta-primary-focus-fg: var(--cta-primary-hover-fg);
  --cta-primary-focus-border: var(--cta-primary-hover-border);
  --cta-primary-pressed-bg: var(--color-button-pressed);
  --cta-primary-pressed-fg: var(--color-button-pressed-label);
  --cta-primary-pressed-border: 1px solid var(--color-button-pressed);
  --cta-primary-disabled-bg: var(--color-black-10);
  --cta-primary-disabled-fg: color-mix(in srgb, var(--color-button-disabled-label) 38%, transparent);
  --cta-primary-disabled-border: 1px solid transparent;
  --cta-secondary-hover-bg: #e8e9fb;
  --cta-secondary-hover-fg: var(--color-button-outline-label);
  --cta-secondary-focus-bg: var(--cta-secondary-hover-bg);
  --cta-secondary-focus-fg: var(--cta-secondary-hover-fg);
  --cta-secondary-focus-border: var(--cta-secondary-hover-border);
  --cta-secondary-pressed-bg: var(--color-button-outline-pressed);
  --cta-secondary-pressed-fg: var(--color-button-outline-pressed-label);
  --cta-secondary-pressed-border: 1px solid var(--color-button-hover);
  --cta-secondary-disabled-bg: var(--color-black-10);
  --cta-secondary-disabled-fg: color-mix(in srgb, var(--color-button-outline-disabled-label) 38%, transparent);
  --cta-secondary-disabled-border: 1px solid var(--color-button-outline-disabled-border);
  /* StyleGuide → fonts */
  --font-body: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 800;
  --line-height-body: 1.5;
  --type-caption: 14.17px;
  --type-body: 17px;
  --type-title: 20.4px;
  --type-headline: 24.48px;
  --fontsize-fluid-sm: 14.17px;
  --fontsize-fluid-md: 17px;
  --fontsize-fluid-lg: 20.4px;
  --type-heading-1: clamp(29.38px, calc(29.38px + 1.5vw), 35.25px);
  --type-heading-2: clamp(24.48px, calc(24.48px + 1vw), 29.38px);
  --type-heading-3: clamp(20.4px, calc(20.4px + 0.6vw), 24.48px);
  /* StyleGuide → typography roles */
  --typography-legal-font-family: var(--font-body);
  --typography-legal-size: 17px;
  --typography-legal-line-height: 1.65;
  /* StyleGuide → shapes */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-xl: 10px;
  --radius-extra-small: var(--radius-sm);
  --radius-large-increased: var(--radius-lg);
  --radius-extra-large-increased: var(--radius-xl);
  --radius-extra-extra-large: var(--radius-xl);
  /* StyleGuide → modals */
  --modal-bg: #00216c;
  --modal-fg: #ffffff;
  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --modal-radius: var(--radius-lg);
  /* StyleGuide → forms */
  --form-error-color: #fa9786;
  --form-control-bg: #00216c;
  --form-control-fg: #ffffff;
  --form-control-border: #8cb8ff;
  --form-control-focus-border: #8cb8ff;
  --form-control-radius: var(--radius-sm);
  --form-control-chevron-color: #ffffff;
  --form-control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  /* StyleGuide → header/navigation */
  --pangeon-nav-background: #ffffff;
  --pangeon-nav-foreground: #101115;
  --pangeon-nav-active-accent: #1728d6;
  --pangeon-nav-border-color: #898280;
  --pangeon-nav-border: 1px solid #898280;
  --pangeon-nav-height: calc(var(--space-touch) + 1.5rem);
  --pangeon-nav-title-weight: 700;
  --pangeon-nav-back-color: var(--color-banner-back);
  --pangeon-nav-actions-gap: var(--space-3);
  --pangeon-nav-spoke-breakpoint: 720px;
  --pangeon-nav-avatar-ring: var(--color-avatar-ring);
  --pangeon-nav-action-size: var(--control-size-sm);
  --pangeon-nav-action-background: var(--color-tile-fill);
  --pangeon-nav-action-ring: var(--color-card-outline);
  /* StyleGuide -> surfaces (page, card, panel, tile, ...) */
  --surface-page-bg: var(--color-page-tint);
  --surface-card-bg: var(--color-card-fill);
  --surface-card-border: none;
  --surface-card-radius: var(--radius-md);
  --surface-card-shadow: var(--elevation-1);
  --surface-card-padding: var(--pangeon-surface-padding);
  --surface-panel-bg: var(--color-card-fill);
  --surface-panel-border: none;
  --surface-panel-radius: var(--radius-md);
  --surface-panel-shadow: var(--elevation-1);
  --surface-panel-padding: var(--pangeon-surface-padding);
  --surface-default-bg: var(--color-card-fill);
  --surface-default-border: none;
  --surface-default-radius: var(--radius-md);
  --surface-default-shadow: var(--elevation-1);
  --surface-elevated-bg: var(--color-card-fill);
  --surface-elevated-border: none;
  --surface-elevated-radius: var(--radius-md);
  --surface-elevated-shadow: var(--elevation-2);
  --surface-tile-bg: var(--color-card-fill);
  --surface-tile-border: var(--border-thin) var(--border-style) var(--color-card-outline);
  --surface-tile-radius: var(--radius-md);
  --surface-tile-shadow: var(--elevation-0);
  --surface-tile-padding: var(--space-2);
  --surface-inset-bg: var(--color-card-fill);
  --surface-inset-border: var(--border-thin) var(--border-style) var(--color-card-outline);
  --surface-inset-radius: var(--radius-md);
  --surface-inset-shadow: var(--elevation-0);
  /* StyleGuide -> nav.places (bottom tabs / rail) */
  --pangeon-places-rail-from: 720px;
  --pangeon-places-ink: var(--color-nav-ink);
  --pangeon-places-selected-bg: var(--color-nav-selected);
  --pangeon-places-selected-fg: var(--color-nav-on-selected);
  --pangeon-places-selected-weight: 700;
  --pangeon-places-selected-radius: var(--radius-sm);
  --pangeon-places-disabled-opacity: 0.4;
  /* StyleGuide -> feedback.fab */
  --pangeon-feedback-fab-bg: var(--color-card-fill);
  --pangeon-feedback-fab-fg: var(--primary);
  --pangeon-feedback-fab-border: var(--border-width) solid var(--color-primary);
  --pangeon-feedback-fab-shadow: var(--elevation-1);
}
:root[data-theme="light"] {
  --radius-none: 0px;
  --radius-extra-small: 4px;
  --radius-large-increased: 20px;
  --radius-extra-large-increased: 32px;
  --radius-extra-extra-large: 48px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-xl: 8px;
  --radius-small: var(--radius-sm);
  --radius-medium: var(--radius-md);
  --radius-large: var(--radius-lg);
  --radius-extra-large: var(--radius-xl);
  --color-surface: #ffffff;
  --color-on-surface: #1e1e1d;
  --color-primary: #4c5c92;
  --color-on-primary: #ffffff;
  --color-accent: #003cb3;
  --color-success: #0046d6;
  --color-warning: #b57e00;
  --color-error: #000d37;
  --color-primary-container: #dce1ff;
  --color-on-primary-container: #344479;
  --color-secondary: #595e72;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #dee1f9;
  --color-on-secondary-container: #414659;
  --color-tertiary: #755470;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #ffd7f6;
  --color-on-tertiary-container: #5b3d57;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-surface-variant: #e2e1ec;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f1f0f0;
  --color-surface-container: #f1f0f0;
  --color-surface-container-high: #d7d3d2;
  --color-surface-container-highest: #e3e1e9;
  --color-outline-variant: #898280;
  --color-inverse-surface: #2f3036;
  --color-on-inverse-surface: #f1f0f7;
  --color-inverse-primary: #b6c4ff;
  --color-scrim: #000000;
  --color-background: #ffffff;
  --color-surface-2: #f1f0f0;
  --color-text-muted: #686260;
  --color-border: #898280;
  --color-info: #015aff;
  --color-backdrop: rgba(0, 0, 0, 0.4);
  --color-landing-blue: #205bff;
  --color-landing-blue-soft: #eaf0ff;
  --color-landing-navy: #0e1b3d;
  --color-landing-ink: #16213a;
  --color-landing-muted: #5d6880;
  --color-landing-bg: #f4f6fa;
  --color-landing-line: #e3e7ef;
  --color-landing-red: #a8321e;
  --color-landing-red-soft: #fbeae6;
  --color-landing-gold-ink: #8a6508;
  --color-landing-gold-soft: #fdf5dc;
  --color-login-heading: #0e1880;
  --color-button-quiet: #1728d6;
  --color-button-pressed: #747ee6;
  --color-button-pressed-label: #ffffff;
  --color-button-hover: #4553de;
  --color-button-outline-fill: #ffffff;
  --color-page-tint: #e8e9fb;
  --color-card-fill: #ffffff;
  --color-tile-fill: #edeef0;
  --color-tile-border: #dcdde1;
  --color-card-outline: #d1d4f7;
  --color-banner-back: #1220ab;
  --color-banner-title: #101115;
  --color-avatar-ring: #a2a9ef;
  --color-button-outline-label: #05082b;
  --color-button-outline-pressed-label: #0e1880;
  --color-button-disabled-label: #0e3b8b;
  --color-button-outline-disabled-border: #cac4d0;
  --color-button-outline-disabled-label: #1d1b20;
  --color-button-outline-pressed: #f3f4fd;
  --color-login-action: #1728d6;
  --color-nav-ink: #0e1880;
  --color-nav-selected: #1728d6;
  --color-nav-on-selected: #ffffff;
  --color-primary: #015aff;
  --color-on-surface-variant: #686260;
  --color-outline: #b3aba9;
  --color-m3-error: #003cb3;
  --color-m3-on-primary: #ffffff;
  --color-figma-selection-purple: #9747ff;
  --color-chart-identity: #015aff;
  --color-chart-location: #007a5a;
  --color-chart-contact: #bd3f0c;
  --color-chart-relationships: #7040c8;
  --color-sumi-ink: #000000;
  --color-vip-gold-deep: #7e5306;
  --color-vip-gold-shadow: #ad791a;
  --color-vip-gold-mid: #c89327;
  --color-vip-gold-warm: #daa533;
  --color-vip-gold-light: #e8bf59;
  --color-vip-gold-highlight: #fff3b3;
  --color-b2b-primary: #015aff;
  --color-b2b-primary-dim: #0046d6;
  --color-b2b-accent: #ffe8df;
  --color-b2b-success: #003cb3;
  --color-b2b-success-dim: #000d37;
  --color-b2b-background: #ffffff;
  --color-b2b-background-deep: #ffffff;
  --color-b2b-surface: #f1f0f0;
  --color-b2b-surface-2: #e6f0ff;
  --color-b2b-border: #b3aba9;
  --color-b2b-on-surface: #1e1e1d;
  --color-b2b-on-surface-variant: #686260;
  --color-b2b-subtle: #e6f0ff;
  --color-b2b-on-primary: #ffffff;
  --color-cluzy-story-blue: #015aff;
  --color-cluzy-story-blue-dim: #0046d6;
  --color-cluzy-story-orange: #ffe8df;
  --color-cluzy-story-green: #003cb3;
  --color-cluzy-story-green-dim: #000d37;
  --color-cluzy-story-bg: #ffffff;
  --color-cluzy-story-bg-deep: #ffffff;
  --color-cluzy-story-panel: #f1f0f0;
  --color-cluzy-story-panel-2: #e6f0ff;
  --color-cluzy-story-border: #b3aba9;
  --color-cluzy-story-text: #1e1e1d;
  --color-cluzy-story-muted: #686260;
  --color-cluzy-story-subtle: #e6f0ff;
  --color-green-100: #95f829;
  --color-green-200: #7acc20;
  --color-green-300: #60a217;
  --color-green-400: #477a0f;
  --color-green-500: #2f5407;
  --color-green-600: #193102;
  --color-green-700: #071401;
  --color-yellow-100: #feefd6;
  --color-yellow-200: #f5c842;
  --color-yellow-300: #c7a234;
  --color-yellow-400: #9b7d26;
  --color-yellow-500: #715819;
  --color-yellow-600: #493a0d;
  --color-yellow-700: #251c04;
  --color-orange-10: rgba(255, 232, 223, 0.2);
  --color-orange-50: rgba(255, 232, 223, 0.4);
  --color-orange-100: #ffe8df;
  --color-orange-200: #fa9786;
  --color-orange-300: #f05b24;
  --color-orange-400: #b44216;
  --color-orange-500: #7c2b0d;
  --color-orange-600: #481604;
  --color-orange-700: #250701;
  --color-blue-50: rgba(230, 240, 255, 0.4);
  --color-blue-100: #e6f0ff;
  --color-blue-200: #8cb8ff;
  --color-blue-300: #015aff;
  --color-blue-400: #0046d6;
  --color-blue-500: #003cb3;
  --color-blue-600: #00216c;
  --color-blue-700: #000d37;
  --color-clean-data-grey-100: #dbe0d9;
  --color-clean-data-grey-200: #b4b8b2;
  --color-clean-data-grey-300: #8e928d;
  --color-clean-data-grey-400: #6b6d69;
  --color-clean-data-grey-500: #494b4b;
  --color-clean-data-grey-600: #292b29;
  --color-clean-data-grey-700: #101110;
  --color-cluzy-grey-50: rgba(241, 240, 240, 0.4);
  --color-cluzy-grey-100: #f1f0f0;
  --color-cluzy-grey-200: #d7d3d2;
  --color-cluzy-grey-300: #b3aba9;
  --color-cluzy-grey-400: #8e8583;
  --color-cluzy-grey-500: #686260;
  --color-cluzy-grey-600: #45403f;
  --color-cluzy-grey-700: #1e1e1d;
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.6);
  --color-black-70: rgba(0, 0, 0, 0.7);
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-90: rgba(0, 0, 0, 0.9);
  --color-black-100: #000000;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-primary-hover: #5a699b;
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --border: var(--color-border);
  --text: var(--color-on-surface);
  --text-muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --error: var(--color-error);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --info: var(--color-info);
  --accent: var(--color-accent);
  --on-surface: var(--color-on-surface);
  --on-primary: var(--color-on-primary);
  --on-error: #ffffff;
  --on-success: #ffffff;
  --on-accent: #ffffff;
  --color-accent-text: #4c5c92;
  --accent-text: var(--color-accent-text);
  --border-width: 1px;
  --font-display-large: 400 clamp(36px, 2.25rem + 2.625vw, 57px)/1.12 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-display-large: -0.25px;
  --font-display-large-emphasized: 700 clamp(36px, 2.25rem + 2.625vw, 57px)/1.12 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-display-large-emphasized: -0.25px;
  --font-display-medium: 400 clamp(28px, 1.75rem + 2.125vw, 45px)/1.16 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display-medium-emphasized: 700 clamp(28px, 1.75rem + 2.125vw, 45px)/1.16 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display-small: 400 clamp(24px, 1.5rem + 1.5vw, 36px)/1.22 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display-small-emphasized: 700 clamp(24px, 1.5rem + 1.5vw, 36px)/1.22 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-large: 400 clamp(24px, 1.5rem + 1vw, 32px)/1.25 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-large-emphasized: 700 clamp(24px, 1.5rem + 1vw, 32px)/1.25 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-medium: 400 clamp(22px, 1.375rem + 0.75vw, 28px)/1.29 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-medium-emphasized: 700 clamp(22px, 1.375rem + 0.75vw, 28px)/1.29 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-small: 400 clamp(20px, 1.25rem + 0.5vw, 24px)/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-headline-small-emphasized: 700 clamp(20px, 1.25rem + 0.5vw, 24px)/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title-large: 500 clamp(18px, 1.125rem + 0.5vw, 22px)/1.27 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title-large-emphasized: 700 clamp(18px, 1.125rem + 0.5vw, 22px)/1.27 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title-medium: 500 clamp(14px, 0.875rem + 0.25vw, 16px)/1.5 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-title-medium: 0.15px;
  --font-title-medium-emphasized: 700 clamp(14px, 0.875rem + 0.25vw, 16px)/1.5 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-title-medium-emphasized: 0.15px;
  --font-title-small: 500 clamp(12px, 0.75rem + 0.25vw, 14px)/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-title-small: 0.1px;
  --font-title-small-emphasized: 700 clamp(12px, 0.75rem + 0.25vw, 14px)/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-title-small-emphasized: 0.1px;
  --font-body-large: 400 clamp(14px, 0.875rem + 0.25vw, 16px)/1.5 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-large: 0.5px;
  --font-body-large-emphasized: 700 clamp(14px, 0.875rem + 0.25vw, 16px)/1.5 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-large-emphasized: 0.5px;
  --font-body-medium: 400 clamp(12px, 0.75rem + 0.25vw, 14px)/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-medium: 0.25px;
  --font-body-medium-emphasized: 700 clamp(12px, 0.75rem + 0.25vw, 14px)/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-medium-emphasized: 0.25px;
  --font-body-small: 400 clamp(11px, 0.6875rem + 0.125vw, 12px)/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-small: 0.4px;
  --font-body-small-emphasized: 700 clamp(11px, 0.6875rem + 0.125vw, 12px)/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-body-small-emphasized: 0.4px;
  --font-label-large: 500 14px/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-large: 0.1px;
  --font-label-large-emphasized: 700 14px/1.43 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-large-emphasized: 0.1px;
  --font-label-medium: 500 12px/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-medium: 0.5px;
  --font-label-medium-emphasized: 700 12px/1.33 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-medium-emphasized: 0.5px;
  --font-label-small: 500 11px/1.45 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-small: 0.5px;
  --font-label-small-emphasized: 700 11px/1.45 "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-label-small-emphasized: 0.5px;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
  --elevation-2: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
  --elevation-3: 0 1px 3px rgba(0,0,0,0.30), 0 4px 8px 3px rgba(0,0,0,0.15);
  --elevation-4: 0 2px 3px rgba(0,0,0,0.30), 0 6px 10px 4px rgba(0,0,0,0.15);
  --elevation-5: 0 4px 4px rgba(0,0,0,0.30), 0 8px 12px 6px rgba(0,0,0,0.15);
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-standard: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --motion-duration-short: var(--duration-fast);
  --motion-duration-medium: var(--duration-standard);
  --motion-duration-long: var(--duration-slow);
  --motion-easing-standard: var(--ease-standard);
  --motion-easing-emphasized: var(--ease-emphasized);
  --loading-spin-duration: 0.9s;
  --loading-spin-easing: linear;
  --loading-pulse-duration: 1.4s;
  --loading-pulse-min-opacity: 0.7;
  --loading-progress-curve-tau: 0.6;
  --loading-progress-bar-height: 2px;
  --loading-progress-bar-color: var(--accent);
  --motion-spring-fast-spatial: linear(0, 0.037, 0.125, 0.237, 0.355, 0.467, 0.57, 0.659, 0.735, 0.797, 0.848, 0.887, 0.918, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-fast-spatial-duration: 224ms;
  --transition-fast-spatial: 224ms linear(0, 0.037, 0.125, 0.237, 0.355, 0.467, 0.57, 0.659, 0.735, 0.797, 0.848, 0.887, 0.918, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-fast-effects: linear(0, 0.044, 0.142, 0.261, 0.381, 0.491, 0.589, 0.672, 0.741, 0.797, 0.842, 0.877, 0.906, 0.928, 0.945, 0.958, 0.968, 0.976, 0.982, 0.986, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-fast-effects-duration: 150ms;
  --transition-fast-effects: 150ms linear(0, 0.044, 0.142, 0.261, 0.381, 0.491, 0.589, 0.672, 0.741, 0.797, 0.842, 0.877, 0.906, 0.928, 0.945, 0.958, 0.968, 0.976, 0.982, 0.986, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-default-spatial: linear(0, 0.038, 0.126, 0.237, 0.355, 0.468, 0.57, 0.66, 0.735, 0.798, 0.848, 0.888, 0.919, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-default-spatial-duration: 317ms;
  --transition-default-spatial: 317ms linear(0, 0.038, 0.126, 0.237, 0.355, 0.468, 0.57, 0.66, 0.735, 0.798, 0.848, 0.888, 0.919, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-default-effects: linear(0, 0.044, 0.143, 0.262, 0.382, 0.493, 0.591, 0.674, 0.742, 0.798, 0.843, 0.879, 0.907, 0.929, 0.946, 0.959, 0.969, 0.976, 0.982, 0.987, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-default-effects-duration: 232ms;
  --transition-default-effects: 232ms linear(0, 0.044, 0.143, 0.262, 0.382, 0.493, 0.591, 0.674, 0.742, 0.798, 0.843, 0.879, 0.907, 0.929, 0.946, 0.959, 0.969, 0.976, 0.982, 0.987, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-slow-spatial: linear(0, 0.037, 0.126, 0.237, 0.355, 0.468, 0.57, 0.659, 0.735, 0.797, 0.848, 0.887, 0.918, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-slow-spatial-duration: 484ms;
  --transition-slow-spatial: 484ms linear(0, 0.037, 0.126, 0.237, 0.355, 0.468, 0.57, 0.659, 0.735, 0.797, 0.848, 0.887, 0.918, 0.942, 0.96, 0.973, 0.983, 0.989, 0.994, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1);
  --motion-spring-slow-effects: linear(0, 0.044, 0.142, 0.261, 0.381, 0.492, 0.589, 0.672, 0.741, 0.797, 0.842, 0.878, 0.906, 0.928, 0.945, 0.958, 0.968, 0.976, 0.982, 0.986, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --motion-spring-slow-effects-duration: 327ms;
  --transition-slow-effects: 327ms linear(0, 0.044, 0.142, 0.261, 0.381, 0.492, 0.589, 0.672, 0.741, 0.797, 0.842, 0.878, 0.906, 0.928, 0.945, 0.958, 0.968, 0.976, 0.982, 0.986, 0.99, 0.992, 0.994, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --icon-stroke: 1.5px;
  --icon-radius: 2px;
  --icon-font-family: "Material Symbols Rounded";
  --icon-fill: 0;
  --icon-wght: 400;
  --icon-grad: 0;
  --icon-opsz: 24;
  --icon-size: 24px;
  --density: standard;
  --pangeon-page-gutter: clamp(var(--space-3), 2vw, var(--space-6));
  --pangeon-page-top: clamp(var(--space-2), 1.5vw, var(--space-4));
  --pangeon-page-bottom: clamp(var(--space-6), 5vw, var(--space-12));
  --pangeon-page-header-gap: var(--space-2);
  --pangeon-panel-gap: var(--space-3);
  --pangeon-surface-padding: var(--space-4);
  --pangeon-control-group-gap: var(--space-2);
  --pangeon-toolbar-gap: var(--space-2);
  --pangeon-toolbar-padding: var(--space-1);
  --pangeon-metadata-gap: var(--space-2);
  --pangeon-caption-gap: var(--space-2);
  --pangeon-table-cell-padding: var(--space-2) var(--space-3);
  --pangeon-overlay-inset: var(--space-2);
  --pangeon-overlay-padding: var(--space-1);
  --pangeon-scroll-container-padding: var(--space-3);
  --pangeon-empty-state-padding: var(--space-8);
  --color-overlay-soft: rgba(255,255,255,0.06);
  --color-overlay-light: rgba(255,255,255,0.12);
  --color-overlay-medium: rgba(255,255,255,0.20);
  --color-shadow-soft: rgba(0,0,0,0.15);
  --color-shadow-medium: rgba(0,0,0,0.25);
  --color-shadow-strong: rgba(0,0,0,0.40);
  --color-shadow-heavy: rgba(0,0,0,0.60);
  /* StyleGuide → buttons */
  --button-radius: 4px;
  --button-padding-x: 16px;
  --button-padding-y: 10px;
  --button-font-size: 16px;
  --button-font-weight: 500;
  --button-primary-bg: #1728d6;
  --button-primary-fg: #ffffff;
  --button-primary-border: #1728d6;
  --button-primary-bg-hover: #4553de;
  --button-secondary-bg: #ffffff;
  --button-secondary-fg: #05082b;
  --button-secondary-border: #1728d6;
  --button-secondary-bg-hover: #e8e9fb;
  --button-accent-bg: #1728d6;
  --button-accent-fg: #ffffff;
  --button-accent-border: #1728d6;
  --button-accent-bg-hover: #4553de;
  --button-info-bg: #ffffff;
  --button-info-fg: #05082b;
  --button-info-border: #1728d6;
  --button-info-bg-hover: #e8e9fb;
  --cta-radius: 4px;
  --cta-padding-x: 16px;
  --cta-padding-y: 10px;
  --cta-min-height: 48px;
  --cta-font: 500 16px/1.43 var(--font-body);
  --cta-primary-bg: #1728d6;
  --cta-primary-fg: #ffffff;
  --cta-secondary-bg: #ffffff;
  --cta-secondary-fg: #05082b;
  --cta-secondary-border: 1px solid #1728d6;
  --button-primary-hover-bg: var(--color-button-hover);
  --button-primary-hover-fg: #ffffff;
  --button-primary-hover-border: var(--color-button-hover);
  --button-primary-hover-filter: none;
  --button-primary-focus-bg: var(--button-primary-hover-bg);
  --button-primary-focus-fg: var(--button-primary-hover-fg);
  --button-primary-focus-border: var(--button-primary-hover-border);
  --button-primary-pressed-bg: var(--color-button-pressed);
  --button-primary-pressed-fg: var(--color-button-pressed-label);
  --button-primary-pressed-border: var(--color-button-pressed);
  --button-primary-pressed-filter: none;
  --button-primary-disabled-bg: var(--color-black-10);
  --button-primary-disabled-fg: color-mix(in srgb, var(--color-button-disabled-label) 38%, transparent);
  --button-primary-disabled-border: transparent;
  --button-primary-disabled-opacity: 1;
  --button-secondary-border-width: 2px;
  --button-secondary-hover-bg: #e8e9fb;
  --button-secondary-hover-fg: var(--color-button-outline-label);
  --button-secondary-hover-filter: none;
  --button-secondary-focus-bg: var(--button-secondary-hover-bg);
  --button-secondary-focus-fg: var(--button-secondary-hover-fg);
  --button-secondary-focus-border: var(--button-secondary-hover-border);
  --button-secondary-pressed-bg: var(--color-button-outline-pressed);
  --button-secondary-pressed-fg: var(--color-button-outline-pressed-label);
  --button-secondary-pressed-border: var(--color-button-hover);
  --button-secondary-pressed-filter: none;
  --button-secondary-disabled-bg: var(--color-black-10);
  --button-secondary-disabled-fg: color-mix(in srgb, var(--color-button-outline-disabled-label) 38%, transparent);
  --button-secondary-disabled-border: var(--color-button-outline-disabled-border);
  --button-secondary-disabled-opacity: 1;
  --button-accent-hover-bg: var(--color-button-hover);
  --button-accent-hover-fg: #ffffff;
  --button-accent-hover-border: var(--color-button-hover);
  --button-accent-hover-filter: none;
  --button-accent-focus-bg: var(--button-accent-hover-bg);
  --button-accent-focus-fg: var(--button-accent-hover-fg);
  --button-accent-focus-border: var(--button-accent-hover-border);
  --button-accent-pressed-bg: var(--color-button-pressed);
  --button-accent-pressed-fg: var(--color-button-pressed-label);
  --button-accent-pressed-border: var(--color-button-pressed);
  --button-accent-pressed-filter: none;
  --button-accent-disabled-bg: var(--color-black-10);
  --button-accent-disabled-fg: color-mix(in srgb, var(--color-button-disabled-label) 38%, transparent);
  --button-accent-disabled-border: transparent;
  --button-accent-disabled-opacity: 1;
  --button-info-border-width: 2px;
  --button-info-hover-bg: #e8e9fb;
  --button-info-hover-fg: var(--color-button-outline-label);
  --button-info-hover-filter: none;
  --button-info-focus-bg: var(--button-info-hover-bg);
  --button-info-focus-fg: var(--button-info-hover-fg);
  --button-info-focus-border: var(--button-info-hover-border);
  --button-info-pressed-bg: var(--color-button-outline-pressed);
  --button-info-pressed-fg: var(--color-button-outline-pressed-label);
  --button-info-pressed-border: var(--color-button-hover);
  --button-info-pressed-filter: none;
  --button-info-disabled-bg: var(--color-black-10);
  --button-info-disabled-fg: color-mix(in srgb, var(--color-button-outline-disabled-label) 38%, transparent);
  --button-info-disabled-border: var(--color-button-outline-disabled-border);
  --button-info-disabled-opacity: 1;
  --cta-primary-hover-bg: var(--color-button-hover);
  --cta-primary-hover-fg: #ffffff;
  --cta-primary-hover-border: 1px solid var(--color-button-hover);
  --cta-primary-focus-bg: var(--cta-primary-hover-bg);
  --cta-primary-focus-fg: var(--cta-primary-hover-fg);
  --cta-primary-focus-border: var(--cta-primary-hover-border);
  --cta-primary-pressed-bg: var(--color-button-pressed);
  --cta-primary-pressed-fg: var(--color-button-pressed-label);
  --cta-primary-pressed-border: 1px solid var(--color-button-pressed);
  --cta-primary-disabled-bg: var(--color-black-10);
  --cta-primary-disabled-fg: color-mix(in srgb, var(--color-button-disabled-label) 38%, transparent);
  --cta-primary-disabled-border: 1px solid transparent;
  --cta-secondary-hover-bg: #e8e9fb;
  --cta-secondary-hover-fg: var(--color-button-outline-label);
  --cta-secondary-focus-bg: var(--cta-secondary-hover-bg);
  --cta-secondary-focus-fg: var(--cta-secondary-hover-fg);
  --cta-secondary-focus-border: var(--cta-secondary-hover-border);
  --cta-secondary-pressed-bg: var(--color-button-outline-pressed);
  --cta-secondary-pressed-fg: var(--color-button-outline-pressed-label);
  --cta-secondary-pressed-border: 1px solid var(--color-button-hover);
  --cta-secondary-disabled-bg: var(--color-black-10);
  --cta-secondary-disabled-fg: color-mix(in srgb, var(--color-button-outline-disabled-label) 38%, transparent);
  --cta-secondary-disabled-border: 1px solid var(--color-button-outline-disabled-border);
  /* StyleGuide → fonts */
  --font-body: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 800;
  --line-height-body: 1.5;
  --type-caption: 14.17px;
  --type-body: 17px;
  --type-title: 20.4px;
  --type-headline: 24.48px;
  --fontsize-fluid-sm: 14.17px;
  --fontsize-fluid-md: 17px;
  --fontsize-fluid-lg: 20.4px;
  --type-heading-1: clamp(29.38px, calc(29.38px + 1.5vw), 35.25px);
  --type-heading-2: clamp(24.48px, calc(24.48px + 1vw), 29.38px);
  --type-heading-3: clamp(20.4px, calc(20.4px + 0.6vw), 24.48px);
  /* StyleGuide → typography roles */
  --typography-legal-font-family: var(--font-body);
  --typography-legal-size: 17px;
  --typography-legal-line-height: 1.65;
  /* StyleGuide → shapes */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-xl: 10px;
  --radius-extra-small: var(--radius-sm);
  --radius-large-increased: var(--radius-lg);
  --radius-extra-large-increased: var(--radius-xl);
  --radius-extra-extra-large: var(--radius-xl);
  /* StyleGuide → modals */
  --modal-bg: #ffffff;
  --modal-fg: #1e1e1d;
  --modal-backdrop: rgba(0, 0, 0, 0.1);
  --modal-radius: var(--radius-lg);
  /* StyleGuide → forms */
  --form-error-color: #7c2b0d;
  --form-control-bg: #ffffff;
  --form-control-fg: #000d37;
  --form-control-border: #000d37;
  --form-control-focus-border: #003cb3;
  --form-control-radius: var(--radius-sm);
  --form-control-chevron-color: #000d37;
  --form-control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000d37' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  /* StyleGuide → header/navigation */
  --pangeon-nav-background: #ffffff;
  --pangeon-nav-foreground: #101115;
  --pangeon-nav-active-accent: #1728d6;
  --pangeon-nav-border-color: #898280;
  --pangeon-nav-border: 1px solid #898280;
  --pangeon-nav-height: calc(var(--space-touch) + 1.5rem);
  --pangeon-nav-title-weight: 700;
  --pangeon-nav-back-color: var(--color-banner-back);
  --pangeon-nav-actions-gap: var(--space-3);
  --pangeon-nav-spoke-breakpoint: 720px;
  --pangeon-nav-avatar-ring: var(--color-avatar-ring);
  --pangeon-nav-action-size: var(--control-size-sm);
  --pangeon-nav-action-background: var(--color-tile-fill);
  --pangeon-nav-action-ring: var(--color-card-outline);
  /* StyleGuide -> surfaces (page, card, panel, tile, ...) */
  --surface-page-bg: var(--color-page-tint);
  --surface-card-bg: var(--color-card-fill);
  --surface-card-border: none;
  --surface-card-radius: var(--radius-md);
  --surface-card-shadow: var(--elevation-1);
  --surface-card-padding: var(--pangeon-surface-padding);
  --surface-panel-bg: var(--color-card-fill);
  --surface-panel-border: none;
  --surface-panel-radius: var(--radius-md);
  --surface-panel-shadow: var(--elevation-1);
  --surface-panel-padding: var(--pangeon-surface-padding);
  --surface-default-bg: var(--color-card-fill);
  --surface-default-border: none;
  --surface-default-radius: var(--radius-md);
  --surface-default-shadow: var(--elevation-1);
  --surface-elevated-bg: var(--color-card-fill);
  --surface-elevated-border: none;
  --surface-elevated-radius: var(--radius-md);
  --surface-elevated-shadow: var(--elevation-2);
  --surface-tile-bg: var(--color-card-fill);
  --surface-tile-border: var(--border-thin) var(--border-style) var(--color-card-outline);
  --surface-tile-radius: var(--radius-md);
  --surface-tile-shadow: var(--elevation-0);
  --surface-tile-padding: var(--space-2);
  --surface-inset-bg: var(--color-card-fill);
  --surface-inset-border: var(--border-thin) var(--border-style) var(--color-card-outline);
  --surface-inset-radius: var(--radius-md);
  --surface-inset-shadow: var(--elevation-0);
  /* StyleGuide -> nav.places (bottom tabs / rail) */
  --pangeon-places-rail-from: 720px;
  --pangeon-places-ink: var(--color-nav-ink);
  --pangeon-places-selected-bg: var(--color-nav-selected);
  --pangeon-places-selected-fg: var(--color-nav-on-selected);
  --pangeon-places-selected-weight: 700;
  --pangeon-places-selected-radius: var(--radius-sm);
  --pangeon-places-disabled-opacity: 0.4;
  /* StyleGuide -> feedback.fab */
  --pangeon-feedback-fab-bg: var(--color-card-fill);
  --pangeon-feedback-fab-fg: var(--primary);
  --pangeon-feedback-fab-border: var(--border-width) solid var(--color-primary);
  --pangeon-feedback-fab-shadow: var(--elevation-1);
}
:root[data-theme="dark"] {
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --border: var(--color-border);
  --text: var(--color-on-surface);
  --text-muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --error: var(--color-error);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --info: var(--color-info);
  --accent: var(--color-accent);
  --on-surface: var(--color-on-surface);
  --on-primary: var(--color-on-primary);
  --on-error: #000000;
  --on-success: #000000;
  --on-accent: #000000;
  --accent-text: var(--color-accent-text);
}
/* StyleGuide → nav.spokeBreakpoint (prototyper#1656) */
@container pangeon-header (max-width: 719.98px) {
  .pangeon-header[data-spoke] .pangeon-header-brand { display: none !important; }
}
/* StyleGuide -> nav.places.railFrom (prototyper#1655) */
@media (min-width: 720px) {
  .pangeon-app-shell.pangeon-app-shell[data-places="true"] .pangeon-app-shell-rail { display: block; }
  .pangeon-app-shell.pangeon-app-shell[data-places="true"] .pangeon-app-shell-nav { display: none; }
}
@media (max-width: 719.98px) {
  .pangeon-app-shell.pangeon-app-shell[data-places="true"] .pangeon-app-shell-rail { display: none; }
  .pangeon-app-shell.pangeon-app-shell[data-places="true"] .pangeon-app-shell-nav { display: block; }
}

:root{--blue:#015aff;--blue-deep:#00216c;--blue-ink:#000d37;--blue-tint:#e6f0ff;--blue-soft:#8cb8ff;--orange:#f05b24;--ink:#1e1e1d;--muted:#686260;--rule:#d7d3d2;--paper:#ffffff;--paper-soft:#f1f0f0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 "Host Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--blue)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
header.site{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:2}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 16px}
header.site img{display:block;width:124px;height:auto}
header.site nav{display:flex;align-items:center;gap:8px 20px}
header.site nav a{font-weight:600;text-decoration:none;color:var(--blue-ink)}
header.site nav a.try{color:var(--paper);background:var(--blue);padding:10px 16px;border-radius:var(--radius-sm)}
.hero{background:var(--blue-ink);color:var(--paper)}
.hero .wrap{padding:56px 16px 48px;display:grid;gap:12px}
.hero h1{margin:0;font-size:clamp(34px,6vw,56px);line-height:1.05;font-weight:800;color:var(--paper);max-width:14ch}
.hero p{margin:0;font-size:clamp(18px,2.2vw,22px);color:var(--blue-soft);max-width:38rem}
.hero .mark{color:var(--orange)}
main{padding:40px 0 72px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.tile{display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper);text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,13,55,.12);border-color:var(--blue-soft)}
.tile .art{width:64px;height:64px;padding:12px;border-radius:var(--radius-md);background:var(--blue-tint)}
.tile .art img{display:block;width:100%;height:100%}
.tile .body{display:flex;flex-direction:column;gap:12px;min-width:0}
.tile .meta{color:var(--muted);font-size:14px;margin:0}
.tile h2{margin:0;font-size:24px;line-height:1.2;font-weight:700;color:var(--blue-ink)}
.tile p.summary{margin:0;color:var(--ink);flex:1}
.tile .more{font-weight:600;color:var(--blue)}
.tile.feature{grid-column:1/-1;flex-direction:row;align-items:flex-start;gap:32px;padding:36px;background:linear-gradient(135deg,var(--blue-tint),var(--paper))}
.tile.feature .art{width:120px;height:120px;padding:22px;flex:none}
.tile.feature h2{font-size:clamp(26px,3.4vw,38px)}
.tile.feature p.summary{font-size:19px}
@media (max-width:640px){.tile.feature{flex-direction:column;gap:16px;padding:28px}.tile.feature .art{width:72px;height:72px;padding:14px}}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 20px}
.section-title h2{margin:0;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.section-title a{font-size:15px}
.empty{padding:48px 0;color:var(--muted)}
article.post{max-width:46rem;margin:0 auto}
article.post h1{font-size:clamp(30px,5vw,44px);line-height:1.12;font-weight:800;color:var(--blue-ink);margin:0 0 10px}
article.post h2{font-size:26px;line-height:1.25;font-weight:700;color:var(--blue-ink);margin:44px 0 10px}
article.post h3{font-size:21px;line-height:1.3;font-weight:700;color:var(--blue-ink);margin:32px 0 8px}
article.post p{margin:0 0 20px}
article.post img{max-width:100%;height:auto;border-radius:var(--radius-md)}
article.post .meta{color:var(--muted);font-size:15px;margin:0 0 32px}
article.post blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:4px solid var(--orange);color:var(--blue-deep);font-size:21px;line-height:1.5}
article.post blockquote p{margin:0}
article.post ul,article.post ol{padding-left:24px}
article.post li{margin:0 0 8px}
article.post code{font:0.9em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--blue-tint);padding:1px 5px;border-radius:var(--radius-sm)}
article.post pre{overflow:auto;padding:16px;border-radius:var(--radius-md);background:var(--blue-tint)}
article.post pre code{background:none;padding:0}
.post-foot{max-width:46rem;margin:48px auto 0;padding:24px;border-radius:var(--radius-md);background:var(--blue-tint);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.post-foot p{margin:0;color:var(--blue-deep)}
.post-foot a.try{color:var(--paper);background:var(--blue);padding:10px 16px;border-radius:var(--radius-sm);text-decoration:none;font-weight:600}
footer.site{border-top:1px solid var(--rule);color:var(--muted);font-size:15px;background:var(--paper-soft)}
footer.site .wrap{padding:24px 16px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer.site a{color:var(--muted)}