@charset "UTF-8";
/**
 * Base Tokens
 */
:root {
  --r-amethyst-400: #4925cb; /** For enabled state of links (visited) in lightmode */
  --r-amethyst-500: #39277a; /** For hovered and activated state of links (visited) in lightmode */
  --r-azure-400: #014bb3; /** For enabled state of links (not visited) in lightmode */
  --r-azure-500: #24346f; /** For hovered and activated state of links (not visited) in lightmode */
  --r-blue-100: #f8fafb; /** Used for (lightmode) status-info-soft */
  --r-blue-400: #3e5c73; /** Used for (lightmode) status-info-regular */
  --r-charcoal-200: #c9c9c9;
  --r-charcoal-300: #686868;
  --r-charcoal-400: #282828;
  --r-charcoal-400-alpha-04: rgba(40, 40, 40, 0.04); /** Used for (lightmode) background-state-hovered */
  --r-charcoal-400-alpha-08: rgba(40, 40, 40, 0.08); /** Used for (lightmode) background-state-selected */
  --r-charcoal-400-alpha-12: rgba(40, 40, 40, 0.12); /** Used for (lightmode) background-state-activated */
  --r-charcoal-500: #141414;
  --r-charcoal-600: #000000;
  --r-charcoal-600-alpha-14: rgba(0, 0, 0, 0.14); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-16: rgba(0, 0, 0, 0.16); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-24: rgba(0, 0, 0, 0.24); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-48: rgba(0, 0, 0, 0.48); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-64: rgba(0, 0, 0, 0.64); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-80: rgba(0, 0, 0, 0.8); /** Used for (darkmode) background-overlay */
  --r-dark-amethyst-100: #e6d4ff; /** For hovered and activated state of links (visited) in darkmode */
  --r-dark-amethyst-200: #d0a8ff; /** For enabled state of links (visited) in darkmode */
  --r-dark-azure-100: #d6e6ff; /** For hovered and activated state of links (not visited) in darkmode */
  --r-dark-azure-200: #a8c9ff; /** For enabled state of links (not visited) in darkmode */
  --r-dark-blue-100: #afc3d4; /** Used for (darkmode) status-info-regular */
  --r-dark-blue-500: #222528; /** Used for (darkmode) status-info-soft */
  --r-dark-green-100: #80ce88; /** Used for (darkmode) status-success-regular */
  --r-dark-green-500: #212b22; /** Used for (darkmode) status-success-soft */
  --r-dark-orange-100: #ffb557; /** Used for (darkmode) status-warning-regular */
  --r-dark-orange-500: #31281c; /** Used for (darkmode) status-warning-soft */
  --r-dark-red-100: #ff969c; /** Used for (darkmode) status-error-regular */
  --r-dark-red-500: #190606; /** Used for (darkmode) status-error-soft */
  --r-dark-vanguard-100: #6da258;
  --r-dark-vanguard-200: #587d4a;
  --r-dark-vanguard-300: #3d4d36;
  --r-dark-vanguard-400: #323a2f;
  --r-deepvanguard-100: #eff1ee;
  --r-deepvanguard-200: #d2d6cf;
  --r-deepvanguard-300: #a5ada0;
  --r-deepvanguard-400: #788370;
  --r-deepvanguard-500: #4b5a41;
  --r-deepvanguard-600: #1e3111;
  --r-ember-400: #ef706b;
  --r-focused-400: #0071e3; /** Used for focused outline in both lightmode and darkmode */
  --r-green-100: #f7fdf8; /** Used for (lightmode) status-success-soft */
  --r-green-400: #298535; /** Used for (lightmode) status-success-regular */
  --r-haze-200: #f3f1f0;
  --r-haze-200-alpha-04: rgba(243, 241, 240, 0.04); /** Used for (darkmode) background-state-hovered */
  --r-haze-200-alpha-08: rgba(243, 241, 240, 0.08); /** Used for (darkmode) background-state-selected */
  --r-haze-200-alpha-12: rgba(243, 241, 240, 0.12); /** Used for (darkmode) background-state-activated */
  --r-haze-300: #ece9e8;
  --r-haze-400: #e7e4e2;
  --r-haze-500: #d4d1cf;
  --r-haze-600: #bfbdbb;
  --r-mist-200: #f7f7f7;
  --r-mist-200-alpha-04: rgba(247, 247, 247, 0.04);
  --r-mist-200-alpha-08: rgba(247, 247, 247, 0.08);
  --r-mist-200-alpha-12: rgba(247, 247, 247, 0.12);
  --r-mist-300: #f0f0f0;
  --r-mist-400: #e5e5e5;
  --r-mist-500: #d1d1d1;
  --r-mist-600: #bdbdbd;
  --r-neutral-white: #ffffff;
  --r-orange-100: #fef9f5; /** Used for (lightmode) status-warning-soft */
  --r-orange-400: #ff7429; /** Used for (lightmode) status-warning-regular */
  --r-red-100: #fef6f6; /** Used for (lightmode) status-error-soft */
  --r-red-400: #b00c15; /** Used for (lightmode) status-error-regular */
  --r-vanguard-100: #e5ebe3;
  --r-vanguard-200: #cbd7c6;
  --r-vanguard-300: #86a27b;
  --r-vanguard-400: #527a42;
  --r-vanguard-500: #456637;
  --r-vanguard-600: #37522c;
  --r-icon-size-l: 2rem;
  --r-icon-size-m: 1.5rem;
  --r-icon-size-s: 1rem;
  --r-font-family-heading: "GT Ultra Median", Skeena, ui-serif, serif;
  --r-font-family-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r-font-size-desktop-200: 0.8125rem;
  --r-font-size-desktop-300: 0.875rem;
  --r-font-size-desktop-400: 1rem;
  --r-font-size-desktop-500: 1.375rem;
  --r-font-size-desktop-600: 1.75rem;
  --r-font-size-desktop-700: 2.25rem;
  --r-font-size-desktop-800: 2.875rem;
  --r-font-size-desktop-900: 3.5rem;
  --r-font-size-mobile-200: 0.8125rem;
  --r-font-size-mobile-300: 0.875rem;
  --r-font-size-mobile-400: 1rem;
  --r-font-size-mobile-500: 1.25rem;
  --r-font-size-mobile-600: 1.5rem;
  --r-font-size-mobile-700: 1.75rem;
  --r-font-size-mobile-800: 1.875rem;
  --r-font-size-mobile-900: 2.625rem;
  --r-font-weight-light: 300;
  --r-font-weight-regular: 400;
  --r-font-weight-semibold: 600;
  --r-line-height-l: 1.7;
  --r-line-height-m: 1.5;
  --r-line-height-s: 1.2;
  --r-line-height-xs: 1.1;
  --r-border-radius-0: 0rem;
  --r-border-radius-12: 0.75rem;
  --r-border-radius-16: 1rem;
  --r-border-radius-2: 0.125rem;
  --r-border-radius-4: 0.25rem;
  --r-border-radius-8: 0.5rem;
  --r-border-radius-999: 62.4375rem;
  --r-elevation-default-blur: 0rem;
  --r-elevation-default-spread: 0rem;
  --r-elevation-default-x: 0rem;
  --r-elevation-default-y: 0rem;
  --r-elevation-floating-blur: 1.5rem;
  --r-elevation-floating-spread: 0rem;
  --r-elevation-floating-x: 0rem;
  --r-elevation-floating-y: 0.25rem;
  --r-elevation-overlay-blur: 3rem;
  --r-elevation-overlay-spread: 0rem;
  --r-elevation-overlay-x: 0rem;
  --r-elevation-overlay-y: 0.375rem;
  --r-elevation-raised-blur: 0.75rem;
  --r-elevation-raised-spread: 0rem;
  --r-elevation-raised-x: 0rem;
  --r-elevation-raised-y: 0.125rem;
  --r-spacing-025: 0.25rem;
  --r-spacing-050: 0.5rem;
  --r-spacing-075: 0.75rem;
  --r-spacing-100: 1rem;
  --r-spacing-125: 1.25rem;
  --r-spacing-150: 1.5rem;
  --r-spacing-175: 1.75rem;
  --r-spacing-200: 2rem;
  --r-spacing-225: 2.25rem;
  --r-spacing-250: 2.5rem;
  --r-spacing-275: 2.75rem;
  --r-spacing-300: 3rem;
  --r-spacing-350: 3.5rem;
  --r-spacing-400: 4rem;
  --r-spacing-450: 4.5rem;
  --r-spacing-500: 5rem;
}

