/*! 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: #D4FF00;
    --primary-200: #C4EA0C;
    --primary-300: #A7C80A;
    --primary-400: #819C00;
    --primary-500: #677C01;
    --primary-600: #4A5800;
    --secondary-50: #F4F9FE;
    --secondary-100: #E4F1FF;
    --secondary-200: #CEDBE6;
    --secondary-300: #A3BAD3;
    --secondary-400: #7599BD;
    --secondary-500: #4475A5;
    --secondary-600: #2e5a87;
    --secondary-700: #1A3D5F;
    --secondary-800: #001F3D;
    --secondary-900: #000A18;
    --secondary-950: #000714;
    --gray-200: #CCD9E6;
    --gray-300: #ADB9C5;
    --gray-400: #8B97A2;
    --gray-500: #68737E;
    --gray-600: #49545E;
    --gray-700: #2F3943;
    --gray-800: #172029;
    --gray-900: #12161B;
    --warm-50: #FBF7F2;
    --warm-100: #F3F0E7;
    --warm-200: #DCD7CE;
    --warm-400: #c68625;
    --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-0-5: 2px;
    --size-stroke: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 20px;
    --space-5: 32px;
    --space-6: 52px;
    --space-7: 84px;
    --size-1: 4px;
    --size-2: 8px;
    --size-3: 12px;
    --size-4: 20px;
    --size-5: 32px;
    --size-6: 52px;
    --size-7: 84px;
    --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);
    --margin-1: var(--space-2);
    --margin-2: var(--space-3);
    --margin-3: var(--space-4);
    --margin-4: var(--space-5);
    --margin-5: var(--space-6);
    --radius-0: 0;
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 12px;
    --radius-4: 16px;
    --radius-5: 20px;
    --radius-6: 24px;
    --radius-7: 32px;
    --radius-8: 40px;
    --radius-9: 48px;
    --radius-pill: 9999px;
    --icon-size-xs: var(--content-size-0);
    --icon-size-sm: var(--size-4);
    --icon-size-md: var(--content-size-1);
    --icon-size-lg: var(--size-5);
    --icon-size-xl: var(--content-size-2);
    --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-header-h: 48px;
    --mobile-row-h: 56px;
    --mobile-row-h-sub: 52px;
    --mobile-tap: 44px;
    --mobile-gutter: var(--space-3);
    --control-h-sm: 28px;
    --control-h-md: 36px;
    --control-h-lg: var(--mobile-tap);
    --main-menu-icon: var(--icon-size-md);
    --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: var(--icon-size-md);
    --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(--size-5);
    --dim-tile-radius: var(--radius-2);
    --dim-tile-glyph: var(--icon-size-md);
    --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(--secondary-100), color-mix(in srgb-linear, #68737E 80%, transparent 20%));
    @supports (color: color-mix(in lab, red, red)) {
      --bg-color: light-dark(var(--secondary-100), color-mix(in srgb-linear, var(--gray-500) 80%, transparent 20%));
    }
  }
}
@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 {
  .collapse {
    visibility: collapse;
  }
  .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;
  }
  .table {
    display: table;
  }
  .size-6 {
    width: var(--size-6);
    height: var(--size-6);
  }
  .size-7 {
    width: var(--size-7);
    height: var(--size-7);
  }
  .grow {
    flex-grow: 1;
  }
  .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;
  }
  .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;
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .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;
  }
  .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;
  }
  .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));
  }
}
@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;
@layer components {
  .page {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--text1);
  }
  .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: #CEDBE6;
    @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: #1A3D5F;
    @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: #CEDBE6;
    @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(--text1-light);
    background: color-mix(in srgb-linear, #F4F9FE 80%, transparent 20%);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb-linear, var(--secondary-50) 80%, transparent 20%);
    }
    border: 1px solid var(--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: color-mix(in srgb-linear, #68737E 60%, transparent 40%);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb-linear, var(--gray-500) 60%, transparent 40%);
    }
    border-color: color-mix(in srgb-linear, #7599BD 30%, transparent 70%);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb-linear, var(--secondary-400) 30%, transparent 70%);
    }
  }
  .hud-display .hud-label {
    color: var(--text3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .hud-display.surface-dark .hud-label {
    color: color-mix(in srgb-linear, #A3BAD3 60%, transparent 40%);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb-linear, var(--secondary-300) 60%, transparent 40%);
    }
  }
  .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);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in srgb-linear, var(--gray-100) 20%, transparent 80%);
    }
    margin: var(--space-0) 0;
  }
  .hud-display.surface-dark .hud-separator {
    border-color: color-mix(in srgb-linear, #7599BD 20%, transparent 80%);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb-linear, var(--secondary-400) 20%, transparent 80%);
    }
  }
}
@layer components {
  :root, :host {
    --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(--menu-text);
  }
  .menu-text:hover {
    color: var(--menu-text-hover);
  }
  .menu-text.selected, .menu-text[aria-selected="true"] {
    color: var(--menu-text-selected);
  }
  .link-text, a {
    color: var(--link-text);
    text-decoration: none;
  }
  .link-text:hover, a:hover {
    color: var(--link-text-hover);
    text-decoration: underline;
  }
  .link-text.selected, .link-text[aria-selected="true"], a[aria-current] {
    color: var(--link-text-selected);
  }
  strong, b {
    font-weight: 700;
  }
  .role-display strong, .role-display b, .section-hero strong, .section-hero b {
    font-weight: 900;
  }
  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-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-quote, blockquote {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--text1);
    text-wrap: pretty;
  }
  .role-quote cite, blockquote cite {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--text3);
  }
  .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, .btn, .segmented > button {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
  }
  .role-button-sm, .btn.btn-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;
  }
  .role-menu-compact, .role-field-label, .role-field-hint, .role-caption, .role-overline, .role-legal, .role-badge, .role-normal, .role-label, .role-field-error {
    --icon-size: var(--icon-size-xs);
    --icon-gap: var(--icon-gap-sm);
  }
  .role-button-sm, .role-menu, .role-eyebrow, .role-answer-cite, .role-row-title-sm, .role-meta, .role-tool-tip-text, .role-button, .role-field-value {
    --icon-size: var(--icon-size-sm);
    --icon-gap: var(--icon-gap-sm);
  }
  .role-body, .role-callout, .role-tool-tip-heading, .role-row-title, .role-lede, .role-summary, .role-answer-a {
    --icon-size: var(--icon-size-md);
    --icon-gap: var(--icon-gap-sm);
  }
  .role-subhead, .role-answer-q, h1.section-hero, .section-hero.role-heading-title, h1, .section-h1.role-heading-title, h2, .section-h2.role-heading-title, h3, .section-h3.role-heading-title, h4, .section-h4.role-heading-title {
    --icon-size: var(--icon-size-lg);
    --icon-size: clamp(var(--icon-size-md), round(nearest, 1.35em, 8px), var(--icon-size-xl));
    --icon-gap: var(--icon-gap-lg);
  }
  .role-subhead, h4, .section-h4.role-heading-title {
    --icon-gap: var(--icon-gap-sm);
  }
  @media (max-width: 640px), (max-height: 480px) {
    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, .role-page-title {
      font-size: clamp(1.5rem, 6vw, 2.5rem);
      line-height: 1.12;
    }
    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;
      --icon-size: var(--icon-size-md);
    }
    .role-row-title {
      font-size: 1rem;
    }
    code, kbd, samp, pre {
      font-size: .8125rem;
    }
    pre {
      padding: .75rem .875rem;
    }
  }
}
:root {
  --dim-strategy-100: #E8F4E3;
  --dim-strategy-200: #C2E5B6;
  --dim-strategy-300: #81CF65;
  --dim-strategy-400: #5FAB42;
  --dim-strategy-500: #3A8519;
  --dim-strategy-600: #276800;
  --dim-strategy-700: #1C4700;
  --dim-human-100: #DDF5F4;
  --dim-human-200: #A6E7E5;
  --dim-human-300: #00D2C9;
  --dim-human-400: #00ABA4;
  --dim-human-500: #00837D;
  --dim-human-600: #006561;
  --dim-human-700: #004542;
  --dim-business-100: #FAEDDB;
  --dim-business-200: #F7D2A3;
  --dim-business-300: #FBA02D;
  --dim-business-400: #D47D08;
  --dim-business-500: #A55D00;
  --dim-business-600: #804800;
  --dim-business-700: #563100;
  --dim-governance-100: #F0EFED;
  --dim-governance-200: #DBD9D2;
  --dim-governance-300: #BBB8A9;
  --dim-governance-400: #999588;
  --dim-governance-500: #757165;
  --dim-governance-600: #5A584D;
  --dim-governance-700: #3D3B34;
  --dim-information-100: #F4F0DA;
  --dim-information-200: #E4DBA1;
  --dim-information-300: #D0B810;
  --dim-information-400: #AC9501;
  --dim-information-500: #847100;
  --dim-information-600: #665700;
  --dim-information-700: #443B00;
  --dim-application-100: #DDF4FE;
  --dim-application-200: #ABE3FC;
  --dim-application-300: #34C7FF;
  --dim-application-400: #03A0E4;
  --dim-application-500: #0179B3;
  --dim-application-600: #005E8B;
  --dim-application-700: #00405E;
  --dim-technology-100: #EAF0F5;
  --dim-technology-200: #C9DCED;
  --dim-technology-300: #96BBE3;
  --dim-technology-400: #7499BF;
  --dim-technology-500: #517599;
  --dim-technology-600: #3B5A7A;
  --dim-technology-700: #273D52;
  --dim-physical-100: #EAEFFF;
  --dim-physical-200: #CCD8FD;
  --dim-physical-300: #93B6FF;
  --dim-physical-400: #638EFF;
  --dim-physical-500: #4369D2;
  --dim-physical-600: #3250A6;
  --dim-physical-700: #223670;
  --dim-external-100: #FDEAEF;
  --dim-external-200: #FDC9D8;
  --dim-external-300: #FF90AF;
  --dim-external-400: #E26688;
  --dim-external-500: #B93F65;
  --dim-external-600: #94294D;
  --dim-external-700: #651C35;
  --dim-ai-100: #EFEDFE;
  --dim-ai-200: #D7D4FD;
  --dim-ai-300: #B2ABFF;
  --dim-ai-400: #8F84EE;
  --dim-ai-500: #6C5EC8;
  --dim-ai-600: #5446A2;
  --dim-ai-700: #392F6E;
}
.dim-strategy {
  --dim-100: var(--dim-strategy-100);
  --dim-200: var(--dim-strategy-200);
  --dim-300: var(--dim-strategy-300);
  --dim-400: var(--dim-strategy-400);
  --dim-500: var(--dim-strategy-500);
  --dim-600: var(--dim-strategy-600);
  --dim-700: var(--dim-strategy-700);
  --dim-icon-url: url('/images/icons/strategy-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-human {
  --dim-100: var(--dim-human-100);
  --dim-200: var(--dim-human-200);
  --dim-300: var(--dim-human-300);
  --dim-400: var(--dim-human-400);
  --dim-500: var(--dim-human-500);
  --dim-600: var(--dim-human-600);
  --dim-700: var(--dim-human-700);
  --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-200: var(--dim-business-200);
  --dim-300: var(--dim-business-300);
  --dim-400: var(--dim-business-400);
  --dim-500: var(--dim-business-500);
  --dim-600: var(--dim-business-600);
  --dim-700: var(--dim-business-700);
  --dim-icon-url: url('/images/icons/business-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-governance {
  --dim-100: var(--dim-governance-100);
  --dim-200: var(--dim-governance-200);
  --dim-300: var(--dim-governance-300);
  --dim-400: var(--dim-governance-400);
  --dim-500: var(--dim-governance-500);
  --dim-600: var(--dim-governance-600);
  --dim-700: var(--dim-governance-700);
  --dim-icon-url: url('/images/icons/governance-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-information {
  --dim-100: var(--dim-information-100);
  --dim-200: var(--dim-information-200);
  --dim-300: var(--dim-information-300);
  --dim-400: var(--dim-information-400);
  --dim-500: var(--dim-information-500);
  --dim-600: var(--dim-information-600);
  --dim-700: var(--dim-information-700);
  --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-200: var(--dim-application-200);
  --dim-300: var(--dim-application-300);
  --dim-400: var(--dim-application-400);
  --dim-500: var(--dim-application-500);
  --dim-600: var(--dim-application-600);
  --dim-700: var(--dim-application-700);
  --dim-icon-url: url('/images/icons/application-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-technology {
  --dim-100: var(--dim-technology-100);
  --dim-200: var(--dim-technology-200);
  --dim-300: var(--dim-technology-300);
  --dim-400: var(--dim-technology-400);
  --dim-500: var(--dim-technology-500);
  --dim-600: var(--dim-technology-600);
  --dim-700: var(--dim-technology-700);
  --dim-icon-url: url('/images/icons/technology-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-physical {
  --dim-100: var(--dim-physical-100);
  --dim-200: var(--dim-physical-200);
  --dim-300: var(--dim-physical-300);
  --dim-400: var(--dim-physical-400);
  --dim-500: var(--dim-physical-500);
  --dim-600: var(--dim-physical-600);
  --dim-700: var(--dim-physical-700);
  --dim-icon-url: url('/images/icons/physical-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-external {
  --dim-100: var(--dim-external-100);
  --dim-200: var(--dim-external-200);
  --dim-300: var(--dim-external-300);
  --dim-400: var(--dim-external-400);
  --dim-500: var(--dim-external-500);
  --dim-600: var(--dim-external-600);
  --dim-700: var(--dim-external-700);
  --dim-icon-url: url('/images/icons/external-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-ai {
  --dim-100: var(--dim-ai-100);
  --dim-200: var(--dim-ai-200);
  --dim-300: var(--dim-ai-300);
  --dim-400: var(--dim-ai-400);
  --dim-500: var(--dim-ai-500);
  --dim-600: var(--dim-ai-600);
  --dim-700: var(--dim-ai-700);
  --dim-icon-url: url('/images/icons/ai-icon.svg');
  --icon-url: var(--dim-icon-url);
}
.dim-neutral {
  --dim-100: var(--secondary-100);
  --dim-200: var(--secondary-200);
  --dim-300: var(--gray-300);
  --dim-400: var(--gray-400);
  --dim-500: var(--gray-500);
  --dim-600: var(--gray-600);
  --dim-700: var(--gray-700);
  --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: #FEEAEA;
  --cat-blocker-200: #FECACA;
  --cat-blocker-300: #FB9797;
  --cat-blocker-400: #F35A59;
  --cat-blocker-500: #CE2222;
  --cat-blocker-600: #A01B1B;
  --cat-blocker-700: #6C1717;
}
.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-200: var(--cat-blocker-200);
  --dim-300: var(--cat-blocker-300);
  --dim-400: var(--cat-blocker-400);
  --dim-500: var(--cat-blocker-500);
  --dim-600: var(--cat-blocker-600);
  --dim-700: var(--cat-blocker-700);
  --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 {
  --icon-search: url('/images/icons/search-icon.svg');
  --icon-explore: url('/images/icons/explore-icon.svg');
  --icon-play: url('/images/icons/play-icon.svg');
  --icon-run: url('/images/icons/run-icon.svg');
  --icon-config: url('/images/icons/config-icon.svg');
  --icon-preferences: url('/images/icons/preferences-icon.svg');
  --icon-help: url('/images/icons/help-icon.svg');
  --icon-info: url('/images/icons/info-icon.svg');
  --icon-check: url('/images/icons/check-icon.svg');
  --icon-checkbox: url('/images/icons/checkbox-icon.svg');
  --icon-clip: url('/images/icons/clip-icon.svg');
  --icon-link: url('/images/icons/link.svg');
  --icon-chain: url('/images/icons/chain-icon.svg');
  --icon-chain-broken: url('/images/icons/chain-broken-icon.svg');
  --icon-rotate-360: url('/images/icons/rotate-360-icon.svg');
  --icon-tag: url('/images/icons/tag-icon.svg');
  --icon-key: url('/images/icons/key.svg');
  --icon-i18n: url('/images/icons/i18n.svg');
  --icon-sun: url('/images/icons/sun.svg');
  --icon-moon: url('/images/icons/moon.svg');
  --icon-email: url('/images/icons/email-icon.svg');
  --icon-phone: url('/images/icons/phone.svg');
  --icon-calendar: url('/images/icons/calendar-icon.svg');
  --icon-clock: url('/images/icons/clock-icon.svg');
  --icon-timestamp: url('/images/icons/timestamp-icon.svg');
  --icon-history: url('/images/icons/history-icon.svg');
  --icon-folder: url('/images/icons/folder-icon.svg');
  --icon-notebook: url('/images/icons/notebook-icon.svg');
  --icon-id: url('/images/icons/id-icon.svg');
  --icon-statuses: url('/images/icons/statuses-icon.svg');
  --icon-properties: url('/images/icons/properties-icon.svg');
  --icon-properties-categories: url('/images/icons/properties-categories-icon.svg');
  --icon-route: url('/images/icons/route-icon.svg');
  --icon-geo: url('/images/icons/geo-icon.svg');
  --icon-geo-map: url('/images/icons/geo-map.svg');
  --icon-report: url('/images/icons/report-icon.svg');
  --icon-tasks: url('/images/icons/tasks-icon.svg');
  --icon-person: url('/images/icons/person-icon.svg');
  --icon-logout: url('/images/icons/logout-icon.svg');
  --icon-rubber: url('/images/icons/rubber-icon.svg');
  --icon-page: url('/images/icons/page-icon.svg');
  --icon-plexus: url('/images/icons/plexus.svg');
  --icon-node-type: url('/images/icons/node-type-icon.svg');
  --icon-relation: url('/images/icons/relation-icon.svg');
  --icon-perspective: url('/images/icons/perspective-icon.svg');
  --icon-ortogonal-plane: url('/images/icons/ortogonal-plane-icon.svg');
  --icon-function-dimension: url('/images/icons/function-dimension-icon.svg');
  --icon-organization-dimension: url('/images/icons/organization-dimension-icon.svg');
  --icon-grouping: url('/images/icons/grouping-icon.svg');
  --icon-data-product: url('/images/icons/data-product-icon.svg');
  --icon-data-quality: url('/images/icons/data-quality-icon.svg');
  --icon-integration: url('/images/icons/integration-icon.svg');
  --icon-migration: url('/images/icons/migration-icon.svg');
  --icon-processing: url('/images/icons/processing-icon.svg');
  --icon-protected-flow: url('/images/icons/protected-flow-icon.svg');
  --icon-protection: url('/images/icons/protection-icon.svg');
  --icon-shield: url('/images/icons/shield-icon.svg');
  --icon-identity: url('/images/icons/identity-icon.svg');
  --icon-responsibility: url('/images/icons/responsibility-icon.svg');
  --icon-partner-supplier: url('/images/icons/partner-supplier-icon.svg');
  --icon-human: url('/images/icons/human-icon.svg');
  --icon-idea: url('/images/icons/idea-icon.svg');
  --icon-puzzle: url('/images/icons/puzzle-icon.svg');
  --icon-api: url('/images/icons/api-icon.svg');
  --icon-cloud: url('/images/icons/cloud-icon.svg');
  --icon-building: url('/images/icons/building-icon.svg');
  --icon-enterprise-application: url('/images/icons/enterprise-application-icon.svg');
  --icon-remote-service: url('/images/icons/remote-service-icon.svg');
  --icon-dedicated-environment: url('/images/icons/dedicated-environment-icon.svg');
  --icon-automation-agent: url('/images/icons/automation-agent-icon.svg');
  --icon-ai-chat: url('/images/icons/ai-chat-icon.svg');
  --icon-database-backup: url('/images/icons/database-backup-icon.svg');
  --icon-database-svgrepo-com: url('/images/icons/database-svgrepo-com.svg');
  --icon-database-light: url('/images/icons/database-light-icon.svg');
  --icon-servers-dark: url('/images/icons/servers-dark-icon.svg');
  --icon-service-icon-2: url('/images/icons/service-icon-2.svg');
  --icon-team-2: url('/images/icons/team-2-icon.svg');
  --icon-puzzle-line: url('/images/icons/puzzle-line.svg');
  --icon-settings-cog-svgrepo-com: url('/images/icons/settings-cog-svgrepo-com.svg');
}
.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
  width: var(--icon-size, var(--icon-size-md));
  height: var(--icon-size, var(--icon-size-md));
}
.icon-library-class {
  font-size: var(--icon-size, var(--icon-size-md));
  line-height: 1;
  text-align: center;
}
.icon-svg-markup svg {
  display: block;
  width: 100%;
  height: 100%;
}
.icon-mask {
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}
.icon-boxed {
  position: relative;
  --_box: var(--icon-bg-color, var(--bg-hover));
  --_ink: var(--icon-color, currentColor);
  background-color: var(--_box);
  border-radius: var(--icon-radius, 6px);
  box-shadow: inset 0 0 0 1px var(--icon-border-color, transparent);
}
.icon-boxed:not(.icon-library-class):not(.icon-svg-markup)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--_ink);
  -webkit-mask: var(--icon-url) center / var(--icon-glyph, 18px) var(--icon-glyph, 18px) no-repeat;
  mask: var(--icon-url) center / var(--icon-glyph, 18px) var(--icon-glyph, 18px) no-repeat;
}
.icon-boxed.icon-library-class {
  color: var(--_ink);
  font-size: var(--icon-glyph, 18px);
  line-height: var(--icon-size, var(--icon-size-md));
}
.icon-boxed.icon-svg-markup {
  color: var(--_ink);
  display: inline-grid;
  place-items: center;
}
.icon-boxed.icon-svg-markup svg {
  width: var(--icon-glyph, 18px);
  height: var(--icon-glyph, 18px);
}
.accent > .icon-boxed, .icon-boxed.accent {
  --_box: var(--icon-color, currentColor);
  --_ink: var(--icon-bg-color, var(--bg-color));
  box-shadow: none;
}
[class*="dim-"] {
  --icon-bg-color: var(--dim-100);
  --icon-color: var(--dim-600);
  --icon-border-color: var(--dim-300);
}
[class*="dim-"] {
  --dim-text1: var(--dim-300);
  @supports (color: color-mix(in lab, red, red)) {
    --dim-text1: color-mix(in srgb, var(--dim-300) calc(var(--mode-dark, 0) * 100%), var(--dim-600));
  }
}
.icon-mask[class*="dim-"] {
  color: var(--dim-text1);
}
.icon-xs {
  --icon-size: var(--icon-size-xs);
  --icon-glyph: 12px;
  --icon-radius: 4px;
}
.icon-sm {
  --icon-size: var(--icon-size-sm);
  --icon-glyph: 16px;
  --icon-radius: 5px;
}
.icon-md {
  --icon-size: var(--icon-size-md);
  --icon-glyph: 18px;
  --icon-radius: 6px;
}
.icon-lg {
  --icon-size: var(--icon-size-lg);
  --icon-glyph: 24px;
  --icon-radius: 8px;
}
.icon-xl {
  --icon-size: var(--icon-size-xl);
  --icon-glyph: 30px;
  --icon-radius: 10px;
}
:root {
  --icon-gap-sm: var(--space-2);
  --icon-gap-lg: var(--space-3);
  --icon-stacked: var(--icon-size-md);
}
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap, var(--icon-gap-sm));
}
.icon-text-top {
  align-items: flex-start;
}
.icon-text-top > .icon {
  margin-top: max(0px, calc((1lh - var(--icon-size, var(--icon-size-md))) / 2));
}
.icon-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  --icon-size: var(--icon-stacked);
}
.icon-search {
  --icon-url: var(--icon-search);
}
.icon-explore {
  --icon-url: var(--icon-explore);
}
.icon-play {
  --icon-url: var(--icon-play);
}
.icon-run {
  --icon-url: var(--icon-run);
}
.icon-config {
  --icon-url: var(--icon-config);
}
.icon-preferences {
  --icon-url: var(--icon-preferences);
}
.icon-help {
  --icon-url: var(--icon-help);
}
.icon-info {
  --icon-url: var(--icon-info);
}
.icon-check {
  --icon-url: var(--icon-check);
}
.icon-checkbox {
  --icon-url: var(--icon-checkbox);
}
.icon-clip {
  --icon-url: var(--icon-clip);
}
.icon-link {
  --icon-url: var(--icon-link);
}
.icon-chain {
  --icon-url: var(--icon-chain);
}
.icon-chain-broken {
  --icon-url: var(--icon-chain-broken);
}
.icon-rotate-360 {
  --icon-url: var(--icon-rotate-360);
}
.icon-tag {
  --icon-url: var(--icon-tag);
}
.icon-key {
  --icon-url: var(--icon-key);
}
.icon-i18n {
  --icon-url: var(--icon-i18n);
}
.icon-sun {
  --icon-url: var(--icon-sun);
}
.icon-moon {
  --icon-url: var(--icon-moon);
}
.icon-email {
  --icon-url: var(--icon-email);
}
.icon-phone {
  --icon-url: var(--icon-phone);
}
.icon-calendar {
  --icon-url: var(--icon-calendar);
}
.icon-clock {
  --icon-url: var(--icon-clock);
}
.icon-timestamp {
  --icon-url: var(--icon-timestamp);
}
.icon-history {
  --icon-url: var(--icon-history);
}
.icon-folder {
  --icon-url: var(--icon-folder);
}
.icon-notebook {
  --icon-url: var(--icon-notebook);
}
.icon-id {
  --icon-url: var(--icon-id);
}
.icon-statuses {
  --icon-url: var(--icon-statuses);
}
.icon-properties {
  --icon-url: var(--icon-properties);
}
.icon-properties-categories {
  --icon-url: var(--icon-properties-categories);
}
.icon-route {
  --icon-url: var(--icon-route);
}
.icon-geo {
  --icon-url: var(--icon-geo);
}
.icon-geo-map {
  --icon-url: var(--icon-geo-map);
}
.icon-report {
  --icon-url: var(--icon-report);
}
.icon-tasks {
  --icon-url: var(--icon-tasks);
}
.icon-person {
  --icon-url: var(--icon-person);
}
.icon-logout {
  --icon-url: var(--icon-logout);
}
.icon-rubber {
  --icon-url: var(--icon-rubber);
}
.icon-page {
  --icon-url: var(--icon-page);
}
.icon-plexus {
  --icon-url: var(--icon-plexus);
}
.icon-node-type {
  --icon-url: var(--icon-node-type);
}
.icon-relation {
  --icon-url: var(--icon-relation);
}
.icon-perspective {
  --icon-url: var(--icon-perspective);
}
.icon-ortogonal-plane {
  --icon-url: var(--icon-ortogonal-plane);
}
.icon-function-dimension {
  --icon-url: var(--icon-function-dimension);
}
.icon-organization-dimension {
  --icon-url: var(--icon-organization-dimension);
}
.icon-grouping {
  --icon-url: var(--icon-grouping);
}
.icon-data-product {
  --icon-url: var(--icon-data-product);
}
.icon-data-quality {
  --icon-url: var(--icon-data-quality);
}
.icon-integration {
  --icon-url: var(--icon-integration);
}
.icon-migration {
  --icon-url: var(--icon-migration);
}
.icon-processing {
  --icon-url: var(--icon-processing);
}
.icon-protected-flow {
  --icon-url: var(--icon-protected-flow);
}
.icon-protection {
  --icon-url: var(--icon-protection);
}
.icon-shield {
  --icon-url: var(--icon-shield);
}
.icon-identity {
  --icon-url: var(--icon-identity);
}
.icon-responsibility {
  --icon-url: var(--icon-responsibility);
}
.icon-partner-supplier {
  --icon-url: var(--icon-partner-supplier);
}
.icon-human {
  --icon-url: var(--icon-human);
}
.icon-idea {
  --icon-url: var(--icon-idea);
}
.icon-puzzle {
  --icon-url: var(--icon-puzzle);
}
.icon-api {
  --icon-url: var(--icon-api);
}
.icon-cloud {
  --icon-url: var(--icon-cloud);
}
.icon-building {
  --icon-url: var(--icon-building);
}
.icon-enterprise-application {
  --icon-url: var(--icon-enterprise-application);
}
.icon-remote-service {
  --icon-url: var(--icon-remote-service);
}
.icon-dedicated-environment {
  --icon-url: var(--icon-dedicated-environment);
}
.icon-automation-agent {
  --icon-url: var(--icon-automation-agent);
}
.icon-ai-chat {
  --icon-url: var(--icon-ai-chat);
}
.icon-database-backup {
  --icon-url: var(--icon-database-backup);
}
.icon-database-svgrepo-com {
  --icon-url: var(--icon-database-svgrepo-com);
}
.icon-database-light {
  --icon-url: var(--icon-database-light);
}
.icon-servers-dark {
  --icon-url: var(--icon-servers-dark);
}
.icon-service-icon-2 {
  --icon-url: var(--icon-service-icon-2);
}
.icon-team-2 {
  --icon-url: var(--icon-team-2);
}
.icon-puzzle-line {
  --icon-url: var(--icon-puzzle-line);
}
.icon-settings-cog-svgrepo-com {
  --icon-url: var(--icon-settings-cog-svgrepo-com);
}
:root {
  --icon-tile-sm: var(--size-5);
  --icon-tile-sm-glyph: var(--icon-size-sm);
  --icon-tile-md: var(--content-size-2);
  --icon-tile-md-glyph: var(--icon-size-md);
  --icon-tile-lg: var(--size-6);
  --icon-tile-lg-glyph: var(--icon-size-lg);
  --icon-btn-sm: var(--size-5);
  --icon-btn-sm-glyph: var(--icon-size-sm);
  --icon-btn-md: var(--content-size-2);
  --icon-btn-md-glyph: var(--icon-size-md);
  --icon-btn-lg: var(--size-6);
  --icon-btn-lg-glyph: var(--icon-size-md);
}
.icon-tile, .icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--box);
  height: var(--box);
  --icon-size: var(--glyph);
}
.icon-tile {
  border-radius: var(--radius-2);
  background: var(--bg-hover);
  color: var(--accent);
}
.icon-btn {
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--text2);
  border: 0;
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text1);
}
.icon-tile, .icon-tile-md {
  --box: var(--icon-tile-md);
  --glyph: var(--icon-tile-md-glyph);
}
.icon-tile-sm {
  --box: var(--icon-tile-sm);
  --glyph: var(--icon-tile-sm-glyph);
}
.icon-tile-lg {
  --box: var(--icon-tile-lg);
  --glyph: var(--icon-tile-lg-glyph);
}
.icon-btn, .icon-btn-md {
  --box: var(--icon-btn-md);
  --glyph: var(--icon-btn-md-glyph);
}
.icon-btn-sm {
  --box: var(--icon-btn-sm);
  --glyph: var(--icon-btn-sm-glyph);
}
.icon-btn-lg {
  --box: var(--icon-btn-lg);
  --glyph: var(--icon-btn-lg-glyph);
}
@media (max-width: 640px) {
  .icon-btn {
    min-width: var(--mobile-tap);
    min-height: var(--mobile-tap);
  }
}
: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;
}
.geo-spatial-map--light {
  --map-layer-focal: var(--primary-600);
  --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 {
  :root, .surface-light, .surface-white, .surface-light-cold, .surface-light-warm, .surface-light-warm2, .surface-paper, .surface-neutral, .surface-white .form, .surface-light-cold .form, .surface-light-warm .form, .surface-light-warm2 .form, .surface-dark-blue .form, :is(html[data-theme="dark"], .surface-dark, .surface-dark-blue) .surface-inverse {
    color-scheme: light;
    --mode-dark: 0;
    --text1: var(--secondary-900);
    --text2: var(--gray-700);
    --text3: var(--gray-600);
    --text-muted: var(--gray-300);
    --text-accent: var(--primary-600);
    --text-accent-2: var(--secondary-600);
    --accent: var(--primary-600);
    --contrast-color: #ffffff;
    --menu-text: var(--gray-700);
    --menu-text-hover: var(--secondary-700);
    --menu-text-selected: var(--secondary-600);
    --link-text: var(--secondary-600);
    --link-text-hover: var(--secondary-700);
    --link-text-selected: var(--secondary-700);
    --text-selected: var(--secondary-600);
    --text3-selected: var(--gray-600);
    --shadow: 2px 2px 4px rgba(0,0,0,0.2);
    --wm-op: .08;
    --btn-color: var(--gray-900);
    --btn-border: none;
    --btn-secondary-border-color: var(--secondary-500);
    --line-ink: var(--text1);
    --line-subtle: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-subtle: color-mix(in srgb, var(--line-ink) 7%, transparent);
    }
    --line: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line: color-mix(in srgb, var(--line-ink) 12%, transparent);
    }
    --line-strong: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-strong: color-mix(in srgb, var(--line-ink) 48%, transparent);
    }
    --tint: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --tint: color-mix(in srgb, var(--line-ink) 4%, transparent);
    }
    --tint-strong: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --tint-strong: color-mix(in srgb, var(--line-ink) 8%, transparent);
    }
    --scrim: color-mix(in srgb, #000714 48%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --scrim: color-mix(in srgb, var(--secondary-950) 48%, transparent);
    }
  }
  :root, .surface-light, .surface-white, .surface-light-cold .form {
    --bg-color: #ffffff;
    --surface-paper: #ffffff;
    --bg-image: url(/images/bg-nodwise-white.svg);
    --wm: var(--primary-400);
    --bg-hover: var(--secondary-50);
    --bg-selected: var(--secondary-100);
    --surface2: var(--secondary-50);
    --btn-background: #ffffff;
    --btn-shadow: 2px 2px 4px var(--gray-200);
    --btn-shadow-hover: 2px 2px 18px var(--gray-200);
  }
  .surface-light-cold, .surface-neutral, .surface-white .form, .surface-light-warm2 .form, .surface-dark-blue .form {
    --bg-color: var(--secondary-50);
    --surface-paper: var(--secondary-50);
    --bg-image: url(/images/bg-nodwise-light-cold.svg);
    --wm: var(--secondary-400);
    --bg-hover: var(--secondary-100);
    --bg-selected: var(--secondary-200);
    --surface2: var(--secondary-100);
    --btn-background: var(--secondary-50);
    --btn-shadow: 2px 2px 4px var(--gray-200);
    --btn-shadow-hover: 2px 2px 18px var(--gray-200);
  }
  .surface-light-warm, .surface-paper {
    --bg-color: var(--warm-50);
    --surface-paper: var(--warm-50);
    --bg-image: url(/images/bg-nodwise-light-warm.svg);
    --wm: var(--warm-400);
    --bg-hover: var(--warm-100);
    --bg-selected: var(--warm-200);
    --surface2: var(--warm-100);
    --btn-background: var(--warm-100);
    --btn-shadow: 2px 2px 4px var(--warm-200);
    --btn-shadow-hover: 2px 2px 18px var(--warm-200);
    --line-ink: var(--text1);
    @supports (color: color-mix(in lab, red, red)) {
      --line-ink: color-mix(in oklab, var(--text1) 78%, var(--warm-400));
    }
    --line-strong: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-strong: color-mix(in srgb, var(--line-ink) 56%, transparent);
    }
  }
  .surface-light-warm2, .surface-light-warm .form {
    --bg-color: var(--warm-100);
    --surface-paper: var(--warm-100);
    --bg-image: url(/images/bg-nodwise-light-warm2.svg);
    --wm: var(--warm-400);
    --bg-hover: var(--warm-50);
    --bg-selected: var(--warm-200);
    --surface2: var(--warm-200);
    --btn-background: var(--warm-100);
    --btn-shadow: 2px 2px 4px var(--warm-200);
    --btn-shadow-hover: 2px 2px 18px var(--warm-200);
    --line-ink: var(--text1);
    @supports (color: color-mix(in lab, red, red)) {
      --line-ink: color-mix(in oklab, var(--text1) 78%, var(--warm-400));
    }
    --line-strong: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-strong: color-mix(in srgb, var(--line-ink) 56%, transparent);
    }
  }
  html[data-theme="dark"], .surface-dark, .surface-dark-blue, .surface-dark .form, .surface-inverse {
    color-scheme: dark;
    --mode-dark: 1;
    --text1: var(--secondary-50);
    --text2: var(--secondary-200);
    --text-accent: var(--primary-200);
    --text-accent-2: var(--secondary-300);
    --accent: var(--primary-200);
    --contrast-color: var(--secondary-950);
    --menu-text: var(--secondary-50);
    --menu-text-hover: var(--primary-300);
    --menu-text-selected: var(--primary-200);
    --link-text: var(--secondary-300);
    --link-text-hover: var(--secondary-200);
    --link-text-selected: var(--primary-200);
    --text-selected: var(--primary-200);
    --text3-selected: var(--secondary-300);
    --shadow: 2px 2px 4px rgba(0,0,0,0.2);
    --wm: var(--secondary-200);
    --btn-color: var(--secondary-50);
    --btn-secondary-border-color: var(--secondary-300);
    --line-ink: var(--text1);
    --line-subtle: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-subtle: color-mix(in srgb, var(--line-ink) 8%, transparent);
    }
    --line: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line: color-mix(in srgb, var(--line-ink) 14%, transparent);
    }
    --line-strong: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-strong: color-mix(in srgb, var(--line-ink) 40%, transparent);
    }
    --tint: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --tint: color-mix(in srgb, var(--line-ink) 4%, transparent);
    }
    --tint-strong: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --tint-strong: color-mix(in srgb, var(--line-ink) 8%, transparent);
    }
    --scrim: color-mix(in srgb, #000714 64%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --scrim: color-mix(in srgb, var(--secondary-950) 64%, transparent);
    }
  }
  html[data-theme="dark"], .surface-dark, .surface-dark .form, .surface-inverse {
    --bg-color: var(--secondary-950);
    --surface-paper: var(--secondary-950);
    --bg-image: url(/images/bg-nodwise-dark.svg);
    --text3: var(--secondary-400);
    --text-muted: var(--gray-600);
    --wm-op: .10;
    --bg-hover: var(--secondary-800);
    --bg-selected: var(--secondary-700);
    --surface2: var(--secondary-800);
    --btn-background: var(--gray-900);
    --btn-shadow: none;
    --btn-shadow-hover: none;
    --btn-border: 1px solid var(--secondary-600);
  }
  .surface-dark-blue {
    --bg-color: var(--secondary-700);
    --surface-paper: var(--secondary-700);
    --bg-image: url(/images/bg-nodwise-dark-blue.svg);
    --text3: var(--secondary-300);
    --text-muted: var(--secondary-500);
    --wm-op: .06;
    --bg-hover: var(--secondary-800);
    --bg-selected: var(--secondary-950);
    --surface2: var(--secondary-800);
    --btn-background: var(--secondary-800);
    --btn-shadow: none;
    --btn-shadow-hover: none;
    --btn-border: none;
    --line-subtle: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-subtle: color-mix(in srgb, var(--line-ink) 12%, transparent);
    }
    --line: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line: color-mix(in srgb, var(--line-ink) 20%, transparent);
    }
    --line-strong: var(--line-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-strong: color-mix(in srgb, var(--line-ink) 50%, transparent);
    }
    --tint: color-mix(in srgb, #000714 16%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tint: color-mix(in srgb, var(--secondary-950) 16%, transparent);
    }
    --tint-strong: color-mix(in srgb, #000714 28%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tint-strong: color-mix(in srgb, var(--secondary-950) 28%, transparent);
    }
  }
  .surface-dark .form {
    border: 1px solid var(--secondary-500);
  }
  :where(html[data-theme="dark"]) .dim-surface, :is(.surface-dark, .surface-dark-blue) .dim-surface, .surface-dark .form .dim-surface {
    color-scheme: dark;
    --mode-dark: 1;
    --bg-color: var(--dim-700);
    --wm: var(--dim-300);
    --wm-op: .08;
    --accent: var(--dim-300);
    --text-accent: var(--dim-300);
    --text-accent-2: var(--dim-300);
    --link-text: var(--dim-300);
    --link-text-hover: var(--dim-100);
    --link-text-selected: var(--dim-100);
    --shadow: 0px 0px 6px var(--dim-400);
    --text1: var(--secondary-50);
    --text2: var(--gray-200);
    --text3: var(--gray-300);
    --text-muted: var(--gray-600);
  }
  :where(:root) .dim-surface, :is(.surface-light, .surface-white, .surface-light-cold, .surface-light-warm, .surface-light-warm2, .surface-paper, .surface-neutral) .dim-surface, :is(.surface-white, .surface-light-cold, .surface-light-warm, .surface-light-warm2, .surface-dark-blue) .form .dim-surface {
    color-scheme: light;
    --mode-dark: 0;
    --bg-color: var(--dim-100);
    --wm: var(--dim-400);
    --wm-op: .14;
    --accent: var(--dim-600);
    --text-accent: var(--dim-600);
    --text-accent-2: var(--dim-600);
    --link-text: var(--dim-600);
    --link-text-hover: var(--dim-700);
    --link-text-selected: var(--dim-700);
    --shadow: 2px 2px 4px var(--gray-200);
    --text1: var(--gray-900);
    --text2: var(--gray-700);
    --text3: var(--gray-600);
    --text-muted: var(--gray-300);
  }
  :where(:root) .dim-surface:where(.dim-outlined), :is(.surface-light, .surface-white, .surface-light-cold, .surface-light-warm, .surface-light-warm2, .surface-paper, .surface-neutral) .dim-surface.dim-outlined, :is(.surface-white, .surface-light-cold, .surface-light-warm, .surface-light-warm2, .surface-dark-blue) .form .dim-surface.dim-outlined {
    color-scheme: light;
    --mode-dark: 0;
    --bg-color: #ffffff;
    --dim-border: var(--dim-500);
    --dim-icon: var(--dim-500);
    --wm: var(--dim-500);
    --wm-op: .12;
    --accent: var(--dim-600);
    --text-accent: var(--dim-600);
    --link-text: var(--dim-600);
    --shadow: 2px 2px 4px var(--gray-200);
    --text1: var(--dim-700);
    --text2: var(--dim-600);
    --text3: var(--gray-600);
  }
  :where(html[data-theme="dark"]) .dim-surface:where(.dim-outlined), :is(.surface-dark, .surface-dark-blue) .dim-surface.dim-outlined, .surface-dark .form .dim-surface.dim-outlined {
    color-scheme: dark;
    --mode-dark: 1;
    --bg-color: var(--secondary-950);
    --dim-border: var(--dim-500);
    --dim-icon: var(--dim-500);
    --wm: var(--dim-500);
    --wm-op: .12;
    --accent: var(--dim-400);
    --text-accent: var(--dim-400);
    --link-text: var(--dim-300);
    --shadow: 0px 0px 6px var(--dim-500);
    --text1: var(--secondary-50);
    --text2: var(--dim-100);
    --text3: var(--gray-400);
  }
  .dim-surface {
    --dim-icon: var(--accent);
  }
  .surface {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);
    color: var(--text1);
    box-shadow: var(--shadow);
  }
  .form {
    overflow: hidden;
    border-radius: var(--radius-3);
    padding-inline: var(--padding-inline-4);
    padding-block: var(--padding-block-4);
    background-color: var(--bg-color);
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--text1);
    box-shadow: var(--shadow);
  }
  .surface-paper {
    background-color: var(--bg-color);
    color: var(--text1);
  }
  .is-interactive:hover, :is([role="option"], [role="menuitem"], [role="tab"], [role="treeitem"]):hover, .surface-paper:hover {
    background-color: var(--bg-hover);
  }
  :is(.is-interactive, [role="option"], [role="menuitem"], [role="tab"], [role="treeitem"], [class*="surface-"]):is(.selected, [aria-selected="true"]) {
    background-color: var(--bg-selected);
    color: var(--text-selected);
    --text1: var(--text-selected);
    --text3: var(--text3-selected);
  }
  :where(.surface-light-warm, .surface-light-warm2, .surface-paper, .surface-light-warm .form, .surface-light-cold, .surface-white .form, .surface-light-warm2 .form, .surface-dark-blue .form) .segmented {
    --bg-selected: var(--secondary-700);
    --menu-text-selected: var(--secondary-50);
  }
  :where(html[data-theme="dark"], .surface-dark, .surface-dark .form, .surface-inverse) .segmented {
    --surface2: var(--gray-800);
    --bg-selected: var(--gray-600);
    --menu-text: var(--gray-300);
    --menu-text-selected: var(--secondary-50);
  }
  [class*="dim-"] .segmented {
    --_d: calc(var(--mode-dark, 0) * 100%);
    --surface2: var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      --surface2: color-mix(in srgb, var(--dim-700) var(--_d), var(--dim-100));
    }
    --menu-text: var(--dim-100);
    @supports (color: color-mix(in lab, red, red)) {
      --menu-text: color-mix(in srgb, var(--dim-100) var(--_d), var(--dim-700));
    }
    --menu-text-hover: var(--menu-text);
    --bg-selected: var(--dim-300);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-selected: color-mix(in srgb, var(--dim-300) var(--_d), var(--dim-600));
    }
    --menu-text-selected: var(--dim-700);
    @supports (color: color-mix(in lab, red, red)) {
      --menu-text-selected: color-mix(in srgb, var(--dim-700) var(--_d), var(--dim-100));
    }
  }
  :root {
    --surface-float-shadow: 0 1px 2px rgb(0 8 16 / .10), 0 4px 12px rgb(0 8 16 / .08);
  }
  :where(.surface-light-cold, .surface-neutral, .surface-light-warm, .surface-paper, .surface-light-warm2, .surface-dark, html[data-theme="dark"], .surface-dark-blue) :where(.surface-white, .surface-light), :where(.surface-white, .surface-light, .surface-light-warm, .surface-paper, .surface-light-warm2, .surface-dark, html[data-theme="dark"], .surface-dark-blue) :where(.surface-light-cold, .surface-neutral), :where(.surface-white, .surface-light, .surface-light-cold, .surface-neutral, .surface-light-warm2, .surface-dark, html[data-theme="dark"], .surface-dark-blue) :where(.surface-light-warm, .surface-paper), :where(.surface-white, .surface-light, .surface-light-cold, .surface-neutral, .surface-light-warm, .surface-paper, .surface-dark, html[data-theme="dark"], .surface-dark-blue) :where(.surface-light-warm2), :where(.surface-white, .surface-light, .surface-light-cold, .surface-neutral, .surface-light-warm, .surface-paper, .surface-light-warm2, .surface-dark-blue) :where(.surface-dark), :where(.surface-white, .surface-light, .surface-light-cold, .surface-neutral, .surface-light-warm, .surface-paper, .surface-light-warm2, .surface-dark, html[data-theme="dark"]) :where(.surface-dark-blue), .bg-cutout {
    background-color: var(--bg-color);
    background-image: var(--bg-image);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  :where(.surface-light-cold, .surface-neutral, .surface-light-warm, .surface-paper, .surface-light-warm2, .surface-dark, html[data-theme="dark"], .surface-dark-blue) :where(.surface-white, .surface-light), :where(.surface-white, .surface-light, .surface-light-warm, .surface-paper, .surface-light-warm2, .surface-dark, html[data-theme="dark"], .surface-dark-blue) :where(.surface-light-cold, .surface-neutral), :where(.surface-white, .surface-light, .surface-light-cold, .surface-neutral, .surface-light-warm2, .surface-dark, html[data-theme="dark"], .surface-dark-blue) :where(.surface-light-warm, .surface-paper), :where(.surface-white, .surface-light, .surface-light-cold, .surface-neutral, .surface-light-warm, .surface-paper, .surface-dark, html[data-theme="dark"], .surface-dark-blue) :where(.surface-light-warm2), :where(.surface-white, .surface-light, .surface-light-cold, .surface-neutral, .surface-light-warm, .surface-paper, .surface-light-warm2, .surface-dark-blue) :where(.surface-dark), :where(.surface-white, .surface-light, .surface-light-cold, .surface-neutral, .surface-light-warm, .surface-paper, .surface-light-warm2, .surface-dark, html[data-theme="dark"]) :where(.surface-dark-blue) {
    box-shadow: var(--surface-float-shadow);
  }
}
@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 .icon-text {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .ctn-align-center .icon-text {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ctn-align-right .icon-text {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
:root {
  --track-sm: var(--content-size-5);
  --track-md: var(--content-size-6);
  --track-lg: var(--content-size-7);
  --layout-measure: 712px;
  --layout-wide: 1152px;
  --layout-max: var(--content-size-11);
}
:root, [data-density="regular"] {
  --fill-pad: var(--space-4);
  --fill-gap: var(--space-3);
  --fill-radius: var(--radius-3);
  --gutter: var(--space-4);
}
[data-density="compact"] {
  --fill-pad: var(--space-3);
  --fill-gap: var(--space-2);
  --fill-radius: var(--radius-2);
  --gutter: var(--space-3);
}
[data-density="comfortable"] {
  --fill-pad: var(--space-5);
  --fill-gap: var(--space-4);
  --fill-radius: var(--radius-4);
  --gutter: var(--space-5);
}
@layer components {
  .wrap-0, .wrap-1, .wrap-2, .wrap-3 {
    --wrap-inner-radius: 0px;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: calc(var(--wrap-content) + 2 * var(--wrap-pad));
    block-size: calc(var(--wrap-content) + 2 * var(--wrap-pad));
    padding: var(--wrap-pad);
    border-radius: calc(var(--wrap-inner-radius) + var(--wrap-pad));
  }
  .wrap-0 {
    --wrap-content: var(--content-size-0);
    --wrap-pad: var(--space-1);
  }
  .wrap-1 {
    --wrap-content: var(--content-size-1);
    --wrap-pad: var(--space-2);
  }
  .wrap-2 {
    --wrap-content: var(--content-size-2);
    --wrap-pad: var(--space-3);
  }
  .wrap-3 {
    --wrap-content: var(--content-size-3);
    --wrap-pad: var(--space-4);
  }
  :is(.wrap-0, .wrap-1, .wrap-2, .wrap-3) > * {
    inline-size: var(--wrap-content);
    block-size: var(--wrap-content);
  }
  .wrap-round {
    border-radius: 50%;
  }
  :where(.card, .form) {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    padding: var(--fill-pad);
    gap: var(--fill-gap);
    border-radius: var(--fill-radius);
  }
  :where(.card, .form) > * {
    min-inline-size: 0;
  }
  .layout-page {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: var(--layout-max);
    margin-inline: auto;
    padding-inline: var(--page-side-margin);
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    container-type: inline-size;
  }
  .layout-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
  }
  .layout-measure {
    max-inline-size: var(--layout-measure);
  }
  .layout-wide {
    max-inline-size: var(--layout-wide);
  }
  .layout-grid {
    --track: var(--track-md);
    display: grid;
    gap: var(--gutter);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--track)), 1fr));
  }
  .layout-grid.track-sm {
    --track: var(--track-sm);
  }
  .layout-grid.track-lg {
    --track: var(--track-lg);
  }
  .layout-split {
    --aside: var(--track-md);
    display: grid;
    gap: var(--gutter);
    grid-template-columns: minmax(0, 1fr) var(--aside);
  }
  .layout-split.aside-lg {
    --aside: var(--track-lg);
  }
  :is(.layout-grid, .layout-split, .layout-stack) > * {
    container-type: inline-size;
  }
  @container (width < 712px) {
    .layout-split {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @container (width < 272px) {
    :where(.card, .form) {
      --fill-pad: var(--space-3);
      --fill-gap: var(--space-2);
      --fill-radius: var(--radius-2);
    }
  }
  @media (max-width: 640px) {
    .layout-page {
      padding-inline: var(--mobile-gutter);
      gap: var(--space-6);
    }
  }
}
@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(--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(--text-accent));
    box-shadow: 0 0 8px var(--text-accent, var(--text-accent));
  }
  .card-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text1, var(--text1));
    margin: 0 0 6px;
  }
  .card-sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text2, var(--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(--text3);
  }
  .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(--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 {
  .btn {
    --btn-h: var(--content-size-2);
    --btn-pad-block: var(--space-2);
    --btn-pad-inline: var(--space-4);
    --btn-radius: var(--btn-pad-block);
    --icon-size: var(--icon-size-sm);
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--icon-gap-sm);
    block-size: var(--btn-h);
    min-inline-size: var(--btn-h);
    padding: var(--btn-pad-block) var(--btn-pad-inline);
    border: 0;
    border-radius: var(--btn-radius);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    background: var(--btn-background);
    color: var(--btn-color);
    box-shadow: var(--btn-shadow, none);
    outline: var(--btn-border, none);
    outline-offset: calc(-1 * var(--size-hairline, 1px));
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .btn-sm {
    --btn-h: var(--content-size-1);
    --btn-pad-block: var(--space-1);
    --btn-pad-inline: var(--space-3);
    --icon-size: var(--icon-size-xs);
  }
  .btn-square {
    --btn-pad-inline: var(--btn-pad-block);
    inline-size: var(--btn-h);
    --icon-size: var(--content-size-1);
  }
  .btn-square.btn-sm {
    --icon-size: var(--content-size-0);
  }
  .btn-stretch {
    inline-size: 100%;
  }
  .btn > img {
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
    flex: none;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--contrast-color);
    outline: none;
    box-shadow: 0 6px 30px var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 6px 30px color-mix(in srgb, var(--accent) 28%, transparent);
    }
  }
  .btn-secondary {
    background: transparent;
    outline: none;
    box-shadow: inset 0 0 0 3px var(--btn-secondary-border-color);
  }
  .btn-ghost {
    background: transparent;
    color: var(--text2);
    box-shadow: none;
    outline: none;
  }
  .btn-danger {
    background: transparent;
    outline: none;
    box-shadow: inset 0 0 0 3px var(--color-danger);
  }
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
  }
  :is(.btn-secondary, .btn-ghost, .btn-danger):hover {
    transform: none;
    background-color: var(--bg-hover);
  }
  .btn-primary:hover {
    background-color: var(--accent);
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 6px 30px var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 6px 30px color-mix(in srgb, var(--accent) 28%, transparent);
    }
  }
  .btn-ghost:hover {
    color: var(--text1);
  }
  .btn:active {
    transform: translateY(0);
  }
  .btn:focus-visible {
    outline: 2px solid var(--primary-200);
    outline-offset: 2px;
  }
  .btn:is([aria-pressed="true"], [aria-expanded="true"]) {
    background-color: var(--bg-selected);
    color: var(--text-selected);
  }
  .btn:disabled, .btn[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn-progress {
    --p: 0;
    box-shadow: none;
  }
  .btn-progress::before, .btn-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: var(--space-half, 2px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .btn-progress::before {
    background: var(--text1);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text1) 14%, transparent);
    }
  }
  .btn-progress::after {
    background: conic-gradient(from -90deg, var(--text-accent) calc(var(--p) * 360deg), transparent 0);
    transition: background .35s ease;
    filter: drop-shadow(0 0 6px var(--text-accent));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 0 6px color-mix(in srgb, var(--text-accent) 35%, transparent));
    }
  }
  .btn-progress:disabled {
    opacity: 1;
    color: var(--text2);
  }
  .btn-progress.btn-primary::before, .btn-progress.btn-primary::after {
    display: none;
  }
  .segmented {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    block-size: var(--content-size-2);
    padding: var(--space-1);
    border-radius: calc(var(--space-1) + var(--space-1));
    background: var(--surface2);
  }
  .segmented > button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--icon-gap-sm);
    block-size: calc(var(--content-size-2) - 2 * var(--space-1));
    padding-inline: var(--space-3);
    border: 0;
    border-radius: var(--space-1);
    background: transparent;
    color: var(--menu-text);
    white-space: nowrap;
    cursor: pointer;
    --icon-size: var(--icon-size-sm);
    transition: background-color .18s ease, color .18s ease;
  }
  .segmented > button:hover {
    color: var(--menu-text-hover);
  }
  .segmented > button[aria-pressed="true"] {
    background: var(--bg-selected);
    color: var(--menu-text-selected);
    cursor: default;
  }
  .segmented > button:focus-visible {
    outline: 2px solid var(--primary-200);
    outline-offset: 1px;
  }
  .mega-ring-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1);
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .mega-ring-action .mega-ring {
    inline-size: var(--content-size-3);
    block-size: var(--content-size-3);
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-accent);
    --icon-size: var(--content-size-3);
    transition: transform .18s cubic-bezier(.2,.7,.2,1), filter .2s ease, color .2s ease;
  }
  .mega-ring-action .mega-ring > img {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }
  .mega-ring-action.draw-ring .mega-ring {
    --icon-size: var(--content-size-2);
    box-shadow: inset 0 0 0 6px var(--text-accent);
  }
  .mega-ring-action:hover .mega-ring {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px var(--text-accent));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 0 12px color-mix(in srgb, var(--text-accent) 55%, transparent));
    }
  }
  .mega-ring-action:active .mega-ring {
    transform: scale(.95);
  }
  .mega-ring-action:hover .icon-text {
    color: var(--text-accent);
  }
  .mega-ring-action:focus-visible {
    outline: 2px solid var(--primary-200);
    outline-offset: 2px;
  }
  @media (max-width: 640px) {
    .btn-sm, .btn-square {
      min-block-size: var(--mobile-tap);
      min-inline-size: var(--mobile-tap);
    }
    .segmented {
      block-size: calc(var(--mobile-tap) + 2 * var(--space-1));
    }
    .segmented > button {
      block-size: var(--mobile-tap);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn, .btn-progress::after, .mega-ring-action .mega-ring {
      transition: none;
    }
    .btn-primary:hover, .mega-ring-action:hover .mega-ring, .mega-ring-action:active .mega-ring {
      transform: none;
    }
  }
}
@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(--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.is-selected {
    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-neutral .dim-wm {
    display: none;
  }
  .entity:is(.card-detailed, .card-simple) {
    --card-pad: var(--space-3);
    --entity-radius-t: 14px;
    --entity-radius-b: 14px;
    --entity-card-base: light-dark(var(--dim-600, var(--primary-600)), var(--dim-700, var(--primary-600)));
    --entity-card-fill: linear-gradient(to top, var(--entity-card-base), var(--dim-500, var(--primary-500)));
    --entity-sheet-bg: light-dark(#fff, var(--gray-800));
    --entity-card-shadow: 2px 2px 4px var(--gray-200);
    --c-meta: var(--dim-100, var(--primary-100));
    --dim-wm-size: 96px;
    min-width: calc(var(--content-size-5) + 2 * var(--card-pad));
    padding: 0;
    box-shadow: var(--entity-card-shadow);
  }
  :where(html[data-theme="dark"]) .entity:is(.card-detailed, .card-simple) {
    --entity-card-shadow: 0 0 6px var(--dim-400, var(--primary-500));
  }
  .entity:is(.card-detailed, .card-simple).is-selected {
    box-shadow: 0 0 0 2px var(--dim-300), var(--entity-card-shadow);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--dim-300) 55%, transparent), var(--entity-card-shadow);
    }
  }
  .entity:is(.card-detailed, .card-simple) > .entity-head {
    position: relative;
    box-sizing: border-box;
    padding: var(--space-3) var(--card-pad) 0;
    background: var(--entity-card-fill);
  }
  .entity:is(.card-detailed, .card-simple) .entity-typerow {
    margin-bottom: var(--space-2);
  }
  .entity:is(.card-detailed, .card-simple) .entity-typerow :is(.entity-dim-glyph, .entity-title-glyph) {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    flex-basis: var(--icon-size-xs);
    --icon-size: var(--icon-size-xs);
  }
  .entity:is(.card-detailed, .card-simple) .entity-dim-glyph {
    background: var(--c-meta);
  }
  .entity:is(.card-detailed, .card-simple) .entity-title-glyph {
    color: var(--c-meta);
  }
  .entity:is(.card-detailed, .card-simple) a.entity-type:hover {
    color: var(--secondary-50);
  }
  .entity:is(.card-detailed, .card-simple) .entity-title {
    color: var(--secondary-50);
  }
  .entity:is(.card-detailed, .card-simple) a.entity-title:hover {
    color: var(--dim-100, var(--primary-100));
  }
  .entity:is(.card-detailed, .card-simple) .entity-toggle {
    background: transparent;
    border-color: var(--c-meta);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--c-meta) 45%, transparent);
    }
    color: var(--c-meta);
  }
  .entity:is(.card-detailed, .card-simple) .entity-toggle:hover {
    border-color: var(--secondary-50);
    color: var(--secondary-50);
  }
  .entity:is(.card-detailed, .card-simple) .entity-typerow {
    position: relative;
    z-index: 1;
  }
  .entity.card-detailed > .entity-head {
    height: var(--content-size-3);
    align-content: flex-start;
    border-radius: var(--entity-radius-t) var(--entity-radius-t) 0 0;
  }
  .entity.card-detailed .entity-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .entity.card-detailed > .entity-body {
    overflow: hidden;
    padding: var(--card-pad);
    background: var(--entity-sheet-bg);
    border: 2px solid var(--entity-card-base);
    border-top: 0;
    border-radius: 0 0 var(--entity-radius-b) var(--entity-radius-b);
    --text2: light-dark(var(--dim-600, var(--primary-600)), var(--dim-100, var(--primary-100)));
    --text3: light-dark(var(--gray-600), var(--gray-400));
    --c-desc: var(--text2);
    --c-sub: var(--text3);
    --c-wm: .12;
  }
  .entity.card-detailed > .entity-body > :not(.dim-wm) {
    position: relative;
    z-index: 1;
  }
  .entity.card-detailed .entity-sheet {
    margin: calc(-1 * var(--card-pad));
    border-top: 0;
    border-radius: 0;
    background: transparent;
  }
  .entity.card-detailed .entity-flow {
    margin-top: calc(-1 * var(--card-pad));
    border-top: 0;
    background: transparent;
  }
  .entity.card-detailed .entity-managed {
    border-radius: 0;
  }
  .entity.card-detailed .dim-wm {
    right: -20px;
    bottom: -26px;
  }
  .entity.card-simple > .entity-head {
    overflow: hidden;
    height: 124px;
    width: calc(var(--content-size-5) + 2 * var(--card-pad));
    padding-bottom: var(--card-pad);
    align-content: flex-start;
    border-radius: var(--entity-radius-t);
    --c-wm: .1;
  }
  .entity.card-simple .dim-wm {
    right: -20px;
    bottom: -26px;
    background: var(--secondary-50);
  }
  .entity.card-simple .entity-id {
    position: absolute;
    z-index: 1;
    left: var(--card-pad);
    right: var(--card-pad);
    top: calc(50% - .6em);
  }
  .entity.card-simple .entity-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
  }
  .entity.entity-user-card.card-simple {
    --entity-radius-t: var(--radius-pill);
    border-radius: var(--radius-pill);
  }
  .entity.entity-user-card.card-simple > .entity-head {
    height: auto;
    width: auto;
    padding: var(--card-pad);
    border-radius: var(--entity-radius-t);
  }
  .entity.entity-user-card.card-simple .entity-id {
    position: static;
  }
  .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 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
  }
  .entity-typerow {
    display: flex;
    align-items: center;
    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 {
    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 {
    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: .9375rem;
    line-height: 1.2;
    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(--entity-sheet-bg);
  }
  .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-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--dim-500) 8%, 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(--entity-card-fill);
    border: 1px solid transparent;
  }
  .entity-inner:hover {
    border-color: var(--dim-300);
  }
  .entity-inner .entity-inner-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--secondary-50);
    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(--c-meta);
  }
  .entity-inner .entity-inner-type {
    color: var(--c-meta);
  }
  .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(--entity-sheet-bg);
  }
  .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(--entity-sheet-bg));
    }
    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(--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(--text-accent));
  }
}
@layer components {
  .shell {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
    --shell-hair: rgba(255, 255, 255, 0.08);
    --shell-rail: rgba(255, 255, 255, 0.22);
    --shell-glass-2: rgba(255, 255, 255, 0.045);
    --shell-accent: var(--primary-600);
  }
  .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);
  }
  .rail-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .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);
  }
  .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(--text2);
    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, #4A5800);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 10px color-mix(in srgb, var(--dim-c, var(--primary-600)) 60%, transparent);
    }
  }
  .rail-toc a {
    line-height: var(--toc-line-h);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text2);
    transition: color .15s, background .15s;
  }
  .rail-toc a .tnum {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .05em;
    color: var(--text3);
  }
  .rail-toc a:hover {
    color: var(--text1);
    background: var(--shell-glass-2);
  }
  .rail-toc a.active {
    color: var(--primary-500, #d4ff00);
    font-weight: 600;
    background: color-mix(in srgb, #4A5800 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary-600, #d4ff00) 10%, transparent);
    }
  }
  .rail-toc a.active .tnum {
    color: color-mix(in srgb, #677C01 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;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .main-scroll > .content > :has(> .ctn-10) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  .main-scroll > .content > .ctn-10, .main-scroll > .content > :has(> .ctn-10) > .ctn-10 {
    flex: 1 0 auto;
  }
  .ctn-10 > :first-child > .page-hero:first-child {
    margin-inline: calc(-1 * var(--padding-inline, var(--space-4)));
    margin-block-start: calc(-0.618 * var(--padding-inline, var(--space-4)));
  }
  .main-scroll:has(> .content > .ctn-10), .main-scroll:has(> .content > * > .ctn-10) {
    padding-bottom: 0;
  }
  .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="more"] .win-more {
    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);
      background: var(--bg-color);
    }
    .ctx .win {
      min-width: 0;
    }
    .ctx-grip {
      display: none;
    }
  }
  .main-scroll {
    position: relative;
    z-index: 1;
  }
  .rail {
    border-right: 1px solid var(--shell-hair);
  }
  .rail-top {
    height: 54px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 var(--space-2);
  }
  .rail-toc {
    margin: 2px 0 6px;
  }
  .ctx {
    border-left: 1px solid var(--shell-hair);
    --glass-color: color-mix(in srgb, light-dark(var(--secondary-100), color-mix(in srgb-linear, var(--gray-500) 80%, transparent 20%)) 96%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --glass-color: color-mix(in srgb, var(--bg-color) 96%, transparent);
    }
    background: var(--glass-color);
  }
  .ctxbar {
    border-left: 1px solid var(--shell-hair);
  }
  .ctx-grip::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: var(--ctx-grip-line);
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: var(--shell-accent);
    opacity: 0;
    transition: opacity 0.15s var(--shell-ease);
  }
  .ctx-grip:hover::after, .shell[data-ctx-resizing] .ctx-grip::after {
    opacity: 0.55;
  }
  .ctx-grip:focus-visible {
    outline: 2px solid var(--shell-accent);
    outline-offset: -2px;
  }
  .ctx-grip:focus-visible::after {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .ctx-grip::after {
      transition: none;
    }
  }
  .win-head {
    height: var(--size-6);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 16px;
    border-bottom: 1px solid var(--shell-hair);
  }
  .win-head .wi {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border-radius: var(--radius-2);
    display: grid;
    place-items: center;
    background: var(--shell-glass-2);
    color: var(--text1);
  }
  .win-head-text {
    flex: 1;
    min-width: 0;
  }
  .win-head .wt {
    color: var(--text1);
  }
  .win-collapse {
    margin-left: auto;
    width: var(--control-h-md);
    height: var(--control-h-md);
    border-radius: var(--radius-2);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .win-collapse:hover {
    background: var(--shell-glass-2);
    color: var(--text1);
    border-color: var(--shell-hair);
  }
  .win-pad {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 16px;
  }
  .win-pad.prefs {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .prefs-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .prefs-group > h4 {
    color: var(--text3);
  }
  .cb {
    width: var(--content-size-2);
    height: var(--content-size-2);
    border-radius: var(--radius-3);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .cb:hover {
    background: var(--shell-glass-2);
    color: var(--text1);
    border-color: var(--shell-hair);
  }
  .cb.active {
    background: color-mix(in srgb, #677C01 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary-500) 22%, transparent);
    }
    color: var(--text1);
    border-color: color-mix(in srgb, #677C01 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--primary-500) 45%, transparent);
    }
  }
  .cb.active::before {
    content: "";
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    top: -6px;
    height: var(--size-1);
    border-radius: 0 0 var(--radius-1) var(--radius-1);
    background: var(--primary-500);
    box-shadow: 0 0 10px var(--primary-500);
  }
  .cb-host {
    position: relative;
    display: inline-grid;
  }
  .cb-badge {
    position: absolute;
    top: calc(-1 * var(--space-1));
    right: calc(-1 * var(--space-1));
    pointer-events: none;
  }
  .shell-bottomnav {
    --main-menu-bar-h: var(--content-size-4);
  }
  @media (max-height: 480px) {
    .shell-bottomnav {
      --main-menu-bar-h: var(--content-size-3);
    }
  }
  .shell-bottomnav .cb.active {
    background: transparent;
    border-color: transparent;
    color: var(--primary-500);
  }
  .shell-bottomnav .cb.active::before {
    content: none;
  }
  .shell-bottomnav .mm-slot:has(.cb.active) .mm-label {
    color: var(--primary-500);
  }
  @media (max-width: 640px), (max-height: 480px) {
    .win-pad.prefs {
      gap: var(--space-4);
    }
  }
  .prefs .settings-list {
    color: var(--text1);
    border: 1px solid var(--shell-hair);
    border-radius: var(--radius-3);
    overflow: hidden;
  }
  .prefs .settings-list > * + * {
    border-top: 1px solid var(--shell-hair);
  }
  .prefs .settings-row-trail .lang-tag {
    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), color-mix(in srgb-linear, #68737E 60%, transparent 40%));
    @supports (color: color-mix(in lab, red, red)) {
      --drawer-line: light-dark(var(--gray-200), color-mix(in srgb-linear, var(--gray-500) 60%, transparent 40%));
    }
    --drawer-line-strong: light-dark(var(--gray-300), var(--gray-500));
    --drawer-tint: light-dark(var(--secondary-50), color-mix(in srgb, #E4F1FF 6%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      --drawer-tint: light-dark(var(--secondary-50), color-mix(in srgb, var(--secondary-100) 6%, transparent));
    }
    --drawer-ink-success: light-dark(color-mix(in srgb, #40BC40 65%, #12161B), 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, #000A18 95%, transparent), color-mix(in srgb, #000714 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(--bg-color);
    border-left: var(--size-hairline) solid var(--drawer-line);
    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);
    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(--bg-color);
  }
  .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: #CEDBE6;
    @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;
  }
}
:root {
  --iris-1: #8C5BFF;
  --iris-2: #FF60FF;
  --iris-3: #FF6BC5;
  --iris-4: #FF839E;
  --iris-5: #FFBB97;
  --iris-6: #FFEAAB;
  --iris-7: #DFFFAC;
  --iris-8: #98FFBE;
  --iris-9: #88EAFF;
  --iris-10: #6FAEFF;
  --iris-mix: 20%;
  --iris-start: 140deg;
  --iris-step: 3deg;
  --iris-ring: 1px;
}
.card.is-iris {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  --_edge: var(--gray-200);
  --_reflex: #ffffff;
  --_reflex-op: 1;
}
.surface-dark .card.is-iris, .surface-dark-blue .card.is-iris {
  border-color: transparent;
  --_edge: var(--gray-700);
  --_reflex-op: 0;
}
.card.is-iris::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: var(--_reflex-op);
  background: repeating-linear-gradient(135deg, transparent 0, var(--_reflex) 160px, transparent 212px, var(--_reflex) 264px, transparent 320px, var(--_reflex) 364px, transparent 460px);
  @supports (color: color-mix(in lab, red, red)) {
    background: repeating-linear-gradient(135deg, transparent 0, color-mix(in srgb, var(--_reflex) 50%, transparent) 160px, transparent 212px, color-mix(in srgb, var(--_reflex) 90%, transparent) 264px, transparent 320px, color-mix(in srgb, var(--_reflex) 50%, transparent) 364px, transparent 460px);
  }
  pointer-events: none;
}
.card.is-iris::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--iris-ring);
  pointer-events: none;
  background: conic-gradient(from 20deg, var(--_edge) 0deg, var(--_edge) 92deg, var(--iris-1) calc(var(--iris-start) + var(--iris-step) * 1), var(--iris-2) calc(var(--iris-start) + var(--iris-step) * 2), var(--iris-3) calc(var(--iris-start) + var(--iris-step) * 3), var(--iris-4) calc(var(--iris-start) + var(--iris-step) * 4), var(--iris-5) calc(var(--iris-start) + var(--iris-step) * 5), var(--iris-6) calc(var(--iris-start) + var(--iris-step) * 6), var(--iris-7) calc(var(--iris-start) + var(--iris-step) * 7), var(--iris-8) calc(var(--iris-start) + var(--iris-step) * 8), var(--iris-9) calc(var(--iris-start) + var(--iris-step) * 9), var(--iris-10) calc(var(--iris-start) + var(--iris-step) * 10), var(--_edge) 200deg, var(--_edge) 320deg, var(--_edge) 360deg);
  @supports (color: color-mix(in lab, red, red)) {
    background: conic-gradient(from 20deg, color-mix(in srgb, var(--_edge) 30%, #fff) 0deg, color-mix(in srgb, var(--_edge) 60%, #fff) 92deg, color-mix(in srgb, var(--iris-1) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 1), color-mix(in srgb, var(--iris-2) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 2), color-mix(in srgb, var(--iris-3) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 3), color-mix(in srgb, var(--iris-4) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 4), color-mix(in srgb, var(--iris-5) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 5), color-mix(in srgb, var(--iris-6) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 6), color-mix(in srgb, var(--iris-7) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 7), color-mix(in srgb, var(--iris-8) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 8), color-mix(in srgb, var(--iris-9) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 9), color-mix(in srgb, var(--iris-10) var(--iris-mix), var(--_edge)) calc(var(--iris-start) + var(--iris-step) * 10), var(--_edge) 200deg, color-mix(in srgb, var(--_edge) 60%, #fff) 320deg, color-mix(in srgb, var(--_edge) 30%, #fff) 360deg);
  }
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card.is-iris > * {
  position: relative;
  z-index: 0;
}
html, :host {
  line-height: 0;
  background-color: #000;
}
p, :host {
  line-height: 1.5;
}
span.icon-text, :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;
}
@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;
    }
  }
}