/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "DM Sans", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: "DM Serif Display", Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
    --text-sm: 0.875rem;
    --text-xl: 1.25rem;
    --radius-xs: 0.125rem;
    --shadow-sm: 0 1px 2px 0 #0007;
    --shadow-md: 0 4px 6px -1px #0007, 0 2px 4px -2px #0007;
    --shadow-xl: 0 20px 25px -5px #0007, 0 8px 10px -6px #0007;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --primary-100: #E5FF56;
    --primary-200: #D4FF00;
    --primary-300: #CAF000;
    --primary-400: #B8DD00;
    --primary-500: #A2C400;
    --primary-600: #819C00;
    --primary-700: #627700;
    --primary-900: #415000;
    --secondary-50: #F4F9FE;
    --secondary-100: #E4F1FF;
    --secondary-200: #C2E1FF;
    --secondary-300: #86C1FF;
    --secondary-400: #3D9EFF;
    --secondary-500: #1F87F3;
    --secondary-600: #0770D9;
    --secondary-700: #0052A3;
    --secondary-800: #002E5C;
    --secondary-900: #001F3D;
    --secondary-950: #000810;
    --secondary-50-op-08: color-mix(in srgb-linear, #F4F9FE 80%, transparent 20%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-50-op-08: color-mix(in srgb-linear, var(--secondary-50) 80%, transparent 20%);
    }
    --secondary-50-op-02: color-mix(in srgb-linear, #F4F9FE 20%, transparent 80%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-50-op-02: color-mix(in srgb-linear, var(--secondary-50) 20%, transparent 80%);
    }
    --secondary-50-op-01: color-mix(in srgb-linear, #F4F9FE 10%, transparent 90%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-50-op-01: color-mix(in srgb-linear, var(--secondary-50) 10%, transparent 90%);
    }
    --secondary-100-op-03: color-mix(in srgb-linear, #E4F1FF 30%, transparent 70%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-100-op-03: color-mix(in srgb-linear, var(--secondary-100) 30%, transparent 70%);
    }
    --secondary-200-op-04: color-mix(in srgb-linear, #C2E1FF 40%, transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-200-op-04: color-mix(in srgb-linear, var(--secondary-200) 40%, transparent 60%);
    }
    --secondary-200-op-01: color-mix(in srgb-linear, #C2E1FF 10%, transparent 90%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-200-op-01: color-mix(in srgb-linear, var(--secondary-200) 10%, transparent 90%);
    }
    --secondary-300-op-06: color-mix(in srgb-linear, #86C1FF 60%, transparent 40%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-300-op-06: color-mix(in srgb-linear, var(--secondary-300) 60%, transparent 40%);
    }
    --secondary-300-op-04: color-mix(in srgb-linear, #86C1FF 40%, transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-300-op-04: color-mix(in srgb-linear, var(--secondary-300) 40%, transparent 60%);
    }
    --secondary-300-op-02: color-mix(in srgb-linear, #86C1FF 20%, transparent 80%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-300-op-02: color-mix(in srgb-linear, var(--secondary-300) 20%, transparent 80%);
    }
    --secondary-400-op-03: color-mix(in srgb-linear, #3D9EFF 30%, transparent 70%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-400-op-03: color-mix(in srgb-linear, var(--secondary-400) 30%, transparent 70%);
    }
    --secondary-400-op-02: color-mix(in srgb-linear, #3D9EFF 20%, transparent 80%);
    @supports (color: color-mix(in lab, red, red)) {
      --secondary-400-op-02: color-mix(in srgb-linear, var(--secondary-400) 20%, transparent 80%);
    }
    --gray-50: #F4F9FE;
    --gray-100: #E4F1FF;
    --gray-200: #CCD9E6;
    --gray-300: #ADB9C5;
    --gray-400: #8B97A2;
    --gray-500: #68737E;
    --gray-600: #49545E;
    --gray-700: #2F3943;
    --gray-800: #172029;
    --gray-900: #030A12;
    --gray-950: #000810;
    --gray-100-op-05: color-mix(in srgb-linear, #E4F1FF 50%, transparent 50%);
    @supports (color: color-mix(in lab, red, red)) {
      --gray-100-op-05: color-mix(in srgb-linear, var(--gray-100) 50%, transparent 50%);
    }
    --gray-100-op-03: color-mix(in srgb-linear, #E4F1FF 30%, transparent 70%);
    @supports (color: color-mix(in lab, red, red)) {
      --gray-100-op-03: color-mix(in srgb-linear, var(--gray-100) 30%, transparent 70%);
    }
    --gray-100-op-02: color-mix(in srgb-linear, #E4F1FF 20%, transparent 80%);
    @supports (color: color-mix(in lab, red, red)) {
      --gray-100-op-02: color-mix(in srgb-linear, var(--gray-100) 20%, transparent 80%);
    }
    --gray-500-op-08: color-mix(in srgb-linear, #68737E 80%, transparent 20%);
    @supports (color: color-mix(in lab, red, red)) {
      --gray-500-op-08: color-mix(in srgb-linear, var(--gray-500) 80%, transparent 20%);
    }
    --gray-500-op-06: color-mix(in srgb-linear, #68737E 60%, transparent 40%);
    @supports (color: color-mix(in lab, red, red)) {
      --gray-500-op-06: color-mix(in srgb-linear, var(--gray-500) 60%, transparent 40%);
    }
    --color-danger: #BC4040;
    --color-error: #BC4040;
    --color-warning: #FFE600;
    --color-success: #40BC40;
    --color-info: #4080BC;
    --color-notice: #8B5CF6;
    --color-neutral: #6B7280;
    --color-diamond: #BFDBFE;
    --color-platinum: #E5E7EB;
    --color-gold: #D0B80E;
    --color-silver: #B0BFCF;
    --color-bronze: #D9A574;
    --color-draft: #94A3B8;
    --color-active: #10B981;
    --color-under-review: #F59E0B;
    --color-inactive: #A1A1AA;
    --color-archived: #64748B;
    --color-deleted: #DC2626;
    --color-active-bg-light: #3b82f6ff;
    --color-disabled-bg-light: #cbd5e1ff;
    --color-highlight-bg-light: #fbbf24ff;
    --color-new-bg-light: #10b981ff;
    --color-hover-light: #fbbf24ff;
    --color-hover-dark: #fbbf24ff;
    --color-hover-light-op-09: color-mix(in srgb-linear, #fbbf24ff 90%, transparent 10%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-09: color-mix(in srgb-linear, var(--color-hover-light) 90%, transparent 10%);
    }
    --color-hover-light-op-08: color-mix(in srgb-linear, #fbbf24ff 80%, transparent 20%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-08: color-mix(in srgb-linear, var(--color-hover-light) 80%, transparent 20%);
    }
    --color-hover-light-op-07: color-mix(in srgb-linear, #fbbf24ff 70%, transparent 30%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-07: color-mix(in srgb-linear, var(--color-hover-light) 70%, transparent 30%);
    }
    --color-hover-light-op-06: color-mix(in srgb-linear, #fbbf24ff 60%, transparent 40%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-06: color-mix(in srgb-linear, var(--color-hover-light) 60%, transparent 40%);
    }
    --color-hover-light-op-05: color-mix(in srgb-linear, #fbbf24ff 50%, transparent 50%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-05: color-mix(in srgb-linear, var(--color-hover-light) 50%, transparent 50%);
    }
    --color-hover-light-op-04: color-mix(in srgb-linear, #fbbf24ff 40%, transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-04: color-mix(in srgb-linear, var(--color-hover-light) 40%, transparent 60%);
    }
    --color-hover-light-op-03: color-mix(in srgb-linear, #fbbf24ff 30%, transparent 70%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-03: color-mix(in srgb-linear, var(--color-hover-light) 30%, transparent 70%);
    }
    --color-hover-light-op-02: color-mix(in srgb-linear, #fbbf24ff 20%, transparent 80%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-02: color-mix(in srgb-linear, var(--color-hover-light) 20%, transparent 80%);
    }
    --color-hover-light-op-01: color-mix(in srgb-linear, #fbbf24ff 10%, transparent 90%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-light-op-01: color-mix(in srgb-linear, var(--color-hover-light) 10%, transparent 90%);
    }
    --color-hover-dark-op-09: color-mix(in srgb-linear, #fbbf24ff 90%, transparent 10%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-09: color-mix(in srgb-linear, var(--color-hover-dark) 90%, transparent 10%);
    }
    --color-hover-dark-op-08: color-mix(in srgb-linear, #fbbf24ff 80%, transparent 20%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-08: color-mix(in srgb-linear, var(--color-hover-dark) 80%, transparent 20%);
    }
    --color-hover-dark-op-07: color-mix(in srgb-linear, #fbbf24ff 70%, transparent 30%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-07: color-mix(in srgb-linear, var(--color-hover-dark) 70%, transparent 30%);
    }
    --color-hover-dark-op-06: color-mix(in srgb-linear, #fbbf24ff 60%, transparent 40%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-06: color-mix(in srgb-linear, var(--color-hover-dark) 60%, transparent 40%);
    }
    --color-hover-dark-op-05: color-mix(in srgb-linear, #fbbf24ff 50%, transparent 50%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-05: color-mix(in srgb-linear, var(--color-hover-dark) 50%, transparent 50%);
    }
    --color-hover-dark-op-04: color-mix(in srgb-linear, #fbbf24ff 40%, transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-04: color-mix(in srgb-linear, var(--color-hover-dark) 40%, transparent 60%);
    }
    --color-hover-dark-op-03: color-mix(in srgb-linear, #fbbf24ff 30%, transparent 70%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-03: color-mix(in srgb-linear, var(--color-hover-dark) 30%, transparent 70%);
    }
    --color-hover-dark-op-02: color-mix(in srgb-linear, #fbbf24ff 20%, transparent 80%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-02: color-mix(in srgb-linear, var(--color-hover-dark) 20%, transparent 80%);
    }
    --color-hover-dark-op-01: color-mix(in srgb-linear, #fbbf24ff 10%, transparent 90%);
    @supports (color: color-mix(in lab, red, red)) {
      --color-hover-dark-op-01: color-mix(in srgb-linear, var(--color-hover-dark) 10%, transparent 90%);
    }
    --space-0: 0px;
    --size-hairline: 1px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 20px;
    --space-5: 32px;
    --space-6: 52px;
    --space-7: 84px;
    --size-1: var(--space-1);
    --size-2: var(--space-2);
    --size-3: var(--space-3);
    --size-4: var(--space-4);
    --size-6: var(--space-6);
    --size-7: var(--space-7);
    --page-side-margin: var(--space-6);
    --page-max-width: calc(100% - (var(--page-side-margin) * 2));
    --content-size-0: 16px;
    --content-size-1: 24px;
    --content-size-2: 40px;
    --content-size-3: 64px;
    --content-size-4: 104px;
    --content-size-5: 168px;
    --content-size-6: 272px;
    --content-size-7: 440px;
    --content-size-8: 564px;
    --content-size-9: 856px;
    --content-size-10: 980px;
    --content-size-11: 1440px;
    --padding-inline-1: var(--space-2);
    --padding-block-1: var(--space-1);
    --padding-inline-2: var(--space-2);
    --padding-block-2: var(--space-2);
    --padding-inline-3: var(--space-3);
    --padding-block-3: var(--space-2);
    --padding-inline-4: var(--space-4);
    --padding-block-4: var(--space-3);
    --padding-inline-5: var(--space-4);
    --padding-block-5: var(--space-4);
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 12px;
    --radius-4: 16px;
    --radius-5: 20px;
    --radius-6: 24px;
    --radius-pill: 9999px;
    --icon-size-md: 24px;
    --icon-text-gap: var(--space-2);
    --main-menu-cell-w: 168px;
    --main-menu-cell-h: 64px;
    --main-menu-logo-h: 26px;
    --main-menu-cell-collapsed: 40px;
    --main-menu-bar-h: var(--content-size-3);
    --mobile-row-h: 56px;
    --mobile-gutter: var(--space-3);
    --main-menu-icon: 22px;
    --main-menu-accent: 3px;
    --main-menu-icon-gap: 3px;
    --main-menu-spark: 22px;
    --org-dim-menu-cell-h: 64px;
    --org-dim-menu-cell-collapsed: 40px;
    --org-dim-menu-icon: 22px;
    --org-dim-menu-icon-gap: 3px;
    --org-dim-menu-accent: 3px;
    --org-dim-menu-spark: 22px;
    --org-dim-menu-wm-size: 54px;
    --dim-wm-size: 76px;
    --dim-tile-size: var(--space-5);
    --dim-tile-radius: var(--radius-2);
    --dim-tile-glyph: var(--icon-size-md);
    --surface-paper: light-dark(var(--surface-paper-light), var(--surface-paper-dark));
    --surface-bg-light: #ffffff22;
    --surface-bg-light-hover: #ffffff22;
    --surface-bg-dark: #00000022;
    --surface-bg-dark-hover: #00000022;
    --surface-text1-light: var(--gray-900);
    --surface-text1-light-hover: var(--gray-800);
    --surface-text1-light-selected: var(--secondary-600);
    --surface-text1-dark: var(--secondary-50);
    --surface-text1-dark-hover: var(--secondary-100);
    --surface-text1-dark-selected: var(--secondary-200);
    --surface-text1-neutral: var(--gray-600);
    --surface-text1-neutral-hover: var(--gray-700);
    --surface-text1-neutral-selected: var(--secondary-700);
    --surface-text2-light: var(--gray-700);
    --surface-text2-light-hover: var(--gray-600);
    --surface-text2-light-selected: var(--secondary-500);
    --surface-text2-dark: var(--gray-100);
    --surface-text3-light: var(--gray-500);
    --surface-text3-dark: var(--gray-500);
    --surface-paper-light: #FAF8F3;
    --surface-paper-light-hover: #F3F0E8;
    --surface-paper-light-selected: var(--secondary-50);
    --surface-paper-dark: #12161B;
    --surface-paper-dark-hover: #1A1F26;
    --surface-paper-dark-selected: var(--secondary-400);
    --surface-text2-dark-hover: var(--gray-200);
    --surface-text2-dark-selected: var(--secondary-300);
    --surface-text2-neutral: var(--gray-500);
    --surface-text2-neutral-hover: var(--gray-600);
    --surface-text2-neutral-selected: var(--secondary-600);
    --surface-menu-text-light: var(--gray-700);
    --surface-menu-text-light-hover: var(--secondary-700);
    --surface-menu-text-light-selected: var(--secondary-600);
    --surface-menu-text-dark: var(--secondary-50);
    --surface-menu-text-dark-hover: var(--primary-400);
    --surface-menu-text-dark-selected: var(--primary-200);
    --surface-text-muted-light: var(--gray-300);
    --surface-text-muted-light-hover: var(--gray-400);
    --surface-text-muted-light-selected: var(--secondary-400);
    --surface-text-muted-dark: var(--gray-100-op-05);
    --surface-text-muted-dark-hover: var(--gray-200);
    --surface-text-muted-dark-selected: var(--secondary-200);
    --surface-text-muted-neutral: var(--gray-400);
    --surface-text-muted-neutral-hover: var(--gray-500);
    --surface-text-muted-neutral-selected: var(--secondary-500);
    --surface-text-accent-light: var(--primary-700);
    --surface-text-accent-light-hover: var(--primary-700);
    --surface-text-accent-light-selected: var(--primary-700);
    --surface-text-accent-dark: var(--primary-200);
    --surface-text-accent-dark-hover: var(--primary-200);
    --surface-text-accent-dark-selected: var(--primary-200);
    --surface-text-accent-neutral: var(--secondary-400);
    --surface-text-accent-neutral-hover: var(--secondary-500);
    --surface-text-accent-neutral-selected: var(--secondary-600);
    --surface-bg: light-dark(var(--surface-bg-light), var(--surface-bg-dark));
    --surface-bg-hover: light-dark(var(--surface-bg-light-hover), var(--surface-bg-dark-hover));
    --surface-text1: light-dark(var(--surface-text1-light), var(--surface-text1-dark));
    --surface-text1-hover: light-dark(var(--surface-text1-light-hover), var(--surface-text1-dark-hover));
    --surface-text1-selected: light-dark(var(--surface-text1-light-selected), var(--surface-text1-dark-selected));
    --surface-text2: light-dark(var(--surface-text2-light), var(--surface-text2-dark));
    --surface-text3: light-dark(var(--surface-text3-light), var(--surface-text3-dark));
    --surface-paper-hover: light-dark(var(--surface-paper-light-hover), var(--surface-paper-dark-hover));
    --surface-paper-selected: light-dark(var(--surface-paper-light-selected), var(--surface-paper-dark-selected));
    --surface-text2-hover: light-dark(var(--surface-text2-light-hover), var(--surface-text2-dark-hover));
    --surface-text2-selected: light-dark(var(--surface-text2-light-selected), var(--surface-text2-dark-selected));
    --surface-menu-text: light-dark(var(--surface-menu-text-light), var(--surface-menu-text-dark));
    --surface-menu-text-hover: light-dark(var(--surface-menu-text-light-hover), var(--surface-menu-text-dark-hover));
    --surface-menu-text-selected: light-dark(var(--surface-menu-text-light-selected), var(--surface-menu-text-dark-selected));
    --surface-text-muted: light-dark(var(--surface-text-muted-light), var(--surface-text-muted-dark));
    --surface-text-muted-hover: light-dark(var(--surface-text-muted-light-hover), var(--surface-text-muted-dark-hover));
    --surface-text-muted-selected: light-dark(var(--surface-text-muted-light-selected), var(--surface-text-muted-dark-selected));
    --surface-text-accent: light-dark(var(--surface-text-accent-light), var(--surface-text-accent-dark));
    --nav-accent: light-dark(var(--secondary-300), var(--primary-200));
    --nav-ink: light-dark(var(--secondary-400), var(--primary-200));
    --surface-text-accent-hover: light-dark(var(--surface-text-accent-light-hover), var(--surface-text-accent-dark-hover));
    --surface-text-accent-selected: light-dark(var(--surface-text-accent-light-selected), var(--surface-text-accent-dark-selected));
    --text-color: var(--surface-text1);
    --ctn-size-0: var(--content-size-1);
    --ctn-size-1: var(--content-size-2);
    --ctn-size-2: var(--content-size-3);
    --ctn-size-3: var(--content-size-4);
    --ctn-size-4: var(--content-size-5);
    --ctn-size-5: var(--content-size-6);
    --ctn-size-6: var(--content-size-7);
    --ctn-size-7: 712px;
    --ctn-size-8: 1152px;
    --ctn-size-9: 1424px;
    --ctn-size-10: var(--content-size-11);
    --card-rung-1: var(--content-size-3);
    --card-rung-2: var(--content-size-4);
    --card-rung-3: var(--content-size-5);
    --card-rung-4: var(--content-size-6);
    --card-rung-5: var(--content-size-8);
    --card-ratio-phi: 1.618;
    --card-ratio-phi2: 2.618;
    --card-measure: 688px;
    --card-radius: var(--radius-5);
    --card-pad: 22px;
    --rail-w: var(--content-size-6);
    --rail-collapsed: 68px;
    --ctxbar-w: 56px;
    --ctx-w: clamp(380px, 30vw, 720px);
    --ctx-w-min: 320px;
    --ctx-w-max: 900px;
    --ctx-grip-w: 6px;
    --ctx-grip-line: 2px;
    --measure-read: var(--card-measure);
    --gutter: clamp(20px, 3vw, 40px);
    --z-ctxbar: 30;
    --z-drawer: 40;
    --z-fab: 45;
    --z-nav: 50;
    --z-modal: 100;
    --shell-ease: cubic-bezier(.4, 0, .2, 1);
    --bg-color: light-dark(var(--gray-100), var(--gray-500-op-08));
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .size-6 {
    width: var(--size-6);
    height: var(--size-6);
  }
  .size-7 {
    width: var(--size-7);
    height: var(--size-7);
  }
  .shrink {
    flex-shrink: 1;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .overline {
    text-decoration-line: overline;
  }
  .underline {
    text-decoration-line: underline;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .contain-style {
    --tw-contain-style: style;
    contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
  }
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-sans-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-sans-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-serif-display-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-serif-display-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-serif-display-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/dm-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Kaushan Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/kaushan-script-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kaushan Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_content/Nodwise.UI.Components/fonts/kaushan-script-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@layer components;
@layer components;
@layer components;
@layer components;
@layer components;
@layer components;
@layer components;
@layer components;
@layer components {
  .page {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
  }
  .page.page-full-width {
    background: none;
    display: block;
    overflow: visible;
  }
  .page.page-full-width>* {
    padding: 0;
  }
}
@layer components {
  .glass {
    --cg-shift: 0;
    --cg-interval: 0;
    --transparent: #ffffff00;
    --glass-reflex-color: var(--dim-300,var(--secondary-200));
    --glass-reflex-secondary-color: #C2E1FF;
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-secondary-color: color-mix(in srgb-linear, var(--secondary-200) 50%,var(--transparent) 50%);
    }
    --c-border: var(--dim-500, rgba(255, 255, 255, .5));
    @supports (color: color-mix(in lab, red, red)) {
      --c-border: color-mix(in srgb, var(--dim-500, rgba(255, 255, 255, .5)) 26%, transparent 74%);
    }
    --reflex-base: 0px;
    --reflex-ang: 135deg;
    --iris-ang: 90deg;
    --iris-bottom: 0;
    --iris-left: 0;
    --iris-top: unset;
    --iris-right: unset;
    --iris-width: calc(100% - 40px);
    --iris-height: var(--glass-thickness, 1px);
    position: relative;
    overflow: clip;
    overflow-clip-margin: var(--glass-thickness, 1px);
    isolation: isolate;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(40px) saturate(160%);
    border: var(--glass-thickness, 1px) solid var(--c-border);
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 20px -12px rgba(0, 0, 0, .45);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s, border-color .2s, background .3s;
  }
  .glass.surface-dark {
    background: #00000080;
    backdrop-filter: none;
    --transparent: #00000000;
    --glass-reflex-color: #0052A3;
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-color: color-mix(in srgb-linear, var(--secondary-700) 90%,var(--transparent) 10%);
    }
    --glass-reflex-secondary-color: #C2E1FF;
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-secondary-color: color-mix(in srgb-linear, var(--secondary-200) 50%,var(--transparent) 50%);
    }
    --c-border: var(--dim-700, rgba(255, 255, 255, .35));
    @supports (color: color-mix(in lab, red, red)) {
      --c-border: color-mix(in srgb, var(--dim-700, rgba(255, 255, 255, .35)) 55%, transparent 45%);
    }
  }
  .glass {
    --glass-reflex-0: var(--transparent);
    --glass-reflex-1: var(--glass-reflex-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-1: color-mix(in srgb-linear, var(--glass-reflex-color) 10%, var(--transparent) 90%);
    }
    --glass-reflex-2: var(--glass-reflex-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-2: color-mix(in srgb-linear, var(--glass-reflex-color) 20%, var(--transparent) 80%);
    }
    --glass-reflex-3: var(--glass-reflex-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-3: color-mix(in srgb-linear, var(--glass-reflex-color) 30%, var(--transparent) 30%);
    }
    --glass-reflex-2-1: var(--glass-reflex-secondary-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-2-1: color-mix(in srgb-linear, var(--glass-reflex-secondary-color) 10%, var(--transparent) 90%);
    }
    --glass-reflex-2-2: var(--glass-reflex-secondary-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-2-2: color-mix(in srgb-linear, var(--glass-reflex-secondary-color) 20%, var(--transparent) 80%);
    }
    --glass-reflex-2-3: var(--glass-reflex-secondary-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-2-3: color-mix(in srgb-linear, var(--glass-reflex-secondary-color) 30%, var(--transparent) 30%);
    }
    position: relative;
    transition: transform .85s cubic-bezier(.33,1,.68,1);
    --glass-reflex-layer-smooth: repeating-linear-gradient( var(--reflex-ang), var(--glass-reflex-0) 0, var(--glass-reflex-1) calc(160px + var(--reflex-base)), var(--glass-reflex-0) calc(212px + var(--reflex-base)), var(--glass-reflex-2) calc(264px + var(--reflex-base)), var(--glass-reflex-0) calc(320px + var(--reflex-base)), var(--glass-reflex-1) calc(364px + var(--reflex-base)), var(--glass-reflex-0) calc(460px + var(--reflex-base)), var(--glass-reflex-1) calc(580px + var(--reflex-base)), var(--glass-reflex-0) calc(630px + var(--reflex-base)), var(--glass-reflex-2) calc(720px + var(--reflex-base)), var(--glass-reflex-1) calc(864px + var(--reflex-base)), var(--glass-reflex-2) calc(960px + var(--reflex-base)), var(--glass-reflex-0) calc(1090px + var(--reflex-base)));
    --glass-reflex-layer: var(--glass-reflex-layer-smooth);
  }
  .glass.surface-dark {
    --glass-reflex-layer: var(--glass-reflex-layer-smooth);
  }
  .glass::before {
    position: fixed;
    top: 0;
    left: 0;
    width: max(100vw,100%);
    height: max(100vh,100%);
    pointer-events: none;
    content: ' ';
    background: var(--glass-reflex-layer);
    transition: transform .85s cubic-bezier(.33,1,.68,1);
  }
  .glass:nth-child(3n+1) {
    --cg-shift: 19px;
  }
  .glass:nth-child(3n+2) {
    --cg-shift: 17px;
  }
  .glass:nth-child(3n) {
    --cg-shift: 13px;
  }
  .glass:nth-child(5n) {
    --cg-shift: 7px;
  }
  .glass:nth-child(7n+3) {
    --cg-shift: 2px;
  }
  .glass:nth-child(2n+1) {
    --cg-interval: calc(2% + 1px);
  }
  .glass:nth-child(2n) {
    --cg-interval: calc(3%);
  }
  .glass:nth-child(3n) {
    --cg-interval: calc(3% - 1px);
  }
  .glass:nth-child(5n) {
    --cg-interval: calc(2% + 2px);
  }
  .glass:nth-child(7n+3) {
    --cg-interval: calc(3% - 2px);
  }
  .glass .vertical {
    --iris-ang: 0deg;
    --iris-bottom: unset;
    --iris-left: unset;
    --iris-top: 20%;
    --iris-right: 0;
    --iris-width: var(--glass-thickness, 1px);
    --iris-height: 60%;
  }
  .glass::after {
    content: "";
    position: absolute;
    bottom: var(--iris-bottom);
    left: var(--iris-left);
    top: var(--iris-top);
    right: var(--iris-right);
    width: var(--iris-width);
    height: var(--iris-height);
    pointer-events: none;
    border-radius: var(--glass-thickness, 1px);
    background: linear-gradient( 135deg, transparent 0%, #ffffff 15%, #B0B6BF calc(30% + var(--cg-shift) + (var(--cg-interval) * 1)), #AFB6BF calc(30% + var(--cg-shift) + (var(--cg-interval) * 2)), #B5CDD2 calc(30% + var(--cg-shift) + (var(--cg-interval) * 3)), #BED9C8 calc(30% + var(--cg-shift) + (var(--cg-interval) * 4)), #D7DCCF calc(30% + var(--cg-shift) + (var(--cg-interval) * 5)), #E1DBC9 calc(30% + var(--cg-shift) + (var(--cg-interval) * 6)), #DBC6BB calc(30% + var(--cg-shift) + (var(--cg-interval) * 7)), #CFB3B9 calc(30% + var(--cg-shift) + (var(--cg-interval) * 8)), #C3A7B8 calc(30% + var(--cg-shift) + (var(--cg-interval) * 9)), #C1ADB7 calc(30% + var(--cg-shift) + (var(--cg-interval) * 10)), #B5AAB5 calc(30% + var(--cg-shift) + (var(--cg-interval) * 11)), #ABA8B2 calc(30% + var(--cg-shift) + (var(--cg-interval) * 12)), #ABA8B2 calc(30% + var(--cg-shift) + (var(--cg-interval) * 13)), #9EA0AD calc(30% + var(--cg-shift) + (var(--cg-interval) * 14)), #A5A6B5 calc(30% + var(--cg-shift) + (var(--cg-interval) * 15)), #A1A2B3 calc(30% + var(--cg-shift) + (var(--cg-interval) * 16)), #ffffff 90%,transparent 100% );
    box-shadow: 0 0 4px 0 light-dark(rgba(90, 84, 104, .28), rgba(223, 198, 210, .40)), 0 -2px 10px 1px light-dark(rgba(110, 124, 100, .18), rgba(213, 223, 205, .22));
    background-repeat: repeat;
    opacity: 1;
    transition: transform 1s ease;
    z-index: 1;
  }
  @supports (overflow-clip-margin: 1px) {
    .glass::after {
      bottom: calc(-1 * var(--glass-thickness, 1px));
    }
  }
  .glass:hover::after {
    transform: translateX(-20px);
  }
  .glass:nth-child(3n+1) {
    --reflex-base: 22px;
    --reflex-ang: 133deg;
  }
  .glass:nth-child(3n+2) {
    --reflex-base: -18px;
    --reflex-ang: 137deg;
  }
  .glass:nth-child(4n) {
    --reflex-base: 40px;
  }
  .glass:nth-child(5n+3) {
    --reflex-base: -32px;
    --reflex-ang: 136deg;
  }
  .glass:nth-child(7n+2) {
    --reflex-ang: 134deg;
  }
  .glass::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0,0,0);
  }
  .glass:hover {
    border-color: var(--dim-500, rgba(255, 255, 255, .7));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--dim-500, rgba(255, 255, 255, .7)) 70%, transparent);
    }
  }
  .glass:hover::before {
    transform: translate3d(0,0,-74px);
  }
}
@layer components {
  .round-glass {
    --glass-highlight: light-dark(#fff,#fff);
    --glass-highlight-op-01: light-dark(rgba(255,255,255,0.1),rgba(255,255,255,0.1));
    --glass-highlight-op-02: light-dark(rgba(255,255,255,0.2),rgba(255,255,255,0.2));
    --glass-highlight-op-03: light-dark(rgba(255,255,255,0.3),rgba(255,255,255,0.3));
    --glass-highlight-op-04: light-dark(rgba(255,255,255,0.4),rgba(255,255,255,0.4));
    --glass-highlight-op-05: light-dark(rgba(255,255,255,0.5),rgba(255,255,255,0.5));
    --glass-highlight-op-06: light-dark(rgba(255,255,255,0.6),rgba(255,255,255,0.6));
    --glass-highlight-op-07: light-dark(rgba(255,255,255,0.7),rgba(255,255,255,0.7));
    --glass-highlight-op-08: light-dark(rgba(255,255,255,0.8),rgba(255,255,255,0.8));
    --glass-highlight-op-09: light-dark(rgba(255,255,255,0.9),rgba(255,255,255,0.9));
    --glass-bg: light-dark(rgba(0,0,0,0.1), rgba(0,0,0,0));
  }
  .round-glass:hover, .round-glass:hover::after {
    --glass-highlight: light-dark(var( --color-hover-light),var( --color-hover-dark));
    --glass-highlight-op-01: light-dark(var( --color-hover-light-op-01),var( --color-hover-dark-op-01));
    --glass-highlight-op-02: light-dark(var( --color-hover-light-op-02),var( --color-hover-dark-op-02));
    --glass-highlight-op-03: light-dark(var( --color-hover-light-op-03),var( --color-hover-dark-op-03));
    --glass-highlight-op-04: light-dark(var( --color-hover-light-op-04),var( --color-hover-dark-op-04));
    --glass-highlight-op-05: light-dark(var( --color-hover-light-op-05),var( --color-hover-dark-op-05));
    --glass-highlight-op-06: light-dark(var( --color-hover-light-op-06),var( --color-hover-dark-op-06));
    --glass-highlight-op-07: light-dark(var( --color-hover-light-op-07),var( --color-hover-dark-op-07));
    --glass-highlight-op-08: light-dark(var( --color-hover-light-op-08),var( --color-hover-dark-op-08));
    --glass-highlight-op-09: light-dark(var( --color-hover-light-op-09),var( --color-hover-dark-op-09));
  }
  .round-glass {
    --size: 168px;
    --height: var(--size);
    --width: var(--size);
    --radius: 50%;
    --glass-border: light-dark(rgba(255,255,255,0.28), rgba(255,255,255,0.06));
    --glass-thickness: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--width);
    height: var(--height);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px var(--glass-thickness) rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
  }
  .round-glass::after {
    content: '';
    position: absolute;
    top: var(--glass-thickness);
    left: var(--glass-thickness);
    width: calc(100% - (var(--glass-thickness) * 2));
    height: calc(100% - (var(--glass-thickness) * 2));
    border-radius: var(--radius);
    overflow: hidden;
    backdrop-filter: blur(2px) saturate(180%);
    -webkit-backdrop-filter: blur(2px) saturate(180%);
    transition: transform 0.2s ease-in-out, box-shadow 0.4s ease-in-out, background 0.2s ease-in-out;
    z-index: -1;
  }
  .round-glass::before {
    background: conic-gradient( from 0deg, rgba(255, 255, 255, 0.4) 0deg, rgba(0, 0, 0, 0.4) 45deg, rgba(255, 255, 255, 0.4) 135deg, #ffffff66 145deg,#b3acbcff 160deg, #bbafbeff 162deg, #d2b6c2ff 170deg, #dfc2c5ff 175deg, #dfccc6ff 180deg, #d5dfcdff 185deg, #d5dfcdff 195deg, #b6ced1ff 200deg, #ffffff66 215deg, rgba(0, 0, 0, 0.4) 225deg, rgba(255, 255, 255, 0.4) 305deg );
    mask: radial-gradient( circle, transparent 0 calc((var(--size) / 2) - var(--glass-thickness)), #000 calc(var(--size) / 2), transparent calc(var(--size) / 2) 100% );
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    pointer-events: none;
  }
  @media (prefers-color-scheme: dark) {
    .round-glass::after {
      background: radial-gradient(100% 100% at 90% 90%,#fffa 0%,#fff6 20%,#0000 50%,#0002 80%,#0000 100%),radial-gradient(300% 200% at 150% 150%,#0000 0%,#0000 20%,#0000 70%,#fff2 70%, #fff1 100%);
    }
  }
  @media (prefers-color-scheme: light) {
    .round-glass::after {
      background: radial-gradient(100% 100% at 90% 90%,#ffff 0%,#fffd 20%,#fff0 50%,#fff2 80%,transparent 100%), radial-gradient(300% 200% at 150% 150%,#0000 0%,#0000 20%,#0000 70%,#fff6 70%, #fff5 100%), radial-gradient(52% 52% at 52% 52%,transparent 0%, var(--glass-bg) 80%, #fff3 90%, #fff3 100%);
    }
  }
  .round-glass:hover::after {
    --glass-bg: var(--glass-highlight-op-01);
    box-shadow: inset 0 -6px 10px var(--glass-thickness) var(--glass-highlight-op-06),0 0px 0px var(--glass-thickness) var(--glass-highlight-op-06);
  }
}
@layer components {
  .hud-display {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--surface-text1-light);
    background: var(--secondary-50-op-08);
    border: 1px solid var(--surface-text1);
    border-radius: 9999px;
    padding: var(--space-1) var(--space-2);
    line-height: 1.6;
    text-transform: uppercase;
  }
  .hud-display.surface-dark {
    color: var(--secondary-200);
    background: var(--gray-500-op-06);
    border-color: var(--secondary-400-op-03);
  }
  .hud-display .hud-label {
    color: var(--surface-text-muted-light);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .hud-display.surface-dark .hud-label {
    color: var(--secondary-300-op-06);
  }
  .hud-display .hud-value {
    font-variant-numeric: tabular-nums;
    min-width: 3.5em;
    display: inline-block;
    text-align: right;
  }
  .hud-display .hud-separator {
    border-top: 1px solid var(--gray-100-op-02);
    margin: var(--space-0) 0;
  }
  .hud-display.surface-dark .hud-separator {
    border-color: var(--secondary-400-op-02);
  }
}
@layer components {
  :root, :host {
    --text-accent: light-dark(var(--primary-600), var(--primary-200));
    --text-accent-2: var(--secondary-600);
    --text3: var(--gray-500);
    --weight-small: 400;
    --weight-overline: 500;
  }
  .text-primary {
    color: var(--text1);
  }
  .text-secondary {
    color: var(--text2);
  }
  .text-tertiary {
    color: var(--text3);
  }
  .text-muted {
    color: var(--text-muted);
  }
  .text-accent {
    color: var(--text-accent);
  }
  .text-accent-2 {
    color: var(--text-accent-2);
  }
  .accent-2 {
    --text-accent: var(--text-accent-2);
  }
  .menu-text {
    color: var(--surface-menu-text);
  }
  .menu-text:hover {
    color: var(--surface-menu-text-hover);
  }
  .menu-text.selected, .menu-text[aria-selected="true"] {
    color: var(--surface-menu-text-selected);
  }
  .link-text, a {
    color: var(--surface-link-text);
    text-decoration: none;
  }
  .link-text:hover, a:hover {
    color: var(--surface-link-text-hover);
    text-decoration: underline;
  }
  .link-text.selected, .link-text[aria-selected="true"], a[aria-current] {
    color: var(--surface-link-text-selected);
  }
  strong, b {
    font-weight: 700;
  }
  em, i {
    font-style: italic;
  }
  h1.section-hero, .section-hero.role-heading-title {
    font-family: var(--font-sans);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text1);
    margin: 0 0 0.4em;
  }
  h1, .section-h1.role-heading-title {
    font-family: var(--font-sans);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--text1);
    margin: 0 0 0.4em;
  }
  h2, .section-h2.role-heading-title {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text1);
    margin: 0 0 0.4em;
  }
  h3, .section-h3.role-heading-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--text2);
    margin: 0 0 0.4em;
  }
  h4, .section-h4.role-heading-title {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5;
    color: var(--text2);
    margin: 0 0 0.4em;
  }
  .role-page-title {
    font-family: var(--font-sans);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.05;
    color: var(--text1);
    margin: 0;
  }
  .role-heading-title.heading-serif, h1.heading-serif, h2.heading-serif, h3.heading-serif, h4.heading-serif {
    font-family: var(--font-sans);
  }
  .section-h1.subheading {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--text2);
    margin: -0.5rem 0 2rem;
  }
  .section-h2.subheading {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--text2);
    margin: -0.5rem 0 1.5rem;
  }
  .section-h3.subheading, .section-h4.subheading {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
    color: var(--text2);
  }
  .section-h3.subheading {
    margin: -0.375rem 0 1rem;
  }
  .section-h4.subheading {
    margin: -0.25rem 0 0.75rem;
  }
  .role-body {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text1);
  }
  .role-lede, .role-summary, .summary {
    font-family: var(--font-sans);
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text2);
    text-wrap: pretty;
  }
  .role-tool-tip-heading {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text1);
  }
  .role-tool-tip-text {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text1);
  }
  .role-callout {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text1);
    padding: 1rem;
    background-color: var(--surface2);
    border-left: 4px solid var(--text-accent);
  }
  code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    color: var(--text1);
    background-color: var(--surface2);
    padding: 0.1em 0.4em;
    border-radius: 4px;
  }
  pre {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text1);
    background-color: var(--surface2);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
  }
  pre code {
    background: none;
    padding: 0;
    border-radius: 0;
  }
  blockquote {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--text1);
    margin: 0;
    text-wrap: pretty;
  }
  blockquote p {
    margin: 0;
  }
  blockquote p::before {
    content: "\201C";
  }
  blockquote p::after {
    content: "\201D";
  }
  blockquote strong, blockquote b {
    font-family: var(--font-sans);
    font-weight: 700;
  }
  blockquote cite {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text2);
  }
  blockquote cite::before {
    content: "\2014\00a0";
    color: var(--text-accent);
  }
  blockquote.feature {
    position: relative;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    padding-left: 1.4rem;
  }
  blockquote.feature p::before {
    content: none;
  }
  blockquote.feature p::after {
    color: var(--text-accent);
  }
  blockquote.feature::before {
    content: "\201C";
    position: absolute;
    left: -0.05rem;
    top: -0.12em;
    font-size: 2.4em;
    line-height: 1;
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--text-accent);
  }
  blockquote.feature cite {
    margin-top: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  q::before {
    content: open-quote;
  }
  q::after {
    content: close-quote;
  }
  .role-row-title {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  .role-row-title-sm {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.4;
  }
  .role-button {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
  }
  .role-button-sm {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
  }
  .role-menu {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.4;
  }
  .role-menu-compact {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
  }
  .role-normal {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.4;
  }
  .role-field-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: var(--weight-overline);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text2);
  }
  .role-field-label[data-required]::after, .role-field-label.required::after {
    content: "\00a0*";
    color: var(--text-accent);
  }
  .role-field-label .optional {
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text3);
  }
  .role-field-value {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text1);
  }
  .role-field-value::placeholder {
    color: var(--text3);
    font-weight: 400;
    opacity: 1;
  }
  .role-field-value.is-prose {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.55;
  }
  .role-field-hint {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.5;
    color: var(--text3);
  }
  .role-field-hint.is-prose {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    letter-spacing: 0;
    line-height: 1.55;
    color: var(--text2);
  }
  .role-field-error {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.45;
    color: var(--color-error, #BC4040);
  }
  .tabular {
    font-variant-numeric: tabular-nums;
  }
  .role-metric {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    color: var(--text1);
  }
  .role-meta {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: var(--weight-small);
    letter-spacing: 0.004em;
    line-height: 1.55;
    color: var(--text2);
  }
  .role-caption, figcaption {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: var(--weight-small);
    letter-spacing: 0.012em;
    line-height: 1.5;
    color: var(--text2);
  }
  .role-overline {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: var(--weight-overline);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--text2);
  }
  .role-legal, small {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: var(--weight-small);
    letter-spacing: 0.01em;
    line-height: 1.5;
    color: var(--text2);
  }
  .mono-sm {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text1);
  }
  .mono-xs {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text3);
  }
  .mono-2xs {
    font-family: var(--font-mono);
    font-size: 0.594rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--text2);
  }
  .role-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--text3);
  }
  .role-badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
  }
  .role-display {
    font-family: var(--font-sans);
    font-size: clamp(2.25rem, 7vw, 5.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.0;
    color: var(--text1);
    text-wrap: balance;
    margin: 0;
  }
  .role-stat {
    font-family: var(--font-sans);
    font-size: clamp(2.25rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text1);
    font-variant-numeric: tabular-nums;
  }
  .role-stat .unit {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text3);
  }
  .role-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .role-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
  }
  .role-eyebrow.no-rule::before {
    display: none;
  }
  .role-eyebrow.accent {
    color: var(--text-accent);
  }
  .role-subhead {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.8vw, 1.375rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--text2);
    text-wrap: pretty;
    margin: 0;
  }
  .role-answer-q {
    font-family: var(--font-sans);
    font-size: clamp(1.25rem, 2.6vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text1);
    position: relative;
    padding-left: 1.25rem;
    margin: 0;
  }
  .role-answer-q::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 3px;
    border-radius: 3px;
    background: var(--text-accent);
  }
  .role-answer-a {
    font-family: var(--font-sans);
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text2);
  }
  .role-answer-cite {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text3);
  }
  mark {
    background-color: var(--text-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-accent) 22%, transparent);
    }
    color: inherit;
    padding: 0 0.15em;
    border-radius: 3px;
  }
  s, del {
    text-decoration: line-through;
  }
  u, ins {
    text-decoration: underline;
  }
  ins {
    text-decoration-style: solid;
  }
  .highlight-none {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
  }
  .highlight-strong {
    font-weight: 700;
  }
  .highlight-italic {
    font-style: italic;
  }
  .highlight-underline {
    text-decoration: underline;
  }
  .highlight-overline {
    text-decoration: overline;
  }
  .highlight-strikethrough {
    text-decoration: line-through;
  }
  .font-sans-serif {
    font-family: var(--font-sans);
  }
  .font-monospace {
    font-family: var(--font-mono);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .font-cursive {
    font-family: var(--font-sans);
  }
  .icon-none {
    display: none;
  }
  .icon-xtrasmall {
    width: 16px;
    height: 16px;
  }
  .icon-small {
    width: 24px;
    height: 24px;
  }
  .icon-medium {
    width: 40px;
    height: 40px;
  }
  .icon-large {
    width: 64px;
    height: 64px;
  }
  .icon-xtralarge {
    width: 104px;
    height: 104px;
  }
  .label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .label-text {
    display: inline-block;
  }
  .label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  @media (max-width: 640px), (max-height: 480px) {
    .role-page-title {
      font-size: clamp(1.5rem, 6vw, 2.5rem);
      line-height: 1.12;
    }
    h1.section-hero, .section-hero.role-heading-title {
      font-size: clamp(1.75rem, 7vw, 3rem);
      line-height: 1.12;
    }
    h1, .section-h1.role-heading-title {
      font-size: clamp(1.5rem, 6vw, 2.5rem);
      line-height: 1.15;
    }
    h2, .section-h2.role-heading-title {
      font-size: clamp(1.25rem, 5vw, 2rem);
    }
    h3, .section-h3.role-heading-title {
      font-size: clamp(1.0625rem, 4.2vw, 1.5rem);
    }
    h4, .section-h4.role-heading-title {
      font-size: 1.125rem;
    }
    .section-h1.subheading {
      font-size: clamp(.9375rem, 3.4vw, 1.25rem);
      line-height: 1.5;
    }
    .section-h2.subheading {
      font-size: clamp(.9375rem, 3.2vw, 1.125rem);
      line-height: 1.55;
    }
    .section-h3.subheading, .section-h4.subheading {
      font-size: clamp(.9375rem, 3.2vw, 1rem);
      line-height: 1.55;
    }
    .role-lede, .role-summary, .summary, .role-answer-a, blockquote {
      font-size: 1rem;
      line-height: 1.55;
    }
    blockquote.feature {
      font-size: 1.25rem;
    }
    .role-body {
      font-size: 1rem;
    }
    .role-callout {
      padding: .75rem;
    }
    .role-field-value, .role-field-value.is-prose {
      font-size: 1rem;
    }
    .role-row-title {
      font-size: 1rem;
    }
    code, kbd, samp, pre {
      font-size: .8125rem;
    }
    pre {
      padding: .75rem .875rem;
    }
  }
}
:root {
  --dim-strategy-100: #E1EFDC;
  --dim-strategy-300: #81CF65;
  --dim-strategy-500: #59A53B;
  --dim-strategy-700: #2B7700;
  --dim-strategy-900: #0E2600;
  --dim-human-100: #D1EFEE;
  --dim-human-300: #00D6CD;
  --dim-human-500: #00A8A1;
  --dim-human-700: #007671;
  --dim-human-900: #002624;
  --dim-business-100: #F6E7D1;
  --dim-business-300: #FBA02D;
  --dim-business-500: #CE7800;
  --dim-business-700: #925100;
  --dim-business-900: #2F1A00;
  --dim-governance-100: #ECEBE9;
  --dim-governance-300: #BBB8A9;
  --dim-governance-500: #938F82;
  --dim-governance-700: #666357;
  --dim-governance-900: #21201C;
  --dim-information-100: #EFEBD1;
  --dim-information-300: #D0B80E;
  --dim-information-500: #A68F00;
  --dim-information-700: #746300;
  --dim-information-900: #252000;
  --dim-application-100: #D1EDFA;
  --dim-application-300: #28C6FF;
  --dim-application-500: #009CE1;
  --dim-application-700: #006CA2;
  --dim-application-900: #002334;
  --dim-technology-100: #E5ECF2;
  --dim-technology-300: #96BBE3;
  --dim-technology-500: #6E93B9;
  --dim-technology-700: #43668A;
  --dim-technology-900: #15212C;
  --dim-physical-100: #DAE1FC;
  --dim-physical-300: #8FB4FF;
  --dim-physical-500: #345BEE;
  --dim-physical-700: #385BBD;
  --dim-physical-900: #121D3C;
  --dim-external-100: #F9E2E9;
  --dim-external-300: #FF88AA;
  --dim-external-500: #DC5F82;
  --dim-external-700: #A82E57;
  --dim-external-900: #360F1C;
  --dim-ai-100: #EAE8FB;
  --dim-ai-300: #B0A9FF;
  --dim-ai-500: #897DEB;
  --dim-ai-700: #5F4FB8;
  --dim-ai-900: #1E193B;
}
.dim-strategy {
  --dim-100: var(--dim-strategy-100);
  --dim-300: var(--dim-strategy-300);
  --dim-500: var(--dim-strategy-500);
  --dim-700: var(--dim-strategy-700);
  --dim-900: var(--dim-strategy-900);
  --dim-icon-url: url('/images/icons/strategy-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-human {
  --dim-100: var(--dim-human-100);
  --dim-300: var(--dim-human-300);
  --dim-500: var(--dim-human-500);
  --dim-700: var(--dim-human-700);
  --dim-900: var(--dim-human-900);
  --dim-icon-url: url('/images/icons/human-resource-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-business {
  --dim-100: var(--dim-business-100);
  --dim-300: var(--dim-business-300);
  --dim-500: var(--dim-business-500);
  --dim-700: var(--dim-business-700);
  --dim-900: var(--dim-business-900);
  --dim-icon-url: url('/images/icons/business-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-governance {
  --dim-100: var(--dim-governance-100);
  --dim-300: var(--dim-governance-300);
  --dim-500: var(--dim-governance-500);
  --dim-700: var(--dim-governance-700);
  --dim-900: var(--dim-governance-900);
  --dim-icon-url: url('/images/icons/governance-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-information {
  --dim-100: var(--dim-information-100);
  --dim-300: var(--dim-information-300);
  --dim-500: var(--dim-information-500);
  --dim-700: var(--dim-information-700);
  --dim-900: var(--dim-information-900);
  --dim-icon-url: url('/images/icons/data-knowledge-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-application {
  --dim-100: var(--dim-application-100);
  --dim-300: var(--dim-application-300);
  --dim-500: var(--dim-application-500);
  --dim-700: var(--dim-application-700);
  --dim-900: var(--dim-application-900);
  --dim-icon-url: url('/images/icons/application-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-technology {
  --dim-100: var(--dim-technology-100);
  --dim-300: var(--dim-technology-300);
  --dim-500: var(--dim-technology-500);
  --dim-700: var(--dim-technology-700);
  --dim-900: var(--dim-technology-900);
  --dim-icon-url: url('/images/icons/technology-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-physical {
  --dim-100: var(--dim-physical-100);
  --dim-300: var(--dim-physical-300);
  --dim-500: var(--dim-physical-500);
  --dim-700: var(--dim-physical-700);
  --dim-900: var(--dim-physical-900);
  --dim-icon-url: url('/images/icons/physical-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-external {
  --dim-100: var(--dim-external-100);
  --dim-300: var(--dim-external-300);
  --dim-500: var(--dim-external-500);
  --dim-700: var(--dim-external-700);
  --dim-900: var(--dim-external-900);
  --dim-icon-url: url('/images/icons/external-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-ai {
  --dim-100: var(--dim-ai-100);
  --dim-300: var(--dim-ai-300);
  --dim-500: var(--dim-ai-500);
  --dim-700: var(--dim-ai-700);
  --dim-900: var(--dim-ai-900);
  --dim-icon-url: url('/images/icons/ai-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-neutral {
  --dim-100: var(--gray-100);
  --dim-300: var(--gray-300);
  --dim-500: var(--gray-500);
  --dim-700: var(--gray-700);
  --dim-900: var(--gray-900);
  --dim-glass: #000;
  --dim-glass-reflex: var(--gray-900);
}
.dim-func-actor {
  --dim-func-icon-url: url('/images/icons/actor-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-environment {
  --dim-func-icon-url: url('/images/icons/environment-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-skill {
  --dim-func-icon-url: url('/images/icons/skill-feature-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-task {
  --dim-func-icon-url: url('/images/icons/task-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-resource {
  --dim-func-icon-url: url('/images/icons/resource-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-service {
  --dim-func-icon-url: url('/images/icons/service-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-information {
  --dim-func-icon-url: url('/images/icons/information-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-event {
  --dim-func-icon-url: url('/images/icons/event-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-knowledge {
  --dim-func-icon-url: url('/images/icons/knowledge-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-group {
  --dim-func-icon-url: url('/images/icons/group-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-constraint {
  --dim-func-icon-url: url('/images/icons/constraint-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
.dim-func-motivation {
  --dim-func-icon-url: url('/images/icons/motivation-icon.svg');
  --func-icon-url: var(--dim-func-icon-url);
}
:root {
  --cat-blocker-100: #FEE2E2;
  --cat-blocker-300: #FCA5A5;
  --cat-blocker-500: #EF4444;
  --cat-blocker-700: #B91C1C;
  --cat-blocker-900: #450A0A;
}
.dim-strategy.cat-driver {
  --icon-url: url('/images/icons/driver-icon.svg');
}
.dim-strategy.cat-intention {
  --icon-url: url('/images/icons/intention-icon.svg');
}
.dim-strategy.cat-measurement {
  --icon-url: url('/images/icons/measurement-icon.svg');
}
.dim-strategy.cat-result-outcome {
  --icon-url: url('/images/icons/result-outcome-icon.svg');
}
.dim-strategy.cat-blocker {
  --dim-100: var(--cat-blocker-100);
  --dim-300: var(--cat-blocker-300);
  --dim-500: var(--cat-blocker-500);
  --dim-700: var(--cat-blocker-700);
  --dim-900: var(--cat-blocker-900);
  --icon-url: url('/images/icons/blocker-icon.svg');
}
.dim-human.cat-individual-contributor {
  --icon-url: url('/images/icons/person-icon.svg');
}
.dim-human.cat-collective-contributor {
  --icon-url: url('/images/icons/team-icon.svg');
}
.dim-human.cat-qualifications-credentials {
  --icon-url: url('/images/icons/badge-icon.svg');
}
.dim-business.cat-business-capability {
  --icon-url: url('/images/icons/business-capability-icon.svg');
}
.dim-business.cat-actor-skill {
  --icon-url: url('/images/icons/actor-skill-icon.svg');
}
.dim-business.cat-business-process {
  --icon-url: url('/images/icons/business-process-icon.svg');
}
.dim-business.cat-business-service {
  --icon-url: url('/images/icons/business-service-icon.svg');
}
.dim-business.cat-product-offering {
  --icon-url: url('/images/icons/product-offering-icon.svg');
}
.dim-business.cat-project-initiative {
  --icon-url: url('/images/icons/project-initiative-icon.svg');
}
.dim-business.cat-business-asset {
  --icon-url: url('/images/icons/business-asset-icon.svg');
}
.dim-business.cat-financial-asset {
  --icon-url: url('/images/icons/financial-icon.svg');
}
.dim-business.cat-business-segments {
  --icon-url: url('/images/icons/business-segments-icon.svg');
}
.dim-business.cat-commercial-service-interactions {
  --icon-url: url('/images/icons/interaction-icon.svg');
}
.dim-governance.cat-governance-framework-policy {
  --icon-url: url('/images/icons/policy-icon.svg');
}
.dim-governance.cat-regulation-standard-guidance {
  --icon-url: url('/images/icons/standard-icon.svg');
}
.dim-governance.cat-control-activity {
  --icon-url: url('/images/icons/control-icon.svg');
}
.dim-governance.cat-risk-issue {
  --icon-url: url('/images/icons/risk-icon.svg');
}
.dim-governance.cat-compliance-assessment {
  --icon-url: url('/images/icons/compliance-assessment-icon.svg');
}
.dim-governance.cat-privacy-data-protection {
  --icon-url: url('/images/icons/data-protection-icon.svg');
}
.dim-information.cat-semantic-layer {
  --icon-url: url('/images/icons/semantic-icon.svg');
}
.dim-information.cat-reference-data {
  --icon-url: url('/images/icons/reference-data-icon.svg');
}
.dim-information.cat-graph-data {
  --icon-url: url('/images/icons/graph-data-icon.svg');
}
.dim-information.cat-unstructured-data {
  --icon-url: url('/images/icons/unstructured-data-icon.svg');
}
.dim-information.cat-content-knowledge {
  --icon-url: url('/images/icons/content-knowledge-icon.svg');
}
.dim-information.cat-data-mesh {
  --icon-url: url('/images/icons/data-mesh-icon.svg');
}
.dim-information.cat-data-collection {
  --icon-url: url('/images/icons/data-collection-icon.svg');
}
.dim-information.cat-data-structure {
  --icon-url: url('/images/icons/data-structure-icon.svg');
}
.dim-information.cat-data-element {
  --icon-url: url('/images/icons/data-element-icon.svg');
}
.dim-information.cat-data-mapping {
  --icon-url: url('/images/icons/data-mapping-icon.svg');
}
.dim-information.cat-data-query {
  --icon-url: url('/images/icons/data-query-icon.svg');
}
.dim-information.cat-data-optimisation-mechanisms {
  --icon-url: url('/images/icons/data-optimization-mechanisms-icon.svg');
}
.dim-information.cat-data-report {
  --icon-url: url('/images/icons/data-report-icon.svg');
}
.dim-information.cat-data-report-component {
  --icon-url: url('/images/icons/report-component-icon.svg');
}
.dim-information.cat-data-workspace {
  --icon-url: url('/images/icons/data-workspace-icon.svg');
}
.dim-application.cat-business-application {
  --icon-url: url('/images/icons/business-application-icon.svg');
}
.dim-application.cat-application-component {
  --icon-url: url('/images/icons/application-component-icon.svg');
}
.dim-application.cat-application-interface {
  --icon-url: url('/images/icons/application-interface-icon.svg');
}
.dim-application.cat-automation-flow {
  --icon-url: url('/images/icons/automation-flow-icon.svg');
}
.dim-technology.cat-compute-hosting {
  --icon-url: url('/images/icons/servers-icon.svg');
}
.dim-technology.cat-platform-service {
  --icon-url: url('/images/icons/platform-service-icon.svg');
}
.dim-technology.cat-network-security {
  --icon-url: url('/images/icons/network-security-icon.svg');
}
.dim-technology.cat-database-storage {
  --icon-url: url('/images/icons/database-icon.svg');
}
.dim-technology.cat-database-management-systems {
  --icon-url: url('/images/icons/database-management-system-icon.svg');
}
.dim-technology.cat-in-memory-cache-stores {
  --icon-url: url('/images/icons/cachestore-icon.svg');
}
.dim-technology.cat-archival-backup-storage {
  --icon-url: url('/images/icons/backup-icon.svg');
}
.dim-physical.cat-equipment-machinery {
  --icon-url: url('/images/icons/machine-icon.svg');
}
.dim-physical.cat-facilities-environments {
  --icon-url: url('/images/icons/facilities-icon.svg');
}
.dim-physical.cat-vehicles-fleet {
  --icon-url: url('/images/icons/vehicle-icon.svg');
}
.dim-physical.cat-inventory-material {
  --icon-url: url('/images/icons/inventory-icon.svg');
}
.dim-external.cat-customer {
  --icon-url: url('/images/icons/customer-icon.svg');
}
.dim-external.cat-partner-supplier {
  --icon-url: url('/images/icons/supplier-icon.svg');
}
.dim-external.cat-authority-regulator {
  --icon-url: url('/images/icons/authority-icon.svg');
}
.dim-external.cat-other-stakeholder {
  --icon-url: url('/images/icons/stakeholder-icon.svg');
}
.dim-ai.cat-ai-foundation-models {
  --icon-url: url('/images/icons/ai-model-icon.svg');
}
.dim-ai.cat-ai-applications-agents {
  --icon-url: url('/images/icons/ai-application-icon.svg');
}
.dim-ai.cat-ai-interaction-orchestration {
  --icon-url: url('/images/icons/ai-interaction-icon.svg');
}
.dim-ai.cat-ai-evaluation-observability {
  --icon-url: url('/images/icons/ai-observability-icon.svg');
}
.dim-ai.cat-ai-governance-safety {
  --icon-url: url('/images/icons/ai-governance-icon.svg');
}
.dim-func-actor.cat-func-people {
  --func-icon-url: url('/images/icons/people-icon.svg');
}
.dim-func-actor.cat-func-engine {
  --func-icon-url: url('/images/icons/engine-icon.svg');
}
.dim-func-actor.cat-func-organization {
  --func-icon-url: url('/images/icons/organization-icon.svg');
}
.dim-func-environment.cat-func-physical-environment {
  --func-icon-url: url('/images/icons/physical-environment-icon.svg');
}
.dim-func-environment.cat-func-virtual-environment {
  --func-icon-url: url('/images/icons/virtual-environment-icon.svg');
}
.dim-func-skill.cat-func-skill {
  --func-icon-url: url('/images/icons/skill.svg');
}
.dim-func-skill.cat-func-feature {
  --func-icon-url: url('/images/icons/feature-icon.svg');
}
.dim-func-task.cat-func-simple-task {
  --func-icon-url: url('/images/icons/simple-task-icon.svg');
}
.dim-func-task.cat-func-process {
  --func-icon-url: url('/images/icons/process-task-icon.svg');
}
.dim-func-resource.cat-func-physical-resource {
  --func-icon-url: url('/images/icons/physical-resource-icon.svg');
}
.dim-func-resource.cat-func-virtual-resource {
  --func-icon-url: url('/images/icons/virtual-resource-icon.svg');
}
.dim-func-service.cat-func-physical-service {
  --func-icon-url: url('/images/icons/physical-service-icon.svg');
}
.dim-func-service.cat-func-virtual-service {
  --func-icon-url: url('/images/icons/virtual-service-icon.svg');
}
.dim-func-information.cat-func-concept {
  --func-icon-url: url('/images/icons/concept-icon.svg');
}
.dim-func-information.cat-func-data {
  --func-icon-url: url('/images/icons/data-icon.svg');
}
.dim-func-information.cat-func-reference {
  --func-icon-url: url('/images/icons/reference-data-icon.svg');
}
.dim-func-event.cat-func-internal-event {
  --func-icon-url: url('/images/icons/internal-event-icon.svg');
}
.dim-func-event.cat-func-external-event {
  --func-icon-url: url('/images/icons/external-event-icon.svg');
}
.dim-func-knowledge.cat-func-explicit-knowledge {
  --func-icon-url: url('/images/icons/explicit-knowledge-icon.svg');
}
.dim-func-knowledge.cat-func-tacit-knowledge {
  --func-icon-url: url('/images/icons/tacit-knowledge-icon.svg');
}
.dim-func-group.cat-func-conceptual-group {
  --func-icon-url: url('/images/icons/conceptual-group-icon.svg');
}
.dim-func-group.cat-func-concrete-group {
  --func-icon-url: url('/images/icons/concrete-group-icon.svg');
}
.dim-func-constraint.cat-func-regulatory-restriction {
  --func-icon-url: url('/images/icons/regulatory-restriction-icon.svg');
}
.dim-func-constraint.cat-func-technical-limitation {
  --func-icon-url: url('/images/icons/technical-limitation-icon.svg');
}
.dim-func-constraint.cat-func-financial-limitation {
  --func-icon-url: url('/images/icons/financial-limitation-icon.svg');
}
.dim-func-constraint.cat-func-contractual-restriction {
  --func-icon-url: url('/images/icons/contractual-restriction-icon.svg');
}
.dim-func-motivation.cat-func-goal {
  --func-icon-url: url('/images/icons/goal-icon.svg');
}
.dim-func-motivation.cat-func-principle {
  --func-icon-url: url('/images/icons/principles-icon.svg');
}
:root {
  --map-layer-focal: var(--primary-200);
  --map-layer-1: #C77DFF;
  --map-layer-2: #3FC7BE;
  --map-layer-3: #FFA552;
  --map-layer-4: #7DA7FF;
  --map-layer-5: #FF8FB1;
  --map-layer-6: #A6D65B;
  --map-draft: #FFFFFF;
  --map-edge: #8A94A6;
}
.surface-light {
  --map-layer-focal: var(--primary-700);
  --map-layer-1: #8E3FD4;
  --map-layer-2: #1D8B84;
  --map-layer-3: #C86A12;
  --map-layer-4: #3F6BC7;
  --map-layer-5: #C94B73;
  --map-layer-6: #5E9219;
  --map-draft: #101418;
  --map-edge: #5B6472;
}
@layer base {
  body ::deep {
    background-color: var(--surface-bg);
    color: var(--surface-text1);
    --text1: var(--surface-text1);
    --text2: var(--surface-text2);
    --text3: var(--surface-text3);
    --text-muted: var(--surface-text-muted);
    --text-accent: var(--surface-text-accent);
  }
  .surface-paper {
    background-color: var(--surface-paper);
    color: var(--surface-text1);
    --text1: var(--surface-text1);
    --text2: var(--surface-text2);
    --text3: var(--surface-text3);
    --text-muted: var(--surface-text-muted);
    --text-accent: var(--surface-text-accent);
  }
  .surface-paper:hover {
    background-color: var(--surface-paper-hover);
  }
  .surface-paper.selected, .surface-paper[aria-selected="true"] {
    background-color: var(--surface-paper-selected);
  }
  .surface-dark {
    color-scheme: dark;
    color: var(--surface-text1-dark);
    --text1: var(--surface-text1-dark);
    --text2: var(--surface-text2-dark);
    --text-muted: var(--surface-text-muted-dark);
    --text-accent: var(--surface-text-accent-dark);
  }
  .surface-light {
    color-scheme: light;
    color: var(--surface-text1-light);
    --text1: var(--surface-text1-light);
    --text2: var(--surface-text2-light);
    --text-muted: var(--surface-text-muted-light);
    --text-accent: var(--surface-text-accent-light);
  }
  .surface-dark:hover {
    color: var(--surface-text1-dark-hover);
    --text1: var(--surface-text1-dark-hover);
    --text2: var(--surface-text2-dark-hover);
    --text-muted: var(--surface-text-muted-dark-hover);
    --text-accent: var(--surface-text-accent-dark-hover);
  }
  .surface-light:hover {
    color: var(--surface-text1-light-hover);
    --text1: var(--surface-text1-light-hover);
    --text2: var(--surface-text2-light-hover);
    --text-muted: var(--surface-text-muted-light-hover);
    --text-accent: var(--surface-text-accent-light-hover);
  }
  .surface-light.selected, .surface-light[aria-selected="true"] {
    color: var(--surface-text1-light-selected);
    --text1: var(--surface-text1-light-selected);
    --text2: var(--surface-text2-light-selected);
    --text-muted: var(--surface-text-muted-light-selected);
    --text-accent: var(--surface-text-accent-light-selected);
  }
  .surface-dark.selected, .surface-dark[aria-selected="true"] {
    color: var(--surface-text1-dark-selected);
    --text1: var(--surface-text1-dark-selected);
    --text2: var(--surface-text2-dark-selected);
    --text-muted: var(--surface-text-muted-dark-selected);
    --text-accent: var(--surface-text-accent-dark-selected);
  }
  .surface-default:hover {
    color: var(--surface-text1-hover);
    --text1: var(--surface-text1-hover);
    --text2: var(--surface-text2-hover);
    --text-muted: var(--surface-text-muted-hover);
    --text-accent: var(--surface-text-accent-hover);
  }
  .surface-default.selected, .surface-default[aria-selected="true"] {
    color: var(--surface-text1-selected);
    --text1: var(--surface-text1-selected);
    --text2: var(--surface-text2-selected);
    --text-muted: var(--surface-text-muted-selected);
    --text-accent: var(--surface-text-accent-selected);
  }
  .surface-inverse {
    color: var(--surface-inverse-text1);
    --text1: var(--surface-inverse-text1);
    --text2: var(--surface-inverse-text2);
    --text-muted: var(--surface-inverse-text-muted);
    --text-accent: var(--surface-inverse-text-accent);
  }
  .surface-inverse:hover {
    color: var(--surface-inverse-text1-hover);
    --text1: var(--surface-inverse-text1-hover);
    --text2: var(--surface-inverse-text2-hover);
    --text-muted: var(--surface-inverse-text-muted-hover);
    --text-accent: var(--surface-inverse-text-accent-hover);
  }
  .surface-inverse.selected, .surface-inverse[aria-selected="true"] {
    background-color: var(--surface-inverse-bg-selected);
    color: var(--surface-inverse-text1-selected);
    --text1: var(--surface-inverse-text1-selected);
    --text2: var(--surface-inverse-text2-selected);
    --text-muted: var(--surface-inverse-text-muted-selected);
    --text-accent: var(--surface-inverse-text-accent-selected);
  }
  .surface-neutral {
    color: var(--surface-text1-neutral);
    --text1: var(--surface-text1-neutral);
    --text2: var(--surface-text2-neutral);
    --text-muted: var(--surface-text-muted-neutral);
    --text-accent: var(--surface-text-accent-neutral);
  }
  .surface-neutral:hover {
    color: var(--surface-text1-neutral-hover);
    --text1: var(--surface-text1-neutral-hover);
    --text2: var(--surface-text2-neutral-hover);
    --text-muted: var(--surface-text-muted-neutral-hover);
    --text-accent: var(--surface-text-accent-neutral-hover);
  }
  .surface-neutral.selected, .surface-neutral[aria-selected="true"] {
    color: var(--surface-text1-neutral-selected);
    --text1: var(--surface-text1-neutral-selected);
    --text2: var(--surface-text2-neutral-selected);
    --text-muted: var(--surface-text-muted-neutral-selected);
    --text-accent: var(--surface-text-accent-neutral-selected);
  }
}
@layer components {
  .ctn {
    --ctn-width: var(--ctn-size-5);
    --padding-inline: var(--space-5);
    width: var(--ctn-width);
    padding-inline: var(--padding-inline);
    padding-block: calc(var(--padding-inline) * 0.618);
    display: flex;
    flex-direction: column;
  }
  .ctn-0 {
    --ctn-width: var(--ctn-size-0);
    --padding-inline: var(--space-1);
  }
  .ctn-1 {
    --ctn-width: var(--ctn-size-1);
    --padding-inline: var(--space-1);
  }
  .ctn-2 {
    --ctn-width: var(--ctn-size-2);
    --padding-inline: var(--space-2);
  }
  .ctn-3 {
    --ctn-width: var(--ctn-size-3);
    --padding-inline: var(--space-3);
  }
  .ctn-4 {
    --ctn-width: var(--ctn-size-4);
    --padding-inline: var(--space-4);
  }
  .ctn-5 {
    --ctn-width: var(--ctn-size-5);
    --padding-inline: var(--space-5);
  }
  .ctn-6 {
    --ctn-width: var(--ctn-size-6);
    --padding-inline: var(--space-6);
  }
  .ctn-7 {
    --ctn-width: var(--ctn-size-7);
    --padding-inline: var(--space-7);
  }
  .ctn-8 {
    --ctn-width: var(--ctn-size-8);
    --padding-inline: var(--space-7);
  }
  .ctn-9 {
    --ctn-width: var(--ctn-size-9);
    --padding-inline: var(--space-7);
    padding-block: 0;
  }
  .ctn-10 {
    --ctn-width: var(--ctn-size-10);
    --padding-inline: var(--space-4);
  }
  .ctn.ctn-fluid {
    width: 100%;
    max-width: var(--ctn-width);
    margin-inline: auto;
  }
  .ctn.square {
    height: var(--ctn-width);
    padding: var(--padding-inline);
  }
  .ctn-align-left {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
  .ctn-align-center {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .ctn-align-right {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
  }
  .ctn-align-left .label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .ctn-align-center .label {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ctn-align-right .label {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
@layer components {
  .card {
    --card-base: var(--card-rung-3);
    --card-w-mult: var(--card-ratio-phi);
    --card-h-mult: 1;
    position: relative;
    box-sizing: border-box;
    width: var(--card-width, auto);
    min-height: var(--card-min-h, auto);
    padding: var(--card-pad);
    border-radius: var(--card-radius);
    --glass-highlight: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .card.surface-dark {
    background: rgba(12, 18, 26, 0.62);
    border: 1px solid rgba(255, 255, 255, .06);
  }
  .card.surface-light {
    background: #ffffff06;
    border: 1px solid rgba(0, 0, 0, .06);
  }
  .card:hover {
    border-color: color-mix(in srgb, #fbbf24ff 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-hover-dark) 35%, transparent);
    }
    box-shadow: 0 0 24px -4px color-mix(in srgb, #fbbf24ff 18%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 24px -4px color-mix(in srgb, var(--color-hover-dark) 18%, transparent);
    }
  }
  .card-shape-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .card.card-stroke {
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0;
    -webkit-clip-path: var(--card-clip, none);
    clip-path: var(--card-clip, none);
  }
  .card.card-stroke::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--card-frame-paint, light-dark(rgba(0, 0, 0, .12), rgba(255, 255, 255, .14)));
    -webkit-clip-path: var(--card-clip-border, polygon(0 0, 0 0));
    clip-path: var(--card-clip-border, polygon(0 0, 0 0));
  }
  .card-content {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--card-pad);
  }
  .card-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--text-accent, var(--surface-text-accent));
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .card-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-accent, var(--surface-text-accent));
    box-shadow: 0 0 8px var(--text-accent, var(--surface-text-accent));
  }
  .card-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text1, var(--surface-text1));
    margin: 0 0 6px;
  }
  .card-sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text2, var(--surface-text2));
    margin: 0;
  }
  .card-foot {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-muted, var(--surface-text-muted));
  }
  .cards {
    --card-radius: var(--radius-4);
    --card-pad: var(--space-4);
  }
  .cards--tight {
    --card-radius: var(--radius-3);
    --card-pad: var(--space-3);
  }
  .cards--cozy {
    --card-radius: var(--radius-4);
    --card-pad: var(--space-4);
  }
  .cards--roomy {
    --card-radius: var(--radius-4);
    --card-pad: 24px;
  }
  .cards--compact {
    --card-radius: var(--radius-4);
    --card-pad: var(--space-3);
  }
  .cards--compact .card-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.18;
    margin: 0 0 var(--space-1);
  }
  .cards--compact .card-sub {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: .02em;
    line-height: 1.4;
    color: var(--text3, var(--surface-text3));
  }
  .cards.is-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(0, max-content));
  }
  .cards.is-bento {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .cards > .card {
    display: flex;
    flex-direction: column;
    --card-width: calc(var(--card-base) * var(--card-w-mult));
    --card-min-h: calc(var(--card-base) * var(--card-h-mult));
  }
  .card--r1 {
    --card-base: var(--card-rung-1);
  }
  .card--r2 {
    --card-base: var(--card-rung-2);
  }
  .card--r3 {
    --card-base: var(--card-rung-3);
  }
  .card--r4 {
    --card-base: var(--card-rung-4);
  }
  .card--r5 {
    --card-base: var(--card-rung-5);
  }
  .card--square {
    --card-w-mult: 1;
    --card-h-mult: 1;
  }
  .card--phi {
    --card-w-mult: var(--card-ratio-phi);
    --card-h-mult: 1;
  }
  .card--phi2 {
    --card-w-mult: var(--card-ratio-phi2);
    --card-h-mult: 1;
  }
  .card--portrait-phi {
    --card-w-mult: 1;
    --card-h-mult: var(--card-ratio-phi);
  }
  .card--portrait-phi2 {
    --card-w-mult: 1;
    --card-h-mult: var(--card-ratio-phi2);
  }
  .card.card--prose {
    --card-width: fit-content;
    max-width: var(--card-measure);
    --card-min-h: 0;
  }
  .card.card--fill {
    --card-width: 100%;
    --card-min-h: 0;
  }
  .card.card--auto {
    --card-width: fit-content;
    --card-min-h: 0;
  }
  .cards--pad-tiered .card--r1 {
    --card-pad: var(--space-2);
  }
  .cards--pad-tiered .card--r2 {
    --card-pad: var(--space-3);
  }
  .cards--pad-tiered .card--r3 {
    --card-pad: var(--space-4);
  }
  .cards--pad-tiered .card--r4, .cards--pad-tiered .card--r5 {
    --card-pad: 24px;
  }
  .card.card--fixed {
    --card-min-h: 0;
    height: calc(var(--card-base) * var(--card-h-mult));
  }
  .card--flip {
    --card-w-mult: var(--card-ratio-phi);
    --card-h-mult: 1;
  }
  @media (min-width: 768px) {
    .card--flip {
      --card-w-mult: 1;
      --card-h-mult: var(--card-ratio-phi);
    }
  }
  .card-cq-context {
    container-type: inline-size;
  }
  .card--cq {
    --card-w-mult: var(--card-ratio-phi);
    --card-h-mult: 1;
  }
  @container (min-width: 360px) {
    .card--cq {
      --card-w-mult: 1;
      --card-h-mult: var(--card-ratio-phi);
    }
  }
  .card.card--fluid {
    --card-width: 100%;
    --card-min-h: 0;
    aspect-ratio: calc(var(--card-w-mult) / var(--card-h-mult));
  }
  .card-xs {
    --card-base: var(--card-rung-1);
    --card-w-mult: 1;
    --card-h-mult: 1;
  }
  .card-sm {
    --card-base: var(--card-rung-2);
    --card-w-mult: 1;
    --card-h-mult: 1;
  }
  .card-md {
    --card-base: var(--card-rung-2);
    --card-w-mult: var(--card-ratio-phi);
    --card-h-mult: 1;
  }
  .card-lg {
    --card-base: var(--card-rung-3);
    --card-w-mult: var(--card-ratio-phi);
    --card-h-mult: 1;
  }
  .card-lg-wd {
    --card-base: var(--card-rung-3);
    --card-w-mult: var(--card-ratio-phi2);
    --card-h-mult: 1;
  }
  .card-lg-sq {
    --card-base: var(--card-rung-4);
    --card-w-mult: 1;
    --card-h-mult: 1;
  }
  .card-xl {
    --card-base: var(--card-rung-4);
    --card-w-mult: var(--card-ratio-phi);
    --card-h-mult: 1;
  }
}
@layer components {
  .dim-card {
    --c-num: var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      --c-num: color-mix(in srgb, var(--dim-300) 78%, transparent);
    }
    --c-meta: light-dark(var(--dim-700), var(--dim-300));
    @supports (color: color-mix(in lab, red, red)) {
      --c-meta: light-dark(var(--dim-700), color-mix(in srgb, var(--dim-300) 82%, transparent));
    }
    --c-ink: var(--text1);
    --c-desc: var(--text2);
    --c-sub: var(--text3);
    --c-meta-strong: light-dark(var(--dim-700), var(--dim-300));
    @supports (color: color-mix(in lab, red, red)) {
      --c-meta-strong: light-dark(var(--dim-700), color-mix(in srgb, var(--dim-300) 96%, var(--text1)));
    }
    --c-kind: light-dark(var(--dim-700), var(--dim-300));
    @supports (color: color-mix(in lab, red, red)) {
      --c-kind: light-dark(var(--dim-700), color-mix(in srgb, var(--dim-300) 85%, var(--text1)));
    }
    --c-wm: 16%;
    --glass-reflex-color: light-dark(var(--dim-500), var(--dim-300));
    --glass-highlight: light-dark(#fff, rgba(255, 255, 255, .16));
    --glass-highlight-rim: light-dark(var(--dim-300), var(--dim-300));
    box-sizing: border-box;
  }
  .glass.dim-card {
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .45);
    transition: box-shadow .22s ease, transform .22s ease;
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    --radius-top-left: var(--radius-4);
    --radius-top-right: var(--radius-4);
    --radius-bottom-right: var(--radius-4);
    --radius-bottom-left: var(--radius-4);
  }
  .glass.dim-card {
    --glass-color: light-dark( var(--dim-300),
                                   var(--dim-900));
    @supports (color: color-mix(in lab, red, red)) {
      --glass-color: light-dark( color-mix(in srgb, var(--dim-300) 34%, rgba(255, 255, 255, .78)),
                                   color-mix(in srgb, var(--dim-900) 46%, transparent));
    }
  }
  .glass.dim-card {
    background: var(--glass-reflex-layer), linear-gradient(var(--glass-color), var(--glass-color));
    -webkit-clip-path: var(--card-clip, none);
    clip-path: var(--card-clip, none);
    border-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix( var(--dim-500) 50%, transparent 50%);
    }
  }
  .glass.dim-card::before {
    padding: 0;
    -webkit-mask: none;
    mask: none;
    -webkit-clip-path: var(--card-clip-border, polygon(0 0, 0 0));
    clip-path: var(--card-clip-border, polygon(0 0, 0 0));
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .glass.dim-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 0 1px var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--dim-500) 32%, transparent);
    }
  }
  .dim-card .dim-glyph {
    display: inline-flex;
    color: var(--dim-300);
  }
  .dim-card .dim-wm {
    position: absolute;
    right: -10px;
    bottom: -12px;
    width: var(--dim-wm-size);
    height: var(--dim-wm-size);
    background: var(--dim-500);
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
    opacity: var(--c-wm);
    pointer-events: none;
    z-index: 0;
  }
  .dim-card .dim-num {
    color: var(--c-num);
    letter-spacing: .05em;
  }
  .dim-card .dim-name {
    min-height: 2.36em;
    color: var(--surface-text1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dim-card .dim-meta {
    color: var(--c-meta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dim-tile {
    width: var(--dim-tile-size);
    height: var(--dim-tile-size);
    flex: none;
    border-radius: var(--dim-tile-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dim-500, var(--primary-200));
    color: var(--dim-900, var(--gray-900));
  }
  .dim-tile-mark::before {
    content: "";
    width: var(--dim-tile-glyph);
    height: var(--dim-tile-glyph);
    background: currentColor;
    -webkit-mask: var(--icon-url) center / contain no-repeat;
    mask: var(--icon-url) center / contain no-repeat;
  }
}
@layer components {
  .entity {
    position: relative;
    min-height: 0;
    width: max-content;
    max-width: var(--entity-max, 720px);
    --card-pad: var(--space-4);
    padding: var(--card-pad);
    --entity-radius-t: 22px;
    --entity-radius-b: 14px;
    border-radius: var(--entity-radius-t) var(--entity-radius-t) var(--entity-radius-b) var(--entity-radius-b);
    --card-radius: var(--entity-radius-t);
  }
  .entity.dim-card {
    border-radius: var(--entity-radius-t) var(--entity-radius-t) var(--entity-radius-b) var(--entity-radius-b);
  }
  .entity.is-selected {
    border-color: var(--dim-300);
    box-shadow: 0 0 0 2px var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--dim-300) 55%, transparent);
    }
  }
  .entity.dim-card {
    --glass-color: var(--dim-glass, var(--dim-900));
    --glass-reflex-color: var(--dim-glass-reflex, var(--dim-300));
    --glass-highlight: rgba(255, 255, 255, .16);
  }
  .entity.dim-neutral .dim-wm {
    display: none;
  }
  .entity-anchor {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .entity-anchor--left {
    left: 0;
    top: 50%;
  }
  .entity-anchor--right {
    right: 0;
    top: 50%;
  }
  .entity-anchor--top {
    top: 0;
    left: 50%;
  }
  .entity-anchor--bottom {
    bottom: 0;
    left: 50%;
  }
  .entity-port .entity-anchor--left {
    left: calc(-1 * var(--card-pad));
    top: 14px;
  }
  .entity-port .entity-anchor--right {
    right: calc(-1 * var(--card-pad));
    top: 14px;
  }
  .entity-self-relations {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
  }
  .entity-head {
    --c-ink: var(--text1);
    --c-desc: var(--text2);
    --c-sub: var(--text3);
    --c-meta: var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      --c-meta: color-mix(in srgb, var(--dim-300) 82%, transparent);
    }
    --c-meta-strong: var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      --c-meta-strong: color-mix(in srgb, var(--dim-300) 96%, var(--text1));
    }
    --c-kind: var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      --c-kind: color-mix(in srgb, var(--dim-300) 85%, var(--text1));
    }
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
  }
  .entity-typerow {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    margin-bottom: 10px;
  }
  .entity-typerow .entity-dim-glyph {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: 0 0 var(--icon-size-md);
    background: var(--dim-300);
    -webkit-mask: var(--icon-url) center/contain no-repeat;
    mask: var(--icon-url) center/contain no-repeat;
  }
  .entity-typerow .entity-title-glyph {
    align-self: flex-start;
    display: inline-flex;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: 0 0 var(--icon-size-md);
    color: var(--dim-300);
  }
  .entity-type {
    align-self: flex-start;
    padding-top: 4px;
    color: var(--c-meta);
    white-space: nowrap;
  }
  a.entity-type:hover {
    color: var(--dim-300);
  }
  .entity-id {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .entity-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--c-ink);
    text-decoration: none;
    display: block;
  }
  a.entity-title:hover {
    color: var(--dim-300);
  }
  .entity-head .state-tag {
    align-self: flex-start;
    flex: none;
  }
  .entity-body {
    position: relative;
    z-index: 1;
  }
  .entity-sheet {
    margin: var(--space-3) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: var(--space-3) var(--card-pad) 14px;
    border-top: 1px solid var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--dim-700) 45%, transparent);
    }
    border-radius: 0 0 var(--entity-radius-b) var(--entity-radius-b);
    background: var(--surface-paper);
  }
  .entity-toggle {
    align-self: center;
    flex: none;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    border-radius: var(--radius-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    background: var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-500) 12%, transparent);
    }
    border: 1px solid var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--dim-500) 26%, transparent);
    }
    color: var(--c-meta);
  }
  .entity-toggle:hover {
    border-color: var(--dim-300);
    color: var(--dim-300);
  }
  .entity-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate .18s;
  }
  .is-collapsed .entity-toggle::after {
    rotate: -135deg;
    translate: 0 2px;
  }
  .entity-count {
    display: none;
    color: var(--c-meta);
  }
  .entity-count b {
    color: var(--c-meta-strong);
    font-weight: 500;
    margin-right: 6px;
  }
  .is-collapsed .entity-sheet > :not(.entity-count) {
    display: none;
  }
  .is-collapsed .entity-count {
    display: block;
  }
  .entity .entity-body {
    display: none;
  }
  .entity.lod-3 .entity-body {
    display: block;
  }
  .entity.lod-1 .entity-type {
    display: none;
  }
  .entity.lod-1 {
    --card-pad: var(--space-3);
    max-width: 230px;
  }
  .entity-label {
    color: var(--c-ink);
    text-decoration: none;
  }
  a.entity-label {
    border-bottom: 1px dotted var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px dotted color-mix(in srgb, var(--dim-300) 55%, transparent);
    }
  }
  a.entity-label:hover {
    color: var(--dim-300);
    border-bottom-color: var(--dim-300);
  }
  .entity-user-card {
    --entity-max: 440px;
    --entity-radius-t: var(--radius-pill);
    --entity-radius-b: var(--radius-pill);
    --card-pad: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .entity-user-card .entity-head {
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .entity-user-card .avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    --avatar-bg: linear-gradient(140deg, var(--dim-300), var(--dim-700));
    @supports (color: color-mix(in lab, red, red)) {
      --avatar-bg: linear-gradient(140deg, color-mix(in srgb, var(--dim-300) 60%, transparent), color-mix(in srgb, var(--dim-700) 90%, transparent));
    }
    border: 1px solid var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--dim-300) 45%, transparent);
    }
  }
  .entity-job {
    color: var(--c-meta);
    margin-top: 4px;
    text-decoration: none;
    display: block;
  }
  a.entity-job:hover {
    color: var(--dim-300);
  }
  .entity-node-card {
    --entity-max: 340px;
  }
  .entity-list-container {
    --entity-max: 340px;
    --entity-list-track: var(--content-size-5);
  }
  .entity-list-container:has(.entity-items.is-multi-track) {
    --entity-max: var(--content-size-9);
  }
  .entity-items {
    display: flex;
    flex-direction: column;
  }
  .entity-items.is-multi-track {
    display: block;
    column-count: var(--entity-list-tracks, 1);
    column-gap: var(--card-pad);
    column-rule: 1px solid var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      column-rule: 1px solid color-mix(in srgb, var(--dim-500) 34%, transparent);
    }
  }
  .entity-items.is-multi-track li {
    break-inside: avoid;
    margin-inline: 0;
    max-width: var(--entity-list-track);
    border-bottom: none;
    overflow-wrap: anywhere;
  }
  .entity-items li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-2);
    margin: 0 calc(-1 * var(--space-2));
    color: var(--c-desc);
    line-height: 1.6;
    border-bottom: 1px solid var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--dim-500) 34%, transparent);
    }
  }
  .entity-items li:last-child {
    border-bottom: none;
  }
  .entity-items li:hover {
    background: var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-500) 12%, transparent);
    }
  }
  .entity-key-value-pairs-container {
    --entity-max: 380px;
  }
  .entity-pairs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 14px;
    align-items: baseline;
  }
  .entity-pairs dt {
    color: var(--c-sub);
    padding: 6px 0;
    border-bottom: 1px solid var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--dim-700) 32%, transparent);
    }
  }
  .entity-pairs dd {
    margin: 0;
    padding: 6px 0;
    color: var(--c-ink);
    border-bottom: 1px solid var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in srgb, var(--dim-700) 32%, transparent);
    }
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .entity-pairs > :nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .entity-relational-entity {
    --entity-max: 340px;
  }
  .entity-fields {
    display: flex;
    flex-direction: column;
  }
  .entity-fields li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-2);
    margin: 0 calc(-1 * var(--space-2));
    border-radius: 7px;
    color: var(--c-desc);
  }
  .entity-fields li:hover {
    background: var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-500) 12%, transparent);
    }
  }
  .entity-fields .entity-fname {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--c-ink);
  }
  .entity-fields .entity-pk {
    width: 14px;
    height: 14px;
    flex: none;
    margin-right: 3px;
    background: var(--dim-300);
    -webkit-mask: url('/images/icons/constraint-icon.svg') center/contain no-repeat;
    mask: url('/images/icons/constraint-icon.svg') center/contain no-repeat;
  }
  .entity-fields .entity-pk-slot {
    width: 14px;
    flex: none;
    margin-right: 3px;
  }
  .entity-fields li.is-key {
    background: var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-500) 14%, transparent);
    }
  }
  .entity-fields li.is-key .entity-fname {
    color: var(--c-meta-strong);
  }
  .entity-fields .entity-key-sep {
    display: block;
    padding: 0;
    height: 1px;
    margin: 6px calc(-1 * var(--space-2));
    background: var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-700) 45%, transparent);
    }
  }
  .entity-fields li.entity-key-sep:hover {
    background: var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-700) 45%, transparent);
    }
  }
  .entity-cards-container {
    --entity-max: 400px;
  }
  .entity-canvas {
    position: relative;
    border-radius: var(--radius-4) var(--radius-4) var(--radius-3) var(--radius-3);
    padding: 10px;
    background: var(--dim-900);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-900) 55%, transparent);
    }
    border: 1px solid var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--dim-700) 40%, transparent);
    }
  }
  .entity-canvas svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .entity-canvas .entity-wires {
    stroke: var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--dim-300) 55%, transparent);
    }
    stroke-width: 1.25;
    fill: none;
  }
  .entity-canvas .entity-wire--dependency {
    stroke-dasharray: 4 4;
  }
  .entity-canvas .entity-wire--data-flow {
    stroke: var(--dim-300);
    stroke-width: 1.5;
  }
  .entity-canvas .entity-wire--composition {
    stroke-width: 1.75;
  }
  .entity-canvas .entity-wire-label {
    position: absolute;
    transform: translate(-50%, -100%);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-sub);
    white-space: nowrap;
    pointer-events: none;
  }
  .entity-inner {
    position: absolute;
    border-radius: 14px 14px 9px 9px;
    padding: 10px var(--space-3);
    display: grid;
    gap: 4px;
    background: var(--dim-900);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-900) 88%, transparent);
    }
    border: 1px solid var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--dim-500) 38%, transparent);
    }
  }
  .entity-inner:hover {
    border-color: var(--dim-300);
  }
  .entity-inner .entity-inner-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
  }
  .entity-inner .entity-inner-glyph {
    width: 11px;
    height: 11px;
    flex: none;
    margin-right: 2px;
    color: var(--dim-300);
  }
  .entity-inner .entity-inner-type {
    color: var(--c-sub);
  }
  .entity-data-product, .entity-processing-engine {
    --entity-max: 720px;
  }
  .entity-flow {
    position: relative;
    margin: 14px calc(-1 * var(--card-pad)) 0;
    display: grid;
    grid-template-columns: 1fr 72px 1fr;
    border-top: 1px solid var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--dim-700) 45%, transparent);
    }
    background: var(--surface-paper);
  }
  .entity-rail {
    padding: 14px 0 16px;
    min-width: 0;
  }
  .entity-rail--in {
    padding-left: var(--card-pad);
    padding-right: var(--space-3);
  }
  .entity-rail--out {
    padding-right: var(--card-pad);
    padding-left: var(--space-3);
  }
  .entity-rail .entity-rail-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-sub);
    margin-bottom: 11px;
  }
  .entity-rail--out .entity-rail-head {
    justify-content: flex-end;
    color: var(--c-kind);
  }
  .entity-rail .entity-rail-head .entity-n {
    color: var(--c-num);
  }
  .entity-ports {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .entity-port {
    position: relative;
    border-radius: var(--radius-3) var(--radius-3) var(--radius-2) var(--radius-2);
    background: var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-500) 7%, transparent);
    }
    padding: var(--space-2) 10px;
    display: grid;
    gap: 6px;
  }
  .entity-rail--in .entity-port {
    border-left: 2px dashed var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      border-left: 2px dashed color-mix(in srgb, var(--dim-300) 55%, transparent);
    }
  }
  .entity-rail--out .entity-port {
    border-right: 2px solid var(--dim-300);
    text-align: right;
  }
  .entity-port:hover {
    background: var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-500) 16%, transparent);
    }
  }
  .entity-port .entity-pname {
    color: var(--c-ink);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
  }
  a.entity-pname:hover {
    color: var(--dim-300);
  }
  .entity-contracts {
    display: grid;
    gap: 4px;
  }
  .entity-contract {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-desc);
    text-decoration: none;
  }
  .entity-rail--out .entity-contract {
    flex-direction: row-reverse;
  }
  .entity-contract .entity-seal {
    width: 13px;
    height: 13px;
    flex: none;
    margin-right: 2px;
    background: var(--c-desc);
    -webkit-mask: url('/images/icons/constraint-icon.svg') center/contain no-repeat;
    mask: url('/images/icons/constraint-icon.svg') center/contain no-repeat;
  }
  a.entity-contract:hover {
    color: var(--dim-300);
  }
  a.entity-contract:hover .entity-seal {
    background: var(--dim-300);
  }
  .entity-core {
    display: grid;
    place-items: center;
    border-inline: 1px solid var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-inline: 1px solid color-mix(in srgb, var(--dim-700) 40%, transparent);
    }
    background: linear-gradient(90deg, transparent, var(--dim-500));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dim-500) 10%, transparent));
    }
  }
  .entity-core .entity-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px dashed var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px dashed color-mix(in srgb, var(--dim-300) 40%, transparent);
    }
    display: grid;
    place-items: center;
  }
  .entity-core .entity-ring::after {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--dim-300);
    -webkit-mask: url('/images/icons/task-icon.svg') center/contain no-repeat;
    mask: url('/images/icons/task-icon.svg') center/contain no-repeat;
  }
  .entity-managed {
    position: relative;
    margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: var(--space-3) var(--card-pad) 14px;
    border-top: 1px solid var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb, var(--dim-700) 45%, transparent);
    }
    border-radius: 0 0 var(--entity-radius-b) var(--entity-radius-b);
    background: var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-500) 10%, var(--surface-paper));
    }
    display: grid;
    gap: 9px;
  }
  .entity-managed .entity-managed-head {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--c-sub);
  }
  .entity-managed .entity-managed-head::before {
    content: "";
    width: 13px;
    height: 13px;
    margin-right: 2px;
    background: var(--c-kind);
    -webkit-mask: url('/images/icons/resource-icon.svg') center/contain no-repeat;
    mask: url('/images/icons/resource-icon.svg') center/contain no-repeat;
  }
  .entity-processing-engine .entity-managed-head::before {
    -webkit-mask-image: url('/images/icons/service-icon.svg');
    mask-image: url('/images/icons/service-icon.svg');
  }
  .entity-managed-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .entity-managed-item {
    border-radius: var(--radius-3) var(--radius-3) var(--radius-2) var(--radius-2);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 2px solid var(--dim-500);
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 2px solid color-mix(in srgb, var(--dim-500) 55%, transparent);
    }
    padding: var(--space-2) 9px;
    min-width: 0;
    color: var(--c-ink);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .entity-managed-item:hover {
    border-bottom-color: var(--dim-300);
    color: var(--dim-300);
  }
  .entity-axis {
    --axis-size: 168px;
    --axis-band-width: 20px;
    --axis-glyph-size: 64px;
    box-sizing: border-box;
    width: var(--axis-size);
    height: var(--axis-size);
    max-width: none;
    padding: 0;
    border: var(--axis-band-width) solid var(--axis-band);
    border-radius: var(--radius-pill);
    background: radial-gradient(circle at 32% 24%, var(--axis-fill-hi) 0%, var(--axis-fill-mid) 52%, var(--axis-fill-lo) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    overflow: hidden;
  }
  .entity-axis.axis-organizational {
    --axis-fill-hi: var(--dim-700);
    --axis-fill-mid: var(--dim-900);
    --axis-fill-lo: var(--dim-900);
    --axis-band: var(--dim-500);
    --axis-glyph-ink: var(--dim-100);
    --axis-ink: var(--dim-100);
    --axis-icon-url: var(--icon-url);
  }
  .entity-axis.axis-functional {
    --axis-fill-hi: var(--secondary-600);
    --axis-fill-mid: var(--secondary-800);
    --axis-fill-lo: var(--secondary-950);
    --axis-band: var(--secondary-500);
    --axis-glyph-ink: var(--secondary-100);
    --axis-ink: var(--secondary-50);
    --axis-icon-url: var(--func-icon-url);
  }
  .entity-axis.is-selected {
    border-color: var(--text-accent, var(--surface-text-accent));
  }
  .entity-axis .axis-glyph {
    width: var(--axis-glyph-size);
    height: var(--axis-glyph-size);
    flex: 0 0 var(--axis-glyph-size);
    background: var(--axis-glyph-ink);
    -webkit-mask: var(--axis-icon-url) center/contain no-repeat;
    mask: var(--axis-icon-url) center/contain no-repeat;
  }
  .entity-axis .axis-name {
    max-width: calc(var(--axis-size) - (2 * var(--axis-band-width)) - var(--space-3));
    color: var(--axis-ink);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .entity-axis a.axis-name:hover {
    color: var(--text-accent, var(--surface-text-accent));
  }
}
@layer components {
  .shell {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .shell-body {
    flex: 1;
    display: flex;
    min-height: 0;
  }
  .shell-bottomnav {
    display: none;
  }
  .rail {
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex-basis .28s var(--shell-ease), width .28s var(--shell-ease);
  }
  .shell[data-rail="collapsed"] .rail {
    flex-basis: var(--rail-collapsed);
    width: var(--rail-collapsed);
  }
  .shell[data-rail="hidden"] .rail {
    display: none;
  }
  .shell[data-rail="collapsed"] .rail-item span, .shell[data-rail="collapsed"] .rail-sec {
    opacity: 0;
  }
  .shell[data-rail="collapsed"] .rail-item .badge {
    display: none;
  }
  .rail-doc[data-open="false"] .rail-toc {
    display: none;
  }
  .rail-doc[data-open="false"] .chev {
    transform: rotate(-90deg);
  }
  .rail-toc {
    position: relative;
    display: flex;
    flex-direction: column;
    --toc-pad-y: 7px;
    --toc-line-h: 20px;
    --toc-row-h: calc(var(--toc-pad-y) * 2 + var(--toc-line-h));
    --toc-axis: 23px;
    --toc-dot: 9px;
  }
  .rail-toc::before {
    content: "";
    position: absolute;
    left: calc(var(--toc-axis) - 1px);
    width: 2px;
    top: 6px;
    bottom: calc(var(--toc-row-h) / 2);
    border-radius: 2px;
    background: var(--shell-rail, rgba(255, 255, 255, .22));
  }
  .rail-toc a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: var(--toc-pad-y) 10px var(--toc-pad-y) calc(var(--toc-axis) + var(--toc-dot) / 2 + 8px);
    white-space: nowrap;
    text-decoration: none;
    border-radius: 0;
  }
  .rail-toc a::before {
    content: "";
    position: absolute;
    left: calc(var(--toc-axis) - var(--toc-dot) / 2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--toc-dot);
    height: var(--toc-dot);
    border-radius: 50%;
    background: var(--shell-t2, rgba(255, 255, 255, .62));
    transition: background .2s, box-shadow .2s;
  }
  .rail-toc a.active::before {
    background: var(--dim-c, var(--primary-500));
    box-shadow: 0 0 10px var(--dim-c, #627700);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 10px color-mix(in srgb, var(--dim-c, var(--primary-700)) 60%, transparent);
    }
  }
  .rail-toc a {
    line-height: var(--toc-line-h);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--shell-t2, rgba(255, 255, 255, .62));
    transition: color .15s, background .15s;
  }
  .rail-toc a .tnum {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .05em;
    color: var(--shell-t3, rgba(255, 255, 255, .40));
  }
  .rail-toc a:hover {
    color: var(--shell-t1, rgba(255, 255, 255, .92));
    background: var(--shell-glass-2, rgba(255, 255, 255, .045));
  }
  .rail-toc a.active {
    color: var(--primary-500, #d4ff00);
    font-weight: 600;
    background: color-mix(in srgb, #627700 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary-700, #d4ff00) 10%, transparent);
    }
  }
  .rail-toc a.active .tnum {
    color: color-mix(in srgb, #A2C400 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--primary-500, #d4ff00) 75%, transparent);
    }
  }
  .shell[data-rail="collapsed"] .rail-toc, .shell[data-page="simple"] .rail-toc {
    display: none;
  }
  .main {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
  }
  .main-scroll {
    height: 100%;
    overflow-y: auto;
    padding: var(--gutter);
    transition: padding-right .32s var(--shell-ease);
  }
  @media (max-width: 640px), (max-height: 480px) {
    .main-scroll {
      padding-inline: 0;
    }
  }
  .main[data-drawer="open"][data-drawer-max="false"] .main-scroll {
    padding-right: calc(var(--drawer-w) + var(--gutter));
  }
  .content {
    max-width: none;
  }
  .main-scroll > .content {
    max-width: none;
    height: 100%;
  }
  .content .prose {
    max-width: var(--measure-read);
  }
  .content .card--prose {
    max-width: var(--measure-read);
  }
  .content [class*="grid"] > * {
    min-width: 0;
  }
  .ctx {
    flex: 0 0 0;
    width: 0;
    overflow: clip;
    transition: flex-basis .32s var(--shell-ease), width .32s var(--shell-ease);
  }
  .shell[data-ctx="open"] .ctx {
    flex-basis: var(--ctx-w);
    width: var(--ctx-w);
  }
  .shell[data-ctx-resizing] .ctx {
    transition: none;
  }
  .ctx-grip {
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    cursor: col-resize;
    touch-action: none;
    position: relative;
    z-index: var(--z-ctxbar);
    transition: width .32s var(--shell-ease);
  }
  .shell[data-ctx="open"] .ctx-grip {
    flex-basis: var(--ctx-grip-w);
    width: var(--ctx-grip-w);
  }
  .shell[data-ctx-resizing] .ctx-grip {
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .ctx-grip {
      transition: none;
    }
  }
  .shell[data-ctx="closed"] .ctx.glass {
    box-shadow: none;
    border: none;
  }
  .ctx .win {
    display: none;
    height: 100%;
    flex-direction: column;
    min-width: var(--ctx-w);
  }
  .ctx[data-win="ai"] .win-ai, .ctx[data-win="tasks"] .win-tasks, .ctx[data-win="help"] .win-help, .ctx[data-win="preferences"] .win-preferences {
    display: flex;
  }
  .ctxbar {
    flex: 0 0 var(--ctxbar-w);
    width: var(--ctxbar-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    z-index: var(--z-ctxbar);
  }
  .shell:has(.main-scroll [data-viewport-overlay]) .ctxbar {
    z-index: auto;
  }
  @media (max-width: 640px), (max-height: 480px) {
    .shell-body {
      position: relative;
    }
    .shell-bottomnav {
      display: block;
      flex: none;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      z-index: var(--z-nav);
    }
    .rail {
      display: none;
    }
    .shell[data-rail] .rail {
      flex: 0 0 0;
      width: var(--drawer-w-rail);
      overflow: visible;
    }
    .ctxbar {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      flex: 0 0 0;
      width: var(--ctxbar-w);
      height: auto;
      border-radius: var(--radius-2) 0 0 var(--radius-2);
      z-index: calc(var(--z-drawer) + 1);
    }
    .shell[data-rail="expanded"] .ctxbar {
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s var(--shell-ease);
    }
    .shell[data-ctx="open"] .ctx {
      position: absolute;
      inset: 0;
      flex-basis: 0;
      width: auto;
      z-index: var(--z-drawer);
    }
    .ctx .win {
      min-width: 0;
    }
    .ctx-grip {
      display: none;
    }
  }
}
:root {
  --drawer-w-base: var(--content-size-8);
  --drawer-w-wide: var(--content-size-10);
  --drawer-w-rail: min(320px, 78vw);
  --drawer-gutter: var(--content-size-6);
  --drawer-pad-x: var(--space-5);
  --drawer-label-col: var(--content-size-5);
}
@layer components {
  .drawer, .drawer-scrim, .rail-scrim {
    --drawer-line: light-dark(var(--gray-200), var(--gray-500-op-06));
    --drawer-line-strong: light-dark(var(--gray-300), var(--gray-500));
    --drawer-tint: light-dark(var(--gray-50), color-mix(in srgb, #E4F1FF 6%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      --drawer-tint: light-dark(var(--gray-50), color-mix(in srgb, var(--gray-100) 6%, transparent));
    }
    --drawer-ink-success: light-dark(color-mix(in srgb, #40BC40 65%, #030A12), var(--color-success));
    @supports (color: color-mix(in lab, red, red)) {
      --drawer-ink-success: light-dark(color-mix(in srgb, var(--color-success) 65%, var(--gray-900)), var(--color-success));
    }
    --drawer-ink-error: light-dark(var(--color-error), color-mix(in srgb, #BC4040 55%, #F4F9FE));
    @supports (color: color-mix(in lab, red, red)) {
      --drawer-ink-error: light-dark(var(--color-error), color-mix(in srgb, var(--color-error) 55%, var(--secondary-50)));
    }
    --drawer-ink-muted: light-dark(var(--text3), var(--text3));
    @supports (color: color-mix(in lab, red, red)) {
      --drawer-ink-muted: light-dark(var(--text3), color-mix(in srgb, var(--text3) 45%, var(--secondary-50)));
    }
    --drawer-scrim-color: light-dark(color-mix(in srgb, #001F3D 95%, transparent), color-mix(in srgb, #000810 95%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      --drawer-scrim-color: light-dark(color-mix(in srgb, var(--secondary-900) 95%, transparent), color-mix(in srgb, var(--secondary-950) 95%, transparent));
    }
  }
  .main {
    --drawer-w: min(var(--drawer-w-base), calc(100% - var(--drawer-gutter)));
  }
  .main:has(.drawer--wide) {
    --drawer-w: min(var(--drawer-w-wide), calc(100% - var(--drawer-gutter)));
  }
  .drawer-scrim {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--drawer-scrim-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--shell-ease);
  }
  .drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    width: var(--drawer-w);
    display: flex;
    flex-direction: column;
    background: var(--surface-paper);
    border-left: var(--size-hairline) solid var(--drawer-line);
    box-shadow: -32px 0 80px color-mix(in srgb, #000810 28%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: -32px 0 80px color-mix(in srgb, var(--secondary-950) 28%, transparent);
    }
    transform: translateX(100%);
    transition: transform .26s var(--shell-ease);
  }
  .main[data-drawer="open"] .drawer {
    transform: none;
  }
  @media (max-width: 640px), (max-height: 480px) {
    .rail {
      position: absolute;
      inset: 0 auto 0 0;
      z-index: var(--z-drawer);
      transform: translateX(-100%);
      transition: transform .26s var(--shell-ease);
    }
    .shell[data-rail="expanded"] .rail {
      transform: none;
    }
    .rail-top {
      position: absolute;
      left: 100%;
      top: 0;
    }
    .rail-scrim {
      position: absolute;
      inset: 0;
      z-index: calc(var(--z-drawer) - 1);
      background: var(--drawer-scrim-color);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s var(--shell-ease);
    }
    .shell[data-rail="expanded"] .rail-scrim {
      opacity: 1;
      pointer-events: auto;
    }
    .shell[data-rail="hidden"] .rail-scrim {
      display: none;
    }
  }
  .rail-scrim {
    display: none;
  }
  @media (max-width: 640px), (max-height: 480px) {
    .rail-scrim {
      display: block;
    }
  }
  @media (max-width: 1240px) {
    .main {
      --drawer-gutter: var(--content-size-4);
    }
  }
  @media (max-width: 640px), (max-height: 480px) {
    .main {
      --drawer-w: 100%;
    }
  }
  .main[data-drawer="open"][data-drawer-max="true"] .drawer {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(var(--content-size-11), 94vw);
    height: min(88vh, var(--content-size-9));
    max-height: 94vh;
    transform: translate(-50%, -50%);
    transition: none;
    border: var(--size-hairline) solid var(--drawer-line);
    box-shadow: 0 40px 120px color-mix(in srgb, #000810 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 40px 120px color-mix(in srgb, var(--secondary-950) 45%, transparent);
    }
    border-radius: var(--radius-4);
    z-index: var(--z-modal);
    animation: drawer-modal-in .2s var(--shell-ease);
  }
  @keyframes drawer-modal-in {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.97);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .main[data-drawer="open"][data-drawer-max="true"] .drawer {
      animation: none;
    }
    .drawer {
      transition: none;
    }
  }
  .main[data-drawer="open"][data-drawer-max="true"] .drawer-scrim {
    position: fixed;
    z-index: calc(var(--z-modal) - 1);
    opacity: 1;
    pointer-events: auto;
  }
  .main[data-drawer-anchor="viewport"][data-drawer-max="false"] .drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
  }
  .main[data-drawer-anchor="viewport"][data-drawer="open"][data-drawer-max="false"] .main-scroll {
    padding-right: var(--gutter);
  }
  .drawer-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--drawer-pad-x);
    border-bottom: var(--size-hairline) solid var(--drawer-line);
  }
  .drawer-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .drawer-heading h2 {
    margin: 0;
    color: var(--text1);
  }
  .drawer-heading .role-overline {
    margin: 0;
    color: var(--text-accent);
  }
  .drawer-glyph {
    width: var(--content-size-2);
    height: var(--content-size-2);
    flex: none;
    margin-top: var(--space-1);
    background: light-dark(var(--dim-500, var(--text-accent)), var(--dim-300, var(--text-accent)));
    -webkit-mask: var(--icon-url, var(--func-icon-url)) center/contain no-repeat;
    mask: var(--icon-url, var(--func-icon-url)) center/contain no-repeat;
  }
  .drawer-head-leading {
    display: flex;
    flex: none;
  }
  .drawer-actions {
    display: flex;
    gap: var(--space-1);
    flex: none;
  }
  .drawer-iconbtn {
    appearance: none;
    display: grid;
    place-items: center;
    padding: var(--space-1);
    border: var(--size-hairline) solid transparent;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--text3);
    cursor: pointer;
  }
  .drawer-iconbtn:hover {
    border-color: var(--drawer-line-strong);
    color: var(--text1);
    background: var(--drawer-tint);
  }
  .drawer-body {
    flex: 1;
    overflow: auto;
    padding: var(--space-5) var(--drawer-pad-x) var(--space-6);
  }
  .drawer-body .role-body {
    color: var(--text2);
  }
  .drawer-measure {
    max-width: 74ch;
    margin: 0;
  }
  .drawer-intro {
    margin: 0 0 var(--space-3);
    max-width: 74ch;
  }
  .drawer-empty {
    margin: 0;
    color: var(--text3);
  }
  .drawer-section {
    margin-top: var(--space-5);
  }
  .drawer-section:first-child {
    margin-top: 0;
  }
  .drawer-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .drawer-section-head .role-label {
    margin: 0;
    color: var(--text2);
  }
  .drawer-section-head .drawer-rule {
    flex: 1;
    height: var(--size-hairline);
    background: var(--drawer-line);
  }
  .drawer-section-icon {
    width: var(--content-size-1);
    height: var(--content-size-1);
    flex: none;
    background: var(--text3);
    -webkit-mask: var(--drawer-section-icon) center/contain no-repeat;
    mask: var(--drawer-section-icon) center/contain no-repeat;
  }
  .drawer-section-action {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text-accent);
    cursor: pointer;
  }
  .drawer-section-action:hover {
    text-decoration: underline;
  }
  .drawer-count {
    display: inline-grid;
    place-items: center;
    min-width: var(--space-4);
    height: var(--space-4);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--drawer-tint);
    box-shadow: inset 0 0 0 var(--size-hairline) var(--drawer-line);
    color: var(--text2);
  }
  .drawer-rows {
    border-top: var(--size-hairline) solid var(--drawer-line);
  }
  .drawer-row {
    display: grid;
    grid-template-columns: minmax(var(--drawer-label-col), max-content) 1fr;
    gap: var(--space-5);
    padding: var(--space-4) 0;
    border-bottom: var(--size-hairline) solid var(--drawer-line);
  }
  .drawer-row p {
    margin: 0;
    max-width: 76ch;
    text-wrap: pretty;
  }
  .drawer-row-label {
    padding-top: 2px;
    color: var(--text3);
  }
  .drawer-row-label.is-positive {
    color: var(--drawer-ink-success);
  }
  .drawer-row-label.is-accent {
    color: var(--text-accent);
  }
  .drawer-row-label.is-negative {
    color: var(--drawer-ink-error);
  }
  .drawer-row.is-negative {
    background: linear-gradient(90deg, color-mix(in srgb, #BC4040 8%, transparent), transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, color-mix(in srgb, var(--color-error) 8%, transparent), transparent 60%);
    }
  }
  @media (max-width: 640px), (max-height: 480px) {
    .drawer-row {
      grid-template-columns: 1fr;
      gap: var(--space-2);
    }
  }
  .drawer-list {
    border-top: var(--size-hairline) solid var(--drawer-line);
  }
  .drawer-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: var(--size-hairline) solid var(--drawer-line);
  }
  .drawer-item-title {
    margin: 0;
    color: var(--text1);
  }
  .drawer-item-meta {
    margin: 0;
    grid-column: 1;
    color: var(--text3);
  }
  .drawer-item-desc {
    margin: var(--space-1) 0 0;
    grid-column: 1 / -1;
    max-width: 80ch;
    text-wrap: pretty;
  }
  .drawer-item-flags {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: var(--space-1);
    align-items: center;
    flex-wrap: wrap;
  }
  .drawer-flag, .drawer-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: var(--size-hairline) solid var(--drawer-line);
    border-radius: var(--radius-pill);
    color: var(--text3);
    white-space: nowrap;
  }
  .drawer-flag.is-required {
    border-color: var(--drawer-ink-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--drawer-ink-success) 45%, transparent);
    }
    color: var(--drawer-ink-success);
  }
  .drawer-flag.is-limit {
    border-color: var(--text-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--text-accent) 45%, transparent);
    }
    color: var(--text-accent);
  }
  .drawer-chips {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
  }
  .drawer-cats {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-top: var(--space-1);
  }
  .drawer-cat {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--text1);
  }
  .drawer-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .drawer-form-error {
    margin: 0;
    color: var(--drawer-ink-error);
  }
  .drawer-form-static {
    margin: 0;
  }
  .drawer-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--drawer-pad-x);
    border-top: var(--size-hairline) solid var(--drawer-line);
    background: var(--drawer-tint);
  }
  .drawer-foot .drawer-spacer {
    flex: 1;
  }
  .drawer-foot.is-inline {
    padding-inline: 0;
    background: none;
  }
  .drawer-btn {
    appearance: none;
    padding: var(--space-2) var(--space-3);
    border: var(--size-hairline) solid var(--drawer-line-strong);
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--text1);
    cursor: pointer;
  }
  .drawer-btn:hover {
    background: var(--drawer-tint);
  }
  .drawer-btn.is-primary {
    background: var(--text-accent);
    border-color: var(--text-accent);
    color: var(--surface-paper);
  }
  .drawer-btn:disabled {
    opacity: .45;
    cursor: default;
  }
}
@layer components {
  .iris-border.surface-light {
    --transparent: #ffffff00;
    --glass-reflex-color: #ffffff;
    --border-color: var(--secondary-200);
  }
  .iris-border.surface-dark {
    --transparent: #00000000;
    --glass-reflex-color: var(--dim-300,var(--secondary-700));
    --border-color: var(--secondary-700);
  }
  .iris-border {
    --cg-shift: 0;
    --cg-interval: 0;
    --glass-reflex-secondary-color: #C2E1FF;
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-secondary-color: color-mix(in srgb-linear, var(--secondary-200) 50%,var(--transparent) 50%);
    }
    --c-border: var(--dim-500, rgba(255, 255, 255, .5));
    @supports (color: color-mix(in lab, red, red)) {
      --c-border: color-mix(in srgb, var(--dim-500, rgba(255, 255, 255, .5)) 26%, transparent 74%);
    }
    --reflex-base: 0px;
    --reflex-ang: 135deg;
    --iris-ang: 90deg;
    --iris-bottom: 0;
    --iris-left: 0;
    --iris-top: unset;
    --iris-right: unset;
    --iris-width: calc(100% - 40px);
    --iris-height: var(--glass-thickness, 1px);
    --glass-thickness: 1px;
    --iris-mix: 20%;
    --iris-start-deg: 140deg;
    --iris-interval-deg: 3deg;
    --transparent: #ffffff00;
    --shadow: var(--transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow: color-mix(black 10%,var(--transparent) 90%);
    }
    --glass-reflex-0: var(--transparent);
    --glass-reflex-1: var(--glass-reflex-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-1: color-mix(in srgb-linear, var(--glass-reflex-color) 50%, var(--transparent) 50%);
    }
    --glass-reflex-2: var(--glass-reflex-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-2: color-mix(in srgb-linear, var(--glass-reflex-color) 90%, var(--transparent) 10%);
    }
    --glass-reflex-3: var(--glass-reflex-color);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-reflex-3: color-mix(in srgb-linear, var(--glass-reflex-color) 100%, var(--transparent) 0%);
    }
    position: relative;
    isolation: isolate;
    border-color: transparent !important;
    box-shadow: inset 0 0 1px 0.2px var(--glass-reflex-color),inset 0 0 5px 1px #fff, 0 0 1px 0.2px var(--border-color), 0 0 3px 0.5px var( --shadow);
    overflow: hidden;
  }
  .iris-border::before {
    content: "";
    position: absolute;
    background: repeating-linear-gradient( var(--reflex-ang), var(--glass-reflex-0) 0, var(--glass-reflex-1) calc(160px + var(--reflex-base)), var(--glass-reflex-0) calc(212px + var(--reflex-base)), var(--glass-reflex-2) calc(264px + var(--reflex-base)), var(--glass-reflex-0) calc(320px + var(--reflex-base)), var(--glass-reflex-1) calc(364px + var(--reflex-base)), var(--glass-reflex-0) calc(460px + var(--reflex-base)), var(--glass-reflex-1) calc(580px + var(--reflex-base)), var(--glass-reflex-0) calc(630px + var(--reflex-base)), var(--glass-reflex-2) calc(720px + var(--reflex-base)), var(--glass-reflex-1) calc(864px + var(--reflex-base)), var(--glass-reflex-2) calc(960px + var(--reflex-base)), var(--glass-reflex-0) calc(1090px + var(--reflex-base)));
    width: max(100%,100%);
    height: max(100%,100%);
    border-radius: var(--radius);
    overflow: hidden;
    inset: 0;
    z-index: -200;
  }
  .iris-border::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 99;
    border-radius: var(--radius);
    pointer-events: none;
    padding: var(--glass-thickness, 1px);
    box-sizing: border-box;
    background: conic-gradient( from 20deg at 50% 50%, rgba(255,255,255,.55) 0deg, rgba(255,255,255,.25) 40deg, rgba(255,255,255,.28) 76deg, rgba(255,255,255,.45) 92deg, rgb(140,91,255) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 1)), rgb(255,96,255) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 2)), rgb(255,107,197) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 3)), rgb(255,131,158) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 4)), rgb(255,187,151) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 5)), rgb(255,234,171) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 6)), rgb(223,255,172) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 7)), rgb(152,255,190) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 8)), rgb(136,234,255) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 9)), rgb(111,174,255) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 10)), var(--border-color) 195deg, var(--border-color) 200deg, var(--border-color) 320deg, var(--border-color) 360deg );
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient( from 20deg at 50% 50%, rgba(255,255,255,.55) 0deg, rgba(255,255,255,.25) 40deg, rgba(255,255,255,.28) 76deg, rgba(255,255,255,.45) 92deg, color-mix(in srgb, rgb(140,91,255) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 1)), color-mix(in srgb, rgb(255,96,255) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 2)), color-mix(in srgb, rgb(255,107,197) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 3)), color-mix(in srgb, rgb(255,131,158) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 4)), color-mix(in srgb, rgb(255,187,151) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 5)), color-mix(in srgb, rgb(255,234,171) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 6)), color-mix(in srgb, rgb(223,255,172) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 7)), color-mix(in srgb, rgb(152,255,190) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 8)), color-mix(in srgb, rgb(136,234,255) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 9)), color-mix(in srgb, rgb(111,174,255) var(--iris-mix), var(--transparent) calc(100% - var(--iris-mix))) calc(var(--iris-start-deg) + (var(--iris-interval-deg) * 10)), color-mix(in srgb, var(--border-color) 55%,#fff 45%) 195deg, color-mix(in srgb, var(--border-color) 55%,#fff 45%) 200deg, color-mix(in srgb, var(--border-color) 30%,#fff 70%) 320deg, color-mix(in srgb, var(--border-color) 55%,#fff 45%) 360deg );
    }
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transform: translateZ(5);
    backface-visibility: hidden;
  }
}
html, :host {
  line-height: 0;
  background-color: #000;
}
p, :host {
  line-height: 1.5;
}
span.label, :host {
  line-height: 1.5;
}
#app {
  font-family: var(--font-sans);
  align-content: center;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-size {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-layout {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-paint {
  syntax: "*";
  inherits: false;
}
@property --tw-contain-style {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-contain-size: initial;
      --tw-contain-layout: initial;
      --tw-contain-paint: initial;
      --tw-contain-style: initial;
    }
  }
}