/**
 * Semantic Color Tokens
 */
:root {
  --r-background-brand: light-dark(var(--r-vanguard-400), var(--r-dark-vanguard-100)); /** Used in regular decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-brand-softest: light-dark(var(--r-vanguard-100), var(--r-dark-vanguard-400)); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-interactive-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-interactive-soft: light-dark(var(--r-charcoal-400-alpha-04), var(--r-haze-200-alpha-12)); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-inverse: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for specific sections that require attention */
  --r-background-overlay: light-dark(var(--r-charcoal-600-alpha-48), var(--r-charcoal-600-alpha-80)); /** Used as an overlay background for components that behave modal */
  --r-background-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for regular backgrounds in components Examples: Primary button */
  --r-background-soft: light-dark(var(--r-haze-400), var(--r-charcoal-600)); /** Used as static backgrounds in our components Examples: dialog, bottom sheet */
  --r-background-softer: light-dark(var(--r-haze-200), var(--r-charcoal-500)); /** Used as the main background color of our mobile interfaces */
  --r-background-softest: light-dark(var(--r-neutral-white), var(--r-charcoal-400)); /** Used as the main background color of our desktop interfaces, as well as small components Examples: input field, select */
  --r-background-softest-static: var(--r-neutral-white); /** Used as a soft background independent of mode */
  --r-background-state-activated: light-dark(var(--r-charcoal-400-alpha-12), var(--r-haze-200-alpha-12)); /** Used for activated state in all interactive components */
  --r-background-state-activated-inverse: light-dark(var(--r-haze-200-alpha-12), var(--r-charcoal-400-alpha-12)); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  --r-background-state-hovered: light-dark(var(--r-charcoal-400-alpha-04), var(--r-haze-200-alpha-04)); /** Used for hovered state in all interactive components */
  --r-background-state-hovered-inverse: light-dark(var(--r-haze-200-alpha-04), var(--r-charcoal-400-alpha-04)); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  --r-background-state-selected: light-dark(var(--r-charcoal-400-alpha-08), var(--r-haze-200-alpha-08)); /** Used for selected state in all interactive components */
  --r-border-brand: light-dark(var(--r-vanguard-400), var(--r-dark-vanguard-100)); /** Used for borders that serve decoration and function, adding color */
  --r-border-focused: var(--r-focused-400); /** Used for creating focus states of interactive components */
  --r-border-focused-outlined: var(--r-neutral-white); /** Used for highlighting the focus states of interactive components */
  --r-border-interactive: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for borders that serve decoration and function, adding color */
  --r-border-inverse: light-dark(var(--r-neutral-white), var(--r-charcoal-400)); /** Used for borders that are on strong backgrounds in light mode and soft backgrounds in darkmode */
  --r-border-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for borders balanced with regular texts and icons */
  --r-border-soft: light-dark(var(--r-charcoal-300), var(--r-charcoal-200)); /** Used for smoother borders but still clearly visible */
  --r-border-softer: light-dark(var(--r-charcoal-200), var(--r-charcoal-300)); /** Used for making distinctions between sections */
  --r-border-softest: light-dark(var(--r-haze-400), var(--r-charcoal-200)); /** Used for borders that serve as decoration rather than function */
  --r-border-strong: light-dark(var(--r-charcoal-600), var(--r-neutral-white)); /** Used for clear, distinct borders */
  --r-elevation-default: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --r-elevation-floating: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --r-elevation-overlay: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --r-elevation-raised: light-dark(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --r-icon-brand: light-dark(var(--r-vanguard-400), var(--r-dark-vanguard-100)); /** Used to add emphasis on one single icon */
  --r-icon-interactive: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used to add emphasis on one single icon */
  --r-icon-inverse: light-dark(var(--r-neutral-white), var(--r-charcoal-400)); /** Used for icons that are used on inverse backgrounds */
  --r-icon-inverse-static: var(--r-neutral-white); /** Used for icons that are used on inverse backgrounds, static in darkmode */
  --r-icon-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for icons that are interactive */
  --r-icon-regular-static: var(--r-charcoal-400); /** Used for icons that are interactive but should keep static in darkmode */
  --r-icon-soft: light-dark(var(--r-charcoal-300), var(--r-charcoal-200)); /** Used for icons that are supporting labels (not interactive) */
  --r-icon-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-icon-regular, static in darkmode */
  --r-link-emphasis: light-dark(var(--r-azure-500), var(--r-dark-azure-100)); /** Used to indicate to users the interactivity of a link, used for hover and activated states */
  --r-link-enabled: light-dark(var(--r-azure-400), var(--r-dark-azure-200)); /** Used to indicate to users that a link is enabled */
  --r-link-visited-emphasis: light-dark(var(--r-amethyst-500), var(--r-dark-amethyst-100)); /** Used to indicate to users the interactivity of a visited link, used for hover and activated states */
  --r-link-visited-enabled: light-dark(var(--r-amethyst-400), var(--r-dark-amethyst-200)); /** Used to indicate to users that a link has been visited before */
  --r-logo-brand: var(--r-vanguard-400); /** Used when logo requires attention */
  --r-logo-brand-ember: var(--r-ember-400); /** Not used, will be removed in future */
  --r-logo-brand-inverse: light-dark(var(--r-haze-400), var(--r-charcoal-400)); /** Used on dark backgrounds, when logo doesn’t require much attention */
  --r-logo-brand-regular: light-dark(var(--r-charcoal-400), var(--r-haze-400)); /** Used when logo doesn’t require much attention */
  --r-status-error-regular: light-dark(var(--r-red-400), var(--r-dark-red-100)); /** Used for indicating strong error  Examples: Error border for badge, error border for toast, error text */
  --r-status-error-regular-static: var(--r-red-400); /** Used for indicating strong error, static in both light and darkmode Examples: error background for primary button */
  --r-status-error-soft: light-dark(var(--r-red-100), var(--r-dark-red-500)); /** Used for indicating soft error, often combined with regular error color Examples: error background for badge, error background for toast */
  --r-status-info-regular: light-dark(var(--r-blue-400), var(--r-dark-blue-100)); /** Used for indicating strong info  Examples: info border for badge, info border for toast */
  --r-status-info-soft: light-dark(var(--r-blue-100), var(--r-dark-blue-500)); /** Used for indicating soft info, often combined with regular info color Examples: info background for badge, info background for toast */
  --r-status-success-regular: light-dark(var(--r-green-400), var(--r-dark-green-100)); /** Used for indicating strong success  Examples: success border for badge, success border for toast */
  --r-status-success-soft: light-dark(var(--r-green-100), var(--r-dark-green-500)); /** Used for indicating soft success, often combined with regular success color Examples: success background for badge, success background for toast */
  --r-status-warning-regular: light-dark(var(--r-orange-400), var(--r-dark-orange-100)); /** Used for indicating strong warning  Examples: warning border for badge, warning border for toast */
  --r-status-warning-soft: light-dark(var(--r-orange-100), var(--r-dark-orange-500)); /** Used for indicating soft warning, often combined with regular warning color Examples: warning background for badge, warning background for toast */
  --r-text-brand: light-dark(var(--r-vanguard-400), var(--r-dark-vanguard-100)); /** Used for decorative, large texts only (from font size 24), to emphasize brand Examples: Marketing email headers */
  --r-text-interactive: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
  --r-text-inverse: light-dark(var(--r-neutral-white), var(--r-charcoal-400)); /** Used for regular texts but then on strong backgrounds Examples: Text in Primary button */
  --r-text-inverse-static: var(--r-neutral-white); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
  --r-text-regular: light-dark(var(--r-charcoal-400), var(--r-haze-200)); /** Used for all texts that aren’t in need of exceptions  Examples: Headlines, body texts, labels */
  --r-text-soft: light-dark(var(--r-charcoal-300), var(--r-charcoal-200)); /** Used for texts that are additional, not crucial Examples: Hint texts, placeholder texts */
  --r-text-strong: light-dark(var(--r-charcoal-600), var(--r-neutral-white)); /** Used on coloured backgrounds to ensure better contrast compared to r-text-regular Example: Text in Toast with warning status */
  --r-text-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds that don’t change from light to dark mode, compared to r-text-strong Examples: Text in Primary button */
}

/**
 * Semantic Color Tokens - Inverse
 */
[data-theme=inverse] {
  --r-background-brand: light-dark(var(--r-dark-vanguard-100), var(--r-vanguard-400));
  --r-background-brand-softest: light-dark(var(--r-dark-vanguard-400), var(--r-vanguard-100));
  --r-background-interactive-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-background-interactive-soft: light-dark(var(--r-haze-200-alpha-12), var(--r-charcoal-400-alpha-04));
  --r-background-inverse: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-background-overlay: light-dark(var(--r-charcoal-600-alpha-80), var(--r-charcoal-600-alpha-48));
  --r-background-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-background-soft: light-dark(var(--r-charcoal-600), var(--r-haze-400));
  --r-background-softer: light-dark(var(--r-charcoal-500), var(--r-haze-200));
  --r-background-softest: light-dark(var(--r-charcoal-400), var(--r-neutral-white));
  --r-background-state-activated: light-dark(var(--r-haze-200-alpha-12), var(--r-charcoal-400-alpha-12));
  --r-background-state-activated-inverse: light-dark(var(--r-charcoal-400-alpha-12), var(--r-haze-200-alpha-12));
  --r-background-state-hovered: light-dark(var(--r-haze-200-alpha-04), var(--r-charcoal-400-alpha-04));
  --r-background-state-hovered-inverse: light-dark(var(--r-charcoal-400-alpha-04), var(--r-haze-200-alpha-04));
  --r-background-state-selected: light-dark(var(--r-haze-200-alpha-08), var(--r-charcoal-400-alpha-08));
  --r-border-brand: light-dark(var(--r-dark-vanguard-100), var(--r-vanguard-400));
  --r-border-interactive: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-border-inverse: light-dark(var(--r-charcoal-400), var(--r-neutral-white));
  --r-border-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-border-soft: light-dark(var(--r-charcoal-200), var(--r-charcoal-300));
  --r-border-softer: light-dark(var(--r-charcoal-300), var(--r-charcoal-200));
  --r-border-softest: light-dark(var(--r-charcoal-200), var(--r-haze-400));
  --r-border-strong: light-dark(var(--r-neutral-white), var(--r-charcoal-600));
  --r-elevation-default: light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
  --r-elevation-floating: light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
  --r-elevation-overlay: light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
  --r-elevation-raised: light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
  --r-icon-brand: light-dark(var(--r-dark-vanguard-100), var(--r-vanguard-400));
  --r-icon-interactive: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-icon-inverse: light-dark(var(--r-charcoal-400), var(--r-neutral-white));
  --r-icon-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-icon-soft: light-dark(var(--r-charcoal-200), var(--r-charcoal-300));
  --r-link-emphasis: light-dark(var(--r-dark-azure-100), var(--r-azure-500));
  --r-link-enabled: light-dark(var(--r-dark-azure-200), var(--r-azure-400));
  --r-link-visited-emphasis: light-dark(var(--r-dark-amethyst-100), var(--r-amethyst-500));
  --r-link-visited-enabled: light-dark(var(--r-dark-amethyst-200), var(--r-amethyst-400));
  --r-logo-brand-inverse: light-dark(var(--r-charcoal-400), var(--r-haze-400));
  --r-logo-brand-regular: light-dark(var(--r-haze-400), var(--r-charcoal-400));
  --r-status-error-regular: light-dark(var(--r-dark-red-100), var(--r-red-400));
  --r-status-error-soft: light-dark(var(--r-dark-red-500), var(--r-red-100));
  --r-status-info-regular: light-dark(var(--r-dark-blue-100), var(--r-blue-400));
  --r-status-info-soft: light-dark(var(--r-dark-blue-500), var(--r-blue-100));
  --r-status-success-regular: light-dark(var(--r-dark-green-100), var(--r-green-400));
  --r-status-success-soft: light-dark(var(--r-dark-green-500), var(--r-green-100));
  --r-status-warning-regular: light-dark(var(--r-dark-orange-100), var(--r-orange-400));
  --r-status-warning-soft: light-dark(var(--r-dark-orange-500), var(--r-orange-100));
  --r-text-brand: light-dark(var(--r-dark-vanguard-100), var(--r-vanguard-400));
  --r-text-interactive: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-text-inverse: light-dark(var(--r-charcoal-400), var(--r-neutral-white));
  --r-text-regular: light-dark(var(--r-haze-200), var(--r-charcoal-400));
  --r-text-soft: light-dark(var(--r-charcoal-200), var(--r-charcoal-300));
  --r-text-strong: light-dark(var(--r-neutral-white), var(--r-charcoal-600));
  --r-shadow-default: var(--r-elevation-default-x) var(--r-elevation-default-y) var(--r-elevation-default-blur) var(--r-elevation-default-spread) var(--r-elevation-default);
  --r-shadow-floating: var(--r-elevation-floating-x) var(--r-elevation-floating-y) var(--r-elevation-floating-blur) var(--r-elevation-floating-spread) var(--r-elevation-floating);
  --r-shadow-overlay: var(--r-elevation-overlay-x) var(--r-elevation-overlay-y) var(--r-elevation-overlay-blur) var(--r-elevation-overlay-spread) var(--r-elevation-overlay);
  --r-shadow-raised: var(--r-elevation-raised-x) var(--r-elevation-raised-y) var(--r-elevation-raised-blur) var(--r-elevation-raised-spread) var(--r-elevation-raised);
}

/**
 * Semantic Tokens (non-color)
 */
:root {
  --r-radius-full: var(--r-border-radius-999);
  --r-radius-l: var(--r-border-radius-0);
  --r-radius-m: var(--r-border-radius-0);
  --r-radius-none: var(--r-border-radius-0);
  --r-radius-s: var(--r-border-radius-0);
  --r-radius-xl: var(--r-border-radius-0);
  --r-radius-xs: var(--r-border-radius-0);
}

/**
 * Alta UI Color Tokens
 */
[data-r-ui=alta] {
  --r-background-interactive-regular: light-dark(var(--r-deepvanguard-600), var(--r-mist-200));
  --r-background-interactive-soft: light-dark(var(--r-deepvanguard-100), var(--r-mist-200-alpha-12));
  --r-background-inverse: light-dark(var(--r-charcoal-400), var(--r-mist-200));
  --r-background-regular: light-dark(var(--r-charcoal-400), var(--r-mist-200));
  --r-background-soft: light-dark(var(--r-mist-400), var(--r-charcoal-600));
  --r-background-softer: light-dark(var(--r-mist-200), var(--r-charcoal-500));
  --r-background-state-activated: light-dark(var(--r-charcoal-400-alpha-12), var(--r-mist-200-alpha-12));
  --r-background-state-hovered: light-dark(var(--r-charcoal-400-alpha-04), var(--r-mist-200-alpha-04));
  --r-background-state-selected: light-dark(var(--r-charcoal-400-alpha-08), var(--r-mist-200-alpha-08));
  --r-border-interactive: light-dark(var(--r-deepvanguard-600), var(--r-mist-200));
  --r-border-regular: light-dark(var(--r-charcoal-400), var(--r-mist-200));
  --r-border-softest: light-dark(var(--r-mist-400), var(--r-charcoal-200));
  --r-icon-interactive: light-dark(var(--r-deepvanguard-600), var(--r-mist-200));
  --r-icon-regular: light-dark(var(--r-charcoal-400), var(--r-mist-200));
  --r-logo-brand-inverse: light-dark(var(--r-mist-400), var(--r-charcoal-400));
  --r-logo-brand-regular: light-dark(var(--r-charcoal-400), var(--r-mist-400));
  --r-text-interactive: light-dark(var(--r-deepvanguard-600), var(--r-mist-200));
  --r-text-regular: light-dark(var(--r-charcoal-400), var(--r-mist-200));
}

/**
 * Alta UI Elevation Tokens
 */
[data-r-ui=alta] {
  --r-elevation-floating: light-dark(var(--r-charcoal-600-alpha-16), var(--r-charcoal-600-alpha-64));
  --r-elevation-overlay: light-dark(var(--r-charcoal-600-alpha-24), var(--r-charcoal-600-alpha-80));
  --r-elevation-raised: light-dark(var(--r-charcoal-600-alpha-14), var(--r-charcoal-600-alpha-24));
  --r-shadow-floating: var(--r-elevation-floating-x) var(--r-elevation-floating-y) var(--r-elevation-floating-blur) var(--r-elevation-floating-spread) var(--r-elevation-floating);
  --r-shadow-overlay: var(--r-elevation-overlay-x) var(--r-elevation-overlay-y) var(--r-elevation-overlay-blur) var(--r-elevation-overlay-spread) var(--r-elevation-overlay);
  --r-shadow-raised: var(--r-elevation-raised-x) var(--r-elevation-raised-y) var(--r-elevation-raised-blur) var(--r-elevation-raised-spread) var(--r-elevation-raised);
}

/**
 * Alta UI Radius Tokens
 */
[data-r-ui=alta] {
  --r-radius-l: var(--r-border-radius-12);
  --r-radius-m: var(--r-border-radius-8);
  --r-radius-s: var(--r-border-radius-4);
  --r-radius-xl: var(--r-border-radius-16);
  --r-radius-xs: var(--r-border-radius-2);
}

/**
 * Composed Elevation Shadows
 * 
 * One ready-to-use box-shadow per level. Geometry comes from the base elevation tokens, colour
 * from that level's own semantic elevation colour token -- transparent in default UI and real
 * under [data-r-ui="alta"], so shadows are an Alta-only effect with no per-component branching.
 * CSS-only on purpose: the var() chain must resolve at runtime for that override to apply.
 */
:root {
  --r-shadow-default: var(--r-elevation-default-x) var(--r-elevation-default-y) var(--r-elevation-default-blur) var(--r-elevation-default-spread) var(--r-elevation-default);
  --r-shadow-floating: var(--r-elevation-floating-x) var(--r-elevation-floating-y) var(--r-elevation-floating-blur) var(--r-elevation-floating-spread) var(--r-elevation-floating);
  --r-shadow-overlay: var(--r-elevation-overlay-x) var(--r-elevation-overlay-y) var(--r-elevation-overlay-blur) var(--r-elevation-overlay-spread) var(--r-elevation-overlay);
  --r-shadow-raised: var(--r-elevation-raised-x) var(--r-elevation-raised-y) var(--r-elevation-raised-blur) var(--r-elevation-raised-spread) var(--r-elevation-raised);
}

/**
 * Mode axis: color-scheme only. Token values follow via `light-dark()` at the semantic layer,
 * not via duplicated per-mode blocks. No `data-theme` attribute defaults to light; `auto` sets
 * both keywords so the browser resolves `light-dark()` from the platform preference -- no
 * `prefers-color-scheme` media query needed here.
 */
:root {
  color-scheme: light;
}

[data-theme=light] {
  color-scheme: light;
}

[data-theme=dark] {
  color-scheme: dark;
}

[data-theme=auto] {
  color-scheme: light dark;
}

@font-face {
  font-family: "GT Ultra Median";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: local("GT Ultra Median"), url("GT-Ultra-Median-Light.woff2") format("woff2");
}
@font-face {
  font-family: "GT Ultra Median";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: local("GT Ultra Median"), url("GT-Ultra-Median-Light-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "GT Ultra Median";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("GT Ultra Median"), url("GT-Ultra-Median-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "GT Ultra Median";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: local("GT Ultra Median"), url("GT-Ultra-Median-Regular-Italic.woff2") format("woff2");
}
:root {
  --r-font-size-900: var(--r-font-size-mobile-900);
  --r-font-size-800: var(--r-font-size-mobile-800);
  --r-font-size-700: var(--r-font-size-mobile-700);
  --r-font-size-600: var(--r-font-size-mobile-600);
  --r-font-size-500: var(--r-font-size-mobile-500);
  --r-font-size-400: var(--r-font-size-mobile-400);
  --r-font-size-300: var(--r-font-size-mobile-300);
  --r-font-size-200: var(--r-font-size-mobile-200);
  --r-font-size-text-500: var(--r-font-size-mobile-500);
  --r-font-size-text-400: var(--r-font-size-mobile-400);
  --r-font-size-text-300: var(--r-font-size-mobile-300);
  --r-font-size-text-200: var(--r-font-size-mobile-200);
  --r-letter-spacing-002: 0.02em;
  --r-letter-spacing-004: 0.04em;
  --r-row-spacing: var(--r-spacing-200);
  --r-form--width: 100%;
  --r-form--max-width: auto;
  --r-form--controls-row--display: grid;
  --r-form--controls-row--justify-content: space-between;
  --r-form--controls-row--gap: var(--r-spacing-100);
  --r-form--controls-row--margin-bottom: var(--r-row-spacing);
  --r-form--controls-row--align-items: start;
  --r-form--control--margin-bottom: var(--r-row-spacing);
  --r-form--actions--display: inline-flex;
  --r-form--actions--align-items: flex-start;
  --r-form--actions--gap: var(--r-spacing-100);
  --r-form--gap: var(--r-spacing-100);
  --r-form--cols--display: grid;
  --r-form--rows--display: grid;
}

@media (min-width: 1024px) {
  :root {
    --r-font-size-900: var(--r-font-size-desktop-900);
    --r-font-size-800: var(--r-font-size-desktop-800);
    --r-font-size-700: var(--r-font-size-desktop-700);
    --r-font-size-600: var(--r-font-size-desktop-600);
    --r-font-size-500: var(--r-font-size-desktop-500);
    --r-font-size-400: var(--r-font-size-desktop-400);
    --r-font-size-300: var(--r-font-size-desktop-300);
    --r-font-size-200: var(--r-font-size-desktop-200);
    --r-font-size-text-500: var(--r-font-size-desktop-500);
  }
  .r-type-headline-xl, .r-typography > h1.xl, .r-typography > .h-xl {
    line-height: var(--r-line-height-s);
  }
}
.r-type-headline-xxl, .r-typography > h1.xxl, .r-typography > .h-xxl {
  font-size: var(--r-font-size-900);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
  letter-spacing: -0.02em;
}

.r-type-headline-xl, .r-typography > h1.xl, .r-typography > .h-xl {
  font-size: var(--r-font-size-800);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
  letter-spacing: -0.01em;
}

.r-type-headline-l, .r-typography > h1, .r-typography > .h-l {
  font-size: var(--r-font-size-700);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
}

.r-type-headline-m, .r-typography > h2, .r-typography > .h-m {
  font-size: var(--r-font-size-600);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
}

.r-type-headline-s, .r-typography > h3, .r-typography > .h-s {
  font-size: var(--r-font-size-500);
  font-weight: var(--r-font-weight-light);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
}

.r-type-headline-xs, .r-typography > h4, .r-typography > .h-xs {
  font-size: var(--r-font-size-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-heading);
}

.r-type-body-text-l {
  font-size: var(--r-font-size-text-500);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-xs);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-m, .r-typography p, .r-typography li {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-m-semibold {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-m-uppercase {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-xs);
  font-family: var(--r-font-family-text);
  letter-spacing: var(--r-letter-spacing-004);
  text-transform: uppercase;
}

.r-type-body-text-s {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-s-semibold {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-s-uppercase {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  letter-spacing: var(--r-letter-spacing-002);
  text-transform: uppercase;
}

.r-type-body-text-xs {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-xs-semibold {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
}

.r-type-body-text-xs-uppercase {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  letter-spacing: var(--r-letter-spacing-002);
  text-transform: uppercase;
}

.r-type-link-text-l {
  font-size: var(--r-font-size-text-500);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-xs);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-m, .r-typography a[href],
.r-typography a[href] > * {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-m-semibold {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-m-uppercase {
  font-size: var(--r-font-size-text-400);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-xs);
  font-family: var(--r-font-family-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
  letter-spacing: var(--r-letter-spacing-004);
}

.r-type-link-text-s {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-s-semibold {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-m);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-s-uppercase {
  font-size: var(--r-font-size-text-300);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
  letter-spacing: var(--r-letter-spacing-002);
}

.r-type-link-text-xs {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-xs-semibold {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-semibold);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
}

.r-type-link-text-xs-uppercase {
  font-size: var(--r-font-size-text-200);
  font-weight: var(--r-font-weight-regular);
  line-height: var(--r-line-height-s);
  font-family: var(--r-font-family-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--r-spacing-025);
  letter-spacing: var(--r-letter-spacing-002);
}

.r-type-inline-text-link {
  text-decoration: underline;
  color: var(--r-text-regular);
}
.r-type-inline-text-link:hover {
  color: var(--r-text-strong);
}
.r-type-inline-text-link:focus {
  outline-style: dotted;
  outline-color: var(--r-text-soft);
}
.r-type-inline-text-link:active {
  color: var(--r-text-soft);
}
.r-type-inline-text-link.large {
  font-size: var(--r-font-size-desktop-400);
}
.r-type-inline-text-link.small {
  font-size: var(--r-font-size-mobile-300);
}
.r-type-inline-text-link.disabled {
  cursor: default;
  opacity: 0.4;
}

.r-type-fieldset-label {
  font-size: var(--r-font-size-desktop-500);
  line-height: var(--r-line-height-s);
  margin-bottom: var(--r-spacing-075);
}
.r-type-fieldset-caption {
  font-size: var(--r-font-size-desktop-400);
  line-height: var(--r-line-height-s);
  margin-bottom: var(--r-spacing-100);
}

.r-type-code, .r-typography code {
  font-size: inherit;
  padding: 0.1em 0.2em;
  color: var(--r-text-soft);
  background-color: var(--r-background-softer);
  border: 1px solid var(--r-text-soft);
  border-radius: var(--r-spacing-025);
}

.r-typography ul, .r-typography ol {
  margin-top: var(--r-spacing-075);
  margin-bottom: var(--r-spacing-200);
}
.r-typography li + li {
  margin-top: var(--r-spacing-075);
}

.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.whitespace-break-spaces {
  white-space: break-spaces;
}

:root {
  --r-table--position: relative;
  --r-table--width: 100%;
  --r-table--border-collapse: collapse;
  --r-table--background-color: var(--r-background-softest);
  --r-table--font-size: var(--r-font-size-300);
  --r-table--tr--border-bottom: 1px solid var(--r-border-softer);
  --r-table--th-td--font-family: var(--r-font-family-text);
  --r-table--th-td--font-weight: normal;
  --r-table--th-td--font-size: var(--r-font-size-300);
  --r-table--th-td--text-align: left;
  --r-table--th-td--border: none;
  --r-table--th--color: var(--r-text-soft);
  --r-table--th--background-color: var(--r-background-softer);
  --r-table--th--padding: 1.1429em;
  --r-table--td--color: var(--r-text-regular);
  --r-table--td--background-color: var(--r-background-softest);
  --r-table--td--padding: 1.1851em 1.1429em;
  --r-table_zebra--tr--background-color: var(--r-background-softer);
}

.r-table-container {
  overflow-x: auto;
}
.r-table, .r-table-container table {
  position: var(--r-table--position);
  width: var(--r-table--width);
  border-collapse: var(--r-table--border-collapse);
  background-color: var(--r-table--background-color);
  font-family: var(--r-table--font-family);
  font-size: var(--r-table--font-size);
}
.r-table tr, .r-table-container table tr {
  border-bottom: var(--r-table--tr--border-bottom);
}
.r-table th, .r-table-container table th, .r-table td, .r-table-container table td {
  font-family: var(--r-table--th-td--font-family);
  font-weight: var(--r-table--th-td--font-weight);
  font-size: var(--r-table--th-td--font-size);
  text-align: var(--r-table--th-td--text-align);
  border: var(--r-table--th-td--border);
}
.r-table th, .r-table-container table th {
  color: var(--r-table--th--color);
  background-color: var(--r-table--th--background-color);
  padding: var(--r-table--th--padding);
}
.r-table td, .r-table-container table td {
  color: var(--r-table--td--color);
  padding: var(--r-table--td--padding);
  background-color: var(--r-table--td--background-color);
}
.r-table.zebra thead + tbody > tr:nth-child(2n) > td, .r-table-container table.zebra thead + tbody > tr:nth-child(2n) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
.r-table.zebra.even tr:nth-child(2n) > td, .r-table-container table.zebra.even tr:nth-child(2n) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
.r-table.zebra.even thead + tbody > tr:nth-child(2n) > td, .r-table-container table.zebra.even thead + tbody > tr:nth-child(2n) > td {
  background-color: transparent;
}
.r-table.zebra.even thead + tbody > tr:nth-child(2n+1) > td, .r-table-container table.zebra.even thead + tbody > tr:nth-child(2n+1) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
.r-table.zebra.odd tr:nth-child(2n+1) > td, .r-table-container table.zebra.odd tr:nth-child(2n+1) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
.r-table.zebra.odd thead + tbody > tr:nth-child(2n+1) > td, .r-table-container table.zebra.odd thead + tbody > tr:nth-child(2n+1) > td {
  background-color: transparent;
}
.r-table.zebra.odd thead + tbody > tr:nth-child(2n) > td, .r-table-container table.zebra.odd thead + tbody > tr:nth-child(2n) > td {
  background-color: var(--r-table_zebra--tr--background-color);
}
@media (max-width: 720px) {
  .r-table.sticky th:first-child, .r-table-container table.sticky th:first-child, .r-table.sticky td:first-child, .r-table-container table.sticky td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    filter: drop-shadow(4px 25px 15px rgba(0, 0, 0, 0.1));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
}

r-accordion:not(.hydrated),
r-accordion-panel:not(.hydrated),
r-accordion-section:not(.hydrated),
r-accordion-trigger:not(.hydrated),
r-alert:not(.hydrated),
r-badge:not(.hydrated),
r-button:not(.hydrated),
r-card:not(.hydrated),
r-checkbox:not(.hydrated),
r-checkbox-group:not(.hydrated),
r-design-system-devtools:not(.hydrated),
r-dialog:not(.hydrated),
r-float:not(.hydrated),
r-hint:not(.hydrated),
r-icon:not(.hydrated),
r-icon-button:not(.hydrated),
r-illustration:not(.hydrated),
r-image:not(.hydrated),
r-input:not(.hydrated),
r-input-code:not(.hydrated),
r-input-date:not(.hydrated),
r-input-password:not(.hydrated),
r-input-phone-number:not(.hydrated),
r-label:not(.hydrated),
r-list-item:not(.hydrated),
r-pagination:not(.hydrated),
r-panel:not(.hydrated),
r-popover:not(.hydrated),
r-popover-action:not(.hydrated),
r-popover-content:not(.hydrated),
r-popover-headline:not(.hydrated),
r-popover-trigger:not(.hydrated),
r-progress-bar:not(.hydrated),
r-radio-button:not(.hydrated),
r-radio-button-description:not(.hydrated),
r-radio-button-leading:not(.hydrated),
r-radio-button-title:not(.hydrated),
r-radio-button-trailing:not(.hydrated),
r-radio-group:not(.hydrated),
r-select:not(.hydrated),
r-select-option:not(.hydrated),
r-skip-link:not(.hydrated),
r-stepper:not(.hydrated),
r-stepper-item:not(.hydrated),
r-tab:not(.hydrated),
r-tab-panel:not(.hydrated),
r-tabs:not(.hydrated),
r-tabs-list:not(.hydrated),
r-textarea:not(.hydrated),
r-toast:not(.hydrated),
r-toast-group:not(.hydrated),
r-tooltip:not(.hydrated) {
  visibility: hidden;
}

.r-form {
  width: var(--r-form--width);
  max-width: var(--r-form--max-width);
}
.r-form--controls-row.c1 {
  --columns: 1;
}
.r-form--controls-row.c2 {
  --columns: 2;
}
.r-form--controls-row.c3 {
  --columns: 3;
}
.r-form--controls-row.c4 {
  --columns: 4;
}
.r-form--controls-row.c5 {
  --columns: 5;
}
.r-form--controls-row.c6 {
  --columns: 6;
}
.r-form--controls-row.c7 {
  --columns: 7;
}
.r-form--controls-row.c8 {
  --columns: 8;
}
.r-form--controls-row.c9 {
  --columns: 9;
}
.r-form--controls-row.c10 {
  --columns: 10;
}
.r-form--controls-row.c11 {
  --columns: 11;
}
.r-form--controls-row.c12 {
  --columns: 12;
}
.r-form--controls-row {
  display: var(--r-form--controls-row--display);
  grid-template-columns: repeat(var(--columns, 2), 1fr);
  gap: var(--r-form--controls-row--gap);
  margin-bottom: var(--r-form--controls-row--margin-bottom);
  align-items: var(--r-form--controls-row--align-items);
}
.r-form--control {
  margin-bottom: var(--r-form--control--margin-bottom);
}
.r-form--actions {
  display: var(--r-form--actions--display);
  align-items: var(--r-form--actions--align-items);
  gap: var(--r-form--actions--gap);
}
.r-form--gap.gap-025 {
  --r-form--gap: var(--r-spacing-025);
}
.r-form--gap.gap-050 {
  --r-form--gap: var(--r-spacing-050);
}
.r-form--gap.gap-075 {
  --r-form--gap: var(--r-spacing-075);
}
.r-form--gap.gap-100 {
  --r-form--gap: var(--r-spacing-100);
}
.r-form--gap.gap-150 {
  --r-form--gap: var(--r-spacing-150);
}
.r-form--gap.gap-200 {
  --r-form--gap: var(--r-spacing-200);
}
.r-form--gap {
  gap: var(--r-form--gap);
}
.r-form--cols.c2 {
  --r-form--cols: 2;
}
.r-form--cols.c3 {
  --r-form--cols: 3;
}
.r-form--cols.c4 {
  --r-form--cols: 4;
}
.r-form--cols.c5 {
  --r-form--cols: 5;
}
.r-form--cols.c6 {
  --r-form--cols: 6;
}
.r-form--cols.c7 {
  --r-form--cols: 7;
}
.r-form--cols.c8 {
  --r-form--cols: 8;
}
.r-form--cols.c9 {
  --r-form--cols: 9;
}
.r-form--cols.c10 {
  --r-form--cols: 10;
}
.r-form--cols.c11 {
  --r-form--cols: 11;
}
.r-form--cols.c12 {
  --r-form--cols: 12;
}
.r-form--cols {
  display: var(--r-form--cols--display);
  grid-template-columns: repeat(var(--r-form--cols, 1), 1fr);
}
.r-form--rows.r2 {
  --r-form--rows: 2;
}
.r-form--rows.r3 {
  --r-form--rows: 3;
}
.r-form--rows.r4 {
  --r-form--rows: 4;
}
.r-form--rows.r5 {
  --r-form--rows: 5;
}
.r-form--rows.r6 {
  --r-form--rows: 6;
}
.r-form--rows.r7 {
  --r-form--rows: 7;
}
.r-form--rows.r8 {
  --r-form--rows: 8;
}
.r-form--rows.r9 {
  --r-form--rows: 9;
}
.r-form--rows.r10 {
  --r-form--rows: 10;
}
.r-form--rows.r11 {
  --r-form--rows: 11;
}
.r-form--rows.r12 {
  --r-form--rows: 12;
}
.r-form--rows {
  display: var(--r-form--rows--display);
  grid-template-rows: repeat(var(--r-form--rows, 1), 1fr);
}

body:has(r-panel[variant=drawer]:not([collapsed])) .r-panel-shiftable-content,
r-panel[variant=drawer]:not([collapsed]) ~ .r-panel-shiftable-content {
  transform: translateX(260px);
}

.r-panel-shiftable-content {
  transition: transform 0.3s ease;
}