/* GENERATED from apps/portal/src/styles by tools/build-portal-css (Tailwind v4). Do not edit:
   change the source, then run `npm run build:css` at the repository root. */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-mono: var(--mono);
    --default-font-family: var(--font-body);
    --default-mono-font-family: var(--mono);
    --radius-card: 14px;
  }
}
@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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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:where(:not(iframe)) {
    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;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .text-bad {
    color: var(--bad-text);
  }
  .lowercase {
    text-transform: lowercase;
  }
  .underline {
    text-decoration-line: underline;
  }
  .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);
  }
  .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,);
  }
}
@layer base {
  :root {
    --brand-primary: #1f4e79;
    --brand-on-primary: #ffffff;
    --brand-accent: #1f4e79;
    --brand-on-accent: #ffffff;
    --brand-link: #1f4e79;
    --brand-bg: #f7f7f5;
    --brand-bar: transparent;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-body);
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --app-bg: var(--brand-bg);
    @supports (color: color-mix(in lab, red, red)) {
      --app-bg: color-mix(in oklab, var(--brand-bg) 92%, #64748b);
    }
    --panel: var(--brand-bg);
    @supports (color: color-mix(in lab, red, red)) {
      --panel: color-mix(in oklab, var(--brand-bg) 25%, #ffffff);
    }
    --sunken: var(--brand-bg);
    @supports (color: color-mix(in lab, red, red)) {
      --sunken: color-mix(in oklab, var(--brand-bg) 75%, #ffffff);
    }
    --ink: #101828;
    --ink-2: #344054;
    --muted: #535d6d;
    --line: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line: color-mix(in oklab, var(--ink) 11%, var(--panel));
    }
    --line-2: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      --line-2: color-mix(in oklab, var(--ink) 21%, var(--panel));
    }
    --link: var(--brand-link);
    --accent-ink: var(--brand-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --accent-ink: color-mix(in oklab, var(--brand-accent) 62%, #000000);
    }
    --accent-soft: var(--brand-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --accent-soft: color-mix(in oklab, var(--brand-accent) 11%, var(--panel));
    }
    --focus: var(--brand-link);
    --shadow-hover: 0 12px 28px -12px rgb(16 24 40 / 0.18);
    --shadow-pop: 0 18px 40px -12px rgb(16 24 40 / 0.28);
    --scrim: rgb(8 10 14 / 0.4);
    --thumb: #ffffff;
    --ok-bg: #e4f4e9;
    --ok-text: #11663a;
    --warn-bg: #fcf0d8;
    --warn-text: #875700;
    --bad-bg: #fde7e7;
    --bad-text: #b42318;
    --idle-bg: #eceff3;
    --idle-text: #475467;
    --info-bg: var(--brand-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --info-bg: color-mix(in oklab, var(--brand-accent) 10%, #ffffff);
    }
    --info-text: var(--accent-ink);
    --run-bg: var(--accent-soft);
    --run-text: var(--accent-ink);
    --run-dot: var(--brand-accent);
    --brain-bg: var(--panel);
    --glow: var(--brand-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --glow: color-mix(in oklab, var(--brand-accent) 62%, #000000);
    }
    --glow-hi: var(--glow);
    --brain-text: var(--ink);
    --brain-muted: var(--muted);
    --glow-soft: var(--glow);
    @supports (color: color-mix(in lab, red, red)) {
      --glow-soft: color-mix(in srgb, var(--glow) 16%, transparent);
    }
    --glow-faint: var(--glow);
    @supports (color: color-mix(in lab, red, red)) {
      --glow-faint: color-mix(in srgb, var(--glow) 8%, transparent);
    }
    --brain-matte-hi: #ffffff;
    --brain-matte-lo: var(--glow);
    @supports (color: color-mix(in lab, red, red)) {
      --brain-matte-lo: color-mix(in oklab, var(--glow) 5%, #edf0f4);
    }
    --brain-disc-edge: rgb(16 24 40 / 0.14);
    --brain-faint: rgb(16 24 40 / 0.1);
    --brain-chip: rgb(16 24 40 / 0.035);
    --brain-chip-line: rgb(16 24 40 / 0.12);
    --brain-chip-on: rgb(16 24 40 / 0.1);
    --brain-sheen: rgb(255 255 255 / 0.6);
    --brain-spark: #ffffff;
    --brain-halo: 0.16;
    --brain-pool: 0.07;
    --brain-warn: #b26b00;
    --brain-warn-text: #8a5300;
    --brain-bad: #c8322b;
    --brain-bad-text: #b42318;
    --plate: #f6f4ef;
    --plate-dark: #1f1f1d;
    --cat-knowledge: #2f5f96;
    --cat-agents: #a24f1c;
    --cat-tools: #7446a8;
    --display-weight: 650;
    --display-track: -0.025em;
    color-scheme: light dark;
    @media (prefers-color-scheme: dark) {
      &:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) {
        --brand-primary: #7fb0e0;
        --brand-on-primary: #0d1a26;
        --brand-accent: #7fb0e0;
        --brand-on-accent: #0d1a26;
        --brand-link: #7fb0e0;
        --app-bg: var(--brand-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --app-bg: color-mix(in oklab, var(--brand-accent) 4%, #07080b);
        }
        --panel: var(--brand-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --panel: color-mix(in oklab, var(--brand-accent) 5%, #0d0f13);
        }
        --sunken: var(--brand-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --sunken: color-mix(in oklab, var(--brand-accent) 6%, #161920);
        }
        --ink: #eef0f4;
        --ink-2: #ccd2dc;
        --muted: #a3abb8;
        --line: #ffffff;
        @supports (color: color-mix(in lab, red, red)) {
          --line: color-mix(in oklab, #ffffff 10%, var(--panel));
        }
        --line-2: #ffffff;
        @supports (color: color-mix(in lab, red, red)) {
          --line-2: color-mix(in oklab, #ffffff 18%, var(--panel));
        }
        --accent-soft: var(--brand-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --accent-soft: color-mix(in oklab, var(--brand-accent) 18%, var(--panel));
        }
        --accent-ink: var(--brand-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --accent-ink: color-mix(in oklab, var(--brand-accent) 70%, #ffffff);
        }
        --shadow-hover: 0 12px 28px -12px rgb(0 0 0 / 0.6);
        --shadow-pop: 0 18px 40px -12px rgb(0 0 0 / 0.7);
        --scrim: rgb(0 0 0 / 0.6);
        --thumb: #f5f7fb;
        --ok-bg: #15301f;
        --ok-text: #8fd6a4;
        --warn-bg: #352a10;
        --warn-text: #f1cf7a;
        --bad-bg: #3a1716;
        --bad-text: #f5a3a0;
        --idle-bg: #232831;
        --idle-text: #b4bcc8;
        --info-bg: var(--brand-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --info-bg: color-mix(in oklab, var(--brand-accent) 16%, var(--panel));
        }
        --glow: var(--brand-accent);
        @supports (color: color-mix(in lab, red, red)) {
          --glow: color-mix(in oklab, var(--brand-accent) 50%, #ffffff);
        }
        --glow-hi: var(--glow);
        @supports (color: color-mix(in lab, red, red)) {
          --glow-hi: color-mix(in oklab, var(--glow) 45%, #ffffff);
        }
        --brain-text: var(--glow);
        @supports (color: color-mix(in lab, red, red)) {
          --brain-text: color-mix(in oklab, var(--glow) 6%, #f5f7fb);
        }
        --brain-muted: var(--glow);
        @supports (color: color-mix(in lab, red, red)) {
          --brain-muted: color-mix(in oklab, var(--glow) 12%, #a9b1c2);
        }
        --glow-soft: var(--glow);
        @supports (color: color-mix(in lab, red, red)) {
          --glow-soft: color-mix(in srgb, var(--glow) 28%, transparent);
        }
        --glow-faint: var(--glow);
        @supports (color: color-mix(in lab, red, red)) {
          --glow-faint: color-mix(in srgb, var(--glow) 14%, transparent);
        }
        --brain-matte-hi: var(--glow);
        @supports (color: color-mix(in lab, red, red)) {
          --brain-matte-hi: color-mix(in oklab, var(--glow) 9%, #23262c);
        }
        --brain-matte-lo: var(--glow);
        @supports (color: color-mix(in lab, red, red)) {
          --brain-matte-lo: color-mix(in oklab, var(--glow) 3%, #0b0c0f);
        }
        --brain-disc-edge: rgb(0 0 0 / 0.55);
        --brain-faint: rgb(255 255 255 / 0.09);
        --brain-chip: rgb(255 255 255 / 0.05);
        --brain-chip-line: rgb(255 255 255 / 0.13);
        --brain-chip-on: rgb(255 255 255 / 0.16);
        --brain-sheen: rgb(255 255 255 / 0.06);
        --brain-halo: 0.3;
        --brain-pool: 0.1;
        --brain-warn: #f0b54a;
        --brain-warn-text: #f5c46b;
        --brain-bad: #ff6b6b;
        --brain-bad-text: #ff9d9d;
        --cat-knowledge: #8fb6e6;
        --cat-agents: #f0a57a;
        --cat-tools: #c3a0ec;
      }
    }
    &:where(:root[data-theme="dark"], :root[data-theme="dark"] *) {
      --brand-primary: #7fb0e0;
      --brand-on-primary: #0d1a26;
      --brand-accent: #7fb0e0;
      --brand-on-accent: #0d1a26;
      --brand-link: #7fb0e0;
      --app-bg: var(--brand-accent);
      @supports (color: color-mix(in lab, red, red)) {
        --app-bg: color-mix(in oklab, var(--brand-accent) 4%, #07080b);
      }
      --panel: var(--brand-accent);
      @supports (color: color-mix(in lab, red, red)) {
        --panel: color-mix(in oklab, var(--brand-accent) 5%, #0d0f13);
      }
      --sunken: var(--brand-accent);
      @supports (color: color-mix(in lab, red, red)) {
        --sunken: color-mix(in oklab, var(--brand-accent) 6%, #161920);
      }
      --ink: #eef0f4;
      --ink-2: #ccd2dc;
      --muted: #a3abb8;
      --line: #ffffff;
      @supports (color: color-mix(in lab, red, red)) {
        --line: color-mix(in oklab, #ffffff 10%, var(--panel));
      }
      --line-2: #ffffff;
      @supports (color: color-mix(in lab, red, red)) {
        --line-2: color-mix(in oklab, #ffffff 18%, var(--panel));
      }
      --accent-soft: var(--brand-accent);
      @supports (color: color-mix(in lab, red, red)) {
        --accent-soft: color-mix(in oklab, var(--brand-accent) 18%, var(--panel));
      }
      --accent-ink: var(--brand-accent);
      @supports (color: color-mix(in lab, red, red)) {
        --accent-ink: color-mix(in oklab, var(--brand-accent) 70%, #ffffff);
      }
      --shadow-hover: 0 12px 28px -12px rgb(0 0 0 / 0.6);
      --shadow-pop: 0 18px 40px -12px rgb(0 0 0 / 0.7);
      --scrim: rgb(0 0 0 / 0.6);
      --thumb: #f5f7fb;
      --ok-bg: #15301f;
      --ok-text: #8fd6a4;
      --warn-bg: #352a10;
      --warn-text: #f1cf7a;
      --bad-bg: #3a1716;
      --bad-text: #f5a3a0;
      --idle-bg: #232831;
      --idle-text: #b4bcc8;
      --info-bg: var(--brand-accent);
      @supports (color: color-mix(in lab, red, red)) {
        --info-bg: color-mix(in oklab, var(--brand-accent) 16%, var(--panel));
      }
      --glow: var(--brand-accent);
      @supports (color: color-mix(in lab, red, red)) {
        --glow: color-mix(in oklab, var(--brand-accent) 50%, #ffffff);
      }
      --glow-hi: var(--glow);
      @supports (color: color-mix(in lab, red, red)) {
        --glow-hi: color-mix(in oklab, var(--glow) 45%, #ffffff);
      }
      --brain-text: var(--glow);
      @supports (color: color-mix(in lab, red, red)) {
        --brain-text: color-mix(in oklab, var(--glow) 6%, #f5f7fb);
      }
      --brain-muted: var(--glow);
      @supports (color: color-mix(in lab, red, red)) {
        --brain-muted: color-mix(in oklab, var(--glow) 12%, #a9b1c2);
      }
      --glow-soft: var(--glow);
      @supports (color: color-mix(in lab, red, red)) {
        --glow-soft: color-mix(in srgb, var(--glow) 28%, transparent);
      }
      --glow-faint: var(--glow);
      @supports (color: color-mix(in lab, red, red)) {
        --glow-faint: color-mix(in srgb, var(--glow) 14%, transparent);
      }
      --brain-matte-hi: var(--glow);
      @supports (color: color-mix(in lab, red, red)) {
        --brain-matte-hi: color-mix(in oklab, var(--glow) 9%, #23262c);
      }
      --brain-matte-lo: var(--glow);
      @supports (color: color-mix(in lab, red, red)) {
        --brain-matte-lo: color-mix(in oklab, var(--glow) 3%, #0b0c0f);
      }
      --brain-disc-edge: rgb(0 0 0 / 0.55);
      --brain-faint: rgb(255 255 255 / 0.09);
      --brain-chip: rgb(255 255 255 / 0.05);
      --brain-chip-line: rgb(255 255 255 / 0.13);
      --brain-chip-on: rgb(255 255 255 / 0.16);
      --brain-sheen: rgb(255 255 255 / 0.06);
      --brain-halo: 0.3;
      --brain-pool: 0.1;
      --brain-warn: #f0b54a;
      --brain-warn-text: #f5c46b;
      --brain-bad: #ff6b6b;
      --brain-bad-text: #ff9d9d;
      --cat-knowledge: #8fb6e6;
      --cat-agents: #f0a57a;
      --cat-tools: #c3a0ec;
    }
  }
  :root[data-theme="light"] {
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
  }
  @supports (color: oklch(from red l c h)) {
    :root {
      --glow: oklch(from var(--brand-accent) min(l, 0.55) c h);
      --cat-knowledge: oklch(from var(--brand-accent) min(l, 0.5) c h);
      --cat-agents: oklch(from var(--brand-accent) 0.5 clamp(0.11, c, 0.15) calc(h + 180));
      --cat-tools: oklch(from var(--brand-accent) 0.5 clamp(0.11, c, 0.15) calc(h + 270));
      --accent-ink: oklch(from var(--brand-accent) min(l, 0.5) min(c, 0.2) h);
      @media (prefers-color-scheme: dark) {
        &:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) {
          --glow: oklch(from var(--brand-accent) max(l, 0.8) c h);
          --cat-knowledge: oklch(from var(--brand-accent) max(l, 0.8) c h);
          --cat-agents: oklch(from var(--brand-accent) 0.8 clamp(0.11, c, 0.15) calc(h + 180));
          --cat-tools: oklch(from var(--brand-accent) 0.8 clamp(0.11, c, 0.15) calc(h + 270));
          --accent-ink: oklch(from var(--brand-accent) max(l, 0.78) c h);
        }
      }
      &:where(:root[data-theme="dark"], :root[data-theme="dark"] *) {
        --glow: oklch(from var(--brand-accent) max(l, 0.8) c h);
        --cat-knowledge: oklch(from var(--brand-accent) max(l, 0.8) c h);
        --cat-agents: oklch(from var(--brand-accent) 0.8 clamp(0.11, c, 0.15) calc(h + 180));
        --cat-tools: oklch(from var(--brand-accent) 0.8 clamp(0.11, c, 0.15) calc(h + 270));
        --accent-ink: oklch(from var(--brand-accent) max(l, 0.78) c h);
      }
    }
  }
  .heading-serif {
    --display-weight: 500;
    --display-track: -0.015em;
  }
  .run-neutral {
    --run-bg: #e6eefb;
    --run-text: #1d4f91;
    --run-dot: #2f6fc4;
    @media (prefers-color-scheme: dark) {
      &:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) {
        --run-bg: #172639;
        --run-text: #a9c9f2;
        --run-dot: #6fa3e6;
      }
    }
    &:where(:root[data-theme="dark"], :root[data-theme="dark"] *) {
      --run-bg: #172639;
      --run-text: #a9c9f2;
      --run-dot: #6fa3e6;
    }
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    background: var(--app-bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
  }
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-track);
    color: var(--ink);
    text-wrap: balance;
  }
  a {
    color: var(--link);
    text-underline-offset: 2px;
  }
  :where(.main, .plain-main, .auth-main, .flash) a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: from-font;
  }
  :where(.main, .plain-main, .auth-main, .flash) a:not([class]):hover {
    text-decoration-thickness: 2px;
  }
  code, kbd, pre {
    font-family: var(--mono);
  }
  ::selection {
    background: var(--accent-soft);
    color: var(--ink);
  }
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  [hidden] {
    display: none !important;
  }
  .motion-paused *, .motion-paused *::before, .motion-paused *::after {
    animation-play-state: paused !important;
  }
  table {
    font-variant-numeric: tabular-nums;
  }
}
@layer components {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line-2);
    font-weight: 600;
    text-decoration: none;
  }
  .skip-link:focus {
    top: 12px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
:root:has(.auth-form)::view-transition-old(root), :root:has(.auth-form)::view-transition-new(root) {
  animation: none;
}
@layer components {
  .icon {
    flex: none;
    display: inline-block;
    vertical-align: middle;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }
  .btn:disabled, .btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .btn-primary {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
  }
  .btn-primary:hover:not(:disabled) {
    filter: brightness(1.08);
  }
  .btn-secondary {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line-2);
  }
  .btn-secondary:hover:not(:disabled) {
    background: var(--sunken);
  }
  .btn-quiet {
    background: transparent;
    color: var(--muted);
  }
  .btn-quiet:hover:not(:disabled) {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--ink) 6%, transparent);
    }
    color: var(--ink);
  }
  .btn-danger {
    background: var(--panel);
    color: var(--bad-text);
    border-color: var(--bad-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bad-text) 40%, var(--panel));
    }
  }
  .btn-sm {
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 8px;
  }
  .btn-lg {
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
    border-radius: 10px;
  }
  .btn-block {
    display: flex;
    width: 100%;
  }
  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }
  .icon-btn:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--ink) 7%, transparent);
    }
    color: var(--ink);
  }
  .field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  .field-hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--muted);
  }
  .input {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--panel);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .input::placeholder {
    color: var(--muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--muted) 80%, var(--panel));
    }
  }
  .input:focus {
    outline: none;
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
  }
  .input-lg {
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
  }
  .flash {
    display: flex;
    min-width: 0;
    overflow-wrap: anywhere;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.45;
  }
  .flash-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
    border-color: var(--ok-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ok-text) 18%, var(--ok-bg));
    }
  }
  .flash-error {
    background: var(--bad-bg);
    color: var(--bad-text);
    border-color: var(--bad-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bad-text) 18%, var(--bad-bg));
    }
  }
  .flash-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
  }
  .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--idle-bg);
    color: var(--idle-text);
  }
  .status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
  }
  .status-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
  }
  .status-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
  }
  .status-bad {
    background: var(--bad-bg);
    color: var(--bad-text);
  }
  .status-run {
    background: var(--run-bg);
    color: var(--run-text);
  }
  .role-pill {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--sunken);
    color: var(--ink-2);
    border: 1px solid var(--line);
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-ink);
  }
  .eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--brand-accent);
  }
  .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    font-size: 12.5px;
    color: var(--muted);
  }
  .divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  kbd {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.4;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--sunken);
    color: var(--muted);
  }
  .crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--muted);
  }
  .crumbs li + li::before {
    content: "/";
    margin-right: 6px;
    color: var(--line-2);
  }
  .crumbs li {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .crumbs li[aria-current="page"] {
    color: var(--ink-2);
    font-weight: 500;
  }
  .crumbs a {
    color: inherit;
    text-decoration: none;
  }
  .crumbs a:hover {
    color: var(--ink);
  }
  .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
  }
  .page-head-text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .page-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
  }
  .page-purpose {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted);
  }
  .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .menu {
    position: fixed;
    inset: auto auto 76px 16px;
    margin: 0;
    width: 248px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-pop);
  }
  .menu-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0 0 6px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--line);
  }
  .menu-name {
    font-weight: 600;
  }
  .menu-email {
    font-size: 12.5px;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .menu-head .role-pill {
    margin-top: 6px;
  }
  .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13.5px;
  }
  .menu-item:hover {
    background: var(--sunken);
  }
  .menu-item .icon {
    color: var(--muted);
  }
  .theme-form {
    margin: 0 0 6px;
    padding: 0 4px 10px;
    border-bottom: 1px solid var(--line);
  }
  .theme-label {
    margin: 0 0 6px;
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  .theme-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--sunken);
  }
  .theme-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    padding: 0 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
  }
  .theme-opt:hover {
    color: var(--ink);
  }
  .theme-opt[aria-pressed="true"] {
    background: var(--panel);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--line-2);
  }
  .theme-opt:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
  }
  @media (prefers-color-scheme: dark) {
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .theme-opt[aria-pressed="true"] {
      background: var(--line);
    }
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .theme-opt[aria-pressed="true"] {
    background: var(--line);
  }
  .beam-border {
    position: relative;
    padding: 1px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--line), var(--line), var(--brand-accent), var(--line), var(--line));
    background-size: 300% 100%;
  }
  .beam-border > * {
    border-radius: 13px;
    background: var(--panel);
  }
  @media (prefers-reduced-motion: no-preference) {
    .beam-border {
      animation: beam-border 6s linear infinite;
    }
  }
  @media (max-width: 767.98px), (pointer: coarse) {
    .btn, .btn-sm {
      height: auto;
      min-height: 44px;
    }
    .btn-sm {
      padding: 0 14px;
      font-size: 14px;
    }
    .icon-btn {
      min-width: 44px;
      min-height: 44px;
    }
  }
}
@keyframes beam-border {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@layer components {
  .shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 100vh;
  }
  .lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
  }
  .mark-tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 9px;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .mark-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lockup-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .brand-name {
    overflow: hidden;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .lockup-sub {
    font-size: 12px;
    color: var(--muted);
  }
  .lockup-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
  .brand-logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
  }
  .brand-dark {
    display: none;
  }
  .side {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 12px 8px 12px 12px;
  }
  .side-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 100%;
  }
  .side-brand {
    padding: 8px;
    margin-bottom: 14px;
    border-radius: 10px;
  }
  .side-brand:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--ink) 6%, transparent);
    }
  }
  .side-label {
    margin: 0 0 4px;
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  .side-list + .side-label {
    margin-top: 18px;
  }
  .side-list, .side-sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .side-sub {
    margin: 1px 0 2px;
    padding-left: 16px;
  }
  .side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 13.5px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .side-item .icon {
    color: var(--muted);
  }
  a.side-item:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--ink) 6%, transparent);
    }
    color: var(--ink);
  }
  .side-item[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--ink);
    font-weight: 600;
  }
  .side-item[aria-current="page"] .icon {
    color: var(--accent-ink);
  }
  .side-item.is-static {
    color: var(--muted);
    cursor: default;
  }
  .side-child {
    height: 30px;
    font-size: 13px;
  }
  .side-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .side-badge {
    flex: none;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--sunken);
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
  }
  .side-foot {
    margin-top: auto;
    padding-top: 20px;
  }
  .side-me {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 2px 0 4px;
    border-top: 1px solid var(--line);
  }
  .side-me-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .side-me-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .side-me-role {
    font-size: 12px;
    color: var(--muted);
  }
  .avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 11.5px;
    font-weight: 700;
  }
  .content {
    min-width: 0;
    padding: 12px 12px 12px 4px;
  }
  .panel {
    min-height: calc(100vh - 24px);
    padding: clamp(18px, 2.6vw, 30px) clamp(16px, 3vw, 40px) 40px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
  }
  .panel > .crumbs {
    margin-bottom: 18px;
  }
  .main :where(p, .field-hint) {
    max-width: 88ch;
  }
  .main :where(table, .table-wrap) :where(p, .field-hint) {
    max-width: none;
  }
  .mbar {
    display: none;
  }
  .sheet {
    display: none;
  }
  @media (max-width: 767.98px) {
    .shell {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
    }
    .side {
      display: none;
    }
    .mbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: var(--app-bg);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--app-bg) 88%, transparent);
      }
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .mbar-menu {
      width: 38px;
      height: 38px;
      color: var(--ink);
    }
    .lockup-sm .mark-tile {
      width: 28px;
      height: 28px;
      font-size: 12px;
    }
    .lockup-sm .brand-logo {
      height: 28px;
    }
    .content {
      padding: 8px;
    }
    .panel {
      min-height: auto;
      padding: 18px 16px 32px;
      border-radius: 14px;
    }
    .sheet:popover-open, .sheet.is-modal[open] {
      position: fixed;
      inset: 0 auto 0 0;
      display: block;
      width: min(300px, 88vw);
      height: 100dvh;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: 12px 8px 12px 12px;
      overflow-y: auto;
      border: 0;
      border-right: 1px solid var(--line);
      background: var(--app-bg);
      color: var(--ink);
    }
    .sheet::backdrop {
      background: rgb(8 10 14 / 0.45);
    }
    .sheet .side-inner {
      min-height: calc(100dvh - 24px);
    }
    .sheet-close {
      position: absolute;
      top: 16px;
      right: 10px;
      z-index: 1;
    }
    .sheet .side-brand {
      margin-right: 36px;
    }
    @supports not selector(:popover-open) {
      .mbar-menu, .sheet-close {
        display: none;
      }
      .sheet {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 12px;
        border: 0;
        background: transparent;
        color: inherit;
      }
    }
  }
  @media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    .sheet:popover-open, .sheet.is-modal[open] {
      transition: transform 0.22s ease, display 0.22s allow-discrete, overlay 0.22s allow-discrete;
    }
    @starting-style {
      .sheet:popover-open, .sheet.is-modal[open] {
        transform: translateX(-100%);
      }
    }
  }
  @media (prefers-color-scheme: dark) {
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .brand-light {
      display: none;
    }
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .brand-dark {
      display: block;
    }
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .brand-plate {
      padding: 3px 8px;
      border-radius: 6px;
      background: #ffffff;
      box-sizing: content-box;
    }
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .brand-light {
    display: none;
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .brand-dark {
    display: block;
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .brand-plate {
    padding: 3px 8px;
    border-radius: 6px;
    background: #ffffff;
    box-sizing: content-box;
  }
  .connect-marketplace {
    padding-top: 28px;
  }
  .connect-intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 28px;
  }
  .connect-intro h1 {
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -.035em;
  }
  .connect-intro p {
    color: var(--muted);
  }
  .connect-intro .connect-eyebrow {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .connect-identity {
    max-width: 260px;
    overflow-wrap: anywhere;
    font-size: 12px;
  }
  .connect-identity strong {
    display: block;
    color: var(--ink);
    font-weight: 500;
  }
  .connect-claude-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .connect-claude-bar h2 {
    margin: 0 0 5px;
    font-size: 18px;
  }
  .connect-claude-bar p {
    margin: 0;
    color: var(--muted);
  }
  .connect-claude-bar > .btn {
    flex-shrink: 0;
  }
  .connect-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin: 24px 0 28px;
  }
  .connect-card {
    display: flex;
    flex-direction: column;
    min-height: 272px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .connect-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .connect-card-top h2 {
    flex: 1;
    margin: 0;
    font-size: 19px;
  }
  .connect-card-top .status {
    flex-basis: max-content;
    margin-top: 8px;
  }
  .connect-card > p {
    margin: 12px 0;
  }
  .connect-card-description {
    color: var(--muted);
    line-height: 1.6;
  }
  .connect-card .connect-card-action {
    margin-top: auto;
    padding-top: 12px;
  }
  .connect-count {
    font-weight: 600;
  }
  .connect-details {
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }
  .connect-details summary {
    cursor: pointer;
  }
  .connect-details > summary {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
  }
  .connect-details > ul {
    list-style: none;
    margin: 12px 0;
    padding: 0;
  }
  .connect-details > ul > li {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .connect-permissions {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 14px;
  }
  .connect-permissions dt {
    margin-top: 10px;
    font-weight: 600;
  }
  .connect-permissions dd {
    margin: 4px 0 0;
  }
  .connect-help {
    padding: 18px 0;
    border-top: 1px solid var(--line);
  }
  @media (max-width: 900px) {
    .connect-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 580px) {
    .connect-intro, .connect-claude-bar {
      align-items: flex-start;
      flex-direction: column;
      gap: 14px;
    }
    .connect-cards {
      grid-template-columns: minmax(0, 1fr);
    }
    .connect-card {
      min-height: 0;
    }
    .connect-identity {
      max-width: 100%;
    }
  }
  .layout-auth body {
    background: var(--panel);
  }
  .auth {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    background: var(--panel);
  }
  .auth-main {
    flex: 1 1 480px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px clamp(24px, 4vw, 64px);
  }
  .auth-brand .mark-tile {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 14px;
  }
  .auth-brand .brand-name {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: var(--display-weight);
    letter-spacing: var(--display-track);
  }
  .auth-body {
    width: 100%;
    max-width: 392px;
    margin: auto 0;
    padding: 48px 0;
  }
  .auth-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.12;
  }
  .auth-lead {
    margin: 12px 0 28px;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
  }
  .auth-lead strong {
    color: var(--ink);
    font-weight: 600;
  }
  .auth-form .btn {
    margin-top: 12px;
  }
  .auth-note {
    margin: 22px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
  }
  .auth-aside {
    margin: 22px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--sunken);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
  }
  .auth-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
  }
  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 24px -8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
  }
  .back-link:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--ink) 6%, transparent);
    }
    color: var(--ink);
  }
  .providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .provider {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--panel);
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
  }
  .provider:hover {
    background: var(--sunken);
  }
  .provider > .icon:first-child {
    color: var(--ink-2);
  }
  .provider-text {
    flex: 1;
  }
  .provider > .icon:last-child {
    color: var(--muted);
  }
  .input-code {
    font-family: var(--mono);
    font-size: 22px;
    letter-spacing: 0.3em;
    text-align: center;
    height: 56px;
  }
  .code-boxes {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .code-box {
    width: 52px;
    height: 58px;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--panel);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 24px;
    text-align: center;
    caret-color: var(--accent-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .code-box:focus {
    outline: none;
    border: 2px solid var(--accent-ink);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .code-box[aria-invalid="true"] {
    border-color: var(--bad-text);
  }
  .code-longer {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--link);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  .code-sep {
    flex: none;
    width: 10px;
    height: 2px;
    background: var(--line-2);
  }
  .resend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    font-size: 13.5px;
    color: var(--muted);
  }
  .resend .btn:disabled {
    opacity: 1;
    background: var(--sunken);
    color: var(--muted);
    border-color: var(--line);
  }
  .auth-art {
    flex: 999 1 560px;
    display: flex;
    min-height: 280px;
    padding: 12px;
  }
  .auth-stage {
    flex: 1;
    min-height: 256px;
  }
  .auth-pill {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(460px, 86%);
    padding: 11px 16px;
    border: 1px solid var(--brain-chip-line);
    border-radius: 999px;
    background: var(--brain-chip);
    backdrop-filter: blur(10px);
    color: var(--brain-text);
    font-size: 14px;
  }
  .auth-pill.is-waiting {
    width: auto;
    white-space: nowrap;
  }
  .auth-pill-icon {
    color: var(--glow);
  }
  .auth-prompts {
    position: relative;
    flex: 1;
    height: 20px;
    overflow: hidden;
  }
  .auth-prompt {
    position: absolute;
    inset: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
  }
  .auth-prompt.p1 {
    opacity: 1;
  }
  .caret {
    color: var(--glow);
  }
  .wait-dots {
    display: inline-flex;
    gap: 4px;
  }
  .wait-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--glow);
  }
  .auth-caption {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    color: var(--brain-text);
  }
  .auth-caption-text {
    margin: 0;
    max-width: 380px;
    font-size: 13.5px;
    color: var(--brain-muted);
  }
  .auth-caption-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .auth-private {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    color: var(--brain-muted);
  }
  .glow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--glow);
    box-shadow: 0 0 10px var(--glow);
  }
  @media (max-width: 1039.98px) {
    .auth-art {
      order: 1;
      flex-basis: 100%;
      height: 240px;
      min-height: 0;
      padding: 0 8px 8px;
    }
    .auth-stage {
      min-height: 0;
    }
    .auth-caption {
      left: 20px;
      right: 20px;
      bottom: 16px;
    }
    .auth-caption-text, .auth-private {
      display: none;
    }
    .auth-pill {
      top: 16px;
      font-size: 13px;
      padding: 8px 14px;
    }
    .auth-main {
      padding: 20px 20px 24px;
    }
    .auth-body {
      padding: 28px 0 36px;
      margin: 0;
    }
    .auth-title {
      font-size: 28px;
    }
  }
  @media (max-width: 640px) {
    .auth-art {
      display: none;
    }
  }
  @media (max-width: 420px) {
    .code-boxes {
      gap: 6px;
    }
    .code-box {
      width: 42px;
      height: 52px;
      font-size: 21px;
    }
    .code-sep {
      width: 6px;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .auth-prompt {
      animation: auth-prompt 12s ease-in-out infinite;
    }
    .auth-prompt.p1 {
      opacity: 0;
    }
    .auth-prompt.p2 {
      animation-delay: 4s;
    }
    .auth-prompt.p3 {
      animation-delay: 8s;
    }
    .caret {
      animation: auth-blink 1.1s steps(1) infinite;
    }
    .wait-dots span {
      animation: auth-dot 1.2s ease-in-out infinite;
    }
    .wait-dots span:nth-child(2) {
      animation-delay: 0.2s;
    }
    .wait-dots span:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
  .two-step-steps {
    grid-template-columns: minmax(0, 1fr);
    margin: 4px 0 24px;
    font-size: 14px;
  }
  .two-step-scan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
  }
  .two-step-qr {
    display: inline-block;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: #ffffff;
  }
  .two-step-qr img {
    display: block;
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
  }
  .two-step-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    height: auto;
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
  }
  .two-step-key {
    width: 100%;
  }
  .two-step-key summary, .auth-emergency summary {
    cursor: pointer;
    color: var(--link);
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .two-step-key[open] summary {
    margin-bottom: 10px;
  }
  .two-step-key .copy-row .input {
    letter-spacing: 0.06em;
  }
  .two-step-restart {
    margin: 14px 0 0;
  }
  .two-step-restart .link-btn {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--link);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  .two-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
  }
  .two-step-account .two-step-steps {
    max-width: 560px;
  }
  .two-step-account .auth-form, .two-step-account .auth-title {
    max-width: 420px;
  }
  .two-step-account .auth-title {
    font-size: 26px;
    margin-bottom: 18px;
  }
  .two-step-add {
    margin: 18px 0;
  }
  .two-step-claude {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 480px;
  }
  .two-step-claude svg {
    flex: none;
    margin-top: 2px;
  }
  .two-step-claude strong {
    color: var(--ink);
    font-weight: 600;
  }
  .two-step-device {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
  }
  .two-step-device legend {
    margin-bottom: 8px;
    padding: 0;
  }
  .two-step-device-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--panel);
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
  }
  .two-step-device-row input {
    grid-row: span 2;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand-accent);
  }
  .two-step-device-row .field-hint {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .two-step-device-row:has(input:checked) {
    border-color: var(--brand-accent);
  }
  .two-step-device-row:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .auth-emergency {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .auth-emergency[open] summary {
    margin-bottom: 4px;
  }
  .auth-emergency .auth-note {
    margin: 6px 0 4px;
  }
  @media (max-width: 520px) {
    .two-step-open {
      order: -1;
    }
  }
  @media (max-width: 420px) {
    .two-step-qr img {
      width: 176px;
      height: 176px;
    }
    .two-step-actions .btn {
      width: 100%;
      justify-content: center;
    }
  }
  .plain {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .plain-top {
    padding: 20px clamp(16px, 4vw, 40px);
  }
  .plain-main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px clamp(16px, 4vw, 40px) 40px;
  }
  .plain-main.narrow {
    max-width: 520px;
    padding-top: clamp(16px, 8vh, 80px);
  }
  .plain-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
  }
  .plain-card h1 {
    margin: 0 0 10px;
    font-size: 24px;
  }
  .foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    font-size: 12.5px;
    color: var(--muted);
  }
}
@keyframes auth-prompt {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  4%, 30% {
    opacity: 1;
    transform: none;
  }
  34%, 100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes auth-blink {
  50% {
    opacity: 0;
  }
}
@keyframes auth-dot {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
@layer components {
  .brain-stage {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 22px;
    color: var(--brain-text);
    background: radial-gradient(circle at 50% 49%, var(--glow-faint) 0%, transparent 36%), var(--brain-bg);
  }
  .brain-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(var(--brain-faint) 1px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 55% 62% at 50% 50%, #000 15%, transparent 78%);
    mask-image: radial-gradient(ellipse 55% 62% at 50% 50%, #000 15%, transparent 78%);
  }
  .brain-stage.is-waiting {
    background: radial-gradient(circle at 50% 49%, var(--glow-soft) 0%, transparent 38%), var(--brain-bg);
  }
  .auth-stage > .brain-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .auth-stage > .brain-band {
    display: none;
  }
  @media (max-width: 1039.98px) {
    .auth-stage > .brain-square {
      display: none;
    }
    .auth-stage > .brain-band {
      display: block;
      inset: 4px 0 40px;
      height: auto;
    }
  }
  .brain-figure {
    margin: 0 0 24px;
    border-radius: 20px;
  }
  .brain-bar {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 0;
  }
  .brain-pause {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--brain-chip-line);
    border-radius: 10px;
    background: var(--brain-chip);
    color: var(--brain-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
  }
  .brain-pause[aria-pressed="true"] {
    background: var(--brain-chip-on);
  }
  .brain-pause:focus-visible {
    outline-color: var(--brain-text);
  }
  .brain-figure {
    container-type: inline-size;
  }
  .brain-figure .brain-svg {
    display: block;
    width: 100%;
  }
  .brain-figure .brain-wide {
    height: clamp(320px, 40vw, 540px);
  }
  .brain-figure .brain-narrow {
    display: none;
    height: auto;
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 400 / 620;
  }
  @container (max-width: 679.98px) {
    .brain-figure .brain-wide {
      display: none;
    }
    .brain-figure .brain-narrow {
      display: block;
    }
  }
  @supports not (container-type: inline-size) {
    @media (max-width: 767.98px) {
      .brain-figure .brain-wide {
        display: none;
      }
      .brain-figure .brain-narrow {
        display: block;
      }
    }
  }
  .brain-caption {
    padding: 0 18px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--brain-muted);
  }
  .brain-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    margin: 0 auto;
    padding: 9px 18px;
    width: fit-content;
    max-width: calc(100% - 24px);
    list-style: none;
    border: 1px solid var(--brain-chip-line);
    border-radius: 18px;
    background: var(--brain-chip);
    font-size: 12px;
    color: var(--brain-muted);
  }
  .brain-legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .brain-legend svg {
    display: block;
    flex: none;
  }
  .brain-legend .sep {
    width: 1px;
    height: 16px;
    background: var(--brain-chip-line);
  }
  .brain-legend .cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--c);
    box-shadow: 0 0 8px var(--c);
  }
  .brain-legend .lg-ring {
    fill: none;
    stroke-width: 1.4;
  }
  .brain-legend .lg-warn {
    stroke: var(--brain-warn);
    fill: none;
  }
  .brain-legend .lg-bad {
    stroke: var(--brain-bad);
    fill: none;
  }
  .brain-legend .lg-warn-fill {
    fill: var(--brain-warn);
  }
  .brain-legend .lg-run-track {
    fill: none;
    stroke: var(--brain-text);
    stroke-opacity: 0.22;
    stroke-width: 1.5;
  }
  .brain-legend .lg-run-arc {
    fill: none;
    stroke: var(--cat-agents);
    stroke-width: 1.7;
    stroke-linecap: round;
  }
  .brain-legend .lg-off {
    stroke: var(--brain-muted);
    stroke-width: 1.3;
    stroke-dasharray: 2 3;
  }
  .brain-legend .lg-unknown {
    stroke: var(--brain-muted);
    stroke-width: 1.3;
    stroke-dasharray: 7 3;
  }
  .brain-legend .lg-idle {
    stroke: var(--brain-muted);
    stroke-width: 1.3;
    stroke-opacity: 0.7;
  }
  .brain-foot {
    padding: 4px 0 16px;
  }
  .brain-view {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 14px 5px 5px;
    border: 1px solid var(--brain-chip-line);
    border-radius: 999px;
    background: var(--brain-chip);
    font-size: 12.5px;
    color: var(--brain-muted);
  }
  .brain-view strong {
    font-weight: 600;
    color: var(--brain-text);
  }
  .brain-view .who {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--brain-chip-on);
    color: var(--glow);
  }
  .cat-knowledge {
    --c: var(--cat-knowledge);
  }
  .cat-agents {
    --c: var(--cat-agents);
  }
  .cat-tools {
    --c: var(--cat-tools);
  }
  .hb-stop {
    stop-color: var(--c);
  }
  .hb-stop-hub {
    stop-color: var(--glow);
  }
  .hb-stop-matte-hi {
    stop-color: var(--brain-matte-hi);
  }
  .hb-stop-matte-lo {
    stop-color: var(--brain-matte-lo);
  }
  .hb-spoke-live path {
    fill: none;
    stroke-linecap: round;
  }
  .hb-spoke-glow {
    stroke-width: 5;
    opacity: 0.26;
  }
  .hb-spoke-live .hb-spoke {
    stroke-width: 1.2;
    opacity: 0.8;
  }
  .hb-spoke.is-off {
    stroke: var(--brain-muted);
    stroke-width: 1.2;
    stroke-dasharray: 2 6;
    stroke-linecap: round;
    opacity: 0.5;
  }
  .hb-tr {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 8 152;
    stroke-dashoffset: -46;
  }
  .hb-tr-soft {
    stroke: var(--c);
    stroke-width: 9;
    opacity: 0.2;
  }
  .hb-tr-core {
    stroke: var(--c);
    stroke-width: 2.4;
  }
  .hb-tr-head {
    stroke: var(--brain-spark);
    stroke-width: 4;
    stroke-dasharray: 0.5 159.5;
    stroke-dashoffset: -53.5;
  }
  .hb-pool {
    fill: var(--glow);
    opacity: var(--brain-pool);
  }
  .hb-glow {
    fill: var(--glow);
    opacity: var(--brain-halo);
  }
  .hb-breathe {
    transform-box: fill-box;
    transform-origin: center;
  }
  .hb-ring-base circle {
    fill: none;
    stroke: var(--brain-faint);
    stroke-width: 1;
  }
  .hb-ring-spin, .hb-rim-spin {
    transform-box: fill-box;
    transform-origin: center;
  }
  .hb-ring-soft {
    fill: none;
    stroke: var(--glow);
    stroke-width: 15;
    opacity: 0.09;
  }
  .hb-ring-arc {
    fill: none;
    stroke-linecap: round;
    stroke-width: 2.6;
  }
  .hb-ring-a {
    stroke: var(--glow);
  }
  .hb-ring-hi {
    stroke: var(--glow-hi);
    stroke-width: 3;
  }
  .hb-hub-disc {
    stroke: var(--brain-disc-edge);
    stroke-width: 1;
  }
  .hb-hub-inner {
    fill: none;
    stroke: var(--brain-sheen);
  }
  .hb-mark {
    fill: var(--glow-hi);
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  .hb-mark-img, .hb-logo {
    filter: drop-shadow(0 0 6px var(--glow-soft));
  }
  .hb-plate {
    fill: var(--plate);
  }
  .hb-plate-dark {
    fill: var(--plate-dark);
  }
  .hb-on-dark {
    display: none;
  }
  .hb-name {
    fill: var(--brain-text);
    font-family: var(--font-heading);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-track);
  }
  .hb-live {
    fill: var(--brain-muted);
    font-family: var(--font-body);
  }
  .hb-live-dot {
    fill: var(--glow);
  }
  .hb-halo circle {
    fill: none;
    stroke: var(--c);
    stroke-width: 9;
    opacity: 0.13;
  }
  .hb-disc {
    stroke: var(--brain-disc-edge);
    stroke-width: 1;
  }
  .hb-edge {
    fill: none;
    stroke: var(--c);
    stroke-opacity: 0.4;
    stroke-width: 1.2;
  }
  .hb-rim-soft {
    fill: none;
    stroke: var(--c);
    stroke-width: 7;
    stroke-linecap: round;
    opacity: 0.45;
  }
  .hb-rim {
    fill: none;
    stroke: var(--c);
    stroke-width: 2.3;
    stroke-linecap: round;
  }
  .hb-inner {
    fill: none;
    stroke: var(--brain-sheen);
  }
  .hb-sheen {
    fill: var(--brain-sheen);
  }
  .hb-icon {
    fill: none;
    stroke: var(--c);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hb-tile {
    fill: var(--brain-matte-hi);
    stroke: var(--c);
    stroke-width: 1;
  }
  .hb-tile-under {
    stroke: none;
  }
  .hb-tile-text {
    fill: var(--c);
    font-family: var(--font-body);
    font-weight: 700;
  }
  .hb-logo-halo {
    fill: none;
    stroke: var(--c);
    stroke-width: 5;
    opacity: 0.28;
  }
  .hb-logo-back {
    fill: var(--plate);
  }
  .hb-logo-ring {
    fill: none;
    stroke: var(--c);
    stroke-width: 1;
  }
  .hb-kick {
    fill: var(--c);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    paint-order: stroke;
    stroke: var(--brain-bg);
    stroke-width: 4px;
    stroke-linejoin: round;
  }
  .hb-label {
    fill: var(--brain-text);
    font-family: var(--font-body);
    font-weight: 620;
    paint-order: stroke;
    stroke: var(--brain-bg);
    stroke-width: 4px;
    stroke-linejoin: round;
  }
  .hb-sub {
    fill: var(--brain-muted);
    font-family: var(--font-body);
    paint-order: stroke;
    stroke: var(--brain-bg);
    stroke-width: 4px;
    stroke-linejoin: round;
  }
  .hb-sub.tone-warn {
    fill: var(--brain-warn-text);
    font-weight: 600;
  }
  .hb-sub.tone-bad {
    fill: var(--brain-bad-text);
    font-weight: 600;
  }
  .hb-sub.tone-run {
    fill: var(--c);
    font-weight: 600;
  }
  .hb-node.is-off .hb-disc {
    opacity: 0.6;
  }
  .hb-node.is-off .hb-edge {
    stroke: var(--brain-muted);
    stroke-opacity: 0.8;
    stroke-dasharray: 3 4;
  }
  .hb-node.is-off .hb-inner {
    opacity: 0.5;
  }
  .hb-node.is-off .hb-sheen {
    display: none;
  }
  .hb-node.is-off .hb-icon {
    stroke: var(--brain-muted);
    opacity: 0.8;
    filter: none;
  }
  .hb-node.is-off .hb-tile {
    fill: none;
    stroke: var(--brain-muted);
    stroke-opacity: 0.55;
    stroke-dasharray: 3 3;
  }
  .hb-node.is-off .hb-tile-under {
    display: none;
  }
  .hb-node.is-off .hb-tile-text {
    fill: var(--brain-muted);
    filter: none;
  }
  .hb-brand-text {
    font-family: var(--font-body);
    font-weight: 700;
  }
  .hb-node.is-off .hb-brand, .hb-node.is-off .hb-brand-text {
    opacity: 0.4;
  }
  .hb-node.is-off .hb-logo-badge {
    opacity: 0.5;
  }
  .hb-node.is-off .hb-logo-img {
    filter: grayscale(1) brightness(0.85);
  }
  .hb-node.is-off .hb-logo-halo {
    display: none;
  }
  .hb-node.is-off .hb-logo-back {
    fill: #cfcfcf;
  }
  .hb-node.is-off .hb-logo-ring {
    stroke: var(--brain-faint);
  }
  .hb-node.is-off .hb-kick, .hb-node.is-off .hb-label {
    fill: var(--brain-muted);
  }
  .hb-spoke.is-off.is-unknown {
    stroke-dasharray: 7 4;
    stroke-linecap: butt;
  }
  .hb-spoke.is-off.is-idle {
    stroke-dasharray: none;
    opacity: 0.4;
  }
  .hb-node.is-off.is-unknown .hb-edge, .hb-node.is-off.is-unknown .hb-tile {
    stroke-dasharray: 7 4;
  }
  .hb-node.is-off.is-idle .hb-edge, .hb-node.is-off.is-idle .hb-tile {
    stroke-dasharray: none;
  }
  .hb-badge {
    --b: var(--brain-warn);
    --bt: var(--brain-warn-text);
  }
  .hb-badge.is-failed {
    --b: var(--brain-bad);
    --bt: var(--brain-bad-text);
  }
  .hb-badge-disc {
    fill: var(--brain-matte-lo);
    stroke: var(--b);
    stroke-width: 1.6;
  }
  .hb-badge-halo {
    fill: none;
    stroke: var(--b);
    stroke-width: 5;
    opacity: 0.35;
  }
  .hb-badge-pulse {
    fill: none;
    stroke: var(--b);
    stroke-width: 1.6;
    opacity: 0.8;
    transform-box: fill-box;
    transform-origin: center;
  }
  .hb-badge text {
    fill: var(--bt);
    font-weight: 800;
    font-family: var(--font-body);
  }
  a.hb-node {
    cursor: pointer;
  }
  .hb-focus {
    fill: none;
    stroke: transparent;
    stroke-width: 2;
  }
  .hb-node:focus {
    outline: none;
  }
  .hb-node:focus-visible .hb-focus {
    stroke: var(--brain-text);
  }
  a.hb-node:hover .hb-edge {
    stroke-opacity: 0.9;
    stroke-width: 2;
  }
  a.hb-node:hover .hb-label {
    text-decoration: underline;
  }
  .brain-stage.is-paused *, .brain-figure.is-paused *, .auth-stage:has(.motion-check:checked) * {
    animation-play-state: paused !important;
  }
  .motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--brain-chip-line);
    border-radius: 10px;
    background: var(--brain-chip);
    color: var(--brain-text);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
  }
  .motion-check {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--glow);
  }
  .motion-check:focus-visible {
    outline: 2px solid var(--brain-text);
    outline-offset: 2px;
  }
  @media (prefers-color-scheme: dark) {
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .hb-on-dark {
      display: inline;
    }
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .hb-on-light {
      display: none;
    }
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .hb-on-dark {
    display: inline;
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .hb-on-light {
    display: none;
  }
  @media (prefers-color-scheme: light) {
    :scope:where(:root:not([data-theme="dark"]), :root:not([data-theme="dark"]) *) .hb-icon, :scope:where(:root:not([data-theme="dark"]), :root:not([data-theme="dark"]) *)  .hb-mark, :scope:where(:root:not([data-theme="dark"]), :root:not([data-theme="dark"]) *)  .hb-tile-text {
      filter: none;
    }
    :scope:where(:root:not([data-theme="dark"]), :root:not([data-theme="dark"]) *) .hb-disc, :scope:where(:root:not([data-theme="dark"]), :root:not([data-theme="dark"]) *)  .hb-hub-disc {
      filter: drop-shadow(0 6px 12px rgb(16 24 40 / 0.1));
    }
    :scope:where(:root:not([data-theme="dark"]), :root:not([data-theme="dark"]) *) .hb-mark-img, :scope:where(:root:not([data-theme="dark"]), :root:not([data-theme="dark"]) *)  .hb-logo {
      filter: none;
    }
  }
  :scope:where(:root[data-theme="light"], :root[data-theme="light"] *) .hb-icon, :scope:where(:root[data-theme="light"], :root[data-theme="light"] *)  .hb-mark, :scope:where(:root[data-theme="light"], :root[data-theme="light"] *)  .hb-tile-text {
    filter: none;
  }
  :scope:where(:root[data-theme="light"], :root[data-theme="light"] *) .hb-disc, :scope:where(:root[data-theme="light"], :root[data-theme="light"] *)  .hb-hub-disc {
    filter: drop-shadow(0 6px 12px rgb(16 24 40 / 0.1));
  }
  :scope:where(:root[data-theme="light"], :root[data-theme="light"] *) .hb-mark-img, :scope:where(:root[data-theme="light"], :root[data-theme="light"] *)  .hb-logo {
    filter: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hb-tr-soft, .hb-tr-core {
    animation: hb-tr 3.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .hb-tr-head {
    animation: hb-hd 3.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .hb-dot.d1 .hb-tr {
    animation-duration: 4.1s;
    animation-delay: -1.6s;
  }
  .hb-dot.d2 .hb-tr {
    animation-duration: 3s;
    animation-delay: -2.1s;
  }
  .hb-dot.d3 .hb-tr {
    animation-duration: 4.5s;
    animation-delay: -0.8s;
  }
  .hb-dot.d4 .hb-tr {
    animation-duration: 3.7s;
    animation-delay: -2.9s;
  }
  .hb-dot.d5 .hb-tr {
    animation-duration: 3.2s;
    animation-delay: -1.1s;
  }
  .hb-dot.d6 .hb-tr {
    animation-duration: 4.3s;
    animation-delay: -3.4s;
  }
  .hb-dot.d7 .hb-tr {
    animation-duration: 3.5s;
    animation-delay: -0.4s;
  }
  .hb-breathe {
    animation: hb-breathe 5s ease-in-out infinite;
  }
  .hb-ring-spin {
    animation: hb-spin 12s linear infinite;
  }
  .hb-rim-spin {
    animation: hb-spin 3s linear infinite;
  }
  .hb-halo {
    animation: hb-flicker 5s ease-in-out infinite;
  }
  .hb-badge.is-review .hb-badge-pulse {
    animation: hb-pulse 2.4s ease-out infinite;
  }
  .hb-live-dot {
    animation: hb-blink 1.8s ease-in-out infinite;
  }
  .is-waiting .hb-dot .hb-tr {
    animation-duration: 1.9s;
  }
  .is-waiting .hb-breathe {
    animation-duration: 2.4s;
  }
  .is-waiting .hb-ring-spin {
    animation-duration: 5s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brain-pause, .motion-toggle {
    display: none !important;
  }
}
@keyframes hb-tr {
  from {
    stroke-dashoffset: 8;
  }
  to {
    stroke-dashoffset: -152;
  }
}
@keyframes hb-hd {
  from {
    stroke-dashoffset: 0.5;
  }
  to {
    stroke-dashoffset: -159.5;
  }
}
@keyframes hb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hb-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes hb-flicker {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes hb-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes hb-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@layer components {
  .home-setup, .home-work {
    margin-bottom: 20px;
  }
  .home-grid + .ask-wrap, .home-grid + .home-overview, .ask-wrap + .home-overview {
    margin-top: 24px;
  }
  .home-tasks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .home-tasks li {
    margin: 0;
  }
  .home-tasks .btn {
    min-height: 44px;
  }
  :where(.main) .att-group-h {
    margin: 14px 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
  }
  :where(.main) .setup-list .is-done .att-title {
    color: var(--muted);
  }
  .setup-actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
  .setup-actions form {
    margin: 0;
  }
  @media (max-width: 559.98px) {
    .setup-list .att-item {
      flex-wrap: wrap;
    }
    .setup-actions {
      width: 100%;
      justify-content: flex-start;
    }
    .setup-actions .btn {
      min-height: 44px;
    }
  }
  .int-app-facts {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    font-size: 13px;
  }
  .int-app-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    gap: 8px;
  }
  :where(.main) .int-app-facts dt {
    color: var(--muted);
  }
  :where(.main) .int-app-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .int-req-cards {
    display: none;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .int-req-card {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  :where(.main) .int-req-card p {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
  }
  .int-req-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  :where(.main) .int-req-meta, :where(.main) .int-req-next {
    color: var(--muted);
    font-size: 13px;
  }
  @media (max-width: 767.98px) {
    .int-req-cards {
      display: grid;
    }
    .int-req-table {
      display: none;
    }
  }
  .rep-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .rep-unresolved {
    margin-bottom: 12px;
  }
  @media (max-width: 559.98px) {
    .rep-filter {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      width: 100%;
    }
    .rep-field {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .rep-field .input, .rep-filter .btn {
      width: 100%;
      min-height: 44px;
    }
  }
  .k-list .k-title, .results .result-title {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .k-col .pills {
    margin: 4px 0 12px;
  }
  .k-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }
  .k-pager:empty {
    display: none;
  }
  .k-pager .btn {
    min-height: 44px;
  }
  .k-pager-at {
    color: var(--muted);
    font-size: 13px;
  }
  :where(.main) .ask-chips .ask-chip {
    min-height: 44px;
    height: auto;
    white-space: normal;
    text-align: left;
  }
  .brain-bar .brain-pause {
    min-height: 44px;
  }
  .new-tab-cue {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 500;
    opacity: 0.85;
  }
  .rep-group > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
  }
  .rep-group > summary::-webkit-details-marker {
    display: none;
  }
  .rep-group > summary::before {
    content: "▸";
    color: var(--muted);
  }
  .rep-group[open] > summary::before {
    content: "▾";
  }
  :where(.main) .rep-group > summary .section-title {
    margin: 0;
  }
  .rep-group-note {
    color: var(--muted);
    font-size: 13px;
  }
  .k-help {
    margin-top: 24px;
  }
  .k-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 12px;
  }
  .k-help-card {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  :where(.main) .k-help-title {
    margin: 0 0 4px;
    font-size: 15px;
  }
  :where(.main) .k-help-card p {
    margin: 0;
    color: var(--muted);
  }
  :where(.main) .home-tasks li {
    display: grid;
    gap: 4px;
    max-width: 22rem;
  }
  :where(.main) .home-task-note {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
  }
  .home-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
  }
  .home-fold > summary::-webkit-details-marker {
    display: none;
  }
  .home-fold > summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--muted);
  }
  .home-fold:not([open]) > summary::after {
    content: "▸";
  }
  :where(.main) .home-fold > summary .section-title {
    margin: 0;
  }
  :where(.main) .home-updated {
    margin: 4px 0 0;
  }
  .robot-connector-settings {
    max-width: 64rem;
    overflow-wrap: anywhere;
  }
  .robot-connector-settings .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .agent-secrets {
    max-width: 48rem;
    overflow-wrap: anywhere;
  }
  .agent-secrets-header {
    overflow-wrap: anywhere;
  }
  .agent-secret-list {
    display: grid;
    gap: 16px;
  }
  .agent-secret-card h2 {
    font-size: 17px;
  }
  .agent-secret-value {
    width: 100%;
    max-width: 100%;
    min-height: 9rem;
    resize: vertical;
  }
  .agent-secrets .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
  }
  .agent-settings {
    max-width: 64rem;
    overflow-wrap: anywhere;
    display: grid;
    gap: 16px;
  }
  .agent-settings > * {
    min-width: 0;
  }
  .agent-settings .table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
  .agent-settings .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
  }
  .agent-settings .settings-table th[scope="row"] {
    width: 40%;
    text-align: left;
    vertical-align: top;
  }
  .agent-settings .settings-changes, .agent-settings .settings-history {
    display: grid;
    gap: 6px;
    padding-left: 1.25rem;
  }
  .agent-settings .settings-rows input:not([type="checkbox"]), .agent-settings .settings-rows select {
    width: 100%;
    min-width: 6rem;
  }
  .agent-settings .field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-top: 8px;
  }
  .agent-settings fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 12px;
  }
  :where(.main) .section-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .section-head > .section-title, .detail-main > .section-title {
    margin: 0;
  }
  .section-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-ink);
    text-decoration: none;
  }
  .section-link:hover {
    text-decoration: underline;
  }
  .tabs {
    margin: 0 0 18px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs-list {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .tabs-list li {
    margin: 0;
  }
  .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .tab:hover {
    color: var(--ink);
  }
  .tab:focus-visible {
    outline-offset: -3px;
    border-radius: 8px 8px 0 0;
  }
  .tab[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--ink);
  }
  .tab-count {
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
  }
  .pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .pills-list li {
    margin: 0;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink-2);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
  }
  .pill:hover {
    background: var(--sunken);
  }
  .pill[aria-current="true"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--panel);
    font-weight: 600;
  }
  .pill-count {
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
  }
  .search-form, .filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .search-field {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .search-field > .icon {
    position: absolute;
    left: 11px;
    color: var(--muted);
    pointer-events: none;
  }
  .search-field > .input {
    width: min(240px, 60vw);
    padding-left: 32px;
  }
  .input-sm {
    width: auto;
    height: 34px;
    font-size: 13px;
    border-radius: 9px;
  }
  .filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
  }
  .filter-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .about-task > p {
    margin: 0 0 8px;
  }
  .about-sub {
    margin: 14px 0 4px;
    font-size: 14px;
    font-weight: 600;
  }
  .table-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 13.5px;
  }
  .data-table th {
    padding: 10px 14px;
    background: var(--sunken);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
  }
  .data-table td {
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    vertical-align: middle;
  }
  .data-table tbody tr:first-child td {
    border-top: 0;
  }
  .data-table tbody tr:hover td {
    background: var(--sunken);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--sunken) 60%, transparent);
    }
  }
  .cell-strong {
    font-weight: 600;
  }
  .cell-num {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .cell-end {
    text-align: right;
    white-space: nowrap;
  }
  .row-link {
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: none;
  }
  .row-link:hover {
    text-decoration: underline;
  }
  .pager {
    display: flex;
    gap: 8px;
    margin-top: 16px;
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 20px;
    border: 1.5px dashed var(--line-2);
    border-radius: 14px;
    background: var(--sunken);
    text-align: center;
  }
  .empty-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border: 1px dashed var(--line-2);
    border-radius: 11px;
    color: var(--muted);
  }
  :where(.main) .empty-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
  }
  :where(.main) .empty-text {
    max-width: 480px;
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
  }
  :where(.main) .empty p {
    margin-bottom: 0;
  }
  .empty .btn {
    margin-top: 8px;
  }
  .page-foot {
    margin-top: 22px;
    font-size: 12.5px;
    color: var(--muted);
  }
  .hero-chips .tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--sunken);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
  }
  .callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.45;
  }
  .callout > .icon {
    margin-top: 2px;
  }
  .callout-warn {
    border-color: var(--warn-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--warn-text) 22%, var(--warn-bg));
    }
    background: var(--warn-bg);
    color: var(--warn-text);
  }
  .callout-bad {
    border-color: var(--bad-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bad-text) 22%, var(--bad-bg));
    }
    background: var(--bad-bg);
    color: var(--bad-text);
  }
  .callout-ok {
    border-color: var(--ok-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ok-text) 22%, var(--ok-bg));
    }
    background: var(--ok-bg);
    color: var(--ok-text);
  }
  .row-link-result {
    margin-right: 12px;
  }
  .mono, .mono-id {
    font-family: var(--mono);
    font-size: 12.5px;
    overflow-wrap: anywhere;
  }
  .agent-tile {
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent-ink);
  }
  .agent-tile-md {
    width: 40px;
    height: 40px;
  }
  .agent-tile-lg {
    width: 56px;
    height: 56px;
    border-radius: 15px;
  }
  .tone-run {
    background: var(--run-bg);
    color: var(--run-text);
  }
  .tone-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
  }
  .tone-bad {
    background: var(--bad-bg);
    color: var(--bad-text);
  }
  .tone-idle {
    background: var(--sunken);
    color: var(--muted);
  }
  .tone-dashed {
    background: transparent;
    border: 1px dashed var(--line-2);
    color: var(--muted);
  }
  .count-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .home-head {
    margin-bottom: 18px;
  }
  :where(.main) .home-greet {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
  }
  .status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 14px;
  }
  :where(.main) .status-line li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
  }
  .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--line-2);
  }
  .dot-run {
    background: var(--run-dot);
  }
  .dot-warn {
    background: #e0a028;
  }
  .dot-ok {
    background: #22a05a;
  }
  @media (prefers-reduced-motion: no-preference) {
    .dot-run, .status-run::before {
      animation: run-shimmer 1.6s ease-in-out infinite;
    }
  }
  .ask-wrap {
    margin-bottom: 20px;
  }
  .ask-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
  }
  :where(.main) .ask-bar p {
    margin: 0;
  }
  .ask-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-ink);
    font-size: 13.5px;
    font-weight: 600;
  }
  .ask-try {
    color: var(--muted);
    font-size: 13.5px;
  }
  .ask-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .ask-chips li {
    margin: 0;
  }
  :where(.main) .ask-chip {
    height: 30px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--sunken);
    color: var(--ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
  }
  :where(.main) .ask-chip:hover {
    border-color: var(--line-2);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--ink) 6%, var(--sunken));
    }
  }
  :where(.main) .ask-chip.is-copied {
    border-color: var(--accent-ink);
    background: var(--accent-soft);
    color: var(--accent-ink);
  }
  .ask-hint {
    margin-left: auto !important;
    color: var(--muted);
    font-size: 12.5px;
  }
  .home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 20px;
    align-items: start;
  }
  .home-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .home-connectors {
    margin-top: 28px;
  }
  .tool-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 14px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .tool-cards > li {
    margin: 0;
  }
  .tool-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .tool-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .tool-tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--sunken);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
  }
  :where(.main) .tool-card-name {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
  }
  :where(.main) .tool-card-kind, :where(.main) .tool-card-desc, :where(.main) .tool-card-actions {
    margin: 0;
  }
  .tool-card-kind {
    color: var(--muted);
    font-size: 12.5px;
  }
  .tool-card-desc {
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.45;
  }
  .tool-card-how {
    font-size: 13px;
    color: var(--ink-2);
  }
  .tool-card-how > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-ink);
  }
  .tool-card-how .instructions {
    margin-top: 8px;
    white-space: pre-wrap;
  }
  .att-list, .run-rows {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .att-list li, :where(.main) .run-rows li {
    margin: 0;
  }
  .att-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }
  .att-item:last-child {
    padding-bottom: 0;
  }
  .att-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .att-text {
    flex: 1;
    min-width: 0;
  }
  :where(.main) .att-title {
    margin: 0;
    font-weight: 600;
  }
  :where(.main) .att-sub {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .att-clear {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13.5px;
  }
  .att-clear > .icon {
    margin-top: 2px;
    color: var(--ok-text);
  }
  .run-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 -8px;
    padding: 9px 8px;
    border-top: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
  }
  a.run-row:hover {
    background: var(--sunken);
  }
  .run-row > .status {
    justify-self: start;
  }
  .run-row-main {
    min-width: 0;
  }
  .run-row-title {
    display: block;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .run-row-sub {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .run-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .agent-grid > li {
    margin: 0;
  }
  .agent-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .agent-card:hover {
    box-shadow: var(--shadow-hover);
  }
  .agent-card.is-running {
    border-color: var(--run-dot);
    box-shadow: 0 0 0 4px var(--run-bg);
  }
  .agent-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  :where(.main) .agent-card-name {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .card-link {
    color: var(--ink);
    text-decoration: none;
  }
  .card-link:hover {
    text-decoration: underline;
  }
  :where(.main) .agent-card-desc {
    display: -webkit-box;
    min-height: 40px;
    margin: 6px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .uses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .uses-label {
    color: var(--muted);
    font-size: 12px;
  }
  .uses-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .use-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    margin: 0;
    padding: 0 8px 0 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--sunken);
    color: var(--ink-2);
    font-size: 12px;
  }
  .use-letters {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel);
    font-size: 9.5px;
    font-weight: 700;
  }
  .agent-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  :where(.main) .agent-card-stats {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
  }
  .agent-card-last {
    color: var(--ink-2);
    font-weight: 500;
  }
  .agent-card-attention {
    color: var(--warn-text);
    font-weight: 600;
  }
  .agent-card-actions {
    display: flex;
    gap: 6px;
  }
  .agent-card-ask {
    justify-content: center;
    align-items: flex-start;
    border: 1.5px dashed var(--line-2);
    background: var(--sunken);
  }
  .agent-card-ask:hover {
    box-shadow: none;
  }
  :where(.main) .agent-card-ask .agent-card-desc {
    display: block;
    min-height: 0;
    -webkit-line-clamp: unset;
  }
  .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 20px;
    margin-bottom: 20px;
  }
  .hero-main {
    flex: 1 1 460px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
  }
  .hero-text {
    min-width: 0;
  }
  :where(.main) .hero-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
  }
  :where(.main) .hero-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
  }
  :where(.main) .hero-desc {
    max-width: 680px;
    margin: 12px 0 0;
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.55;
  }
  :where(.main) .hero-sub {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13.5px;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 24px;
    align-items: start;
  }
  .detail-main, .detail-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  @media (max-width: 1023.98px) {
    .detail-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  :where(.main) .detail-main > section, :where(.main) .detail-side > section {
    margin-bottom: 0;
  }
  .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .detail-main > .kpis {
    margin-bottom: 0;
  }
  :where(.main) .kpi-foot {
    margin: -6px 0 16px;
    color: var(--muted);
    font-size: 13px;
  }
  .detail-main > .kpi-foot {
    margin: -8px 0 0;
  }
  .kpi {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  :where(.main) .kpi-label {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
  }
  :where(.main) .kpi-value {
    margin: 4px 0 2px;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: var(--display-weight);
    letter-spacing: var(--display-track);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  :where(.main) .kpi-note {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
  }
  :where(.main) .kpi-bad .kpi-note {
    color: var(--bad-text);
  }
  :where(.main) .kpi-warn .kpi-note {
    color: var(--warn-text);
  }
  .card-section, .side-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .side-card {
    padding: 16px 18px;
  }
  :where(.main) .side-card-title {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
  }
  :where(.main) .side-card-text {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
  }
  .side-card .side-card-doc {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
  }
  :where(.main) .side-card-action {
    margin: 12px 0 0;
  }
  .chart {
    margin: 0;
  }
  .chart-svg {
    display: block;
    width: 100%;
    height: 120px;
  }
  .chart-ok {
    fill: var(--brand-accent);
  }
  .chart-other {
    fill: var(--brand-accent);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--brand-accent) 35%, var(--panel));
    }
  }
  .chart-bad {
    fill: #e5484d;
  }
  .chart-warn {
    fill: var(--warn-text);
  }
  .chart-empty {
    fill: var(--line);
  }
  .chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
  }
  .chart-key {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 12px;
  }
  :where(.main) .chart-key li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
  }
  .chart-key span {
    width: 9px;
    height: 9px;
    border-radius: 2px;
  }
  .key-ok {
    background: var(--brand-accent);
  }
  .key-bad {
    background: #e5484d;
  }
  .key-warn {
    background: var(--warn-text);
  }
  .key-other {
    background: var(--brand-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--brand-accent) 35%, var(--panel));
    }
  }
  .timeline {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .timeline > li {
    margin: 0;
  }
  .tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 16px;
  }
  .tl-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 18px;
    bottom: 0;
    width: 1px;
    background: var(--line);
  }
  .tl-item:last-child {
    padding-bottom: 0;
  }
  .tl-dot {
    width: 13px;
    height: 13px;
    margin-top: 5px;
    border: 3px solid var(--panel);
    border-radius: 999px;
    background: var(--idle-text);
    box-shadow: 0 0 0 1px var(--line);
  }
  .tl-item.tl-ok .tl-dot {
    background: var(--ok-text);
  }
  .tl-item.tl-bad .tl-dot {
    background: var(--bad-text);
  }
  .tl-item.tl-warn .tl-dot {
    background: var(--warn-text);
  }
  .tl-item.tl-run .tl-dot {
    background: var(--run-dot);
  }
  .tl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }
  .tl-title {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
  }
  a.tl-title:hover {
    text-decoration: underline;
  }
  .tl-meta {
    color: var(--muted);
    font-size: 12.5px;
  }
  :where(.main) .tl-note {
    margin: 6px 0 0;
    color: var(--bad-text);
    font-size: 13px;
  }
  .steps {
    margin: 10px 0 0;
    padding: 8px 12px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
  }
  :where(.main) .steps > li {
    margin: 0;
  }
  .step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
  }
  .step-mark {
    display: inline-flex;
    color: var(--ok-text);
  }
  .step.is-bad .step-mark {
    color: var(--bad-text);
  }
  .step-text {
    flex: 1;
    min-width: 0;
  }
  .step-time {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .detail-main > .steps {
    margin-top: 0;
  }
  .raw-data {
    margin-top: 12px;
    font-size: 13px;
  }
  .raw-list {
    margin: 8px 0 0;
    padding-left: 20px;
  }
  .step-data {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px 12px;
    margin: 4px 0 8px;
  }
  .step-data dt {
    color: var(--muted);
  }
  .step-data dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
  }
  .access-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where(.main) .access-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }
  .access-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
  }
  .group-dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 10px;
    font-weight: 700;
  }
  .is-locked .group-dot {
    background: var(--sunken);
    color: var(--muted);
  }
  .access-size {
    color: var(--muted);
    font-size: 12.5px;
  }
  .access-you {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--ink-2);
    font-size: 13.5px;
  }
  .access-you > .icon {
    margin-top: 2px;
    color: var(--accent-ink);
  }
  .details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 14px;
    margin: 0;
    font-size: 13px;
  }
  .details dt {
    color: var(--muted);
  }
  .details dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .rule-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
    list-style: disc;
  }
  @media (max-width: 767.98px) {
    .table-wrap:has(> .runs-table) {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: none;
    }
    .data-table.runs-table {
      min-width: 0;
    }
    .runs-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .runs-table, .runs-table tbody {
      display: block;
    }
    .runs-table tr {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4px 12px;
      margin-bottom: 10px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
    }
    .data-table.runs-table td {
      display: flex;
      gap: 8px;
      padding: 0;
      border: 0 !important;
      min-width: 0;
    }
    .runs-table tbody tr:hover td {
      background: none;
    }
    .runs-table td[data-label]::before {
      content: attr(data-label);
      flex: none;
      min-width: 76px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .runs-table td.cell-status {
      grid-column: 1 / -1;
    }
    .runs-table td.cell-status::before, .runs-table td.cell-strong::before {
      content: none;
    }
    .runs-table td:not(.cell-status):not(.cell-end) {
      grid-column: 1 / -1;
    }
    .runs-table td.cell-end {
      position: static;
      grid-column: 1 / -1;
      justify-content: flex-end;
    }
    .runs-table .row-link::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 12px;
    }
    .runs-table .row-link:focus-visible {
      outline: none;
    }
    .runs-table .row-link:focus-visible::after {
      outline: 2px solid var(--focus);
      outline-offset: 2px;
    }
    .runs-table td:empty {
      display: none;
    }
  }
  @media (max-width: 559.98px) {
    .filter-field {
      flex: 1 1 100%;
      justify-content: space-between;
    }
    .filter-field > .input {
      flex: 0 1 60%;
      min-width: 0;
    }
    :where(.main) .home-greet {
      font-size: 26px;
    }
    .run-row {
      grid-template-columns: minmax(0, 1fr) auto;
      row-gap: 4px;
    }
    .run-row > .status {
      grid-column: 1 / -1;
    }
    .ask-hint {
      margin-left: 0 !important;
    }
    .hero-main {
      flex-basis: 100%;
    }
    :where(.main) .hero-title {
      font-size: 24px;
    }
    .toolbar {
      align-items: stretch;
    }
    .search-form {
      width: 100%;
    }
    .search-field {
      flex: 1;
    }
    .search-field > .input {
      width: 100%;
    }
  }
  @media (max-width: 767.98px) {
    .att-item {
      flex-wrap: wrap;
    }
    .att-item > .btn {
      flex: 1 1 100%;
      margin-left: 42px;
    }
    .run-row {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "status meta" "main main";
      row-gap: 6px;
    }
    .run-row > .status {
      grid-area: status;
    }
    .run-row-main {
      grid-area: main;
    }
    .run-row-meta {
      grid-area: meta;
    }
  }
  .run-row-title, .run-row-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@keyframes run-shimmer {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@layer components {
  .ai-model-settings {
    max-width: 78rem;
  }
  .ai-model-settings textarea {
    width: 100%;
    max-width: 100%;
  }
  .ai-model-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4, 1rem);
  }
  .ai-model-key-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5, 1.5rem);
    margin-top: 1.5rem;
  }
  .ai-model-key {
    min-width: 0;
    padding-block: 1rem;
    border-top: 1px solid var(--line);
    overflow-wrap: anywhere;
  }
  .ai-model-settings .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-block: 1rem;
  }
  .ai-model-settings details {
    margin-block: 1.5rem;
  }
  .ai-model-settings summary {
    cursor: pointer;
    margin-bottom: 1rem;
  }
  .ai-model-settings .field {
    min-width: 0;
  }
  @media (max-width: 640px) {
    .ai-model-fields, .ai-model-key-list {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .new-agent {
    max-width: 860px;
    min-width: 0;
  }
  .new-agent-form {
    display: grid;
    gap: 20px;
  }
  .new-agent-form > p, .new-agent-form fieldset {
    margin: 0;
    min-width: 0;
  }
  .new-agent-form fieldset {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
  }
  .new-agent-form legend {
    padding: 0 4px;
  }
  .new-agent-form .input {
    width: 100%;
    max-width: 100%;
  }
  .new-agent-form textarea {
    height: auto;
  }
  .draft-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
  }
  .draft-choice input {
    flex: none;
    margin-top: 4px;
  }
  .draft-choice span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .new-agent-form > button {
    justify-self: start;
  }
  .draft-output {
    margin-top: 28px;
    min-width: 0;
  }
  .draft-output-head {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .draft-output textarea {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 32rem;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 13px;
  }
  .draft-diagram {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
  }
  .draft-diagram li {
    position: relative;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    overflow-wrap: anywhere;
  }
  .draft-diagram li + li::before {
    content: '→';
    position: absolute;
    left: -18px;
  }
  .draft-diagram strong, .draft-diagram span {
    display: block;
  }
  .draft-diagram span {
    margin-top: 6px;
    color: var(--muted);
  }
  .draft-next {
    display: grid;
    gap: 10px;
    padding-left: 20px;
  }
  .draft-next strong {
    display: block;
  }
  .draft-builder {
    margin-top: 28px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .draft-builder > summary {
    cursor: pointer;
    font-weight: 600;
  }
  .agent-requests {
    display: grid;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .agent-request {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    overflow-wrap: anywhere;
  }
  .agent-request-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  :where(.main) .agent-request-name {
    margin: 0;
    font-size: 17px;
  }
  .agent-request-job {
    margin: 10px 0 0;
    white-space: pre-wrap;
  }
  .agent-request-note {
    margin: 10px 0 0;
    font-size: 13.5px;
  }
  .agent-request-brief {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 12px 0 0;
    font-size: 13.5px;
  }
  .agent-request-brief dt {
    color: var(--muted);
  }
  .agent-request-brief dd {
    margin: 0;
    min-width: 0;
  }
  .agent-request-builder {
    margin-top: 12px;
  }
  .agent-request-builder > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--muted);
  }
  .agent-request-update {
    margin-top: 12px;
  }
  .agent-request-update > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--muted);
  }
  .agent-request-form {
    display: grid;
    gap: 8px;
    max-width: 28rem;
    margin-top: 10px;
  }
  .agent-request-form > button {
    justify-self: start;
  }
  @media (max-width: 600px) {
    .draft-diagram {
      grid-template-columns: minmax(0, 1fr);
    }
    .agent-request-brief {
      grid-template-columns: minmax(0, 1fr);
    }
    .draft-diagram li + li::before {
      content: '↓';
      left: 50%;
      top: -24px;
    }
  }
  .agent-trigger-form {
    max-width: 600px;
  }
  .agent-trigger-form textarea.input {
    height: auto;
    min-height: 132px;
    padding: 10px 12px;
    resize: vertical;
    font-family: var(--mono);
  }
  .agent-trigger-option {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .agent-trigger-option .input {
    max-width: 600px;
  }
  .agent-trigger-option h3 {
    font-size: 14px;
    font-weight: 600;
  }
  .agent-trigger-form .field-error {
    color: var(--bad-text);
  }
  .agent-trigger-form .input[aria-invalid="true"] {
    border-color: var(--bad-text);
    box-shadow: inset 0 0 0 1px var(--bad-text);
  }
  .agent-trigger-form .input[aria-invalid="true"]:focus {
    border-color: var(--bad-text);
    box-shadow: inset 0 0 0 1px var(--bad-text), 0 0 0 4px var(--bad-bg);
  }
}
.agent-trigger-option, .agent-trigger-option .rule-list li, .agent-trigger-option .rule-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.agent-trigger-option .rule-list li {
  flex-wrap: wrap;
}
@layer components {
  .access-request-card {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .access-request-card > form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tabs {
    margin: 0 0 18px;
    border-bottom: 1px solid var(--line);
  }
  .tabs-list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 10px 12px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .tab:hover {
    color: var(--ink);
  }
  .tab[aria-current="page"] {
    border-bottom-color: var(--ink);
    color: var(--ink);
    font-weight: 600;
  }
  .tab-count {
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .tags > .tag, .tag.tag-quiet {
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--sunken);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
  }
  .tag.tag-quiet {
    background: transparent;
    color: var(--muted);
  }
  .tags > .tag-warn {
    border-color: var(--warn-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--warn-text) 25%, var(--warn-bg));
    }
    background: var(--warn-bg);
    color: var(--warn-text);
  }
  .rpill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .rp-owner {
    background: var(--accent-soft);
    color: var(--accent-ink);
  }
  .rp-member {
    background: var(--idle-bg);
    color: var(--idle-text);
  }
  .rp-admin {
    background: var(--ink);
    color: var(--panel);
  }
  .av {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .av-0 {
    background: #dbe7ff;
    color: #1d3a8a;
  }
  .av-1 {
    background: #e4f4e9;
    color: #11663a;
  }
  .av-2 {
    background: #fcf0d8;
    color: #7a4f00;
  }
  .av-3 {
    background: #f3e8ff;
    color: #6b21a8;
  }
  .av-4 {
    background: #e0f2fe;
    color: #075985;
  }
  .av-5 {
    background: #ffe4e6;
    color: #9f1239;
  }
  .av-invite {
    border: 1px dashed var(--line-2);
    background: transparent;
    color: var(--muted);
  }
  .mono {
    font-family: var(--mono);
    font-size: 0.94em;
  }
  .num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .text-bad {
    color: var(--bad-text);
  }
  .btn-xs {
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
  }
  .input-sm {
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
  }
  select.input {
    padding-right: 28px;
  }
  .input-multi {
    height: auto;
    min-height: 96px;
    padding: 6px 8px;
  }
  .section-title {
    margin: 28px 0 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .section-lead {
    max-width: 720px;
    margin: 0 0 16px;
    color: var(--muted);
  }
  .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
  }
  .card-title .icon {
    color: var(--accent-ink);
  }
  .head-stat {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
  }
  .head-stat strong {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .table-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12.5px;
  }
  .back-link {
    margin: 0 0 8px;
  }
  .back-link .btn {
    margin-left: -10px;
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 20px;
    border: 1px dashed var(--line-2);
    border-radius: 14px;
    background: radial-gradient(circle, var(--line) 1px, transparent 1.2px) 0 0 / 16px 16px, var(--panel);
    text-align: center;
  }
  .empty-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 4px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent-ink);
  }
  .empty-title {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
  }
  .empty-text {
    max-width: min(100%, 420px);
    margin: 0 0 6px;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 13.5px;
  }
  .table-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 13.5px;
  }
  .data-table th, .data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
  }
  .data-table thead th {
    padding-top: 9px;
    padding-bottom: 9px;
    background: var(--sunken);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .data-table.dt-compact {
    min-width: 0;
  }
  .data-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .data-table tbody tr:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--ink) 3%, transparent);
    }
  }
  .data-table .row-actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
  }
  .data-table form {
    margin: 0;
  }
  .row-link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
  }
  .row-link:hover {
    color: var(--link);
    text-decoration: underline;
  }
  .person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
  }
  .person-name {
    font-weight: 600;
  }
  .person-email {
    overflow: hidden;
    color: var(--muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lock-note {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--muted);
  }
  .toolbar[role="search"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
    margin: 0 0 12px;
  }
  .toolbar-search {
    position: relative;
    flex: 1 1 220px;
    max-width: 300px;
  }
  .toolbar-search .icon {
    position: absolute;
    top: 50%;
    left: 10px;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .toolbar-search .input {
    width: 100%;
    padding-left: 32px;
  }
  .toolbar select.input {
    width: auto;
  }
  .chip-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .chip-field legend {
    max-width: 100%;
    padding: 0;
    overflow-wrap: anywhere;
  }
  .chip-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .chip-check {
    position: relative;
    display: inline-flex;
    cursor: pointer;
  }
  .chip-check input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }
  .chip-check span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .chip-check span::before {
    content: "";
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--line-2);
    border-radius: 4px;
    color: var(--panel);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }
  .chip-check:hover span {
    border-color: var(--muted);
  }
  .chip-check input:checked + span {
    border-color: var(--accent-ink);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--accent-ink) 45%, var(--panel));
    }
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 600;
  }
  .chip-check input:checked + span::before {
    content: "\2713";
    border-color: var(--accent-ink);
    background: var(--accent-ink);
  }
  .chip-check input:focus-visible + span {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .invite-card {
    margin: 0 0 26px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--sunken);
  }
  .invite-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    list-style: none;
  }
  .invite-card > summary::-webkit-details-marker {
    display: none;
  }
  .invite-card > summary > .card-title {
    margin: 0;
  }
  .invite-card > summary > .icon {
    flex: none;
    color: var(--muted);
  }
  .invite-card[open] > summary {
    margin-bottom: 14px;
  }
  .invite-card[open] > summary > .icon {
    transform: rotate(90deg);
  }
  .invite-card > summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
    border-radius: 8px;
  }
  .tab-panel > .section-title:first-child {
    margin-top: 0;
  }
  .invite-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .invite-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
  }
  .invite-email {
    flex: 3 1 280px;
    min-width: 0;
  }
  .invite-role {
    flex: 1 1 140px;
  }
  .invite-submit {
    height: 38px;
  }
  .role-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    color: var(--muted);
    font-size: 12.5px;
  }
  .role-notes p {
    margin: 0;
  }
  .role-notes strong {
    color: var(--ink-2);
    font-weight: 600;
  }
  .invite-form .field-hint {
    margin: 0;
  }
  .pop-panel {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 24px 60px -16px rgb(16 24 40 / 0.35);
    text-align: left;
    white-space: normal;
  }
  .pop-panel::backdrop {
    background: transparent;
  }
  .pop-panel:modal::backdrop {
    background: rgb(8 10 14 / 0.35);
  }
  .pop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .pop-who {
    flex: 1;
    min-width: 0;
  }
  .pop-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
  }
  .pop-sub {
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
  }
  .pop-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 16px;
  }
  .pop-section .field-hint {
    margin: 0;
  }
  .pop-section + .pop-section {
    border-top: 1px solid var(--line);
  }
  .pop-danger {
    border-top: 1px solid var(--line);
    background: var(--bad-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--bad-bg) 45%, var(--panel));
    }
  }
  .pop-form {
    align-items: stretch;
  }
  .pop-form > .btn {
    align-self: flex-start;
  }
  .pop-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  :where(.main, .pop-panel) .pop-field > * {
    margin: 0;
  }
  .pop-field .input-sm {
    align-self: flex-start;
    min-width: 140px;
  }
  .pop-unsaved {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--warn-bg);
    color: var(--warn-text);
    font-size: 13px;
  }
  .pop-unsaved[hidden] {
    display: none;
  }
  .group-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .group-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
  }
  .group-row + .group-row {
    border-top: 1px solid var(--line);
  }
  .group-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-ink);
  }
  .group-row.is-locked .group-icon {
    background: var(--sunken);
    color: var(--muted);
  }
  .group-text {
    flex: 1 1 220px;
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
  }
  .group-name {
    font-weight: 600;
  }
  .group-name code {
    margin-left: 4px;
    font-size: 11.5px;
    font-weight: 500;
  }
  .group-desc {
    color: var(--muted);
    font-size: 12.5px;
  }
  .group-count {
    color: var(--muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .group-edit {
    margin: 0;
  }
  .group-edit > summary {
    list-style: none;
  }
  .group-edit > summary::-webkit-details-marker {
    display: none;
  }
  .group-edit[open] {
    flex-basis: 100%;
    order: 10;
  }
  .group-edit[open] > summary {
    margin-bottom: 12px;
  }
  .group-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: var(--sunken);
  }
  .group-form .field-hint {
    margin: 0;
  }
  .create-card {
    margin-top: 28px;
    padding: 18px;
    border: 1px dashed var(--line-2);
    border-radius: 14px;
  }
  .create-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 14px;
    max-width: 720px;
  }
  .create-form .field-hint {
    margin: 6px 0 0;
  }
  .create-wide {
    grid-column: 1 / -1;
  }
  .perm-section {
    margin-bottom: 8px;
  }
  .perm-section + .perm-section {
    margin-top: 36px;
  }
  .perm-section > .section-title:first-child {
    margin-top: 0;
  }
  .matrix-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .matrix-wrap:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .access-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
  }
  .access-matrix th, .access-matrix td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
  }
  .access-matrix thead th {
    background: var(--sunken);
    color: var(--ink-2);
    font-weight: 600;
    white-space: nowrap;
  }
  .access-matrix tbody th {
    white-space: normal;
  }
  .access-matrix tbody tr:last-child > * {
    border-bottom: 0;
  }
  .access-matrix th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 200px;
    max-width: 280px;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--line);
  }
  .access-matrix thead th:first-child {
    z-index: 2;
    background: var(--sunken);
  }
  .m-corner {
    color: var(--muted) !important;
    font-size: 12px;
  }
  .m-group {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .m-group .icon {
    color: var(--muted);
  }
  .m-sub {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
  }
  .m-sub.is-warn {
    color: var(--warn-text);
  }
  .m-section th {
    position: static !important;
    padding-top: 14px;
    padding-bottom: 6px;
    background: var(--panel) !important;
    box-shadow: none !important;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .m-tool {
    font-weight: 400;
  }
  .m-name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-weight: 600;
  }
  .m-status {
    margin: 6px 0 0;
  }
  .m-status .btn {
    gap: 4px;
  }
  .m-row, .m-cell {
    scroll-margin: 88px 24px 24px 224px;
  }
  .m-cell:target .cell, .m-row:target .m-status .btn {
    box-shadow: 0 0 0 2px var(--focus);
  }
  .cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
  }
  button.cell {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  button.cell:hover {
    border-color: var(--line-2);
    background: var(--sunken);
    color: var(--ink);
  }
  .cell-on {
    border-color: var(--ok-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ok-text) 30%, var(--ok-bg));
    }
    background: var(--ok-bg);
    color: var(--ok-text);
  }
  button.cell-on:hover {
    border-color: var(--ok-text);
    background: var(--ok-bg);
    color: var(--ok-text);
  }
  .cell-via {
    border-style: dashed;
    border-color: var(--ok-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ok-text) 40%, var(--panel));
    }
    color: var(--ok-text);
    font-weight: 500;
  }
  .cell-always {
    background: var(--sunken);
  }
  .m-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 12.5px;
  }
  .m-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .m-legend .cell {
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
  }
  .explain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 18px 0 0;
  }
  .explain > div {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .explain dt {
    margin-bottom: 2px;
    font-weight: 600;
  }
  .explain dd {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }
  .role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
  .role-card {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .role-card-head {
    margin: 0 0 10px;
  }
  .ticks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-2);
    font-size: 13px;
  }
  .ticks li {
    position: relative;
    margin: 0;
    padding-left: 16px;
  }
  .ticks li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--line-2);
  }
  .search-hero {
    margin: 0 0 20px;
  }
  .search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 14px;
  }
  .search-icon {
    color: var(--muted);
  }
  .search-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
  }
  .search-input:focus {
    outline: none;
  }
  .search-bar:focus-within {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .result-count {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
  }
  .results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .result {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
  }
  .result:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-hover);
  }
  .result-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .result-meta {
    color: var(--muted);
    font-size: 12px;
  }
  .result-title {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  .result-title:hover {
    color: var(--link);
    text-decoration: underline;
  }
  .result-snippet {
    margin: 6px 0 0;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.55;
  }
  .result-snippet mark {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--accent-soft);
    color: var(--ink);
    font-weight: 600;
  }
  .kind {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--sunken);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
  }
  .k-results {
    margin-bottom: 18px;
  }
  .k-col > .section-title {
    margin-top: 0;
  }
  .k-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .k-list li + li {
    border-top: 1px solid var(--line);
  }
  .k-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: var(--ink);
    text-decoration: none;
  }
  .k-item:hover {
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--ink) 3%, transparent);
    }
  }
  .k-item:hover .k-title {
    color: var(--link);
    text-decoration: underline;
  }
  .k-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--sunken);
    color: var(--muted);
  }
  .k-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
  }
  .k-title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .k-meta {
    color: var(--muted);
    font-size: 12.5px;
  }
  .k-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
  }
  @media (max-width: 960px) {
    .k-doc {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .k-body .section-title:first-child {
    margin-top: 0;
  }
  .doc-plain {
    font-size: 14.5px;
    line-height: 1.65;
    background: var(--panel);
  }
  .k-aside {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sunken);
  }
  .k-aside .section-title {
    margin-top: 18px;
  }
  .k-facts {
    margin: 0 0 10px;
    font-size: 13px;
  }
  .k-aside .k-facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .k-aside .k-facts dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  @media (prefers-color-scheme: dark) {
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .av-0 {
      background: #1c2a4d;
      color: #b8ccff;
    }
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .av-1 {
      background: #15301f;
      color: #8fd6a4;
    }
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .av-2 {
      background: #352a10;
      color: #f1cf7a;
    }
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .av-3 {
      background: #2d1b45;
      color: #d9b8ff;
    }
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .av-4 {
      background: #0f2a3b;
      color: #98d3f5;
    }
    :scope:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) .av-5 {
      background: #3d1820;
      color: #ffb3c0;
    }
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .av-0 {
    background: #1c2a4d;
    color: #b8ccff;
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .av-1 {
    background: #15301f;
    color: #8fd6a4;
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .av-2 {
    background: #352a10;
    color: #f1cf7a;
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .av-3 {
    background: #2d1b45;
    color: #d9b8ff;
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .av-4 {
    background: #0f2a3b;
    color: #98d3f5;
  }
  :scope:where(:root[data-theme="dark"], :root[data-theme="dark"] *) .av-5 {
    background: #3d1820;
    color: #ffb3c0;
  }
  @media (max-width: 767.98px) {
    .invite-submit {
      flex: 1 1 100%;
    }
    .toolbar-search {
      max-width: none;
      flex-basis: 100%;
    }
    .search-bar .btn {
      padding: 0 12px;
    }
    .access-matrix th:first-child {
      min-width: 170px;
    }
    .m-note {
      max-width: calc(100vw - 230px);
    }
    .tabs {
      overflow-x: visible;
    }
    .tabs-list {
      overflow-x: auto;
      scrollbar-width: thin;
      background: linear-gradient(to right, var(--app-bg) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--app-bg) 30%, transparent) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--ink), transparent) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--ink), transparent) right center / 14px 100% no-repeat scroll;
      @supports (color: color-mix(in lab, red, red)) {
        background: linear-gradient(to right, var(--app-bg) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--app-bg) 30%, transparent) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in oklab, var(--ink) 22%, transparent), transparent) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, var(--ink) 22%, transparent), transparent) right center / 14px 100% no-repeat scroll;
      }
    }
  }
  .people-table .edit-access-label {
    display: none;
  }
  @media (max-width: 767.98px) {
    .table-wrap:has(> .people-table) {
      overflow: visible;
      border: 0;
      background: none;
    }
    .people-table {
      min-width: 0;
    }
    .people-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .people-table tbody {
      display: grid;
      gap: 12px;
    }
    .people-table tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
    }
    .people-table td {
      display: block;
      padding: 0;
      border: 0;
      min-width: 0;
    }
    .people-table td[data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .people-table td.person-cell, .people-table td.groups-cell, .people-table td.row-actions {
      grid-column: 1 / -1;
    }
    .people-table .person-email {
      overflow-wrap: anywhere;
    }
    .people-table td.num {
      text-align: left;
    }
    .people-table td.row-actions {
      width: auto;
      text-align: left;
    }
    .people-table td.row-actions .icon-btn.edit-access {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: auto;
      min-height: 44px;
      gap: 8px;
      border: 1px solid var(--line-2);
      border-radius: 9px;
      color: var(--ink);
      font: inherit;
      font-size: 14px;
      font-weight: 600;
    }
    .people-table .edit-access-label {
      display: inline;
    }
  }
  .invite-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 12px;
    color: var(--muted);
    font-size: 13.5px;
  }
  .invite-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
  }
  .invite-done {
    display: grid;
    gap: 12px;
  }
  .invite-done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .grp-list {
    margin-bottom: 22px;
  }
  .grp-list > li {
    display: block;
  }
  .grp-list > li + li {
    border-top: 1px solid var(--line);
  }
  .grp-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
  }
  .grp-link.group-row + .group-row {
    border-top: 0;
  }
  .grp-link:hover {
    background: var(--sunken);
  }
  .grp-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: 12px;
  }
  .grp-list > li:first-child .grp-link {
    border-radius: 12px 12px 0 0;
  }
  .grp-list > li:last-child .grp-link {
    border-radius: 0 0 12px 12px;
  }
  .grp-facts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
  }
  .grp-go {
    flex: none;
    color: var(--muted);
  }
  @media (max-width: 767.98px) {
    .grp-link {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 6px 12px;
    }
    .grp-facts {
      grid-row: 2;
      grid-column: 2 / -1;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0 14px;
      text-align: left;
    }
    .grp-facts .group-count {
      white-space: normal;
    }
  }
  .mem-section + .mem-section {
    margin-top: 26px;
  }
  .mem-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .mem-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 14px;
  }
  .mem-row + .mem-row {
    border-top: 1px solid var(--line);
  }
  .mem-row .person {
    flex: 1 1 220px;
    min-width: 0;
  }
  .mem-remove {
    margin: 0;
  }
  .mem-add {
    max-width: 640px;
  }
  .acc-section + .acc-section {
    margin-top: 28px;
  }
  .acc-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .acc-section .section-title .icon {
    color: var(--accent-ink);
  }
  .acc-list {
    display: flex;
    flex-direction: column;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .acc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    padding: 10px 14px;
    scroll-margin-top: 16px;
  }
  .acc-ctl {
    scroll-margin-top: 24px;
  }
  @media (max-width: 767.98px) {
    .acc-ctl {
      scroll-margin-top: 112px;
    }
  }
  .acc-row + .acc-row {
    border-top: 1px solid var(--line);
  }
  .acc-row:target {
    background: var(--accent-soft);
  }
  .acc-text {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
  }
  .acc-ctl {
    flex: none;
  }
  .acc-ctl form {
    margin: 0;
  }
  .cell-on-static, .cell-off-static {
    cursor: default;
  }
  .cell-on-static {
    border-color: var(--ok-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ok-text) 30%, var(--ok-bg));
    }
    background: var(--ok-bg);
    color: var(--ok-text);
  }
  .m-group-link {
    color: inherit;
    text-decoration: none;
  }
  .m-group-link:hover {
    text-decoration: underline;
  }
  .create-flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
  }
  .create-flow .create-card {
    margin: 0;
  }
  .create-flow .card-title .step-n {
    flex: none;
  }
  .create-flow .chip-field {
    margin: 0 0 12px;
  }
  .create-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .label-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .label-row .field-label {
    margin: 0;
  }
  .help-btn {
    width: 24px;
    height: 24px;
    color: var(--muted);
  }
  .help-pop {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    margin: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 24px 56px -20px rgb(16 24 40 / 0.4);
  }
  .help-pop:not(:popover-open) {
    display: none;
  }
  .help-pop::backdrop {
    background: rgb(10 14 22 / 0.3);
  }
  .help-pop .role-card {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
  }
  .int-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 14px;
    margin-bottom: 12px;
  }
  .int-section-head .int-section-title {
    margin-bottom: 2px;
  }
  .int-section-lead {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
  }
  .int-section-head .int-section-lead {
    margin: 0;
  }
  .int-card-who {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
  }
  .int-groups, .int-warn {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.4;
  }
  .int-groups .icon, .int-warn .icon {
    flex: none;
    margin-top: 2px;
  }
  .int-warn {
    color: var(--warn-text);
  }
  .int-card-why .icon {
    vertical-align: -2px;
    margin-right: 5px;
  }
  .tile-logo {
    overflow: hidden;
    background: #fff;
  }
  .tile-logo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
  }
  .int-grid-one {
    grid-template-columns: 1fr;
    margin-bottom: 18px;
  }
  .int-dialog-wide {
    width: min(620px, calc(100vw - 32px));
  }
  .add-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
  }
  .add-form .chip-field {
    margin: 0;
  }
  .add-form .field-hint {
    margin: 0;
  }
  .add-card .int-scopes {
    margin: 0;
  }
  .int-disable {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .int-disable > summary {
    list-style: none;
    display: inline-flex;
    cursor: pointer;
  }
  .int-disable > summary::-webkit-details-marker {
    display: none;
  }
  .int-disable-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .request-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 680px;
  }
  .request-form .int-dialog-h {
    margin: 0;
  }
  .request-form .field-hint {
    margin: 0;
  }
  .request-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
  .request-wide {
    grid-column: 1 / -1;
  }
  .request-form .btn {
    align-self: flex-start;
  }
  .req-note {
    max-width: 320px;
    overflow-wrap: anywhere;
  }
  :where(.main, .plain-main) {
    font-size: 14px;
  }
  :where(.main, .plain-main) :where(h1) {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 1.15;
  }
  :where(.main, .plain-main) :where(h2) {
    margin: 32px 0 12px;
    font-size: 18px;
    line-height: 1.3;
  }
  :where(.main, .plain-main) :where(h3) {
    margin: 20px 0 8px;
    font-size: 15px;
    line-height: 1.35;
  }
  :where(.main, .plain-main) :where(p) {
    margin: 0 0 12px;
  }
  :where(.main, .plain-main) :where(section) {
    margin-bottom: 24px;
  }
  :where(.main, .plain-main) :where(ul:not([class]), ol:not([class])) {
    margin: 0 0 12px;
    padding-left: 22px;
  }
  :where(.main, .plain-main) :where(ul:not([class])) {
    list-style: disc;
  }
  :where(.main, .plain-main) :where(ol:not([class]), ol.demo-tour, ol.demo-results) {
    list-style: decimal;
    padding-left: 22px;
  }
  :where(.main, .plain-main) :where(li) {
    margin: 4px 0;
  }
  :where(.main, .plain-main) :where(code) {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--sunken);
    border: 1px solid var(--line);
    font-size: 0.88em;
  }
  :where(.main, .plain-main) :where(details) {
    margin: 8px 0;
  }
  :where(.main, .plain-main) :where(summary) {
    cursor: pointer;
    color: var(--link);
  }
  :where(.main, .plain-main) :where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="hidden"], [type="file"], .input, .code-box), select, textarea) {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    background: var(--panel);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
  }
  :where(.main, .plain-main) :where(input[type="checkbox"], input[type="radio"]) {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-primary);
  }
  :where(.main, .plain-main) :where(input[type="file"]) {
    font: inherit;
    font-size: 13px;
  }
  :where(.main, .plain-main) :where(label) {
    font-weight: 500;
  }
  :where(.main, .plain-main) :where(fieldset) {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  :where(.main, .plain-main) :where(legend) {
    padding: 0 4px;
    font-weight: 600;
  }
  :where(.main, .plain-main) :where(button:not(.btn, .icon-btn, .code-box), .button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--brand-primary);
    border-radius: 9px;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease;
  }
  :where(.main, .plain-main) :where(button:not(.btn, .icon-btn, .code-box), .button):hover {
    filter: brightness(1.07);
  }
  :where(.main, .plain-main) button.small {
    min-height: 30px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 8px;
  }
  :where(.main, .plain-main) :is(button.secondary, .button.secondary) {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line-2);
  }
  :where(.main, .plain-main) button.danger {
    background: var(--panel);
    color: var(--bad-text);
    border-color: var(--bad-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bad-text) 45%, var(--panel));
    }
  }
  :where(.main, .plain-main) button.granted {
    background: var(--ok-bg);
    color: var(--ok-text);
    border-color: var(--ok-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ok-text) 35%, var(--ok-bg));
    }
  }
  :where(.main, .plain-main) button.link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font-weight: 500;
    text-decoration: underline;
  }
  .muted {
    color: var(--muted);
  }
  .small {
    font-size: 12.5px;
  }
  .stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 460px;
  }
  .stack.wide {
    max-width: none;
  }
  .grow {
    flex: 1 1 280px;
    min-width: 0;
  }
  .grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
  }
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .card {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  li.card:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-hover);
  }
  .card h3 {
    margin-top: 0;
  }
  .card > :first-child {
    margin-top: 0;
  }
  :where(.main, .plain-main) code.block {
    display: block;
    margin-top: 4px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .card.once {
    border-color: var(--brand-accent);
    margin-bottom: 20px;
  }
  .instructions, .doc {
    white-space: pre-wrap;
  }
  .doc {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sunken);
    line-height: 1.6;
  }
  .table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  :where(.main, .plain-main) :where(table) {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
  }
  :where(.main, .plain-main) :where(th, td) {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }
  :where(.main, .plain-main) :where(th) {
    background: var(--sunken);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  :where(.main, .plain-main) :where(tbody tr:last-child td) {
    border-bottom: 0;
  }
  td form {
    margin: 0;
  }
  .inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
  }
  .check {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }
  .matrix td {
    white-space: nowrap;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .chip-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
  }
  .chip-bad {
    background: var(--bad-bg);
    color: var(--bad-text);
  }
  .chip-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
  }
  .chip-info {
    background: var(--info-bg);
    color: var(--info-text);
  }
  .chip-muted {
    background: var(--idle-bg);
    color: var(--idle-text);
  }
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
  }
  .pager {
    display: flex;
    gap: 16px;
    margin-top: 16px;
  }
  .facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0 0 16px;
  }
  .facts dt {
    color: var(--muted);
  }
  .facts dd {
    margin: 0;
  }
  .events {
    padding-left: 20px;
    list-style: decimal;
  }
  .events li {
    margin-bottom: 8px;
  }
  .group {
    margin-bottom: 8px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .jump {
    color: var(--muted);
  }
  .entries {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
  }
  select[multiple] {
    min-width: 260px;
  }
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--sunken);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  .tag-accent {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 600;
  }
  .tag-locked {
    color: var(--ink-2);
    font-weight: 600;
  }
  .tile {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--sunken);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .tile-lg {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 15px;
  }
  .tile-brand {
    overflow: hidden;
    border: 0;
    background: none;
  }
  .tile-brand svg {
    display: block;
    width: 100%;
    height: 100%;
    font-family: var(--font-body);
    letter-spacing: -0.02em;
  }
  .pills ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .pill:hover {
    background: var(--sunken);
  }
  .pill[aria-current="page"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--panel);
    font-weight: 600;
  }
  .pill-count {
    font-variant-numeric: tabular-nums;
    opacity: 0.72;
  }
  .utabs {
    margin: 0 0 24px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .utabs ul {
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .utab {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .utab:hover {
    color: var(--ink);
  }
  .utab[aria-current="page"], .utab[aria-current="true"] {
    border-bottom-color: var(--ink);
    color: var(--ink);
    font-weight: 600;
  }
  .copy-field {
    max-width: 600px;
  }
  .copy-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .copy-row .input {
    flex: 1;
    min-width: 0;
    height: 40px;
    background: var(--sunken);
  }
  .input-mono {
    font-family: var(--mono);
    font-size: 13px;
  }
  .copy-btn {
    height: 40px;
    flex: none;
  }
  .copy-btn.is-copied {
    border-color: var(--ok-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ok-text) 40%, var(--panel));
    }
    color: var(--ok-text);
  }
  .switch-form {
    display: inline-flex;
    margin: 0;
  }
  .switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    width: 40px;
    min-height: 0;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--line-2);
    color: transparent;
    cursor: pointer;
    transition: background-color 0.18s ease;
  }
  .switch[aria-checked="true"] {
    background: var(--brand-primary);
  }
  .switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgb(16 24 40 / 0.25);
    transition: transform 0.18s ease;
  }
  .switch[aria-checked="true"] .switch-thumb {
    transform: translateX(16px);
  }
  .switch-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .switch:hover {
    filter: brightness(0.97);
  }
  .switch:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .switch:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  @media (forced-colors: active) {
    .switch {
      border: 1px solid ButtonText;
    }
    .switch[aria-checked="true"] .switch-thumb {
      background: Highlight;
    }
  }
  .num-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.5;
  }
  .num-steps > li {
    display: flex;
    gap: 10px;
    margin: 0;
  }
  .step-n {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--panel);
    font-size: 12px;
    font-weight: 700;
  }
  .num-steps .step-text {
    min-width: 0;
    flex: 1;
    padding-top: 1px;
  }
  .num-steps .step-text .copy-field {
    margin-top: 8px;
  }
  .empty-card {
    padding: 22px;
    border: 1px dashed var(--line-2);
    border-radius: 14px;
    background: var(--sunken);
    color: var(--muted);
    font-size: 13.5px;
  }
  .empty-card p {
    margin: 0;
  }
  @media (max-width: 767.98px) {
    .utabs.utabs {
      --utabs-bg: var(--app-bg);
      scrollbar-width: thin;
      background: linear-gradient(to right, var(--utabs-bg) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--utabs-bg) 30%, transparent) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--ink), transparent) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--ink), transparent) right center / 14px 100% no-repeat scroll, var(--utabs-bg);
      @supports (color: color-mix(in lab, red, red)) {
        background: linear-gradient(to right, var(--utabs-bg) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--utabs-bg) 30%, transparent) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in oklab, var(--ink) 24%, transparent), transparent) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, var(--ink) 24%, transparent), transparent) right center / 14px 100% no-repeat scroll, var(--utabs-bg);
      }
    }
    .set-col > .utabs.utabs {
      --utabs-bg: var(--panel);
    }
  }
  @media (max-width: 767.98px), (pointer: coarse) {
    .pill {
      height: auto;
      min-height: 44px;
      padding: 0 14px;
    }
  }
  .int-hero-beam {
    margin-bottom: 30px;
    border-radius: 18px;
  }
  .int-hero-beam > .int-hero {
    border-radius: 17px;
  }
  .int-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0;
    padding: clamp(18px, 2.4vw, 26px);
    scroll-margin-top: 16px;
  }
  .int-hero-main {
    flex: 3 1 440px;
    min-width: 0;
  }
  .int-hero-side {
    flex: 2 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .int-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 600;
  }
  .int-hero .int-hero-title {
    margin: 12px 0 6px;
    font-size: 22px;
    line-height: 1.25;
  }
  .int-hero-text {
    max-width: 580px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
  }
  .int-tabs {
    margin-top: 20px;
    max-width: 600px;
  }
  .int-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 14px;
  }
  .int-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 0;
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }
  .int-tab:hover {
    background: var(--sunken);
    color: var(--ink);
  }
  .int-tab[aria-selected="true"] {
    border-color: var(--line-2);
    background: var(--sunken);
    color: var(--ink);
    font-weight: 600;
  }
  .int-panel + .int-panel {
    margin-top: 18px;
  }
  .int-tabs.is-enhanced .int-panel + .int-panel {
    margin-top: 0;
  }
  .int-panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-2);
  }
  .int-tabs.is-enhanced .int-panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .int-panel .field-hint {
    margin-top: 12px;
  }
  .int-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 13px;
  }
  .int-note .icon {
    margin-top: 2px;
  }
  .int-conn {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sunken);
  }
  .int-conn-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .int-conn-title, .int-can-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  .int-conn-text {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
  }
  .int-can {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .int-can-title {
    margin: 0 0 8px;
  }
  .int-can-list {
    display: grid;
    gap: 7px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    color: var(--ink-2);
    font-size: 13px;
  }
  .int-can-list:last-child {
    margin-bottom: 0;
  }
  .int-can-list li {
    display: flex;
    gap: 8px;
    margin: 0;
  }
  .int-can-list.is-yes .icon {
    color: var(--ok-text);
  }
  .int-can-list.is-no .icon {
    color: var(--bad-text);
  }
  .int-section {
    margin: 0 0 28px;
  }
  .main .int-section-title {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .int-section-count {
    margin-left: 4px;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .int-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
  }
  .int-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    scroll-margin-top: 16px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .int-card:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-hover);
  }
  .int-card:target {
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .int-card.is-attention {
    border-color: var(--warn-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--warn-text) 30%, var(--panel));
    }
    background: var(--warn-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--warn-bg) 45%, var(--panel));
    }
  }
  .int-card.is-quiet {
    background: var(--sunken);
  }
  .int-card.is-quiet .tile {
    background: var(--panel);
    color: var(--muted);
  }
  .int-card-head, .int-dialog-head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .int-card-id {
    flex: 1;
    min-width: 0;
  }
  .int-card-head > .status {
    align-self: flex-start;
    margin-top: 2px;
  }
  .main .int-card-name {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .int-card-meta {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: 12.5px;
  }
  .int-card-text {
    margin: 0;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
  }
  .int-card.is-attention .int-card-text {
    color: var(--warn-text);
  }
  .int-card-why {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
  }
  .int-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
  }
  .int-foot {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
  }
  .int-own {
    grid-column: 1 / -1;
  }
  .int-own-body {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px 24px;
    align-items: start;
  }
  @media (max-width: 760px) {
    .int-own-body {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .main .int-own-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
  }
  .int-own-h .muted {
    font-weight: 500;
  }
  .int-own-steps .field-hint {
    margin: 12px 0 0;
  }
  .int-own-more {
    margin-top: 12px;
    font-size: 13px;
  }
  .int-own-more > summary {
    cursor: pointer;
    color: var(--link);
    font-weight: 500;
  }
  .int-own-more p {
    margin: 10px 0 0;
    color: var(--ink-2);
    line-height: 1.5;
  }
  .int-own-more .copy-field {
    margin-top: 8px;
  }
  .int-own-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  .int-own-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sunken);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
  }
  .int-own-note .icon, .int-own-h .icon {
    flex: none;
  }
  .int-own-note .icon {
    margin-top: 2px;
  }
  .int-own-admin {
    padding: 14px;
    border: 1px solid var(--warn-text);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--warn-text) 22%, var(--warn-bg));
    }
    border-radius: 12px;
    background: var(--warn-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--warn-bg) 40%, var(--panel));
    }
  }
  .int-own-admin .field-hint {
    margin: 12px 0 0;
  }
  .int-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 28px 60px -20px rgb(16 24 40 / 0.4);
    overflow: auto;
  }
  .int-dialog::backdrop {
    background: rgb(10 14 22 / 0.42);
  }
  .int-dialog-head {
    padding: 18px 18px 0;
  }
  .int-dialog .int-dialog-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .int-dialog-body {
    padding: 14px 18px 18px;
    font-size: 13.5px;
    line-height: 1.55;
  }
  .int-dialog-body p {
    margin: 0 0 12px;
  }
  .int-dialog-status {
    margin: 0 0 14px;
  }
  .int-dialog .int-dialog-h {
    margin: 16px 0 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .int-instructions {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
    white-space: pre-wrap;
  }
  .int-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .int-scopes li {
    margin: 0;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--sunken);
    font-size: 12px;
  }
  .int-dialog-body .int-dialog-note {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--sunken);
    color: var(--muted);
    font-size: 12.5px;
  }
  .int-dialog-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0 18px 18px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .int-dialog.is-modal[open] {
      animation: int-dialog-in 0.18s ease-out;
    }
  }
  .guide-doc {
    max-width: 720px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--sunken);
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
  }
}
@keyframes int-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@layer components {
  .int-connect-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
  }
  .int-connect-bar p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
  }
  .int-marketplace {
    margin-bottom: 28px;
  }
  .int-marketplace .int-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 18px;
  }
  .int-app {
    padding: 22px;
    gap: 14px;
    border-radius: 10px;
    box-shadow: none;
  }
  .int-app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .int-app .int-card-name {
    font-size: 19px;
  }
  .int-app .int-card-text {
    min-height: 3em;
    max-width: 60ch;
  }
  .int-app-access {
    margin: auto 0 0;
    padding-top: 8px;
    font-size: 13px;
    color: var(--muted);
  }
  .int-app .int-card-actions {
    margin-top: 0;
  }
  .int-claude-setup {
    margin: 28px 0;
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }
  .int-claude-setup > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink-2);
  }
  .int-claude-setup .int-hero-beam {
    margin-top: 18px;
  }
  .int-tool-list, .int-people {
    padding: 0;
    margin: 12px 0 24px;
    list-style: none;
  }
  .int-tool-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }
  .int-tool-text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .int-tool-text strong {
    font-size: 14px;
  }
  .int-tool-text > span {
    font-size: 13px;
    color: var(--muted);
  }
  .int-tool-text > .int-tool-why {
    font-size: 12px;
    color: var(--ink-2);
  }
  .int-tool-list .status {
    flex: none;
  }
  .int-tools-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .int-card-yours {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
  }
  .int-card-count {
    margin: -6px 0 0;
    font-size: 12.5px;
    color: var(--muted);
  }
  .int-dialog-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }
  .int-dialog-status > span:last-child {
    font-size: 13px;
    color: var(--ink-2);
  }
  .int-dialog-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .int-tech {
    margin-top: 16px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
  }
  .int-tech > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
  }
  .int-tech[open] > summary {
    margin-bottom: 8px;
  }
  .int-people li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .int-people li > span:first-of-type {
    grid-column: 1;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .int-people li > span:last-child {
    grid-column: 2;
    grid-row: 1;
  }
  .int-permission {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .int-permission p {
    margin: 6px 0;
  }
  @media (max-width: 540px) {
    .int-connect-bar {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px;
    }
    .int-app {
      padding: 18px;
    }
  }
  .int-offer {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .int-offer > .int-card {
    flex: 1;
  }
  .int-offer-tier > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--muted);
  }
  .int-offer-tier .int-card {
    margin-top: 10px;
  }
  .set-col {
    max-width: 880px;
    margin-inline: auto;
  }
  .set-col-wide {
    max-width: 1080px;
  }
  .set-col > .utabs {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel);
  }
  .set-section {
    margin: 0 0 36px;
    scroll-margin-top: 56px;
  }
  .set-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 14px;
  }
  .set-section-head > div {
    flex: 1 1 320px;
    min-width: 0;
  }
  .main .set-h {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
  }
  .main .set-lead {
    max-width: 640px;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13.5px;
  }
  .set-optional {
    color: var(--muted);
    font-weight: 500;
  }
  .set-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    overflow: hidden;
  }
  .set-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0;
    padding: 16px 18px;
  }
  .set-row + .set-row {
    border-top: 1px solid var(--line);
  }
  .set-row-text {
    flex: 1 1 300px;
    min-width: 0;
  }
  .main .set-row-title {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .main .set-row-desc {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }
  .main .set-row-desc code {
    overflow-wrap: anywhere;
  }
  .set-row-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
  }
  .set-row-foot {
    background: var(--sunken);
  }
  .set-row-foot .set-row-desc {
    flex: 1 1 320px;
    margin: 0;
  }
  .set-warn {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--warn-text);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--warn-text) 22%, var(--warn-bg));
    }
    background: var(--warn-bg);
    color: var(--warn-text);
  }
  .set-warn .icon {
    margin-top: 1px;
  }
  .sso {
    margin-top: 26px;
    scroll-margin-top: 104px;
  }
  .main .sso-h {
    font-size: 16px;
  }
  .sso-conn .set-row-foot {
    flex: 1 1 100%;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .sso-map-list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
  }
  .sso-map {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 0;
  }
  .sso-map + .sso-map {
    border-top: 1px solid var(--line);
  }
  .sso-map-text {
    flex: 1 1 260px;
    min-width: 0;
  }
  .sso-idp {
    font-family: var(--mono);
    font-size: 12.5px;
    overflow-wrap: anywhere;
  }
  .sso-map-form {
    display: grid;
    gap: 6px;
    max-width: 460px;
    margin-top: 12px;
  }
  .sso-map-form .btn {
    justify-self: start;
    margin-top: 6px;
  }
  .sso-sp {
    display: grid;
    gap: 12px;
  }
  .sso-form .set-section {
    display: grid;
    gap: 6px;
  }
  .sso-form .field-label {
    margin-top: 10px;
  }
  .sso-xml, .sso-domains {
    width: 100%;
    min-height: 84px;
    font-family: var(--mono);
    font-size: 12.5px;
  }
  .sso-check {
    margin-top: 12px;
    font-size: 14px;
  }
  .sso-state {
    margin: 0 0 12px;
  }
  .set-import {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(120deg, var(--accent-soft), var(--panel) 70%);
  }
  .set-import-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--accent-ink);
  }
  .main .set-import-label {
    font-size: 14px;
    font-weight: 600;
  }
  .set-import .input {
    flex: 1 1 220px;
    min-width: 0;
  }
  .set-import-hint {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
  }
  .set-brand, .brand-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 18px;
    align-items: start;
  }
  .brand-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }
  @media (max-width: 1100px) {
    .set-brand, .brand-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .set-color {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .set-color img {
    border-radius: 7px;
  }
  .set-fonts {
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
  }
  .set-fonts-sep {
    color: var(--muted);
  }
  .set-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
  }
  .set-logo {
    display: grid;
    place-items: center;
    height: 40px;
    max-width: 160px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
  }
  .set-logo img {
    max-height: 30px;
    max-width: 140px;
    object-fit: contain;
  }
  .brand-form {
    margin: 0;
  }
  .brand-name-input, .brand-select {
    flex: 0 1 280px;
    min-width: 0;
  }
  .color-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .color-row input[type="color"] {
    width: 42px;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--panel);
    cursor: pointer;
  }
  .color-row .input {
    width: 8.5em;
  }
  .brand-side {
    position: sticky;
    top: 56px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .brand-contrast {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .main .brand-contrast-title {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .contrast {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
  }
  .contrast li {
    margin: 0;
  }
  .swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    border-radius: 6px;
  }
  .proposal {
    margin-top: 6px;
    padding: 18px;
    border: 1.5px solid var(--accent-ink);
    border-radius: 14px;
    background: var(--panel);
    scroll-margin-top: 56px;
  }
  .main .proposal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
  }
  .choices {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .choices legend {
    padding: 0 4px;
    font-weight: 600;
  }
  .choice {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .candidates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .candidate {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .candidate p {
    margin: 8px 0;
  }
  .asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .asset-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    scroll-margin-top: 56px;
  }
  .main .asset-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .asset-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .asset-plate img {
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
  }
  .asset-plate-light {
    background: #ffffff;
  }
  .asset-plate-dark {
    background: #1f1f1d;
  }
  .asset-empty {
    font-size: 12.5px;
    text-align: center;
  }
  .asset-plate-light .asset-empty, .asset-plate-light .muted {
    color: #5f5f5a;
  }
  .asset-plate-dark .asset-empty, .asset-plate-dark .muted {
    color: #b4b4ae;
  }
  .main .asset-meta, .main .asset-help {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
  }
  .asset-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto 0 0;
  }
  .asset-form .field-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
  }
  .file-input {
    max-width: 100%;
    font-size: 13px;
  }
  .file-input::file-selector-button {
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
  }
  .asset-actions, .asset-remove {
    display: flex;
    gap: 8px;
    margin: 0;
  }
  .set-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 16px 18px;
    border: 1px solid var(--bad-text);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--bad-text) 24%, var(--panel));
    }
    border-radius: 14px;
  }
  .set-danger form {
    margin: 0;
  }
  .brand-preview {
    --glow: var(--brand-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --glow: color-mix(in oklab, var(--brand-accent) 62%, #000000);
    }
    --brain-bg: #ffffff;
    --brain-bg-2: var(--brand-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --brain-bg-2: color-mix(in oklab, var(--brand-accent) 9%, #ffffff);
    }
    --brain-node: #ffffff;
    --brain-node-line: var(--glow);
    @supports (color: color-mix(in lab, red, red)) {
      --brain-node-line: color-mix(in oklab, var(--glow) 28%, #d0d5dd);
    }
    --brain-text: #101828;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--sunken);
    color-scheme: light;
  }
  @supports (color: oklch(from red l c h)) {
    .brand-preview {
      --glow: oklch(from var(--brand-accent) min(l, 0.55) c h);
    }
  }
  .bp-caption {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }
  .bp-frame {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 200px;
    overflow: hidden;
    border: 1px solid #e3e5e8;
    border-radius: 12px;
    background: #ffffff;
  }
  .bp-signin {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 14px;
    background: var(--brand-bg);
    color: #101828;
    font-family: var(--font-body);
  }
  .bp-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
  }
  .bp-brand img {
    height: 24px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }
  .bp-mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-size: 10px;
  }
  .bp-h {
    margin-top: 6px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: var(--display-weight);
    letter-spacing: var(--display-track);
    line-height: 1.2;
  }
  .bp-field {
    display: block;
    height: 26px;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #ffffff;
  }
  .bp-button {
    display: grid;
    place-items: center;
    height: 26px;
    border-radius: 7px;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-size: 11px;
    font-weight: 600;
  }
  .bp-link {
    color: var(--brand-link);
    font-size: 11px;
    text-decoration: underline;
  }
  .bp-brain {
    position: relative;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 90% at 50% 45%, var(--brain-bg-2), var(--brain-bg) 70%);
  }
  .bp-svg {
    width: 100%;
    height: 100%;
    max-height: 220px;
  }
  .bp-edges path {
    fill: none;
    stroke: var(--brain-node-line);
    stroke-width: 1.2;
  }
  .bp-beam {
    fill: none;
    stroke: var(--glow);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 36 164;
    stroke-dashoffset: 120;
  }
  .bp-tiles rect {
    fill: var(--brain-node);
    stroke: var(--brain-node-line);
  }
  .bp-halo {
    fill: var(--glow);
    opacity: 0.14;
  }
  .bp-core {
    fill: var(--brain-node);
    stroke: var(--glow);
    stroke-width: 1.6;
  }
  .bp-core-mark {
    fill: var(--brain-text);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
  }
  @media (prefers-reduced-motion: no-preference) {
    .bp-beam {
      animation: bp-beam 2.8s linear infinite;
    }
    .bp-beam-2 {
      animation-delay: -1.4s;
    }
    .bp-halo {
      transform-origin: 80px 90px;
      animation: bp-breathe 5s ease-in-out infinite;
    }
  }
  .main .bp-note {
    margin: 10px 2px 0;
    color: var(--muted);
    font-size: 12px;
  }
}
@keyframes bp-beam {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes bp-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.12;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.22;
  }
}
@layer components {
  @media (max-width: 640px) {
    .set-row {
      padding: 14px;
    }
    .set-row-control {
      justify-content: flex-start;
    }
  }
  @media (max-width: 767.98px) {
    .set-col > .utabs {
      top: 55px;
    }
    .set-section, .proposal, .asset-card {
      scroll-margin-top: 104px;
    }
  }
  .confirm-card {
    max-width: 620px;
    overflow-wrap: anywhere;
    margin: 8px 0 0;
    padding: 22px 22px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .confirm-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
  }
  .confirm-lead {
    margin: 0 0 12px;
    color: var(--ink);
  }
  .confirm-points {
    margin: 0 0 14px;
    padding-left: 20px;
    color: var(--ink);
    font-size: 14px;
  }
  .confirm-points li + li {
    margin-top: 6px;
  }
  .confirm-card .field-hint {
    margin: 0 0 14px;
  }
  .confirm-card .callout {
    margin: 0 0 14px;
  }
  .confirm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
  }
  .confirm-actions .btn, .set-danger .btn {
    min-width: 0;
    max-width: 100%;
    min-height: 36px;
    height: auto;
    padding-block: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .confirm-actions .btn > span, .set-danger .btn > span {
    min-width: 0;
  }
  .confirm-actions .btn-sm, .set-danger .btn-sm {
    min-height: 30px;
    padding-block: 6px;
  }
  .flash-with-undo {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flash-with-undo .flash-text {
    flex: 1 1 260px;
    min-width: 0;
  }
  .flash-undo {
    margin: 0;
  }
  .flash-float {
    position: fixed;
    z-index: 30;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    margin: 0;
    flex-wrap: nowrap;
    box-shadow: var(--shadow-pop);
  }
  .flash-float .flash-text {
    flex: 1 1 auto;
  }
  .flash-float .flash-undo {
    flex: none;
  }
  .flash-close {
    flex: none;
    width: 32px;
    height: 32px;
    color: inherit;
  }
  .main:has(> .flash-float) {
    padding-bottom: 112px;
  }
  @media (min-width: 768px) {
    .flash-float {
      left: calc(124px + 50vw);
      width: min(560px, calc(100vw - 248px - 48px));
    }
  }
  .callout .callout-text {
    margin: 0;
    flex: 1;
    min-width: 0;
  }
  .callout-action {
    margin-left: 6px;
    vertical-align: middle;
  }
  .step.is-stop .step-mark {
    color: var(--warn-text);
  }
  .step.is-now .step-mark {
    color: var(--muted);
  }
  .pop-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .pop-inline .input {
    width: auto;
    min-width: 140px;
  }
  .inv-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
  }
  .inv-pop {
    text-align: left;
    white-space: normal;
  }
  .inv-pop .inv-pop-title {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .inv-pop .field-hint {
    margin: 0;
  }
  .person-sub, .inv-expired-note {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
  }
  .inv-expired-note {
    margin-top: 4px;
  }
  .set-card {
    max-width: 620px;
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .set-card .section-title {
    margin-top: 0;
  }
  .group-settings-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .group-settings-form .btn {
    align-self: flex-start;
  }
  .set-card.set-danger {
    display: block;
    border-color: var(--bad-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bad-text) 24%, var(--panel));
    }
  }
  .set-card.set-danger .field-hint {
    margin: 0 0 12px;
  }
  .m-name-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 3px;
  }
  .m-name-link:hover {
    text-decoration-color: currentColor;
  }
  .hero-actions .inline-form {
    display: inline-flex;
    margin: 0;
  }
  .rep-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 6px;
  }
  :where(.main) .rep-period-note {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 12.5px;
  }
  .rep-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rep-kpis-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rep-kpis .kpi-value {
    overflow-wrap: anywhere;
  }
  .rep-roi, .rep-roi-note {
    margin-bottom: 12px;
  }
  .card-section + .card-section, .rep-grid + .card-section, .card-section + .rep-grid, .rep-kpis + .card-section, .rep-kpis + .rep-grid {
    margin-top: 16px;
  }
  .rep-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .rep-grid > .card-section {
    margin-top: 0;
  }
  .rep-fit {
    container: rep-fit / inline-size;
  }
  .data-table.rep-table {
    min-width: 0;
  }
  .data-table.rep-table thead th {
    white-space: normal;
  }
  @container rep-fit (min-width: 760px) {
    .data-table.rep-table thead th {
      white-space: nowrap;
    }
  }
  .rep-table .rep-plan-cell {
    width: 30%;
    min-width: 11rem;
  }
  .data-table.rep-table tbody th {
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    background: none;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    white-space: normal;
    vertical-align: middle;
  }
  .data-table.rep-table tbody tr:first-child th {
    border-top: 0;
  }
  .rep-table tbody tr:hover th {
    background: var(--sunken);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--sunken) 60%, transparent);
    }
  }
  .rep-table .rep-value {
    overflow-wrap: anywhere;
  }
  .rep-sub {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
  }
  .rep-sub.rep-bad {
    color: var(--bad-text);
  }
  .rep-sub.rep-warn {
    color: var(--warn-text);
  }
  .rep-note {
    display: block;
    white-space: normal;
  }
  .rep-value-label {
    display: block;
    margin-top: 6px;
    color: var(--ink-2);
    font-size: 12.5px;
  }
  .rep-value {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .rep-value.rep-value-note {
    font-weight: 400;
  }
  .rep-more {
    display: block;
    margin-top: 2px;
    font-size: 12px;
  }
  :where(.main) .rep-empty {
    margin: 0;
    font-size: 13.5px;
  }
  .rep-bar {
    display: block;
    width: 100%;
    height: 6px;
    margin-top: 6px;
  }
  .rep-bar-track {
    fill: var(--sunken);
    stroke: var(--line);
    stroke-width: 0.5;
  }
  .rep-bar-fill {
    fill: var(--accent-ink);
  }
  .rep-bar-ok .rep-bar-fill {
    fill: var(--ok-text);
  }
  .rep-bar-warn .rep-bar-fill {
    fill: var(--warn-text);
  }
  .rep-bar-bad .rep-bar-fill {
    fill: var(--bad-text);
  }
  .rep-bar-idle .rep-bar-fill {
    fill: var(--idle-text);
  }
  .rep-bar-run .rep-bar-fill {
    fill: var(--run-dot);
  }
  .rep-rows {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rep-rows li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    margin: 0;
    font-size: 13.5px;
  }
  .rep-rows .rep-bar {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .rep-dl {
    display: grid;
    gap: 8px;
    margin: 0;
  }
  .rep-dl > div {
    display: grid;
    grid-template-columns: minmax(120px, 40%) minmax(0, 1fr);
    gap: 12px;
    font-size: 13.5px;
  }
  .rep-dl dt {
    color: var(--muted);
  }
  .rep-dl dd {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .rep-value-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    gap: 16px 24px;
    align-items: start;
  }
  .rep-value-big {
    display: block;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: var(--display-weight);
    letter-spacing: var(--display-track);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .rep-hero-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-ink);
  }
  .rep-versions {
    display: grid;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
  }
  .rep-details {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }
  .rep-details > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
  }
  .rep-details[open] > summary {
    margin-bottom: 12px;
  }
  .rep-withdrawn {
    margin-top: 4px;
    padding: 8px 12px;
  }
  .rep-withdrawn > summary {
    font-weight: 500;
    color: var(--muted);
  }
  .rep-confirm-note {
    margin: 0;
  }
  .rep-problem a {
    font-weight: 600;
  }
  .rep-form {
    display: grid;
    gap: 12px;
    max-width: 760px;
  }
  .rep-form-inline {
    margin-top: 12px;
  }
  .rep-form > .btn {
    justify-self: start;
  }
  .rep-nowrap {
    white-space: nowrap;
  }
  .rep-day {
    white-space: nowrap;
  }
  .rep-field {
    display: grid;
    gap: 4px;
    min-width: 0;
  }
  .rep-field .field-hint {
    margin: 0;
  }
  .rep-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
  }
  .rep-fieldset {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .rep-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
  }
  .rep-choice input {
    margin-top: 3px;
  }
  .rep-templates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
  }
  .rep-templates .field-label {
    margin-right: 4px;
  }
  .rep-pill-on {
    border-color: var(--accent-ink);
    color: var(--accent-ink);
  }
  .rep-inline-actions {
    margin-top: 10px;
  }
  .rep-card .callout {
    margin-bottom: 0;
  }
  .rep-table .status {
    height: auto;
    min-height: 22px;
    padding-block: 3px;
    white-space: normal;
    line-height: 1.3;
  }
  .rep-table .status::before {
    flex: none;
  }
  @media (max-width: 1023.98px) {
    .rep-grid, .rep-value-row {
      grid-template-columns: minmax(0, 1fr);
    }
    .rep-kpis, .rep-kpis-6 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 479.98px) {
    .rep-kpis, .rep-kpis-6 {
      gap: 8px;
    }
    .rep-kpis .kpi {
      padding: 10px 12px;
    }
    :where(.main) .rep-kpis .kpi-value {
      font-size: 20px;
    }
    :where(.main) .rep-kpis .kpi-label, :where(.main) .rep-kpis .kpi-note {
      font-size: 12px;
    }
  }
  @container rep-fit (max-width: 639.98px) {
    .rep-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .rep-table, .rep-table tbody {
      display: block;
    }
    .rep-table tr {
      display: grid;
      gap: 6px;
      margin: 0 0 10px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
    }
    .data-table.rep-table tbody th, .data-table.rep-table tbody td {
      display: grid;
      grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
      gap: 8px;
      width: auto;
      min-width: 0;
      padding: 0;
      border: 0;
      background: none;
      text-align: left;
      white-space: normal;
    }
    .data-table.rep-table tbody th[scope="row"] {
      grid-template-columns: minmax(0, 1fr);
      font-size: 15px;
    }
    .rep-table tbody tr:hover td {
      background: none;
    }
    .rep-table td[data-label]::before {
      content: attr(data-label);
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .rep-table td[data-label] > * {
      grid-column: 2;
    }
    .rep-table td > .status {
      justify-self: start;
    }
    .rep-table .rep-nowrap {
      white-space: normal;
    }
    .rep-wrap {
      overflow: visible;
      border: 0;
      border-radius: 0;
    }
    .rep-table td.cell-end {
      grid-template-columns: minmax(0, 1fr);
      justify-items: end;
    }
  }
  @media (max-width: 767.98px) {
    .rep-dl > div {
      grid-template-columns: minmax(0, 1fr);
      gap: 2px;
    }
    .rep-period {
      align-items: stretch;
    }
  }
  .review-list {
    display: grid;
    gap: 20px;
  }
  .review-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
  }
  .review-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  .review-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .review-card-head > div {
    min-width: 0;
    flex: 1 1 220px;
  }
  :where(.main) .review-card h2 {
    margin: 0;
    font-size: 19px;
    overflow-wrap: anywhere;
  }
  .review-meta, .review-scope, .review-footnote, .review-author-note {
    color: var(--muted);
    font-size: 13px;
  }
  .review-meta {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
  }
  .review-meta span {
    display: block;
    margin-top: 3px;
  }
  .review-scope {
    margin: 0 0 14px;
  }
  .review-item {
    min-width: 0;
    margin: 20px 0;
  }
  .review-fields {
    margin: 0;
  }
  .review-field {
    display: grid;
    grid-template-columns: minmax(120px, 28%) minmax(0, 1fr);
    gap: 12px 20px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }
  .review-field dt {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .review-field dd {
    min-width: 0;
    margin: 0;
  }
  .review-fields .review-fields, .review-list-items .review-fields {
    padding-left: 12px;
    border-left: 2px solid var(--line);
  }
  .review-fields .review-fields .review-field, .review-list-items .review-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 8px 0;
  }
  .review-list-items {
    padding-left: 16px;
  }
  .review-field-help {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
  }
  .review-value {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
  }
  .review-blockers {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--warn-text);
    border-radius: 10px;
    background: var(--warn-bg);
    color: var(--warn-text);
    overflow-wrap: anywhere;
  }
  :where(.main) .review-blockers h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 14px;
    color: inherit;
  }
  :where(.main) .review-blockers p, :where(.main) .review-blockers ul {
    margin: 7px 0 0;
    font-size: 13px;
    color: inherit;
  }
  .review-decision, .review-history {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .review-decision label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
  }
  .review-reason {
    display: block;
    width: 100%;
    min-height: 92px;
    resize: vertical;
  }
  .review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }
  .review-actions .btn {
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .review-footnote {
    margin: 10px 0 0;
  }
  .review-history p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
  }
  .review-evidence {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
    overflow-wrap: anywhere;
  }
  .review-lead {
    margin: 0 0 10px;
    font-size: 14.5px;
  }
  .review-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 18px;
    margin: 0;
  }
  .review-facts dt {
    font-size: 12px;
    color: var(--muted);
  }
  .review-facts dd {
    margin: 2px 0 0;
    font-size: 13.5px;
    font-weight: 600;
  }
  .review-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
  }
  :where(.main) .review-item-title {
    margin: 0 0 6px;
    font-size: 14px;
  }
  .review-entry > summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    list-style: none;
  }
  .review-entry > summary::-webkit-details-marker {
    display: none;
  }
  .review-entry > summary::after {
    content: '▸';
    flex: none;
    color: var(--muted);
    font-size: 14px;
  }
  .review-entry[open] > summary::after {
    content: '▾';
  }
  .review-entry > summary:focus-visible {
    outline: 2px solid var(--focus, currentColor);
    outline-offset: 4px;
    border-radius: 6px;
  }
  .review-body {
    margin-top: 14px;
  }
  .review-test-tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--warn-bg);
    color: var(--warn-text);
    font-weight: 700;
    font-size: 12px;
  }
  .review-test-banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--warn-text);
    border-radius: 10px;
    background: var(--warn-bg);
    color: var(--warn-text);
    font-size: 14px;
  }
  .review-card.is-test {
    border-color: var(--warn-text);
  }
  .review-deciding {
    margin: 0 0 10px;
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .review-consequences {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
  }
  .review-consequences li + li {
    margin-top: 4px;
  }
  .review-list-items {
    margin: 0;
    padding-left: 18px;
  }
  .review-list-items > li + li {
    margin-top: 8px;
  }
  .review-raw {
    margin-top: 12px;
  }
  .review-raw > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
  }
  .review-raw .review-value {
    margin-top: 8px;
    font-family: var(--font-mono, monospace);
    font-size: 12.5px;
  }
  .review-meaning {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
    overflow-wrap: anywhere;
  }
  :where(.main) .review-meaning .review-item-title {
    margin: 0 0 10px;
  }
  .review-meaning .review-author-note {
    margin: 10px 0 0;
  }
  p.review-meaning {
    padding: 10px 12px;
    font-size: 14.5px;
  }
  .review-meaning-note {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
  }
  .review-missing {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--warn-text);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--warn-text) 22%, var(--warn-bg));
    }
    background: var(--warn-bg);
    color: var(--warn-text);
    font-size: 13.5px;
    overflow-wrap: anywhere;
  }
  .review-context {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
  }
  .review-context span, .review-context a {
    display: inline;
    margin-top: 0;
  }
  .review-run-state {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
  }
  :where(.main) .review-run-state h2 {
    margin: 0 0 4px;
    font-size: 18px;
  }
  .review-run-state p {
    margin: 0;
    color: var(--muted);
  }
  .review-restrictions {
    margin: 14px 0 0;
    padding: 10px 12px 10px 28px;
    border-radius: 8px;
    border: 1px solid var(--warn-text);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--warn-text) 22%, var(--warn-bg));
    }
    background: var(--warn-bg);
    color: var(--warn-text);
    font-size: 13.5px;
    overflow-wrap: anywhere;
  }
  .review-restrictions li + li {
    margin-top: 4px;
  }
  .review-how {
    margin-top: 14px;
  }
  .review-how > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
  }
  .review-how[open] > summary {
    margin-bottom: 8px;
  }
  .review-decision .review-deciding {
    margin: 10px 0 8px;
  }
  .audience-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .hero-actions .audience-line {
    flex-basis: 100%;
    margin: 0;
  }
  .outcome-callout .callout-text > p {
    margin: 0 0 8px;
  }
  .outcome-stages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 16px;
    margin: 0 0 10px;
  }
  .outcome-stages dt {
    font-size: 12px;
    color: var(--muted);
  }
  .outcome-stages dd {
    margin: 2px 0 0;
    font-size: 13.5px;
    font-weight: 600;
  }
  .agent-monitoring > summary {
    cursor: pointer;
    font-weight: 600;
  }
  .agent-monitoring[open] > summary {
    margin-bottom: 12px;
  }
  @media (max-width: 600px) {
    .review-card {
      padding: 16px;
    }
    .review-meaning {
      padding: 12px;
    }
    .review-facts {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .review-field {
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
    }
    .review-fields .review-fields {
      padding-left: 10px;
      border-left: 2px solid var(--line);
    }
    .review-actions .btn {
      flex: 1 1 100%;
    }
    .review-actions .btn-secondary {
      flex: 1 1 calc(50% - 6px);
    }
    .review-entry > summary h2 {
      font-size: 17px;
    }
  }
}
@layer base {
  :root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --page-wide: 1440px;
    --page-narrow: 680px;
    --radius-card: 14px;
    --shadow-card: 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 32px -20px rgb(16 24 40 / 0.18);
  }
}
@layer components {
  .page-frame {
    max-width: var(--page-wide);
    margin-inline: auto;
  }
  .page-frame.is-narrow {
    max-width: var(--page-narrow);
  }
  .main, .main.narrow {
    max-width: none;
  }
  .page-frame.is-narrow > .crumbs {
    margin-top: var(--space-4);
  }
  .page-card {
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--panel);
    box-shadow: var(--shadow-card);
  }
  .page-frame.is-narrow .page-card {
    margin-top: var(--space-2);
  }
  .page-card > :last-child {
    margin-bottom: 0;
  }
  .page-card :where(h1) {
    font-size: 24px;
  }
  .page-card > .page-head, .page-card > .card-head {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--line);
  }
  .page-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    font-size: 13.5px;
  }
  .page-head {
    align-items: flex-start;
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
  }
  .page-head-text {
    flex: 1 1 420px;
  }
  .page-head-text .page-purpose {
    max-width: 72ch;
  }
  .page-actions {
    flex: none;
    align-items: center;
    margin-left: auto;
    padding-top: 2px;
  }
  .page-actions > .head-stat {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }
  .page-frame:has(.set-col) {
    max-width: 880px;
  }
  .page-frame:has(.set-col-wide) {
    max-width: 1080px;
  }
  .page-frame :where(.set-col) {
    max-width: none;
    margin-inline: 0;
  }
  .card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .card-head-text {
    flex: 1;
    min-width: 0;
  }
  .card-head-text :where(h1, h2) {
    margin: 0;
    line-height: 1.2;
  }
  .card-head-text :where(p) {
    margin: var(--space-1) 0 0;
    color: var(--muted);
    font-size: 14px;
  }
  .card-head > .status {
    flex: none;
    margin-top: 4px;
  }
  .section-card {
    margin: 0 0 var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--panel);
  }
  .section-card > :where(h2, h3):first-child {
    margin-top: 0;
  }
  .section-card > :last-child {
    margin-bottom: 0;
  }
  .section-card.is-danger {
    border-color: var(--bad-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bad-text) 30%, var(--line));
    }
  }
  .form-stack {
    display: grid;
    gap: var(--space-5);
  }
  .form-stack > * {
    margin: 0;
  }
  .field {
    display: grid;
    gap: 6px;
    margin: 0;
  }
  .field > .field-label, .field > label {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
  }
  .field > .field-hint {
    margin: 0;
  }
  .field-error {
    margin: 0;
    font-size: 12.5px;
    color: var(--bad-text);
  }
  .check-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
  }
  .check-row > input[type="checkbox"], .check-row > input[type="radio"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    cursor: pointer;
  }
  .check-row > span {
    min-width: 0;
  }
  .check-row:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
  }
  .btn-row.is-end {
    justify-content: flex-end;
  }
  .disclosure {
    margin: 0;
  }
  .disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--link);
    cursor: pointer;
    list-style: none;
  }
  .disclosure > summary::-webkit-details-marker {
    display: none;
  }
  .disclosure > summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
  }
  .disclosure[open] > summary::before {
    transform: rotate(45deg);
  }
  .disclosure > :not(summary) {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-4);
    border-left: 2px solid var(--line);
    font-size: 13px;
    color: var(--ink-2);
  }
  .callout {
    display: flex;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
    font-size: 13.5px;
  }
  .callout.is-warn {
    border-color: var(--warn-text);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--warn-text) 25%, var(--line));
    }
    background: var(--warn-bg);
    color: var(--warn-text);
  }
  .callout > p {
    margin: 0;
  }
  .setup-steps {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .setup-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--line);
  }
  .setup-step:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .setup-step:last-child {
    padding-bottom: 0;
  }
  .setup-step-num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 700;
  }
  .setup-step.is-done .setup-step-num {
    background: var(--ok-bg);
    color: var(--ok-text);
  }
  .setup-step-body {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
  }
  .setup-step-body > * {
    margin: 0;
  }
  .setup-step-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
  }
  .setup-step-title :where(h2, h3) {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
  }
  .setup-step-body > p {
    color: var(--ink-2);
    font-size: 13.5px;
  }
  @media (max-width: 767.98px) {
    .page-card {
      padding: var(--space-1) 0 0;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }
    .page-card > .page-head, .page-card > .card-head {
      margin-bottom: var(--space-5);
      padding-bottom: var(--space-4);
    }
    .section-card {
      padding: var(--space-4);
    }
    .setup-step {
      grid-template-columns: 24px minmax(0, 1fr);
      gap: var(--space-3);
    }
    .setup-step-num {
      width: 24px;
      height: 24px;
      font-size: 12px;
    }
    .card-head {
      flex-wrap: wrap;
      row-gap: var(--space-2);
    }
    .card-head-text {
      flex-basis: calc(100% - 44px - var(--space-4));
    }
    .card-head > .status {
      margin: 0 0 0 calc(44px + var(--space-4));
    }
    .page-card .btn-row > .btn {
      flex: 1 1 auto;
    }
  }
  .key-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
  }
  .key-status-text {
    flex: 1 1 260px;
    min-width: 0;
  }
  .key-status-text h2 {
    margin: 0;
    font-size: 15px;
  }
  .key-status-text p {
    margin: var(--space-1) 0 0;
    color: var(--muted);
    font-size: 13.5px;
  }
  .key-advanced {
    margin: 0 0 var(--space-5);
  }
  .key-advanced section {
    margin: 0;
  }
  .key-advanced h2 {
    margin: 0 0 var(--space-2);
    font-size: 14px;
  }
  .key-advanced p {
    margin: 0 0 var(--space-3);
  }
  .key-remove {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }
  .key-remove form {
    margin: 0;
  }
  .key-remove .btn-quiet {
    padding-inline: 0;
  }
  .key-remove .field-hint {
    margin: 0;
  }
  .page-card-foot a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .page-card-foot .field-hint {
    margin: 0;
  }
}
@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-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-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;
}
@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-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-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;
    }
  }
}