/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-italic-B5xAaiFk.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-italic-DzZdc28x.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-italic-DcOpz6Lw.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-italic-CILZdfAp.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-italic-K3WlGtc8.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-italic-0pjOp8NU.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-italic */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-italic-DpCbqKDY.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    :root, :host {
      --shimmer-angle: 20deg;
    }

    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-scroll-snap-strictness: proximity;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-scrollbar-thumb: #0000;
      --tw-scrollbar-track: #0000;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --scroll-fade-t: 0px;
      --scroll-fade-b: 0px;
      --scroll-fade-s: 0px;
      --scroll-fade-e: 0px;
      --scroll-fade-mask: initial;
      --shimmer-image: initial;
      --shimmer-text-fill: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --container-2xl: 42rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --font-weight-medium: 500;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-ui);
    --default-mono-font-family: var(--font-mono);
    --font-display: "Fraunces", Georgia, serif;
    --color-accent: var(--accent);
    --color-border: var(--border);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    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;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.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 {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :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)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-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"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  html {
    font-family: var(--font-ui);
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-s-1\/2 {
    inset-inline-start: 50%;
  }

  .top-0 {
    top: 0;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .bottom-0 {
    bottom: 0;
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .col-start-1 {
    grid-column-start: 1;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .col-start-3 {
    grid-column-start: 3;
  }

  .row-start-1 {
    grid-row-start: 1;
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-max {
    height: max-content;
  }

  .min-h-0 {
    min-height: 0;
  }

  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }

  .min-h-full {
    min-height: 100%;
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-2\/5 {
    width: 40%;
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-3\/5 {
    width: 60%;
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-\[80\%\] {
    max-width: 80%;
  }

  .max-w-full {
    max-width: 100%;
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }

  .flex-1 {
    flex: 1;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-3\/4 {
    --tw-translate-y: calc(calc(3 / 4 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-3\/4 {
    --tw-translate-y: calc(3 / 4 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .shimmer {
    --_spread: var(--shimmer-spread, calc(3ch + 40px));
    --_base: currentColor;
    --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* .2)));
    background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shimmer {
      background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));
    }
  }

  .shimmer {
    background-repeat: no-repeat;
    background-size: calc(200% + var(--_spread) * 2) 100%;
    -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
    animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
  }

  @media (prefers-color-scheme: dark) {
    .shimmer {
      --_highlight: var(--shimmer-color, oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4)));
    }
  }

  .shimmer:where([dir="rtl"], [dir="rtl"] *) {
    animation-direction: reverse;
  }

  .scroll-fade-x {
    --_scroll-fade-size-s: var(--scroll-fade-s-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    --_scroll-fade-size-e: var(--scroll-fade-e-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    --scroll-fade-inline: linear-gradient(to right,
    transparent 0,
    #000 var(--scroll-fade-s, 0px),
    #000 calc(100% - var(--scroll-fade-e, 0px)),
    transparent 100%);
  }

  .scroll-fade-x:where([dir="rtl"], [dir="rtl"] *) {
    --scroll-fade-inline: linear-gradient(to left,
      transparent 0,
      #000 var(--scroll-fade-s, 0px),
      #000 calc(100% - var(--scroll-fade-e, 0px)),
      transparent 100%);
  }

  .scroll-fade-x {
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  @supports (animation-timeline: scroll()) {
    .scroll-fade-x {
      animation: 1ms ease-in-out scroll-fade-reveal-s, 1ms ease-in-out scroll-fade-reveal-e;
      animation-timeline: scroll(self inline), scroll(self inline);
      animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
      animation-fill-mode: both;
    }
  }

  @supports not (animation-timeline: scroll()) {
    .scroll-fade-x {
      --scroll-fade-s: var(--_scroll-fade-size-s);
      --scroll-fade-e: var(--_scroll-fade-size-e);
    }
  }

  .scroll-fade {
    --_scroll-fade-size-t: var(--scroll-fade-t-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    --scroll-fade-block: linear-gradient(to bottom,
    transparent 0,
    #000 var(--scroll-fade-t, 0px),
    #000 calc(100% - var(--scroll-fade-b, 0px)),
    transparent 100%);
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
    -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
    mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  @supports (animation-timeline: scroll()) {
    .scroll-fade {
      animation: 1ms ease-in-out scroll-fade-reveal-t, 1ms ease-in-out scroll-fade-reveal-b;
      animation-timeline: scroll(self y), scroll(self y);
      animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)), calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
      animation-fill-mode: both;
    }
  }

  @supports not (animation-timeline: scroll()) {
    .scroll-fade {
      --scroll-fade-t: var(--_scroll-fade-size-t);
      --scroll-fade-b: var(--_scroll-fade-size-b);
    }
  }

  .scroll-fade-b {
    --_scroll-fade-size-b: var(--scroll-fade-b-size, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    --scroll-fade-mask: linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - var(--scroll-fade-b, 0px)),
    transparent 100%);
    -webkit-mask-image: var(--scroll-fade-mask);
    -webkit-mask-image: var(--scroll-fade-mask);
    -webkit-mask-image: var(--scroll-fade-mask);
    mask-image: var(--scroll-fade-mask);
    -webkit-mask-composite: source-in;
    -webkit-mask-composite: source-in;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  @supports (animation-timeline: scroll()) {
    .scroll-fade-b {
      animation: 1ms ease-in-out scroll-fade-reveal-b;
      animation-timeline: scroll(self y);
      animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
      animation-fill-mode: both;
    }
  }

  @supports not (animation-timeline: scroll()) {
    .scroll-fade-b {
      --scroll-fade-b: var(--_scroll-fade-size-b);
    }
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }

  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }

  .scroll-px-1 {
    scroll-padding-inline: var(--spacing);
  }

  .scrollbar-none {
    scrollbar-width: none;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
  }

  .scrollbar-gutter-stable {
    scrollbar-gutter: stable;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .justify-self-end {
    justify-self: flex-end;
  }

  .justify-self-start {
    justify-self: flex-start;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .overscroll-x-contain {
    overscroll-behavior-x: contain;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-border, .border-input {
    border-color: var(--border);
  }

  .border-transparent {
    border-color: #0000;
  }

  .bg-background {
    background-color: var(--background);
  }

  .bg-card {
    background-color: var(--card);
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .text-end {
    text-align: end;
  }

  .text-left {
    text-align: left;
  }

  .text-start {
    text-align: start;
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .text-balance {
    text-wrap: balance;
  }

  .wrap-break-word {
    overflow-wrap: break-word;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-foreground {
    color: var(--foreground);
  }

  .text-muted-foreground {
    color: var(--muted-foreground);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .opacity-60 {
    opacity: .6;
  }

  .shadow, .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-3 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .ring-card {
    --tw-ring-color: var(--card);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[translate\,scale\,opacity\] {
    transition-property: translate, scale, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .contain-content {
    contain: content;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[contain-intrinsic-size\:auto_10rem\] {
    contain-intrinsic-size: auto 10rem;
  }

  .\[content-visibility\:auto\] {
    content-visibility: auto;
  }

  .paused {
    animation-play-state: paused;
  }

  .running {
    animation-play-state: running;
  }

  .group-has-data-\[slot\=message-footer\]\/message\:-translate-y-8:is(:where(.group\/message):has([data-slot="message-footer"]) *) {
    --tw-translate-y: calc(var(--spacing) * -8);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .group-has-data-\[variant\=ghost\]\/message\:px-0:is(:where(.group\/message):has([data-variant="ghost"]) *) {
    padding-inline: 0;
  }

  .group-has-\[\>svg\]\/alert\:col-start-2:is(:where(.group\/alert):has( > svg) *) {
    grid-column-start: 2;
  }

  .group-data-\[align\=end\]\/bubble\:self-end:is(:where(.group\/bubble)[data-align="end"] *) {
    align-self: flex-end;
  }

  .group-data-\[align\=end\]\/message\:justify-end:is(:where(.group\/message)[data-align="end"] *) {
    justify-content: flex-end;
  }

  .group-data-\[align\=end\]\/message\:self-end:is(:where(.group\/message)[data-align="end"] *) {
    align-self: flex-end;
  }

  .group-data-\[orientation\=vertical\]\/attachment\:absolute:is(:where(.group\/attachment)[data-orientation="vertical"] *) {
    position: absolute;
  }

  .group-data-\[orientation\=vertical\]\/attachment\:top-3:is(:where(.group\/attachment)[data-orientation="vertical"] *) {
    top: calc(var(--spacing) * 3);
  }

  .group-data-\[orientation\=vertical\]\/attachment\:right-3:is(:where(.group\/attachment)[data-orientation="vertical"] *) {
    right: calc(var(--spacing) * 3);
  }

  .group-data-\[orientation\=vertical\]\/attachment\:w-full:is(:where(.group\/attachment)[data-orientation="vertical"] *) {
    width: 100%;
  }

  .group-data-\[orientation\=vertical\]\/attachment\:gap-1:is(:where(.group\/attachment)[data-orientation="vertical"] *) {
    gap: var(--spacing);
  }

  .group-data-\[orientation\=vertical\]\/attachment\:px-1:is(:where(.group\/attachment)[data-orientation="vertical"] *) {
    padding-inline: var(--spacing);
  }

  .group-data-\[size\=sm\]\/attachment\:w-8:is(:where(.group\/attachment)[data-size="sm"] *) {
    width: calc(var(--spacing) * 8);
  }

  .group-data-\[size\=xs\]\/attachment\:w-7:is(:where(.group\/attachment)[data-size="xs"] *) {
    width: calc(var(--spacing) * 7);
  }

  .group-data-\[size\=xs\]\/attachment\:rounded-md:is(:where(.group\/attachment)[data-size="xs"] *) {
    border-radius: var(--radius-md);
  }

  .group-data-\[state\=done\]\/attachment\:opacity-100:is(:where(.group\/attachment)[data-state="done"] *) {
    opacity: 1;
  }

  .group-data-\[state\=error\]\/attachment\:bg-destructive\/10:is(:where(.group\/attachment)[data-state="error"] *) {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-data-\[state\=error\]\/attachment\:bg-destructive\/10:is(:where(.group\/attachment)[data-state="error"] *) {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .group-data-\[state\=error\]\/attachment\:text-destructive:is(:where(.group\/attachment)[data-state="error"] *), .group-data-\[state\=error\]\/attachment\:text-destructive\/80:is(:where(.group\/attachment)[data-state="error"] *) {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-data-\[state\=error\]\/attachment\:text-destructive\/80:is(:where(.group\/attachment)[data-state="error"] *) {
      color: color-mix(in oklab, var(--destructive) 80%, transparent);
    }
  }

  .group-data-\[state\=idle\]\/attachment\:opacity-100:is(:where(.group\/attachment)[data-state="idle"] *) {
    opacity: 1;
  }

  .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="processing"] *) {
    --_spread: var(--shimmer-spread, calc(3ch + 40px));
    --_base: currentColor;
    --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* .2)));
    background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="processing"] *) {
      background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));
    }
  }

  .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="processing"] *) {
    background-repeat: no-repeat;
    background-size: calc(200% + var(--_spread) * 2) 100%;
    -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
    animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
  }

  @media (prefers-color-scheme: dark) {
    .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="processing"] *) {
      --_highlight: var(--shimmer-color, oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4)));
    }
  }

  .group-data-\[state\=processing\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="processing"] *):where([dir="rtl"], [dir="rtl"] *) {
    animation-direction: reverse;
  }

  .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="uploading"] *) {
    --_spread: var(--shimmer-spread, calc(3ch + 40px));
    --_base: currentColor;
    --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* .2)));
    background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="uploading"] *) {
      background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));
    }
  }

  .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="uploading"] *) {
    background-repeat: no-repeat;
    background-size: calc(200% + var(--_spread) * 2) 100%;
    -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
    animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
  }

  @media (prefers-color-scheme: dark) {
    .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="uploading"] *) {
      --_highlight: var(--shimmer-color, oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4)));
    }
  }

  .group-data-\[state\=uploading\]\/attachment\:shimmer:is(:where(.group\/attachment)[data-state="uploading"] *):where([dir="rtl"], [dir="rtl"] *) {
    animation-direction: reverse;
  }

  .group-data-\[variant\=separator\]\/marker\:flex-none:is(:where(.group\/marker)[data-variant="separator"] *) {
    flex: none;
  }

  .group-data-\[variant\=separator\]\/marker\:text-center:is(:where(.group\/marker)[data-variant="separator"] *) {
    text-align: center;
  }

  .before\:mr-1:before {
    content: var(--tw-content);
    margin-right: var(--spacing);
  }

  .before\:h-px:before {
    content: var(--tw-content);
    height: 1px;
  }

  .before\:min-w-0:before {
    content: var(--tw-content);
    min-width: 0;
  }

  .before\:flex-1:before {
    content: var(--tw-content);
    flex: 1;
  }

  .before\:bg-border:before {
    content: var(--tw-content);
    background-color: var(--border);
  }

  .after\:ml-1:after {
    content: var(--tw-content);
    margin-left: var(--spacing);
  }

  .after\:h-px:after {
    content: var(--tw-content);
    height: 1px;
  }

  .after\:min-w-0:after {
    content: var(--tw-content);
    min-width: 0;
  }

  .after\:flex-1:after {
    content: var(--tw-content);
    flex: 1;
  }

  .after\:bg-border:after {
    content: var(--tw-content);
    background-color: var(--border);
  }

  .focus-within\:ring-1:focus-within {
    --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);
  }

  .focus-within\:ring-ring\/50:focus-within {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:ring-ring\/50:focus-within {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  @media (hover: hover) {
    .hover\:bg-muted:hover {
      background-color: var(--muted);
    }

    .hover\:text-foreground:hover {
      color: var(--foreground);
    }
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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);
  }

  .focus-visible\:ring-3:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .has-data-\[slot\=alert-action\]\:relative:has([data-slot="alert-action"]) {
    position: relative;
  }

  .has-data-\[slot\=alert-action\]\:pr-18:has([data-slot="alert-action"]) {
    padding-right: calc(var(--spacing) * 18);
  }

  .has-data-\[slot\=attachment-content\]\:w-30:has([data-slot="attachment-content"]) {
    width: calc(var(--spacing) * 30);
  }

  .has-data-\[slot\=attachment-content\]\:px-1\.5:has([data-slot="attachment-content"]) {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .has-data-\[slot\=attachment-content\]\:px-2:has([data-slot="attachment-content"]) {
    padding-inline: calc(var(--spacing) * 2);
  }

  .has-data-\[slot\=attachment-content\]\:px-2\.5:has([data-slot="attachment-content"]) {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .has-data-\[slot\=attachment-content\]\:py-1:has([data-slot="attachment-content"]) {
    padding-block: var(--spacing);
  }

  .has-data-\[slot\=attachment-content\]\:py-1\.5:has([data-slot="attachment-content"]) {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .has-data-\[slot\=attachment-content\]\:py-2:has([data-slot="attachment-content"]) {
    padding-block: calc(var(--spacing) * 2);
  }

  .has-data-\[slot\=attachment-media\]\:p-1:has([data-slot="attachment-media"]) {
    padding: var(--spacing);
  }

  .has-data-\[slot\=attachment-media\]\:p-1\.5:has([data-slot="attachment-media"]) {
    padding: calc(var(--spacing) * 1.5);
  }

  .has-data-\[slot\=attachment-media\]\:p-2:has([data-slot="attachment-media"]) {
    padding: calc(var(--spacing) * 2);
  }

  .has-\[button\]\:p-0:has(:is(button)) {
    padding: 0;
  }

  @media (hover: hover) {
    .has-\[\>a\,\>button\]\:hover\:bg-muted\/50:has( > a,  > button):hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .has-\[\>a\,\>button\]\:hover\:bg-muted\/50:has( > a,  > button):hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }
  }

  .has-\[\>svg\]\:grid-cols-\[auto_1fr\]:has( > svg) {
    grid-template-columns: auto 1fr;
  }

  .has-\[\>svg\]\:gap-x-2:has( > svg) {
    column-gap: calc(var(--spacing) * 2);
  }

  .data-autoscrolling\:scrollbar-thumb-transparent[data-autoscrolling] {
    --tw-scrollbar-thumb: transparent;
    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
  }

  .data-autoscrolling\:scrollbar-track-transparent[data-autoscrolling] {
    --tw-scrollbar-track: transparent;
    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
  }

  :is(.group-data-\[align\=end\]\/message\:\*\:data-slot\:self-end:is(:where(.group\/message)[data-align="end"] *) > *)[data-slot] {
    align-self: flex-end;
  }

  .data-\[active\=false\]\:pointer-events-none[data-active="false"] {
    pointer-events: none;
  }

  .data-\[active\=false\]\:scale-95[data-active="false"] {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .data-\[active\=false\]\:opacity-0[data-active="false"] {
    opacity: 0;
  }

  .data-\[active\=false\]\:duration-400[data-active="false"] {
    --tw-duration: .4s;
    transition-duration: .4s;
  }

  .data-\[active\=false\]\:ease-\[cubic-bezier\(0\.7\,0\,0\.84\,0\)\][data-active="false"] {
    --tw-ease: cubic-bezier(.7,0,.84,0);
    transition-timing-function: cubic-bezier(.7, 0, .84, 0);
  }

  .data-\[active\=true\]\:translate-y-0[data-active="true"] {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[active\=true\]\:scale-100[data-active="true"] {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .data-\[active\=true\]\:opacity-100[data-active="true"] {
    opacity: 1;
  }

  .data-\[active\=true\]\:ease-\[cubic-bezier\(0\.23\,1\,0\.32\,1\)\][data-active="true"] {
    --tw-ease: cubic-bezier(.23,1,.32,1);
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
  }

  .data-\[align\=end\]\:flex-row-reverse[data-align="end"] {
    flex-direction: row-reverse;
  }

  .data-\[align\=end\]\:self-end[data-align="end"] {
    align-self: flex-end;
  }

  .data-\[direction\=end\]\:bottom-4[data-direction="end"] {
    bottom: calc(var(--spacing) * 4);
  }

  .data-\[direction\=end\]\:data-\[active\=false\]\:translate-y-full[data-direction="end"][data-active="false"] {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[direction\=start\]\:top-4[data-direction="start"] {
    top: calc(var(--spacing) * 4);
  }

  .data-\[direction\=start\]\:data-\[active\=false\]\:-translate-y-full[data-direction="start"][data-active="false"] {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
    color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *)[data-slot="alert-description"] {
      color: color-mix(in oklab, var(--destructive) 90%, transparent);
    }
  }

  :is(.\*\:data-\[slot\=attachment\]\:flex-none > *)[data-slot="attachment"] {
    flex: none;
  }

  :is(.\*\:data-\[slot\=attachment\]\:snap-start > *)[data-slot="attachment"] {
    scroll-snap-align: start;
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:rounded-none > *)[data-slot="bubble-content"] {
    border-radius: 0;
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:border-border > *)[data-slot="bubble-content"] {
    border-color: var(--border);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-\[oklch\(from_var\(--primary\)_0\.93_calc\(c\*0\.4\)_h\)\] > *)[data-slot="bubble-content"] {
    background-color: oklch(from var(--primary) .93 calc(c * .4) h);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-background > *)[data-slot="bubble-content"] {
    background-color: var(--background);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-destructive\/10 > *)[data-slot="bubble-content"] {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=bubble-content\]\:bg-destructive\/10 > *)[data-slot="bubble-content"] {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-muted > *)[data-slot="bubble-content"] {
    background-color: var(--muted);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-primary > *)[data-slot="bubble-content"] {
    background-color: var(--primary);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-secondary > *)[data-slot="bubble-content"] {
    background-color: var(--secondary);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:bg-transparent > *)[data-slot="bubble-content"] {
    background-color: #0000;
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:p-0 > *)[data-slot="bubble-content"] {
    padding: 0;
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:text-destructive > *)[data-slot="bubble-content"] {
    color: var(--destructive);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:text-foreground > *)[data-slot="bubble-content"] {
    color: var(--foreground);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:text-primary-foreground > *)[data-slot="bubble-content"] {
    color: var(--primary-foreground);
  }

  :is(.\*\:data-\[slot\=bubble-content\]\:text-secondary-foreground > *)[data-slot="bubble-content"] {
    color: var(--foreground);
  }

  :is(.group-data-\[orientation\=vertical\]\/attachment\:\*\:data-\[slot\=spinner\]\:size-6\!:is(:where(.group\/attachment)[data-orientation="vertical"] *) > *)[data-slot="spinner"] {
    width: calc(var(--spacing) * 6) !important;
    height: calc(var(--spacing) * 6) !important;
  }

  .data-\[state\=error\]\:border-destructive\/30[data-state="error"] {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .data-\[state\=error\]\:border-destructive\/30[data-state="error"] {
      border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    }
  }

  .data-\[state\=idle\]\:border-dashed[data-state="idle"] {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .data-\[variant\=ghost\]\:max-w-full[data-variant="ghost"] {
    max-width: 100%;
  }

  @media not all and (min-width: 860px) {
    .max-\[860px\]\:px-1 {
      padding-inline: var(--spacing);
    }
  }

  @media (min-width: 48rem) {
    .md\:text-pretty {
      text-wrap: pretty;
    }
  }

  .rtl\:translate-x-1\/2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  @media (prefers-color-scheme: dark) {
    :is(.dark\:\*\:data-\[slot\=bubble-content\]\:bg-\[oklch\(from_var\(--primary\)_0\.3_calc\(c\*0\.4\)_h\)\] > *)[data-slot="bubble-content"] {
      background-color: oklch(from var(--primary) .3 calc(c * .4) h);
    }

    :is(.dark\:\*\:data-\[slot\=bubble-content\]\:bg-destructive\/20 > *)[data-slot="bubble-content"] {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      :is(.dark\:\*\:data-\[slot\=bubble-content\]\:bg-destructive\/20 > *)[data-slot="bubble-content"] {
        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
      }
    }
  }

  .\[\&_a\]\:underline a {
    text-decoration-line: underline;
  }

  .\[\&_a\]\:underline-offset-3 a {
    text-underline-offset: 3px;
  }

  @media (hover: hover) {
    .\[\&_a\]\:hover\:text-foreground a:hover {
      color: var(--foreground);
    }
  }

  .\[\&_p\:not\(\:last-child\)\]\:mb-4 p:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .data-\[direction\=start\]\:\[\&_svg\]\:rotate-180[data-direction="start"] svg {
    rotate: 180deg;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .group-data-\[orientation\=vertical\]\/attachment\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6:is(:where(.group\/attachment)[data-orientation="vertical"] *) svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .group-data-\[size\=xs\]\/attachment\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5:is(:where(.group\/attachment)[data-size="xs"] *) svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[a\]\:underline:is(a) {
    text-decoration-line: underline;
  }

  .\[a\]\:underline-offset-3:is(a) {
    text-underline-offset: 3px;
  }

  :is(.\*\:\[a\]\:underline > *):is(a) {
    text-decoration-line: underline;
  }

  :is(.\*\:\[a\]\:underline-offset-3 > *):is(a) {
    text-underline-offset: 3px;
  }

  @media (hover: hover) {
    .\[a\]\:hover\:text-foreground:is(a):hover, :is(.\*\:\[a\]\:hover\:text-foreground > *):is(a):hover {
      color: var(--foreground);
    }
  }

  .\[button\]\:text-left:is(button) {
    text-align: left;
  }

  .\[button\,a\]\:transition-colors:is(button, a) {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .\[button\,a\]\:outline-none:is(button, a) {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[button\,a\]\:focus-visible\:border-ring:is(button, a):focus-visible {
    border-color: var(--ring);
  }

  .\[button\,a\]\:focus-visible\:ring-3:is(button, a):focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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);
  }

  .\[button\,a\]\:focus-visible\:ring-ring\/50:is(button, a):focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[button\,a\]\:focus-visible\:ring-ring\/50:is(button, a):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  :is(.\*\:\[img\]\:aspect-square > *):is(img) {
    aspect-ratio: 1;
  }

  :is(.\*\:\[img\]\:w-full > *):is(img) {
    width: 100%;
  }

  :is(.\*\:\[img\]\:object-cover > *):is(img) {
    object-fit: cover;
  }

  :is(.\*\:\[svg\]\:row-span-2 > *):is(svg) {
    grid-row: span 2 / span 2;
  }

  :is(.\*\:\[svg\]\:translate-y-0\.5 > *):is(svg) {
    --tw-translate-y: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  :is(.\*\:\[svg\]\:text-current > *):is(svg) {
    color: currentColor;
  }

  :is(.\*\:\[svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 > *):is(svg:not([class*="size-"])) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&\>\*\:first-child\]\:mt-auto > :first-child {
    margin-top: auto;
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--muted\)\,var\(--foreground\)_5\%\)\] > [data-slot="bubble-content"]:is(button, a):hover {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--muted\)\,var\(--foreground\)_5\%\)\] > [data-slot="bubble-content"]:is(button, a):hover {
      background-color: color-mix(in oklch,var(--muted),var(--foreground) 5%);
    }
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\] > [data-slot="bubble-content"]:is(button, a):hover {
    background-color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\] > [data-slot="bubble-content"]:is(button, a):hover {
      background-color: color-mix(in oklch,var(--secondary),var(--foreground) 5%);
    }
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[oklch\(from_var\(--primary\)_0\.88_calc\(c\*0\.5\)_h\)\] > [data-slot="bubble-content"]:is(button, a):hover {
    background-color: oklch(from var(--primary) .88 calc(c * .5) h);
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/20 > [data-slot="bubble-content"]:is(button, a):hover {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/20 > [data-slot="bubble-content"]:is(button, a):hover {
      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-muted > [data-slot="bubble-content"]:is(button, a):hover {
    background-color: var(--muted);
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-primary\/80 > [data-slot="bubble-content"]:is(button, a):hover {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-primary\/80 > [data-slot="bubble-content"]:is(button, a):hover {
      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
    }
  }

  .\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:text-foreground > [data-slot="bubble-content"]:is(button, a):hover {
    color: var(--foreground);
  }

  @media (prefers-color-scheme: dark) {
    .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-\[oklch\(from_var\(--primary\)_0\.35_calc\(c\*0\.5\)_h\)\] > [data-slot="bubble-content"]:is(button, a):hover {
      background-color: oklch(from var(--primary) .35 calc(c * .5) h);
    }

    .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/30 > [data-slot="bubble-content"]:is(button, a):hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-destructive\/30 > [data-slot="bubble-content"]:is(button, a):hover {
        background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
      }
    }

    .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-input\/30 > [data-slot="bubble-content"]:is(button, a):hover {
      background-color: var(--border);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-input\/30 > [data-slot="bubble-content"]:is(button, a):hover {
        background-color: color-mix(in oklab, var(--border) 30%, transparent);
      }
    }

    .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-muted\/50 > [data-slot="bubble-content"]:is(button, a):hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:\[\&\>\[data-slot\=bubble-content\]\:is\(button\,a\)\:hover\]\:bg-muted\/50 > [data-slot="bubble-content"]:is(button, a):hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-t {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-b {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-s {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-e {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-mask {
  syntax: "*";
  inherits: false
}

@property --shimmer-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 20deg;
}

@property --shimmer-image {
  syntax: "*";
  inherits: false
}

@property --shimmer-text-fill {
  syntax: "*";
  inherits: false
}

@media (prefers-reduced-motion: reduce) {
  .shimmer {
    -webkit-text-fill-color: currentColor;
    background-image: none;
    animation: none;
  }
}

:root {
  --background: #fbf8f1;
  --foreground: #26241f;
  --card: #fffdf8;
  --card-foreground: #26241f;
  --primary: #ae4f2c;
  --primary-foreground: #fffdf8;
  --secondary: #f4eee1;
  --muted: #ece3d2;
  --muted-foreground: #6e6656;
  --accent: #f1e1d5;
  --border: #d5c9b4;
  --ring: #ae4f2c57;
  --destructive: #b23a2e;
  --font-ui: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", ui-serif, "Iowan Old Style", Georgia, serif;
  --radius: .625rem;
}

@font-face {
  font-family: Fraunces;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Fraunces;
  src: url("/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --cream-50: #fbf8f1;
  --cream-100: #f4eee1;
  --cream-200: #ece3d2;
  --paper: #fffdf8;
  --taupe-200: #e3d9c7;
  --taupe-300: #d5c9b4;
  --taupe-400: #b7a98f;
  --ink-900: #26241f;
  --ink-700: #4a463e;
  --ink-500: #6e6656;
  --terracotta-700: #8c3d20;
  --terracotta-600: #ae4f2c;
  --terracotta-500: #c0623a;
  --terracotta-100: #f1e1d5;
  --dark-bg: #141310;
  --dark-surface: #1d1b17;
  --dark-surface-raised: #25231e;
  --dark-surface-sunken: #181613;
  --dark-border: #38342c;
  --dark-border-soft: #2c2923;
  --dark-border-strong: #4f4a3f;
  --dark-ink-100: #f3f0e8;
  --dark-ink-300: #cac4b7;
  --dark-ink-500: #938c7e;
  --dark-accent: #c0623a;
  --dark-accent-hover: #ae4f2c;
  --dark-accent-tint: #332018;
  --dark-green-400: #5ea874;
  --dark-green-300: #7cc391;
  --dark-green-900: #172d1f;
  --dark-amber-400: #d49539;
  --dark-amber-300: #e8b15d;
  --dark-amber-900: #33220a;
  --dark-red-400: #d4594c;
  --dark-red-300: #e87a6e;
  --dark-red-900: #351714;
  --dark-blue-400: #5c8cb5;
  --dark-blue-300: #7da8cc;
  --dark-blue-900: #142433;
  --green-600: #3f7d52;
  --green-700: #2f6b45;
  --green-100: #e4eee2;
  --amber-600: #b0741c;
  --amber-700: #8a5a12;
  --amber-100: #f6ecd6;
  --red-600: #b23a2e;
  --red-700: #9c3327;
  --red-100: #f6e1da;
  --blue-600: #3f6b8f;
  --blue-700: #345c7d;
  --blue-100: #dee7f0;
  --focus-ring: #ae4f2c57;
  --scrim: #26241f6b;
  --glass-shell: #fffdf8d1;
  --shadow-overlay: 0 4px 12px #26241f14, 0 1px 3px #26241f0f;
  --ring-recording: 0 0 0 0 #b23a2e47;
  --ring-recording-wide: 0 0 0 6px #b23a2e0f;
  --ring-accent: 0 0 0 0 #ae4f2c4d;
  --ring-accent-wide: 0 0 0 6px #ae4f2c17;
  --color-canvas: var(--cream-50);
  --color-surface: var(--cream-100);
  --color-surface-raised: var(--paper);
  --color-surface-sunken: var(--cream-200);
  --color-text: var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-muted: var(--ink-500);
  --color-border: var(--taupe-300);
  --color-border-soft: var(--taupe-200);
  --color-border-strong: var(--taupe-400);
  --color-action-primary: var(--terracotta-600);
  --color-action-primary-hover: var(--terracotta-700);
  --color-action-primary-text: var(--paper);
  --color-accent: var(--terracotta-600);
  --color-accent-tint: var(--terracotta-100);
  --color-focus: var(--terracotta-600);
  --color-status-in-range: var(--green-600);
  --color-status-in-range-tint: var(--green-100);
  --color-status-in-range-text: var(--green-700);
  --color-status-borderline: var(--amber-600);
  --color-status-borderline-tint: var(--amber-100);
  --color-status-borderline-text: var(--amber-700);
  --color-status-high: var(--red-600);
  --color-status-high-tint: var(--red-100);
  --color-status-high-text: var(--red-700);
  --color-status-low: var(--blue-600);
  --color-status-low-tint: var(--blue-100);
  --color-status-low-text: var(--blue-700);
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --gap-3xs: var(--space-0-5);
  --gap-2xs: var(--space-1);
  --gap-xs: var(--space-1-5);
  --gap-sm: var(--space-2);
  --gap-md: var(--space-3);
  --gap-lg: var(--space-4);
  --gap-xl: var(--space-5);
  --gap-2xl: var(--space-6);
  --gap-3xl: var(--space-8);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --btn-radius: var(--radius-md);
  --btn-height-sm: 28px;
  --btn-height-md: 32px;
  --btn-height-lg: 36px;
  --btn-pad-sm: 12px;
  --btn-pad-md: 16px;
  --btn-pad-lg: 20px;
  --card-radius: var(--radius-lg);
  --card-pad: var(--space-5);
  --card-gap: var(--gap-lg);
  --field-height-md: var(--btn-height-md);
  --field-pad-x: var(--space-2-5);
  --field-pad-y: var(--space-1);
  --field-radius: var(--radius-md);
  --pill-pad-x: var(--space-2-5);
  --pill-pad-y: var(--space-0-5);
  --row-pad-y: var(--space-3);
  --icon-btn-size: 36px;
  --icon-btn-size-sm: 32px;
  --icon-btn-hit: 44px;
  --icon-btn-radius: var(--radius-md);
  --chat-dot-loader-size: 16px;
  --bubble-radius: 16px 16px 5px 16px;
  --bubble-radius-agent: 5px 16px 16px 16px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 42px;
  --text-5xl: 54px;
  --text-6xl: 64px;
  --text-7xl: 92px;
  --text-prose: 16px;
  --prose-h1: 24px;
  --prose-h2: 19px;
  --prose-h3: 16px;
  --leading-tight: 1.22;
  --leading-snug: 1.4;
  --leading-prose: 1.625;
  --measure-prose: 48rem;
  --measure-bubble: 46ch;
  --measure-card: 52ch;
  --weight-display: 480;
  --weight-medium: 560;
  --weight-strong: 600;
  --page-pad-x: clamp(var(--space-5), 4vw, var(--space-10));
  --page-max-public: 1200px;
  --page-max-dashboard: 1120px;
  --page-max-app: 1040px;
  --page-max-list: 1120px;
  --page-max-reading: 760px;
  --section-gap-y: clamp(var(--space-16), 8vw, 96px);
  --rail-w: 260px;
  --rail-w-collapsed: 52px;
  --topbar-h: var(--space-14);
  --shell-main-pad-top: var(--space-6);
  --shell-main-pad-bottom: var(--space-14);
  --shell-main-pad-x: clamp(var(--space-5), 4vw, var(--space-10));
  --font-display: "Fraunces", ui-serif, "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --motion-out: cubic-bezier(.16, 1, .3, 1);
  --motion-spring: cubic-bezier(.32, .72, 0, 1);
}

*, :before, :after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-canvas);
  min-height: 100dvh;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  margin: 0;
  line-height: 1.55;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0;
  color: var(--color-text);
  text-wrap: balance;
  margin: 0;
  font-weight: 680;
  line-height: 1.02;
}

p {
  margin: 0;
}

a {
  color: var(--color-action-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-action-primary-hover);
}

button, input, textarea, select {
  font-family: inherit;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.ui-stat-value, .ui-ring-value, .ui-range-bar-scale {
  font-variant-numeric: tabular-nums;
}

.center-screen {
  min-height: 100dvh;
  padding: var(--space-8) var(--space-5);
  color: var(--color-text-secondary);
  place-items: center;
  display: grid;
}

.brand-loading {
  justify-items: center;
  gap: var(--gap-md);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: 620;
  display: inline-grid;
}

.brand-loading .brand-mark-svg {
  width: 54px;
  height: 54px;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-loading .brand-mark-svg {
    animation: brand-load-breathe 1.6s var(--motion-out) infinite;
  }
}

@keyframes brand-load-breathe {
  50% {
    transform: translateY(-2px);
  }
}

.placeholder {
  width: min(100%, 480px);
  margin: var(--space-12) auto;
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface-raised);
}

.placeholder h1 {
  margin: 0 0 var(--space-2);
}

.ui-btn {
  justify-content: center;
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--btn-height-md);
  padding: 0 var(--btn-pad-md);
  border-radius: var(--btn-radius);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background-color .22s var(--motion-out), border-color .22s var(--motion-out), color .22s var(--motion-out);
  border: 1px solid #0000;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.ui-btn--primary {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.ui-btn--primary:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
}

.ui-btn--primary:active {
  background: var(--color-action-primary);
}

.ui-btn--secondary {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text);
}

.ui-btn--secondary:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.ui-btn--secondary:active {
  background: var(--color-surface-sunken);
  border-color: var(--color-text);
}

.ui-btn--ghost {
  color: var(--color-action-primary);
  background: none;
}

.ui-btn--ghost:hover {
  background: var(--color-accent-tint);
}

.ui-btn--ghost:active {
  background: var(--color-accent-tint);
  border-color: var(--color-action-primary);
}

.ui-btn--danger {
  background: var(--color-surface-raised);
  border-color: var(--color-status-high);
  color: var(--color-status-high-text);
}

.ui-btn--danger:hover {
  background: var(--color-status-high-tint);
  color: var(--color-status-high-text);
}

.ui-btn--danger:active {
  background: var(--color-status-high-tint);
  border-color: var(--color-status-high-text);
}

.ui-btn--danger.is-solid {
  background: var(--color-status-high);
  border-color: var(--color-status-high);
  color: var(--color-action-primary-text);
}

.ui-btn--danger.is-solid:hover {
  background: var(--color-status-high-text);
  border-color: var(--color-status-high-text);
  color: var(--color-action-primary-text);
}

.ui-btn--danger.is-solid:active {
  background: var(--color-status-high);
  border-color: var(--color-status-high);
  color: var(--color-action-primary-text);
}

.ui-btn--sm {
  min-height: var(--btn-height-sm);
  padding: 0 var(--btn-pad-sm);
  font-size: var(--text-sm);
}

.ui-btn:disabled {
  opacity: .55;
  cursor: default;
}

.ui-spinner {
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  width: 12px;
  height: 12px;
  animation: ui-spin 1s var(--motion-out) infinite;
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-spinner {
    animation: none;
  }
}

@keyframes ui-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .auth-card, .pub-hero-copy, .pub-hero-visual, .pub-proof-row, .pub-bento-section, .pub-flow-section, .pub-loop-section, .pub-privacy-section, .pub-final-cta, .legal-document, .dash > *, .chat, .bm > *, .bm-detail > *, .intg > *, .prod > *, .rad > *, .rad-detail > *, .proto > *, .set > *, .invite > * {
    animation: ui-rise .68s var(--motion-out) both;
  }

  .pub-hero-visual, .pub-proof-row, .dash > :nth-child(2), .bm > :nth-child(2), .intg > :nth-child(2), .prod > :nth-child(2), .rad > :nth-child(2), .proto > :nth-child(2), .set > :nth-child(2) {
    animation-delay: 70ms;
  }

  .dash > :nth-child(3), .bm > :nth-child(3), .intg > :nth-child(3), .prod > :nth-child(3), .rad > :nth-child(3), .proto > :nth-child(3), .set > :nth-child(3) {
    animation-delay: .12s;
  }
}

.ui-card {
  gap: var(--card-gap);
  padding: var(--card-pad);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  background: var(--color-surface-raised);
  flex-direction: column;
  display: flex;
}

.ui-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  display: inline-block;
}

.ui-section-header {
  gap: var(--gap-sm);
  display: grid;
}

.ui-section-header h1, .ui-section-header h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  letter-spacing: -.01em;
}

.ui-accent {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 620;
}

.ui-section-header p {
  max-width: 60ch;
  color: var(--color-text-secondary);
}

.page-head {
  margin-bottom: var(--space-1);
}

.ui-status-pill {
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  white-space: nowrap;
  font-weight: 560;
  line-height: 1.4;
  display: inline-flex;
}

.ui-status-pill:before {
  content: "";
  background: currentColor;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.ui-status-pill--in-range {
  background: var(--color-status-in-range-tint);
  color: var(--color-status-in-range-text);
}

.ui-status-pill--borderline {
  background: var(--color-status-borderline-tint);
  color: var(--color-status-borderline-text);
}

.ui-status-pill--high {
  background: var(--color-status-high-tint);
  color: var(--color-status-high-text);
}

.ui-status-pill--low {
  background: var(--color-status-low-tint);
  color: var(--color-status-low-text);
}

.ui-status-pill--neutral {
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
}

.ui-range-bar {
  gap: var(--gap-sm);
  display: grid;
}

.ui-range-bar-track {
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  height: 8px;
  position: relative;
}

.ui-range-bar-band {
  border-radius: var(--radius-pill);
  background: var(--color-status-in-range-tint);
  position: absolute;
  top: 0;
  bottom: 0;
}

.ui-range-bar-dot {
  border: 2px solid var(--color-surface-raised);
  box-sizing: border-box;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.ui-range-bar-dot--in-range {
  background: var(--color-status-in-range);
}

.ui-range-bar-dot--low {
  background: var(--color-status-low);
}

.ui-range-bar-dot--high {
  background: var(--color-status-high);
}

.ui-range-bar-scale {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  justify-content: space-between;
  display: flex;
}

.ui-ring {
  width: 128px;
  height: 128px;
  position: relative;
}

.ui-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ui-ring-track {
  stroke: var(--color-surface-sunken);
}

.ui-ring-fill {
  transition: stroke-dashoffset .6s;
}

.ui-ring-fill--in-range {
  stroke: var(--color-status-in-range);
}

.ui-ring-fill--borderline {
  stroke: var(--color-status-borderline);
}

.ui-ring-fill--low {
  stroke: var(--color-status-low);
}

.ui-ring-fill--high {
  stroke: var(--color-status-high);
}

.ui-ring-fill--accent {
  stroke: var(--color-action-primary);
}

.ui-ring-center {
  text-align: center;
  place-content: center;
  justify-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.ui-ring-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1;
}

.ui-ring-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ui-ring-label {
  margin-top: var(--space-0-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ui-stat {
  gap: var(--gap-2xs);
  display: grid;
}

.ui-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.05;
}

.ui-stat-value small {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-weight: 500;
}

.ui-stat-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.ui-stat-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ui-empty {
  align-items: flex-start;
  gap: var(--gap-md);
  padding: var(--space-5) 0;
  flex-direction: column;
  display: flex;
}

.ui-empty--center {
  text-align: center;
  align-items: center;
}

.ui-empty-header {
  align-items: inherit;
  gap: var(--gap-sm);
  flex-direction: column;
  display: flex;
}

.ui-empty-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-0-5);
  background: var(--color-accent-tint);
  color: var(--color-action-primary);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.ui-empty-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: 500;
}

.ui-empty-text {
  max-width: 46ch;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.ui-empty-content {
  align-items: inherit;
  gap: var(--gap-sm);
  flex-direction: column;
  display: flex;
}

.ui-sparkline {
  width: 100%;
  height: auto;
  display: block;
}

.ui-sparkline-grid {
  stroke: var(--color-border-soft);
  stroke-width: 1px;
}

.ui-sparkline-area {
  fill: var(--color-accent-tint);
  opacity: .5;
}

.ui-sparkline-line {
  fill: none;
  stroke: var(--color-action-primary);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1px;
  transition: stroke-dashoffset .9s var(--motion-out);
}

.ui-sparkline-line.is-drawn {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ui-sparkline-line {
    stroke-dashoffset: 0;
    transition: none;
  }
}

.ui-sparkline-dot {
  fill: var(--color-action-primary);
}

.ui-dot-loader {
  width: var(--chat-dot-loader-size);
  height: var(--chat-dot-loader-size);
  color: currentColor;
  flex: none;
  display: block;
  overflow: visible;
}

.ui-dot-loader-dot {
  fill: currentColor;
}

.ui-dot-loader-dot--base {
  opacity: .07;
}

.ui-dot-loader-dot--lit {
  opacity: 0;
}

.ui-dot-loader[data-name="thinking"] {
  --ui-dot-kf: ui-dot-synapse;
}

.ui-dot-loader[data-name="stream"] {
  --ui-dot-kf: ui-dot-trail;
}

.ui-dot-loader[data-name="listening"] {
  --ui-dot-kf: ui-dot-pulse;
}

.ui-dot-loader[data-name="radar"] {
  --ui-dot-kf: ui-dot-trail;
  --ui-dot-ease: linear;
}

.ui-dot-loader[data-name="verify"] {
  --ui-dot-kf: ui-dot-resolve;
}

.ui-dot-loader[data-name="beacon"] {
  --ui-dot-kf: ui-dot-beacon;
}

.ui-dot-loader[data-name="compile"] {
  --ui-dot-kf: ui-dot-fill;
}

.ui-dot-loader[data-name="heartbeat"] {
  --ui-dot-kf: ui-dot-heart;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-dot-loader-dot--lit {
    animation-name: var(--ui-dot-kf);
    animation-duration: var(--ui-dot-duration);
    animation-timing-function: var(--ui-dot-ease, var(--motion-out));
    animation-iteration-count: var(--ui-dot-iter);
    animation-fill-mode: both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-dot-loader-dot--lit {
    opacity: .45;
    animation: none;
  }
}

@keyframes ui-dot-synapse {
  0%, 30% {
    opacity: .05;
  }

  40% {
    opacity: 1;
  }

  55% {
    opacity: .1;
  }

  100% {
    opacity: .05;
  }
}

@keyframes ui-dot-trail {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  26% {
    opacity: .08;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ui-dot-pulse {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  36% {
    opacity: .05;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ui-dot-resolve {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  30%, 80% {
    opacity: .05;
  }

  100% {
    opacity: .6;
  }
}

@keyframes ui-dot-beacon {
  0%, 40%, 100% {
    opacity: .12;
  }

  14% {
    opacity: 1;
  }
}

@keyframes ui-dot-fill {
  0% {
    opacity: .08;
  }

  14% {
    opacity: 1;
  }

  72% {
    opacity: .95;
  }

  100% {
    opacity: .08;
  }
}

@keyframes ui-dot-heart {
  0%, 70%, 100% {
    opacity: .18;
  }

  6% {
    opacity: .95;
  }

  14% {
    opacity: .3;
  }

  22% {
    opacity: 1;
  }

  34% {
    opacity: .2;
  }
}

.ui-icon {
  color: currentColor;
  flex: none;
  width: 20px;
  height: 20px;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.ui-prose {
  max-width: var(--measure-prose);
  font-family: var(--font-ui);
  font-size: var(--text-prose);
  line-height: var(--leading-prose);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.ui-prose > * + * {
  margin-top: .75em;
}

.ui-prose > :first-child {
  margin-top: 0;
}

.ui-prose h1, .ui-prose h2, .ui-prose h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  line-height: var(--leading-tight);
  letter-spacing: -.005em;
  color: var(--color-text);
  margin: 1.5em 0 0;
}

.ui-prose h1 {
  font-size: var(--prose-h1);
  font-variation-settings: "opsz" 24;
}

.ui-prose h2 {
  font-size: var(--prose-h2);
  font-variation-settings: "opsz" 19;
}

.ui-prose h3 {
  font-family: var(--font-ui);
  font-size: var(--prose-h3);
  font-weight: var(--weight-strong);
  letter-spacing: 0;
}

.ui-prose strong {
  font-weight: var(--weight-strong);
  color: var(--color-text);
}

.ui-prose em {
  font-style: italic;
}

.ui-prose a {
  color: var(--color-accent);
  text-underline-offset: 2px;
}

.ui-prose ul, .ui-prose ol {
  padding-left: 1.25em;
}

.ui-prose li + li {
  margin-top: .2em;
}

.ui-prose li::marker {
  color: var(--color-text-muted);
}

.ui-prose code {
  font-family: var(--font-mono);
  color: var(--color-text);
  font-size: .88em;
}

.ui-prose blockquote {
  padding-left: var(--space-3-5);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  margin: 1.2em 0;
}

.ui-prose hr {
  border: 0;
  border-top: 1px solid var(--color-border-soft);
  margin: 1.6em 0;
}

.ui-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-base);
}

.ui-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: var(--color-surface-sunken);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ui-table th:first-child {
  border-top-left-radius: var(--radius-md);
}

.ui-table th:last-child {
  border-top-right-radius: var(--radius-md);
}

.ui-table td {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  vertical-align: top;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.ui-table td strong, .ui-table-key {
  font-weight: var(--weight-strong);
  color: var(--color-text);
}

.ui-table-num {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-strong);
  color: var(--color-text);
}

.ui-table-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
  display: block;
}

.ui-table--verdict td:last-child {
  width: 150px;
}

.ui-msg {
  gap: var(--gap-2xs);
  display: grid;
}

.ui-msg--user {
  justify-items: end;
}

.ui-bubble {
  max-width: var(--measure-bubble);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--bubble-radius-agent);
  background: var(--color-surface);
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: 1.5;
}

.ui-bubble--user {
  border-radius: var(--bubble-radius);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.ui-msg-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ui-meta-chip {
  align-items: center;
  gap: var(--gap-2xs);
  width: fit-content;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
}

.ui-meta-chip:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.ui-meta-chip .ui-icon {
  width: 14px;
  height: 14px;
}

.ui-icon-btn {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: var(--icon-btn-radius);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color .16s var(--motion-out), color .16s var(--motion-out);
  background: none;
  border: 0;
  flex-shrink: 0;
  place-items: center;
  padding: 0;
  display: grid;
  position: relative;
}

.ui-icon-btn:after {
  content: "";
  width: var(--icon-btn-hit);
  height: var(--icon-btn-hit);
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.ui-icon-btn:hover:not(:disabled) {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.ui-icon-btn--outline {
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
}

.ui-icon-btn--primary {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.ui-icon-btn--primary:hover:not(:disabled) {
  background: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
}

.ui-icon-btn--sm {
  width: var(--icon-btn-size-sm);
  height: var(--icon-btn-size-sm);
}

.ui-icon-btn[aria-pressed="true"], .ui-icon-btn--active {
  background: var(--color-accent-tint);
  color: var(--color-action-primary);
}

.ui-icon-btn:disabled {
  opacity: .45;
  cursor: default;
}

.ui-composer {
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  max-width: var(--measure-prose);
  padding: var(--space-1-5) var(--space-2-5) var(--space-1-5) var(--space-3-5);
  border: var(--focus-width) solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  transition: border-color .16s var(--motion-out);
  display: flex;
}

.ui-composer:focus-within {
  border-color: var(--color-focus);
  outline: none;
}

.ui-composer:focus-within :focus-visible {
  outline: none;
}

.ui-composer textarea, .ui-composer input {
  resize: none;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-text);
  background: none;
  border: 0;
  flex: 1;
  padding: 0;
  line-height: 1.5;
}

.ui-composer textarea::placeholder, .ui-composer input::placeholder {
  color: var(--color-text-muted);
}

.ui-composer-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  display: block;
}

.ui-list-row {
  gap: var(--gap-3xs);
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border-left: 2px solid #0000;
  text-decoration: none;
  display: grid;
}

.ui-list-row:hover {
  background: var(--color-surface-sunken);
}

.ui-list-row-title {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ui-list-row-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ui-list-row[aria-current="true"], .ui-list-row--active {
  background: var(--color-accent-tint);
  border-left-color: var(--color-accent);
}

.ui-list-row--active .ui-list-row-title, .ui-list-row[aria-current="true"] .ui-list-row-title {
  font-weight: var(--weight-medium);
}

.ui-list-group {
  padding: var(--space-2) var(--space-2-5) var(--space-0-5);
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.shell {
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  background: var(--color-canvas);
  min-height: 100dvh;
  display: grid;
}

.shell[data-rail="collapsed"] {
  --rail-w: var(--rail-w-collapsed);
}

.shell-topbar {
  display: none;
}

.brand {
  align-items: center;
  gap: var(--gap-md);
  padding: var(--space-5) var(--space-4) var(--space-3-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0;
  color: var(--color-text);
  white-space: nowrap;
  font-weight: 620;
  display: flex;
}

.brand-mark-svg {
  flex: none;
  width: 38px;
  height: 38px;
  overflow: visible;
}

.brand-mark-paper {
  fill: var(--color-surface-raised);
  stroke: var(--color-border);
  stroke-width: 2px;
}

.brand-mark-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark-line--strong {
  stroke: var(--color-border);
  stroke-width: 3px;
}

.brand-mark-line--soft {
  stroke: var(--color-border-soft);
  stroke-width: 3px;
}

.brand-mark-fold {
  fill: var(--color-accent-tint);
  stroke: var(--color-border);
  stroke-width: 2px;
}

.brand-mark-letter {
  fill: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  dominant-baseline: auto;
  font-weight: 560;
}

.brand-mark-dot {
  fill: var(--color-accent);
}

.brand-word {
  line-height: 1;
}

.brand--mark-only {
  justify-content: center;
  padding: 0;
}

.shell-rail {
  z-index: 20;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border-soft);
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.shell-rail-head {
  align-items: center;
  gap: var(--gap-sm);
  padding-right: var(--space-2-5);
  flex: none;
  display: flex;
}

.shell-rail-head .brand {
  flex: 1;
  min-width: 0;
}

.shell-rail-collapse {
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color .16s var(--motion-out), color .16s var(--motion-out);
  background: none;
  border: 0;
  flex: none;
  place-items: center;
  display: grid;
}

.shell-rail-collapse:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.shell-rail-collapse .ui-icon {
  width: 18px;
  height: 18px;
}

.shell-scroll {
  min-height: 0;
  padding: 0 var(--space-1-5) var(--space-2);
  flex: auto;
  overflow-y: auto;
}

.shell-nav {
  gap: var(--gap-3xs);
  flex-direction: column;
  display: flex;
}

.shell-nav-kicker {
  padding: var(--space-1) var(--space-2-5) var(--space-1);
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 640;
  display: block;
}

.shell-nav-item {
  align-items: center;
  gap: var(--gap-sm);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-base);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s var(--motion-out), color .18s var(--motion-out);
  background: none;
  border: 0;
  font-weight: 560;
  display: flex;
  position: relative;
}

.shell-nav-item:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.shell-nav-item[data-status="active"], .shell-nav-item[aria-current="page"] {
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-weight: 620;
}

.shell-nav-item:disabled {
  cursor: default;
  opacity: .6;
}

.shell-nav-icon, .shell-nav-item > .ui-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.shell-nav-label {
  text-overflow: ellipsis;
  overflow: hidden;
}

.shell-more {
  position: relative;
}

.shell-more-menu {
  top: calc(100% + var(--space-1));
  left: var(--space-2);
  z-index: 40;
  gap: var(--gap-3xs);
  min-width: 176px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
  flex-direction: column;
  display: flex;
  position: absolute;
}

.shell-more-item {
  align-items: center;
  gap: var(--gap-sm);
  min-height: 34px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-base);
  white-space: nowrap;
  transition: background-color .14s var(--motion-out);
  font-weight: 560;
  display: flex;
}

.shell-more-item .ui-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}

.shell-more-item:hover, .shell-more-item:focus-visible {
  background: var(--color-surface-sunken);
}

.shell-more-item[aria-current="page"] {
  color: var(--color-accent);
}

.shell-recents {
  gap: var(--gap-3xs);
  margin-top: var(--space-4);
  flex-direction: column;
  display: flex;
}

.shell-recents-kicker {
  margin-top: var(--space-2);
}

.shell-rail-foot {
  gap: var(--gap-xs);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  flex-direction: column;
  flex: none;
  display: flex;
}

.shell-theme-toggle {
  gap: var(--gap-3xs);
  padding: var(--space-0-5);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.shell-theme-btn {
  justify-content: center;
  align-items: center;
  gap: var(--gap-xs);
  min-height: 28px;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background-color .16s var(--motion-out), color .16s var(--motion-out);
  background: none;
  border: 0;
  font-weight: 560;
  display: inline-flex;
}

.shell-theme-btn:hover {
  color: var(--color-text);
}

.shell-theme-btn[aria-checked="true"], .shell-theme-btn--active {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.shell-theme-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.shell-tinybar-theme {
  z-index: 1;
  position: relative;
}

.shell-user {
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--space-1-5);
  padding: var(--space-1-5);
  display: flex;
}

.shell-user-avatar {
  background: var(--color-surface-sunken);
  width: 34px;
  height: 34px;
  color: var(--color-action-primary);
  font-size: var(--text-base);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-weight: 620;
  display: grid;
}

.shell-user-meta {
  gap: var(--space-px);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.shell-user-meta strong {
  font-size: var(--text-base);
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
  overflow: hidden;
}

.shell-user-meta span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.shell-user-signout {
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color .18s var(--motion-out), color .18s var(--motion-out);
  background: none;
  border: 0;
  flex: none;
  place-items: center;
  margin-left: auto;
  display: grid;
}

.shell-user-signout:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.shell-user-signout .ui-icon {
  width: 18px;
  height: 18px;
}

.shell-scrim {
  display: none;
}

.shell-main {
  min-width: 0;
  padding: var(--shell-main-pad-top) var(--shell-main-pad-x) var(--shell-main-pad-bottom);
}

.shell-main > * {
  margin-inline: auto;
}

.shell-surface-toggle {
  width: 236px;
  height: 36px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  -webkit-user-select: none;
  user-select: none;
  grid-template-columns: 1fr 1fr;
  display: grid;
  position: relative;
}

.shell-surface-track {
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  position: absolute;
  inset: 0;
}

.shell-surface-thumb {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  width: 50%;
  transition: transform .24s var(--motion-spring);
  position: absolute;
  top: 0;
  bottom: 0;
}

.shell-surface-thumb[data-at="dashboard"] {
  transform: translateX(0);
}

.shell-surface-thumb[data-at="chat"] {
  transform: translateX(100%);
}

.shell-surface-option {
  z-index: 1;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
  transition: color .2s var(--motion-out);
  background: none;
  border: 0;
  place-items: center;
  font-weight: 560;
  display: grid;
  position: relative;
}

.shell-surface-option[aria-checked="true"] {
  color: var(--color-text);
  font-weight: 620;
}

@media (prefers-reduced-motion: reduce) {
  .shell-surface-thumb {
    transition: none;
  }
}

.shell-tinybar {
  display: none;
}

@media (min-width: 821px) {
  .shell[data-rail="collapsed"] .shell-rail {
    display: none;
  }

  .shell[data-rail="collapsed"] .shell-tinybar {
    z-index: 20;
    align-items: center;
    gap: var(--gap-sm);
    height: 100dvh;
    padding: var(--space-2) 0 var(--space-3);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-soft);
    flex-direction: column;
    display: flex;
    position: sticky;
    top: 0;
  }

  .shell-tinybar-expand {
    z-index: 0;
    cursor: e-resize;
    background: none;
    border: 0;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .shell-tinybar-expand:hover {
    background: var(--color-surface-sunken);
  }

  .shell-tinybar-items {
    z-index: 1;
    align-items: center;
    gap: var(--gap-2xs);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .shell-tinybar .brand {
    padding: 0 0 var(--space-2);
  }

  .shell-tinybar .brand-mark-svg {
    width: 28px;
    height: 28px;
  }

  .shell-tinybar-btn {
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    transition: background-color .16s var(--motion-out), color .16s var(--motion-out);
    place-items: center;
    display: grid;
  }

  .shell-tinybar-btn:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
  }

  .shell-tinybar-btn[aria-current="page"] {
    background: var(--color-accent-tint);
    color: var(--color-accent);
  }

  .shell-tinybar-btn .ui-icon {
    width: 19px;
    height: 19px;
  }

  .shell-tinybar .shell-user-avatar {
    z-index: 1;
    width: 28px;
    height: 28px;
    font-size: var(--text-sm);
    margin-top: auto;
    position: relative;
  }
}

@media (max-width: 820px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-topbar {
    z-index: 30;
    align-items: center;
    gap: var(--gap-md);
    height: var(--topbar-h);
    padding: 0 var(--space-3-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    position: fixed;
    inset: 0 0 auto;
  }

  .shell-topbar .brand {
    padding: 0;
  }

  .shell-topbar-menu {
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    color: var(--color-text);
    cursor: pointer;
    background: none;
    border: 0;
    flex: none;
    place-items: center;
    display: grid;
  }

  .shell-topbar-menu:hover {
    background: var(--color-surface-sunken);
  }

  .shell-rail {
    z-index: 40;
    width: min(300px, 84vw);
    box-shadow: var(--shadow-overlay);
    transition: transform .25s var(--motion-out);
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
  }

  .shell[data-drawer="open"] .shell-rail {
    transform: translateX(0);
  }

  .shell-rail .brand {
    padding-top: var(--space-4);
  }

  .shell-rail-collapse, .shell-tinybar {
    display: none;
  }

  .shell-scrim {
    z-index: 35;
    background: var(--scrim);
    cursor: pointer;
    border: 0;
    padding: 0;
    display: block;
    position: fixed;
    inset: 0;
  }

  .shell-main {
    --shell-main-pad-top: calc(var(--topbar-h) + 18px);
    --shell-main-pad-bottom: 44px;
    --shell-main-pad-x: 18px;
  }
}

@media (max-width: 520px) {
  .shell-main {
    --shell-main-pad-x: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-rail {
    transition: none;
  }
}

.auth-card {
  width: min(100%, 400px);
  padding: var(--space-8);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
}

.auth-card .brand {
  margin-bottom: var(--space-1-5);
  font-size: var(--text-2xl);
  padding: 0;
}

.auth-card .brand-mark-svg {
  width: 42px;
  height: 42px;
}

.auth-card h1 {
  margin: var(--space-1-5) 0 var(--space-1);
  font-size: var(--text-3xl);
  font-weight: 740;
  line-height: 1.1;
}

.auth-card .sub {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}

.auth-form {
  gap: var(--gap-lg);
  display: grid;
}

.auth-form label {
  gap: var(--gap-xs);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  font-weight: 560;
  display: grid;
}

.auth-form input {
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-md);
}

.auth-form input:focus {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-color: var(--color-action-primary);
}

.auth-form input[readonly] {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.auth-password-field {
  display: grid;
  position: relative;
}

.auth-password-field input {
  width: 100%;
  padding-right: var(--icon-btn-size);
}

.auth-password-toggle {
  top: 50%;
  right: var(--space-0-5);
  position: absolute;
  transform: translateY(-50%);
}

.auth-field-hint {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-form button[type="submit"] {
  height: 46px;
  margin-top: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  font: inherit;
  cursor: pointer;
  transition: background-color .22s var(--motion-out);
  border: 0;
  font-weight: 680;
}

.auth-form button[type="submit"]:hover {
  background: var(--color-action-primary-hover);
}

.auth-form button[type="submit"]:active {
  background: var(--color-action-primary);
}

.auth-form button[type="submit"]:disabled {
  opacity: .6;
  cursor: default;
}

.auth-error {
  color: var(--color-status-high-text);
  font-size: var(--text-base);
  margin: 0;
}

.auth-notice {
  color: var(--color-status-normal-text);
  font-size: var(--text-base);
  margin: 0;
}

.auth-forgot {
  font-size: var(--text-sm);
  text-align: right;
  margin: -4px 0 0;
}

.auth-divider {
  align-items: center;
  gap: var(--gap-md);
  margin: var(--space-5) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  display: flex;
}

.auth-divider:before, .auth-divider:after {
  content: "";
  background: var(--color-border-soft);
  flex: 1;
  height: 1px;
}

.auth-social-button {
  justify-content: center;
  align-items: center;
  gap: var(--gap-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  width: 100%;
  height: 46px;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: background-color .16s var(--motion-out);
  font-weight: 560;
  display: flex;
}

.auth-social-button:hover:not(:disabled) {
  background: var(--color-surface-sunken);
}

.auth-social-button:active:not(:disabled) {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
}

.auth-social-button:disabled {
  opacity: .6;
  cursor: default;
}

.auth-toggle {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.link-button {
  color: var(--color-action-primary);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 560;
}

.link-button:hover {
  color: var(--color-action-primary-hover);
  text-decoration: underline;
}

.bm, .intg, .prod, .rad, .proto, .set {
  width: min(100%, var(--page-max-app));
  max-width: var(--page-max-app);
}

.rad-header h1 {
  font-family: var(--font-display);
  letter-spacing: 0;
  color: var(--color-text);
  font-weight: 500;
}

.rad-header-sub {
  color: var(--color-text-muted);
}

.prod-input, .prod-textarea, .proto-note, .set-field input, .set-input, .rad-field input, .rad-field select, .rad-field textarea {
  min-height: var(--field-height-md);
  padding: var(--field-pad-y) var(--field-pad-x);
  border-color: var(--color-border);
  border-radius: var(--field-radius);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.prod-input:focus, .prod-textarea:focus, .proto-note:focus, .set-field input:focus, .set-input:focus, .rad-field input:focus, .rad-field select:focus, .rad-field textarea:focus {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-color: var(--color-action-primary);
}

.dash-card {
  gap: var(--card-gap);
  padding: var(--card-pad);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  background: var(--color-surface-raised);
  flex-direction: column;
  display: flex;
}

.dash-card-kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 600;
}

.dash-card-kicker + p {
  margin-top: calc(var(--gap-sm) - var(--card-gap));
}

.dash-cta {
  justify-content: center;
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--btn-height-md);
  padding: 0 var(--btn-pad-md);
  border-radius: var(--btn-radius);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background-color .22s var(--motion-out);
  border: 0;
  font-weight: 680;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.dash-cta:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
}

.dash-cta:active {
  background: var(--color-action-primary);
}

.dash-cta:disabled {
  opacity: .6;
  cursor: default;
}

.dash-empty {
  justify-items: start;
  gap: var(--gap-sm);
  padding: var(--space-3) 0;
  display: grid;
}

.dash-empty-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: 500;
}

.dash-empty-sub {
  max-width: 46ch;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.dash-skeleton {
  gap: var(--gap-lg);
  display: grid;
}

.dash-skeleton-grid {
  gap: var(--gap-lg);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

@media (max-width: 900px) {
  .dash-skeleton-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dash-skeleton-block {
  border-radius: var(--card-radius);
  background: linear-gradient(100deg, var(--color-surface) 30%, var(--color-surface-sunken) 50%, var(--color-surface) 70%);
  height: 120px;
  animation: dash-shimmer 1.4s var(--motion-out) infinite;
  background-size: 200% 100%;
}

.dash-skeleton-hero {
  height: 190px;
}

@keyframes dash-shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-skeleton-block {
    animation: none;
  }
}

.bm-chip, .prod-tab {
  border-radius: var(--radius-md);
}

.bm-chip.is-active, .prod-tab.is-active {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
}

.chat {
  height: calc(100svh - var(--shell-main-pad-top) - var(--space-4));
  min-height: 320px;
  margin: 0 calc(-1 * var(--shell-main-pad-x)) calc(var(--space-4) - var(--shell-main-pad-bottom));
  background: none;
  gap: 0;
  display: flex;
}

.shell-surface-toggle + .chat {
  height: calc(100svh - var(--shell-main-pad-top) - var(--space-4) - 36px - var(--space-4));
}

.chat-loading {
  color: var(--color-text-muted);
  padding: var(--space-2);
}

.chat > .brand-loading {
  margin: auto;
}

.chat-error-card {
  margin: var(--space-6);
  max-width: 420px;
}

.chat-tracks {
  gap: var(--gap-3xs);
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.chat-tracks-empty {
  padding: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.chat-track {
  border-radius: var(--radius-sm);
  transition: background-color .16s var(--motion-out);
  border-left: 2px solid #0000;
  display: grid;
  position: relative;
}

.chat-track.is-active {
  background: var(--color-accent-tint);
  border-left-color: var(--color-accent);
}

.chat-track-main {
  align-items: center;
  gap: var(--gap-sm);
  min-width: 0;
  padding: var(--space-2) var(--space-14) var(--space-2) var(--space-2-5);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: color .16s var(--motion-out);
  background: none;
  border: 0;
  display: flex;
}

.chat-track.is-active .chat-track-main {
  color: var(--color-action-primary);
  font-weight: var(--weight-medium);
}

.chat-track:hover:not(.is-active) {
  background: var(--color-surface-sunken);
}

.chat-track-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.chat-track-age {
  top: 50%;
  right: var(--space-3);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  transition: opacity .14s var(--motion-out);
  position: absolute;
  transform: translateY(-50%);
}

.chat-track-actions {
  top: 50%;
  right: var(--space-1-5);
  gap: var(--gap-3xs);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s var(--motion-out);
  display: flex;
  position: absolute;
  transform: translateY(-50%);
}

.chat-track:hover .chat-track-actions, .chat-track:focus-within .chat-track-actions {
  opacity: 1;
  pointer-events: auto;
}

.chat-track:hover .chat-track-age, .chat-track:focus-within .chat-track-age {
  opacity: 0;
}

@media (hover: none) {
  .chat-track-actions {
    opacity: 1;
    pointer-events: auto;
  }

  .chat-track-age {
    opacity: 0;
  }
}

.chat-track-action {
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color .14s var(--motion-out), color .14s var(--motion-out);
  background: none;
  border: 0;
  place-items: center;
  padding: 0;
  display: grid;
}

.chat-track-action .ui-icon {
  width: 15px;
  height: 15px;
}

.chat-track-action:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.chat-track-action.is-danger, .chat-track-action.is-danger:hover {
  color: var(--color-status-high-text);
}

.chat-track-action.is-danger:hover {
  background: var(--color-status-high-tint);
}

.chat-track:has(.chat-track-menu) {
  z-index: 30;
}

.chat-track-menu {
  top: calc(100% + var(--space-1));
  z-index: 20;
  gap: var(--gap-3xs);
  min-width: 148px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
  flex-direction: column;
  display: flex;
  position: absolute;
  right: 0;
}

.chat-track-menu.is-up {
  top: auto;
  bottom: calc(100% + var(--space-1));
}

.chat-track-menu-item {
  align-items: center;
  gap: var(--gap-2xs);
  border-radius: var(--radius-sm);
  width: 100%;
  padding: var(--space-1-5) var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color .14s var(--motion-out);
  background: none;
  border: 0;
  display: flex;
}

.chat-track-menu-item .ui-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.chat-track-menu-item:hover, .chat-track-menu-item:focus-visible {
  background: var(--color-surface-sunken);
}

.chat-track-menu-item.is-danger {
  color: var(--color-status-high-text);
}

.chat-track-menu-item.is-danger:hover, .chat-track-menu-item.is-danger:focus-visible {
  background: var(--color-status-high-tint);
}

.chat-track-rename {
  margin: var(--space-1);
  border: 1px solid var(--color-focus);
  border-radius: var(--radius-sm);
  height: 32px;
  padding: 0 var(--space-2);
  font: inherit;
  font-size: var(--text-base);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.chat-main {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
  position: relative;
}

.chat-main.is-empty {
  justify-content: center;
}

.chat-main.is-empty .chat-empty-shell {
  flex: none;
  overflow: visible;
}

.chat-main.is-empty .chat-composer {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

.chat-main.is-empty .chat-empty-title {
  font-size: var(--text-3xl);
}

.chat-empty-shell {
  min-height: 0;
  padding: var(--space-3) var(--space-5);
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow-y: auto;
}

.chat-empty {
  text-align: center;
  justify-items: center;
  gap: var(--gap-sm);
  max-width: 46ch;
  margin: auto;
  display: grid;
}

.chat-empty-mark {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-1);
  background: var(--color-accent-tint);
  color: var(--color-action-primary);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.chat-empty-mark .ui-icon {
  width: 26px;
  height: 26px;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-empty-mark {
    animation: brand-load-breathe 2.4s var(--motion-out) infinite;
  }
}

.chat-empty-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 0;
  color: var(--color-text);
  margin: 0;
  font-weight: 560;
}

.chat-empty-sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.chat-suggestions {
  justify-content: center;
  gap: var(--gap-sm);
  margin-top: var(--space-3);
  flex-wrap: wrap;
  display: flex;
}

.chat-suggestion {
  padding: var(--space-2) var(--space-3-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
  transition: border-color .18s var(--motion-out), color .18s var(--motion-out), background-color .22s var(--motion-out);
  font-weight: 540;
}

.chat-suggestion:hover {
  border-color: var(--color-action-primary);
  color: var(--color-action-primary);
  background: var(--color-surface-sunken);
}

.chat-suggestion:active {
  background: var(--color-surface-sunken);
  border-color: var(--color-action-primary-hover);
  color: var(--color-action-primary-hover);
}

.chat-day-label {
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 640;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-item-enter {
    animation: chat-msg-in .32s var(--motion-out) both;
  }
}

@keyframes chat-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-item-grouped {
  margin-top: -6px;
}

.chat-prose {
  max-width: var(--measure-prose);
}

.chat-copy {
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s var(--motion-out), background-color .18s var(--motion-out), color .18s var(--motion-out);
  background: none;
  border: 0;
  font-weight: 560;
  display: inline-flex;
}

[data-slot="message"]:hover .chat-copy, .chat-copy:focus-visible, .chat-copy.is-copied {
  opacity: 1;
}

@media (hover: none) {
  .chat-copy {
    opacity: 1;
  }
}

.chat-copy:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.chat-copy.is-copied {
  color: var(--color-status-in-range-text);
}

.chat-copy .ui-icon {
  width: 14px;
  height: 14px;
}

.chat-response-actions {
  gap: var(--gap-xs);
}

.chat-response-actions .chat-copy {
  width: var(--icon-btn-size-sm);
  height: var(--icon-btn-size-sm);
  opacity: 1;
  justify-content: center;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-response-actions {
    animation: chat-response-actions-in .18s var(--motion-out) both;
  }
}

@keyframes chat-response-actions-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-group-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.chat-feedback-buttons {
  align-items: center;
  gap: var(--gap-2xs);
  display: inline-flex;
}

.chat-feedback-reason {
  align-items: center;
  gap: var(--gap-xs);
  margin-top: var(--space-1);
  max-width: var(--measure-prose);
  display: flex;
}

.chat-feedback-reason-input {
  min-width: 0;
  height: var(--icon-btn-size-sm);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2-5);
  background: var(--color-surface-raised);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
}

.chat-feedback-reason-input::placeholder {
  color: var(--color-text-muted);
}

.chat-md h4 {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--color-text);
  margin: 1.5em 0 0;
}

.chat-md ul {
  list-style: outside;
}

.chat-md ol {
  list-style: decimal;
}

.chat-md ul ul {
  list-style: circle;
}

.chat-md ul ul ul {
  list-style: square;
}

.chat-md ol ol {
  list-style: lower-alpha;
}

.chat-md ol ol ol {
  list-style: lower-roman;
}

.chat-md li:has( > input[type="checkbox"]) {
  list-style: none;
}

.chat-md code {
  background: var(--color-surface-sunken);
  padding: var(--space-px) var(--space-1-5);
  border-radius: 4px;
}

.chat-md pre {
  background: var(--color-text);
  color: var(--color-surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3-5);
  font-size: var(--text-sm);
  overflow-x: auto;
}

.chat-md pre code {
  color: inherit;
  background: none;
  padding: 0;
}

.chat-md a {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-border-strong);
  -webkit-text-decoration-color: var(--color-border-strong);
  text-decoration-color: var(--color-border-strong);
}

.chat-md a:hover {
  -webkit-text-decoration-color: var(--color-action-primary);
  -webkit-text-decoration-color: var(--color-action-primary);
  text-decoration-color: var(--color-action-primary);
}

.chat-md table {
  border-collapse: collapse;
  max-width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  display: block;
  overflow-x: auto;
}

.chat-md th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: var(--color-surface-sunken);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.chat-md th:first-child {
  border-top-left-radius: var(--radius-md);
}

.chat-md th:last-child {
  border-top-right-radius: var(--radius-md);
}

.chat-md td {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  vertical-align: top;
  text-align: left;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.chat-md td strong {
  font-weight: var(--weight-strong);
  color: var(--color-text);
}

.chat-md-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.chat-md .chat-md-table {
  table-layout: fixed;
  width: 100%;
  display: table;
}

.chat-md-table th, .chat-md-table td {
  overflow-wrap: break-word;
}

.chat-reasoning {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.chat-reasoning summary {
  cursor: pointer;
  font-weight: 600;
}

.chat-reasoning p {
  margin: var(--space-1-5) 0 0;
  white-space: pre-wrap;
}

.chat-image {
  border-radius: 10px;
  max-width: 320px;
  display: block;
}

.chat-icon-spin {
  animation: 1s linear infinite ui-spin;
}

@media (prefers-reduced-motion: reduce) {
  .chat-icon-spin {
    animation: none;
  }
}

.chat-marker-done {
  color: var(--color-status-in-range);
}

.chat-marker-error {
  color: var(--color-status-high-text);
}

.chat-working-indicator {
  width: fit-content;
  min-width: var(--icon-btn-size-sm);
  min-height: var(--icon-btn-size-sm);
  justify-content: center;
  padding: 0;
}

.chat-streaming:after {
  content: "▍";
  color: var(--color-accent);
  animation: chat-caret-blink 1.05s var(--motion-out) infinite;
  margin-inline-start: .12em;
}

@keyframes chat-caret-blink {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-streaming:after {
    opacity: .7;
    animation: none;
  }
}

.chat-tool-group {
  gap: var(--gap-xs);
  flex-direction: column;
  display: flex;
}

.chat-tool-run {
  cursor: pointer;
  transition: background-color .16s var(--motion-out), color .16s var(--motion-out);
}

.chat-tool-run .ui-icon, .chat-tool-checklist .ui-icon {
  width: var(--chat-dot-loader-size);
  height: var(--chat-dot-loader-size);
}

.chat-tool-caret {
  transition: transform .16s var(--motion-out);
}

.chat-tool-caret.is-open {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .chat-tool-caret {
    transition: none;
  }
}

.chat-tool-list {
  padding: 0 0 0 var(--space-6);
  gap: var(--gap-xs);
  flex-direction: column;
  margin: 0;
  list-style: none;
  display: flex;
}

.chat-compaction-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.chat-compaction-error {
  font-size: var(--text-xs);
  color: var(--color-status-high-text);
  margin: 0;
}

.chat-confirm {
  border: 1px solid var(--color-status-borderline);
  border-radius: var(--radius-md);
  background: var(--color-status-borderline-tint);
  padding: var(--space-3) var(--space-3-5);
  gap: var(--gap-xs);
  max-width: var(--measure-card);
  display: grid;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-confirm.is-pending {
    animation: chat-confirm-in .42s var(--motion-spring) both;
  }
}

@keyframes chat-confirm-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-confirm.is-resolved {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.chat-confirm-kicker {
  font-size: var(--text-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-status-borderline-text);
  margin: 0;
  font-weight: 700;
}

.chat-confirm.is-resolved .chat-confirm-kicker {
  color: var(--color-text-muted);
}

.chat-confirm-preview {
  font-size: var(--text-base);
  color: var(--color-text);
  white-space: pre-wrap;
  margin: 0;
}

.chat-confirm-existing {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  white-space: pre-wrap;
  margin: 0;
  text-decoration: line-through;
}

.chat-confirm-context {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: pre-wrap;
  margin: 0;
}

.chat-confirm-diff {
  gap: var(--gap-sm);
  display: grid;
}

.chat-confirm-diff-row {
  gap: var(--gap-2xs);
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-2);
  display: grid;
}

.chat-confirm-diff-row[data-testid="confirm-diff-after"] {
  border-left-color: var(--color-status-borderline);
}

.chat-confirm-diff-label {
  font-size: var(--text-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.chat-confirm-diff-text {
  font-size: var(--text-base);
  color: var(--color-text);
  white-space: pre-wrap;
}

.chat-confirm-diff-text.is-before {
  color: var(--color-text-muted);
}

.chat-confirm-actions {
  gap: var(--gap-xs);
  display: flex;
}

.chat-confirm-state {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  font-weight: 600;
}

.chat-q {
  gap: var(--gap-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-3-5);
  max-width: var(--measure-card);
}

.chat-q-heading {
  font-size: var(--text-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 700;
}

.chat-q-progress {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.chat-q-item {
  gap: var(--gap-md);
  border: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}

.chat-q-title {
  font-size: var(--text-md);
  color: var(--color-text);
  text-wrap: pretty;
  padding: 0;
  font-weight: 500;
  line-height: 1.35;
}

.chat-q-title:not(:has( ~ [data-slot="questionnaire-description"])) {
  margin-block-end: var(--gap-md);
}

.chat-q-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
  margin: 0;
}

.chat-q-choices {
  gap: var(--gap-sm);
}

.chat-q-choice {
  gap: var(--gap-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .18s var(--motion-out), border-color .18s var(--motion-out);
  line-height: 1.35;
}

.chat-q-choice:hover {
  background: var(--color-surface-sunken);
}

.chat-q-choice[data-checked] {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
}

.chat-q-choice:has( > .chat-q-choice-input:focus-visible) {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.chat-q-choice-input {
  z-index: 1;
  opacity: 0;
  cursor: pointer;
  block-size: 100%;
  inline-size: 100%;
  margin: 0;
}

.chat-q-choice-indicator {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  flex: none;
  position: relative;
  transform: translateY(1px);
}

.chat-q-choice[data-type="radio"] .chat-q-choice-indicator {
  border-radius: var(--radius-pill);
}

.chat-q-choice[data-checked] .chat-q-choice-indicator {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-action-primary-text);
}

.chat-q-choice-dot {
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-action-primary-text);
  display: none;
}

.chat-q-choice[data-type="radio"][data-checked] .chat-q-choice-dot {
  display: block;
}

.chat-q-choice-check {
  inline-size: var(--space-3);
  block-size: var(--space-3);
  display: none;
}

.chat-q-choice[data-type="checkbox"][data-checked] .chat-q-choice-check {
  display: block;
}

.chat-q-choice-label {
  gap: var(--gap-3xs);
}

.chat-q-choice-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.chat-q-choice-shortcut {
  inline-size: var(--space-5);
  block-size: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  flex: none;
  margin-inline-start: auto;
  display: inline-flex;
}

.chat-q-input {
  min-height: var(--field-height-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  padding: var(--field-pad-y) var(--field-pad-x);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-text);
}

.chat-q-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
  margin: 0;
}

.chat-q-actions {
  gap: var(--gap-sm);
  grid-template-columns: minmax(0, 1fr) auto auto;
  display: grid;
}

.chat-q-actions [hidden] {
  display: none;
}

.chat-q-summary {
  gap: var(--gap-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-3-5);
  max-width: var(--measure-card);
  display: grid;
}

.chat-q-summary-kicker {
  font-size: var(--text-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 700;
}

.chat-q-summary-list {
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.chat-q-summary-row {
  gap: var(--gap-3xs);
  display: grid;
}

.chat-q-summary-q {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.chat-q-summary-a {
  font-size: var(--text-base);
  color: var(--color-text);
}

.chat-q-summary-note {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  font-weight: 600;
}

.chat-composer {
  gap: var(--gap-xs);
  padding: var(--space-2) var(--space-5);
  justify-items: center;
  display: grid;
  position: relative;
}

.chat-composer-frame {
  align-items: center;
}

.chat-attachment {
  align-items: center;
  gap: var(--gap-sm);
  max-width: 100%;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  justify-self: start;
  display: flex;
}

.chat-attachment-thumb {
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.chat-attachment-name {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.chat-attachment-remove {
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color .18s var(--motion-out);
  background: none;
  border: 0;
  flex-shrink: 0;
  place-items: center;
  display: grid;
}

.chat-attachment-remove:hover {
  color: var(--color-text);
}

.chat-attach-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
  justify-self: start;
  margin: 0;
}

.chat-file-input {
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.chat-attach .ui-icon, .chat-mic .ui-icon {
  width: 19px;
  height: 19px;
}

.chat-composer-frame.is-dragover {
  border-color: var(--color-focus);
  outline: none;
}

.ui-composer .chat-input {
  min-height: var(--icon-btn-size);
  max-height: 160px;
  padding: var(--space-1-5) 0;
}

.chat-composer-frame.is-expanded {
  grid-template-columns: var(--icon-btn-size) minmax(0, 1fr) var(--icon-btn-size) var(--icon-btn-size);
  align-items: center;
  display: grid;
}

.chat-composer-frame.is-expanded .chat-input {
  grid-area: 1 / 1 / auto / -1;
  width: 100%;
}

.chat-composer-frame.is-expanded .chat-attach {
  grid-area: 2 / 1;
}

.chat-composer-frame.is-expanded .chat-mic {
  grid-area: 2 / 3;
}

.chat-composer-frame.is-expanded .chat-send-btn {
  grid-area: 2 / 4;
}

.chat-mic.is-recording {
  background: var(--color-status-high-tint);
  color: var(--color-status-high-text);
  animation: 1.2s ease-in-out infinite chat-pulse;
}

@keyframes chat-pulse {
  0%, 100% {
    box-shadow: var(--ring-recording);
  }

  50% {
    box-shadow: var(--ring-recording-wide);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-mic.is-recording {
    animation: none;
  }
}

.chat-send-btn:active:not(:disabled) {
  background: var(--color-action-primary);
}

.chat-send-btn .ui-icon {
  width: 18px;
  height: 18px;
}

.chat-send-btn.is-stop, .chat-send-btn.is-stop:hover {
  background: var(--color-text);
  color: var(--color-surface-raised);
}

.chat-composer-hint {
  padding: 0 var(--space-2-5);
  margin: 0;
}

.chat-composer-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
  margin: 0;
  position: absolute;
  top: -18px;
  left: 26px;
}

.chat-dictation {
  flex: auto;
  align-items: center;
  min-width: 0;
  display: flex;
}

.chat-dictation-canvas {
  width: 100%;
  height: var(--space-14);
  color: var(--color-accent);
  display: block;
}

.chat-dictation-cancel .ui-icon {
  width: 19px;
  height: 19px;
}

.chat-dictation-cancel.is-recording {
  background: var(--color-accent-tint);
  color: var(--color-accent);
  animation: 1.2s ease-in-out infinite chat-pulse-accent;
}

.chat-dictation-cancel.is-transcribing {
  background: var(--color-accent-tint);
  color: var(--color-text-muted);
  cursor: progress;
}

@keyframes chat-pulse-accent {
  0%, 100% {
    box-shadow: var(--ring-accent);
  }

  50% {
    box-shadow: var(--ring-accent-wide);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-dictation-cancel.is-recording {
    animation: none;
  }
}

.chat-send-btn.is-transcribing {
  cursor: progress;
}

@media (max-width: 860px) {
  .chat {
    height: auto;
    min-height: calc(100svh - var(--shell-main-pad-top) - var(--shell-main-pad-bottom));
    flex-direction: column;
    margin-bottom: 0;
  }

  .chat-composer {
    padding: var(--space-2-5) var(--space-1) var(--space-1-5);
  }

  .chat-composer-hint {
    display: none;
  }
}

.bm {
  max-width: var(--page-max-list);
  gap: var(--gap-xl);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.bm-card {
  gap: var(--gap-md);
  padding: var(--card-pad);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  background: var(--color-surface-raised);
  flex-direction: column;
  display: flex;
}

.bm-upload-row {
  align-items: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
  display: flex;
}

.bm-file-input, .rad-file-input {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.bm-upload-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0;
}

.bm-upload-status, .rad-status-line {
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  font-weight: 550;
  display: flex;
}

.bm-upload-error, .rad-error {
  font-size: var(--text-base);
  color: var(--color-status-high-text);
  margin: 0;
  font-weight: 550;
}

.bm-upload-failed, .rad-failed {
  gap: var(--gap-sm);
  justify-items: start;
  display: grid;
}

.bm-review {
  gap: var(--gap-md);
  justify-items: start;
  display: grid;
}

.bm-review-summary {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.bm-review-scroll {
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
}

.bm-row-dup {
  color: var(--color-text-muted);
}

.bm-dup-tag {
  margin-left: var(--space-2);
  font-size: var(--text-2xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.bm-review-saved {
  gap: var(--gap-2xs);
  display: grid;
}

.bm-review-saved-title {
  color: var(--color-status-in-range-text);
  margin: 0;
  font-weight: 650;
}

.bm-review-saved-sub {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.bm-reports {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.bm-reports-note {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}

.bm-report-row {
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--space-2-5) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--text-base);
  flex-wrap: wrap;
  display: flex;
}

.bm-report-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.bm-report-row:first-child {
  padding-top: 0;
}

.bm-report-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32ch;
  font-weight: 550;
  overflow: hidden;
}

.bm-report-status {
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--space-0-5) var(--space-2);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  border-radius: 999px;
  font-weight: 700;
}

.bm-report-failed {
  background: var(--color-status-high-tint);
  color: var(--color-status-high-text);
}

.bm-report-parsed {
  background: var(--color-status-borderline-tint);
  color: var(--color-status-borderline-text);
}

.bm-report-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
}

.bm-filters {
  gap: var(--gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.bm-chip {
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  border-radius: 999px;
  font-weight: 550;
}

.bm-chip:hover {
  border-color: var(--color-action-primary);
}

.bm-chip.is-active {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.bm-group {
  gap: var(--gap-2xs);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.bm-group-title {
  margin: var(--space-1-5) 0 var(--space-0-5);
  font-size: var(--text-sm);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.bm-list {
  gap: var(--gap-xs);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.bm-row {
  align-items: center;
  gap: var(--gap-lg);
  padding: var(--space-2-5) var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: inherit;
  grid-template-columns: minmax(0, 1fr) minmax(0, 160px) minmax(110px, 180px) auto auto;
  text-decoration: none;
  transition: border-color .12s, background-color .12s;
  display: grid;
}

.bm-row:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-sunken);
}

.bm-row[data-status="optimal"], .bm-row[data-status="sufficient"] {
  border-left-color: var(--color-status-in-range);
}

.bm-row[data-status="out_of_range"] {
  border-left-color: var(--color-status-high);
}

.bm-row-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.bm-row-value {
  font-variant-numeric: tabular-nums;
  min-width: 0;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.bm-row-range {
  align-items: center;
  min-width: 0;
  display: flex;
}

.bm-row-range .ui-range-bar {
  gap: 0;
  width: 100%;
}

.bm-row-range .ui-range-bar-scale {
  display: none;
}

.bm-row-range .ui-range-bar-track {
  height: 6px;
}

.bm-row-range-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.bm-row-pill {
  flex-shrink: 0;
}

.bm-row-date {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .bm-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .bm-row-range, .bm-row-date {
    display: none;
  }
}

.bm-back, .rad-back {
  font-size: var(--text-base);
  color: var(--color-action-primary);
  justify-self: start;
  text-decoration: none;
}

.bm-back:hover, .rad-back:hover, .rad-pdf-link:hover {
  text-decoration: underline;
}

.bm-detail-header {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-lg);
  flex-wrap: wrap;
  display: flex;
}

.bm-detail-header h1 {
  font-size: var(--text-2xl);
  letter-spacing: 0;
  margin: 0;
  line-height: 1.15;
}

.bm-detail-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.bm-detail-latest {
  gap: var(--gap-xs);
  justify-items: end;
  display: grid;
}

.bm-detail-value {
  font-size: var(--text-2xl);
  letter-spacing: 0;
  font-weight: 650;
}

.bm-detail-unit {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-weight: 400;
}

.bm-detail-latest-sub {
  align-items: center;
  gap: var(--gap-sm);
  display: flex;
}

.bm-tier {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.bm-detail-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.bm-detail-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  max-width: 70ch;
  margin: 0;
}

.bm-trend {
  align-items: center;
  gap: var(--gap-md);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
  display: flex;
}

.bm-trend-item {
  align-items: baseline;
  gap: var(--gap-xs);
  display: inline-flex;
}

.bm-trend-delta {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-weight: 650;
}

.bm-trend-arrow {
  margin-right: var(--space-1);
  color: var(--color-text-muted);
  font-weight: 700;
}

.bm-trend-label {
  color: var(--color-text-muted);
}

.bm-chart-wrap {
  width: 100%;
  overflow-x: auto;
}

.bm-chart-frame {
  min-width: 560px;
  position: relative;
}

.bm-chart {
  width: 100%;
  height: auto;
  display: block;
}

.bm-chart-tick {
  font-size: var(--text-2xs);
  fill: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.bm-chart-band-ref {
  fill: var(--color-text-muted);
  opacity: .1;
}

.bm-chart-band-optimal {
  fill: var(--color-status-in-range);
  opacity: .14;
}

.bm-chart-band-label {
  font-size: var(--text-2xs);
  font-weight: 600;
}

.bm-chart-band-label--ref {
  fill: var(--color-text-muted);
}

.bm-chart-band-label--optimal {
  fill: var(--color-status-in-range-text);
}

.bm-chart-grid {
  stroke: var(--color-border-soft);
}

.bm-chart-axis {
  stroke: var(--color-border);
}

.bm-chart-crosshair {
  stroke: var(--color-border-strong);
}

.bm-chart-line {
  fill: none;
  stroke: var(--color-accent);
}

.bm-chart-point {
  fill: var(--color-accent);
  stroke: var(--color-surface-raised);
  stroke-width: 2px;
}

.bm-chart-point--low {
  fill: var(--color-status-low);
}

.bm-chart-point--high {
  fill: var(--color-status-high);
}

.bm-chart-endlabel {
  font-size: var(--text-xs);
  fill: var(--color-text);
  font-weight: 650;
}

.bm-chart-note {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}

.bm-chart svg, .bm-chart g:focus {
  outline: none;
}

.bm-chart g:focus-visible circle[data-testid="bm-chart-point"] {
  stroke: var(--color-text);
}

.bm-chart-tooltip {
  gap: var(--space-px);
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  font-size: var(--text-xs);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
  display: grid;
  position: absolute;
  transform: translate(-50%, -115%);
}

.bm-chart-tooltip-value {
  font-size: var(--text-base);
  font-weight: 700;
}

.bm-chart-tooltip-date {
  color: var(--color-text-muted);
}

.bm-chart-tooltip-ok {
  color: var(--color-status-in-range-text);
  font-weight: 600;
}

.bm-chart-tooltip-out {
  color: var(--color-status-high-text);
  font-weight: 600;
}

.bm-tiles {
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  display: grid;
}

.bm-tile {
  gap: var(--gap-3xs);
  padding: var(--space-2-5) var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  display: grid;
}

.bm-tile-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.bm-tile-value {
  font-size: var(--text-lg);
  letter-spacing: 0;
  font-weight: 650;
}

.bm-table-scroll {
  overflow-x: auto;
}

.bm-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-base);
}

.bm-table th {
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-1-5) var(--space-3) var(--space-1-5) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-weight: 700;
}

.bm-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text-secondary);
}

.bm-table tr:last-child td {
  border-bottom: 0;
}

.bm-table-value {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-weight: 600;
}

.bm-table-out {
  color: var(--color-status-high-text);
  font-weight: 600;
}

.intg {
  gap: var(--gap-lg);
  max-width: var(--page-max-app);
  display: grid;
}

.intg-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  border: 1px solid #0000;
  margin: 0;
  font-weight: 550;
}

.intg-banner-success {
  background: var(--color-status-in-range-tint);
  border-color: var(--color-status-in-range);
  color: var(--color-status-in-range-text);
}

.intg-banner-error {
  background: var(--color-status-high-tint);
  border-color: var(--color-status-high);
  color: var(--color-status-high-text);
}

.intg-banner-info {
  background: var(--color-status-low-tint);
  border-color: var(--color-status-low);
  color: var(--color-status-low-text);
}

.intg-card-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  display: flex;
}

.intg-card-heading {
  align-items: center;
  gap: var(--gap-sm);
  display: flex;
}

.intg-card-title {
  font-size: var(--text-lg);
  margin: 0;
}

.intg-brand-logo {
  width: auto;
  display: block;
}

.intg-brand-logo-whoop {
  height: 14px;
}

.intg-brand-logo-oura {
  height: 22px;
}

.intg-card-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.intg-card-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.intg-notice {
  padding: var(--space-2-5) var(--space-3-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid #0000;
  max-width: 62ch;
  margin: 0;
  line-height: 1.5;
}

.intg-notice-warn {
  background: var(--color-status-high-tint);
  border-color: var(--color-status-high);
  color: var(--color-status-high-text);
}

.intg-notice-attention {
  background: var(--color-status-borderline-tint);
  border-color: var(--color-status-borderline);
  color: var(--color-status-borderline-text);
}

.intg-notice-info {
  background: var(--color-status-low-tint);
  border-color: var(--color-status-low);
  color: var(--color-status-low-text);
}

.intg-actions {
  gap: var(--gap-md);
  margin-top: var(--space-1);
  justify-items: start;
  display: grid;
}

.intg-action-row {
  gap: var(--gap-sm);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.intg-note {
  font-size: var(--text-sm);
  color: var(--color-status-in-range-text);
  margin: 0;
}

.intg-mcp-url {
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
  color: var(--color-text);
  display: block;
}

.intg-mcp-link {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.intg-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
  margin: 0;
}

.intg-confirm {
  gap: var(--gap-md);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-status-high);
  border-radius: var(--radius-md);
  background: var(--color-status-high-tint);
  justify-items: start;
  display: grid;
}

.intg-confirm-text {
  font-size: var(--text-base);
  color: var(--color-status-high-text);
  max-width: var(--measure-card);
  margin: 0;
}

.prod {
  gap: var(--gap-lg);
  max-width: var(--page-max-list);
  display: grid;
}

.prod-toolbar {
  gap: var(--gap-sm);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.prod-input {
  padding: var(--field-pad-y) var(--field-pad-x);
  border: 1px solid var(--color-border);
  border-radius: var(--field-radius);
  background: var(--color-surface-raised);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
}

.prod-input:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.prod-search {
  flex: 1;
  min-width: 220px;
}

.prod-undo {
  gap: var(--gap-md);
  padding: var(--space-2-5) var(--space-3-5);
  border: 1px solid var(--color-status-low);
  border-radius: var(--radius-md);
  background: var(--color-status-low-tint);
  color: var(--color-status-low-text);
  font-size: var(--text-base);
  align-items: center;
  margin: 0;
  display: flex;
}

.prod-undo-btn {
  font: inherit;
  color: var(--color-status-low-text);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-weight: 700;
  text-decoration: underline;
}

.prod-undo-btn:disabled {
  opacity: .6;
  cursor: default;
}

.prod-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
  margin: 0;
}

.prod-stale {
  gap: var(--gap-md);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-status-borderline);
  border-radius: var(--radius-md);
  background: var(--color-status-borderline-tint);
  justify-items: start;
  display: grid;
}

.prod-stale-text {
  font-size: var(--text-base);
  color: var(--color-status-borderline-text);
  max-width: 56ch;
  margin: 0;
}

.prod-editor {
  gap: var(--gap-md);
  display: grid;
}

.prod-field {
  gap: var(--gap-xs);
  display: grid;
}

.prod-label {
  font-size: var(--text-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.prod-desc-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  display: flex;
}

.prod-tabs {
  gap: var(--gap-3xs);
  padding: var(--space-0-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  display: inline-flex;
}

.prod-tab {
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  font-weight: 600;
}

.prod-tab.is-active {
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.prod-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: var(--field-pad-y) var(--field-pad-x);
  border: 1px solid var(--color-border);
  border-radius: var(--field-radius);
  background: var(--color-surface-raised);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  resize: vertical;
  line-height: 1.5;
}

.prod-textarea:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.prod-md {
  padding: var(--field-pad-y) var(--field-pad-x);
  border: 1px solid var(--color-border);
  border-radius: var(--field-radius);
  background: var(--color-surface-sunken);
  font-size: var(--text-base);
}

.prod-md-empty {
  color: var(--color-text-muted);
  margin: 0;
}

.prod-import {
  gap: var(--gap-sm);
  justify-items: start;
  display: grid;
}

.prod-file-input {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.prod-import-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.prod-import-status {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.prod-label-thumb {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  max-width: 140px;
  max-height: 140px;
}

.prod-list {
  gap: var(--gap-lg);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.prod-card {
  gap: var(--gap-sm);
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  flex-direction: column;
  display: flex;
}

.prod-card-title {
  -webkit-line-clamp: 2;
  min-height: 2.6em;
  color: var(--color-text);
  -webkit-box-orient: vertical;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}

.prod-card-chip-slot {
  align-items: center;
  min-height: 22px;
  display: flex;
}

.prod-row-brand {
  padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  white-space: nowrap;
  font-weight: 650;
}

.prod-card-foot {
  padding-top: var(--space-2-5);
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  border-top: 1px solid var(--color-border-soft);
  flex-wrap: wrap;
  margin-top: auto;
  display: flex;
}

.prod-row-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.prod-row-actions {
  gap: var(--gap-sm);
  display: flex;
}

.rad {
  max-width: var(--page-max-app);
  gap: var(--gap-xl);
  display: grid;
}

.rad-header h1 {
  margin: var(--space-0-5) 0 0;
  font-size: var(--text-2xl);
  letter-spacing: 0;
  line-height: 1.15;
}

.rad-header-sub {
  margin: var(--space-1-5) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.rad-card {
  gap: var(--gap-md);
  padding: var(--card-pad);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  background: var(--color-surface-raised);
  flex-direction: column;
  display: flex;
}

.rad-upload-form {
  gap: var(--gap-md);
  justify-items: start;
  display: grid;
}

.rad-upload-row {
  align-items: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
  display: flex;
}

.rad-upload-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0;
}

.rad-review {
  gap: var(--gap-lg);
  justify-items: start;
  width: 100%;
  display: grid;
}

.rad-review-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  display: flex;
}

.rad-review-hint {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.rad-dup-warning {
  padding: var(--space-2-5) var(--space-3-5);
  border: 1px solid var(--color-status-borderline);
  border-radius: var(--radius-md);
  background: var(--color-status-borderline-tint);
  color: var(--color-status-borderline-text);
  font-size: var(--text-base);
  margin: 0;
  font-weight: 550;
}

.rad-dup-warning a {
  color: var(--color-status-borderline-text);
}

.rad-form-grid {
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  width: 100%;
  display: grid;
}

.rad-field {
  gap: var(--gap-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
  display: grid;
}

.rad-field input, .rad-field select, .rad-field textarea {
  font: inherit;
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--color-text);
  padding: var(--field-pad-y) var(--field-pad-x);
  border: 1px solid var(--color-border);
  border-radius: var(--field-radius);
  background: var(--color-surface-raised);
}

.rad-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.rad-field-wide {
  width: 100%;
}

.rad-confirm-error {
  gap: var(--gap-sm);
  padding: var(--space-2-5) var(--space-3-5);
  border: 1px solid var(--color-status-high);
  border-radius: var(--radius-md);
  background: var(--color-status-high-tint);
  justify-items: start;
  display: grid;
}

.rad-confirm-error p {
  font-size: var(--text-base);
  color: var(--color-status-high-text);
  margin: 0;
  font-weight: 550;
}

.rad-saved {
  gap: var(--gap-2xs);
  display: grid;
}

.rad-saved-title {
  color: var(--color-status-in-range-text);
  margin: 0;
  font-weight: 650;
}

.rad-saved-sub {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.rad-list {
  gap: var(--gap-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.rad-row {
  align-items: center;
  gap: var(--gap-md);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  transition: border-color .12s, background-color .12s;
  display: grid;
}

.rad-row:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-sunken);
}

.rad-row-main {
  gap: var(--gap-3xs);
  color: inherit;
  min-width: 0;
  text-decoration: none;
  display: grid;
}

.rad-row-main:hover .rad-row-title {
  color: var(--color-action-primary);
}

.rad-row-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.rad-row-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.rad-row-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.rad-status {
  justify-self: end;
}

@media (max-width: 720px) {
  .rad-row {
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rad-row-date {
    grid-column: 1;
  }

  .rad-status {
    grid-area: 1 / 2;
  }
}

.rad-review-nudge {
  padding: var(--space-2-5) var(--space-3-5);
  border: 1px solid var(--color-status-borderline);
  border-radius: var(--radius-md);
  background: var(--color-status-borderline-tint);
  color: var(--color-status-borderline-text);
  font-size: var(--text-base);
  margin: 0;
  font-weight: 550;
}

.rad-meta {
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin: 0;
  display: grid;
}

.rad-meta-item dt {
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.rad-meta-item dd {
  margin: var(--space-0-5) 0 0;
  font-size: var(--text-base);
  color: var(--color-text);
}

.rad-pdf-link {
  font-size: var(--text-base);
  color: var(--color-action-primary);
  place-self: start;
  font-weight: 600;
  text-decoration: none;
}

.rad-body-text {
  font-size: var(--text-md);
  color: var(--color-text);
  white-space: pre-wrap;
  margin: 0;
  line-height: 1.6;
}

.rad-body-missing {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}

.rad-danger-zone {
  justify-items: start;
  display: grid;
}

.rad-delete-confirm {
  gap: var(--gap-md);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-status-high);
  border-radius: var(--radius-md);
  background: var(--color-status-high-tint);
  justify-items: start;
  display: grid;
}

.rad-delete-confirm p {
  font-size: var(--text-base);
  color: var(--color-status-high-text);
  margin: 0;
  font-weight: 550;
}

.rad-delete-actions {
  gap: var(--gap-sm);
  display: flex;
}

.proto {
  gap: var(--gap-xl);
  max-width: var(--page-max-app);
  display: grid;
}

.proto-head {
  gap: var(--gap-2xs);
  flex-direction: column;
  display: flex;
}

.proto-title {
  font-size: var(--text-lg);
  text-wrap: balance;
  margin: 0;
  line-height: 1.3;
}

.proto-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.proto-summary {
  max-width: 68ch;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.65;
}

.proto-foot {
  gap: var(--gap-md);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  flex-direction: column;
  display: flex;
}

.proto-adherence {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.proto-today {
  font-size: var(--text-sm);
  color: var(--color-status-in-range-text);
  margin: 0;
  font-weight: 600;
}

.proto-actions {
  gap: var(--gap-md);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.proto-action-row {
  gap: var(--gap-sm);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.ui-btn.is-current {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 1px;
}

.proto-note {
  padding: var(--field-pad-y) var(--field-pad-x);
  border: 1px solid var(--color-border);
  border-radius: var(--field-radius);
  background: var(--color-surface-raised);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  width: min(100%, 420px);
}

.proto-note:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.proto-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
  margin: 0;
}

.set {
  gap: var(--gap-lg);
  max-width: var(--page-max-app);
  display: grid;
}

.set-card.is-danger {
  border: 1px solid var(--color-status-high);
}

.set-sub {
  max-width: 100%;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  margin: 0;
}

.set-basics {
  max-width: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  margin: 0;
}

.set-profile-form {
  gap: var(--gap-lg);
  display: grid;
}

.set-grid {
  gap: var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  display: grid;
}

.set-profile-grid {
  gap: var(--gap-lg) var(--gap-md);
}

.set-field {
  gap: var(--gap-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
  display: grid;
}

.set-field input, .set-input {
  min-height: var(--field-height-md);
  border-radius: var(--field-radius);
  border: 1px solid var(--color-border);
  padding: 0 var(--field-pad-x);
  font: inherit;
  font-size: var(--text-base);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-weight: 400;
}

.set-input {
  width: min(100%, 320px);
}

.set-field input:focus, .set-input:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.set-actions {
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.set-actions .dash-cta {
  min-height: var(--btn-height-sm);
  padding: 0 var(--btn-pad-sm);
  font-size: var(--text-sm);
  margin-top: 0;
}

.set-profile-footer {
  padding-top: var(--space-1);
}

.set-note {
  font-size: var(--text-sm);
  color: var(--color-status-in-range-text);
  margin: 0;
}

.set-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
  margin: 0;
}

.set-reveal {
  gap: var(--gap-md);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-status-borderline);
  border-radius: var(--radius-md);
  background: var(--color-status-borderline-tint);
  display: grid;
}

.set-reveal-warn {
  font-size: var(--text-sm);
  color: var(--color-status-borderline-text);
  margin: 0;
  font-weight: 650;
}

.set-token {
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
  color: var(--color-text);
  display: block;
}

.set-keys {
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.set-key-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--space-2-5) 0;
  border-top: 1px solid var(--color-border-soft);
  flex-wrap: wrap;
  display: flex;
}

.set-key-main {
  gap: var(--gap-3xs);
  display: grid;
}

.set-key-name {
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 600;
}

.set-key-prefix {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.set-key-scope {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.set-key-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.set-preset {
  align-items: center;
  gap: var(--gap-md);
  border: 0;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  display: flex;
}

.set-preset legend {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-inline-end: var(--gap-sm);
  padding: 0;
  font-weight: 650;
}

.set-preset-option {
  align-items: center;
  gap: var(--gap-3xs);
  font-size: var(--text-sm);
  color: var(--color-text);
  display: inline-flex;
}

.set-revoked {
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.set-confirm {
  gap: var(--gap-md);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-status-high);
  border-radius: var(--radius-md);
  background: var(--color-status-high-tint);
  display: grid;
}

.set-confirm-text {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
}

.adm {
  gap: var(--gap-lg);
  max-width: var(--page-max-app);
  display: grid;
}

.adm-sub {
  max-width: 100%;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  margin: 0;
}

.adm-note {
  font-size: var(--text-sm);
  color: var(--color-status-in-range-text);
  margin: 0;
}

.adm-error {
  font-size: var(--text-sm);
  color: var(--color-status-high-text);
  margin: 0;
}

.adm-field {
  gap: var(--gap-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
  display: grid;
}

.adm-field input, .adm-select {
  min-height: var(--field-height-md);
  border-radius: var(--field-radius);
  border: 1px solid var(--color-border);
  padding: 0 var(--field-pad-x);
  font: inherit;
  font-size: var(--text-base);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-weight: 400;
}

.adm-field input:focus, .adm-select:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.adm-search {
  max-width: 360px;
}

.adm-invite-form {
  align-items: flex-end;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.adm-invite-form .adm-field {
  flex: 260px;
  min-width: 0;
}

.adm-actions {
  align-items: flex-end;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.adm-rows {
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.adm-rows--invites {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.adm-rows--users {
  grid-template-columns: minmax(0, 1fr) repeat(5, auto);
}

.adm-row {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: var(--gap-sm) var(--gap-md);
  padding: var(--row-pad-y) 0;
  border-top: 1px solid var(--color-border-soft);
  display: grid;
}

.adm-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.adm-row-main {
  gap: var(--gap-3xs);
  min-width: 0;
  display: grid;
}

.adm-row-title {
  font-size: var(--text-base);
  color: var(--color-text);
  overflow-wrap: anywhere;
  font-weight: 600;
}

.adm-row-self {
  color: var(--color-text-muted);
  font-weight: 400;
}

.adm-row-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.adm-row-actions {
  display: contents;
}

.adm-confirm {
  gap: var(--gap-md);
  margin-top: var(--space-1);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-status-high);
  border-radius: var(--radius-md);
  background: var(--color-status-high-tint);
  grid-column: 1 / -1;
  display: grid;
}

.adm-confirm-text {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
}

.adm-pager {
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  padding-top: var(--space-1);
  flex-wrap: wrap;
  display: flex;
}

@media (max-width: 860px) {
  .adm-rows--invites, .adm-rows--users, .adm-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .adm-row-actions {
    align-items: center;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    display: flex;
  }
}

.ui-section-header-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-xl);
  display: flex;
}

.ui-section-header-actions {
  flex: none;
}

@media (max-width: 640px) {
  .ui-section-header-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.dash {
  width: min(100%, var(--page-max-dashboard));
  max-width: var(--page-max-dashboard);
  gap: var(--gap-2xl);
  display: grid;
  container: dash / inline-size;
}

.dash .page-head h1 {
  font-size: clamp(var(--text-4xl), 4.6vw, var(--text-5xl));
  line-height: .98;
}

.dash .page-head .ui-eyebrow {
  color: var(--color-action-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .dash-body-area, .dash-labs-area, .dash-agenda-area, .dash-protocol-area, .dash-life-area {
    animation: ui-rise .62s var(--motion-out) both;
  }

  .dash-labs-area {
    animation-delay: 70ms;
  }

  .dash-agenda-area {
    animation-delay: .14s;
  }

  .dash-protocol-area {
    animation-delay: .21s;
  }

  .dash-life-area {
    animation-delay: .28s;
  }
}

.dash-header-chat {
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--btn-height-md);
  padding: 0 var(--btn-pad-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--btn-radius);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: var(--text-base);
  flex: none;
  font-weight: 540;
  display: inline-flex;
}

.dash-header-chat:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.dash-header-chat .ui-icon {
  width: 18px;
  height: 18px;
}

.dash-intg-alerts {
  gap: var(--gap-sm);
  display: grid;
}

.dash-intg-alert {
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  border: 1px solid #0000;
  flex-wrap: wrap;
  margin: 0;
  font-weight: 550;
  display: flex;
}

.dash-intg-alert svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.dash-intg-alert-text {
  flex: auto;
  min-width: 0;
}

.dash-intg-alert-link {
  color: inherit;
  text-underline-offset: 3px;
  flex: none;
  font-weight: 650;
  text-decoration: underline;
}

.dash-intg-alert-warn {
  background: var(--color-status-high-tint);
  border-color: var(--color-status-high);
  color: var(--color-status-high-text);
}

.dash-intg-alert-attention {
  background: var(--color-status-borderline-tint);
  border-color: var(--color-status-borderline);
  color: var(--color-status-borderline-text);
}

.dash-hero {
  align-items: center;
  gap: var(--gap-3xl);
  padding: var(--space-7) var(--space-8);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  background: var(--color-surface-raised);
  grid-template-columns: auto minmax(0, 1fr);
  display: grid;
  position: relative;
  overflow: hidden;
}

.dash-hero:before {
  content: "";
  background: var(--color-border-strong);
  height: 4px;
  position: absolute;
  inset: 0 0 auto;
}

.dash-hero[data-status="in-range"]:before {
  background: var(--color-status-in-range);
}

.dash-hero[data-status="borderline"]:before {
  background: var(--color-status-borderline);
}

.dash-hero[data-status="low"]:before {
  background: var(--color-status-low);
}

.dash-hero-figure {
  justify-items: start;
  gap: var(--gap-lg);
  display: grid;
}

.dash-hero-copy {
  gap: var(--gap-lg);
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-border-soft);
  display: grid;
}

.dash-hero-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.dash-hero-headline {
  align-items: baseline;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.dash-hero-score {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(var(--text-6xl), 8vw, var(--text-7xl));
  letter-spacing: 0;
  color: var(--color-text);
  font-weight: 500;
  line-height: .85;
}

.dash-hero-max {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  font-weight: 540;
}

.dash-hero-narrative {
  max-width: 62ch;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.45;
}

.dash-hero-stats {
  gap: var(--gap-md) var(--gap-lg);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.dash-hero-stats li {
  align-items: center;
  gap: var(--gap-lg);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  font-weight: 540;
  display: flex;
}

.dash-hero-stats li + li:before {
  content: "";
  background: var(--color-border-soft);
  align-self: stretch;
  width: 1px;
}

.dash-command-grid {
  gap: var(--gap-xl);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .9fr);
  grid-template-areas: "body labs agenda"
                       "protocol life agenda";
  display: grid;
}

.dash-command-grid > div {
  min-width: 0;
  display: flex;
}

.dash-command-grid > div > * {
  flex: 1;
}

.dash-body-area {
  grid-area: body;
}

.dash-labs-area {
  grid-area: labs;
}

.dash-agenda-area {
  grid-area: agenda;
}

.dash-protocol-area {
  grid-area: protocol;
}

.dash-life-area {
  grid-area: life;
}

.dash-agenda-panel {
  background: var(--color-surface-sunken);
}

.dash-agenda-panel .ui-empty {
  margin-block: auto;
}

.dash-command-grid .dash-card {
  height: 100%;
  transition: border-color .2s var(--motion-out), background-color .26s var(--motion-out);
}

a.dash-card:hover, .dash-command-grid a.dash-card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-sunken);
}

.dash-card-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  display: flex;
}

.dash-card-head .dash-card-kicker, .dash-card-head .ui-icon {
  margin: 0;
}

.dash-card-head .ui-icon {
  color: var(--color-text-muted);
}

.dash-count-pill {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-weight: 560;
}

.dash-card-foot {
  padding-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: auto;
}

.dash-body-grid {
  align-items: center;
  gap: var(--gap-2xl);
  flex-wrap: wrap;
  display: flex;
}

.dash-recovery-focus {
  flex: none;
}

.dash-tiles {
  gap: var(--gap-lg);
  flex: 1;
  min-width: 160px;
  display: grid;
}

.dash-trend {
  align-items: center;
  gap: var(--gap-md);
  margin-top: var(--space-0-5);
  padding-top: var(--space-3-5);
  border-top: 1px solid var(--color-border-soft);
  display: flex;
}

.dash-trend-spark {
  flex: 1;
  min-width: 0;
  max-height: 48px;
}

.dash-trend-delta {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: none;
  font-weight: 560;
}

.dash-trend-delta.is-up {
  color: var(--color-status-in-range-text);
}

.dash-trend-delta.is-down {
  color: var(--color-status-high-text);
}

.dash-labs-list {
  gap: var(--gap-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.dash-labs-row {
  gap: var(--gap-xs);
  display: grid;
}

.dash-labs-row-head {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-md);
  display: flex;
}

.dash-labs-name {
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 540;
}

.dash-labs-value {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  font-weight: 560;
}

.dash-labs-value small {
  color: var(--color-text-muted);
  font-weight: 500;
}

.dash-quiet-link {
  align-items: center;
  gap: var(--gap-xs);
  color: var(--color-action-primary);
  font-size: var(--text-base);
  margin-top: auto;
  font-weight: 540;
  display: inline-flex;
}

.dash-quiet-link .ui-icon {
  width: 16px;
  height: 16px;
  transition: transform .22s var(--motion-out);
}

.dash-quiet-link:hover .ui-icon {
  transform: translateX(3px);
}

.dash-agenda {
  gap: var(--gap-md);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.dash-agenda-item {
  align-items: flex-start;
  gap: var(--gap-sm);
  display: flex;
}

.dash-chip {
  padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  letter-spacing: .02em;
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  flex: none;
  font-weight: 600;
}

.dash-chip-trend_alert {
  background: var(--color-status-borderline-tint);
  color: var(--color-status-borderline-text);
}

.dash-chip-protocol {
  background: var(--color-accent-tint);
  color: var(--color-action-primary);
}

.dash-agenda-copy {
  gap: var(--space-px);
  min-width: 0;
  display: grid;
}

.dash-agenda-title {
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 540;
}

.dash-agenda-detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dash-agenda-detail.is-overdue {
  color: var(--color-status-high-text);
}

.dash-checklist {
  gap: var(--gap-md);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.dash-checklist li {
  align-items: center;
  gap: var(--gap-md);
  grid-template-columns: auto 1fr auto;
  display: grid;
}

.dash-checklist li span {
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  width: 15px;
  height: 15px;
}

.dash-checklist li span.is-active {
  border-color: var(--color-action-primary);
  background: var(--color-accent-tint);
}

.dash-checklist strong {
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 500;
}

.dash-checklist small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dash-life-body {
  gap: var(--gap-md);
  display: grid;
}

.dash-life-sources {
  gap: var(--gap-3xs);
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
  display: grid;
}

.dash-life-sources span {
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .dash-command-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    grid-template-areas: "body agenda"
                         "labs agenda"
                         "protocol life";
  }
}

@media (max-width: 640px) {
  .dash-command-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "body"
                         "labs"
                         "agenda"
                         "protocol"
                         "life";
  }
}

@container dash (max-width: 1020px) {
  .dash-command-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    grid-template-areas: "body agenda"
                         "labs agenda"
                         "protocol life";
  }
}

@container dash (max-width: 760px) {
  .dash-hero {
    gap: var(--gap-2xl);
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-hero-figure {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .dash-hero-eyebrow {
    grid-column: 1 / -1;
  }

  .dash-hero-copy {
    padding-left: 0;
    padding-top: var(--space-6);
    border-left: 0;
    border-top: 1px solid var(--color-border-soft);
  }
}

@container dash (max-width: 640px) {
  .ui-section-header-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dash .page-head h1 {
    font-size: var(--text-4xl);
  }

  .dash-command-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "body"
                         "labs"
                         "agenda"
                         "protocol"
                         "life";
  }

  .dash-hero {
    padding: var(--card-pad);
  }

  .dash-hero-score {
    font-size: var(--text-6xl);
  }
}

.pub-page {
  width: 100%;
  max-width: var(--page-max-public);
  padding: 0 var(--page-pad-x) var(--space-20);
  color: var(--color-text);
  margin: 0 auto;
  overflow-x: clip;
}

.pub-header {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-lg);
  width: min(calc(100% - 16px), var(--page-max-public));
  margin: var(--space-3-5) auto 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--glass-shell);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  position: sticky;
  top: 0;
}

.pub-brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0;
  color: var(--color-text);
  align-items: center;
  font-weight: 780;
  display: inline-flex;
}

.pub-brand .brand {
  gap: var(--gap-sm);
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
}

.pub-brand .brand-mark-svg {
  width: 32px;
  height: 32px;
}

.pub-nav {
  align-items: center;
  gap: var(--gap-2xl);
  display: flex;
}

.pub-nav a {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: 640;
}

.pub-nav a:hover {
  color: var(--color-text);
}

.pub-nav .pub-sign-in {
  min-height: var(--btn-height-md);
  padding: 0 var(--btn-pad-md);
  border-radius: var(--btn-radius);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  transition: background var(--duration-fast) var(--motion-out), color var(--duration-fast) var(--motion-out);
  align-items: center;
  font-weight: 700;
  display: inline-flex;
}

.pub-nav .pub-sign-in:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
}

.pub-header-menu, .pub-scrim, .pub-drawer {
  display: none;
}

@media (max-width: 820px) {
  .pub-nav {
    display: none;
  }

  .pub-header-menu {
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    color: var(--color-text);
    cursor: pointer;
    background: none;
    border: 0;
    flex: none;
    place-items: center;
    display: grid;
  }

  .pub-header-menu:hover {
    background: var(--color-surface-sunken);
  }

  .pub-scrim {
    z-index: 35;
    background: var(--scrim);
    cursor: pointer;
    border: 0;
    padding: 0;
    display: block;
    position: fixed;
    inset: 0;
  }

  .pub-drawer {
    z-index: 40;
    width: min(280px, 84vw);
    padding: var(--space-18) var(--space-6) var(--space-6);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-overlay);
    transition: transform .25s var(--motion-out);
    flex-direction: column;
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
  }

  .pub-drawer[data-state="open"] {
    transform: translateX(0);
  }

  .pub-drawer a {
    padding: var(--space-3) var(--space-1);
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 620;
  }

  .pub-drawer-sign-in {
    min-height: var(--btn-height-md);
    margin-top: var(--space-3-5);
    border-radius: var(--radius-pill);
    background: var(--color-action-primary);
    justify-content: center;
    align-items: center;
    font-weight: 700;
    display: inline-flex;
    color: var(--color-action-primary-text) !important;
    border-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pub-drawer {
    transition: none;
  }
}

.pub-hero {
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) 0 var(--space-7);
  grid-template-columns: minmax(0, .96fr) minmax(460px, 1.04fr);
  display: grid;
}

.pub-hero-copy {
  gap: var(--gap-2xl);
  display: grid;
}

.pub-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  letter-spacing: 0;
  font-weight: 780;
  line-height: 1.02;
}

.pub-accent {
  color: var(--color-accent);
  font-style: italic;
}

.pub-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-action-primary);
  font-weight: 760;
}

.pub-hero-copy > .pub-eyebrow {
  margin-bottom: -12px;
}

.pub-hero-copy > p {
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.pub-actions {
  gap: var(--gap-md);
  flex-wrap: wrap;
  display: flex;
}

.pub-primary, .pub-secondary {
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--btn-height-lg);
  padding: 0 var(--btn-pad-lg);
  border-radius: var(--btn-radius);
  font-size: var(--text-md);
  transition: background var(--duration-fast) var(--motion-out), border-color var(--duration-fast) var(--motion-out), color var(--duration-fast) var(--motion-out);
  font-weight: 720;
  display: inline-flex;
}

.pub-primary {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.pub-primary:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
}

.pub-secondary {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.pub-secondary:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.pub-primary:active, .pub-final-button:active {
  background: var(--color-action-primary);
}

.pub-secondary:active {
  background: var(--color-surface-sunken);
  border-color: var(--color-text);
}

.pub-primary .ui-icon, .pub-secondary .ui-icon, .pub-final-button .ui-icon {
  width: 17px;
  height: 17px;
  transition: transform var(--duration-fast) var(--motion-out);
}

.pub-primary:hover .ui-icon, .pub-secondary:hover .ui-icon, .pub-final-button:hover .ui-icon {
  transform: translateX(2px);
}

.pub-proof-row {
  justify-content: center;
  gap: var(--gap-sm);
  width: min(100%, 920px);
  margin: var(--space-2) auto 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  flex-wrap: wrap;
  display: flex;
}

.pub-proof-row span {
  align-items: center;
  gap: var(--gap-sm);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 640;
  display: inline-flex;
}

.pub-proof-row .pub-icon {
  width: 17px;
  height: 17px;
  color: var(--color-action-primary);
}

.pub-hero-visual {
  display: grid;
}

.pub-hero-frame {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin: 0;
  overflow: hidden;
}

.pub-hero-frame-bar {
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--space-2-5) var(--space-3-5);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
}

.pub-hero-frame-bar span {
  background: var(--color-border-strong);
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.pub-hero-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.pub-bento-section, .pub-flow-section, .pub-privacy-section, .pub-loop-section {
  padding: var(--section-gap-y) 0 var(--space-2);
}

.pub-bento-section {
  padding-top: var(--space-6);
}

.pub-section-head {
  gap: var(--gap-md);
  max-width: 60ch;
  margin-bottom: var(--space-8);
  display: grid;
}

.pub-section-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: 0;
  font-weight: 760;
}

.pub-section-head p {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}

.pub-bento-grid {
  gap: var(--gap-lg);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
  display: grid;
}

.pub-bento-tile {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  display: grid;
}

.pub-bento-tile--large {
  grid-row: span 2;
  align-content: end;
  overflow: hidden;
}

.pub-bento-tile--large:first-child {
  grid-column: span 3;
}

.pub-bento-tile--large:nth-child(2) {
  grid-column: span 2;
}

.pub-bento-tile--large img {
  object-fit: cover;
  object-position: top;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: block;
}

.pub-bento-caption {
  align-self: end;
  gap: var(--gap-2xs);
  margin: var(--space-3);
  padding: var(--space-3-5) var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--glass-shell);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  grid-area: 1 / 1;
  display: grid;
}

.pub-bento-caption h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-text);
  font-weight: 720;
}

.pub-bento-caption p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.pub-bento-tile--compact {
  gap: var(--gap-sm);
  padding: var(--card-pad);
  align-content: start;
}

.pub-bento-tile--compact h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-text);
  font-weight: 720;
}

.pub-bento-tile--compact p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.pub-icon-box {
  background: var(--color-accent-tint);
  width: 38px;
  height: 38px;
  color: var(--color-action-primary);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.pub-loop-grid {
  gap: var(--gap-lg);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  display: grid;
}

.pub-loop-item {
  gap: var(--gap-sm);
  padding: var(--card-pad);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  display: grid;
}

.pub-loop-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: 720;
}

.pub-loop-item p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.pub-loop-item > .pub-icon {
  width: 24px;
  height: 24px;
  color: var(--color-action-primary);
}

.pub-flow-grid {
  gap: var(--gap-lg);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.pub-flow-card {
  gap: var(--gap-md);
  padding: var(--card-pad);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  align-content: start;
  display: grid;
}

.pub-flow-step {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-action-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

.pub-flow-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: 740;
}

.pub-flow-card p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.pub-flow-card ul {
  gap: var(--gap-xs);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.pub-flow-card li {
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 620;
}

.pub-privacy-section {
  align-items: center;
  gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  display: grid;
}

.pub-privacy-copy h2 {
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: 0;
  font-weight: 760;
}

.pub-privacy-list {
  gap: var(--gap-xl);
  display: grid;
}

.pub-privacy-row {
  gap: var(--gap-lg);
  grid-template-columns: auto 1fr;
  display: grid;
}

.pub-privacy-row > .pub-icon {
  width: 22px;
  height: 22px;
  color: var(--color-action-primary);
}

.pub-privacy-row h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-text);
  font-weight: 720;
}

.pub-privacy-row p {
  margin-top: var(--space-0-5);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.pub-privacy-diagram {
  gap: var(--gap-lg);
  padding: var(--card-pad);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: grid;
}

.pub-data-sources, .pub-data-access {
  justify-content: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  display: flex;
}

.pub-data-sources span, .pub-data-access span {
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: inline-flex;
}

.pub-data-sources .pub-icon, .pub-data-access .pub-icon {
  width: 15px;
  height: 15px;
  color: var(--color-action-primary);
}

.pub-data-core {
  justify-items: center;
  gap: var(--gap-2xs);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  display: grid;
}

.pub-data-core strong {
  background: var(--color-action-primary);
  width: 44px;
  height: 44px;
  color: var(--color-action-primary-text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.pub-data-core span {
  font-size: var(--text-sm);
  color: var(--color-action-primary);
  font-weight: 720;
}

.pub-final-cta {
  gap: var(--gap-xl);
  margin-top: var(--space-18);
  padding: var(--space-12) clamp(var(--space-6), 5vw, var(--space-14));
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  text-align: center;
  justify-items: center;
  display: grid;
}

.pub-final-cta h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: 0;
  font-weight: 760;
}

.pub-final-cta p {
  max-width: 48ch;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}

.pub-final-button {
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--btn-height-lg);
  padding: 0 calc(var(--btn-pad-lg) + var(--space-1));
  border-radius: var(--btn-radius);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  font-size: var(--text-md);
  transition: background var(--duration-fast) var(--motion-out), color var(--duration-fast) var(--motion-out);
  font-weight: 720;
  display: inline-flex;
}

.pub-final-button:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-action-primary-text);
}

.pub-footer {
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-wrap: wrap;
  display: flex;
}

.pub-footer nav {
  gap: var(--gap-lg);
  display: flex;
}

.pub-footer a {
  color: var(--color-text-secondary);
}

.pub-footer a:hover {
  color: var(--color-text);
}

.pub-icon {
  width: 22px;
  height: 22px;
}

@media (max-width: 900px) {
  .pub-hero, .pub-privacy-section {
    gap: var(--gap-3xl);
    grid-template-columns: minmax(0, 1fr);
  }

  .pub-bento-grid, .pub-flow-grid, .pub-loop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pub-bento-tile--large, .pub-bento-tile--large:first-child, .pub-bento-tile--large:nth-child(2) {
    aspect-ratio: 16 / 9;
    grid-area: auto / 1 / auto / -1;
  }

  .pub-bento-tile--compact:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .pub-page {
    padding-inline: calc(var(--page-pad-x) * .7);
  }

  .pub-hero {
    gap: var(--gap-2xl);
    padding: var(--space-8) 0 0;
  }

  .pub-hero-copy {
    gap: var(--gap-xl);
  }

  .pub-hero-copy > .pub-eyebrow {
    margin-bottom: -8px;
  }

  .pub-hero h1 {
    font-size: var(--text-4xl);
  }

  .pub-section-head h2, .pub-privacy-copy h2, .pub-final-cta h2 {
    font-size: var(--text-3xl);
  }

  .pub-hero-copy > p {
    font-size: var(--text-md);
  }

  .pub-bento-section {
    padding-top: 0;
  }

  .pub-bento-grid, .pub-flow-grid, .pub-loop-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pub-bento-tile--large, .pub-bento-tile--large:first-child, .pub-bento-tile--large:nth-child(2), .pub-bento-tile--compact:last-child {
    grid-column: 1;
  }

  .pub-proof-row {
    align-items: stretch;
    gap: var(--gap-sm);
    flex-direction: column;
  }

  .pub-proof-row span {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .pub-actions {
    gap: var(--gap-md);
    flex-wrap: nowrap;
  }

  .pub-primary, .pub-secondary {
    min-height: var(--btn-height-md);
    padding: 0 var(--btn-pad-md);
    font-size: var(--text-base);
  }
}

.legal-page {
  width: 100%;
  max-width: 820px;
  padding: 0 var(--page-pad-x) var(--space-18);
  color: var(--color-text);
  margin: 0 auto;
  overflow-x: clip;
}

.legal-header {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-lg);
  padding: var(--space-5) 0 var(--space-4);
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  position: sticky;
  top: 0;
}

.legal-document {
  padding-top: var(--space-10);
}

.legal-hero {
  gap: var(--gap-md);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border);
  display: grid;
}

.legal-back {
  font-size: var(--text-base);
  color: var(--color-action-primary);
  font-weight: 540;
}

.legal-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: 0;
  font-weight: 480;
}

.legal-hero > p {
  max-width: 58ch;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}

.legal-hero > span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.legal-sections {
  gap: var(--gap-3xl);
  display: grid;
}

.legal-section h2 {
  margin-bottom: var(--space-2-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  font-weight: 500;
}

.legal-section p {
  margin-bottom: var(--space-2-5);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.legal-section ul {
  gap: var(--gap-sm);
  padding-left: var(--space-5);
  margin: 0;
  display: grid;
}

@media (max-width: 560px) {
  .legal-page {
    width: 390px;
    max-width: 100vw;
    padding-inline: calc(var(--page-pad-x) * .7);
    margin-inline: 0;
  }

  .legal-header, .legal-document, .legal-hero, .legal-section, .legal-section p, .legal-section li {
    min-width: 0;
    max-width: 100%;
  }

  .legal-hero h1 {
    font-size: var(--text-4xl);
  }
}

.legal-section li {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.legal-footer {
  margin-top: var(--space-12);
}

.dark {
  --color-canvas: var(--dark-bg);
  --color-surface: var(--dark-surface);
  --color-surface-raised: var(--dark-surface-raised);
  --color-surface-sunken: var(--dark-surface-sunken);
  --color-text: var(--dark-ink-100);
  --color-text-secondary: var(--dark-ink-300);
  --color-text-muted: var(--dark-ink-500);
  --color-border: var(--dark-border);
  --color-border-soft: var(--dark-border-soft);
  --color-border-strong: var(--dark-border-strong);
  --color-action-primary: var(--dark-accent);
  --color-action-primary-hover: var(--dark-accent-hover);
  --color-action-primary-text: var(--dark-ink-100);
  --color-accent: var(--dark-accent);
  --color-accent-tint: var(--dark-accent-tint);
  --color-focus: var(--dark-accent);
  --color-status-in-range: var(--dark-green-400);
  --color-status-in-range-tint: var(--dark-green-900);
  --color-status-in-range-text: var(--dark-green-300);
  --color-status-borderline: var(--dark-amber-400);
  --color-status-borderline-tint: var(--dark-amber-900);
  --color-status-borderline-text: var(--dark-amber-300);
  --color-status-high: var(--dark-red-400);
  --color-status-high-tint: var(--dark-red-900);
  --color-status-high-text: var(--dark-red-300);
  --color-status-low: var(--dark-blue-400);
  --color-status-low-tint: var(--dark-blue-900);
  --color-status-low-text: var(--dark-blue-300);
  --background: var(--dark-bg);
  --foreground: var(--dark-ink-100);
  --card: var(--dark-surface-raised);
  --card-foreground: var(--dark-ink-100);
  --primary: var(--dark-accent);
  --primary-foreground: var(--dark-ink-100);
  --secondary: var(--dark-surface);
  --muted: var(--dark-surface-sunken);
  --muted-foreground: var(--dark-ink-500);
  --accent: var(--dark-accent-tint);
  --border: var(--dark-border);
  --destructive: var(--dark-red-400);
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 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-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@property --tw-scrollbar-thumb {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-scrollbar-track {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes scroll-fade-reveal-t {
  from {
    --scroll-fade-t: 0px;
  }

  to {
    --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
  }
}

@keyframes scroll-fade-reveal-b {
  from {
    --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
  }

  to {
    --scroll-fade-b: 0px;
  }
}

@keyframes scroll-fade-reveal-s {
  from {
    --scroll-fade-s: 0px;
  }

  to {
    --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
  }
}

@keyframes scroll-fade-reveal-e {
  from {
    --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
  }

  to {
    --scroll-fade-e: 0px;
  }
}

@keyframes tw-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}