pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #c9d1d9;
  background: #0d1117
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #ff7b72
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #d2a8ff
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #79c0ff
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #a5d6ff
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #ffa657
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #8b949e
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #7ee787
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #c9d1d9
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #1f6feb;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #f2cc60
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #c9d1d9;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #c9d1d9;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #aff5b4;
  background-color: #033a16
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #ffdcd7;
  background-color: #67060c
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}
/* Override highlight.js theme padding/background — CodeBlock component handles these */
pre code.hljs {
  padding: 0;
  background: transparent;
}
.hljs {
  background: transparent;
}
/* ORDER DEPENDENCY: the reset (@tailwind base / Preflight) is intentionally NOT first. Per the
   CSS spec @import must precede all other rules, so the highlight.js theme above cannot come
   after @tailwind base, and @tailwind base cannot precede the @import. The two .hljs overrides
   above win over BOTH the theme and Preflight by specificity margin (.hljs 0,1,0 and
   pre code.hljs 0,1,1 out-rank Preflight's element-level code/pre 0,0,1), NOT by source order.
   Re-check this block on any Tailwind upgrade that could raise a Preflight base-rule's
   specificity to tie the theme. */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
:root {
    --color-surface-50: #fafafa;
    --color-surface-50-rgb: 250 250 250;
    --color-surface-100: #f4f4f5;
    --color-surface-100-rgb: 244 244 245;
    --color-surface-200: #e4e4e7;
    --color-surface-200-rgb: 228 228 231;
    --color-surface-300: #d4d4d8;
    --color-surface-300-rgb: 212 212 216;
    --color-surface-400: #52525b; /* bumped from zinc-400 to zinc-600 for WCAG AA 7:1 on surface-100 (RT-F013) */
    --color-surface-400-rgb: 82 82 91;
    --color-surface-500: #6d6d76; /* darkened from zinc-500 #71717a (4.40:1) for WCAG AA 4.5:1+ small-text on surface-100 (axe color-contrast) */
    --color-surface-500-rgb: 109 109 118;
    --color-surface-600: #52525b;
    --color-surface-600-rgb: 82 82 91;
    --color-surface-700: #3f3f46;
    --color-surface-700-rgb: 63 63 70;
    --color-surface-800: #27272a;
    --color-surface-800-rgb: 39 39 42;
    --color-surface-900: #18181b;
    --color-surface-900-rgb: 24 24 27;
    --color-surface-950: #09090b;
    --color-surface-950-rgb: 9 9 11;

    /* Light mode panel defaults — overridden by .dark and per-theme */
    --panel-bg: #ffffff;
    --panel-bg-hover: rgba(0, 0, 0, 0.02);
    --panel-bg-active: rgba(0, 0, 0, 0.04);
    --panel-border: rgba(0, 0, 0, 0.08);
    --panel-blur: 0px;
    --panel-radius: 0px;
    --panel-shadow: none;
    --shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.25); /* F207 — shared elevation token */
    --shadow-sheet: 0 -12px 32px rgba(0, 0, 0, 0.45); /* F207 — QW bottom-sheet upward shadow */
    --shadow-btn-hover: 0 6px 18px rgb(0 0 0 / 0.22); /* F207 — polish button hover lift */
    --panel-gap: 0px;
    --z-qw-sheet-backdrop: 999; /* F299 — QW mobile dimmer sits 1 below modal (1000); named so lint guard passes */
    --accent: #6366f1;
    --accent-rgb: 99 102 241;
    --accent-glow: rgba(99, 102, 241, 0.2);
    --active-indicator: #6366f1;
    --badge-bg: rgba(245, 158, 11, 0.12);
    --badge-color: #d97706;
    --font-weight-body: 400;
    --card-bg: var(--panel-bg);
    --app-font-size: 16px;
    /* Body + monospace typefaces — themeable via a custom theme's `fontFamily` /
       `fontFamilyMono`. Defined once in :root and inherited by every skin. The
       mono var is read by BOTH the Tailwind `font-mono` utility (tailwind.config.js
       points fontFamily.mono at it) AND the hardcoded mono rules below, so a theme
       recolours every code / terminal / diagnostics surface in one place. */
    --font-family-body:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Tooltip bubble — always-dark glass. Defined once and inherited by every
       theme (light + all .dark skins). The text colour (`--tooltip-fg`) is
       themeable via `tooltipText`; its fallback is a light gray so the bubble
       stays readable on the default dark background even before a theme sets it.
       Near-opaque so it reads even when backdrop-blur fails to composite (Electron). */
    --tooltip-bg: rgba(24, 24, 27, 0.95);
    --tooltip-border: rgba(255, 255, 255, 0.1);
    --tooltip-fg: #e4e4e7;

    /* Message-area depth tokens — consumed by .msg-surface (chat bubbles + the
       activity pill). Base values = the "soft" dial rung; the
       html[data-chat-depth='…'] blocks below override the intensity, and the
       Chat Depth setting writes that attribute (mirrors data-font-size). Black
       shadow + white sheen is mode-agnostic, so these cascade into .dark without
       a duplicate. Every consumer still passes a literal fallback. */
    --msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.14);
    --msg-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);

    /* Status colors — the app's semantic status language (running/agent green,
       needs-you amber, error red, warning/ember, ready, question, plan-approval)
       + links. CSS-var-backed so a custom theme can recolor them; consumed via the
       Tailwind `status-*` / `ember` / `link` tokens (tailwind.config.js) which every
       status surface reads through STATUS_DISPLAY (utils.ts) + shared primitives.
       Mode-invariant (a green running dot is green in both themes) so they live in
       :root and cascade into .dark — same pattern as --msg-*. Defaults = the prior
       hardcoded Tailwind palette values, so NOTHING changes unless a theme overrides
       them. Space-separated RGB (no commas) so Tailwind's `/ <alpha>` opacity works. */
    --status-agent-rgb: 74 222 128; /* green-400 */
    --status-needs-you-rgb: 251 191 36; /* amber-400 */
    --status-error-rgb: 248 113 113; /* red-400 */
    --status-ready-rgb: 165 243 252; /* cyan-200 */
    --status-question-rgb: 37 99 235; /* blue-600 */
    --status-approval-rgb: 167 139 250; /* violet-400 */
    --status-ember-400-rgb: 255 138 76; /* #ff8a4c — waiting (brighter) */
    --status-ember-500-rgb: 249 90 22; /* #f95a16 — stalled/rate-limited/paused */
    --status-ember-600-rgb: 234 68 12; /* #ea440c — hover */
    /* Strong (solid-fill) shades — for danger/warning/success action buttons where
       white text needs the contrast the -400 signal shade can't give. Defaults = the
       prior hardcoded -600 button fills; deliberately NOT theme keys (action buttons
       stay a conventional red/amber/green regardless of the status-language theme). */
    --status-agent-strong-rgb: 22 163 74; /* green-600 */
    --status-needs-you-strong-rgb: 217 119 6; /* amber-600 */
    --status-error-strong-rgb: 220 38 38; /* red-600 */
    --link-rgb: var(--accent-rgb); /* links follow the accent unless a theme sets linkRgb */

    /* ── Shared design-token scale ──────────────────────────────────────────
       The canonical motion / elevation / spacing scales the audit calls for
       (F001 / F047 / F048 / F099 / F100 / F101 / F129 / RT-F006 / RT-F007).
       These are added as an ADDITIVE scaffold: new/refactored surfaces should
       consume these tokens instead of hardcoding a literal. Migrating the
       ~4800 lines of existing box-shadow / duration / spacing / font literals
       in this file onto them is intentionally OUT OF SCOPE for this pass — the
       scaffold lands first, the sweep follows. */
    /* Motion durations + standard easing (F099 / RT-F006). */
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 300ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    /* Elevation ladder — 4 steps of drop shadow (F001 / RT-F007). */
    --elevation-1: 0 1px 2px rgb(0 0 0 / 0.08);
    --elevation-2: 0 2px 6px rgb(0 0 0 / 0.12);
    --elevation-3: 0 8px 20px rgb(0 0 0 / 0.18);
    --elevation-4: 0 20px 44px rgb(0 0 0 / 0.28);
    /* Floating-menu edge — the "lift" that stops a menu blending into the app.
       A definition RING (literal rgba, so it reads on ANY theme/backdrop — the
       backdrop-independent I5 principle, never a surface shade that blends
       somewhere) + a drop shadow. This :root value is the LIGHT default; .dark
       overrides it with a light hairline + a much stronger shadow (a 10%-black
       shadow is invisible on a near-black dark theme). Consumed only via the
       .amc-overlay-elevation utility on floating menus/dropdowns/popovers. */
    --overlay-elevation:
      0 0 0 1px rgb(0 0 0 / 0.08), 0 6px 16px -6px rgb(0 0 0 / 0.14),
      0 14px 34px -10px rgb(0 0 0 / 0.2);
    /* Spacing scale — 4/8/12/16/24/32px (F048 / F100). */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
  }
.dark {
    --color-surface-50: #09090b;
    --color-surface-50-rgb: 9 9 11;
    --color-surface-100: #18181b;
    --color-surface-100-rgb: 24 24 27;
    --color-surface-200: #27272a;
    --color-surface-200-rgb: 39 39 42;
    --color-surface-300: #3f3f46;
    --color-surface-300-rgb: 63 63 70;
    --color-surface-400: #a1a1aa; /* bumped to zinc-400 for WCAG AA 7:1 on dark surface-100 (RT-F013) */
    --color-surface-400-rgb: 161 161 170;
    --color-surface-500: #82828b; /* brightened from zinc-500 #71717a (3.59:1) for WCAG AA 4.5:1+ small-text on dark surface-100 (axe color-contrast) */
    --color-surface-500-rgb: 130 130 139;
    --color-surface-600: #a1a1aa;
    --color-surface-600-rgb: 161 161 170;
    --color-surface-700: #d4d4d8;
    --color-surface-700-rgb: 212 212 216;
    --color-surface-800: #e4e4e7;
    --color-surface-800-rgb: 228 228 231;
    --color-surface-900: #f4f4f5;
    --color-surface-900-rgb: 244 244 245;
    --color-surface-950: #fafafa;
    --color-surface-950-rgb: 250 250 250;

    /* Visual theme tokens — overridden per skin */
    --panel-bg: rgba(255, 255, 255, 0.03);
    --panel-bg-hover: rgba(255, 255, 255, 0.06);
    --panel-bg-active: rgba(255, 255, 255, 0.1);
    --panel-border: rgba(255, 255, 255, 0.06);
    --panel-blur: 0px;
    --panel-radius: 0px;
    --panel-shadow: none;
    --shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.25); /* F207 — shared elevation token */
    --shadow-sheet: 0 -12px 32px rgba(0, 0, 0, 0.45); /* F207 — QW bottom-sheet upward shadow */
    --shadow-btn-hover: 0 6px 18px rgb(0 0 0 / 0.22); /* F207 — polish button hover lift */
    --panel-gap: 0px;
    --z-qw-sheet-backdrop: 999; /* F299 — QW mobile dimmer sits 1 below modal (1000); named so lint guard passes */
    --accent: #6366f1;
    --accent-rgb: 99 102 241;
    --accent-glow: rgba(99, 102, 241, 0.3);
    --active-indicator: #6366f1;
    --badge-bg: rgba(245, 158, 11, 0.15);
    --badge-color: #fbbf24;
    --font-weight-body: 400;
    --card-bg: var(--panel-bg);
    /* Dark override: light hairline ring + a strong drop shadow so the menu lifts
       off a near-black background (the 10%-black :root shadow is invisible here). */
    --overlay-elevation:
      0 0 0 1px rgb(255 255 255 / 0.1), 0 8px 24px -6px rgb(0 0 0 / 0.55),
      0 18px 42px -12px rgb(0 0 0 / 0.55);
  }
/* Explicit-LIGHT counterpart of .dark — the SAME var set as .dark above, with
     the light values from :root. Lets a nested subtree be forced light even when
     <html> is .dark (the Mind Map's own color-mode). It deliberately omits the
     app-wide :root vars that .dark doesn't touch (font size, tooltip, msg-*) so
     scoping the mind map never resets those. Nothing else uses .light. */
.light {
    --color-surface-50: #fafafa;
    --color-surface-50-rgb: 250 250 250;
    --color-surface-100: #f4f4f5;
    --color-surface-100-rgb: 244 244 245;
    --color-surface-200: #e4e4e7;
    --color-surface-200-rgb: 228 228 231;
    --color-surface-300: #d4d4d8;
    --color-surface-300-rgb: 212 212 216;
    --color-surface-400: #a1a1aa;
    --color-surface-400-rgb: 161 161 170;
    --color-surface-500: #71717a;
    --color-surface-500-rgb: 113 113 122;
    --color-surface-600: #52525b;
    --color-surface-600-rgb: 82 82 91;
    --color-surface-700: #3f3f46;
    --color-surface-700-rgb: 63 63 70;
    --color-surface-800: #27272a;
    --color-surface-800-rgb: 39 39 42;
    --color-surface-900: #18181b;
    --color-surface-900-rgb: 24 24 27;
    --color-surface-950: #09090b;
    --color-surface-950-rgb: 9 9 11;
    --panel-bg: #ffffff;
    --panel-bg-hover: rgba(0, 0, 0, 0.02);
    --panel-bg-active: rgba(0, 0, 0, 0.04);
    --panel-border: rgba(0, 0, 0, 0.08);
    --panel-blur: 0px;
    --panel-radius: 0px;
    --panel-shadow: none;
    --shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.25); /* F207 — shared elevation token */
    --shadow-sheet: 0 -12px 32px rgba(0, 0, 0, 0.45); /* F207 — QW bottom-sheet upward shadow */
    --shadow-btn-hover: 0 6px 18px rgb(0 0 0 / 0.22); /* F207 — polish button hover lift */
    --panel-gap: 0px;
    --z-qw-sheet-backdrop: 999; /* F299 — QW mobile dimmer sits 1 below modal (1000); named so lint guard passes */
    --accent: #6366f1;
    --accent-rgb: 99 102 241;
    --accent-glow: rgba(99, 102, 241, 0.2);
    --active-indicator: #6366f1;
    --badge-bg: rgba(245, 158, 11, 0.12);
    --badge-color: #d97706;
    --font-weight-body: 400;
    --card-bg: var(--panel-bg);
    /* Match :root (light) — a forced-light nested subtree keeps the light edge. */
    --overlay-elevation:
      0 0 0 1px rgb(0 0 0 / 0.08), 0 6px 16px -6px rgb(0 0 0 / 0.14),
      0 14px 34px -10px rgb(0 0 0 / 0.2);
  }
/* ── Visual Theme: Glassmorphism (default) ─────────────────────────────── */
.dark.theme-glassmorphism {
    --color-surface-50: #08080e;
    --color-surface-50-rgb: 8 8 14;
    --color-surface-100: #0e0e16;
    --color-surface-100-rgb: 14 14 22;
    --color-surface-200: #1a1a28;
    --color-surface-200-rgb: 26 26 40;
    --color-surface-300: #28283d;
    --color-surface-300-rgb: 40 40 61;
    --panel-bg: rgba(255, 255, 255, 0.06);
    --panel-bg-hover: rgba(255, 255, 255, 0.1);
    --panel-bg-active: rgba(255, 255, 255, 0.14);
    --panel-border: rgba(255, 255, 255, 0.1);
    --panel-blur: 20px;
    --panel-shadow: 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.3);
    --accent: #818cf8;
    --accent-rgb: 129 140 248;
    --accent-glow: rgba(129, 140, 248, 0.35);
    --active-indicator: #818cf8;
    --card-bg: var(--color-surface-100);
  }
/* ── Visual Theme: Linear-Inspired ─────────────────────────────────────── */
.dark.theme-linear {
    --color-surface-50: #111113;
    --color-surface-50-rgb: 17 17 19;
    --color-surface-100: #17171c;
    --color-surface-100-rgb: 23 23 28;
    --color-surface-200: #222228;
    --color-surface-200-rgb: 34 34 40;
    --color-surface-300: #33333d;
    --color-surface-300-rgb: 51 51 61;
    --panel-bg: #15151a;
    --panel-bg-hover: rgba(255, 255, 255, 0.04);
    --panel-bg-active: rgba(255, 255, 255, 0.06);
    --panel-border: rgba(255, 255, 255, 0.06);
    --accent: #5e6ad2;
    --accent-rgb: 94 106 210;
    --accent-glow: rgba(94, 106, 210, 0.3);
    --active-indicator: #5e6ad2;
  }
/* ── Visual Theme: Warm Charcoal ───────────────────────────────────────── */
.dark.theme-warm-charcoal {
    --color-surface-50: #1a1816;
    --color-surface-50-rgb: 26 24 22;
    --color-surface-100: #1e1c19;
    --color-surface-100-rgb: 30 28 25;
    --color-surface-200: #2a2520;
    --color-surface-200-rgb: 42 37 32;
    --color-surface-300: #3d3530;
    --color-surface-300-rgb: 61 53 48;
    --color-surface-400: #5a504a;
    --color-surface-400-rgb: 90 80 74;
    --color-surface-500: #7a706a;
    --color-surface-500-rgb: 122 112 106;
    --color-surface-600: #b0a89f;
    --color-surface-600-rgb: 176 168 159;
    --color-surface-700: #d8d0c8;
    --color-surface-700-rgb: 216 208 200;
    --color-surface-800: #e8e4df;
    --color-surface-800-rgb: 232 228 223;
    --color-surface-900: #f2eeea;
    --color-surface-900-rgb: 242 238 234;
    --color-surface-950: #faf8f5;
    --color-surface-950-rgb: 250 248 245;
    --panel-bg: #1e1c19;
    --panel-bg-hover: rgba(232, 228, 223, 0.04);
    --panel-bg-active: rgba(194, 149, 106, 0.08);
    --panel-border: rgba(255, 245, 230, 0.06);
    --accent: #c2956a;
    --accent-rgb: 194 149 106;
    --accent-glow: rgba(194, 149, 106, 0.3);
    --active-indicator: #c2956a;
    --badge-bg: rgba(194, 149, 106, 0.18);
    --badge-color: #e8b88a;
  }
/* ── Visual Theme: Aurora Gradient ─────────────────────────────────────── */
.dark.theme-aurora {
    --color-surface-50: #0c0c14;
    --color-surface-50-rgb: 12 12 20;
    --color-surface-100: #12121e;
    --color-surface-100-rgb: 18 18 30;
    --color-surface-200: #1e1e30;
    --color-surface-200-rgb: 30 30 48;
    --color-surface-300: #2d2d45;
    --color-surface-300-rgb: 45 45 69;
    --panel-bg: rgba(255, 255, 255, 0.025);
    --panel-bg-hover: rgba(255, 255, 255, 0.05);
    --panel-bg-active: rgba(99, 102, 241, 0.08);
    --panel-border: rgba(255, 255, 255, 0.04);
    --panel-blur: 16px;
    --accent: #818cf8;
    --accent-rgb: 129 140 248;
    --accent-glow: rgba(129, 140, 248, 0.35);
    --active-indicator: #818cf8;
    --card-bg: var(--color-surface-100);
  }
/* ── Visual Theme: Soft Depth ──────────────────────────────────────────── */
.dark.theme-soft-depth {
    --color-surface-50: #121216;
    --color-surface-50-rgb: 18 18 22;
    --color-surface-100: #18181e;
    --color-surface-100-rgb: 24 24 30;
    --color-surface-200: #232329;
    --color-surface-200-rgb: 35 35 41;
    --color-surface-300: #33333d;
    --color-surface-300-rgb: 51 51 61;
    --panel-bg: #18181e;
    --panel-bg-hover: rgba(255, 255, 255, 0.035);
    --panel-bg-active: rgba(99, 102, 241, 0.1);
    --panel-border: rgba(255, 255, 255, 0.06);
    --panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    --accent: #6366f1;
    --accent-rgb: 99 102 241;
    --accent-glow: rgba(99, 102, 241, 0.25);
    --active-indicator: #6366f1;
  }
/* ── Visual Theme: Neon Accent ─────────────────────────────────────────── */
.dark.theme-neon {
    --color-surface-50: #0d0d11;
    --color-surface-50-rgb: 13 13 17;
    --color-surface-100: #0f0f14;
    --color-surface-100-rgb: 15 15 20;
    --color-surface-200: #1a1a22;
    --color-surface-200-rgb: 26 26 34;
    --color-surface-300: #28283a;
    --color-surface-300-rgb: 40 40 58;
    --panel-bg: #0f0f14;
    --panel-bg-hover: rgba(139, 92, 246, 0.04);
    --panel-bg-active: rgba(139, 92, 246, 0.08);
    --panel-border: rgba(139, 92, 246, 0.08);
    --accent: #8b5cf6;
    --accent-rgb: 139 92 246;
    --accent-glow: rgba(139, 92, 246, 0.5);
    --active-indicator: #8b5cf6;
    --badge-bg: rgba(6, 182, 212, 0.12);
    --badge-color: #67e8f9;
  }
/* ── Visual Theme: Spotify Cards ───────────────────────────────────────── */
.dark.theme-spotify {
    --color-surface-50: #121212;
    --color-surface-50-rgb: 18 18 18;
    --color-surface-100: #181818;
    --color-surface-100-rgb: 24 24 24;
    --color-surface-200: #282828;
    --color-surface-200-rgb: 40 40 40;
    --color-surface-300: #3a3a3a;
    --color-surface-300-rgb: 58 58 58;
    --color-surface-400: #535353;
    --color-surface-400-rgb: 83 83 83;
    --color-surface-500: #727272;
    --color-surface-500-rgb: 114 114 114;
    --color-surface-600: #a7a7a7;
    --color-surface-600-rgb: 167 167 167;
    --color-surface-700: #d4d4d4;
    --color-surface-700-rgb: 212 212 212;
    --color-surface-800: #e0e0e0;
    --color-surface-800-rgb: 224 224 224;
    --color-surface-900: #f0f0f0;
    --color-surface-900-rgb: 240 240 240;
    --color-surface-950: #ffffff;
    --color-surface-950-rgb: 255 255 255;
    --panel-bg: #181818;
    --panel-bg-hover: rgba(255, 255, 255, 0.08);
    --panel-bg-active: rgba(255, 255, 255, 0.12);
    --panel-border: transparent;
    --panel-radius: 10px;
    --panel-gap: 8px;
    --accent: #1db954;
    --accent-rgb: 29 185 84;
    --accent-glow: rgba(29, 185, 84, 0.35);
    --active-indicator: #1db954;
    --badge-bg: #1db954;
    --badge-color: #000000;
  }
/* ── Visual Theme: Minimal Luxury ──────────────────────────────────────── */
.dark.theme-luxury {
    --color-surface-50: #141418;
    --color-surface-50-rgb: 20 20 24;
    --color-surface-100: #17171c;
    --color-surface-100-rgb: 23 23 28;
    --color-surface-200: #222228;
    --color-surface-200-rgb: 34 34 40;
    --color-surface-300: #33333d;
    --color-surface-300-rgb: 51 51 61;
    --panel-bg: #17171c;
    --panel-bg-hover: rgba(255, 255, 255, 0.02);
    --panel-bg-active: rgba(212, 175, 55, 0.06);
    --panel-border: rgba(255, 255, 255, 0.04);
    --accent: #d4af37;
    --accent-rgb: 212 175 55;
    --accent-glow: rgba(212, 175, 55, 0.3);
    --active-indicator: #d4af37;
    --badge-bg: transparent;
    --badge-color: #d4af37;
    --font-weight-body: 300;
  }
/* ── Visual Theme: Gradient Sidebar ────────────────────────────────────── */
.dark.theme-gradient-sidebar {
    --color-surface-50: #111115;
    --color-surface-50-rgb: 17 17 21;
    --color-surface-100: #16142a;
    --color-surface-100-rgb: 22 20 42;
    --color-surface-200: #222235;
    --color-surface-200-rgb: 34 34 53;
    --color-surface-300: #33334a;
    --color-surface-300-rgb: 51 51 74;
    --panel-bg: #15151c;
    --panel-bg-hover: rgba(255, 255, 255, 0.035);
    --panel-bg-active: rgba(99, 102, 241, 0.1);
    --panel-border: rgba(255, 255, 255, 0.05);
    --accent: #8b5cf6;
    --accent-rgb: 139 92 246;
    --accent-glow: rgba(236, 72, 153, 0.3);
    --active-indicator: #8b5cf6;
    --badge-bg: rgba(99, 102, 241, 0.2);
    --badge-color: #f9a8d4;
  }
/* ── Visual Theme: Neumorphic Dark ─────────────────────────────────────── */
.dark.theme-neumorphic {
    --color-surface-50: #1e1e24;
    --color-surface-50-rgb: 30 30 36;
    --color-surface-100: #1e1e24;
    --color-surface-100-rgb: 30 30 36;
    --color-surface-200: #28282e;
    --color-surface-200-rgb: 40 40 46;
    --color-surface-300: #38383e;
    --color-surface-300-rgb: 56 56 62;
    --panel-bg: #1e1e24;
    --panel-bg-hover: rgba(255, 255, 255, 0.015);
    --panel-bg-active: #1e1e24;
    --panel-border: transparent;
    --panel-radius: 16px;
    --panel-gap: 12px;
    --panel-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25), -6px -6px 12px rgba(255, 255, 255, 0.02);
    --accent: #6366f1;
    --accent-rgb: 99 102 241;
    --accent-glow: rgba(99, 102, 241, 0.3);
    --active-indicator: #a5b4fc;
  }
/* ── Visual Theme: Frosted Tiers ───────────────────────────────────────── */
.dark.theme-frosted-tiers {
    --color-surface-50: #0e1117;
    --color-surface-50-rgb: 14 17 23;
    --color-surface-100: #161b22;
    --color-surface-100-rgb: 22 27 34;
    --color-surface-200: #21262d;
    --color-surface-200-rgb: 33 38 45;
    --color-surface-300: #30363d;
    --color-surface-300-rgb: 48 54 61;
    --color-surface-400: #484f58;
    --color-surface-400-rgb: 72 79 88;
    --color-surface-500: #6e7681;
    --color-surface-500-rgb: 110 118 129;
    --color-surface-600: #8b949e;
    --color-surface-600-rgb: 139 148 158;
    --color-surface-700: #c9d1d9;
    --color-surface-700-rgb: 201 209 217;
    --color-surface-800: #e6edf3;
    --color-surface-800-rgb: 230 237 243;
    --color-surface-900: #f0f6fc;
    --color-surface-900-rgb: 240 246 252;
    --color-surface-950: #ffffff;
    --color-surface-950-rgb: 255 255 255;
    --panel-bg: rgba(255, 255, 255, 0.03);
    --panel-bg-hover: rgba(255, 255, 255, 0.04);
    --panel-bg-active: rgba(88, 166, 255, 0.08);
    --panel-border: rgba(255, 255, 255, 0.05);
    --panel-blur: 8px;
    --accent: #58a6ff;
    --accent-rgb: 88 166 255;
    --accent-glow: rgba(88, 166, 255, 0.3);
    --active-indicator: #58a6ff;
    --badge-bg: rgba(245, 158, 11, 0.12);
    --badge-color: #f0b74c;
    --card-bg: var(--color-surface-100);
  }
/* ── Visual Theme: Vercel Clean ────────────────────────────────────────── */
.dark.theme-vercel {
    --color-surface-50: #000000;
    --color-surface-50-rgb: 0 0 0;
    --color-surface-100: #0a0a0a;
    --color-surface-100-rgb: 10 10 10;
    --color-surface-200: #1a1a1a;
    --color-surface-200-rgb: 26 26 26;
    --color-surface-300: #333333;
    --color-surface-300-rgb: 51 51 51;
    --color-surface-400: #444444;
    --color-surface-400-rgb: 68 68 68;
    --color-surface-500: #666666;
    --color-surface-500-rgb: 102 102 102;
    --color-surface-600: #888888;
    --color-surface-600-rgb: 136 136 136;
    --color-surface-700: #cccccc;
    --color-surface-700-rgb: 204 204 204;
    --color-surface-800: #dddddd;
    --color-surface-800-rgb: 221 221 221;
    --color-surface-900: #ededed;
    --color-surface-900-rgb: 237 237 237;
    --color-surface-950: #fafafa;
    --color-surface-950-rgb: 250 250 250;
    --panel-bg: #0a0a0a;
    --panel-bg-hover: #111111;
    --panel-bg-active: #111111;
    --panel-border: #222222;
    --accent: #ffffff;
    --accent-rgb: 255 255 255;
    --accent-glow: rgba(255, 255, 255, 0.15);
    --active-indicator: #ededed;
    --badge-bg: #1a1a1a;
    --badge-color: #ededed;
  }
/* ── Visual Theme: Liquid Glass ────────────────────────────────────────── */
.dark.theme-liquid-glass {
    --color-surface-50: #080b11;
    --color-surface-50-rgb: 8 11 17;
    --color-surface-100: #0c1118;
    --color-surface-100-rgb: 12 17 24;
    --color-surface-200: #141b26;
    --color-surface-200-rgb: 20 27 38;
    --color-surface-300: #1f2937;
    --color-surface-300-rgb: 31 41 55;
    --panel-bg: rgba(255, 255, 255, 0.06);
    --panel-bg-hover: rgba(255, 255, 255, 0.1);
    --panel-bg-active: rgba(255, 255, 255, 0.14);
    --panel-border: rgba(255, 255, 255, 0.12);
    --panel-blur: 24px;
    --panel-radius: 14px;
    --panel-shadow: 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 28px rgba(0, 0, 0, 0.4);
    --panel-gap: 6px;
    --accent: #5eb3f0;
    --accent-rgb: 94 179 240;
    --accent-glow: rgba(94, 179, 240, 0.4);
    --active-indicator: #5eb3f0;
    --card-bg: var(--color-surface-100);
  }
/* ═══════════════════════════════════════════════════════════════════════
     LIGHT MODE THEME VARIANTS
     Auto-selected when user is in light mode with a visual theme active.
     Selector: .theme-X:not(.dark) — mutually exclusive with .dark.theme-X
     ═══════════════════════════════════════════════════════════════════════ */
/* ── Light Theme: Glassmorphism ──────────────────────────────────────── */
/* ── Light Theme: Linear ─────────────────────────────────────────────── */
/* ── Light Theme: Warm Linen ─────────────────────────────────────────── */
/* ── Light Theme: Aurora ─────────────────────────────────────────────── */
/* ── Light Theme: Soft Depth ─────────────────────────────────────────── */
/* ── Light Theme: Neon Accent ────────────────────────────────────────── */
/* ── Light Theme: Spotify ────────────────────────────────────────────── */
/* ── Light Theme: Minimal Luxury ─────────────────────────────────────── */
/* ── Light Theme: Gradient ───────────────────────────────────────────── */
/* ── Light Theme: Neumorphic ─────────────────────────────────────────── */
/* ── Light Theme: Frosted Tiers ──────────────────────────────────────── */
/* ── Light Theme: Vercel Clean ───────────────────────────────────────── */
/* ── Light Theme: Liquid Glass ───────────────────────────────────────── */
html {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
    font-size: var(--app-font-size);
  }
/* Font size presets — applied via data attribute on <html>.
     Sets root font-size so all rem-based Tailwind classes scale proportionally. */
html[data-font-size='extra-small'] {
    --app-font-size: 12px;
  }
html[data-font-size='small'] {
    --app-font-size: 14px;
  }
html[data-font-size='medium'] {
    --app-font-size: 16px;
  }
html[data-font-size='large'] {
    --app-font-size: 18px;
  }
html[data-font-size='extra-large'] {
    --app-font-size: 20px;
  }
html[data-font-size='xx-large'] {
    --app-font-size: 22px;
  }
html[data-font-size='xxx-large'] {
    --app-font-size: 24px;
  }
/* Chat Depth dial — overrides the message-area depth INTENSITY. Written as a
     data attribute on <html> by the Chat Depth setting (App.tsx /
     DetachedSessionApp.tsx), mirroring data-font-size. The CHAT_DEPTHS array in
     src/shared/chat-depth.ts is the SSOT; keep these rungs in sync with it.
     Mode-agnostic (black shadow + white sheen) so one block covers light+dark. */
html[data-chat-depth='flat'] {
    --msg-shadow: none;
    --msg-highlight: none;
  }
html[data-chat-depth='soft'] {
    --msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.14);
    --msg-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  }
html[data-chat-depth='glass'] {
    --msg-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.22),
      0 16px 36px rgba(0, 0, 0, 0.34);
    --msg-highlight:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 0 rgba(0, 0, 0, 0.18);
  }
/* Motion & Polish — Depth & elevation. Opt-in + gated: App.tsx writes
     data-polish-depth='on' on <html> ONLY when BOTH the master "Motion & Polish"
     switch AND the Depth toggle are on (lib/motion-polish.ts → computePolishAttributes).
     Otherwise the attribute is absent and surfaces stay flat (the classic look).
     Mode-agnostic, like the Chat Depth dial above: an inset WHITE top sheen reads
     on dark themes (a black-only drop shadow is invisible on the near-black canvas);
     the black layers read on light themes.

     Two-tier elevation scale (app-wide depth, user-requested 2026-06-06):
       --polish-elevation-panel → big structural surfaces (sidebars, main pane): a
         soft edge lift, kept gentle so a full-height panel doesn't read as heavy.
       --polish-elevation-card  → cards/stat cards/setting rows: the stronger lift
         (the "Stronger" rung from the preview).
     Modals + popovers already carry their own always-on `shadow-xl`/`shadow-2xl`,
     so they are intentionally NOT gated here (gating them would DROP their shadow
     when the dial is off — a regression). Depth here only ADDS to flat surfaces. */
html[data-polish-depth='on'] {
    --polish-elevation-panel:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.16),
      0 10px 24px rgba(0, 0, 0, 0.22);
    --polish-elevation-card:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 2px 6px rgba(0, 0, 0, 0.2), 0 14px 30px rgba(0, 0, 0, 0.34);
  }
/* Elevation hooks — appended to shared constants/surfaces via the `amc-elevate*`
     classes. The literal `0 0 #0000` fallback is a valid no-op shadow, so surfaces are
     byte-identical to before whenever the dial is off or the var is unset.
     Paint-only box-shadow; never paired with backdrop-filter/transform. */
.amc-elevate {
    box-shadow: var(--polish-elevation-card, 0 0 #0000);
  }
.amc-elevate-panel {
    box-shadow: var(--polish-elevation-panel, 0 0 #0000);
  }
/* List row hairline — the divider between adjacent standardized list items
     (ListItem with `divided`, default on). Drawn on the 2nd..nth adjacent sibling
     so it never sits before the first row or after the last, and works in any
     plain list container by construction (no per-container :first-child reset). */
.amc-list-item--divided + .amc-list-item--divided {
    border-top: 1px solid rgb(var(--color-surface-300-rgb) / 0.5);
  }
/* Quiet section "seam" — the canonical divider between the major sections of a
     surface (a header/body/footer, two panes). ONE source of truth so the app's
     dividers stay consistent and update in one place (styles.ts re-exports these
     as SEAM_T/SEAM_B/SEAM_R). It uses the theme-aware --panel-border token — a
     whisper-faint translucent hairline, NOT a loud opaque line — so it reads as a
     soft seam on every theme (the Question-Widget aesthetic; "borders are quiet,
     panels sit back"). Border ONLY by design: any per-surface depth-shadow is
     layered separately so this never clobbers an element's existing box-shadow.
     The literal fallback guards the rare frame where --panel-border is unset. */
.amc-seam-t {
    border-top: 1px solid var(--panel-border, rgb(255 255 255 / 0.08));
  }
.amc-seam-b {
    border-bottom: 1px solid var(--panel-border, rgb(255 255 255 / 0.08));
  }
.amc-seam-r {
    border-right: 1px solid var(--panel-border, rgb(255 255 255 / 0.08));
  }
/* 3D "raised" button depth — the tactile look for the FILLED, colored buttons
     (Button's primary/danger/warning/success variants + BUTTON_PRIMARY*). It is
     PAINT-ONLY (box-shadow + a translucent gloss over the variant's own bg) on
     purpose:
       - never collides with `amc-pol-btn`'s hover/active TRANSFORM (Motion &
         Polish) — they compose instead of fighting;
       - survives `.low-power` / `.software-render`, where transforms are killed
         but box-shadow is not, so the raised depth persists;
       - the existing `active:scale-[0.98]` on the button supplies the press.
     FILL-AGNOSTIC: the sheen + shadows are white/black overlays painted OVER
     whatever `bg-*` the variant sets, so ONE class works on accent / red / amber
     / green. MODE-AGNOSTIC: the white sheen reads on dark themes, the black
     layers read on light/white themes (same approach as --msg-shadow). The
     focus-visible ring is a Tailwind UTILITY (higher layer) and intentionally
     wins over this base-layer shadow while focused, so keyboard focus is never
     hidden. Disabled drops the gloss+shadow so it can't read as active. */
.amc-btn-raised {
    background-image: linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.1),
      rgb(255 255 255 / 0) 45%,
      rgb(0 0 0 / 0.12)
    );
    /* Clip the gloss gradient to the padding box. On a rounded corner Chromium
       bleeds a gradient's bright TOP stop onto the anti-aliased BOTTOM edge — a
       pixel row brighter than the fill, seen as a stray light "line" hugging the
       bottom. padding-box keeps the gradient off the border-box rounded edge and
       removes it; the look is otherwise identical. Verified by per-row pixel
       luminance at DPR 2.0 + 1.5. Guard: raised-chrome-no-gradient-bleed.test.ts. */
    background-clip: padding-box;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      inset 0 -1px 1px rgb(0 0 0 / 0.18),
      0 5px 12px -2px rgb(0 0 0 / 0.4),
      0 2px 4px -1px rgb(0 0 0 / 0.3);
    transition: box-shadow 150ms ease;
  }
.amc-btn-raised:hover:not(:disabled) {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.28),
      inset 0 -1px 1px rgb(0 0 0 / 0.18),
      0 12px 24px -4px rgb(0 0 0 / 0.6),
      0 5px 9px -2px rgb(0 0 0 / 0.42);
  }
.amc-btn-raised:active:not(:disabled) {
    box-shadow:
      inset 0 2px 4px rgb(0 0 0 / 0.32),
      inset 0 1px 0 rgb(255 255 255 / 0.1);
  }
.amc-btn-raised:disabled {
    background-image: none;
    box-shadow: none;
  }
/* Dark-mode depth. The base rule above expresses its "lift" with pure-black
     drop shadows, tuned on a WHITE panel. On AMC's near-black dark panels
     (#15151a / #18181e / #0f0f14 …) a black shadow has almost no contrast, so a
     filled button reads FLAT in dark mode even though it carries the chrome.
     Restore the float: a brighter top rim catches "light", a 1px contact edge
     separates the button from the panel, and a darker/larger drop reads against
     the dark surface. Every dark skin shares the `.dark` class (`.dark.theme-*`),
     so this one block covers them all. Light mode is intentionally untouched (it
     already floats; the sheen is deliberately gentle). Lives in @layer base right
     after the base rule so it wins by specificity; box-shadow-only so it still
     composes with `amc-pol-btn` and survives low-power. */
.dark .amc-btn-raised {
    background-image: linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.16),
      rgb(255 255 255 / 0) 48%,
      rgb(0 0 0 / 0.16)
    );
    background-clip: padding-box; /* keep gloss off the rounded edge — see .amc-btn-raised (gradient-bleed fix) */
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.3),
      inset 0 -1px 1px rgb(0 0 0 / 0.2),
      0 0 0 1px rgb(0 0 0 / 0.45),
      0 6px 16px -3px rgb(0 0 0 / 0.7),
      0 3px 7px -2px rgb(0 0 0 / 0.55);
  }
.dark .amc-btn-raised:hover:not(:disabled) {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.4),
      inset 0 -1px 1px rgb(0 0 0 / 0.2),
      0 0 0 1px rgb(0 0 0 / 0.55),
      0 16px 30px -4px rgb(0 0 0 / 0.85),
      0 7px 13px -2px rgb(0 0 0 / 0.66);
  }
.dark .amc-btn-raised:active:not(:disabled) {
    box-shadow:
      inset 0 2px 4px rgb(0 0 0 / 0.4),
      inset 0 1px 0 rgb(255 255 255 / 0.12);
  }
/* Disabled stays flat. `.amc-btn-raised:disabled` (0,2,0) and the
     `.dark .amc-btn-raised` rest rule (0,2,0) tie on specificity; without this a
     disabled dark button (e.g. the "Talk it through" button while it shows
     "Starting…") would pick up the override. This (0,3,0) wins, order-independent. */
.dark .amc-btn-raised:disabled {
    background-image: none;
    box-shadow: none;
  }
/* Scoped forced-LIGHT subtrees (the Mind Map / KMS color-mode wrapper — see
     scoped-theme.ts) sit INSIDE <html class="dark">, so the `.dark` rules above
     would wrongly apply the heavy dark depth to a raised button on their LIGHT
     surface (e.g. a KMS popover's primary button while KMS is forced light but the
     app is dark). `.light` is used by nothing else, so reset those buttons back to
     the base (light) chrome. Placed AFTER the `.dark` rules so the specificity tie
     resolves to light inside a `.light` subtree. Disabled needs no reset here — the
     `.dark .amc-btn-raised:disabled` rule already keeps it flat (flat == flat). */
.light .amc-btn-raised {
    background-image: linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.1),
      rgb(255 255 255 / 0) 45%,
      rgb(0 0 0 / 0.12)
    );
    background-clip: padding-box; /* keep gloss off the rounded edge — see .amc-btn-raised (gradient-bleed fix) */
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      inset 0 -1px 1px rgb(0 0 0 / 0.18),
      0 5px 12px -2px rgb(0 0 0 / 0.4),
      0 2px 4px -1px rgb(0 0 0 / 0.3);
  }
.light .amc-btn-raised:hover:not(:disabled) {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.28),
      inset 0 -1px 1px rgb(0 0 0 / 0.18),
      0 12px 24px -4px rgb(0 0 0 / 0.6),
      0 5px 9px -2px rgb(0 0 0 / 0.42);
  }
.light .amc-btn-raised:active:not(:disabled) {
    box-shadow:
      inset 0 2px 4px rgb(0 0 0 / 0.32),
      inset 0 1px 0 rgb(255 255 255 / 0.1);
  }
/* ── Physical key-cap — the ONE way AMC draws a hotkey ──────────────────────
     Universal standard: consumed by <Kbd>/<KeyCombo>, the Settings keybindings
     panel + cheat-sheets (via the KEYCAP constant), the menu shortcut hints, and
     the tooltip hint (interceptor + <Tooltip>, via the `--on-dark` modifier). A
     raised cap — domed gradient top, top-edge sheen, a darker front skirt, and a
     soft drop shadow. Theme-aware: light default, dark under `.dark`, forced-light
     reset for the KMS/Mind-Map light subtree, and the always-dark tooltip bubble
     opts in with `--on-dark`. Skirt/drop are box-shadow only, and the layout
     footprint is kept ≈ the old flat cap, so dense pill/menu rows don't reflow. */
.amc-keycap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    /* Vertical padding stays SYMMETRIC (top === bottom) so the flex-centered letter
       sits centered — a heavier bottom shoves the glyph up and it rides high (worst
       on mobile). Same total height as before (5px) → no reflow. The 3D depth is all
       box-shadow (skirt/drop), not padding. Locked by keycap-padding-symmetric.test.ts. */
    padding: 0.15625rem 0.375rem;
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-surface-700, #3f3f46);
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-100, #f4f4f5) 100%);
    border: 1px solid var(--color-surface-300, #d4d4d8);
    border-bottom-color: var(--color-surface-400, #a1a1aa);
    border-radius: 0.375rem;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.9),
      0 2px 0 var(--color-surface-300, #d4d4d8),
      0 3px 4px rgb(0 0 0 / 0.13);
  }
/* Dark palette — under `.dark` (theme) AND for any `--on-dark` cap (the always-
     dark tooltip bubble, wherever it renders). Grouped so the two never drift. */
.dark .amc-keycap,
  .amc-keycap--on-dark {
    color: #f4f4f5;
    background: linear-gradient(180deg, #4a4a54 0%, #2b2b32 100%);
    border-color: #17171b;
    border-bottom-color: #0e0e11;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      inset 0 -2px 2px rgb(0 0 0 / 0.38),
      0 2px 0 #141417,
      0 3px 4px rgb(0 0 0 / 0.5);
  }
/* Forced-light subtree (KMS / Mind Map color-mode wrapper sits inside `.dark`) —
     reset to the light cap, mirroring `.light .amc-btn-raised`. A tooltip cap is
     never here (it portals to <body>), so `--on-dark` needs no exception. */
.light .amc-keycap {
    color: var(--color-surface-700, #3f3f46);
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-100, #f4f4f5) 100%);
    border-color: var(--color-surface-300, #d4d4d8);
    border-bottom-color: var(--color-surface-400, #a1a1aa);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.9),
      0 2px 0 var(--color-surface-300, #d4d4d8),
      0 3px 4px rgb(0 0 0 / 0.13);
  }
/* Compact tone — dense menu rows: smaller + a subtler skirt so a row of caps
     doesn't grow the menu. */
.amc-keycap--compact {
    min-width: 1rem;
    /* Symmetric vertical padding (see base rule) — same 3px total height as before. */
    padding: 0.09375rem 0.3125rem;
    font-size: 0.625rem;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.7),
      0 1.5px 0 var(--color-surface-300, #d4d4d8),
      0 2px 3px rgb(0 0 0 / 0.1);
  }
.dark .amc-keycap--compact,
  .amc-keycap--compact.amc-keycap--on-dark {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.18),
      0 1.5px 0 #141417,
      0 2px 3px rgb(0 0 0 / 0.4);
  }
/* Shared chat-surface depth. Agent/user/final message bubbles + the activity
     pill add `.msg-surface` to pick up the dial-controlled shadow + top sheen.
     Depth ONLY — background/border stay per-state on the bubble; box-shadow is
     paint-only and safe for scroll measurement. NEVER add backdrop-filter or
     transform here: these elements carry amc-cull-body (content-visibility) and
     a filter/transform layer there re-triggers a compositor pathology
     (frontend-scroll-contract). */
.msg-surface {
    box-shadow: var(--msg-shadow, none), var(--msg-highlight, none);
    transition: box-shadow 160ms ease;
  }
/* Default text sits one step below the brightest surface step so nothing DEFAULTS to
     maximum glare in dark mode; the brightest step stays available for deliberate
     high-contrast spots (input text). Locked by no-brightest-text-default.test.ts. */
body {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50-rgb) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-800-rgb) / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
html.dark body:has([data-testid='supermail-panel']) {
  background-color: transparent;
}
body {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
    font-family: var(
      --font-family-body,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      sans-serif
    );
  }
#root {
    position: fixed;
    inset: 0;
    overflow: hidden;
    /* dvh fallback: on mobile browsers the virtual keyboard shrinks dvh but not vh.
       This ensures the root resizes with the keyboard so headers stay pinned.

       Zoom compensation (`/ var(--window-zoom, 1)`): a `?window=` / `?detached=` pop-out
       reuses this same #root and applies CSS `zoom` on <html> (useWindowZoom). A bare
       `100dvh` then renders at `100dvh × zoom`, so — zoomed OUT — this fixed,
       overflow:hidden root shrinks to the top-left and CLIPS the `.window-zoom-fill`
       shell: the pop-out no longer fills the window (dark gap on the right + bottom) and
       its whole UI, header included, is crammed into a corner (the reported Tasks v2
       pop-out bug). Dividing by the zoom cancels the scale — the SAME trick
       `.window-zoom-fill` uses — so the root spans the window at any zoom. The main
       window never mounts the hook, so `--window-zoom` is unset → `/1` → plain `100dvh`,
       a zero-regression drop-in. See per-window-zoom-contract invariant 9. */
    height: calc(100dvh / var(--window-zoom, 1));
    /* Respect iOS safe areas in landscape when viewport-fit=cover is set.
       Top/bottom intentionally omitted — top may double-offset with browser's
       own fixed-element positioning; bottom is handled per-component
       (MobileSessionsList, InlineReply, SmsViewer, etc.). */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
/* Prevent scroll-chaining: reaching the end of a scrollable area
     must NOT propagate scroll to parent (which would shift headers). */
.overflow-y-auto,
  .overflow-auto {
    overscroll-behavior: contain;
  }
/* Code blocks: allow vertical touch-scroll to pass through to parent */
pre {
    -webkit-overflow-scrolling: touch;
  }
/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
  }
/* Scroll containers that should scroll WITHOUT a visible scrollbar (e.g. the
     Recipes section preview strips — content peeking past the edge is the
     scroll affordance). */
.hide-scrollbar {
    scrollbar-width: none;
  }
.hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
::-webkit-scrollbar-track {
  background-color: transparent
}
::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-400-rgb) / var(--tw-bg-opacity, 1));
    -webkit-transition: background-color 150ms ease-out;
    transition: background-color 150ms ease-out
}
::-webkit-scrollbar-thumb:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-500-rgb) / var(--tw-bg-opacity, 1))
}
/* Focus styles */
*:focus-visible {
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: rgb(var(--accent-rgb) / 1)
}
/* ── Native checkbox skin ──────────────────────────────────────────────
     A raw <input type="checkbox"> renders as the browser's own control, which
     on the dark themes reads as a stark light/near-white box that clashes with
     the UI (this is the "white highlighting selected elements" report). There is
     no shared checkbox component — ~86 native checkboxes across the app — so this
     one base rule gives every DEFAULT checkbox a theme-token skin: a subtle
     surface box unticked, the accent when ticked/indeterminate, and a checkmark
     colored by --on-accent-color so it stays readable on EVERY accent (white on
     indigo/glass, and a DARK mark on the white-accent "Vercel" theme —
     accent-contrast.ts). `appearance: none` is required to retheme the native box.

     In @layer base so a call-site's own checkbox utilities (bg-*, border-*,
     rounded-*, w-*, h-*, appearance-*) still win. Already-custom checkboxes are
     untouched by construction: the question-widget checkbox is an <svg> and prose
     task-lists are NodeViews — neither is an <input type=checkbox>. Every var
     carries a literal fallback (a bare undefined custom property collapses to
     transparent). Locked by tests/unit/lint/checkbox-skin-contract.test.ts. */
input[type='checkbox'] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin: 0;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid rgb(var(--color-surface-400-rgb, 82 82 91) / 0.9);
    border-radius: 4px;
    background-color: rgb(var(--color-surface-200-rgb, 39 39 42) / 0.6);
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color 0.12s ease,
      border-color 0.12s ease;
  }
input[type='checkbox']:hover:not(:disabled) {
    border-color: rgb(var(--color-surface-500-rgb, 113 113 122) / 1);
  }
input[type='checkbox']::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--on-accent-color, #f4f4f6);
    -webkit-mask: no-repeat center / 74%;
    mask: no-repeat center / 74%;
    opacity: 0;
  }
input[type='checkbox']:checked,
  input[type='checkbox']:indeterminate {
    background-color: rgb(var(--accent-rgb, 99 102 241));
    border-color: rgb(var(--accent-rgb, 99 102 241));
  }
input[type='checkbox']:checked::before,
  input[type='checkbox']:indeterminate::before {
    opacity: 1;
  }
input[type='checkbox']:checked::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
input[type='checkbox']:indeterminate::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  }
input[type='checkbox']:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
@media (prefers-reduced-motion: reduce) {
    input[type='checkbox'] {
      transition: none;
    }
  }
/* ── KMS editor prose surface ──────────────────────────────────────
     Tailwind preflight (`@tailwind base`) resets `ul, ol { list-style: none;
     margin: 0; padding: 0 }` and `h1–h6 { font-size: inherit; font-weight:
     inherit }`. TipTap's list/heading toggle commands DO create the nodes
     (proven by editor/extensions/list-utils.test.ts) — preflight just strips
     the markers and the heading scale, so they render invisible/flat with no
     error. These rules restore the prose surface. Everything is scoped under
     `.kms-prose` (the class on KmsEditor's EditorContent wrapper) so
     other TipTap editors are untouched; `.kms-prose .ProseMirror ul`
     (0,2,1) outranks preflight's `ul` (0,0,1) within @layer base. Generic
     prose blocks ONLY — KMS renders tasks/columns/images via NodeViews,
     so that CSS is deliberately omitted (it would style nothing). Contract:
     .claude/memory/contracts/kms-editor-styling-contract.md. */
/* Kills the white focus ring. The `*:focus-visible` rule above paints a 2px
     accent outline on the focused contenteditable; `--accent-rgb` is white in
     some themes, so it reads as an ugly border around the box. Scoped to the
     `.ProseMirror` element ONLY — focusable children (task checkboxes,
     node-view buttons) keep their rings. `.kms-prose .ProseMirror` (0,2,1)
     beats `*:focus-visible` (0,1,0) in every focus state. */
.kms-prose .ProseMirror {
    outline: none;
    /* I15 — content fits the pane; long words/URLs wrap instead of forcing a
       horizontal scrollbar. `anywhere` (not just `break-word`) also reduces
       min-content width so flex/grid children — especially columns — can shrink.
       See kms-editor-styling-contract.md (I15). */
    overflow-wrap: anywhere;
  }
/* I19 — LARGE-NOTE TYPING PERF: window the editor's block content so a keystroke
     only lays out what's ON SCREEN, not the whole note.

     The bug: on a big note every keystroke forced a near-full-document reflow —
     ProseMirror reads the caret's screen position (`coordsAtPos`) after each edit,
     and with no layout containment the browser re-laid-out every off-screen block
     to answer it (measured; small notes were always fine — doc-size-specific, NOT
     the tracked main-thread starvation). Numbers + the before/after live in the
     postmortem + kms-editor-styling-contract.md (I19).

     `content-visibility: auto` lets the browser SKIP layout+paint for off-screen
     blocks — the same windowing AMC uses for long session bodies (`.amc-cull-body`,
     ~L4538). `contain-intrinsic-size`'s `auto` keyword makes a block REMEMBER its
     real height once seen, so returning to view can't shift the scroll/caret (the
     guard against this editor's Primary-Page cursor-jump history). Scoped to
     `.kms-prose .ProseMirror` so no other TipTap editor is touched:
       • `.column-item > *` — blocks inside columns (the Primary-Page case; the
         giant multi-column grid holds the off-screen mass — the essential win).
       • `.ProseMirror > *` — top-level blocks, so FLAT large notes window too.
     Locked by kms-editor-css-contract.test.ts (I19). One rule to remove if it ever
     misbehaves on the editable surface. */
.kms-prose .ProseMirror > *,
  .kms-prose .ProseMirror .column-item > * {
    content-visibility: auto;
    contain-intrinsic-size: auto 40px;
  }
/* I15 — the column grid. The TRACKS come from the `--kms-column-tracks` custom
     property set by ColumnBlock.renderHTML (the per-block widths) — NOT a hardcoded
     `grid-template-columns` inline style — so the stylesheet owns the layout and the
     mobile media query below can collapse the columns into a one-per-screen carousel
     WITHOUT !important (an inline track list would outrank the media query). CSS grid
     items default to `min-width: auto` and refuse to shrink below their content, so a
     wide column would push the editor — and the page — sideways; `min-width: 0` lets the
     `fr` tracks shrink and the prose `overflow-wrap` above lets their text wrap. The grid
     itself is capped to the pane. `.column-block` / `.column-item` are rendered by the
     ColumnBlock / ColumnItem TipTap nodes.

     KMT-parity borders (user report 2026-06-19 — the columns had no visible divider): the
     original Knowledge Management Tool drew a 1px rounded box around each column block and a
     2px `border-inline-start` divider between columns (first column reset to none — the
     LOGICAL property, so the divider sits on the reading-start edge under RTL). The AMC port
     dropped them; they're restored here using the theme-aware `--color-surface-200` divider
     token (the same weight the KMS panes use) with a literal fallback. `box-sizing` is
     border-box (preflight) and `min-width: 0` + `max-width: 100%` stay, so the added border
     + padding are absorbed inside the pane — I15's no-sideways-scroll guarantee holds. The
     border/padding ride the base rule, so the mobile carousel (below) simply frames each
     swiped page. Locked by the "columns carry visible KMT-parity borders (I15)" suite. */
.kms-prose .ProseMirror .column-block {
    display: grid;
    grid-template-columns: var(--kms-column-tracks, 1fr 1fr);
    gap: 16px;
    max-width: 100%;
    border: 1px solid var(--color-surface-200, #27272a);
    border-radius: 6px;
    padding: 12px;
  }
.kms-prose .ProseMirror .column-item {
    min-width: 0;
    border-left: 2px solid var(--color-surface-200, #27272a);
    padding-left: 12px;
  }
.kms-prose .ProseMirror .column-item:first-child {
    border-left: none;
    padding-left: 0;
  }
/* I15 (mobile) — a phone can't fit a 2–5 column block side-by-side. GATE-1 decision
     2026-06-14 (revises the 2026-06-11 Option B) = make the block a ONE-COLUMN-PER-SCREEN
     horizontal carousel: each column fills the pane width and the user swipes sideways to
     the next, with scroll-snap landing cleanly on one. The page itself still never scrolls
     sideways (only this block does) — the same contained-scroll spirit as `pre`. This
     OVERRIDES the desktop grid by source order under the media query, and because the tracks
     come from the `--kms-column-tracks` custom property (not an inline style) NO !important is
     needed. `proximity` (not `mandatory`) snap so it never yanks the scroll / traps the caret
     while editing. ≤767px = the app's mobile breakpoint (useIsMobile / QuestionWidget). Why
     not the old 12rem side-by-side scroll: at 12rem the visible column was ~190px and the next
     was cut off mid-content (user report 2026-06-14). Why not vertical stacking: the user chose
     to keep the horizontal swipe — just one full column per screen. The base `.column-item
     { min-width: 0 }` above still applies, so an unbreakable wide child can't blow out the 100%
     column. The desktop `gap: 16px` is intentionally NOT overridden here — under flex it becomes
     a small inter-page gutter consumed in the scroll, and `scroll-snap-align: start` still lands
     each column's start edge at the pane (do not "fix" it away). Viewport @media, NOT @container:
     the editor root is a flex child and `container-type`
     collapses flex sizing into the one-word-per-line symptom (see the QuestionWidget note below).
     Layout proven by a render measurement (one full column per screen, the block scrolls, the
     root does not). Contract: kms-editor-styling-contract.md (I15). */
/* below-md: 767px = Tailwind md breakpoint (768px) minus 1px (F336) */
@media (max-width: 767px) {
    .kms-prose .ProseMirror .column-block {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      overscroll-behavior-x: contain;
    }
    .kms-prose .ProseMirror .column-item {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }
  }
/* ─── Table (GFM pipe table) — KMS editor only ─── */
.kms-prose .ProseMirror table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    overflow: auto;
  }
.kms-prose .ProseMirror th,
  .kms-prose .ProseMirror td {
    border: 1px solid var(--color-surface-300, #d1d5db);
    padding: 0.5em 0.75em;
    min-width: 4em;
    vertical-align: top;
    position: relative;
  }
.kms-prose .ProseMirror th {
    font-weight: 600;
    background: var(--color-surface-100, #f3f4f6);
  }
.kms-prose .ProseMirror th p,
  .kms-prose .ProseMirror td p {
    margin: 0;
  }
.kms-prose .ProseMirror .selectedCell {
    background: rgb(var(--accent-rgb, 99 102 241) / 0.08);
  }
.kms-prose .ProseMirror .\!selectedCell {
    background: rgb(var(--accent-rgb, 99 102 241) / 0.08) !important;
  }
.kms-prose .ProseMirror .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: rgb(var(--accent-rgb, 99 102 241));
    pointer-events: none;
  }
/* Same white-focus-ring kill for the AI Writer editor — `.writer-prose` wraps its
     `EditorContent`, so the focused `.ProseMirror` would otherwise pick up the 2px
     `*:focus-visible` accent ring (white in some themes). Scoped to `.ProseMirror`
     only, so toolbar buttons / inputs keep their focus rings. */
.writer-prose .ProseMirror {
    outline: none;
    /* Make the editable region tall so clicking anywhere on the "page" (not just
       on existing text) places the caret — reinforces where the user can type. */
    min-height: 55vh;
  }
/* The first block sits flush with the page's top padding so the empty-state
     placeholder (absolutely positioned at the page padding) lines up with the
     caret instead of floating above the first line. */
.writer-prose .ProseMirror > :first-child {
    margin-top: 0;
  }
/* AI Writer prose surface — like `.kms-prose`, the Writer editor needs these
     because Tailwind preflight flattens headings to body text and strips list
     markers. Generic markdown constructs only (StarterKit) — no task-list /
     node-view rules. Kept in sync with the `.kms-prose .ProseMirror` block below. */
.writer-prose .ProseMirror h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.67em 0 0.4em;
    line-height: 1.2
}
.writer-prose .ProseMirror h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.6em 0 0.35em;
    line-height: 1.3
}
.writer-prose .ProseMirror h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.3em
}
.writer-prose .ProseMirror h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.25em
}
.writer-prose .ProseMirror h5,
  .writer-prose .ProseMirror h6 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.25em
}
.writer-prose .ProseMirror ul,
  .writer-prose .ProseMirror ol {
    padding-inline-start: 1.5em;
    margin: 0.4em 0;
  }
.writer-prose .ProseMirror li {
    margin: 0.15em 0;
  }
/* `<li>` wraps its text in a `<p>`; collapse that margin so rows stay single-spaced. */
.writer-prose .ProseMirror li > p {
    margin: 0;
  }
/* Unordered nesting cycle: disc → circle → square (restart at level 4). */
.writer-prose .ProseMirror ul {
    list-style-type: disc;
  }
.writer-prose .ProseMirror ul ul {
    list-style-type: circle;
  }
.writer-prose .ProseMirror ul ul ul {
    list-style-type: square;
  }
.writer-prose .ProseMirror ul ul ul ul {
    list-style-type: disc;
  }
/* Ordered nesting cycle: decimal → lower-alpha → lower-roman (restart at 4). */
.writer-prose .ProseMirror ol {
    list-style-type: decimal;
  }
.writer-prose .ProseMirror ol ol {
    list-style-type: lower-alpha;
  }
.writer-prose .ProseMirror ol ol ol {
    list-style-type: lower-roman;
  }
.writer-prose .ProseMirror ol ol ol ol {
    list-style-type: decimal;
  }
.writer-prose .ProseMirror blockquote {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1));
    border-inline-start-width: 3px;
    border-inline-start-style: solid;
    padding-inline-start: 0.9em;
    margin: 0.5em 0
}
.writer-prose .ProseMirror code {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1));
    border-radius: 3px;
    padding: 0.15em 0.3em;
    font-size: 0.9em
}
.writer-prose .ProseMirror pre {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1));
    border-radius: 6px;
    padding: 1em;
    margin: 0.5em 0;
    overflow-x: auto
}
.writer-prose .ProseMirror pre code {
    background: none;
    padding: 0;
    border-radius: 0;
  }
.writer-prose .ProseMirror hr {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1));
    border-top-width: 1px;
    margin: 1.5em 0
}
.writer-prose .ProseMirror a {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1));
    text-decoration: underline;
    cursor: pointer
}
/* Same white-focus-ring kill for the AI Writer editor — `.writer-prose` wraps its
     `EditorContent`, so the focused `.ProseMirror` would otherwise pick up the 2px
     `*:focus-visible` accent ring (white in some themes). Scoped to `.ProseMirror`
     only, so toolbar buttons / inputs keep their focus rings. */
.writer-prose .ProseMirror {
    outline: none;
    /* Make the editable region tall so clicking anywhere on the "page" (not just
       on existing text) places the caret — reinforces where the user can type. */
    min-height: 55vh;
  }
/* The first block sits flush with the page's top padding so the empty-state
     placeholder (absolutely positioned at the page padding) lines up with the
     caret instead of floating above the first line. */
.writer-prose .ProseMirror > :first-child {
    margin-top: 0;
  }
/* AI Writer prose surface — like `.kms-prose`, the Writer editor needs these
     because Tailwind preflight flattens headings to body text and strips list
     markers. Generic markdown constructs only (StarterKit) — no task-list /
     node-view rules. Kept in sync with the `.kms-prose .ProseMirror` block below. */
.writer-prose .ProseMirror h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.67em 0 0.4em;
    line-height: 1.2
}
.writer-prose .ProseMirror h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.6em 0 0.35em;
    line-height: 1.3
}
.writer-prose .ProseMirror h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.3em
}
.writer-prose .ProseMirror h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.25em
}
.writer-prose .ProseMirror h5,
  .writer-prose .ProseMirror h6 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.25em
}
.writer-prose .ProseMirror ul,
  .writer-prose .ProseMirror ol {
    padding-inline-start: 1.5em;
    margin: 0.4em 0;
  }
.writer-prose .ProseMirror li {
    margin: 0.15em 0;
  }
/* `<li>` wraps its text in a `<p>`; collapse that margin so rows stay single-spaced. */
.writer-prose .ProseMirror li > p {
    margin: 0;
  }
/* Unordered nesting cycle: disc → circle → square (restart at level 4). */
.writer-prose .ProseMirror ul {
    list-style-type: disc;
  }
.writer-prose .ProseMirror ul ul {
    list-style-type: circle;
  }
.writer-prose .ProseMirror ul ul ul {
    list-style-type: square;
  }
.writer-prose .ProseMirror ul ul ul ul {
    list-style-type: disc;
  }
/* Ordered nesting cycle: decimal → lower-alpha → lower-roman (restart at 4). */
.writer-prose .ProseMirror ol {
    list-style-type: decimal;
  }
.writer-prose .ProseMirror ol ol {
    list-style-type: lower-alpha;
  }
.writer-prose .ProseMirror ol ol ol {
    list-style-type: lower-roman;
  }
.writer-prose .ProseMirror ol ol ol ol {
    list-style-type: decimal;
  }
.writer-prose .ProseMirror blockquote {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1));
    border-inline-start-width: 3px;
    border-inline-start-style: solid;
    padding-inline-start: 0.9em;
    margin: 0.5em 0
}
.writer-prose .ProseMirror code {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1));
    border-radius: 3px;
    padding: 0.15em 0.3em;
    font-size: 0.9em
}
.writer-prose .ProseMirror pre {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1));
    border-radius: 6px;
    padding: 1em;
    margin: 0.5em 0;
    overflow-x: auto
}
.writer-prose .ProseMirror pre code {
    background: none;
    padding: 0;
    border-radius: 0;
  }
.writer-prose .ProseMirror hr {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1));
    border-top-width: 1px;
    margin: 1.5em 0
}
.writer-prose .ProseMirror a {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1));
    text-decoration: underline;
    cursor: pointer
}
/* Nested lists add no vertical margin so bullet spacing stays uniform at any depth:
     a ul/ol inside an li must not re-add the 0.4em block margin every list gets, or a
     row crossing a nesting boundary gets a bigger gap than same-level rows. Identical
     fix + rationale as the `.kms-prose` rule below; one rule wins both (duplicated)
     `.writer-prose` blocks by specificity. KMS editor styling contract, I17. */
.writer-prose .ProseMirror li ul,
  .writer-prose .ProseMirror li ol {
    margin-top: 0;
    margin-bottom: 0;
  }
/* Meeting-note prose surface — the Granola-style ALWAYS-LIVE WYSIWYG notepad
     (raw + enhanced note bodies). Borderless + transparent, sized like the
     former `min-h-[40vh]` textarea so clicking anywhere lands the cursor.
     Mirrors `.writer-prose` (generic StarterKit markdown constructs, no
     node-view rules); kept intentionally close to it. */
.meeting-prose .ProseMirror {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-800-rgb) / var(--tw-text-opacity, 1));
    outline: none;
    min-height: 40vh;
    line-height: 1.6
}
/* Empty-state placeholder — StarterKit here has no Placeholder extension, so
     the empty class is toggled from React (editor.isEmpty) and the text is
     painted on the first empty paragraph. `float`+`height:0` keeps it from
     pushing the caret. */
.meeting-prose.meeting-note-empty .ProseMirror p:first-child::before {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1));
    content: 'Write notes';
    float: inline-start;
    height: 0;
    pointer-events: none
}
/* Granola-style SINGLE heading — one consistent size/weight for every
     heading. `# `, `## ` and `### ` all collapse to this one style (the editor
     renders every heading as an <h1>); h2..h6 are matched too so any level that
     slips through (e.g. legacy content) still looks identical. */
.meeting-prose .ProseMirror :is(h1, h2, h3, h4, h5, h6) {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    position: relative;
    margin: 1.5em 0 0.4em;
    line-height: 1.3
}
/* First block never carries the extra section gap at the very top. */
.meeting-prose .ProseMirror > :first-child {
    margin-top: 0;
  }
/* Faint '#' gutter marker before every heading — always a SINGLE hash (one
     level), muted + normal weight, sitting in the left gutter so a heading reads
     as markdown while staying fully rendered + editable. */
.meeting-prose .ProseMirror :is(h1, h2, h3, h4, h5, h6)::before {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1));
    content: '#';
    position: absolute;
    inset-inline-end: 100%;
    margin-inline-end: 0.4em;
    font-weight: 400;
    font-size: 0.85em
}
.meeting-prose .ProseMirror ul,
  .meeting-prose .ProseMirror ol {
    padding-inline-start: 1.5em;
    margin: 0.4em 0;
  }
.meeting-prose .ProseMirror li {
    margin: 0.15em 0;
  }
/* `<li>` wraps its text in a `<p>`; collapse that margin so rows stay single-spaced. */
.meeting-prose .ProseMirror li > p {
    margin: 0;
  }
.meeting-prose .ProseMirror ul {
    list-style-type: disc;
  }
.meeting-prose .ProseMirror ul ul {
    list-style-type: circle;
  }
.meeting-prose .ProseMirror ul ul ul {
    list-style-type: square;
  }
.meeting-prose .ProseMirror ol {
    list-style-type: decimal;
  }
.meeting-prose .ProseMirror ol ol {
    list-style-type: lower-alpha;
  }
.meeting-prose .ProseMirror ol ol ol {
    list-style-type: lower-roman;
  }
/* Task lists (TaskList/TaskItem — GFM checkboxes from the folded "## Action
     items" section). Reset the disc marker + indent the generic `ul` rule paints,
     then lay each row out as [checkbox][content]. The attribute selector (0,3,1)
     out-specifies the plain `.meeting-prose .ProseMirror ul` rule (0,2,1). */
.meeting-prose .ProseMirror ul[data-type='taskList'] {
    list-style: none;
    padding-left: 0;
  }
.meeting-prose .ProseMirror ul[data-type='taskList'] li {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
  }
.meeting-prose .ProseMirror ul[data-type='taskList'] li > label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 1.5em;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.meeting-prose .ProseMirror ul[data-type='taskList'] li > div {
    flex: 1 1 auto;
    min-width: 0;
  }
.meeting-prose .ProseMirror ul[data-type='taskList'] li p {
    margin: 0;
  }
.meeting-prose .ProseMirror blockquote {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1));
    border-inline-start-width: 3px;
    border-inline-start-style: solid;
    padding-inline-start: 0.9em;
    margin: 0.5em 0
}
.meeting-prose .ProseMirror code {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1));
    border-radius: 3px;
    padding: 0.15em 0.3em;
    font-size: 0.9em
}
.meeting-prose .ProseMirror pre {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1));
    border-radius: 6px;
    padding: 1em;
    margin: 0.5em 0;
    overflow-x: auto
}
.meeting-prose .ProseMirror pre code {
    background: none;
    padding: 0;
    border-radius: 0;
  }
.meeting-prose .ProseMirror hr {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1));
    border-top-width: 1px;
    margin: 1.5em 0
}
.meeting-prose .ProseMirror a {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1));
    text-decoration: underline;
    cursor: pointer
}
/* Headings — preflight flattened these to body text; restore scale + weight. */
.kms-prose .ProseMirror h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.67em 0 0.4em;
    line-height: 1.2
}
.kms-prose .ProseMirror h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.6em 0 0.35em;
    line-height: 1.3
}
.kms-prose .ProseMirror h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.3em
}
.kms-prose .ProseMirror h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.25em
}
.kms-prose .ProseMirror h5,
  .kms-prose .ProseMirror h6 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1));
    margin: 0.5em 0 0.25em
}
/* Lists — preflight stripped `list-style` + padding, so markers vanished. */
.kms-prose .ProseMirror ul,
  .kms-prose .ProseMirror ol {
    padding-inline-start: 1.5em;
    margin: 0.4em 0;
  }
.kms-prose .ProseMirror li {
    margin: 0.15em 0;
  }
/* `<li>` wraps its text in a `<p>`; collapse that paragraph's margin so list
     rows stay single-spaced instead of double-spaced. */
.kms-prose .ProseMirror li > p {
    margin: 0;
  }
/* A NESTED list (a ul/ol inside an li) must NOT re-add the 0.4em block margin the
     rule above gives every list, or a row crossing a nesting boundary gets a bigger
     gap than same-level rows and bullet spacing visibly changes with depth. Zeroing
     it lets the single `li { margin: 0.15em }` govern every row at any depth; the
     TOP-LEVEL list (not inside an li) keeps its 0.4em so the whole list still
     separates from surrounding paragraphs. Horizontal indent (ul/ol padding-left) is
     untouched. KMS editor styling contract, I17. */
.kms-prose .ProseMirror li ul,
  .kms-prose .ProseMirror li ol {
    margin-top: 0;
    margin-bottom: 0;
  }
/* Unordered nesting cycle: disc → circle → square (restart at level 4). */
.kms-prose .ProseMirror ul {
    list-style-type: disc;
  }
.kms-prose .ProseMirror ul ul {
    list-style-type: circle;
  }
.kms-prose .ProseMirror ul ul ul {
    list-style-type: square;
  }
.kms-prose .ProseMirror ul ul ul ul {
    list-style-type: disc;
  }
/* Ordered nesting cycle: decimal → lower-alpha → lower-roman (restart at 4). */
.kms-prose .ProseMirror ol {
    list-style-type: decimal;
  }
.kms-prose .ProseMirror ol ol {
    list-style-type: lower-alpha;
  }
.kms-prose .ProseMirror ol ol ol {
    list-style-type: lower-roman;
  }
.kms-prose .ProseMirror ol ol ol ol {
    list-style-type: decimal;
  }
/* Per-item indent attribute (ListIndent extension). A first/orphan list item
     that Markdown nesting can't deepen carries a `data-indent` level; shift it
     right by that many nesting steps (1.5em each, matching the nested-list
     padding above) via the inline `--kms-li-indent` custom property. One rule
     covers every level. Persisted on disk as an invisible per-item marker —
     see editor/indent-markers.ts. KMS editor list-hotkey contract, I8. */
.kms-prose .ProseMirror li[data-indent] {
    margin-inline-start: calc(var(--kms-li-indent, 0) * 1.5em);
  }
/* Collapsed parent list items: empty lead paragraph + nested sub-list below.
     The KeyboardShortcuts decoration plugin tags these `li`s with
     `.collapsed-parent`; hide the empty lead line + its marker so an item with an
     empty lead paragraph + nested sub-list — from loaded markdown, an image-only
     item, etc. — doesn't render a stray empty bullet/number on its own row. The
     `li.<class>` selector (0,3,1) outranks the plain
     `.kms-prose .ProseMirror ul/ol` list rules (0,2,1). KMT parity:
     editor.css `.ProseMirror li.collapsed-parent`. */
.kms-prose .ProseMirror li.collapsed-parent {
    list-style-type: none;
  }
.kms-prose .ProseMirror li.collapsed-parent > p:first-child {
    display: none;
  }
/* Empty lead paragraph in list items with block content (e.g. images): hide
     the empty `<p>` that ProseMirror's `paragraph block*` content model forces
     as the first child, but KEEP the list marker — unlike collapsed-parent,
     which hides both. */
.kms-prose .ProseMirror li.empty-lead-paragraph > p:first-child {
    display: none;
  }
/* Task lists (TaskList/TaskItem — GFM checkboxes). The generic `ul` rules
     above paint a disc marker + 1.5em indent; reset both for the task-list <ul>
     so the checkbox column stands in for the marker, and lay each row out as
     [checkbox][content]. The attribute selector (0,3,1) out-specifies the plain
     `.kms-prose .ProseMirror ul` rule (0,2,1). Sentry 7514724316. */
.kms-prose .ProseMirror ul[data-type='taskList'] {
    list-style: none;
    padding-left: 0;
  }
.kms-prose .ProseMirror ul[data-type='taskList'] li {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
  }
.kms-prose .ProseMirror ul[data-type='taskList'] li > label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 1.5em;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.kms-prose .ProseMirror ul[data-type='taskList'] li > div {
    flex: 1 1 auto;
    min-width: 0;
  }
.kms-prose .ProseMirror ul[data-type='taskList'] li p {
    margin: 0;
  }
/* Checked task-list items — strikethrough + dim when the setting is on.
     TipTap flips data-checked on toggle, so unchecking removes the style. */
[data-kms-checklist-strike='true']
    .kms-prose
    .ProseMirror
    ul[data-type='taskList']
    li[data-checked='true']
    > div {
    text-decoration: line-through;
    --tw-text-opacity: 1;
    color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1));
  }
/* Blockquote — preflight zeroed its margin; give it the classic accent rule. */
.kms-prose .ProseMirror blockquote {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1));
    border-inline-start-width: 3px;
    border-inline-start-style: solid;
    padding-inline-start: 0.9em;
    margin: 0.5em 0
}
/* Callout/admonition blocks — Obsidian-compatible > [!type] syntax. */
.kms-prose .ProseMirror .callout-block {
    margin: 0.75em 0;
    border-radius: 6px;
    border-left: 4px solid var(--callout-accent, #3b82f6);
    background: color-mix(in srgb, var(--callout-accent, #3b82f6) 8%, transparent);
    overflow: hidden;
  }
.kms-prose .ProseMirror .callout-header {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 0.75em;
    font-weight: 600;
    font-size: 0.875em;
    color: var(--callout-accent, #3b82f6);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    line-height: 1.4;
  }
.kms-prose .ProseMirror .callout-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
.kms-prose .ProseMirror .callout-type-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.kms-prose .ProseMirror .callout-fold-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease;
  }
.kms-prose .ProseMirror .callout-block[data-folded='true'] .callout-fold-toggle {
    transform: rotate(-90deg);
  }
.kms-prose .ProseMirror .callout-body {
    padding: 0 0.75em 0.5em;
  }
.kms-prose .ProseMirror .callout-body > :first-child {
    margin-top: 0;
  }
.kms-prose .ProseMirror .callout-body > :last-child {
    margin-bottom: 0;
  }
.kms-prose .ProseMirror .callout-block[data-folded='true'] .callout-body {
    display: none;
  }
/* Inline code + fenced code block. */
.kms-prose .ProseMirror code {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1));
    border-radius: 3px;
    padding: 0.15em 0.3em;
    font-size: 0.9em
}
.kms-prose .ProseMirror pre {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1));
    border-radius: 6px;
    padding: 1em;
    margin: 0.5em 0;
    overflow-x: auto
}
.kms-prose .ProseMirror pre code {
    background: none;
    padding: 0;
    border-radius: 0;
  }
/* Horizontal rule — preflight gives it a border-top but no spacing. */
.kms-prose .ProseMirror hr {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1));
    border-top-width: 1px;
    margin: 1.5em 0
}
/* Links — preflight reset `a { color: inherit; text-decoration: inherit }`. */
.kms-prose .ProseMirror mark {
    background-color: rgba(250, 204, 21, 0.4);
    border-radius: 2px;
    padding: 0 2px;
  }
.dark .kms-prose .ProseMirror mark {
    background-color: rgba(250, 204, 21, 0.25);
  }
/* ── KMS in-editor search highlights (ProseMirror SearchHighlight ext) ──
     Theme-agnostic rgba — readable on every light, dark, paper, sepia, and
     custom surface. Same palette as Settings find-in-page for consistency. */
.kms-prose .ProseMirror .search-highlight {
    background-color: rgba(250, 204, 21, 0.4);
    border-radius: 2px;
  }
.kms-prose .ProseMirror .search-highlight-active {
    background-color: rgba(249, 115, 22, 0.6);
    border-radius: 2px;
  }
.kms-prose .ProseMirror a {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1));
    text-decoration: underline;
    cursor: pointer
}
/* Footnote reference — inline [^label] superscript. The <sup> element handles
     vertical positioning via Tailwind preflight (position:relative; top:-0.5em;
     font-size:75%). We add accent color + pointer so it reads as a clickable
     cross-reference. Contract: kms-footnote-contract.md. */
.kms-prose .ProseMirror .footnote-ref {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1));
    cursor: pointer
}
.kms-prose .ProseMirror .footnote-ref:hover {
    text-decoration: underline;
  }
/* Footnote definition block — [^label]: text. Flex layout keeps the label
     flush-left and the content flowing beside it; multi-line content wraps
     within the content span (white-space: pre-wrap). The top border acts as the
     footnote separator (like the <hr> in rendered markdown footnotes). */
.kms-prose .ProseMirror .footnote-def {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1));
    display: flex;
    gap: 0.5em;
    margin-top: 0.5em;
    font-size: 0.875em
}
.kms-prose .ProseMirror .footnote-def:not(.footnote-def + .footnote-def) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1));
    border-top-width: 1px;
    padding-top: 0.75em;
    margin-top: 1.5em
}
.kms-prose .ProseMirror .footnote-def-label {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1));
    cursor: pointer;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap
}
.kms-prose .ProseMirror .footnote-def-label:hover {
    text-decoration: underline;
  }
.kms-prose .ProseMirror .footnote-def-content {
    white-space: pre-wrap;
  }
/* ── KMS editor — softened Glassmorphism · Dark default (I12) ─────────
     The default theme renders the KMS note surface near-black
     (surface-50 #08080e) under near-white text (surface-900 #f4f4f5) at
     ~18:1 contrast — glaring for a text-heavy editor — with a neon
     periwinkle accent (#818cf8) and a code background (surface-100
     #0e0e16) almost identical to the page, so fenced code has no visible
     container. These overrides lift the reading surface to a soft
     charcoal, ease the body + heading text, calm the accent, and give
     code a visible container — making the *default* kinder without
     touching any other theme.

     SCOPED to `.dark.theme-glassmorphism` ONLY: every other visual theme
     and light mode is byte-for-byte unchanged and fully customizable
     (the user can still pick any theme). The glass/gradient layering
     (I10) is preserved — only the surface RGB changes; the /80
     translucency + `backdrop-blur` on KMS_PANEL_ROOT stay, and the
     `#root`/`#kms-window-root` blobs are untouched. Higher specificity
     than the base prose rules above, so the cascade wins in both the
     in-app panel and the pop-out window (both carry `.kms-prose` +
     `[data-ui-anchor="kms-panel-root"]` under the same theme classes).
     User-approved 2026-06-09 (before/after mockup). Contract:
     .claude/memory/contracts/kms-editor-styling-contract.md (I12). */
/* Reading surface — near-black → soft charcoal (keeps blur + /80 glow). */
.dark.theme-glassmorphism [data-ui-anchor='kms-panel-root'] {
    background-color: rgba(21, 21, 30, 0.78);
  }
/* Body text — near-white → eased off-white (~18:1 → ~11:1, still crisp). */
.dark.theme-glassmorphism .kms-prose .ProseMirror {
    color: #d2d2de;
  }
/* Headings — kept brighter than body for hierarchy, but not pure white. */
.dark.theme-glassmorphism .kms-prose .ProseMirror :is(h1, h2, h3, h4, h5, h6) {
    color: #ececf3;
  }
/* Links — softer, less neon periwinkle. */
.dark.theme-glassmorphism .kms-prose .ProseMirror a {
    color: #a7aff3;
  }
/* Blockquote — calmer accent border + eased text. */
.dark.theme-glassmorphism .kms-prose .ProseMirror blockquote {
    border-left-color: rgba(129, 140, 248, 0.55);
    color: #a9a9b6;
  }
/* Callout blocks — glass theme: slightly more opaque tint for readability. */
.dark.theme-glassmorphism .kms-prose .ProseMirror .callout-block {
    background: color-mix(in srgb, var(--callout-accent, #60a5fa) 12%, transparent);
    border-left-color: color-mix(in srgb, var(--callout-accent, #60a5fa) 60%, transparent);
  }
.dark.theme-glassmorphism .kms-prose .ProseMirror .callout-header {
    color: color-mix(in srgb, var(--callout-accent, #60a5fa) 85%, white);
  }
/* Inline code + fenced block — a faint visible container (was ~invisible
     against the near-black page). The inner <code> inside a <pre> is reset
     so the block doesn't double up its background/border. */
.dark.theme-glassmorphism .kms-prose .ProseMirror code {
    background: rgba(255, 255, 255, 0.05);
  }
.dark.theme-glassmorphism .kms-prose .ProseMirror pre {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }
.dark.theme-glassmorphism .kms-prose .ProseMirror pre code {
    background: none;
    border: none;
  }
/* Active/pressed state for all interactive buttons — instant tactile feedback */
button:not(:disabled):active,
  [role='button']:not(:disabled):active {
    transform: scale(0.98);
  }
/* Smooth the scale transition without slowing perceived responsiveness */
button,
  [role='button'] {
    transition-property: color, background-color, border-color, transform;
    transition-timing-function: ease-out;
    transition-duration: 150ms;
    /* Bypass Android Chrome's ~50-100ms gesture-disambiguation delay after scroll
       that can silently suppress the first click on a button. */
    touch-action: manipulation;
  }
/* Listbox options and menu items highlight instantly on hover — native-menu feel.
     Keeps transform (press scale) animation, drops the 150ms background-color fade
     that makes long mouse-sweeps feel laggy. Higher specificity than `button` above. */
[role='option'],
  [role='menuitem'] {
    transition-property: transform;
  }
.\!container {
  width: 100% !important
}
.container {
  width: 100%
}
@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important
  }
  .container {
    max-width: 640px
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important
  }
  .container {
    max-width: 768px
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important
  }
  .container {
    max-width: 1024px
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important
  }
  .container {
    max-width: 1280px
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important
  }
  .container {
    max-width: 1536px
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}
.pointer-events-none {
  pointer-events: none
}
.pointer-events-auto {
  pointer-events: auto
}
.\!visible {
  visibility: visible !important
}
.visible {
  visibility: visible
}
.invisible {
  visibility: hidden
}
.collapse {
  visibility: collapse
}
.static {
  position: static
}
.fixed {
  position: fixed
}
.absolute {
  position: absolute
}
.relative {
  position: relative
}
.sticky {
  position: sticky
}
.-inset-1 {
  inset: -0.25rem
}
.inset-0 {
  inset: 0px
}
.inset-2 {
  inset: 0.5rem
}
.inset-x-0 {
  left: 0px;
  right: 0px
}
.inset-x-0\.5 {
  left: 0.125rem;
  right: 0.125rem
}
.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem
}
.inset-y-0 {
  top: 0px;
  bottom: 0px
}
.-bottom-0\.5 {
  bottom: -0.125rem
}
.-bottom-1\.5 {
  bottom: -0.375rem
}
.-bottom-2\.5 {
  bottom: -0.625rem
}
.-bottom-5 {
  bottom: -1.25rem
}
.-left-1 {
  left: -0.25rem
}
.-left-1\.5 {
  left: -0.375rem
}
.-left-14 {
  left: -3.5rem
}
.-left-2 {
  left: -0.5rem
}
.-left-2\.5 {
  left: -0.625rem
}
.-right-0\.5 {
  right: -0.125rem
}
.-right-1 {
  right: -0.25rem
}
.-right-1\.5 {
  right: -0.375rem
}
.-right-2 {
  right: -0.5rem
}
.-top-0\.5 {
  top: -0.125rem
}
.-top-1 {
  top: -0.25rem
}
.-top-1\.5 {
  top: -0.375rem
}
.-top-2 {
  top: -0.5rem
}
.-top-2\.5 {
  top: -0.625rem
}
.-top-3 {
  top: -0.75rem
}
.-top-5 {
  top: -1.25rem
}
.bottom-0 {
  bottom: 0px
}
.bottom-0\.5 {
  bottom: 0.125rem
}
.bottom-1 {
  bottom: 0.25rem
}
.bottom-1\.5 {
  bottom: 0.375rem
}
.bottom-16 {
  bottom: 4rem
}
.bottom-2 {
  bottom: 0.5rem
}
.bottom-20 {
  bottom: 5rem
}
.bottom-3 {
  bottom: 0.75rem
}
.bottom-4 {
  bottom: 1rem
}
.bottom-5 {
  bottom: 1.25rem
}
.bottom-6 {
  bottom: 1.5rem
}
.bottom-\[-14px\] {
  bottom: -14px
}
.bottom-full {
  bottom: 100%
}
.end-0 {
  inset-inline-end: 0px
}
.end-1 {
  inset-inline-end: 0.25rem
}
.end-14 {
  inset-inline-end: 3.5rem
}
.end-4 {
  inset-inline-end: 1rem
}
.left-0 {
  left: 0px
}
.left-1 {
  left: 0.25rem
}
.left-1\.5 {
  left: 0.375rem
}
.left-1\/2 {
  left: 50%
}
.left-2 {
  left: 0.5rem
}
.left-2\.5 {
  left: 0.625rem
}
.left-3 {
  left: 0.75rem
}
.left-4 {
  left: 1rem
}
.left-5 {
  left: 1.25rem
}
.left-6 {
  left: 1.5rem
}
.left-8 {
  left: 2rem
}
.left-\[11px\] {
  left: 11px
}
.left-\[18\%\] {
  left: 18%
}
.left-\[6\.5px\] {
  left: 6.5px
}
.left-full {
  left: 100%
}
.right-0 {
  right: 0px
}
.right-0\.5 {
  right: 0.125rem
}
.right-1 {
  right: 0.25rem
}
.right-1\.5 {
  right: 0.375rem
}
.right-14 {
  right: 3.5rem
}
.right-2 {
  right: 0.5rem
}
.right-2\.5 {
  right: 0.625rem
}
.right-3 {
  right: 0.75rem
}
.right-4 {
  right: 1rem
}
.right-6 {
  right: 1.5rem
}
.right-8 {
  right: 2rem
}
.right-9 {
  right: 2.25rem
}
.right-\[15rem\] {
  right: 15rem
}
.right-full {
  right: 100%
}
.start-0 {
  inset-inline-start: 0px
}
.start-4 {
  inset-inline-start: 1rem
}
.start-full {
  inset-inline-start: 100%
}
.top-0 {
  top: 0px
}
.top-0\.5 {
  top: 0.125rem
}
.top-1 {
  top: 0.25rem
}
.top-1\.5 {
  top: 0.375rem
}
.top-1\/2 {
  top: 50%
}
.top-1\/4 {
  top: 25%
}
.top-10 {
  top: 2.5rem
}
.top-2 {
  top: 0.5rem
}
.top-2\.5 {
  top: 0.625rem
}
.top-3 {
  top: 0.75rem
}
.top-4 {
  top: 1rem
}
.top-6 {
  top: 1.5rem
}
.top-8 {
  top: 2rem
}
.top-\[30\%\] {
  top: 30%
}
.top-\[50px\] {
  top: 50px
}
.top-\[57px\] {
  top: 57px
}
.top-full {
  top: 100%
}
.isolate {
  isolation: isolate
}
.z-0 {
  z-index: 0
}
.z-10 {
  z-index: 10
}
.z-20 {
  z-index: 20
}
.z-30 {
  z-index: 30
}
.z-40 {
  z-index: 40
}
.z-50 {
  z-index: 50
}
.z-\[1\] {
  z-index: 1
}
.z-\[2\] {
  z-index: 2
}
.z-floating {
  z-index: 50
}
.z-floating-raised {
  z-index: 55
}
.z-menu {
  z-index: 100
}
.z-modal {
  z-index: 1000
}
.z-modal-elevated {
  z-index: 1100
}
.z-popover {
  z-index: 60
}
.z-popover-raised {
  z-index: 61
}
.z-system {
  z-index: 9999
}
.z-system-below {
  z-index: 9998
}
.order-1 {
  order: 1
}
.order-2 {
  order: 2
}
.col-span-2 {
  grid-column: span 2 / span 2
}
.float-right {
  float: right
}
.-m-0\.5 {
  margin: -0.125rem
}
.-m-1 {
  margin: -0.25rem
}
.-m-2 {
  margin: -0.5rem
}
.m-0 {
  margin: 0px
}
.m-2 {
  margin: 0.5rem
}
.m-3 {
  margin: 0.75rem
}
.m-auto {
  margin: auto
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem
}
.-my-0\.5 {
  margin-top: -0.125rem;
  margin-bottom: -0.125rem
}
.-my-1 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem
}
.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem
}
.mx-auto {
  margin-left: auto;
  margin-right: auto
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem
}
.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem
}
.my-2\.5 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto
}
.-mb-0\.5 {
  margin-bottom: -0.125rem
}
.-mb-2 {
  margin-bottom: -0.5rem
}
.-mb-6 {
  margin-bottom: -1.5rem
}
.-mb-px {
  margin-bottom: -1px
}
.-ml-1 {
  margin-left: -0.25rem
}
.-ml-1\.5 {
  margin-left: -0.375rem
}
.-ml-2 {
  margin-left: -0.5rem
}
.-ml-3 {
  margin-left: -0.75rem
}
.-ml-5 {
  margin-left: -1.25rem
}
.-mr-0\.5 {
  margin-right: -0.125rem
}
.-mr-1 {
  margin-right: -0.25rem
}
.-mr-1\.5 {
  margin-right: -0.375rem
}
.-mr-2 {
  margin-right: -0.5rem
}
.-mt-0\.5 {
  margin-top: -0.125rem
}
.-mt-1 {
  margin-top: -0.25rem
}
.-mt-2 {
  margin-top: -0.5rem
}
.-mt-4 {
  margin-top: -1rem
}
.mb-0\.5 {
  margin-bottom: 0.125rem
}
.mb-1 {
  margin-bottom: 0.25rem
}
.mb-1\.5 {
  margin-bottom: 0.375rem
}
.mb-10 {
  margin-bottom: 2.5rem
}
.mb-12 {
  margin-bottom: 3rem
}
.mb-14 {
  margin-bottom: 3.5rem
}
.mb-2 {
  margin-bottom: 0.5rem
}
.mb-2\.5 {
  margin-bottom: 0.625rem
}
.mb-3 {
  margin-bottom: 0.75rem
}
.mb-4 {
  margin-bottom: 1rem
}
.mb-5 {
  margin-bottom: 1.25rem
}
.mb-6 {
  margin-bottom: 1.5rem
}
.me-1\.5 {
  margin-inline-end: 0.375rem
}
.ml-0 {
  margin-left: 0px
}
.ml-0\.5 {
  margin-left: 0.125rem
}
.ml-1 {
  margin-left: 0.25rem
}
.ml-1\.5 {
  margin-left: 0.375rem
}
.ml-12 {
  margin-left: 3rem
}
.ml-2 {
  margin-left: 0.5rem
}
.ml-3 {
  margin-left: 0.75rem
}
.ml-4 {
  margin-left: 1rem
}
.ml-5 {
  margin-left: 1.25rem
}
.ml-6 {
  margin-left: 1.5rem
}
.ml-7 {
  margin-left: 1.75rem
}
.ml-8 {
  margin-left: 2rem
}
.ml-\[200px\] {
  margin-left: 200px
}
.ml-\[88px\] {
  margin-left: 88px
}
.ml-auto {
  margin-left: auto
}
.ml-px {
  margin-left: 1px
}
.mr-0\.5 {
  margin-right: 0.125rem
}
.mr-1 {
  margin-right: 0.25rem
}
.mr-1\.5 {
  margin-right: 0.375rem
}
.mr-2 {
  margin-right: 0.5rem
}
.mr-3 {
  margin-right: 0.75rem
}
.mr-8 {
  margin-right: 2rem
}
.mr-\[8px\] {
  margin-right: 8px
}
.mr-auto {
  margin-right: auto
}
.ms-0\.5 {
  margin-inline-start: 0.125rem
}
.ms-1 {
  margin-inline-start: 0.25rem
}
.ms-1\.5 {
  margin-inline-start: 0.375rem
}
.ms-2 {
  margin-inline-start: 0.5rem
}
.ms-7 {
  margin-inline-start: 1.75rem
}
.ms-auto {
  margin-inline-start: auto
}
.mt-0 {
  margin-top: 0px
}
.mt-0\.5 {
  margin-top: 0.125rem
}
.mt-1 {
  margin-top: 0.25rem
}
.mt-1\.5 {
  margin-top: 0.375rem
}
.mt-2 {
  margin-top: 0.5rem
}
.mt-2\.5 {
  margin-top: 0.625rem
}
.mt-3 {
  margin-top: 0.75rem
}
.mt-4 {
  margin-top: 1rem
}
.mt-5 {
  margin-top: 1.25rem
}
.mt-6 {
  margin-top: 1.5rem
}
.mt-8 {
  margin-top: 2rem
}
.mt-auto {
  margin-top: auto
}
.mt-px {
  margin-top: 1px
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3
}
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4
}
.\!block {
  display: block !important
}
.block {
  display: block
}
.inline-block {
  display: inline-block
}
.\!inline {
  display: inline !important
}
.inline {
  display: inline
}
.flex {
  display: flex
}
.inline-flex {
  display: inline-flex
}
.\!table {
  display: table !important
}
.table {
  display: table
}
.table-cell {
  display: table-cell
}
.grid {
  display: grid
}
.contents {
  display: contents
}
.list-item {
  display: list-item
}
.\!hidden {
  display: none !important
}
.hidden {
  display: none
}
.aspect-\[1\.91\/1\] {
  aspect-ratio: 1.91/1
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9
}
.aspect-square {
  aspect-ratio: 1 / 1
}
.aspect-video {
  aspect-ratio: 16 / 9
}
.\!h-2\.5 {
  height: 0.625rem !important
}
.h-0 {
  height: 0px
}
.h-0\.5 {
  height: 0.125rem
}
.h-1 {
  height: 0.25rem
}
.h-1\.5 {
  height: 0.375rem
}
.h-1\/2 {
  height: 50%
}
.h-10 {
  height: 2.5rem
}
.h-11 {
  height: 2.75rem
}
.h-12 {
  height: 3rem
}
.h-14 {
  height: 3.5rem
}
.h-16 {
  height: 4rem
}
.h-2 {
  height: 0.5rem
}
.h-2\.5 {
  height: 0.625rem
}
.h-20 {
  height: 5rem
}
.h-24 {
  height: 6rem
}
.h-28 {
  height: 7rem
}
.h-3 {
  height: 0.75rem
}
.h-3\.5 {
  height: 0.875rem
}
.h-32 {
  height: 8rem
}
.h-36 {
  height: 9rem
}
.h-4 {
  height: 1rem
}
.h-40 {
  height: 10rem
}
.h-44 {
  height: 11rem
}
.h-48 {
  height: 12rem
}
.h-5 {
  height: 1.25rem
}
.h-6 {
  height: 1.5rem
}
.h-64 {
  height: 16rem
}
.h-7 {
  height: 1.75rem
}
.h-72 {
  height: 18rem
}
.h-8 {
  height: 2rem
}
.h-80 {
  height: 20rem
}
.h-9 {
  height: 2.25rem
}
.h-96 {
  height: 24rem
}
.h-\[1\.25rem\] {
  height: 1.25rem
}
.h-\[1\.625em\] {
  height: 1.625em
}
.h-\[100dvh\] {
  height: 100dvh
}
.h-\[100px\] {
  height: 100px
}
.h-\[120px\] {
  height: 120px
}
.h-\[132px\] {
  height: 132px
}
.h-\[15px\] {
  height: 15px
}
.h-\[16px\] {
  height: 16px
}
.h-\[18px\] {
  height: 18px
}
.h-\[22px\] {
  height: 22px
}
.h-\[232px\] {
  height: 232px
}
.h-\[240px\] {
  height: 240px
}
.h-\[24px\] {
  height: 24px
}
.h-\[32vh\] {
  height: 32vh
}
.h-\[37rem\] {
  height: 37rem
}
.h-\[3px\] {
  height: 3px
}
.h-\[44px\] {
  height: 44px
}
.h-\[4px\] {
  height: 4px
}
.h-\[500px\] {
  height: 500px
}
.h-\[52px\] {
  height: 52px
}
.h-\[55vh\] {
  height: 55vh
}
.h-\[560px\] {
  height: 560px
}
.h-\[60px\] {
  height: 60px
}
.h-\[60vh\] {
  height: 60vh
}
.h-\[6px\] {
  height: 6px
}
.h-\[70px\] {
  height: 70px
}
.h-\[70vh\] {
  height: 70vh
}
.h-\[80vh\] {
  height: 80vh
}
.h-\[85vh\] {
  height: 85vh
}
.h-\[8px\] {
  height: 8px
}
.h-\[94px\] {
  height: 94px
}
.h-\[96vh\] {
  height: 96vh
}
.h-auto {
  height: auto
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content
}
.h-full {
  height: 100%
}
.h-px {
  height: 1px
}
.h-screen {
  height: 100vh
}
.max-h-0 {
  max-height: 0px
}
.max-h-24 {
  max-height: 6rem
}
.max-h-28 {
  max-height: 7rem
}
.max-h-32 {
  max-height: 8rem
}
.max-h-40 {
  max-height: 10rem
}
.max-h-48 {
  max-height: 12rem
}
.max-h-56 {
  max-height: 14rem
}
.max-h-60 {
  max-height: 15rem
}
.max-h-64 {
  max-height: 16rem
}
.max-h-72 {
  max-height: 18rem
}
.max-h-80 {
  max-height: 20rem
}
.max-h-96 {
  max-height: 24rem
}
.max-h-\[120px\] {
  max-height: 120px
}
.max-h-\[200px\] {
  max-height: 200px
}
.max-h-\[240px\] {
  max-height: 240px
}
.max-h-\[24vh\] {
  max-height: 24vh
}
.max-h-\[260px\] {
  max-height: 260px
}
.max-h-\[28vh\] {
  max-height: 28vh
}
.max-h-\[300px\] {
  max-height: 300px
}
.max-h-\[320px\] {
  max-height: 320px
}
.max-h-\[360px\] {
  max-height: 360px
}
.max-h-\[40vh\] {
  max-height: 40vh
}
.max-h-\[420px\] {
  max-height: 420px
}
.max-h-\[45vh\] {
  max-height: 45vh
}
.max-h-\[480px\] {
  max-height: 480px
}
.max-h-\[50vh\] {
  max-height: 50vh
}
.max-h-\[55\%\] {
  max-height: 55%
}
.max-h-\[55vh\] {
  max-height: 55vh
}
.max-h-\[5rem\] {
  max-height: 5rem
}
.max-h-\[60vh\] {
  max-height: 60vh
}
.max-h-\[62\.5vh\] {
  max-height: 62.5vh
}
.max-h-\[70\%\] {
  max-height: 70%
}
.max-h-\[70vh\] {
  max-height: 70vh
}
.max-h-\[72\%\] {
  max-height: 72%
}
.max-h-\[75vh\] {
  max-height: 75vh
}
.max-h-\[80vh\] {
  max-height: 80vh
}
.max-h-\[85vh\] {
  max-height: 85vh
}
.max-h-\[90vh\] {
  max-height: 90vh
}
.max-h-\[calc\(100\%-1\.5rem\)\] {
  max-height: calc(100% - 1.5rem)
}
.max-h-\[calc\(100\%-2rem\)\] {
  max-height: calc(100% - 2rem)
}
.max-h-\[calc\(100dvh-7rem\)\] {
  max-height: calc(100dvh - 7rem)
}
.max-h-\[calc\(100vh-2rem\)\] {
  max-height: calc(100vh - 2rem)
}
.max-h-\[min\(340px\2c 50vh\)\] {
  max-height: min(340px, 50vh)
}
.max-h-\[min\(85vh\2c 100\%\)\] {
  max-height: min(85vh, 100%)
}
.max-h-full {
  max-height: 100%
}
.max-h-none {
  max-height: none
}
.min-h-0 {
  min-height: 0px
}
.min-h-10 {
  min-height: 2.5rem
}
.min-h-11 {
  min-height: 2.75rem
}
.min-h-14 {
  min-height: 3.5rem
}
.min-h-16 {
  min-height: 4rem
}
.min-h-24 {
  min-height: 6rem
}
.min-h-\[1\.25rem\] {
  min-height: 1.25rem
}
.min-h-\[100dvh\] {
  min-height: 100dvh
}
.min-h-\[100px\] {
  min-height: 100px
}
.min-h-\[10px\] {
  min-height: 10px
}
.min-h-\[10rem\] {
  min-height: 10rem
}
.min-h-\[120px\] {
  min-height: 120px
}
.min-h-\[12rem\] {
  min-height: 12rem
}
.min-h-\[132px\] {
  min-height: 132px
}
.min-h-\[140px\] {
  min-height: 140px
}
.min-h-\[150px\] {
  min-height: 150px
}
.min-h-\[15rem\] {
  min-height: 15rem
}
.min-h-\[160px\] {
  min-height: 160px
}
.min-h-\[16rem\] {
  min-height: 16rem
}
.min-h-\[180px\] {
  min-height: 180px
}
.min-h-\[2\.5rem\] {
  min-height: 2.5rem
}
.min-h-\[2\.75rem\] {
  min-height: 2.75rem
}
.min-h-\[200px\] {
  min-height: 200px
}
.min-h-\[240px\] {
  min-height: 240px
}
.min-h-\[28px\] {
  min-height: 28px
}
.min-h-\[300px\] {
  min-height: 300px
}
.min-h-\[32px\] {
  min-height: 32px
}
.min-h-\[36px\] {
  min-height: 36px
}
.min-h-\[37rem\] {
  min-height: 37rem
}
.min-h-\[38px\] {
  min-height: 38px
}
.min-h-\[400px\] {
  min-height: 400px
}
.min-h-\[40px\] {
  min-height: 40px
}
.min-h-\[44px\] {
  min-height: 44px
}
.min-h-\[48px\] {
  min-height: 48px
}
.min-h-\[4rem\] {
  min-height: 4rem
}
.min-h-\[50vh\] {
  min-height: 50vh
}
.min-h-\[52px\] {
  min-height: 52px
}
.min-h-\[54px\] {
  min-height: 54px
}
.min-h-\[60px\] {
  min-height: 60px
}
.min-h-\[62vh\] {
  min-height: 62vh
}
.min-h-\[64px\] {
  min-height: 64px
}
.min-h-\[6rem\] {
  min-height: 6rem
}
.min-h-\[72px\] {
  min-height: 72px
}
.min-h-\[76px\] {
  min-height: 76px
}
.min-h-\[7rem\] {
  min-height: 7rem
}
.min-h-\[80px\] {
  min-height: 80px
}
.min-h-\[88px\] {
  min-height: 88px
}
.min-h-\[8rem\] {
  min-height: 8rem
}
.min-h-\[96px\] {
  min-height: 96px
}
.min-h-full {
  min-height: 100%
}
.min-h-screen {
  min-height: 100vh
}
.\!w-2\.5 {
  width: 0.625rem !important
}
.\!w-64 {
  width: 16rem !important
}
.w-0 {
  width: 0px
}
.w-0\.5 {
  width: 0.125rem
}
.w-1 {
  width: 0.25rem
}
.w-1\.5 {
  width: 0.375rem
}
.w-1\/2 {
  width: 50%
}
.w-1\/3 {
  width: 33.333333%
}
.w-1\/4 {
  width: 25%
}
.w-10 {
  width: 2.5rem
}
.w-11 {
  width: 2.75rem
}
.w-11\/12 {
  width: 91.666667%
}
.w-12 {
  width: 3rem
}
.w-14 {
  width: 3.5rem
}
.w-16 {
  width: 4rem
}
.w-2 {
  width: 0.5rem
}
.w-2\.5 {
  width: 0.625rem
}
.w-2\/3 {
  width: 66.666667%
}
.w-2\/5 {
  width: 40%
}
.w-20 {
  width: 5rem
}
.w-24 {
  width: 6rem
}
.w-28 {
  width: 7rem
}
.w-3 {
  width: 0.75rem
}
.w-3\.5 {
  width: 0.875rem
}
.w-3\/4 {
  width: 75%
}
.w-3\/5 {
  width: 60%
}
.w-32 {
  width: 8rem
}
.w-36 {
  width: 9rem
}
.w-4 {
  width: 1rem
}
.w-4\/5 {
  width: 80%
}
.w-4\/6 {
  width: 66.666667%
}
.w-40 {
  width: 10rem
}
.w-44 {
  width: 11rem
}
.w-48 {
  width: 12rem
}
.w-5 {
  width: 1.25rem
}
.w-5\/6 {
  width: 83.333333%
}
.w-52 {
  width: 13rem
}
.w-56 {
  width: 14rem
}
.w-6 {
  width: 1.5rem
}
.w-60 {
  width: 15rem
}
.w-64 {
  width: 16rem
}
.w-7 {
  width: 1.75rem
}
.w-72 {
  width: 18rem
}
.w-8 {
  width: 2rem
}
.w-80 {
  width: 20rem
}
.w-9 {
  width: 2.25rem
}
.w-96 {
  width: 24rem
}
.w-\[1\%\] {
  width: 1%
}
.w-\[140px\] {
  width: 140px
}
.w-\[16px\] {
  width: 16px
}
.w-\[180px\] {
  width: 180px
}
.w-\[18px\] {
  width: 18px
}
.w-\[18rem\] {
  width: 18rem
}
.w-\[190px\] {
  width: 190px
}
.w-\[200px\] {
  width: 200px
}
.w-\[20rem\] {
  width: 20rem
}
.w-\[22px\] {
  width: 22px
}
.w-\[232px\] {
  width: 232px
}
.w-\[24px\] {
  width: 24px
}
.w-\[260px\] {
  width: 260px
}
.w-\[268px\] {
  width: 268px
}
.w-\[26rem\] {
  width: 26rem
}
.w-\[27\.5rem\] {
  width: 27.5rem
}
.w-\[280px\] {
  width: 280px
}
.w-\[28rem\] {
  width: 28rem
}
.w-\[300px\] {
  width: 300px
}
.w-\[320px\] {
  width: 320px
}
.w-\[32rem\] {
  width: 32rem
}
.w-\[340px\] {
  width: 340px
}
.w-\[35\%\] {
  width: 35%
}
.w-\[360px\] {
  width: 360px
}
.w-\[36px\] {
  width: 36px
}
.w-\[380px\] {
  width: 380px
}
.w-\[3px\] {
  width: 3px
}
.w-\[40\%\] {
  width: 40%
}
.w-\[45\%\] {
  width: 45%
}
.w-\[4px\] {
  width: 4px
}
.w-\[50px\] {
  width: 50px
}
.w-\[520px\] {
  width: 520px
}
.w-\[60\%\] {
  width: 60%
}
.w-\[70\%\] {
  width: 70%
}
.w-\[70px\] {
  width: 70px
}
.w-\[72px\] {
  width: 72px
}
.w-\[80\%\] {
  width: 80%
}
.w-\[80vw\] {
  width: 80vw
}
.w-\[84\%\] {
  width: 84%
}
.w-\[90px\] {
  width: 90px
}
.w-auto {
  width: auto
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content
}
.w-full {
  width: 100%
}
.w-max {
  width: -moz-max-content;
  width: max-content
}
.w-px {
  width: 1px
}
.w-screen {
  width: 100vw
}
.min-w-0 {
  min-width: 0px
}
.min-w-11 {
  min-width: 2.75rem
}
.min-w-8 {
  min-width: 2rem
}
.min-w-\[1\.25rem\] {
  min-width: 1.25rem
}
.min-w-\[100px\] {
  min-width: 100px
}
.min-w-\[10rem\] {
  min-width: 10rem
}
.min-w-\[11rem\] {
  min-width: 11rem
}
.min-w-\[120px\] {
  min-width: 120px
}
.min-w-\[12rem\] {
  min-width: 12rem
}
.min-w-\[13rem\] {
  min-width: 13rem
}
.min-w-\[140px\] {
  min-width: 140px
}
.min-w-\[14rem\] {
  min-width: 14rem
}
.min-w-\[150px\] {
  min-width: 150px
}
.min-w-\[15px\] {
  min-width: 15px
}
.min-w-\[160px\] {
  min-width: 160px
}
.min-w-\[16px\] {
  min-width: 16px
}
.min-w-\[16rem\] {
  min-width: 16rem
}
.min-w-\[180px\] {
  min-width: 180px
}
.min-w-\[18px\] {
  min-width: 18px
}
.min-w-\[190px\] {
  min-width: 190px
}
.min-w-\[1rem\] {
  min-width: 1rem
}
.min-w-\[2\.5rem\] {
  min-width: 2.5rem
}
.min-w-\[200px\] {
  min-width: 200px
}
.min-w-\[20px\] {
  min-width: 20px
}
.min-w-\[210px\] {
  min-width: 210px
}
.min-w-\[220px\] {
  min-width: 220px
}
.min-w-\[22rem\] {
  min-width: 22rem
}
.min-w-\[230px\] {
  min-width: 230px
}
.min-w-\[240px\] {
  min-width: 240px
}
.min-w-\[260px\] {
  min-width: 260px
}
.min-w-\[26rem\] {
  min-width: 26rem
}
.min-w-\[280px\] {
  min-width: 280px
}
.min-w-\[3\.25rem\] {
  min-width: 3.25rem
}
.min-w-\[3\.5rem\] {
  min-width: 3.5rem
}
.min-w-\[300px\] {
  min-width: 300px
}
.min-w-\[320px\] {
  min-width: 320px
}
.min-w-\[32px\] {
  min-width: 32px
}
.min-w-\[36px\] {
  min-width: 36px
}
.min-w-\[4\.5rem\] {
  min-width: 4.5rem
}
.min-w-\[40\%\] {
  min-width: 40%
}
.min-w-\[40px\] {
  min-width: 40px
}
.min-w-\[44px\] {
  min-width: 44px
}
.min-w-\[4rem\] {
  min-width: 4rem
}
.min-w-\[55\%\] {
  min-width: 55%
}
.min-w-\[560px\] {
  min-width: 560px
}
.min-w-\[56px\] {
  min-width: 56px
}
.min-w-\[60px\] {
  min-width: 60px
}
.min-w-\[72px\] {
  min-width: 72px
}
.min-w-\[7rem\] {
  min-width: 7rem
}
.min-w-\[80px\] {
  min-width: 80px
}
.min-w-\[88px\] {
  min-width: 88px
}
.min-w-\[8ch\] {
  min-width: 8ch
}
.min-w-\[8rem\] {
  min-width: 8rem
}
.min-w-\[90px\] {
  min-width: 90px
}
.min-w-\[9rem\] {
  min-width: 9rem
}
.min-w-min {
  min-width: -moz-min-content;
  min-width: min-content
}
.max-w-14 {
  max-width: 3.5rem
}
.max-w-2xl {
  max-width: 42rem
}
.max-w-3xl {
  max-width: 48rem
}
.max-w-4xl {
  max-width: 56rem
}
.max-w-5xl {
  max-width: 64rem
}
.max-w-6xl {
  max-width: 72rem
}
.max-w-\[100px\] {
  max-width: 100px
}
.max-w-\[10rem\] {
  max-width: 10rem
}
.max-w-\[110px\] {
  max-width: 110px
}
.max-w-\[120px\] {
  max-width: 120px
}
.max-w-\[12rem\] {
  max-width: 12rem
}
.max-w-\[130px\] {
  max-width: 130px
}
.max-w-\[140px\] {
  max-width: 140px
}
.max-w-\[14rem\] {
  max-width: 14rem
}
.max-w-\[150px\] {
  max-width: 150px
}
.max-w-\[15rem\] {
  max-width: 15rem
}
.max-w-\[160px\] {
  max-width: 160px
}
.max-w-\[16rem\] {
  max-width: 16rem
}
.max-w-\[180px\] {
  max-width: 180px
}
.max-w-\[200px\] {
  max-width: 200px
}
.max-w-\[20rem\] {
  max-width: 20rem
}
.max-w-\[220px\] {
  max-width: 220px
}
.max-w-\[240px\] {
  max-width: 240px
}
.max-w-\[24ch\] {
  max-width: 24ch
}
.max-w-\[260px\] {
  max-width: 260px
}
.max-w-\[280px\] {
  max-width: 280px
}
.max-w-\[28ch\] {
  max-width: 28ch
}
.max-w-\[300px\] {
  max-width: 300px
}
.max-w-\[30ch\] {
  max-width: 30ch
}
.max-w-\[320px\] {
  max-width: 320px
}
.max-w-\[34\%\] {
  max-width: 34%
}
.max-w-\[340px\] {
  max-width: 340px
}
.max-w-\[36ch\] {
  max-width: 36ch
}
.max-w-\[40\%\] {
  max-width: 40%
}
.max-w-\[40ch\] {
  max-width: 40ch
}
.max-w-\[420px\] {
  max-width: 420px
}
.max-w-\[42ch\] {
  max-width: 42ch
}
.max-w-\[42px\] {
  max-width: 42px
}
.max-w-\[440px\] {
  max-width: 440px
}
.max-w-\[44ch\] {
  max-width: 44ch
}
.max-w-\[45\%\] {
  max-width: 45%
}
.max-w-\[480px\] {
  max-width: 480px
}
.max-w-\[5\.5rem\] {
  max-width: 5.5rem
}
.max-w-\[500px\] {
  max-width: 500px
}
.max-w-\[60\%\] {
  max-width: 60%
}
.max-w-\[60ch\] {
  max-width: 60ch
}
.max-w-\[640px\] {
  max-width: 640px
}
.max-w-\[6ch\] {
  max-width: 6ch
}
.max-w-\[700px\] {
  max-width: 700px
}
.max-w-\[70ch\] {
  max-width: 70ch
}
.max-w-\[72ch\] {
  max-width: 72ch
}
.max-w-\[75\%\] {
  max-width: 75%
}
.max-w-\[75ch\] {
  max-width: 75ch
}
.max-w-\[7rem\] {
  max-width: 7rem
}
.max-w-\[80\%\] {
  max-width: 80%
}
.max-w-\[80vw\] {
  max-width: 80vw
}
.max-w-\[85\%\] {
  max-width: 85%
}
.max-w-\[88\%\] {
  max-width: 88%
}
.max-w-\[8rem\] {
  max-width: 8rem
}
.max-w-\[90px\] {
  max-width: 90px
}
.max-w-\[90vw\] {
  max-width: 90vw
}
.max-w-\[92\%\] {
  max-width: 92%
}
.max-w-\[92vw\] {
  max-width: 92vw
}
.max-w-\[95vw\] {
  max-width: 95vw
}
.max-w-\[96vw\] {
  max-width: 96vw
}
.max-w-\[9rem\] {
  max-width: 9rem
}
.max-w-\[calc\(100\%-1\.5rem\)\] {
  max-width: calc(100% - 1.5rem)
}
.max-w-\[calc\(100\%-1rem\)\] {
  max-width: calc(100% - 1rem)
}
.max-w-\[calc\(100vw-1\.5rem\)\] {
  max-width: calc(100vw - 1.5rem)
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem)
}
.max-w-\[min\(60vw\2c 320px\)\] {
  max-width: min(60vw, 320px)
}
.max-w-\[min\(90vw\2c 360px\)\] {
  max-width: min(90vw, 360px)
}
.max-w-\[min\(95vw\2c 32rem\)\] {
  max-width: min(95vw, 32rem)
}
.max-w-full {
  max-width: 100%
}
.max-w-lg {
  max-width: 32rem
}
.max-w-md {
  max-width: 28rem
}
.max-w-none {
  max-width: none
}
.max-w-prose {
  max-width: 65ch
}
.max-w-sm {
  max-width: 24rem
}
.max-w-xl {
  max-width: 36rem
}
.max-w-xs {
  max-width: 20rem
}
.flex-1 {
  flex: 1 1 0%
}
.flex-\[0_0_46\%\] {
  flex: 0 0 46%
}
.flex-\[1\.2\] {
  flex: 1.2
}
.flex-none {
  flex: none
}
.flex-shrink {
  flex-shrink: 1
}
.flex-shrink-0 {
  flex-shrink: 0
}
.shrink {
  flex-shrink: 1
}
.shrink-0 {
  flex-shrink: 0
}
.flex-grow {
  flex-grow: 1
}
.grow {
  flex-grow: 1
}
.border-collapse {
  border-collapse: collapse
}
.origin-left {
  transform-origin: left
}
.-translate-x-1 {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-1\/4 {
  --tw-translate-x: -25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-\[120\%\] {
  --tw-translate-x: -120%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-1\/4 {
  --tw-translate-y: -25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-1\/2 {
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-1\/4 {
  --tw-translate-x: 25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-6 {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-\[1\.125rem\] {
  --tw-translate-x: 1.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-1\/2 {
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-1\/4 {
  --tw-translate-y: 25%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-0 {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.\!transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@keyframes celebrate-pop {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.96)
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.02)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
.animate-celebrate-pop {
  animation: celebrate-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
}
@keyframes pulse {
  50% {
    opacity: .5
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
@keyframes rocket-launch {
  0% {
    opacity: 0;
    transform: translateY(3px) rotate(-6deg)
  }
  40% {
    opacity: 1
  }
  70% {
    transform: translateY(-3px) rotate(5deg)
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg)
  }
}
.animate-rocket-launch {
  animation: rocket-launch 0.9s cubic-bezier(0.16, 1, 0.3, 1) both
}
@keyframes shimmer {
  0% {
    background-position: -200% 0
  }
  100% {
    background-position: 200% 0
  }
}
.animate-shimmer {
  animation: shimmer 1.5s ease-in-out infinite
}
@keyframes sparkle-fade {
  0% {
    opacity: 0;
    transform: scale(0.2)
  }
  45% {
    opacity: 1;
    transform: scale(1)
  }
  100% {
    opacity: 0;
    transform: scale(0.5)
  }
}
.animate-sparkle-fade {
  animation: sparkle-fade 0.9s ease-out both
}
@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}
.animate-spin {
  animation: spin 1s linear infinite
}
@keyframes streaming-pulse {
  0%, 100% {
    border-left-color: rgb(var(--status-agent-rgb) / 0.4)
  }
  50% {
    border-left-color: rgb(var(--status-agent-rgb) / 0.8)
  }
}
.animate-streaming-pulse {
  animation: streaming-pulse 2s ease-in-out infinite
}
@keyframes typing-dot {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8) translateX(-1px)
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(1px)
  }
}
.animate-typing-dot {
  animation: typing-dot 1.4s ease-in-out infinite
}
.cursor-cell {
  cursor: cell
}
.cursor-col-resize {
  cursor: col-resize
}
.cursor-default {
  cursor: default
}
.cursor-ew-resize {
  cursor: ew-resize
}
.cursor-grab {
  cursor: grab
}
.cursor-move {
  cursor: move
}
.cursor-not-allowed {
  cursor: not-allowed
}
.cursor-ns-resize {
  cursor: ns-resize
}
.cursor-nwse-resize {
  cursor: nwse-resize
}
.cursor-pointer {
  cursor: pointer
}
.cursor-se-resize {
  cursor: se-resize
}
.cursor-text {
  cursor: text
}
.cursor-wait {
  cursor: wait
}
.cursor-zoom-in {
  cursor: zoom-in
}
.touch-none {
  touch-action: none
}
.touch-pan-y {
  --tw-pan-y: pan-y;
  touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none
}
.select-text {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all
}
.resize-none {
  resize: none
}
.resize-y {
  resize: vertical
}
.resize {
  resize: both
}
.scroll-mt-14 {
  scroll-margin-top: 3.5rem
}
.scroll-mt-4 {
  scroll-margin-top: 1rem
}
.list-inside {
  list-style-position: inside
}
.list-decimal {
  list-style-type: decimal
}
.list-disc {
  list-style-type: disc
}
.list-none {
  list-style-type: none
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none
}
.columns-1 {
  -moz-columns: 1;
       columns: 1
}
.columns-2 {
  -moz-columns: 2;
       columns: 2
}
.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr))
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr))
}
.grid-cols-\[1\.5fr_1fr_0\.6fr_2fr_auto\] {
  grid-template-columns: 1.5fr 1fr 0.6fr 2fr auto
}
.grid-cols-\[110px_1fr_44px\] {
  grid-template-columns: 110px 1fr 44px
}
.grid-cols-\[20px_minmax\(0\2c 1fr\)_60px_60px_60px_60px_20px_60px\] {
  grid-template-columns: 20px minmax(0,1fr) 60px 60px 60px 60px 20px 60px
}
.grid-cols-\[20px_minmax\(0\2c 1fr\)_70px_60px_70px_70px_180px_90px_70px_50px\] {
  grid-template-columns: 20px minmax(0,1fr) 70px 60px 70px 70px 180px 90px 70px 50px
}
.grid-cols-\[220px_1fr\] {
  grid-template-columns: 220px 1fr
}
.grid-cols-\[7rem_1fr_2\.5rem\] {
  grid-template-columns: 7rem 1fr 2.5rem
}
.grid-cols-\[88px_minmax\(0\2c 1\.4fr\)_minmax\(0\2c 1fr\)_64px_64px_56px_64px_84px_132px\] {
  grid-template-columns: 88px minmax(0,1.4fr) minmax(0,1fr) 64px 64px 56px 64px 84px 132px
}
.grid-cols-\[9rem_1fr_2\.5rem\] {
  grid-template-columns: 9rem 1fr 2.5rem
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr
}
.grid-cols-\[minmax\(0\2c 1fr\)_5rem\] {
  grid-template-columns: minmax(0,1fr) 5rem
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(150px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr))
}
.grid-cols-\[repeat\(auto-fit\2c minmax\(min\(400px\2c 100\%\)\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(min(400px, 100%),1fr))
}
.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr))
}
.flex-row {
  flex-direction: row
}
.flex-row-reverse {
  flex-direction: row-reverse
}
.flex-col {
  flex-direction: column
}
.flex-col-reverse {
  flex-direction: column-reverse
}
.flex-wrap {
  flex-wrap: wrap
}
.flex-nowrap {
  flex-wrap: nowrap
}
.place-items-center {
  place-items: center
}
.items-start {
  align-items: flex-start
}
.items-end {
  align-items: flex-end
}
.items-center {
  align-items: center
}
.items-baseline {
  align-items: baseline
}
.items-stretch {
  align-items: stretch
}
.justify-start {
  justify-content: flex-start
}
.justify-end {
  justify-content: flex-end
}
.justify-center {
  justify-content: center
}
.justify-between {
  justify-content: space-between
}
.justify-around {
  justify-content: space-around
}
.gap-0 {
  gap: 0px
}
.gap-0\.5 {
  gap: 0.125rem
}
.gap-1 {
  gap: 0.25rem
}
.gap-1\.5 {
  gap: 0.375rem
}
.gap-2 {
  gap: 0.5rem
}
.gap-2\.5 {
  gap: 0.625rem
}
.gap-3 {
  gap: 0.75rem
}
.gap-3\.5 {
  gap: 0.875rem
}
.gap-4 {
  gap: 1rem
}
.gap-5 {
  gap: 1.25rem
}
.gap-6 {
  gap: 1.5rem
}
.gap-8 {
  gap: 2rem
}
.gap-\[3px\] {
  gap: 3px
}
.gap-\[4px\] {
  gap: 4px
}
.gap-\[5px\] {
  gap: 5px
}
.gap-\[6px\] {
  gap: 6px
}
.gap-px {
  gap: 1px
}
.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem
}
.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem
}
.gap-y-0\.5 {
  row-gap: 0.125rem
}
.gap-y-1 {
  row-gap: 0.25rem
}
.gap-y-1\.5 {
  row-gap: 0.375rem
}
.gap-y-2 {
  row-gap: 0.5rem
}
.gap-y-3 {
  row-gap: 0.75rem
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse))
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse))
}
.space-y-\[2px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2px * var(--tw-space-y-reverse))
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)))
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
}
.divide-\[var\(--arij-border\2c \#dfe1e6\)\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--arij-border,#dfe1e6)
}
.divide-surface-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-surface-100-rgb) / var(--tw-divide-opacity, 1))
}
.divide-surface-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-divide-opacity, 1))
}
.divide-surface-200\/40 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--color-surface-200-rgb) / 0.4)
}
.divide-surface-300 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-surface-300-rgb) / var(--tw-divide-opacity, 1))
}
.self-start {
  align-self: flex-start
}
.self-end {
  align-self: flex-end
}
.self-center {
  align-self: center
}
.self-stretch {
  align-self: stretch
}
.justify-self-start {
  justify-self: start
}
.justify-self-end {
  justify-self: end
}
.overflow-auto {
  overflow: auto
}
.overflow-hidden {
  overflow: hidden
}
.overflow-clip {
  overflow: clip
}
.overflow-visible {
  overflow: visible
}
.overflow-x-auto {
  overflow-x: auto
}
.overflow-y-auto {
  overflow-y: auto
}
.overflow-x-hidden {
  overflow-x: hidden
}
.overflow-y-hidden {
  overflow-y: hidden
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.whitespace-normal {
  white-space: normal
}
.whitespace-nowrap {
  white-space: nowrap
}
.whitespace-pre {
  white-space: pre
}
.whitespace-pre-line {
  white-space: pre-line
}
.whitespace-pre-wrap {
  white-space: pre-wrap
}
.text-wrap {
  text-wrap: wrap
}
.text-balance {
  text-wrap: balance
}
.text-pretty {
  text-wrap: pretty
}
.break-words {
  overflow-wrap: break-word
}
.break-all {
  word-break: break-all
}
.\!rounded-md {
  border-radius: 0.375rem !important
}
.rounded {
  border-radius: 0.25rem
}
.rounded-2xl {
  border-radius: 1rem
}
.rounded-full {
  border-radius: 9999px
}
.rounded-lg {
  border-radius: 0.5rem
}
.rounded-md {
  border-radius: 0.375rem
}
.rounded-none {
  border-radius: 0px
}
.rounded-panel {
  border-radius: var(--panel-radius)
}
.rounded-sm {
  border-radius: 0.125rem
}
.rounded-xl {
  border-radius: 0.75rem
}
.rounded-l-\[7px\] {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px
}
.rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px
}
.rounded-l-xl {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem
}
.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px
}
.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem
}
.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem
}
.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px
}
.rounded-r-xl {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem
}
.rounded-t-\[100\%\] {
  border-top-left-radius: 100%;
  border-top-right-radius: 100%
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem
}
.rounded-bl-md {
  border-bottom-left-radius: 0.375rem
}
.rounded-br-md {
  border-bottom-right-radius: 0.375rem
}
.rounded-tl-sm {
  border-top-left-radius: 0.125rem
}
.rounded-tr-sm {
  border-top-right-radius: 0.125rem
}
.\!border {
  border-width: 1px !important
}
.border {
  border-width: 1px
}
.border-0 {
  border-width: 0px
}
.border-2 {
  border-width: 2px
}
.border-x-2 {
  border-left-width: 2px;
  border-right-width: 2px
}
.border-b {
  border-bottom-width: 1px
}
.border-b-0 {
  border-bottom-width: 0px
}
.border-b-2 {
  border-bottom-width: 2px
}
.border-l {
  border-left-width: 1px
}
.border-l-2 {
  border-left-width: 2px
}
.border-l-4 {
  border-left-width: 4px
}
.border-l-\[3px\] {
  border-left-width: 3px
}
.border-r {
  border-right-width: 1px
}
.border-r-2 {
  border-right-width: 2px
}
.border-t {
  border-top-width: 1px
}
.border-t-2 {
  border-top-width: 2px
}
.border-dashed {
  border-style: dashed
}
.border-none {
  border-style: none
}
.\!border-surface-400 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--color-surface-400-rgb) / var(--tw-border-opacity, 1)) !important
}
.border-\[\#d4d4d8\] {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1))
}
.border-\[rgb\(var\(--accent-rgb\)\)\] {
  border-color: rgb(var(--accent-rgb))
}
.border-\[rgb\(var\(--accent-rgb\2c 99_102_241\)\)\] {
  border-color: rgb(var(--accent-rgb,99 102 241))
}
.border-\[rgb\(var\(--accent-rgb\2c 99_102_241\)_\/_0\.25\)\] {
  border-color: rgb(var(--accent-rgb,99 102 241) / 0.25)
}
.border-\[rgb\(var\(--border-1\2c _45_55_72\)\)\] {
  border-color: rgb(var(--border-1, 45 55 72))
}
.border-\[rgba\(var\(--accent-rgb\2c 99_102_241\)_\/_0\.5\)\] {
  border-color: rgba(var(--accent-rgb,99 102 241) / 0.5)
}
.border-\[var\(--arij-accent\2c \#1868db\)\] {
  border-color: var(--arij-accent,#1868db)
}
.border-\[var\(--arij-border\2c \#dcdfe4\)\] {
  border-color: var(--arij-border,#dcdfe4)
}
.border-\[var\(--arij-border\2c \#dfe1e6\)\] {
  border-color: var(--arij-border,#dfe1e6)
}
.border-\[var\(--arij-border\2c \#f1f2f4\)\] {
  border-color: var(--arij-border,#f1f2f4)
}
.border-\[var\(--arij-border-strong\2c \#c1c7d0\)\] {
  border-color: var(--arij-border-strong,#c1c7d0)
}
.border-\[var\(--arij-danger\2c \#dc2626\)\] {
  border-color: var(--arij-danger,#dc2626)
}
.border-\[var\(--arij-field-border\2c \#8590a2\)\] {
  border-color: var(--arij-field-border,#8590a2)
}
.border-\[var\(--panel-border\2c \#333\)\] {
  border-color: var(--panel-border,#333)
}
.border-\[var\(--panel-border\2c \#e5e7eb\)\] {
  border-color: var(--panel-border,#e5e7eb)
}
.border-\[var\(--panel-border\2c rgba\(0\2c 0\2c 0\2c 0\.1\)\)\] {
  border-color: var(--panel-border,rgba(0,0,0,0.1))
}
.border-\[var\(--panel-border\2c theme\(colors\.surface\.200\)\)\] {
  border-color: var(--panel-border,rgb(var(--color-surface-200-rgb) / 1))
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1))
}
.border-accent\/10 {
  border-color: rgb(var(--accent-rgb) / 0.1)
}
.border-accent\/15 {
  border-color: rgb(var(--accent-rgb) / 0.15)
}
.border-accent\/20 {
  border-color: rgb(var(--accent-rgb) / 0.2)
}
.border-accent\/25 {
  border-color: rgb(var(--accent-rgb) / 0.25)
}
.border-accent\/30 {
  border-color: rgb(var(--accent-rgb) / 0.3)
}
.border-accent\/40 {
  border-color: rgb(var(--accent-rgb) / 0.4)
}
.border-accent\/50 {
  border-color: rgb(var(--accent-rgb) / 0.5)
}
.border-accent\/60 {
  border-color: rgb(var(--accent-rgb) / 0.6)
}
.border-accent\/70 {
  border-color: rgb(var(--accent-rgb) / 0.7)
}
.border-accent\/80 {
  border-color: rgb(var(--accent-rgb) / 0.8)
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1))
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1))
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1))
}
.border-amber-400\/15 {
  border-color: rgb(251 191 36 / 0.15)
}
.border-amber-400\/30 {
  border-color: rgb(251 191 36 / 0.3)
}
.border-amber-400\/40 {
  border-color: rgb(251 191 36 / 0.4)
}
.border-amber-400\/50 {
  border-color: rgb(251 191 36 / 0.5)
}
.border-amber-400\/60 {
  border-color: rgb(251 191 36 / 0.6)
}
.border-amber-500\/15 {
  border-color: rgb(245 158 11 / 0.15)
}
.border-amber-500\/20 {
  border-color: rgb(245 158 11 / 0.2)
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3)
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4)
}
.border-amber-500\/50 {
  border-color: rgb(245 158 11 / 0.5)
}
.border-amber-700\/30 {
  border-color: rgb(180 83 9 / 0.3)
}
.border-blue-500\/20 {
  border-color: rgb(59 130 246 / 0.2)
}
.border-cyan-500\/20 {
  border-color: rgb(6 182 212 / 0.2)
}
.border-ember-400\/20 {
  border-color: rgb(var(--status-ember-400-rgb) / 0.2)
}
.border-ember-500\/20 {
  border-color: rgb(var(--status-ember-500-rgb) / 0.2)
}
.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1))
}
.border-emerald-400\/60 {
  border-color: rgb(52 211 153 / 0.6)
}
.border-emerald-500 {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1))
}
.border-emerald-500\/20 {
  border-color: rgb(16 185 129 / 0.2)
}
.border-emerald-500\/40 {
  border-color: rgb(16 185 129 / 0.4)
}
.border-green-400\/60 {
  border-color: rgb(74 222 128 / 0.6)
}
.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1))
}
.border-green-500\/15 {
  border-color: rgb(34 197 94 / 0.15)
}
.border-green-500\/20 {
  border-color: rgb(34 197 94 / 0.2)
}
.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3)
}
.border-green-500\/40 {
  border-color: rgb(34 197 94 / 0.4)
}
.border-orange-500 {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1))
}
.border-purple-500\/20 {
  border-color: rgb(168 85 247 / 0.2)
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1))
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1))
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1))
}
.border-red-400\/30 {
  border-color: rgb(248 113 113 / 0.3)
}
.border-red-400\/50 {
  border-color: rgb(248 113 113 / 0.5)
}
.border-red-400\/70 {
  border-color: rgb(248 113 113 / 0.7)
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
}
.border-red-500\/15 {
  border-color: rgb(239 68 68 / 0.15)
}
.border-red-500\/20 {
  border-color: rgb(239 68 68 / 0.2)
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3)
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4)
}
.border-red-700\/30 {
  border-color: rgb(185 28 28 / 0.3)
}
.border-slate-500\/20 {
  border-color: rgb(100 116 139 / 0.2)
}
.border-status-agent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--status-agent-rgb) / var(--tw-border-opacity, 1))
}
.border-status-agent\/20 {
  border-color: rgb(var(--status-agent-rgb) / 0.2)
}
.border-status-agent\/30 {
  border-color: rgb(var(--status-agent-rgb) / 0.3)
}
.border-status-agent\/40 {
  border-color: rgb(var(--status-agent-rgb) / 0.4)
}
.border-status-agent\/45 {
  border-color: rgb(var(--status-agent-rgb) / 0.45)
}
.border-status-error {
  --tw-border-opacity: 1;
  border-color: rgb(var(--status-error-rgb) / var(--tw-border-opacity, 1))
}
.border-status-error\/20 {
  border-color: rgb(var(--status-error-rgb) / 0.2)
}
.border-status-error\/30 {
  border-color: rgb(var(--status-error-rgb) / 0.3)
}
.border-status-error\/40 {
  border-color: rgb(var(--status-error-rgb) / 0.4)
}
.border-status-error\/50 {
  border-color: rgb(var(--status-error-rgb) / 0.5)
}
.border-status-needs-you {
  --tw-border-opacity: 1;
  border-color: rgb(var(--status-needs-you-rgb) / var(--tw-border-opacity, 1))
}
.border-status-needs-you\/20 {
  border-color: rgb(var(--status-needs-you-rgb) / 0.2)
}
.border-status-needs-you\/30 {
  border-color: rgb(var(--status-needs-you-rgb) / 0.3)
}
.border-status-needs-you\/40 {
  border-color: rgb(var(--status-needs-you-rgb) / 0.4)
}
.border-status-question\/20 {
  border-color: rgb(var(--status-question-rgb) / 0.2)
}
.border-status-question\/30 {
  border-color: rgb(var(--status-question-rgb) / 0.3)
}
.border-surface-100 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-100-rgb) / var(--tw-border-opacity, 1))
}
.border-surface-100\/60 {
  border-color: rgb(var(--color-surface-100-rgb) / 0.6)
}
.border-surface-100\/70 {
  border-color: rgb(var(--color-surface-100-rgb) / 0.7)
}
.border-surface-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1))
}
.border-surface-200\/50 {
  border-color: rgb(var(--color-surface-200-rgb) / 0.5)
}
.border-surface-200\/60 {
  border-color: rgb(var(--color-surface-200-rgb) / 0.6)
}
.border-surface-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-300-rgb) / var(--tw-border-opacity, 1))
}
.border-surface-300\/30 {
  border-color: rgb(var(--color-surface-300-rgb) / 0.3)
}
.border-surface-300\/40 {
  border-color: rgb(var(--color-surface-300-rgb) / 0.4)
}
.border-surface-300\/50 {
  border-color: rgb(var(--color-surface-300-rgb) / 0.5)
}
.border-surface-300\/60 {
  border-color: rgb(var(--color-surface-300-rgb) / 0.6)
}
.border-surface-300\/70 {
  border-color: rgb(var(--color-surface-300-rgb) / 0.7)
}
.border-surface-400 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-400-rgb) / var(--tw-border-opacity, 1))
}
.border-surface-400\/30 {
  border-color: rgb(var(--color-surface-400-rgb) / 0.3)
}
.border-surface-400\/40 {
  border-color: rgb(var(--color-surface-400-rgb) / 0.4)
}
.border-surface-400\/50 {
  border-color: rgb(var(--color-surface-400-rgb) / 0.5)
}
.border-surface-400\/80 {
  border-color: rgb(var(--color-surface-400-rgb) / 0.8)
}
.border-surface-50 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-50-rgb) / var(--tw-border-opacity, 1))
}
.border-surface-500 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-500-rgb) / var(--tw-border-opacity, 1))
}
.border-surface-700 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-700-rgb) / var(--tw-border-opacity, 1))
}
.border-surface-900 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-900-rgb) / var(--tw-border-opacity, 1))
}
.border-transparent {
  border-color: transparent
}
.border-violet-500\/20 {
  border-color: rgb(139 92 246 / 0.2)
}
.border-violet-500\/30 {
  border-color: rgb(139 92 246 / 0.3)
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1)
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2)
}
.border-white\/80 {
  border-color: rgb(255 255 255 / 0.8)
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08)
}
.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1))
}
.border-l-\[rgb\(var\(--accent-rgb\2c 99_91_255\)\)\] {
  border-left-color: rgb(var(--accent-rgb,99 91 255))
}
.border-l-accent {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1))
}
.border-l-amber-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 191 36 / var(--tw-border-opacity, 1))
}
.border-l-amber-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1))
}
.border-l-blue-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(96 165 250 / var(--tw-border-opacity, 1))
}
.border-l-cyan-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(6 182 212 / var(--tw-border-opacity, 1))
}
.border-l-ember-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--status-ember-400-rgb) / var(--tw-border-opacity, 1))
}
.border-l-ember-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--status-ember-500-rgb) / var(--tw-border-opacity, 1))
}
.border-l-emerald-500\/40 {
  border-left-color: rgb(16 185 129 / 0.4)
}
.border-l-green-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(74 222 128 / var(--tw-border-opacity, 1))
}
.border-l-green-500\/60 {
  border-left-color: rgb(34 197 94 / 0.6)
}
.border-l-red-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
}
.border-l-rose-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 113 133 / var(--tw-border-opacity, 1))
}
.border-l-sky-500\/40 {
  border-left-color: rgb(14 165 233 / 0.4)
}
.border-l-status-agent {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--status-agent-rgb) / var(--tw-border-opacity, 1))
}
.border-l-status-agent\/40 {
  border-left-color: rgb(var(--status-agent-rgb) / 0.4)
}
.border-l-status-agent\/60 {
  border-left-color: rgb(var(--status-agent-rgb) / 0.6)
}
.border-l-status-agent\/70 {
  border-left-color: rgb(var(--status-agent-rgb) / 0.7)
}
.border-l-status-approval {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--status-approval-rgb) / var(--tw-border-opacity, 1))
}
.border-l-status-error {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--status-error-rgb) / var(--tw-border-opacity, 1))
}
.border-l-status-error\/70 {
  border-left-color: rgb(var(--status-error-rgb) / 0.7)
}
.border-l-status-needs-you {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--status-needs-you-rgb) / var(--tw-border-opacity, 1))
}
.border-l-status-needs-you\/70 {
  border-left-color: rgb(var(--status-needs-you-rgb) / 0.7)
}
.border-l-status-question {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--status-question-rgb) / var(--tw-border-opacity, 1))
}
.border-l-status-ready {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--status-ready-rgb) / var(--tw-border-opacity, 1))
}
.border-l-surface-200 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1))
}
.border-l-surface-300 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-surface-300-rgb) / var(--tw-border-opacity, 1))
}
.border-l-surface-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-surface-400-rgb) / var(--tw-border-opacity, 1))
}
.border-l-surface-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-surface-500-rgb) / var(--tw-border-opacity, 1))
}
.border-l-surface-600 {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-surface-600-rgb) / var(--tw-border-opacity, 1))
}
.border-l-transparent {
  border-left-color: transparent
}
.border-t-\[var\(--arij-accent\2c \#1868db\)\] {
  border-top-color: var(--arij-accent,#1868db)
}
.border-t-accent {
  --tw-border-opacity: 1;
  border-top-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1))
}
.border-t-transparent {
  border-top-color: transparent
}
.\!bg-surface-100 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1)) !important
}
.bg-\[\#18181b\] {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1))
}
.bg-\[rgb\(var\(--accent-rgb\)\)\] {
  background-color: rgb(var(--accent-rgb))
}
.bg-\[rgb\(var\(--accent-rgb\)\)\]\/15 {
  background-color: rgb(var(--accent-rgb) / 0.15)
}
.bg-\[rgb\(var\(--accent-rgb\)\)\]\/20 {
  background-color: rgb(var(--accent-rgb) / 0.2)
}
.bg-\[rgb\(var\(--accent-rgb\)\)\]\/5 {
  background-color: rgb(var(--accent-rgb) / 0.05)
}
.bg-\[rgb\(var\(--accent-rgb\)_\/_0\.15\)\] {
  background-color: rgb(var(--accent-rgb) / 0.15)
}
.bg-\[rgb\(var\(--accent-rgb\2c 99_102_241\)\)\] {
  background-color: rgb(var(--accent-rgb,99 102 241))
}
.bg-\[rgb\(var\(--accent-rgb\2c 99_102_241\)\)\]\/60 {
  background-color: rgb(var(--accent-rgb,99_102_241) / 0.6)
}
.bg-\[rgb\(var\(--accent-rgb\2c 99_102_241\)_\/_0\.12\)\] {
  background-color: rgb(var(--accent-rgb,99 102 241) / 0.12)
}
.bg-\[rgb\(var\(--accent-rgb\2c 99_91_255\)\)\] {
  background-color: rgb(var(--accent-rgb,99 91 255))
}
.bg-\[rgb\(var\(--surface-1\2c _11_15_23\)\)\] {
  background-color: rgb(var(--surface-1, 11 15 23))
}
.bg-\[rgb\(var\(--surface-2\2c _18_24_36\)\)\] {
  background-color: rgb(var(--surface-2, 18 24 36))
}
.bg-\[rgba\(var\(--accent-rgb\)_\/_0\.08\)\] {
  background-color: rgba(var(--accent-rgb) / 0.08)
}
.bg-\[rgba\(var\(--accent-rgb\2c 99_102_241\)_\/_0\.12\)\] {
  background-color: rgba(var(--accent-rgb,99 102 241) / 0.12)
}
.bg-\[var\(--arij-accent\2c \#1868db\)\] {
  background-color: var(--arij-accent,#1868db)
}
.bg-\[var\(--arij-accent-soft\2c \#e9f2ff\)\] {
  background-color: var(--arij-accent-soft,#e9f2ff)
}
.bg-\[var\(--arij-border\2c \#dfe1e6\)\] {
  background-color: var(--arij-border,#dfe1e6)
}
.bg-\[var\(--arij-canvas\2c \#fff\)\] {
  background-color: var(--arij-canvas,#fff)
}
.bg-\[var\(--arij-done-bg\2c \#dcfff1\)\] {
  background-color: var(--arij-done-bg,#dcfff1)
}
.bg-\[var\(--arij-field\2c \#fff\)\] {
  background-color: var(--arij-field,#fff)
}
.bg-\[var\(--arij-hover\2c \#f1f2f4\)\] {
  background-color: var(--arij-hover,#f1f2f4)
}
.bg-\[var\(--arij-nav\2c \#fff\)\] {
  background-color: var(--arij-nav,#fff)
}
.bg-\[var\(--arij-progress-bg\2c \#e9f2ff\)\] {
  background-color: var(--arij-progress-bg,#e9f2ff)
}
.bg-\[var\(--arij-raised\2c \#fff\)\] {
  background-color: var(--arij-raised,#fff)
}
.bg-\[var\(--arij-selected\2c \#e9f2ff\)\] {
  background-color: var(--arij-selected,#e9f2ff)
}
.bg-\[var\(--arij-sunken\2c \#f7f8f9\)\] {
  background-color: var(--arij-sunken,#f7f8f9)
}
.bg-\[var\(--arij-todo-bg\2c \#dcdfe4\)\] {
  background-color: var(--arij-todo-bg,#dcdfe4)
}
.bg-\[var\(--card-bg\2c var\(--panel-bg\)\)\] {
  background-color: var(--card-bg,var(--panel-bg))
}
.bg-\[var\(--card-bg\2c var\(--panel-bg\2c \#ffffff\)\)\] {
  background-color: var(--card-bg,var(--panel-bg,#ffffff))
}
.bg-\[var\(--card-bg\2c var\(--panel-bg\2c transparent\)\)\] {
  background-color: var(--card-bg,var(--panel-bg,transparent))
}
.bg-\[var\(--jira-sunken\2c \#f4f5f7\)\] {
  background-color: var(--jira-sunken,#f4f5f7)
}
.bg-\[var\(--panel-bg\2c \#fff\)\] {
  background-color: var(--panel-bg,#fff)
}
.bg-\[var\(--panel-bg\2c \#ffffff\)\] {
  background-color: var(--panel-bg,#ffffff)
}
.bg-\[var\(--panel-bg\2c rgba\(0\2c 0\2c 0\2c 0\.02\)\)\] {
  background-color: var(--panel-bg,rgba(0,0,0,0.02))
}
.bg-\[var\(--panel-bg\2c theme\(colors\.surface\.50\)\)\] {
  background-color: var(--panel-bg,rgb(var(--color-surface-50-rgb) / 1))
}
.bg-\[var\(--panel-bg\2c transparent\)\] {
  background-color: var(--panel-bg,transparent)
}
.bg-\[var\(--surface-50\2c \#f9fafb\)\] {
  background-color: var(--surface-50,#f9fafb)
}
.bg-\[var\(--surface-900\2c \#0b0d12\)\] {
  background-color: var(--surface-900,#0b0d12)
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-rgb) / var(--tw-bg-opacity, 1))
}
.bg-accent\/10 {
  background-color: rgb(var(--accent-rgb) / 0.1)
}
.bg-accent\/15 {
  background-color: rgb(var(--accent-rgb) / 0.15)
}
.bg-accent\/20 {
  background-color: rgb(var(--accent-rgb) / 0.2)
}
.bg-accent\/25 {
  background-color: rgb(var(--accent-rgb) / 0.25)
}
.bg-accent\/40 {
  background-color: rgb(var(--accent-rgb) / 0.4)
}
.bg-accent\/5 {
  background-color: rgb(var(--accent-rgb) / 0.05)
}
.bg-accent\/50 {
  background-color: rgb(var(--accent-rgb) / 0.5)
}
.bg-accent\/70 {
  background-color: rgb(var(--accent-rgb) / 0.7)
}
.bg-accent\/80 {
  background-color: rgb(var(--accent-rgb) / 0.8)
}
.bg-accent\/\[0\.04\] {
  background-color: rgb(var(--accent-rgb) / 0.04)
}
.bg-accent\/\[0\.06\] {
  background-color: rgb(var(--accent-rgb) / 0.06)
}
.bg-accent\/\[0\.12\] {
  background-color: rgb(var(--accent-rgb) / 0.12)
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1))
}
.bg-amber-200\/60 {
  background-color: rgb(253 230 138 / 0.6)
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1))
}
.bg-amber-400\/10 {
  background-color: rgb(251 191 36 / 0.1)
}
.bg-amber-400\/15 {
  background-color: rgb(251 191 36 / 0.15)
}
.bg-amber-400\/5 {
  background-color: rgb(251 191 36 / 0.05)
}
.bg-amber-400\/70 {
  background-color: rgb(251 191 36 / 0.7)
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1))
}
.bg-amber-50\/30 {
  background-color: rgb(255 251 235 / 0.3)
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1))
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1)
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15)
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2)
}
.bg-amber-500\/30 {
  background-color: rgb(245 158 11 / 0.3)
}
.bg-amber-500\/5 {
  background-color: rgb(245 158 11 / 0.05)
}
.bg-amber-500\/80 {
  background-color: rgb(245 158 11 / 0.8)
}
.bg-amber-500\/90 {
  background-color: rgb(245 158 11 / 0.9)
}
.bg-amber-500\/\[0\.03\] {
  background-color: rgb(245 158 11 / 0.03)
}
.bg-amber-900\/20 {
  background-color: rgb(120 53 15 / 0.2)
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1))
}
.bg-black\/15 {
  background-color: rgb(0 0 0 / 0.15)
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3)
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4)
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5)
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55)
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6)
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7)
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8)
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
}
.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1))
}
.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1))
}
.bg-blue-400\/60 {
  background-color: rgb(96 165 250 / 0.6)
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1))
}
.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1)
}
.bg-blue-500\/15 {
  background-color: rgb(59 130 246 / 0.15)
}
.bg-blue-500\/5 {
  background-color: rgb(59 130 246 / 0.05)
}
.bg-cyan-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1))
}
.bg-cyan-500\/10 {
  background-color: rgb(6 182 212 / 0.1)
}
.bg-cyan-500\/15 {
  background-color: rgb(6 182 212 / 0.15)
}
.bg-cyan-500\/5 {
  background-color: rgb(6 182 212 / 0.05)
}
.bg-ember-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-ember-400-rgb) / var(--tw-bg-opacity, 1))
}
.bg-ember-400\/10 {
  background-color: rgb(var(--status-ember-400-rgb) / 0.1)
}
.bg-ember-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-ember-500-rgb) / var(--tw-bg-opacity, 1))
}
.bg-ember-500\/10 {
  background-color: rgb(var(--status-ember-500-rgb) / 0.1)
}
.bg-ember-500\/5 {
  background-color: rgb(var(--status-ember-500-rgb) / 0.05)
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1))
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1))
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1))
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1)
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15)
}
.bg-fuchsia-500\/10 {
  background-color: rgb(217 70 239 / 0.1)
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1))
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1))
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1))
}
.bg-green-400\/10 {
  background-color: rgb(74 222 128 / 0.1)
}
.bg-green-400\/25 {
  background-color: rgb(74 222 128 / 0.25)
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1))
}
.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1)
}
.bg-green-500\/15 {
  background-color: rgb(34 197 94 / 0.15)
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2)
}
.bg-green-500\/30 {
  background-color: rgb(34 197 94 / 0.3)
}
.bg-green-500\/40 {
  background-color: rgb(34 197 94 / 0.4)
}
.bg-green-500\/70 {
  background-color: rgb(34 197 94 / 0.7)
}
.bg-green-500\/\[0\.03\] {
  background-color: rgb(34 197 94 / 0.03)
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
}
.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1))
}
.bg-indigo-500\/10 {
  background-color: rgb(99 102 241 / 0.1)
}
.bg-indigo-500\/25 {
  background-color: rgb(99 102 241 / 0.25)
}
.bg-indigo-500\/30 {
  background-color: rgb(99 102 241 / 0.3)
}
.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1))
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1))
}
.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1)
}
.bg-pink-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1))
}
.bg-pink-400\/25 {
  background-color: rgb(244 114 182 / 0.25)
}
.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1))
}
.bg-pink-500\/10 {
  background-color: rgb(236 72 153 / 0.1)
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1))
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1))
}
.bg-purple-500\/15 {
  background-color: rgb(168 85 247 / 0.15)
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1))
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1))
}
.bg-red-400\/10 {
  background-color: rgb(248 113 113 / 0.1)
}
.bg-red-400\/25 {
  background-color: rgb(248 113 113 / 0.25)
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1))
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1))
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1)
}
.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15)
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2)
}
.bg-red-500\/\[0\.03\] {
  background-color: rgb(239 68 68 / 0.03)
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))
}
.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1))
}
.bg-red-900\/20 {
  background-color: rgb(127 29 29 / 0.2)
}
.bg-rose-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1))
}
.bg-rose-500\/10 {
  background-color: rgb(244 63 94 / 0.1)
}
.bg-rose-500\/30 {
  background-color: rgb(244 63 94 / 0.3)
}
.bg-sky-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1))
}
.bg-sky-400\/25 {
  background-color: rgb(56 189 248 / 0.25)
}
.bg-sky-500\/30 {
  background-color: rgb(14 165 233 / 0.3)
}
.bg-slate-500\/10 {
  background-color: rgb(100 116 139 / 0.1)
}
.bg-status-agent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-agent-rgb) / var(--tw-bg-opacity, 1))
}
.bg-status-agent-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-agent-strong-rgb) / var(--tw-bg-opacity, 1))
}
.bg-status-agent\/10 {
  background-color: rgb(var(--status-agent-rgb) / 0.1)
}
.bg-status-agent\/15 {
  background-color: rgb(var(--status-agent-rgb) / 0.15)
}
.bg-status-agent\/20 {
  background-color: rgb(var(--status-agent-rgb) / 0.2)
}
.bg-status-agent\/25 {
  background-color: rgb(var(--status-agent-rgb) / 0.25)
}
.bg-status-agent\/40 {
  background-color: rgb(var(--status-agent-rgb) / 0.4)
}
.bg-status-agent\/5 {
  background-color: rgb(var(--status-agent-rgb) / 0.05)
}
.bg-status-agent\/50 {
  background-color: rgb(var(--status-agent-rgb) / 0.5)
}
.bg-status-agent\/60 {
  background-color: rgb(var(--status-agent-rgb) / 0.6)
}
.bg-status-agent\/70 {
  background-color: rgb(var(--status-agent-rgb) / 0.7)
}
.bg-status-agent\/\[0\.12\] {
  background-color: rgb(var(--status-agent-rgb) / 0.12)
}
.bg-status-approval {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-approval-rgb) / var(--tw-bg-opacity, 1))
}
.bg-status-approval\/5 {
  background-color: rgb(var(--status-approval-rgb) / 0.05)
}
.bg-status-error {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-error-rgb) / var(--tw-bg-opacity, 1))
}
.bg-status-error-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-error-strong-rgb) / var(--tw-bg-opacity, 1))
}
.bg-status-error\/10 {
  background-color: rgb(var(--status-error-rgb) / 0.1)
}
.bg-status-error\/15 {
  background-color: rgb(var(--status-error-rgb) / 0.15)
}
.bg-status-error\/20 {
  background-color: rgb(var(--status-error-rgb) / 0.2)
}
.bg-status-error\/40 {
  background-color: rgb(var(--status-error-rgb) / 0.4)
}
.bg-status-error\/5 {
  background-color: rgb(var(--status-error-rgb) / 0.05)
}
.bg-status-error\/60 {
  background-color: rgb(var(--status-error-rgb) / 0.6)
}
.bg-status-error\/\[0\.12\] {
  background-color: rgb(var(--status-error-rgb) / 0.12)
}
.bg-status-needs-you {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-needs-you-rgb) / var(--tw-bg-opacity, 1))
}
.bg-status-needs-you-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-needs-you-strong-rgb) / var(--tw-bg-opacity, 1))
}
.bg-status-needs-you\/10 {
  background-color: rgb(var(--status-needs-you-rgb) / 0.1)
}
.bg-status-needs-you\/15 {
  background-color: rgb(var(--status-needs-you-rgb) / 0.15)
}
.bg-status-needs-you\/20 {
  background-color: rgb(var(--status-needs-you-rgb) / 0.2)
}
.bg-status-needs-you\/40 {
  background-color: rgb(var(--status-needs-you-rgb) / 0.4)
}
.bg-status-needs-you\/5 {
  background-color: rgb(var(--status-needs-you-rgb) / 0.05)
}
.bg-status-needs-you\/60 {
  background-color: rgb(var(--status-needs-you-rgb) / 0.6)
}
.bg-status-needs-you\/\[0\.14\] {
  background-color: rgb(var(--status-needs-you-rgb) / 0.14)
}
.bg-status-question {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-question-rgb) / var(--tw-bg-opacity, 1))
}
.bg-status-question\/10 {
  background-color: rgb(var(--status-question-rgb) / 0.1)
}
.bg-status-question\/15 {
  background-color: rgb(var(--status-question-rgb) / 0.15)
}
.bg-status-question\/20 {
  background-color: rgb(var(--status-question-rgb) / 0.2)
}
.bg-status-ready {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-ready-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-100\/20 {
  background-color: rgb(var(--color-surface-100-rgb) / 0.2)
}
.bg-surface-100\/30 {
  background-color: rgb(var(--color-surface-100-rgb) / 0.3)
}
.bg-surface-100\/40 {
  background-color: rgb(var(--color-surface-100-rgb) / 0.4)
}
.bg-surface-100\/50 {
  background-color: rgb(var(--color-surface-100-rgb) / 0.5)
}
.bg-surface-100\/60 {
  background-color: rgb(var(--color-surface-100-rgb) / 0.6)
}
.bg-surface-100\/80 {
  background-color: rgb(var(--color-surface-100-rgb) / 0.8)
}
.bg-surface-100\/90 {
  background-color: rgb(var(--color-surface-100-rgb) / 0.9)
}
.bg-surface-100\/95 {
  background-color: rgb(var(--color-surface-100-rgb) / 0.95)
}
.bg-surface-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-200-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-200\/20 {
  background-color: rgb(var(--color-surface-200-rgb) / 0.2)
}
.bg-surface-200\/30 {
  background-color: rgb(var(--color-surface-200-rgb) / 0.3)
}
.bg-surface-200\/40 {
  background-color: rgb(var(--color-surface-200-rgb) / 0.4)
}
.bg-surface-200\/50 {
  background-color: rgb(var(--color-surface-200-rgb) / 0.5)
}
.bg-surface-200\/60 {
  background-color: rgb(var(--color-surface-200-rgb) / 0.6)
}
.bg-surface-200\/70 {
  background-color: rgb(var(--color-surface-200-rgb) / 0.7)
}
.bg-surface-200\/80 {
  background-color: rgb(var(--color-surface-200-rgb) / 0.8)
}
.bg-surface-200\/95 {
  background-color: rgb(var(--color-surface-200-rgb) / 0.95)
}
.bg-surface-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-300-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-300\/20 {
  background-color: rgb(var(--color-surface-300-rgb) / 0.2)
}
.bg-surface-300\/30 {
  background-color: rgb(var(--color-surface-300-rgb) / 0.3)
}
.bg-surface-300\/40 {
  background-color: rgb(var(--color-surface-300-rgb) / 0.4)
}
.bg-surface-300\/50 {
  background-color: rgb(var(--color-surface-300-rgb) / 0.5)
}
.bg-surface-300\/60 {
  background-color: rgb(var(--color-surface-300-rgb) / 0.6)
}
.bg-surface-300\/70 {
  background-color: rgb(var(--color-surface-300-rgb) / 0.7)
}
.bg-surface-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-400-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-400\/20 {
  background-color: rgb(var(--color-surface-400-rgb) / 0.2)
}
.bg-surface-400\/40 {
  background-color: rgb(var(--color-surface-400-rgb) / 0.4)
}
.bg-surface-400\/50 {
  background-color: rgb(var(--color-surface-400-rgb) / 0.5)
}
.bg-surface-400\/60 {
  background-color: rgb(var(--color-surface-400-rgb) / 0.6)
}
.bg-surface-400\/70 {
  background-color: rgb(var(--color-surface-400-rgb) / 0.7)
}
.bg-surface-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-50\/30 {
  background-color: rgb(var(--color-surface-50-rgb) / 0.3)
}
.bg-surface-50\/50 {
  background-color: rgb(var(--color-surface-50-rgb) / 0.5)
}
.bg-surface-50\/60 {
  background-color: rgb(var(--color-surface-50-rgb) / 0.6)
}
.bg-surface-50\/70 {
  background-color: rgb(var(--color-surface-50-rgb) / 0.7)
}
.bg-surface-50\/80 {
  background-color: rgb(var(--color-surface-50-rgb) / 0.8)
}
.bg-surface-50\/90 {
  background-color: rgb(var(--color-surface-50-rgb) / 0.9)
}
.bg-surface-50\/95 {
  background-color: rgb(var(--color-surface-50-rgb) / 0.95)
}
.bg-surface-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-500-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-500\/10 {
  background-color: rgb(var(--color-surface-500-rgb) / 0.1)
}
.bg-surface-500\/15 {
  background-color: rgb(var(--color-surface-500-rgb) / 0.15)
}
.bg-surface-500\/20 {
  background-color: rgb(var(--color-surface-500-rgb) / 0.2)
}
.bg-surface-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-600-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-900-rgb) / var(--tw-bg-opacity, 1))
}
.bg-surface-900\/40 {
  background-color: rgb(var(--color-surface-900-rgb) / 0.4)
}
.bg-surface-900\/60 {
  background-color: rgb(var(--color-surface-900-rgb) / 0.6)
}
.bg-surface-900\/80 {
  background-color: rgb(var(--color-surface-900-rgb) / 0.8)
}
.bg-surface-900\/90 {
  background-color: rgb(var(--color-surface-900-rgb) / 0.9)
}
.bg-surface-900\/95 {
  background-color: rgb(var(--color-surface-900-rgb) / 0.95)
}
.bg-surface-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-950-rgb) / var(--tw-bg-opacity, 1))
}
.bg-teal-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(45 212 191 / var(--tw-bg-opacity, 1))
}
.bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1))
}
.bg-teal-500\/10 {
  background-color: rgb(20 184 166 / 0.1)
}
.bg-transparent {
  background-color: transparent
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1))
}
.bg-violet-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1))
}
.bg-violet-500\/10 {
  background-color: rgb(139 92 246 / 0.1)
}
.bg-violet-500\/15 {
  background-color: rgb(139 92 246 / 0.15)
}
.bg-violet-500\/20 {
  background-color: rgb(139 92 246 / 0.2)
}
.bg-violet-500\/30 {
  background-color: rgb(139 92 246 / 0.3)
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1)
}
.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25)
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05)
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8)
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04)
}
.bg-white\/\[0\.12\] {
  background-color: rgb(255 255 255 / 0.12)
}
.bg-white\/\[0\.15\] {
  background-color: rgb(255 255 255 / 0.15)
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1))
}
.bg-yellow-400\/25 {
  background-color: rgb(250 204 21 / 0.25)
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1))
}
.bg-opacity-15 {
  --tw-bg-opacity: 0.15
}
.bg-opacity-20 {
  --tw-bg-opacity: 0.2
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops))
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops))
}
.from-accent {
  --tw-gradient-from: rgb(var(--accent-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--accent-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-accent\/10 {
  --tw-gradient-from: rgb(var(--accent-rgb) / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--accent-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-accent\/30 {
  --tw-gradient-from: rgb(var(--accent-rgb) / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--accent-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-accent\/\[0\.06\] {
  --tw-gradient-from: rgb(var(--accent-rgb) / 0.06) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--accent-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-amber-400 {
  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-black\/45 {
  --tw-gradient-from: rgb(0 0 0 / 0.45) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-black\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-cyan-500 {
  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-orange-500 {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-sky-500 {
  --tw-gradient-from: #0ea5e9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-status-agent\/\[0\.06\] {
  --tw-gradient-from: rgb(var(--status-agent-rgb) / 0.06) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--status-agent-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-status-error\/\[0\.07\] {
  --tw-gradient-from: rgb(var(--status-error-rgb) / 0.07) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--status-error-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-status-needs-you\/\[0\.08\] {
  --tw-gradient-from: rgb(var(--status-needs-you-rgb) / 0.08) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--status-needs-you-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-surface-50 {
  --tw-gradient-from: rgb(var(--color-surface-50-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-surface-50-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-surface-500 {
  --tw-gradient-from: rgb(var(--color-surface-500-rgb) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-surface-500-rgb) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-violet-500 {
  --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-violet-500\/10 {
  --tw-gradient-from: rgb(139 92 246 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-violet-500\/5 {
  --tw-gradient-from: rgb(139 92 246 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-60\% {
  --tw-gradient-from-position: 60%
}
.via-accent\/5 {
  --tw-gradient-to: rgb(var(--accent-rgb) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--accent-rgb) / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-black\/30 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-indigo-500\/10 {
  --tw-gradient-to: rgb(99 102 241 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(99 102 241 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-surface-100 {
  --tw-gradient-to: rgb(var(--color-surface-100-rgb) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--color-surface-100-rgb) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-surface-100\/40 {
  --tw-gradient-to: rgb(var(--color-surface-100-rgb) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--color-surface-100-rgb) / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-surface-50\/90 {
  --tw-gradient-to: rgb(var(--color-surface-50-rgb) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--color-surface-50-rgb) / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.to-amber-400 {
  --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position)
}
.to-blue-400 {
  --tw-gradient-to: #60a5fa var(--tw-gradient-to-position)
}
.to-blue-500\/10 {
  --tw-gradient-to: rgb(59 130 246 / 0.1) var(--tw-gradient-to-position)
}
.to-cyan-400 {
  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position)
}
.to-emerald-400 {
  --tw-gradient-to: #34d399 var(--tw-gradient-to-position)
}
.to-indigo-400 {
  --tw-gradient-to: #818cf8 var(--tw-gradient-to-position)
}
.to-indigo-500\/5 {
  --tw-gradient-to: rgb(99 102 241 / 0.05) var(--tw-gradient-to-position)
}
.to-orange-400 {
  --tw-gradient-to: #fb923c var(--tw-gradient-to-position)
}
.to-sky-400 {
  --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position)
}
.to-surface-400 {
  --tw-gradient-to: rgb(var(--color-surface-400-rgb) / 1) var(--tw-gradient-to-position)
}
.to-surface-50 {
  --tw-gradient-to: rgb(var(--color-surface-50-rgb) / 1) var(--tw-gradient-to-position)
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position)
}
.to-violet-400 {
  --tw-gradient-to: #a78bfa var(--tw-gradient-to-position)
}
.to-yellow-400 {
  --tw-gradient-to: #facc15 var(--tw-gradient-to-position)
}
.bg-cover {
  background-size: cover
}
.bg-center {
  background-position: center
}
.fill-\[\#e2b203\] {
  fill: #e2b203
}
.fill-\[rgb\(var\(--accent-rgb\2c 99_102_241\)\)\] {
  fill: rgb(var(--accent-rgb,99 102 241))
}
.fill-accent {
  fill: rgb(var(--accent-rgb) / 1)
}
.fill-amber-400 {
  fill: #fbbf24
}
.fill-amber-500 {
  fill: #f59e0b
}
.fill-current {
  fill: currentColor
}
.fill-green-500 {
  fill: #22c55e
}
.fill-none {
  fill: none
}
.fill-red-500 {
  fill: #ef4444
}
.fill-surface-300 {
  fill: rgb(var(--color-surface-300-rgb) / 1)
}
.fill-surface-400 {
  fill: rgb(var(--color-surface-400-rgb) / 1)
}
.fill-surface-500 {
  fill: rgb(var(--color-surface-500-rgb) / 1)
}
.fill-surface-600 {
  fill: rgb(var(--color-surface-600-rgb) / 1)
}
.fill-surface-700 {
  fill: rgb(var(--color-surface-700-rgb) / 1)
}
.fill-surface-800 {
  fill: rgb(var(--color-surface-800-rgb) / 1)
}
.fill-white {
  fill: #fff
}
.stroke-accent {
  stroke: rgb(var(--accent-rgb) / 1)
}
.stroke-surface-200 {
  stroke: rgb(var(--color-surface-200-rgb) / 1)
}
.stroke-surface-300 {
  stroke: rgb(var(--color-surface-300-rgb) / 1)
}
.stroke-surface-400 {
  stroke: rgb(var(--color-surface-400-rgb) / 1)
}
.stroke-surface-500 {
  stroke: rgb(var(--color-surface-500-rgb) / 1)
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover
}
.\!p-3 {
  padding: 0.75rem !important
}
.p-0 {
  padding: 0px
}
.p-0\.5 {
  padding: 0.125rem
}
.p-1 {
  padding: 0.25rem
}
.p-1\.5 {
  padding: 0.375rem
}
.p-2 {
  padding: 0.5rem
}
.p-2\.5 {
  padding: 0.625rem
}
.p-3 {
  padding: 0.75rem
}
.p-3\.5 {
  padding: 0.875rem
}
.p-4 {
  padding: 1rem
}
.p-5 {
  padding: 1.25rem
}
.p-6 {
  padding: 1.5rem
}
.p-8 {
  padding: 2rem
}
.p-\[6px\] {
  padding: 6px
}
.p-\[8px\] {
  padding: 8px
}
.p-px {
  padding: 1px
}
.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important
}
.\!px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important
}
.\!py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important
}
.\!py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important
}
.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important
}
.\!py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem
}
.px-\[3px\] {
  padding-left: 3px;
  padding-right: 3px
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem
}
.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px
}
.\!pl-10 {
  padding-left: 2.5rem !important
}
.pb-0 {
  padding-bottom: 0px
}
.pb-0\.5 {
  padding-bottom: 0.125rem
}
.pb-1 {
  padding-bottom: 0.25rem
}
.pb-1\.5 {
  padding-bottom: 0.375rem
}
.pb-16 {
  padding-bottom: 4rem
}
.pb-2 {
  padding-bottom: 0.5rem
}
.pb-2\.5 {
  padding-bottom: 0.625rem
}
.pb-28 {
  padding-bottom: 7rem
}
.pb-3 {
  padding-bottom: 0.75rem
}
.pb-4 {
  padding-bottom: 1rem
}
.pb-5 {
  padding-bottom: 1.25rem
}
.pb-6 {
  padding-bottom: 1.5rem
}
.pb-8 {
  padding-bottom: 2rem
}
.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom)
}
.pb-\[env\(safe-area-inset-bottom\2c 0px\)\] {
  padding-bottom: env(safe-area-inset-bottom,0px)
}
.pe-1 {
  padding-inline-end: 0.25rem
}
.pe-14 {
  padding-inline-end: 3.5rem
}
.pe-16 {
  padding-inline-end: 4rem
}
.pe-2 {
  padding-inline-end: 0.5rem
}
.pe-28 {
  padding-inline-end: 7rem
}
.pe-4 {
  padding-inline-end: 1rem
}
.pl-0 {
  padding-left: 0px
}
.pl-0\.5 {
  padding-left: 0.125rem
}
.pl-1 {
  padding-left: 0.25rem
}
.pl-1\.5 {
  padding-left: 0.375rem
}
.pl-10 {
  padding-left: 2.5rem
}
.pl-11 {
  padding-left: 2.75rem
}
.pl-12 {
  padding-left: 3rem
}
.pl-14 {
  padding-left: 3.5rem
}
.pl-2 {
  padding-left: 0.5rem
}
.pl-2\.5 {
  padding-left: 0.625rem
}
.pl-3 {
  padding-left: 0.75rem
}
.pl-3\.5 {
  padding-left: 0.875rem
}
.pl-4 {
  padding-left: 1rem
}
.pl-5 {
  padding-left: 1.25rem
}
.pl-6 {
  padding-left: 1.5rem
}
.pl-7 {
  padding-left: 1.75rem
}
.pl-8 {
  padding-left: 2rem
}
.pl-9 {
  padding-left: 2.25rem
}
.pl-\[18px\] {
  padding-left: 18px
}
.pl-\[26px\] {
  padding-left: 26px
}
.pl-\[82px\] {
  padding-left: 82px
}
.pr-0\.5 {
  padding-right: 0.125rem
}
.pr-1 {
  padding-right: 0.25rem
}
.pr-1\.5 {
  padding-right: 0.375rem
}
.pr-10 {
  padding-right: 2.5rem
}
.pr-14 {
  padding-right: 3.5rem
}
.pr-16 {
  padding-right: 4rem
}
.pr-2 {
  padding-right: 0.5rem
}
.pr-2\.5 {
  padding-right: 0.625rem
}
.pr-20 {
  padding-right: 5rem
}
.pr-3 {
  padding-right: 0.75rem
}
.pr-4 {
  padding-right: 1rem
}
.pr-5 {
  padding-right: 1.25rem
}
.pr-6 {
  padding-right: 1.5rem
}
.pr-7 {
  padding-right: 1.75rem
}
.pr-8 {
  padding-right: 2rem
}
.pr-9 {
  padding-right: 2.25rem
}
.ps-1 {
  padding-inline-start: 0.25rem
}
.ps-3 {
  padding-inline-start: 0.75rem
}
.ps-4 {
  padding-inline-start: 1rem
}
.ps-5 {
  padding-inline-start: 1.25rem
}
.pt-0 {
  padding-top: 0px
}
.pt-0\.5 {
  padding-top: 0.125rem
}
.pt-1 {
  padding-top: 0.25rem
}
.pt-1\.5 {
  padding-top: 0.375rem
}
.pt-12 {
  padding-top: 3rem
}
.pt-16 {
  padding-top: 4rem
}
.pt-2 {
  padding-top: 0.5rem
}
.pt-2\.5 {
  padding-top: 0.625rem
}
.pt-3 {
  padding-top: 0.75rem
}
.pt-3\.5 {
  padding-top: 0.875rem
}
.pt-4 {
  padding-top: 1rem
}
.pt-5 {
  padding-top: 1.25rem
}
.pt-6 {
  padding-top: 1.5rem
}
.pt-8 {
  padding-top: 2rem
}
.pt-\[10vh\] {
  padding-top: 10vh
}
.pt-\[20vh\] {
  padding-top: 20vh
}
.pt-\[var\(--amc-sidebar-header-h\2c 48px\)\] {
  padding-top: var(--amc-sidebar-header-h,48px)
}
.text-left {
  text-align: left
}
.text-center {
  text-align: center
}
.text-right {
  text-align: right
}
.text-start {
  text-align: start
}
.text-end {
  text-align: end
}
.align-top {
  vertical-align: top
}
.align-middle {
  vertical-align: middle
}
.align-bottom {
  vertical-align: bottom
}
.align-text-bottom {
  vertical-align: text-bottom
}
.align-\[-2px\] {
  vertical-align: -2px
}
.font-mono {
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)
}
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
}
.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1
}
.text-7xl {
  font-size: 4.5rem;
  line-height: 1
}
.text-\[0\.7rem\] {
  font-size: 0.7rem
}
.text-\[0\.85em\] {
  font-size: 0.85em
}
.text-\[0\.95em\] {
  font-size: 0.95em
}
.text-\[0\.9em\] {
  font-size: 0.9em
}
.text-\[11px\] {
  font-size: 11px
}
.text-\[12px\] {
  font-size: 12px
}
.text-\[13px\] {
  font-size: 13px
}
.text-\[15px\] {
  font-size: 15px
}
.text-\[16px\] {
  font-size: 16px
}
.text-\[44px\] {
  font-size: 44px
}
.text-\[9px\] {
  font-size: 9px
}
.text-\[length\:inherit\] {
  font-size: inherit
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem
}
.\!font-normal {
  font-weight: 400 !important
}
.font-black {
  font-weight: 900
}
.font-bold {
  font-weight: 700
}
.font-extrabold {
  font-weight: 800
}
.font-light {
  font-weight: 300
}
.font-medium {
  font-weight: 500
}
.font-normal {
  font-weight: 400
}
.font-semibold {
  font-weight: 600
}
.uppercase {
  text-transform: uppercase
}
.lowercase {
  text-transform: lowercase
}
.capitalize {
  text-transform: capitalize
}
.normal-case {
  text-transform: none
}
.italic {
  font-style: italic
}
.not-italic {
  font-style: normal
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}
.leading-4 {
  line-height: 1rem
}
.leading-5 {
  line-height: 1.25rem
}
.leading-\[1\.4\] {
  line-height: 1.4
}
.leading-none {
  line-height: 1
}
.leading-relaxed {
  line-height: 1.625
}
.leading-snug {
  line-height: 1.375
}
.leading-tight {
  line-height: 1.25
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em
}
.tracking-normal {
  letter-spacing: 0em
}
.tracking-tight {
  letter-spacing: -0.025em
}
.tracking-tighter {
  letter-spacing: -0.05em
}
.tracking-wide {
  letter-spacing: 0.025em
}
.tracking-wider {
  letter-spacing: 0.05em
}
.tracking-widest {
  letter-spacing: 0.1em
}
.\!text-accent {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1)) !important
}
.\!text-status-error-strong {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--status-error-strong-rgb) / var(--tw-text-opacity, 1)) !important
}
.\!text-surface-400 {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1)) !important
}
.\!text-surface-800 {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-surface-800-rgb) / var(--tw-text-opacity, 1)) !important
}
.text-\[\#1868db\] {
  --tw-text-opacity: 1;
  color: rgb(24 104 219 / var(--tw-text-opacity, 1))
}
.text-\[\#22a06b\] {
  --tw-text-opacity: 1;
  color: rgb(34 160 107 / var(--tw-text-opacity, 1))
}
.text-\[\#3f3f46\] {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1))
}
.text-\[\#4688ec\] {
  --tw-text-opacity: 1;
  color: rgb(70 136 236 / var(--tw-text-opacity, 1))
}
.text-\[\#8590a2\] {
  --tw-text-opacity: 1;
  color: rgb(133 144 162 / var(--tw-text-opacity, 1))
}
.text-\[\#8f7ee7\] {
  --tw-text-opacity: 1;
  color: rgb(143 126 231 / var(--tw-text-opacity, 1))
}
.text-\[\#a1a1aa\] {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1))
}
.text-\[\#e2b203\] {
  --tw-text-opacity: 1;
  color: rgb(226 178 3 / var(--tw-text-opacity, 1))
}
.text-\[\#e5493a\] {
  --tw-text-opacity: 1;
  color: rgb(229 73 58 / var(--tw-text-opacity, 1))
}
.text-\[Nrem\] {
  color: Nrem
}
.text-\[rgb\(var\(--accent-rgb\)\)\] {
  color: rgb(var(--accent-rgb))
}
.text-\[rgb\(var\(--accent-rgb\2c 99_102_241\)\)\] {
  color: rgb(var(--accent-rgb,99 102 241))
}
.text-\[rgb\(var\(--accent-rgb\2c 99_91_255\)\)\] {
  color: rgb(var(--accent-rgb,99 91 255))
}
.text-\[rgb\(var\(--text-1\2c _226_232_240\)\)\] {
  color: rgb(var(--text-1, 226 232 240))
}
.text-\[rgb\(var\(--text-2\2c _148_163_184\)\)\] {
  color: rgb(var(--text-2, 148 163 184))
}
.text-\[var\(--arij-accent\2c \#1868db\)\] {
  color: var(--arij-accent,#1868db)
}
.text-\[var\(--arij-accent-fg\2c \#fff\)\] {
  color: var(--arij-accent-fg,#fff)
}
.text-\[var\(--arij-danger\2c \#dc2626\)\] {
  color: var(--arij-danger,#dc2626)
}
.text-\[var\(--arij-done\2c \#216e4e\)\] {
  color: var(--arij-done,#216e4e)
}
.text-\[var\(--arij-faint\2c \#8590a2\)\] {
  color: var(--arij-faint,#8590a2)
}
.text-\[var\(--arij-ink\2c \#172b4d\)\] {
  color: var(--arij-ink,#172b4d)
}
.text-\[var\(--arij-progress\2c \#0c66e4\)\] {
  color: var(--arij-progress,#0c66e4)
}
.text-\[var\(--arij-selected-fg\2c \#0c66e4\)\] {
  color: var(--arij-selected-fg,#0c66e4)
}
.text-\[var\(--arij-subtle\2c \#626f86\)\] {
  color: var(--arij-subtle,#626f86)
}
.text-\[var\(--arij-todo\2c \#626f86\)\] {
  color: var(--arij-todo,#626f86)
}
.text-\[var\(--color-surface-500\2c \#71717a\)\] {
  color: var(--color-surface-500,#71717a)
}
.text-\[var\(--tv3-ai-badge\2c rgb\(var\(--accent-rgb\)\)\)\] {
  color: var(--tv3-ai-badge,rgb(var(--accent-rgb)))
}
.text-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1))
}
.text-accent\/25 {
  color: rgb(var(--accent-rgb) / 0.25)
}
.text-accent\/50 {
  color: rgb(var(--accent-rgb) / 0.5)
}
.text-accent\/70 {
  color: rgb(var(--accent-rgb) / 0.7)
}
.text-accent\/80 {
  color: rgb(var(--accent-rgb) / 0.8)
}
.text-accent\/90 {
  color: rgb(var(--accent-rgb) / 0.9)
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1))
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1))
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1))
}
.text-amber-400\/60 {
  color: rgb(251 191 36 / 0.6)
}
.text-amber-400\/70 {
  color: rgb(251 191 36 / 0.7)
}
.text-amber-400\/80 {
  color: rgb(251 191 36 / 0.8)
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1))
}
.text-amber-500\/40 {
  color: rgb(245 158 11 / 0.4)
}
.text-amber-500\/70 {
  color: rgb(245 158 11 / 0.7)
}
.text-amber-500\/80 {
  color: rgb(245 158 11 / 0.8)
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1))
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1))
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1))
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1))
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1))
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1))
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1))
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1))
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1))
}
.text-claude {
  --tw-text-opacity: 1;
  color: rgb(217 119 87 / var(--tw-text-opacity, 1))
}
.text-current {
  color: currentColor
}
.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1))
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1))
}
.text-cyan-500 {
  --tw-text-opacity: 1;
  color: rgb(6 182 212 / var(--tw-text-opacity, 1))
}
.text-ember-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--status-ember-400-rgb) / var(--tw-text-opacity, 1))
}
.text-ember-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--status-ember-500-rgb) / var(--tw-text-opacity, 1))
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1))
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1))
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1))
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1))
}
.text-fuchsia-400 {
  --tw-text-opacity: 1;
  color: rgb(232 121 249 / var(--tw-text-opacity, 1))
}
.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1))
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1))
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1))
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1))
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1))
}
.text-indigo-200 {
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity, 1))
}
.text-indigo-300 {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1))
}
.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1))
}
.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1))
}
.text-inherit {
  color: inherit
}
.text-lime-400 {
  --tw-text-opacity: 1;
  color: rgb(163 230 53 / var(--tw-text-opacity, 1))
}
.text-link {
  --tw-text-opacity: 1;
  color: rgb(var(--link-rgb) / var(--tw-text-opacity, 1))
}
.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1))
}
.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1))
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1))
}
.text-pink-400 {
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity, 1))
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1))
}
.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1))
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1))
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1))
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1))
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}
.text-red-400\/50 {
  color: rgb(248 113 113 / 0.5)
}
.text-red-400\/60 {
  color: rgb(248 113 113 / 0.6)
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1))
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1))
}
.text-rose-200 {
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / var(--tw-text-opacity, 1))
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1))
}
.text-sky-200 {
  --tw-text-opacity: 1;
  color: rgb(186 230 253 / var(--tw-text-opacity, 1))
}
.text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1))
}
.text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1))
}
.text-sky-400\/70 {
  color: rgb(56 189 248 / 0.7)
}
.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1))
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1))
}
.text-status-agent {
  --tw-text-opacity: 1;
  color: rgb(var(--status-agent-rgb) / var(--tw-text-opacity, 1))
}
.text-status-agent-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--status-agent-strong-rgb) / var(--tw-text-opacity, 1))
}
.text-status-agent\/50 {
  color: rgb(var(--status-agent-rgb) / 0.5)
}
.text-status-agent\/60 {
  color: rgb(var(--status-agent-rgb) / 0.6)
}
.text-status-agent\/70 {
  color: rgb(var(--status-agent-rgb) / 0.7)
}
.text-status-approval {
  --tw-text-opacity: 1;
  color: rgb(var(--status-approval-rgb) / var(--tw-text-opacity, 1))
}
.text-status-error {
  --tw-text-opacity: 1;
  color: rgb(var(--status-error-rgb) / var(--tw-text-opacity, 1))
}
.text-status-error-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--status-error-strong-rgb) / var(--tw-text-opacity, 1))
}
.text-status-needs-you {
  --tw-text-opacity: 1;
  color: rgb(var(--status-needs-you-rgb) / var(--tw-text-opacity, 1))
}
.text-status-needs-you-strong {
  --tw-text-opacity: 1;
  color: rgb(var(--status-needs-you-strong-rgb) / var(--tw-text-opacity, 1))
}
.text-status-needs-you\/80 {
  color: rgb(var(--status-needs-you-rgb) / 0.8)
}
.text-status-question {
  --tw-text-opacity: 1;
  color: rgb(var(--status-question-rgb) / var(--tw-text-opacity, 1))
}
.text-status-ready {
  --tw-text-opacity: 1;
  color: rgb(var(--status-ready-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-200 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-200-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-300 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-300-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-400\/70 {
  color: rgb(var(--color-surface-400-rgb) / 0.7)
}
.text-surface-400\/80 {
  color: rgb(var(--color-surface-400-rgb) / 0.8)
}
.text-surface-50 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-50-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-700-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-800-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1))
}
.text-surface-950 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-950-rgb) / var(--tw-text-opacity, 1))
}
.text-teal-300 {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1))
}
.text-teal-400 {
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1))
}
.text-transparent {
  color: transparent
}
.text-violet-200 {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1))
}
.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1))
}
.text-violet-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1))
}
.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1))
}
.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1))
}
.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1))
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4)
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5)
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6)
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7)
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8)
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9)
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1))
}
.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1))
}
.underline {
  text-decoration-line: underline
}
.line-through {
  text-decoration-line: line-through
}
.decoration-surface-300 {
  text-decoration-color: rgb(var(--color-surface-300-rgb) / 1)
}
.underline-offset-2 {
  text-underline-offset: 2px
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.placeholder-surface-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-placeholder-opacity, 1))
}
.placeholder-surface-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-placeholder-opacity, 1))
}
.placeholder-surface-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-placeholder-opacity, 1))
}
.placeholder-surface-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-placeholder-opacity, 1))
}
.placeholder-white\/50::-moz-placeholder {
  color: rgb(255 255 255 / 0.5)
}
.placeholder-white\/50::placeholder {
  color: rgb(255 255 255 / 0.5)
}
.accent-\[rgb\(var\(--accent-rgb\)\)\] {
  accent-color: rgb(var(--accent-rgb))
}
.accent-\[rgb\(var\(--accent-rgb\2c 99_102_241\)\)\] {
  accent-color: rgb(var(--accent-rgb,99 102 241))
}
.accent-\[var\(--accent-rgb\2c 140_82_255\)\] {
  accent-color: var(--accent-rgb,140 82 255)
}
.accent-\[var\(--accent-rgb\2c 99\2c 102\2c 241\)\] {
  accent-color: var(--accent-rgb,99,102,241)
}
.accent-\[var\(--arij-accent\2c \#1868db\)\] {
  accent-color: var(--arij-accent,#1868db)
}
.accent-accent {
  accent-color: rgb(var(--accent-rgb) / 1)
}
.\!opacity-0 {
  opacity: 0 !important
}
.\!opacity-40 {
  opacity: 0.4 !important
}
.opacity-0 {
  opacity: 0
}
.opacity-100 {
  opacity: 1
}
.opacity-25 {
  opacity: 0.25
}
.opacity-30 {
  opacity: 0.3
}
.opacity-40 {
  opacity: 0.4
}
.opacity-45 {
  opacity: 0.45
}
.opacity-50 {
  opacity: 0.5
}
.opacity-60 {
  opacity: 0.6
}
.opacity-70 {
  opacity: 0.7
}
.opacity-75 {
  opacity: 0.75
}
.opacity-80 {
  opacity: 0.8
}
.opacity-90 {
  opacity: 0.9
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[-8px_0_30px_-10px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-shadow: -8px 0 30px -10px rgba(0,0,0,0.35);
  --tw-shadow-colored: -8px 0 30px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_-8px_30px_-10px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-shadow: 0 -8px 30px -10px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 -8px 30px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[0_3px_6px_-1px_rgb\(0_0_0_\/_0\.6\)\2c 0_22px_44px_-12px_rgb\(0_0_0_\/_0\.58\)\2c 0_60px_112px_-28px_rgb\(0_0_0_\/_0\.75\)\2c inset_0_1px_0_0_rgb\(255_255_255_\/_0\.26\)\2c inset_0_22px_34px_-20px_rgb\(255_255_255_\/_0\.17\)\2c inset_0_-1px_0_0_rgb\(0_0_0_\/_0\.62\)\2c inset_0_-24px_38px_-24px_rgb\(0_0_0_\/_0\.55\)\] {
  --tw-shadow: 0 3px 6px -1px rgb(0 0 0 / 0.6),0 22px 44px -12px rgb(0 0 0 / 0.58),0 60px 112px -28px rgb(0 0 0 / 0.75),inset 0 1px 0 0 rgb(255 255 255 / 0.26),inset 0 22px 34px -20px rgb(255 255 255 / 0.17),inset 0 -1px 0 0 rgb(0 0 0 / 0.62),inset 0 -24px 38px -24px rgb(0 0 0 / 0.55);
  --tw-shadow-colored: 0 3px 6px -1px var(--tw-shadow-color), 0 22px 44px -12px var(--tw-shadow-color), 0 60px 112px -28px var(--tw-shadow-color), inset 0 1px 0 0 var(--tw-shadow-color), inset 0 22px 34px -20px var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color), inset 0 -24px 38px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_1px_0_0_rgb\(0_0_0_\/_0\.22\)\] {
  --tw-shadow: inset 0 1px 0 0 rgb(0 0 0 / 0.22);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-\[inset_0_1px_2px_0_rgb\(0_0_0_\/_0\.22\)\] {
  --tw-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.22);
  --tw-shadow-colored: inset 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-black\/10 {
  --tw-shadow-color: rgb(0 0 0 / 0.1);
  --tw-shadow: var(--tw-shadow-colored)
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px
}
.outline {
  outline-style: solid
}
.outline-2 {
  outline-width: 2px
}
.outline-offset-2 {
  outline-offset: 2px
}
.outline-accent\/40 {
  outline-color: rgb(var(--accent-rgb) / 0.4)
}
.outline-accent\/60 {
  outline-color: rgb(var(--accent-rgb) / 0.6)
}
.outline-transparent {
  outline-color: transparent
}
.\!ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.ring-inset {
  --tw-ring-inset: inset
}
.ring-\[rgb\(var\(--accent-rgb\)\)\]\/40 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.4)
}
.ring-\[rgb\(var\(--accent-rgb\2c 99_102_241\)\)\] {
  --tw-ring-color: rgb(var(--accent-rgb,99 102 241))
}
.ring-\[var\(--arij-accent\2c \#1868db\)\] {
  --tw-ring-color: var(--arij-accent,#1868db)
}
.ring-\[var\(--arij-ink\2c \#172b4d\)\] {
  --tw-ring-color: var(--arij-ink,#172b4d)
}
.ring-accent {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent-rgb) / var(--tw-ring-opacity, 1))
}
.ring-accent\/10 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.1)
}
.ring-accent\/20 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.2)
}
.ring-accent\/25 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.25)
}
.ring-accent\/30 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.3)
}
.ring-accent\/40 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.4)
}
.ring-accent\/50 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.5)
}
.ring-accent\/60 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.6)
}
.ring-accent\/70 {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.7)
}
.ring-amber-400\/70 {
  --tw-ring-color: rgb(251 191 36 / 0.7)
}
.ring-emerald-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity, 1))
}
.ring-emerald-400\/40 {
  --tw-ring-color: rgb(52 211 153 / 0.4)
}
.ring-emerald-500\/10 {
  --tw-ring-color: rgb(16 185 129 / 0.1)
}
.ring-red-500\/40 {
  --tw-ring-color: rgb(239 68 68 / 0.4)
}
.ring-status-agent\/25 {
  --tw-ring-color: rgb(var(--status-agent-rgb) / 0.25)
}
.ring-status-error {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--status-error-rgb) / var(--tw-ring-opacity, 1))
}
.ring-status-error\/25 {
  --tw-ring-color: rgb(var(--status-error-rgb) / 0.25)
}
.ring-status-needs-you\/25 {
  --tw-ring-color: rgb(var(--status-needs-you-rgb) / 0.25)
}
.ring-status-needs-you\/40 {
  --tw-ring-color: rgb(var(--status-needs-you-rgb) / 0.4)
}
.ring-surface-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-300-rgb) / var(--tw-ring-opacity, 1))
}
.ring-surface-300\/60 {
  --tw-ring-color: rgb(var(--color-surface-300-rgb) / 0.6)
}
.ring-surface-50 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-50-rgb) / var(--tw-ring-opacity, 1))
}
.ring-white\/30 {
  --tw-ring-color: rgb(255 255 255 / 0.3)
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px
}
.ring-offset-\[var\(--panel-bg\2c \#ffffff\)\] {
  --tw-ring-offset-color: var(--panel-bg,#ffffff)
}
.ring-offset-surface-200 {
  --tw-ring-offset-color: rgb(var(--color-surface-200-rgb) / 1)
}
.ring-offset-surface-50 {
  --tw-ring-offset-color: rgb(var(--color-surface-50-rgb) / 1)
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.blur-2xl {
  --tw-blur: blur(40px);
  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)
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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)
}
.drop-shadow-\[0_2px_10px_rgba\(var\(--accent-rgb\)_\/_0\.4\)\] {
  --tw-drop-shadow: drop-shadow(0 2px 10px rgba(var(--accent-rgb) / 0.4));
  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)
}
.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  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)
}
.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)
}
.sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-\[var\(--panel-blur\)\] {
  --tw-backdrop-blur: blur(var(--panel-blur));
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-\[var\(--panel-blur\2c 0\)\] {
  --tw-backdrop-blur: blur(var(--panel-blur,0));
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-\[var\(--panel-blur\2c 0px\)\] {
  --tw-backdrop-blur: blur(var(--panel-blur,0px));
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-\[box-shadow\] {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-\[color\2c background-color\2c transform\] {
  transition-property: color,background-color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-\[max-height\] {
  transition-property: max-height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-\[outline-color\] {
  transition-property: outline-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-\[transform\2c border-color\2c background-color\] {
  transition-property: transform,border-color,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-\[transform\2c box-shadow\2c color\] {
  transition-property: transform,box-shadow,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-\[transform\2c opacity\] {
  transition-property: transform,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}
.duration-100 {
  transition-duration: 100ms
}
.duration-150 {
  transition-duration: 150ms
}
.duration-200 {
  transition-duration: 200ms
}
.duration-300 {
  transition-duration: 300ms
}
.duration-500 {
  transition-duration: 500ms
}
.duration-700 {
  transition-duration: 700ms
}
.ease-\[cubic-bezier\(0\.34\2c 1\.56\2c 0\.64\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.34,1.56,0.64,1)
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
.\[--tw-gradient-via-position\:22\%\] {
  --tw-gradient-via-position: 22%
}
.\[-webkit-overflow-scrolling\:touch\] {
  -webkit-overflow-scrolling: touch
}
.\[-webkit-touch-callout\:none\] {
  -webkit-touch-callout: none
}
.\[briefing\:reconcile\] {
  briefing: reconcile
}
.\[column-gap\:2rem\] {
  -moz-column-gap: 2rem;
       column-gap: 2rem
}
.\[contain\:strict\] {
  contain: strict
}
.\[contextdock\:\*\] {
  contextdock: *
}
.\[contextdock\:\.\.\.\] {
  contextdock: ...
}
.\[contextdock\:\<code\>\] {
  contextdock: <code>
}
.\[digest\:flash\] {
  digest: flash
}
.\[field-sizing\:content\] {
  field-sizing: content
}
.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(160px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr))
}
.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(186px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(186px,1fr))
}
.\[inbox\:action\] {
  inbox: action
}
.\[inbox\:approval-dismiss\] {
  inbox: approval-dismiss
}
.\[inbox\:auto-eject\] {
  inbox: auto-eject
}
.\[inbox\:board-dismiss\] {
  inbox: board-dismiss
}
.\[inbox\:clickup-inbox-dismiss\] {
  inbox: clickup-inbox-dismiss
}
.\[inbox\:detail\] {
  inbox: detail
}
.\[inbox\:dismiss-fallback\] {
  inbox: dismiss-fallback
}
.\[inbox\:granola-inbox-dismiss\] {
  inbox: granola-inbox-dismiss
}
.\[inbox\:helpdesk-incoming-dismiss\] {
  inbox: helpdesk-incoming-dismiss
}
.\[inbox\:jira-inbox-dismiss\] {
  inbox: jira-inbox-dismiss
}
.\[inbox\:linear-inbox-dismiss\] {
  inbox: linear-inbox-dismiss
}
.\[inbox\:nav\] {
  inbox: nav
}
.\[inbox\:notion-inbox-dismiss\] {
  inbox: notion-inbox-dismiss
}
.\[inbox\:plugin-dismiss\] {
  inbox: plugin-dismiss
}
.\[inbox\:sms-dismiss\] {
  inbox: sms-dismiss
}
.\[inbox\:sort\] {
  inbox: sort
}
.\[inbox\:support-chat-dismiss\] {
  inbox: support-chat-dismiss
}
.\[inbox\:telegram-dismiss\] {
  inbox: telegram-dismiss
}
.\[justify-content\:safe_center\] {
  justify-content: safe center
}
.\[nav\:invariant\] {
  nav: invariant
}
.\[nav\:resolver\] {
  nav: resolver
}
.\[overflow-anchor\:none\] {
  overflow-anchor: none
}
.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere
}
.\[padding-bottom\:env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom)
}
.\[perf\:cold-mount-cache\] {
  perf: cold-mount-cache
}
.\[perf\:dashboard\] {
  perf: dashboard
}
.\[perf\:history-fetch\] {
  perf: history-fetch
}
.\[perf\:inbox-row-renders\] {
  perf: inbox-row-renders
}
.\[perf\:instant-new-session\] {
  perf: instant-new-session
}
.\[perf\:keep-alive\] {
  perf: keep-alive
}
.\[perf\:keydown\] {
  perf: keydown
}
.\[perf\:mobile-blank-prewarm\] {
  perf: mobile-blank-prewarm
}
.\[perf\:parse-segments\] {
  perf: parse-segments
}
.\[perf\:project-list-item\] {
  perf: project-list-item
}
.\[perf\:projects-sidebar-body\] {
  perf: projects-sidebar-body
}
.\[perf\:rebuild\] {
  perf: rebuild
}
.\[perf\:redraw\] {
  perf: redraw
}
.\[perf\:self-heal-refetch\] {
  perf: self-heal-refetch
}
.\[perf\:session-backfill\] {
  perf: session-backfill
}
.\[perf\:session-panel-mount\] {
  perf: session-panel-mount
}
.\[perf\:session-refs\] {
  perf: session-refs
}
.\[perf\:session-switch\] {
  perf: session-switch
}
.\[perf\:sessions-sidebar-body\] {
  perf: sessions-sidebar-body
}
.\[perf\:set-sweep\] {
  perf: set-sweep
}
.\[perf\:shell\] {
  perf: shell
}
.\[perf\:sidebar-row-renders\] {
  perf: sidebar-row-renders
}
.\[perf\:status-change\] {
  perf: status-change
}
.\[perf\:switch-breakdown\] {
  perf: switch-breakdown
}
.\[perf\:switch-chain\] {
  perf: switch-chain
}
.\[perf\:switch-paint\] {
  perf: switch-paint
}
.\[perf\:warm\] {
  perf: warm
}
.\[prd-stack\:navigate\] {
  prd-stack: navigate
}
.\[qw\:nav-scroll\] {
  qw: nav-scroll
}
.\[scroll\:\*\] {
  scroll: *
}
.\[scroll\:\<tag\>\] {
  scroll: <tag>
}
.\[scroll\:apply-mobile\] {
  scroll: apply-mobile
}
.\[scroll\:apply\] {
  scroll: apply
}
.\[scroll\:history\] {
  scroll: history
}
.\[scroll\:scheduled-card\] {
  scroll: scheduled-card
}
.\[scroll\:stale-retry\] {
  scroll: stale-retry
}
.\[scrollbar-width\:none\] {
  scrollbar-width: none
}
.\[session\:nav\] {
  session: nav
}
.\[session\:select\] {
  session: select
}
.\[session\:send\] {
  session: send
}
.\[sidebar\:backstop\] {
  sidebar: backstop
}
.\[sidebar\:divider-move\] {
  sidebar: divider-move
}
.\[sidebar\:reorder\] {
  sidebar: reorder
}
/* Sidebar resize cursor enforcement (set by useResizeSidebar). Class-based
   instead of a `pointer-events: auto` overlay so a stuck `isDragging` flag
   can't trap clicks and freeze the UI. */
html.amc-resizing,
html.amc-resizing * {
  cursor: col-resize !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
/* Mobile long-press multi-select rows. Three-property bundle ensures the
   500ms hold actually fires our handler instead of getting hijacked by the
   browser:
   - `-webkit-touch-callout: none` suppresses iOS Safari's native long-press
     menu (share / copy / lookup) that would otherwise pre-empt our timer.
   - `user-select: none` (with the WebKit prefix) prevents the long-press
     from selecting the row's text and showing the selection handles.
   - `touch-action: manipulation` disables double-tap-to-zoom; the browser
     no longer needs the 300ms gesture-disambiguation delay, so taps and
     long-press timing are crisp. */
.mobile-press-target {
  -webkit-touch-callout: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
/* Press feedback on touch devices — the native-feel "the row acknowledged my
   tap" dim that hover styles can't provide on a phone. Scoped to
   `(hover: none)` so desktop (mouse) rendering is byte-identical, and keyed on
   the SAME `.mobile-press-target` class the touch surfaces already carry, so
   every inbox/session row (INBOX_ROW_CONTAINER_BASE in lib/styles.ts) and the
   mobile chrome light up from this one rule. `filter` (multiplicative) dims any
   background in both light and dark themes without new color tokens, and only
   paints while the finger is down. Dimming EVERY existing carrier of the class
   (task rows, KMS chrome, the send buttons…) is deliberate — that IS the
   feature. Rule of thumb: never stack a second COLOR change on the same press
   (an `active:bg-*`/`active:text-*` on a press-target is a double — MobileTabBar
   shed its for this), while a transform like the send button's
   `active:scale-[0.98]` composes fine with the dim (scale + dim is the native
   pairing). Surfaces with their own complete `active:` treatment and NO
   press-target class (MobileBreadcrumb, MobileProjectDrawer) stay as-is. */
@media (hover: none) {
  .mobile-press-target:active {
    filter: brightness(0.9);
  }
  /* Safe mode: a software rasterizer can shear/glitch filter layers exactly
     like the amc-lift transforms (render-safe-mode-contract.md) — drop the
     decorative dim there. */
  html.software-render .mobile-press-target:active {
    filter: none;
  }
}
/* Press isolation — a press on a control INSIDE a pressable row (the session
   row's ⋮ kebab or the mobile X) must NOT press-scale / lift the row itself.
   `:active` is a pseudo-state that propagates to ancestors, so JS stopPropagation
   can't stop it; without this the whole session visibly shrinks + settles as its
   menu opens (the "goes down" the user reported). This neutralizes the row's
   transform ONLY while a nested <button> is held — the row keeps its own body
   press-scale (active:scale-[0.98]). Unlayered so it beats Tailwind's layered
   `active:scale-*` utility with no !important (the same trick .amc-overlay-elevation
   uses over shadow-*); its (0,2,1) specificity also outranks the utility's (0,2,0).
   :has() precedent: .qw-send-wrap.ready:has(.qw-send:active). Locked by
   tests/unit/lint/session-row-nested-press-isolation.test.ts. */
.amc-press-isolate:has(button:active) {
  transform: none;
}
/* Readable text on a SOLID accent button, adaptive per visual theme. The accent
   (`--accent-rgb`) is set per theme and varies wildly — indigo, gold, green, even
   pure white ("Vercel Clean") — so a fixed white label is illegible on a pale
   accent (white-on-white on the white theme, ~3:1 on light indigo). theme-store's
   syncOnAccentTextVars() computes the treatment from the LIVE accent and sets the
   `--on-accent-*` vars: white (with a subtle dark edge so the letters lift off a
   light fill) stays wherever it reads, and a near-white accent flips to a dark
   label. The literal fallbacks below are the correct default for a normal
   (dark-enough) accent, so buttons read right even before that JS runs.

   Unlayered + the compound `.bg-accent.text-white` selector (specificity 0,2,0)
   intentionally OVERRIDE Tailwind's `.text-white`, and match ONLY solid
   `bg-accent` (a `bg-accent/NN` opacity tint is a different class, so translucent
   tints are untouched). The `text-white` marker stays REQUIRED by
   tests/unit/lint/accent-bg-text-contrast.test.ts — it is what this rule hooks.
   See src/renderer/src/lib/accent-contrast.ts. */
.bg-accent.text-white {
  color: var(--on-accent-color, #f4f4f6);
  text-shadow: var(--on-accent-text-shadow, 0 1px 2px rgb(0 0 0 / 0.45));
}
.bg-accent.text-white svg {
  filter: var(--on-accent-icon-shadow, drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.45)));
}
/* ── KMS mobile chrome opaque floor ──────────────────────────────────────
   The KMS mobile surfaces that float OVER editor content — the action sheet
   (KMS_MOBILE_SHEET + its sticky header), the quick-format bar
   (KMS_MOBILE_QUICKBAR), the mobile header, and the notes drawer — must be
   GUARANTEED opaque. Their old `bg-[var(--panel-bg)]` + `backdrop-blur` reads as
   glass on DESKTOP, where KMS chrome sits over the app gradient (see I10); but on
   mobile `backdrop-filter` is unreliable and `--panel-bg` is near-transparent on
   glass themes (glassmorphism dark = 6% white), so the note's text bled straight
   through (user bug report 2026-06-09). Same opacity-floor trick as `.qw-toprow`:
   a hex-literal `--color-surface-100` floor (opaque on every theme) with the
   `--panel-bg` tint layered on top as a gradient (CSS only paints a solid color
   in `background-image` when it's wrapped as a gradient). UNLAYERED on purpose so
   it beats Tailwind's `@layer utilities`. Contract: kms-editor-styling-contract.md
   (I13). */
.kms-mobile-panel-surface {
  background-color: var(--color-surface-100);
  background-image: linear-gradient(var(--panel-bg), var(--panel-bg));
}
/* ── Glassmorphism theme ────────────────────────────────────────────────── */
/* Gradient blobs behind content — z-index: -1 keeps them under all UI */
.dark.theme-glassmorphism #root::before,
.dark.theme-glassmorphism #root::after,
.dark.theme-glassmorphism #kms-window-root::before,
.dark.theme-glassmorphism #kms-window-root::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
  /* Static by default — NO drift animation. Animating transform: scale() on a
     filter: blur(100px) layer forces the whole 100px blur to RE-RASTER every
     frame (~continuous GPU) — the single biggest always-on cost of this theme
     and a measured cause of typing / paint jank that is independent of session
     load. The blurred radial-gradient glow is kept (rastered ONCE, then
     composited for free), so the look is unchanged; only the imperceptible 40s
     drift is dropped. Low Power Mode still drops the blur itself. Do NOT re-add
     an infinite glass-drift animation here — see render-isolation /
     low-power-mode contracts + the typing-lag-gpu note. */
}
.dark.theme-glassmorphism #root::before,
.dark.theme-glassmorphism #kms-window-root::before {
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 70%);
  top: -15%;
  left: -10%;
}
.dark.theme-glassmorphism #root::after,
.dark.theme-glassmorphism #kms-window-root::after {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.14), transparent 70%);
  bottom: -20%;
  right: -5%;
}
/* App shell transparent so gradient blobs show through frosted panels.
   `:not(.drag-region)` keeps the titlebar's own bg-surface-100/60 from
   being collapsed to transparent — without the exclusion, the titlebar
   became a translucent strip that backdrop-blur-xl sampled the gradient
   blob through, painting a smudged dark band across the top of the window
   when supermail (which leaves its sidebar pane transparent for the same
   bleed-through effect) was active. */
html.dark.theme-glassmorphism #root > div > div:not(.drag-region) {
  background: transparent;
}
/* Supermail panel slot — the AMC overlay wrapper (`bg-surface-50` motion.div in
   DashboardDesktopLayout.tsx) paints opaque #08080e in DARK glassmorphism
   over the gradient blobs. The inbox-list column inside supermail uses
   translucent frosted glass (`bg-[var(--color-panel-bg)] backdrop-blur-md`)
   and wants the gradient to bleed through it, matching how the sidebar slot
   reads. Override the overlay to transparent so the gradient reaches the
   list column. The reading pane sets its OWN solid surface-100 internally
   (matching the AMC SessionPanel surface) so the email thread itself
   doesn't show gradient — see inbox-page.tsx + thread-content-pane.tsx.
   `:has` is Chromium >= 105 (Electron is well past); selector only matches
   the overlay wrapping the supermail panel, so other integrations' main
   panes stay surface-50 unchanged.

   Gated to `.dark` only: in LIGHT glassmorphism, surface-50 is the light
   lavender `#ebebfd` (the same opaque surface marketplace + github-issues
   inherit for their panel area), and overriding it to transparent forces
   supermail to render over the gradient blob layer, producing a darker
   blob-tinted band that other plugins don't show. Letting bg-surface-50
   stay opaque in light mode brings supermail back in line with them. */
html.dark .bg-surface-50:has([data-testid='supermail-panel']) {
  background-color: transparent;
}
/* Supermail panes in Glassmorphism Light — match marketplace / github-issues.
   Supermail's column wrappers (nav rail, inbox list, label list, snippet
   list) all use `bg-[var(--color-panel-bg)]` which proxies AMC's
   `--panel-bg`. In glassmorphism light that's `rgba(255,255,255,0.72)` —
   28% translucent, so the gradient blob shows through every column,
   producing the blob-tinted band the user reported (only visible in light;
   dark blobs over dark are invisible). Marketplace + github-issues don't
   set per-component panel-bg at all and inherit the opaque
   `bg-surface-50` lavender for their panel area; this override gives
   supermail the same opaque surface inside `.supermail-scope` only,
   without touching AMC's translucent panel-bg used elsewhere. */
html.theme-glassmorphism:not(.dark) .supermail-scope {
  --color-panel-bg: rgb(var(--color-surface-50-rgb, 235 235 253));
}
/* Pop-out KMS window (#kms-window-root) hosts the same gradient layer as the
   main app's #root. Give it the matching fixed root box so the blobs added to
   the theme selectors below stack correctly, and clear the shell background in
   glassmorphism so the z-index:-1 blobs show through the glass panes (mirrors
   the `#root > div > div` rule above; aurora's z-index:0 blobs paint above the
   shell and need no such rule). */
#kms-window-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
html.theme-glassmorphism .kms-window-shell {
  background: transparent;
}
@keyframes glass-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -20px) scale(1.05);
  }
  100% {
    transform: translate(-15px, 15px) scale(0.97);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dark.theme-glassmorphism #root::before,
  .dark.theme-glassmorphism #root::after,
  .dark.theme-glassmorphism #kms-window-root::before,
  .dark.theme-glassmorphism #kms-window-root::after {
    animation: none;
  }
}
/* ── Glassmorphism light mode blobs — softer pastel gradient ───────────── */
.theme-glassmorphism:not(.dark) #root::before,
.theme-glassmorphism:not(.dark) #root::after,
.theme-glassmorphism:not(.dark) #kms-window-root::before,
.theme-glassmorphism:not(.dark) #kms-window-root::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: -1;
  /* Static by default — see the dark-mode blob rule above for the full why
     (animated blur re-raster = this theme's biggest always-on GPU cost). */
}
.theme-glassmorphism:not(.dark) #root::before,
.theme-glassmorphism:not(.dark) #kms-window-root::before {
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.22), transparent 70%);
  top: -15%;
  left: -10%;
}
.theme-glassmorphism:not(.dark) #root::after,
.theme-glassmorphism:not(.dark) #kms-window-root::after {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 70%);
  bottom: -20%;
  right: -5%;
}
/* `:not(.drag-region)` excludes the titlebar — same rationale as the dark
   glassmorphism block above (the symptom was the dark-strip-at-top a user
   reported in Glassmorphism Light). */
html.theme-glassmorphism:not(.dark) #root > div > div:not(.drag-region) {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .theme-glassmorphism:not(.dark) #root::before,
  .theme-glassmorphism:not(.dark) #root::after,
  .theme-glassmorphism:not(.dark) #kms-window-root::before,
  .theme-glassmorphism:not(.dark) #kms-window-root::after {
    animation: none;
  }
}
/* ── Aurora theme animated background blobs ────────────────────────────── */
.dark.theme-aurora #root::before,
.dark.theme-aurora #root::after,
.dark.theme-aurora #kms-window-root::before,
.dark.theme-aurora #kms-window-root::after {
  content: '';
  position: fixed;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  /* Static by default — NO drift. Animating transform: scale() on a filter:
     blur(100px) layer forces the whole 100px blur to RE-RASTER every frame
     (~continuous GPU) — a measured cause of typing / paint jank that is
     independent of session load. The blurred radial-gradient glow is kept
     (rastered ONCE, then composited for free), so the look is unchanged; only the
     imperceptible 25s drift is dropped. Low Power Mode still drops the blur itself.
     Mirrors the glassmorphism blob fix (65206fb3c3); do NOT re-add an infinite
     aurora-drift here. */
}
.dark.theme-aurora #root::before,
.dark.theme-aurora #kms-window-root::before {
  background: radial-gradient(circle, rgb(var(--accent-rgb, 99 102 241)), transparent 70%);
  top: -10%;
  left: -5%;
}
.dark.theme-aurora #root::after,
.dark.theme-aurora #kms-window-root::after {
  background: radial-gradient(circle, #06b6d4, transparent 70%);
  bottom: -15%;
  right: 5%;
}
@keyframes aurora-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(40px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
  100% {
    transform: translate(30px, -10px) scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dark.theme-aurora #root::before,
  .dark.theme-aurora #root::after,
  .dark.theme-aurora #kms-window-root::before,
  .dark.theme-aurora #kms-window-root::after {
    animation: none;
  }
}
/* ── Aurora light mode blobs — subtle pastel tint ──────────────────────── */
.theme-aurora:not(.dark) #root::before,
.theme-aurora:not(.dark) #root::after,
.theme-aurora:not(.dark) #kms-window-root::before,
.theme-aurora:not(.dark) #kms-window-root::after {
  content: '';
  position: fixed;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  /* Static by default — see the dark-mode aurora blob rule above for the full why
     (animated blur re-raster = a per-frame GPU cost). */
}
.theme-aurora:not(.dark) #root::before,
.theme-aurora:not(.dark) #kms-window-root::before {
  background: radial-gradient(circle, rgb(var(--accent-rgb, 99 102 241)), transparent 70%);
  top: -10%;
  left: -5%;
}
.theme-aurora:not(.dark) #root::after,
.theme-aurora:not(.dark) #kms-window-root::after {
  background: radial-gradient(circle, #06b6d4, transparent 70%);
  bottom: -15%;
  right: 5%;
}
@media (prefers-reduced-motion: reduce) {
  .theme-aurora:not(.dark) #root::before,
  .theme-aurora:not(.dark) #root::after,
  .theme-aurora:not(.dark) #kms-window-root::before,
  .theme-aurora:not(.dark) #kms-window-root::after {
    animation: none;
  }
}
/* ── Silk Animations ──────────────────────────────────────────────────── */
/* Input focus glow — soft accent ring on focus (GPU-composited) */
input[type='text']:focus,
input[type='search']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='number']:focus,
input[type='password']:focus,
textarea:focus,
select:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.15);
  transition: box-shadow 200ms ease-out;
}
/* Meetings dock / ask / note fields are borderless inputs INSIDE a bordered
   container that already shows focus via its own border. The standalone input
   focus-glow above would then read as a double / inner border on those fields,
   so suppress it there. Unlayered (like the glow) so it competes on specificity.
   DOUBLED class (`.meeting-field.meeting-field:focus` = 0,3,0) so it beats BOTH
   `textarea:focus` (0,1,1) AND `input[type='text']:focus` (0,2,1) — a single
   `.meeting-field:focus` (0,2,0) LOSES to the typed-input glow, which was the
   HUD "Ask anything" &lt;input&gt; still showing the inner border. Mirrors the
   `.kms-prose .ProseMirror { outline: none }` focus-ring-kill pattern. */
.meeting-field.meeting-field:focus {
  box-shadow: none;
}
/* Scroll fade — content fades at top/bottom edges of scroll containers.
   `--scroll-fade-size` is the ONE fade distance: it drives the mask AND the matching
   `scroll-padding-block` below, so an auto-scrolled selection (native scrollIntoView, or
   the virtualizer's scrollToIndex) is never parked inside the faded edge. Keep it in step
   with SCROLL_FADE_PX (virtual-constants.ts) — both locked by
   tests/unit/lint/scroll-fade-scroll-padding.test.ts. */
/* Recording "voice wave" — a small cluster of vertical bars that bounce their
   HEIGHT while a capture is live (Granola-style live-activity glyph). CSS-only,
   NOT audio-reactive. Height (never a transform) is animated so it never collides
   with the app's `animate-*`+transform contract; staggered per-bar delays give
   the wave its ripple. Under reduced motion the animation is dropped and each bar
   holds at its inline resting height, so it reads as a frozen equalizer. */
/* The bounce floor stays well off zero (40%) so even the CSS fallback never
   reads as a flat line mid-cycle (the wave design rule: always amplitude). */
@keyframes voice-wave-bounce {
  0%,
  100% {
    height: 40%;
  }
  50% {
    height: 95%;
  }
}
.voice-wave-bar {
  animation: voice-wave-bounce 750ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .voice-wave-bar {
    animation: none;
  }
}
/* Meetings voice-wave — the recording glyph pulses its opacity (never its shape).
   Opacity-only so it never pairs animate-* with a transform; freezes under
   reduced motion, leaving the static green glyph. */
@keyframes voice-wave-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.voice-wave-pulse {
  animation: voice-wave-pulse 1200ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .voice-wave-pulse {
    animation: none;
  }
}
/* Scroll fade — content fades at top/bottom edges of scroll containers */
.scroll-fade {
  --scroll-fade-size: 12px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black var(--scroll-fade-size),
    black calc(100% - var(--scroll-fade-size)),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black var(--scroll-fade-size),
    black calc(100% - var(--scroll-fade-size)),
    transparent
  );
  /* Reserve the fade's worth of scroll space so scrollIntoView({ block: 'nearest' }) lands
     a selected row JUST ABOVE the fade — fully readable, not dissolved into the edge. (The
     virtualized session list reserves the same via SCROLL_FADE_PX; TanStack sets scrollTop
     numerically and ignores CSS scroll-padding, so it needs its own reserve.) */
  scroll-padding-block: var(--scroll-fade-size);
}
/* Theme transition — smooth color morph on theme/mode switch */
#root,
body {
  transition:
    background-color 300ms ease-out,
    color 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #root,
  body {
    transition: none;
  }
}
/* Shimmer skeleton — sweeping highlight for loading placeholders */
.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface-200) 25%,
    var(--color-surface-300) 50%,
    var(--color-surface-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .animate-shimmer {
    animation: none;
    background: var(--color-surface-200);
  }
}
/* Account-switch flash — one-shot shimmer pass over the header percent indicator
   when the active account changes. JS gates the class on/off for ~700ms; the
   ::before pseudo paints a transparent→accent→transparent gradient and slides
   left→right via transform, so it doesn't disturb the chip's own background.
   See useAccountSwitchFlash hook. */
.account-switch-flash {
  position: relative;
  overflow: hidden;
}
.account-switch-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb) / 0.35) 50%,
    transparent 100%
  );
  animation: account-switch-shimmer 700ms ease-out;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes account-switch-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-switch-flash::before {
    animation: none;
    display: none;
  }
}
/* Drag-and-drop indicators (DOM-driven via useDragReorder — no React re-renders)
   Circle-dot + line pattern (à la Notion): 6px-tall pseudo with stacked gradients —
   radial for the dot, linear for the 2px line. */
[data-drag-indicator='above'] {
  position: relative;
}
[data-drag-indicator='above']::before {
  content: '';
  position: absolute;
  /* `--drag-indent` (set inline by the quick-reply tree) slides the line to the
     depth the item will land at, so "inside a folder" reads differently from
     "out at the parent level". Other drag surfaces don't set it → 0px = today's
     full-width line, unchanged. */
  left: var(--drag-indent, 0px);
  right: 0;
  top: 0;
  transform: translateY(-50%);
  height: 6px;
  pointer-events: none;
  z-index: 10;
  background:
    radial-gradient(circle at 3px 50%, rgb(var(--accent-rgb)) 3px, transparent 3px),
    linear-gradient(
      transparent calc(50% - 1px),
      rgb(var(--accent-rgb)) calc(50% - 1px),
      rgb(var(--accent-rgb)) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}
[data-drag-indicator='below'] {
  position: relative;
}
[data-drag-indicator='below']::after {
  content: '';
  position: absolute;
  /* See the 'above' rule — `--drag-indent` (0px fallback) indents the line to
     the drop depth for the quick-reply tree; all other surfaces stay full-width. */
  left: var(--drag-indent, 0px);
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  height: 6px;
  pointer-events: none;
  z-index: 10;
  background:
    radial-gradient(circle at 3px 50%, rgb(var(--accent-rgb)) 3px, transparent 3px),
    linear-gradient(
      transparent calc(50% - 1px),
      rgb(var(--accent-rgb)) calc(50% - 1px),
      rgb(var(--accent-rgb)) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}
/* Horizontal orientation — chip strips that flow left-to-right.
   When useDragReorder is called with `orientation: 'horizontal'` it stamps
   data-drag-orientation='horizontal' on each item; we re-route the 'above'
   indicator to the chip's LEFT edge and 'below' to its RIGHT edge, rotating
   the dot+line pattern 90°. Same accent colour, same 6px thickness, just
   along the X axis. */
[data-drag-orientation='horizontal'][data-drag-indicator='above']::before {
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 6px;
  height: auto;
  background:
    radial-gradient(circle at 50% 3px, rgb(var(--accent-rgb)) 3px, transparent 3px),
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      rgb(var(--accent-rgb)) calc(50% - 1px),
      rgb(var(--accent-rgb)) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}
[data-drag-orientation='horizontal'][data-drag-indicator='below']::after {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateX(50%);
  width: 6px;
  height: auto;
  background:
    radial-gradient(circle at 50% 3px, rgb(var(--accent-rgb)) 3px, transparent 3px),
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      rgb(var(--accent-rgb)) calc(50% - 1px),
      rgb(var(--accent-rgb)) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
}
/* "Drop into folder" highlight — accent-tinted background ring on the folder
   row. Distinct from above/below (which are line indicators) so users can tell
   at a glance whether they are reordering or moving into. */
[data-drag-indicator='into'] {
  position: relative;
  background: rgb(var(--accent-rgb) / 0.18) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.5);
  border-radius: 0.375rem;
}
/* External drop target highlight (project dragged over a divider) */
[data-drag-external-active] {
  background: rgb(var(--accent-rgb) / 0.15) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.4);
  border-radius: 0.5rem;
}
/* Settings search scroll-to highlight */
@keyframes setting-highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.5);
  }
  40% {
    box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0);
  }
}
.setting-highlight {
  animation: setting-highlight-pulse 1.5s ease-out;
  outline: 2px solid rgb(var(--accent-rgb) / 0.5);
  outline-offset: 2px;
  border-radius: 0.75rem;
}
/* Pulse a freshly-pinned toolbar button (auto-pin-on-enable) so the user's eye
   lands on their newly-enabled feature. Reuses the setting-highlight-pulse
   keyframes; runs the accent ring twice so it reads on a small icon button. */
.toolbar-item-highlight {
  animation: setting-highlight-pulse 1.2s ease-out 2;
  outline: 2px solid rgb(var(--accent-rgb) / 0.6);
  outline-offset: 2px;
  border-radius: 0.6rem;
}
@media (prefers-reduced-motion: reduce) {
  .toolbar-item-highlight {
    animation: none;
  }
}
/* Pulse the message a deep link (agentmc://session/<id>?message=<id>) lands on,
   so the eye finds the linked message after the scroll. Reuses the
   setting-highlight-pulse keyframe; JS adds the class on arrival and removes it
   after the pulse (see lib/linked-message-scroll.ts). Under reduced motion the
   keyframe is disabled, leaving the brief static accent ring. */
.message-link-highlight {
  animation: setting-highlight-pulse 1.5s ease-out;
  outline: 2px solid rgb(var(--accent-rgb) / 0.5);
  outline-offset: 2px;
  border-radius: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .message-link-highlight {
    animation: none;
  }
}
/* Pulse the comment row a share-anchor click scrolls to, so the eye finds the
   linked comment. Reuses the setting-highlight-pulse keyframe. */
.share-comment-highlight {
  animation: setting-highlight-pulse 1.5s ease-out;
  outline: 2px solid rgb(var(--accent-rgb) / 0.5);
  outline-offset: 2px;
  border-radius: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .share-comment-highlight {
    animation: none;
  }
}
/* Leave room for SettingsContent's pinned floating header (≈68px tall, fades in
   at scrollTop > 40px). Without this, scrollIntoView({block:'start'}) aligns the
   target to scrollTop=0, which triggers the header and hides the target behind it. */
[data-setting-id] {
  scroll-margin-top: 5rem;
}
/* ── Session search highlights (CSS Custom Highlight API) ────────────── */
/* NOTE: the `session-search` (all-matches yellow) rule was removed in the
   data-mode refactor — the hook no longer writes that key. The UX now relies
   on the "3 of 47" counter in SessionSearchBar instead of painting every match.
   Keep only `session-search-current` for the active hit. */
::highlight(session-search-current) {
  background-color: rgba(249, 115, 22, 0.6);
  color: inherit;
}
/* ── Settings find-in-page highlights (Ctrl+F, CSS Custom Highlight API) ──── */
/* Unlike session search (current-only + counter), the Settings find bar paints
   EVERY match like a browser's Ctrl+F: `settings-find` = all non-active matches
   (subtle yellow), `settings-find-current` = the active hit (strong orange). The
   two keys never overlap a position (the active match is excluded from the ALL
   set in useSettingsFind), so there's no double-paint. Theme-agnostic rgba —
   readable on both light and dark surfaces. */
::highlight(settings-find) {
  background-color: rgba(250, 204, 21, 0.4);
  color: inherit;
}
::highlight(settings-find-current) {
  background-color: rgba(249, 115, 22, 0.6);
  color: inherit;
}
/* Window drag regions — used with titleBarStyle: 'hidden' */
.drag-region {
  -webkit-app-region: drag;
}
.no-drag {
  -webkit-app-region: no-drag;
}
/* Zoom-compensated window fill for pop-out windows (replaces `h-screen` on their
   top-level shell). CSS `zoom` on <html> (set by useWindowZoom) scales the whole
   document, so a plain `100vh` shell renders at `100vh × zoom` and stops covering a
   maximized window when zoomed OUT — the dark window background shows through.
   Sizing to `100vh / zoom` cancels the scale so the shell spans the window at any
   zoom (and at zoom-IN too). The `--window-zoom` var is published in lock-step by
   the hook; the `1` fallback means native `100vh` for the main window and any
   window with no saved zoom, so this is a zero-regression drop-in.
   See .claude/memory/contracts/per-window-zoom-contract.md (invariant 9). */
.window-zoom-fill {
  height: calc(100vh / var(--window-zoom, 1));
}
/* Zoom-IMMUNE chrome for a frameless pop-out's title strip. The strip has to line
   up with the OS caption-button overlay (titleBarOverlay — a FIXED height in DIP,
   unaffected by page zoom), but CSS `zoom` on <html> (set by useWindowZoom) scales
   the whole document, so a fixed-height strip renders at `height × zoom` and the OS
   min/max/close buttons no longer sit on it (the "messed up at the top" bug). A
   counter-zoom of `1 / zoom` cancels the window zoom for the strip ONLY (net scale
   = zoom × 1/zoom = 1), so the strip — its height AND its contents (label, KMS tabs,
   caption-button reserves) — renders at its natural DIP size and always matches the
   overlay, exactly like the OS buttons (which never zoom with the page). The `1`
   fallback = no counter for the never-zoomed main window / an unsaved zoom. Sibling
   to .window-zoom-fill; both read the same `--window-zoom` var the hook publishes.
   See .claude/memory/contracts/per-window-zoom-contract.md (invariant 10). */
.window-zoom-chrome {
  zoom: calc(1 / var(--window-zoom, 1));
}
/* KMS pop-out — note tabs hosted in the frameless title strip
   (KmsWindowTitleBar). The strip itself is the drag region (`.drag-region`
   above); only its interactive controls opt out so the window still moves while
   tabs stay clickable / drag-to-reorder. The hosted TabBar drops its own row
   chrome here (the strip owns the bg / bottom border / fixed height) so it fills
   the strip without a doubled border. `[role="tablist"]` (0,2,0) out-specifies
   the TabBar's `.h-9` / `.border-b` utilities (0,1,0), so no `!important`.
   See .claude/memory/contracts/scratchpad-window-contract.md (invariant 8). */
.kms-window-titlebar :is(button, [role='tab'], a, input, select) {
  -webkit-app-region: no-drag;
}
.kms-window-titlebar [role='tablist'] {
  height: 100%;
  border-bottom: 0;
  background: transparent;
}
/* ─── QuestionWidget — glassmorphism wizard ─── */
/* NOTE: No `container-type: inline-size` here. Size containment on this element
   caused the bubble's flex-basis: auto max-content sizing to exclude this child,
   so widget-only agent messages collapsed the bubble to ~28px and wrapped text
   to one word per line. Any narrow-widget responsive behavior below uses
   viewport-based @media queries, not @container queries. */
.qw-glass {
  position: relative;
  width: 100%;
  background: var(--panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  outline: none;
  margin: 8px 0;
  /* `clip` (not `hidden`) bounds the JS-pinned toprow (.qw-toprow) inside the
     card. The pin (see useQuestionWidgetPin) writes inline
     `transform: translateY(<offset>)` on the toprow as the user scrolls past
     the card, so without overflow clipping the header would visibly escape
     out the bottom edge. `hidden` would make .qw-glass itself a scroll
     container — `clip` clips visually without that side effect (Hidden
     fallback for browsers without clip support). */
  overflow: hidden;
  overflow: clip;
}
.qw-glass:focus,
.qw-glass:focus-within {
  border-color: rgba(var(--accent-rgb) / 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 2px rgba(var(--accent-rgb) / 0.2);
}
.qw-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px;
  /* Control bar layout stays in NORMAL FLOW. `position: relative` with NO
     top/left/right/bottom insets does not move the box and does not pin —
     it ONLY enables `z-index` (z-index is ignored on `position: static`).
     The pin remains JS-driven: useQuestionWidgetPin writes inline
     `transform: translateY(<offset>)` on this element as the scroll
     container moves past the card top, keeping the header visually glued
     to the scrollport top until the card scrolls off. CSS `position: sticky`
     is NOT an option here — when the chat uses the virtualized message
     list, TanStack-Virtual wraps every row in a `position: absolute;
     transform: translateY()` container. Sticky resolves its clamp against
     the LAYOUT box of the containing block; a transformed ancestor
     decouples layout from paint, so Chromium clamped the sticky header to
     the BOTTOM of the card with an empty gap above the question text
     (postmortems/qw-empty-gap-sticky-toprow-virtual-postmortem.md). The
     row-wrapper transform stays — it is the GPU-scroll-perf hot path. JS
     transform on this element composes cleanly with the wrapper's own
     transform: transform moves the painted box AND the hit-test box
     (buttons stay clickable at the visual location), and does NOT alter
     layout (the guard test `tests/e2e/ui/question-widget.spec.ts >
     sticky-toprow / sentinel / is-pinned subsystem is fully retired` still
     verifies position: relative + total height invariant — `relative` with
     no insets computes `top: auto` and contributes zero layout delta). */
  position: relative;
  /* z-index paint-order floor for the pinned header. `.qw-slot` carries
     `transform: translateX(0)` in its base rule as the start state for the
     slide transition — any non-`none` transform makes the element a
     stacking context, so every slot is a permanent stacking context at
     z-index: auto (0). Without an explicit z-index on this toprow, two
     z-index:auto stacking contexts in the same parent (.qw-glass) paint
     in DOM order, and the slot — which follows .qw-toprow in DOM — paints
     ON TOP OF the pinned header. The opaque background-color above cannot
     win that compositing fight because the slot is painted above it. The
     invariant: the pinned toprow MUST keep z-index above the body slots;
     an opaque background is insufficient. Value 2 beats the slot's
     effective 0 with headroom; nothing else inside .qw-glass competes
     (.qw-help-tooltip z-50 + the mobile bottom-sheet z-1000 are portaled
     to document.body, outside this stacking context). */
  z-index: 2;
  /* Layered background kept as a visual header divider AND a pin-essential
     opacity floor: --color-surface-100 is a hex-literal solid floor on every
     theme; --panel-bg layered on top as a theme tint via the linear-gradient
     trick (CSS only paints solid colors in background-image when wrapped as
     a gradient). MUST stay fully opaque — the JS pin floats this row over
     scrolling content below, so any transparency would let chat rows bleed
     through the pinned header. Do not introduce alpha < 1 here. (Opacity is
     necessary but NOT sufficient — see the z-index paint-order note above;
     a transparent slot painted ON TOP would still composite chat content
     over the header regardless of the header's own background.) */
  background-color: var(--color-surface-100);
  background-image: linear-gradient(var(--panel-bg), var(--panel-bg));
  border-bottom: 1px solid var(--panel-border);
  /* Soft drop shadow reads as a header divider below the bar — projects DOWN
     into .qw-body which is inside .qw-glass, so overflow:clip on the parent
     does not crop it. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.qw-toprow-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.qw-toprow-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Desktop body padding — extra breathing room above the question text. */
@media (min-width: 768px) {
  .qw-body {
    padding-top: 14px;
  }
}
/* Help button + tooltip */
.qw-help-wrap {
  position: relative;
}
.qw-help-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
}
.qw-help-btn:hover {
  background: var(--panel-bg-hover);
  color: inherit;
}
/* Tooltip is portaled to document.body so .qw-glass overflow:hidden doesn't
   clip it. Position is set inline (position:fixed; top/right computed from
   the help button's getBoundingClientRect). Visibility is React-driven:
   mounted == open. Entry animation runs once on mount. */
.qw-help-tooltip {
  z-index: 50;
  width: 220px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-tooltip);
  pointer-events: auto;
  /* The full shortcut list can run tall (extra rows + the multi-question nav rows);
     cap the height and scroll so it can never spill below the viewport bottom. */
  max-height: min(70vh, 420px);
  overflow-y: auto;
  animation: qw-help-tooltip-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes qw-help-tooltip-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.qw-help-title {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.qw-help-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
.qw-help-row span {
  font-size: 12px;
  color: inherit;
}
.qw-help-keys {
  display: flex;
  gap: 3px;
}
/* The caps inside .qw-help-keys are the shared <Kbd> (.amc-keycap) — no
   per-widget kbd styling; the universal cap look governs (tooltip-adoption
   contract, hotkey-keycap-component-usage guard). */
/* Turn-off button inside help tooltip */
.qw-turnoff-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border: none;
  border-top: 1px solid var(--panel-border);
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: start;
  transition: color 150ms ease;
}
.qw-turnoff-btn:hover {
  color: inherit;
}
/* Dismiss */
.qw-dismiss {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.qw-dismiss:hover {
  background: var(--panel-bg-hover);
  color: inherit;
}
.qw-dismiss:active {
  transform: scale(0.9);
}
/* Dismissed state — prose + restore button */
.qw-dismissed-wrap {
  position: relative;
}
.qw-restore-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 999px;
  border: 1px dashed var(--panel-border);
  background: transparent;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.qw-restore-btn:hover {
  color: inherit;
  border-color: currentColor;
}
.qw-restore-btn:active {
  transform: scale(0.97);
}
/* Body */
.qw-body {
  padding: 10px 14px 14px;
}
/* Stable-position grid: every question renders as a slot in the same grid cell.
   Grid sizes to the tallest slot, only the active slot is visible. */
.qw-body.qw-stable {
  display: grid;
  grid-template-columns: 1fr;
}
.qw-slot {
  grid-area: 1 / 1;
  transition:
    opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
  transform: translateX(0);
}
.qw-slot[aria-hidden='true'] {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.qw-slot.qw-slot-fwd {
  animation: qw-slot-fwd 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.qw-slot.qw-slot-bck {
  animation: qw-slot-bck 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes qw-slot-fwd {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes qw-slot-bck {
  from {
    opacity: 0;
    transform: translateX(-28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qw-slot,
  .qw-slot.qw-slot-fwd,
  .qw-slot.qw-slot-bck {
    transition: none;
    animation: none;
  }
}
.qw-question {
  font-size: var(--app-font-size);
  font-weight: 700;
  color: inherit;
  margin-bottom: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* The question text is already bold (font-weight: 700 above). Inline `**bold**` in a
   question renders as <strong>, which at the UA default `bolder` computes to weight 900
   against the 700 parent — visibly HEAVIER than the rest of the already-bold question
   ("extra bolding"). Resolve it back to the question's own weight so the question area
   renders at ONE uniform weight; extra bolding is then impossible here regardless of the
   markdown an agent emits. The <strong> stays in the DOM (bold-with-nested-link recursion
   and its tests are untouched) — only the visual weight is flattened. Scoped to
   .qw-question only: option pills and notes are normal-weight, so their bold is standard
   and intentionally left alone. Locked by qw-question-no-extra-bold-css-contract.test.ts. */
.qw-question strong {
  font-weight: inherit;
}
.qw-qnum {
  color: inherit;
  font-weight: 600;
}
.qw-note {
  font-size: calc(var(--app-font-size) - 2px);
  font-style: italic;
  color: inherit;
  margin: 10px 0 2px 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Pills */
.qw-pills {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qw-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
}
.qw-pill:hover {
  background: var(--panel-bg-hover);
  border-color: currentColor;
}
.qw-pill:active {
  transform: scale(0.985);
}
.qw-pill:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb));
  outline-offset: 2px;
}
.qw-pill.sel {
  background: rgba(var(--accent-rgb) / 0.1);
  border-color: rgba(var(--accent-rgb) / 0.3);
  box-shadow: 0 0 12px rgba(var(--accent-rgb) / 0.08);
  animation: qw-pill-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Recommended-option highlight — on by default; toggle via the qwRecommendedHighlightEnabled
   setting. Soft green RING on the option the agent tagged `(recommended)`.
   Green is rgb(34 197 94) (green-500), AMC's "Running" status green.
   Hybrid selected state: the `.qw-pill.qw-pill-rec` border is placed AFTER
   `.qw-pill.sel` so (equal specificity → later wins) the green ring persists
   even when the pill is selected — you can still see WHICH option was
   recommended — while the accent fill/glow/badge from `.sel` layer on top to
   show it's the picked one. The resting (unselected) state adds a green glow as
   the at-a-glance hint — the letter badge stays neutral (the outline is the cue). */
.qw-pill.qw-pill-rec {
  border-color: rgba(34 197 94 / 0.6);
}
.qw-pill.qw-pill-rec:hover {
  border-color: rgba(34 197 94 / 0.8);
}
.qw-pill-rec:not(.sel) {
  box-shadow: 0 0 14px rgba(34 197 94 / 0.16);
}
@keyframes qw-pill-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
.qw-pill-badge {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--panel-bg-active);
  color: inherit;
  flex-shrink: 0;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}
.qw-pill.sel .qw-pill-badge {
  background: rgba(var(--accent-rgb) / 0.2);
  color: rgb(var(--accent-rgb));
}
.qw-pill-badge:has(.qw-pill-checkbox) {
  gap: 4px;
  padding: 0 6px;
  width: auto;
  min-width: 24px;
}
.qw-pill-checkbox {
  display: block;
  flex-shrink: 0;
}
.qw-pill-letter {
  display: inline-block;
  line-height: 1;
}
.qw-pill-text {
  font-size: calc(var(--app-font-size) - 2px);
  color: inherit;
  transition: color 120ms ease;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.qw-pill.sel .qw-pill-text {
  color: inherit;
}
.qw-inline-code {
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel-bg-active);
  color: inherit;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Other button + input — matches .qw-pill rounded-rectangle style.
   Spacing from preceding pills is handled by `.qw-pills` flex `gap`,
   since this node is a sibling pill inside that container. Adding
   margin-top here would compound with the gap and produce a visibly
   larger space above this row than between regular pills. */
.qw-other-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  width: 100%;
  text-align: start;
  font-size: calc(var(--app-font-size) - 2px);
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px dashed var(--panel-border);
  background: var(--panel-bg);
  font-family: inherit;
  outline: none;
}
.qw-other-btn:hover {
  background: var(--panel-bg-hover);
  border-color: currentColor;
}
.qw-other-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb));
  outline-offset: 2px;
}
.qw-other-btn:active {
  transform: scale(0.985);
}
.qw-other-icon {
  color: inherit;
  flex-shrink: 0;
}
.qw-other-input-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: qw-fade-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.qw-other-input-wrap:focus-within {
  border-color: rgb(var(--accent-rgb));
}
/* Round 6 architectural pivot — when the user opens the Custom-answer
   textarea on mobile, React portals the ENTIRE .qw-glass (toprow + body +
   slots, including the open textarea) to document.body and renders it as a
   bottom sheet via this rule. Round 5 portaled only the inner wrap, which
   visually divorced the textbox from its question — the user saw an empty
   translucent QW above the keyboard and a lone textbox below it. Round 6
   keeps the question, pills, and textbox anchored together above the
   keyboard.

   position: fixed; bottom: 0 escapes every ancestor containing-block +
   overflow chain (messages scrollport, panel transforms, glass backdrop-
   filter). The layout viewport (shrunk by interactive-widget=resizes-content
   in renderer/index.html) pins this above the keyboard with no sticky-rule
   dependency. z:1000 sits above every in-app surface (sidebars, etc.);
   modals that need to layer above the sheet route through their own
   higher-z portals.

   max-height: 85vh + overflow-y: auto means a long question with many pills
   still fits — the sheet scrolls internally rather than spilling above the
   viewport top. border-radius is top-only (sheet sits flush with the
   viewport bottom), padding-bottom carries env(safe-area-inset-bottom) for
   iPhone notch / home indicator.

   Lives outside any @media block — React gates the `--portal` modifier
   class on a (max-width: 767px) matchMedia listener in QuestionWidget.tsx
   (`isMobilePortal` state) AND on whether the active slot's Custom-answer
   textarea is open (`currentOtherShown`), so the styles only apply when
   both conditions hold. See
   .claude/memory/postmortems/qw-mobile-and-layout-postmortem.md § Section B
   Round 6 for the full rationale. */
.qw-glass--portal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 14px 14px 0 0;
  border-bottom: none;
  /* Solid background so the sheet has a defined visual identity when it sits
     above the 50% backdrop dimmer. Without this the sheet inherits
     .qw-glass's translucent --panel-bg (e.g. rgba(255,255,255,0.03) on the
     default dark theme), which combines with the dimmer to read as "the
     sheet and the dimmer are one continuous dark area" — the user-visible
     symptom was the QW looking "weirdly transparent" the moment Custom
     Answer opened. --color-surface-200 is a solid value in every theme so
     the sheet remains opaque regardless of theme + dimmer combination.
     Round 10 (2026-05-30): moved this + the inline mobile .qw-glass from
     --color-surface-100 (#18181b — read as near-black on the force-locked
     dark theme) to --color-surface-200 (#27272a — a clear gray matching the
     desktop card). Still a solid token; the two MUST stay equal (no bg jump
     when Custom answer opens — Round 9). See postmortem § Section I. */
  background: var(--color-surface-200);
  background-image: none;
  /* Kill backdrop-filter on the portal sheet. The base .qw-glass applies
     `backdrop-filter: blur(16px)` for the glassmorphism look. When that same
     element is portaled to document.body as this `position: fixed` bottom
     sheet — dynamically inserted and transform-animated by the slide-up
     keyframe — Chromium's compositor (Android Chrome, the platform WebView)
     hits a bug where the backdrop-filtered layer samples the page behind it
     instead of compositing over the sheet's own opaque background, so the
     chat shows straight through and the sheet reads as transparent. The
     sheet already has a solid --color-surface-200 fill and gains nothing
     from the blur (blur over an opaque surface is a visual no-op), so
     unsetting it here is harmless on a correct browser and the fix on the
     buggy path. See postmortem qw-mobile-and-layout-postmortem.md
     § Section G Round 7. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* env(safe-area-inset-bottom) handles iPhone notch / home indicator. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-sheet);
  animation: qw-sheet-slide-up 200ms cubic-bezier(0.2, 0, 0, 1);
}
/* Backdrop dimmer behind the bottom sheet — sits under the sheet (z:999)
   and over everything else. pointer-events: none so taps fall through to
   whatever sits below — the sheet itself catches the visible-area taps,
   the rest of the page stays interactive enough that programmatic focus
   transitions don't trip the dimmer. */
body.qw-mobile-portal-active::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-qw-sheet-backdrop);
  pointer-events: none;
}
/* Hide the SessionPanel composer (`<div data-amc-composer />`) while the QW
   bottom sheet is up. Both the sheet and the composer sit at the visible
   bottom of the layout viewport when the soft keyboard is up; without this
   rule the user sees TWO stacked text inputs (the QW "Type your answer..."
   textarea and the SessionPanel "Answer the question..." composer). The
   body class is toggled by QuestionWidget.tsx's `portalActive` effect via
   `acquireQwMobilePortalActive`. */
body.qw-mobile-portal-active [data-amc-composer] {
  display: none;
}
@keyframes qw-sheet-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes qw-fade-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.qw-other-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: calc(var(--app-font-size) - 2px);
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  resize: none;
  overflow-y: auto;
  max-height: 200px;
  /* Without these, textarea `wrap="soft"` only breaks at whitespace, so a pasted URL stays single-line. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.qw-other-input::-moz-placeholder {
  color: inherit;
}
.qw-other-input::placeholder {
  color: inherit;
}
/* Step counter readout — no chrome, styled as a label so it doesn't read as a
   clickable pill next to the nav arrows. Current step gets accent emphasis. */
.qw-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 0 4px;
  font-size: 20px;
  font-weight: 400;
  color: inherit;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.qw-counter-current {
  color: inherit;
  transition: color 0.2s ease;
}
.qw-counter[data-current-answered='true'] .qw-counter-current {
  color: rgb(var(--accent-rgb));
}
.qw-counter-sep {
  opacity: 0.5;
  margin: 0 1px;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}
.qw-counter-total {
  transition: color 0.2s ease;
}
.qw-counter[data-all-answered='true'] .qw-counter-total {
  color: rgb(var(--accent-rgb));
}
.qw-mode-seg {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
/* Sliding active pill — transforms between the two segments. Width is
   calc(50% - 2px) so translateX(100%) lands it flush with the right padding. */
.qw-mode-seg::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  background: rgba(var(--accent-rgb) / 0.18);
  border-radius: 4px;
  transform: translateX(0);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}
.qw-mode-seg[data-mode='multi']::before {
  transform: translateX(100%);
}
/* Short vertical hairline between segments — resting-state cue that this is
   a two-option control even before the pill animates. */
.qw-mode-seg::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: var(--panel-border);
  pointer-events: none;
  z-index: 0;
}
.qw-mode-seg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  background: transparent;
  border: none;
  padding: 2px 12px;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  transition: color 120ms ease;
}
.qw-mode-seg-btn:hover:not(.active) {
  color: inherit;
}
.qw-mode-seg-btn:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb));
  outline-offset: 2px;
}
.qw-mode-seg-btn.active {
  color: rgb(var(--accent-rgb));
}
@media (prefers-reduced-motion: reduce) {
  .qw-mode-seg::before {
    transition: none;
  }
}
.qw-mode-seg-icon {
  flex-shrink: 0;
  color: currentColor;
  width: 18px;
  height: 18px;
}
.qw-mode-seg-label {
  display: none;
}
/* Nav arrows (icon-only, in top row) */
.qw-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    opacity 0.12s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  font-family: inherit;
}
.qw-nav-arrow svg {
  width: 18px;
  height: 18px;
}
.qw-nav-arrow:hover {
  background: var(--panel-bg-hover);
  color: inherit;
  border-color: currentColor;
}
.qw-nav-arrow:active {
  transform: scale(0.92);
}
.qw-nav-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.qw-nav-arrow:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb));
  outline-offset: 2px;
}
/* Skipped-behind indicator: pulsing amber dot at the top-right of the back
   arrow when earlier questions are unanswered. Quiet enough to fade into
   peripheral vision; animated enough to nudge the eye when the user lands
   on the last question without answering Q2 first. */
.qw-nav-arrow[data-has-skipped-behind='true'] {
  position: relative;
}
.qw-nav-arrow[data-has-skipped-behind='true']::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow:
    0 0 0 2px var(--panel-bg),
    0 0 8px rgba(245, 158, 11, 0.55);
  animation: qw-nav-skipped-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qw-nav-skipped-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qw-nav-arrow[data-has-skipped-behind='true']::after {
    animation: none;
  }
}
/* Send button */
.qw-send {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb) / 0.55);
  background: transparent;
  color: rgb(var(--accent-rgb));
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.qw-send:hover {
  background: rgba(var(--accent-rgb) / 0.1);
  transform: translateY(-1px);
}
.qw-send:active {
  transform: scale(0.96) translateY(0);
}
.qw-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qw-send:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb));
  outline-offset: 2px;
}
/* Gradient becomes the 2px border via padding-box+border-box clip — one rounded rect, can't misalign.
   THEME-COMPLIANCE: every stop must derive from --accent-rgb (or a theme-neutral
   white/black/transparent). A hardcoded hue looks fine only on the default (indigo)
   accent and renders off-theme on every other accent (the 2026-06-22 two-tone bug);
   the rotating light glint below is neutral white so it reads as "shine" on any accent.
   Locked by tests/unit/lint/qw-send-theme-compliance.test.ts. */
.qw-send.ready {
  background:
    linear-gradient(rgb(var(--accent-rgb)), rgb(var(--accent-rgb))) padding-box,
    conic-gradient(
        from var(--qw-send-angle),
        rgb(var(--accent-rgb)),
        rgb(255 255 255 / 0.55),
        rgb(var(--accent-rgb) / 0.5),
        rgb(var(--accent-rgb))
      )
      border-box;
  color: white;
  border: 2px solid transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  animation: qw-send-border-spin 3s linear infinite;
}
/* Shimmer sweep: narrow white glint translates across the button face via
   transform only (GPU-composited, no paint). Clipped by overflow: hidden. */
.qw-send.ready::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: qw-send-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.qw-send.ready:hover {
  background: rgb(var(--accent-rgb));
  opacity: 0.9;
  transform: none;
}
.qw-send.ready:active {
  transform: none;
}
@keyframes qw-send-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Wrapper holds the hover/active :has() transform; gradient border lives on .qw-send.ready. */
.qw-send-wrap {
  position: relative;
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.qw-send-wrap.ready:has(.qw-send:hover) {
  transform: translateY(-1px);
}
.qw-send-wrap.ready:has(.qw-send:active) {
  transform: scale(0.96);
}
@property --qw-send-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes qw-send-border-spin {
  to {
    --qw-send-angle: 360deg;
  }
}
/* Reduced motion / Low Power Mode: stop the infinite border spin (a continuous
   repaint — the conic gradient re-rasterizes every frame as --qw-send-angle
   animates) and fall back to a static accent border. The opaque border-color
   paints over the frozen conic border-box layer, so the ready state still reads
   as an accent ring — just still. Colors stay accent-derived per
   qw-send-theme-compliance.test.ts; gated by low-power-css.test.ts. */
@media (prefers-reduced-motion: reduce) {
  .qw-send.ready {
    animation: none;
    border-color: rgb(var(--accent-rgb));
  }
}
html.low-power .qw-send.ready,
html.software-render .qw-send.ready {
  animation: none;
  border-color: rgb(var(--accent-rgb));
}
/* The nav arrow's skipped-questions dot pulses forever while present — same
   kill-set membership as every decorative infinite loop (low-power contract
   checklist: kill under BOTH degradation classes; reduced-motion already
   covers it at the rule's own @media block). */
html.low-power .qw-nav-arrow[data-has-skipped-behind='true']::after,
html.software-render .qw-nav-arrow[data-has-skipped-behind='true']::after {
  animation: none;
}
.qw-send.nudge {
  animation: qw-send-nudge 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes qw-send-nudge {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.18);
  }
  60% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}
/* ============================================================
   Raised chrome — opt-out via Settings → Questions → "Raised 3D buttons"
   (`qwRaisedChromeEnabled`, default on; QuestionWidget.tsx adds the `raised`
   class to `.qw-glass`). Mirrors the app's filled-button treatment
   `.amc-btn-raised`: a glossy top sheen + a layered inset highlight and an
   outer drop shadow, intensifying on hover and pressing in on :active. Applied
   to the option pills, the Custom-answer button, the letter badges, the Send
   key and the card. Pure paint — no layout/behavior change; the white-top /
   dark-bottom overlays read in every theme (the same trick the buttons use).
   "Matched" depth = the exact `.amc-btn-raised` shadow values.
   ============================================================ */
.qw-glass.raised {
  box-shadow:
    0 12px 40px -8px rgb(0 0 0 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.qw-glass.raised:focus,
.qw-glass.raised:focus-within {
  box-shadow:
    0 12px 40px -8px rgb(0 0 0 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 0 0 2px rgba(var(--accent-rgb) / 0.2);
}
/* Big option boxes — "just lifted": no face gloss (the gradient read too strong
   on the wide stacked boxes), only a clean drop-shadow float + a faint top edge.
   The glossy letter badges below are intentionally left untouched. */
.qw-glass.raised .qw-pill,
.qw-glass.raised .qw-other-btn {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    0 4px 10px -3px rgb(0 0 0 / 0.34),
    0 2px 4px -2px rgb(0 0 0 / 0.24);
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    box-shadow 0.15s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.qw-glass.raised .qw-pill:hover,
.qw-glass.raised .qw-other-btn:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 7px 16px -3px rgb(0 0 0 / 0.44),
    0 3px 6px -2px rgb(0 0 0 / 0.3);
}
.qw-glass.raised .qw-pill:active,
.qw-glass.raised .qw-other-btn:active {
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 0.32),
    inset 0 1px 0 rgb(255 255 255 / 0.1);
}
/* Selected box keeps its accent fill/border/glow (base `.qw-pill.sel`) + the
   same lift as the other boxes — no sheen, matching the de-glossed boxes.
   Ordered after the hover/active rules so a selected box stays visibly selected. */
.qw-glass.raised .qw-pill.sel {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    0 4px 10px -3px rgb(0 0 0 / 0.34),
    0 2px 4px -2px rgb(0 0 0 / 0.24),
    0 0 12px rgba(var(--accent-rgb) / 0.22);
}
/* Letter badge reads as a pressed-in chip. */
.qw-glass.raised .qw-pill-badge {
  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.1), rgb(0 0 0 / 0.14));
  background-clip: padding-box; /* keep gloss off the rounded edge — see .amc-btn-raised (gradient-bleed fix) */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    inset 0 -1px 1px rgb(0 0 0 / 0.25),
    0 1px 2px rgb(0 0 0 / 0.3);
}
/* Send key — idle (no answer yet) gets the full raised chrome: a faint accent
   tint so the sheen reads, the gloss gradient, inset highlights + the lift.
   Tinted (not solid) so the .ready state still pops to solid accent + the
   spinning border once an option is picked. No visible outline in raised mode —
   the shape comes from the gloss + drop-shadow, matching the app's filled
   `.amc-btn-raised` buttons (which carry no border), so the base `.qw-send`
   1px accent border is neutralized to transparent here. Flat mode (raised off)
   KEEPS the base outline on purpose — that mode is a bordered aesthetic (see
   `.qw-pill`). COLOR-ONLY override: never set border/border-width — `.ready`
   relies on its own `2px solid transparent` + conic border-box clip, left
   untouched (the lit-up "all answered" glow stays). */
.qw-glass.raised .qw-send {
  border-color: transparent;
  background-color: rgb(var(--accent-rgb) / 0.16);
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.18),
    rgb(255 255 255 / 0) 45%,
    rgb(0 0 0 / 0.12)
  );
  background-clip: padding-box; /* keep gloss off the rounded edge — see .amc-btn-raised (gradient-bleed fix) */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    inset 0 -1px 1px rgb(0 0 0 / 0.18),
    0 5px 12px -2px rgb(0 0 0 / 0.4),
    0 2px 4px -1px rgb(0 0 0 / 0.3);
}
/* Send key — ready (option picked): the MAX gloss. The sheen is layered OVER the
   solid accent fill (both padding-box) with the spinning conic kept as the
   border-box layer, so the gloss is added WITHOUT erasing the animated border
   (never use `background-image` here — it would wipe the conic). Inset highlights
   + lift via box-shadow; border / animation / overflow / isolation + the shimmer
   `::before` stay inherited from the base `.qw-send.ready`. */
.qw-glass.raised .qw-send.ready {
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 52%, rgb(0 0 0 / 0.42))
      padding-box,
    linear-gradient(rgb(var(--accent-rgb)), rgb(var(--accent-rgb))) padding-box,
    conic-gradient(
        from var(--qw-send-angle),
        rgb(var(--accent-rgb)),
        rgb(255 255 255 / 0.85),
        rgb(var(--accent-rgb)),
        rgb(var(--accent-rgb))
      )
      border-box;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    inset 0 -1px 1px rgb(0 0 0 / 0.3),
    0 8px 18px -3px rgb(0 0 0 / 0.46),
    0 3px 6px -2px rgb(0 0 0 / 0.34);
}
/* Disabled Send drops the chrome entirely (flat), matching `.amc-btn-raised:disabled`. */
.qw-glass.raised .qw-send:disabled {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
/* ─── QuestionWidget — mobile (<768px) compact + touch-friendly ─── */
/* below-md: 767px = Tailwind md breakpoint (768px) minus 1px (F336) */
@media (max-width: 767px) {
  .qw-glass {
    /* No gap above (the message bubble's bottom-margin already provides separation
       from the previous message); 6px below for a small breath before the next
       message bubble. User-requested 2026-04-27. */
    margin: 0 0 6px;
    /* Match the Custom-answer bottom sheet (.qw-glass--portal) EXACTLY so that
       opening Custom answer — which swaps the inline widget for the portaled
       sheet — produces NO visible background change. The sheet is contract-
       locked to a SOLID token: it cannot be translucent because a backdrop-
       filtered position:fixed portal mis-composites on Android Chrome (the chat
       bleeds through — postmortem Round 7). So the INLINE widget moves to the
       same solid token instead. `background:` shorthand already resets
       background-image to none. DO NOT delete this as "redundant with the
       .qw-glass--portal rule": that modifier class only applies once the sheet
       is open; THIS rule is what makes the inline (pre-tap) state match it.
       Mobile-only — desktop keeps the glassmorphism look (it has no portal
       sheet to match). The token MUST equal the .qw-glass--portal background.
       Round 10, 2026-05-30: moved both from --color-surface-100 (#18181b,
       near-black on the force-locked dark theme — the user saw "black") to
       --color-surface-200 (#27272a, a clear gray matching the desktop card).
       See postmortem § Section I. */
    background: var(--color-surface-200);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Mobile-only compact padding/gap. Mobile inherits the base rule's
     `position: relative; z-index: 2;` for paint-order safety and the
     JS-driven transform pin (see base .qw-toprow rule for the full
     stacking-context story and the sticky-retirement history). */
  .qw-toprow {
    padding: 4px 6px;
    gap: 6px;
    /* Round 10 (2026-05-30): the body (.qw-glass) moved to the gray
       --color-surface-200; without this the header would stay the base rule's
       near-black --color-surface-100 floor and read as a dark band on a gray
       card. Override the background-COLOR only (longhand) so the base rule's
       `background-image: linear-gradient(var(--panel-bg), var(--panel-bg))`
       theme tint + the divider border/shadow still cascade in — the header
       stays a touch lighter than the body, as on desktop. surface-200 is a
       solid token on every theme, so the pin-floor opacity invariant (base
       .qw-toprow comment) still holds. The base rule keeps surface-100 for
       desktop (qw-toprow-opaque-background test reads the base rule). */
    background-color: var(--color-surface-200);
  }
  .qw-toprow-nav {
    flex-wrap: nowrap;
    gap: 4px;
    flex-shrink: 0;
    min-width: 0;
  }
  .qw-toprow-actions {
    gap: 4px;
    flex-shrink: 0;
  }
  .qw-mode-seg {
    flex: 0 0 auto;
  }
  .qw-mode-seg-btn {
    flex: 0 0 auto;
    padding: 2px 10px;
    font-size: 13px;
  }
  .qw-nav-arrow {
    flex-shrink: 0;
  }
  .qw-dismiss {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .qw-help-wrap {
    display: none;
  }
  .qw-send {
    padding: 0 12px;
    font-size: 14px;
    flex-shrink: 0;
  }
  .qw-body {
    padding: 10px 12px 12px;
  }
  .qw-question {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .qw-pills {
    gap: 6px;
  }
  .qw-pill {
    padding: 12px 14px;
    min-height: 48px;
    align-items: center;
  }
  .qw-pill-badge {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .qw-pill-text {
    font-size: 14px;
  }
  .qw-other-btn {
    padding: 12px 14px;
    min-height: 48px;
    font-size: 14px;
  }
  .qw-other-input-wrap {
    padding: 12px 14px;
  }
  .qw-other-input {
    font-size: 14px;
    /* Defense-in-depth: even if the portal layer is somehow defeated
       (old browser quirk, future regression), scroll-margin-bottom: 40vh
       gives the browser's native focus-into-view scroll enough headroom
       to clear a typical mobile keyboard. */
    scroll-margin-bottom: 40vh;
  }
  .qw-help-tooltip {
    width: min(260px, calc(100vw - 32px));
  }
  .qw-restore-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 36px;
  }

  /* iOS auto-zoom floor — mobile Safari zooms the viewport whenever a focused
     form control's font-size is below 16px. The shared control tokens
     (INPUT_CLASS / COMPACT_SELECT / the chat-composer textarea) are text-sm
     (14px) by design on desktop, so without this rule every tap on a composer,
     settings field, or filter <select> on a phone triggers a disorienting
     zoom-then-pinch-reset. Forcing >=16px ONLY at the mobile breakpoint fixes
     it app-wide in one place (865+ INPUT_CLASS call-sites) without enlarging any
     desktop field. Keep `select` here too — a focused native select zooms the
     same way. This is the single highest-leverage mobile fix in the app. */
  input,
  textarea,
  select {
    font-size: 16px;
  }
}
/* ──────────────────────────────────────────────────────────────
   Low Power Mode overrides — activated by .low-power on <html>
   Disables GPU-expensive effects for integrated GPUs / weak laptops.

   The same rules also apply under .software-render — set by main.tsx when
   the main process detects Chromium is software-rasterizing the renderer
   (GPU disabled, auto-disabled after consecutive unclean exits, or
   gpu_compositing reporting `disabled_software`). Under 4K + CPU raster,
   `backdrop-filter: blur(...)` allocates large Skia bitmaps that OOM
   partition_alloc and crash viz::SoftwareRenderer. The two classes share a
   ruleset because the desired effect is identical: collapse expensive
   compositor work to cheap solid surfaces. See
   .claude/memory/postmortems/sentry-software-render-cascade-postmortem.md.
   ────────────────────────────────────────────────────────────── */
/* [perf] Pause EVERY running CSS animation while the window is actually hidden
   (minimized / occluded / on another virtual desktop). TWO drivers toggle
   `html.app-hidden`: main.tsx's Page-Visibility listener (the main window), and
   the QUICK_LAUNCH_HIDDEN/SHOWN push listeners in QuickLaunchModal (the Quick
   Launch window — its `backgroundThrottling: false` pins the visibility API to
   'visible', so only main's pushes can drive it; entrance contract I14). The
   compositor then does no work for frames no one can see: decorative loops
   (shimmer, the qw-send gradient spin, status pulses, ambient drift) AND
   functional spinners alike. Pausing the latter is safe — nothing is visible and
   they resume the instant the window is shown. The main window gates on
   `document.hidden`, NOT blur, so a visible-but-unfocused window
   (e.g. on a second monitor) keeps animating and never shows a frozen spinner. */
html.app-hidden *,
html.app-hidden *::before,
html.app-hidden *::after {
  animation-play-state: paused !important;
}
html.low-power *,
html.low-power *::before,
html.low-power *::after,
html.software-render *,
html.software-render *::before,
html.software-render *::after {
  /* Kill backdrop-filter entirely — biggest GPU tax */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* With backdrop-filter force-disabled, the translucent Tasks v2 glass FLOATING
   surfaces (panel / card / menu) would bleed — give them the same opaque floor
   the mobile breakpoint uses so popups stay readable. Rows/chips are exempt:
   they sit ON an opaque panel, not over app content.
   See overlay-readable-background-contract.md. */
html.low-power .tv2-glass-panel,
html.low-power .tv2-glass-card,
html.low-power .tv2-glass-menu,
html.software-render .tv2-glass-panel,
html.software-render .tv2-glass-card,
html.software-render .tv2-glass-menu {
  background-color: var(--tv2-glass-panel-floor, #18181b);
}
/* Visual-theme ambient blobs (Glassmorphism + Aurora) keep their soft static
   gradient but drop the expensive `filter: blur(100px)` AND the infinite
   glass-drift / aurora-drift animation. These pseudo-elements use plain `filter`
   (not backdrop-filter), so the blanket rule above misses them — this is the
   single biggest always-on GPU cost Low Power Mode otherwise leaves running.
   Keeping the radial-gradient (it already fades to `transparent 70%`) means the
   background stays a pretty, still glow at ~zero continuous GPU cost — "more
   effective, still pretty." Scoped to the blob pseudo-elements only; non-blob
   themes define no #root / #kms-window-root ::before/::after, so this is a no-op
   there. */
html.low-power #root::before,
html.low-power #root::after,
html.low-power #kms-window-root::before,
html.low-power #kms-window-root::after,
html.software-render #root::before,
html.software-render #root::after,
html.software-render #kms-window-root::before,
html.software-render #kms-window-root::after {
  filter: none !important;
  animation: none !important;
}
html.low-power .animate-spin,
html.low-power .animate-pulse,
html.low-power .animate-bounce,
html.software-render .animate-spin,
html.software-render .animate-pulse,
html.software-render .animate-bounce {
  /* Keep animations but slow them — less GPU compositing churn */
  animation-duration: 2s !important;
}
html.low-power .animate-shimmer,
html.software-render .animate-shimmer {
  /* Shimmer is the highest-density continuous animation during a cold load
     (DashboardSkeleton alone paints ~8 concurrent surfaces), and on
     software-render it is CPU-rasterized gradient repaint. Slow its sweep harder
     than the glyph loops above to cut that churn on the exact weak GPUs these
     modes target. (F037) */
  animation-duration: 3s !important;
}
/* ── GPU-compositor-isolated spinner ───────────────────────────────────
   Promotes the spinner to its own GPU compositor layer so the rotate()
   animation runs independent of main-thread layout/paint. containment
   isolates it from parent recalculations; translateZ(0) is the fallback
   layer promotion for older Chromium. This is the fix for spinners that
   freeze under CPU load — with its own layer the compositor keeps spinning
   even when the main thread is fully blocked. */
.amc-spinner {
  will-change: transform;
  contain: layout style paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* The spin keyframe for .amc-spinner MUST carry an explicit `from` (rotate 0).
   Tailwind's stock `@keyframes spin` has only a `to { rotate(360deg) }`, so its
   implicit 0% keyframe inherits the element's base transform — which above is
   `translateZ(0)`. Interpolating translateZ(0) -> rotate(360deg) mixes two
   different transform-function types, so the browser matrix-interpolates between
   two effectively-identity matrices and the rotation nets to ZERO at every frame:
   the spinner renders but never turns whenever the animation is NOT GPU-composited
   (mobile battery-saver, software raster). Desktop hid it because the GPU thread
   runs the rotate directly. An explicit `from: rotate(0deg)` keeps from/to in the
   same transform-function family so interpolation is per-component (a real spin) on
   the main-thread path too. Rotate-ONLY on purpose: under html.software-render the
   animated transform then matches the stock spin, so the escape hatch below stays
   fully defanged (no translateZ re-promotes a layer). GPU promotion on the normal
   path is unchanged — it rides `will-change: transform` above.
   See tests/unit/lint/spinner-gpu-isolation.test.ts and
   .claude/memory/postmortems/spinner-translatez-freeze-postmortem.md. */
@keyframes amc-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.amc-spinner.animate-spin {
  animation-name: amc-spin;
}
/* software-render: fully defang GPU promotion so the escape hatch works
   (a flaky GPU driver that can't handle promoted layers must be able to
   escape them entirely — the existing slowdown + backdrop-filter kill are
   not enough). */
html.software-render .amc-spinner {
  will-change: auto;
  contain: none;
  transform: none;
}
/* Disable decorative shadows on hover states (MessageBubble, cards, etc.) */
html.low-power *:hover,
html.software-render *:hover {
  box-shadow: none !important;
}
/* Neutralize the decorative hover-lift / press transforms that promote a row or
   button to its OWN GPU compositing layer — on a flaky GPU driver that promoted
   layer renders SHEARED (skewed-parallelogram highlight + triangular wedge, the
   "cracked screen" artifact; user report 2026-06). With backdrop-filter already
   off (above), collapsing these transforms removes the LAST layer-promotion
   trigger, so safe mode is a COMPLETE escape hatch for the whole class. Scoped to
   the two decorative-transform marker surfaces — rows carry `.amc-lift`, buttons
   carry the Motion & Polish `.amc-pol-btn` — NOT a blanket `* { transform: none }`,
   which would wreck functional centering transforms (`-translate-y-1/2`) and
   slide-in animations. The transient `active:scale` press elsewhere is left as-is
   (sub-second, not a persistent-artifact trigger). `!important` beats both the
   Tailwind utility and the un-!important Motion & Polish hover-lift rule.
   render-safe-mode-contract.md. */
html.low-power .amc-lift:hover,
html.low-power .amc-lift:active,
html.low-power .amc-pol-btn:hover,
html.low-power .amc-pol-btn:active,
html.software-render .amc-lift:hover,
html.software-render .amc-lift:active,
html.software-render .amc-pol-btn:hover,
html.software-render .amc-pol-btn:active {
  transform: none !important;
}
/* Kill transitions under low-power / software-render — `transition: none`, NOT a
   non-zero universal duration. A non-zero `transition-duration` on `*` leaves
   `transition-property` at its CSS-initial `all`, so EVERY element becomes
   `transition: all <dur>` and every React-driven style change app-wide animates +
   repaints — a jank storm that scales with DOM size (the 2026-06-29 "Low Power Mode
   makes the app unusable" report; the previous value here was `0.05s`). `none` fully
   short-circuits the transition machinery (truly instant, the stated intent) and is
   strictly better for the prefers-reduced-motion users this class also serves.
   Locked by low-power-css.test.ts. */
html.low-power *,
html.software-render * {
  transition: none !important;
}
/* ─── Markdown table — responsive cards via container query ─── */
/* Wide bubble: normal table (existing behavior in AgentMarkdown.tsx).
   Narrow bubble (e.g. phone, narrow chat panel): each <tr> becomes a card
   with <td> rendered as a label/value grid. The label comes from the
   data-label attribute injected by markdownComponents.td based on the
   column's <thead> text. Triggered on container width (the bubble itself),
   not viewport, so any narrow context gets cards regardless of screen size.
   Chromium 122 in Electron 39 supports container queries natively. */
.amc-md-table {
  container-type: inline-size;
  container-name: amctable;
}
@container amctable (max-width: 480px) {
  .amc-md-table > table {
    display: block;
    border: none;
    width: 100%;
  }
  .amc-md-table > table > thead {
    /* Headers are duplicated as data-label on each <td> in cards mode. */
    display: none;
  }
  .amc-md-table > table > tbody {
    display: block;
  }
  .amc-md-table > table > tbody > tr {
    display: block;
    background: rgb(var(--color-surface-200-rgb) / 0.5);
    border: 1px solid var(--color-surface-300);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
  }
  .amc-md-table > table > tbody > tr:last-child {
    margin-bottom: 0;
  }
  .amc-md-table > table > tbody > tr > td {
    display: grid;
    grid-template-columns: minmax(72px, 30%) 1fr;
    -moz-column-gap: 10px;
         column-gap: 10px;
    padding: 4px 0;
    border: none;
    border-bottom: 1px solid rgb(var(--color-surface-300-rgb) / 0.5);
    max-width: none;
    align-items: baseline;
  }
  .amc-md-table > table > tbody > tr > td:last-child {
    border-bottom: none;
  }
  .amc-md-table > table > tbody > tr > td::before {
    content: attr(data-label);
    color: var(--color-surface-500);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 2px;
    /* Wrap long header text rather than overflow into the value column. */
    overflow-wrap: anywhere;
  }
  /* Empty data-label (rare — defensive): hide the label column so the value
     occupies the full row instead of leaving a blank gutter. */
  .amc-md-table > table > tbody > tr > td[data-label=''] {
    grid-template-columns: 1fr;
  }
  .amc-md-table > table > tbody > tr > td[data-label='']::before {
    display: none;
  }
}
/* Mobile top-nav (MobileTabBar): the five controls now sit in equal-width slots
   (NAV_SLOT_CLASS), so each is capped at 1/5 of the width and nothing can ever be
   pushed off-screen — the old `.amc-mnav-collapsed .amc-mnl` overflow-fold (a live
   width measurement that folded the "Inbox"/"Projects" words to icons) is retired.
   The tabs are icon-only for even spacing and keep their aria-labels, so they stay
   accessible. Even layout is proven in tests/e2e/ui/mobile-tabbar-fit.spec.ts. */
/* ORDER DEPENDENCY: these global keyframes use GENERIC, unprefixed names (fadeIn, tooltip-in,
   text-flow) — unlike the prefixed amc-rise / glass-drift / aurora-drift elsewhere in this file.
   The renderer lazily co-loads third-party stylesheets into the SAME document (@excalidraw,
   @xyflow/react, leaflet, react-day-picker). Because lazy-panel CSS injects AFTER this file, a
   vendor (or plugin) that ships a global @keyframes fadeIn with a different body would override
   these document-wide the moment that panel opens. Prefer prefixing any NEW global keyframe
   (amc-*) rather than a generic name. */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tooltip-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
/* One-shot fade-in for portaled floating overlays (right-click menus, submenu
   flyouts, the Select dropdown listbox) so they SETTLE in instead of popping.
   Reuses the opacity-only `fadeIn` keyframe ON PURPOSE: a viewport clamp
   (`containToViewport` / `clampToViewport`) measures getBoundingClientRect in its
   ref callback BEFORE paint — a transform/scale entrance would shift that measured
   rect and mis-position the menu, but an opacity fade leaves geometry untouched, so
   the clamp always positions correctly. One-shot + opacity-only ⇒ zero idle GPU
   cost (it is NOT a continuous animation like a spinner/pulse); low-power collapses
   it via the global transition rule and reduced-motion drops it below. Locked by
   tests/unit/lint/buttery-microinteractions-perf.test.ts. */
.amc-overlay-in {
  animation: fadeIn 120ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .amc-overlay-in {
    animation: none;
  }
}
/* One-shot fade-in for an element SWAPPED into an existing control — the Button
   loading spinner replacing the left icon. Same opacity-only fadeIn reuse (and
   zero-idle-cost reasoning) as .amc-overlay-in above; it lives on a WRAPPER
   span, never on the `animate-spin` element itself (a Tailwind animate-*
   keyframe owns the whole transform/animation slot — see
   spinner-transform-conflict). `both` fill so the first frame is transparent,
   not a flash. */
.amc-swap-in {
  animation: fadeIn 120ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .amc-swap-in {
    animation: none;
  }
}
html.low-power .amc-swap-in {
  animation: none;
}
/* One-shot scale pop for a small inline value that just CHANGED (a count badge).
   Applied by <PopOnChange> (components/ui/PopOnChange.tsx), which remounts the
   span with this class on each value change and NEVER applies it on first
   mount — so the pop only ever confirms a change the user can act on. Finite +
   `both` fill ⇒ idles at zero; inline-block because transform needs a box on an
   inline span. */
@keyframes amc-badge-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
.amc-badge-pop {
  display: inline-block;
  animation: amc-badge-pop 180ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .amc-badge-pop {
    animation: none;
  }
}
html.low-power .amc-badge-pop {
  animation: none;
}
/* Floating-menu "lift" — the ONE shared elevation for menus / dropdowns / popovers
   that float over content. Draws the theme-aware --overlay-elevation (a definition
   ring + a drop shadow; see :root / .dark) INSTEAD of a Tailwind shadow-* utility,
   so every floating menu reads as lifted off the app background on every theme and
   can't blend in. The literal fallback keeps a sensible shadow if the token is ever
   unset. Unlayered (like .amc-overlay-in) so it wins over Tailwind's layered
   shadow-* utilities. Locked by tests/unit/lint/floating-menu-elevation.test.ts. */
.amc-overlay-elevation {
  box-shadow: var(
    --overlay-elevation,
    0 0 0 1px rgb(0 0 0 / 0.08),
    0 8px 24px -6px rgb(0 0 0 / 0.4)
  );
}
/* Left-to-right text shimmer used by streaming labels (MergedTurnBubble
   header, TurnGroup CompactingIndicator, TurnActionsPill, PerRowActions,
   TurnActivityBubble). TWO stacked background layers, both clipped to the
   glyphs: a SOLID emerald base that always fully covers every letter (the
   word stays fully legible at every frame — it never dims and never drops
   out) and a lighter emerald sheen band on top that sweeps left→right once
   per 2s loop. The sheen only ADDS brightness over the solid base, so the
   letters never go dark or vanish. (The old single-layer gradient painted the
   glyphs themselves: it dipped to 0.45 opacity AND, being no-repeat, slid off
   the text mid-cycle so uncovered glyphs fell back to the transparent color
   and disappeared.) Self-contained: one `animate-text-flow` className gives
   the full gradient stack + clip-to-text + sweep keyframes. */
.animate-text-flow {
  background-image:
    linear-gradient(
      90deg,
      rgb(209 250 229 / 0) 0%,
      rgb(209 250 229 / 0) 35%,
      rgb(209 250 229 / 0.95) 50%,
      rgb(209 250 229 / 0) 65%,
      rgb(209 250 229 / 0) 100%
    ),
    linear-gradient(rgb(52 211 153), rgb(52 211 153));
  background-size:
    200% 100%,
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    200% center,
    center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-flow 2s linear infinite;
}
@keyframes text-flow {
  0% {
    background-position:
      200% center,
      center;
  }
  100% {
    background-position:
      -100% center,
      center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animate-text-flow {
    animation: none;
    color: rgb(52 211 153);
  }
}
/* Scratchpad contenteditable surface — placeholder + inline image polish.
   The placeholder is data-attribute-driven so the React tree can stay a plain
   string-prop interface (matches the `<textarea placeholder>` ergonomics it
   replaced). `:empty` is browser-native and updates on every input event. */
[data-scratchpad-editor][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: rgb(var(--color-surface-400-rgb, 161 161 170));
  pointer-events: none;
}
[data-scratchpad-editor] img {
  max-width: 100%;
  border-radius: 0.375rem;
  margin: 0.25rem 0;
  cursor: pointer;
  display: inline-block;
}
[data-scratchpad-editor] {
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* ─── Scratchpad in-place markdown styling ─────────────────────────────
   Applied when [data-scratchpad-md-on=""] is present on the editor. The
   store always sees the clean (un-styled) HTML — the syntax markers stay
   in the live DOM AND on screen, so the user always sees exactly what
   they typed. The styling engine layers rendering on top: block-level
   markers (`## `, `> `, `- `, `1. `) are wrapped in `<span data-md-syntax
   data-md-block-marker>`; inline markers (`**`, `_`, backticks, brackets)
   are wrapped in `<span data-md-syntax>`; raw link URLs are wrapped in
   `<span data-md-link-url>`. The [data-md-syntax] rule at the bottom
   dims those spans (lighter colour + normal weight/style) so the source
   is visibly de-emphasised next to the rendered text — never hidden. */
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='h1'] {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.6rem 0 0.4rem;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='h2'] {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.55rem 0 0.35rem;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='h3'] {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0.5rem 0 0.3rem;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='h4'] {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0.45rem 0 0.25rem;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='h5'],
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='h6'] {
  font-weight: 600;
  margin: 0.4rem 0 0.2rem;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='quote'] {
  display: block;
  border-left: 3px solid rgb(var(--color-surface-400-rgb, 161 161 170));
  padding: 0.05rem 0 0.05rem 0.6rem;
  margin: 0.2rem 0;
  font-style: italic;
  color: rgb(var(--color-surface-700-rgb, 63 63 70));
}
/* List items keep their literal `- ` / `1. ` prefix on screen — the
   block-marker span dims the prefix so it reads as a list marker rather
   than as body text, but stays visible. No synthetic bullet, no left
   padding: the user sees exactly what they typed. */
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='fence'],
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='code-block'] {
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  background: rgb(var(--color-surface-300-rgb, 212 212 216));
  color: rgb(var(--color-surface-900-rgb, 24 24 27));
  padding: 0.1rem 0.6rem;
  white-space: pre;
}
/* The fence lines themselves are still part of the source — dim them so
   they read as scaffolding rather than as code, but leave them on screen
   alongside the code-block lines they wrap. */
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-block='fence'] {
  color: rgb(var(--color-surface-500-rgb, 113 113 122));
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-inline='bold'] {
  font-weight: 700;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-inline='italic'] {
  font-style: italic;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-inline='code'] {
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  background: rgb(var(--color-surface-300-rgb, 212 212 216));
  color: rgb(var(--color-surface-900-rgb, 24 24 27));
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.92em;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-inline='link'] [data-md-link-label] {
  color: rgb(var(--accent-rgb, 99 102 241));
  text-decoration: underline;
}
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-inline='link'] [data-md-link-url] {
  /* The raw URL is part of the source — dim it (alongside the brackets)
     so `[label](url)` reads with the label highlighted and the URL
     de-emphasised, but the URL stays visible so the user sees exactly
     what they typed. */
  color: rgb(var(--color-surface-500-rgb, 113 113 122));
  text-decoration: none;
}
/* Dim every syntax marker (#, **, *, _, `, [, ], (, ), the leading `## ` /
   `> ` / `- ` / `1. ` prefix, the URL inside a link) so the source stays
   visible but reads as scaffolding next to the rendered text. The text
   is kept in the DOM AND on screen — the caret walks past it normally,
   `getCleanHtml` round-trips faithfully, and the user always sees the
   exact characters they typed. */
[data-scratchpad-editor][data-scratchpad-md-on=''] [data-md-syntax] {
  color: rgb(var(--color-surface-500-rgb, 113 113 122));
  font-weight: 400;
  font-style: normal;
}
/* Comfortable reading rhythm while the toggle is on. */
[data-scratchpad-editor][data-scratchpad-md-on=''] {
  line-height: 1.55;
}
/* ─── Real-conversation off-screen render culling (scroll perf) ────────────
   The real-conversation chat layout renders EVERY turn unwindowed
   (RealConversationList maps all turns — no virtualizer), so a long finished
   session keeps the whole conversation's DOM live and the browser pays
   layout+paint for all of it on each scroll frame (the ~2026-05-22 scroll-lag
   regression: the rewrite dropped VirtualMessageList's windowing).
   `content-visibility: auto` restores that windowing WITHOUT a virtualizer —
   off-screen message bodies skip their own layout+paint while the DOM node
   stays put (refs, find-in-page, and scroll math still resolve).

   Scoped to `.amc-cull-on` (set on the real-conversation list container only,
   gated by VITE_DISABLE_MESSAGE_BODY_CULL) so the legacy VirtualMessageList
   and ArchiveView paths — already windowed/measured by TanStack — never get
   it. Applied to `.amc-cull-body` = the per-message bubble body, which already
   carries `overflow-clip`; the sticky action menu, the ⋯ dropdown, and the
   image lightbox are siblings OUTSIDE this box, so the paint+layout containment
   that content-visibility implies cannot clip the menus or re-anchor the fixed
   lightbox.

   `contain-intrinsic-size: auto var(--amc-cull-h, 240px)`: `auto` makes the browser
   remember each body's last-rendered height and reuse it once the body scrolls back
   off-screen (stable scrollHeight after first paint). The length is the
   FIRST-encounter estimate for a never-yet-rendered body. By default it is `240px`
   (the var unset → byte-identical to before, for v1/v2 and v3-off). Chat v3 premeasure
   (Stage 1) seeds a per-message content-aware estimate into `--amc-cull-h` so a cold
   open reserves close to the real height up-front and the page doesn't grow above the
   read anchor (the "shove" fix) — only ever a valid `<n>px`, else unset → the 240px
   fallback (the retired chat-v3 premeasure used to seed it; attic/scroll-engines/). Kill switch:
   VITE_DISABLE_MESSAGE_BODY_CULL=1. Catastrophic escape: turn off the
   `realConversationLayoutEnabled` setting (Settings → Performance → "Real-conversation
   layout") to revert to the legacy windowed view entirely. Contract:
   .claude/memory/contracts/frontend-scroll-contract.md. */
.amc-cull-on .amc-cull-body {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--amc-cull-h, 240px);
  /* Reachability floor (2026-07-05). `contain-intrinsic-size: auto` reuses a body's
     LAST on-screen height. A body that cold-mounts SHORT, is pinned OFF-SCREEN above a
     long reply (a settled/archived session bottom-pins on entry), then GROWS while
     off-screen stays stuck at its remembered ~0 height — invisible AND contributing no
     scroll range, so the first user message became unreachable ("not on the thread, can't
     scroll up"; the since-retired v3-only reservation never protected v1). A
     ~1-line min-height means a culled body can never be remembered at ~0, so it always
     keeps a reachable height. Invisible for real >=1-line messages — it only floors the
     transient empty/loading render, and every row stays cull-eligible (perf win intact).
     Verified in a real-Chromium probe (0px/unreachable -> 21px/reachable). Contract:
     .claude/memory/contracts/frontend-scroll-contract.md. */
  min-height: 1.5em;
}
.writer-ghost-text {
  color: var(--ghost-text, #9aa0a6);
  opacity: 0.7;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.writer-ghost-tab {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 12px;
  font-family: inherit;
  font-style: normal;
  line-height: 1.6;
  border-radius: 4px;
  border: 1px solid var(--ghost-text, #9aa0a6);
  opacity: 0.6;
  vertical-align: middle;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* ════════════════════════════════════════════════════════════════════════
   Motion & Polish — Liveliness set (opt-in; the "noticeably lively" flourishes).
   App.tsx writes data-polish-interactive / -dashboard / -ambient on <html> ONLY
   when the master "Motion & Polish" switch AND that group's toggle are on
   (lib/motion-polish.ts → computePolishAttributes). Absent ⇒ these rules don't
   match ⇒ the classic flat look. Intentionally UN-LAYERED so they win over
   Tailwind's @layer utilities (e.g. a row's transition-colors), letting the
   hover transforms apply. transform/opacity + tinted shadow only (60fps); the
   reduced-motion / low-power kills at the bottom are the accessibility contract.
   ════════════════════════════════════════════════════════════════════════ */
/* ── Interactive surfaces ── */
/* Buttons (amc-pol-btn on the shared Button): hover lift + soft tinted shadow;
   the existing active:scale-[0.98] press still applies. */
html[data-polish-interactive='on'] .amc-pol-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}
html[data-polish-interactive='on'] .amc-pol-btn:not(:disabled):active {
  transform: translateY(0) scale(0.98);
}
/* ── Dashboard motion ── */
/* The Insights stat grid (amc-pol-stagger) cascades its cards in on open;
   the numbers themselves count up via the <CountUp> component (JS-gated). */
html[data-polish-dashboard='on'] .amc-pol-stagger > * {
  animation: amc-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html[data-polish-dashboard='on'] .amc-pol-stagger > *:nth-child(2) {
  animation-delay: 60ms;
}
html[data-polish-dashboard='on'] .amc-pol-stagger > *:nth-child(3) {
  animation-delay: 120ms;
}
html[data-polish-dashboard='on'] .amc-pol-stagger > *:nth-child(4) {
  animation-delay: 180ms;
}
html[data-polish-dashboard='on'] .amc-pol-stagger > *:nth-child(5) {
  animation-delay: 240ms;
}
html[data-polish-dashboard='on'] .amc-pol-stagger > *:nth-child(6) {
  animation-delay: 300ms;
}
html[data-polish-dashboard='on'] .amc-pol-stagger > *:nth-child(7) {
  animation-delay: 360ms;
}
html[data-polish-dashboard='on'] .amc-pol-stagger > *:nth-child(n + 8) {
  animation-delay: 420ms;
}
@keyframes amc-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── Ambient backgrounds ── */
/* A slow drifting accent gradient behind big welcome / empty surfaces. The host
   carries .amc-ambient; the glow is a pointer-events-none layer BELOW content
   (z-index:-1 inside an isolated stacking context). */
html[data-polish-ambient='on'] .amc-ambient {
  position: relative;
  isolation: isolate;
}
html[data-polish-ambient='on'] .amc-ambient::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 25%, rgb(var(--accent-rgb, 99 102 241) / 0.18), transparent 70%),
    radial-gradient(35% 45% at 80% 30%, rgb(103 232 249 / 0.12), transparent 70%),
    radial-gradient(45% 55% at 60% 90%, rgb(167 139 250 / 0.12), transparent 70%);
  filter: blur(36px);
  animation: amc-ambient-drift 18s ease-in-out infinite alternate;
}
/* Translate-only: a scale() on this blur(36px) layer re-rasters the whole blur
   every frame (same measured mechanism as the glass/aurora blob fix — see
   glass-blob-static.test.ts); a translate on the once-rastered layer is
   compositor-only, so the drift keeps its motion at ~zero GPU. Locked by the
   "Motion & Polish ambient drift" describe in glass-blob-static.test.ts. */
@keyframes amc-ambient-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(4%, 3%, 0);
  }
}
/* ── Accessibility + performance kills (the contract) ── */
@media (prefers-reduced-motion: reduce) {
  html[data-polish-dashboard='on'] .amc-pol-stagger > *,
  html[data-polish-ambient='on'] .amc-ambient::before {
    animation: none !important;
  }
  html[data-polish-interactive='on'] .amc-pol-btn:not(:disabled):hover {
    transform: none;
  }
}
html.low-power .amc-pol-stagger > *,
html.low-power .amc-ambient::before,
html.software-render .amc-pol-stagger > *,
html.software-render .amc-ambient::before {
  animation: none !important;
}
/* Kill the ambient glow's `filter: blur(36px)` under BOTH degradation classes.
   software-render was previously low-power-only here, so on a GPU-disabled
   machine the Motion & Polish ambient blob kept re-rastering a large Skia blur
   every frame — the same software-renderer allocation the #root blob kill above
   already prevents. Mirrors render-safe-mode-contract invariant 1: low-power and
   software-render share ONE escape hatch. */
html.low-power .amc-ambient::before,
html.software-render .amc-ambient::before {
  filter: none;
  opacity: 0.5;
}
/* ─── Mind Map node depth (glassmorphism) ──────────────────────────────────
   The node's surface + raise live HERE (not as Tailwind `bg-surface-*` / `shadow-sm`
   utilities on the box) so they derive from the EFFECTIVE mind-map theme: the canvas
   sits inside the `mindmap-root` wrapper, which carries the resolved visual-theme +
   light/dark classes, so `--color-surface-100-rgb` resolves per theme × mode and the
   node restyles automatically across all 13 themes. A mostly-opaque fill keeps labels
   readable everywhere while a hint of the backdrop shows through on the glass skins;
   the layered drop shadow + inset top sheen are mode-agnostic literals (independent of
   the chat-depth dial) so a node always reads as raised off the canvas. */
.mm-node {
  background: rgb(var(--color-surface-100-rgb, 24 24 27) / 0.9);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}
/* Live backdrop-blur is the expensive part (it allocates a compositing layer per
   node), so it is GATED: the canvas adds `mm-blur` only when the visible node count is
   small (MM_BLUR_MAX_NODES in MindMapCanvas), and a glass theme's `--panel-blur` (0 on
   the 9 non-glass themes) sets the radius. On a big map there is no backdrop-filter at
   all — the depth above still reads, and the 2000-node stress path (invariant 17) pays
   nothing. Mobile drops it entirely (GPU-bitmap cost, mirroring .qw-glass). */
.mm-blur .mm-node {
  backdrop-filter: blur(var(--panel-blur, 0px));
  -webkit-backdrop-filter: blur(var(--panel-blur, 0px));
}
@media (max-width: 640px) {
  .mm-blur .mm-node {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* ─── Mind Map node-snap glide ──────────────────────────────────────────────
   When the map reflows, persisting nodes EASE to their new layout home instead of
   teleporting. React Flow positions each node via `transform: translate()` on
   `.react-flow__node`, so a transform transition animates the move; the canvas adds
   `mm-animate-positions` only for a short window right after a reflow (and only while
   the map is small enough — shouldAnimatePositions), so it costs nothing the rest of
   the time and never touches the 2000-node stress path. `--mm-anim-dur` (set inline
   from MM_ANIM_DURATION_MS) carries the duration; the literal fallback keeps it valid
   if the property is ever missing. `:not(.dragging)` keeps the node you're actively
   dragging glued to the cursor; pan/zoom transforms the viewport (not nodes), so it is
   unaffected. New/removed nodes mount/unmount (no transition) — only movers glide.
   Killed under reduced-motion + low-power (accessibility + the perf contract),
   mirroring the .mm-blur / tv2-glass kills. */
.mm-animate-positions .react-flow__node:not(.dragging) {
  transition: transform var(--mm-anim-dur, 180ms) ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .mm-animate-positions .react-flow__node {
    transition: none;
  }
}
html.low-power .mm-animate-positions .react-flow__node {
  transition: none;
}
/* ─── Mind Map zoom controls — match the node bubble ────────────────────────
   The floating React Flow zoom widget (<Controls/> — the +/−/fit stack) adopts the
   SAME glassmorphism bubble as a node so it reads as part of the map. The container
   IS the bubble: theme-derived translucent fill + surface-200 border + rounded
   corners + the IDENTICAL layered drop shadow + inset top sheen as `.mm-node` (kept
   byte-for-byte in sync, locked by mindmap-controls-bubble-contract.test.ts). The
   three buttons go transparent so the fill/sheen show through, with a faint divider
   between them and a subtle hover tint; the icon color tracks `--color-surface-900`
   so it stays legible across all 13 themes × light/dark — exactly like node text.
   `overflow: hidden` clips the square buttons into the rounded bubble. Scoped under
   `mindmap-root` so it can never reach a React Flow instance elsewhere; the scoped
   selectors out-specify React Flow's bundled defaults, so no `!important` is needed. */
[data-ui-anchor='mindmap-root'] .react-flow__controls {
  overflow: hidden;
  border: 1px solid rgb(var(--color-surface-200-rgb, 39 39 42));
  border-radius: 0.5rem;
  background: rgb(var(--color-surface-100-rgb, 24 24 27) / 0.9);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}
[data-ui-anchor='mindmap-root'] .react-flow__controls-button {
  background: transparent;
  color: rgb(var(--color-surface-900-rgb, 250 250 250));
  border-bottom: 1px solid rgb(var(--color-surface-200-rgb, 39 39 42) / 0.6);
}
[data-ui-anchor='mindmap-root'] .react-flow__controls-button:last-child {
  border-bottom: none;
}
[data-ui-anchor='mindmap-root'] .react-flow__controls-button:hover {
  background: rgb(var(--color-surface-200-rgb, 39 39 42) / 0.5);
  color: rgb(var(--color-surface-900-rgb, 250 250 250));
}
/* Live backdrop-blur reuses the node's `.mm-blur` gate + a glass theme's `--panel-blur`,
   so the widget frosts EXACTLY when the nodes do (and stays flat on a big map); mobile
   drops it, mirroring `.mm-blur .mm-node`. */
.mm-blur .react-flow__controls {
  backdrop-filter: blur(var(--panel-blur, 0px));
  -webkit-backdrop-filter: blur(var(--panel-blur, 0px));
}
@media (max-width: 640px) {
  .mm-blur .react-flow__controls {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* ─────────────────────────────────────────────────────────────────────────
   Tasks v2 — Liquid Glass (scoped by usage to the Tasks v2 view only; v1 Tasks
   is untouched — it keeps the shared TASK_* constants). Theme-aware: panel/row
   FILLS track --color-surface-* and tint/glow track --accent-rgb, so the glass
   follows the user's light/dark theme, the active visual skin, AND the accent.
   backdrop-filter is on BIG panels only (rail / card / menus / detail panes),
   NEVER on the virtualized outliner rows (per-row blur tanks scroll). Every
   var() carries a literal fallback; mobile drops the blur (GPU cost, mirroring
   .qw-glass / .mm-node); reduced-motion drops the row transition. */
:root {
  --tv2-glass-panel-bg: rgba(var(--color-surface-50-rgb, 250 250 250) / 0.72);
  /* Opaque floor for the FLOATING glass surfaces (panel / card / menu) used
     wherever backdrop-filter is unavailable (mobile, low-power, software-render).
     --tv2-glass-panel-bg above stays translucent for the desktop frosted look;
     this floor keeps the popup readable with NO blur. Hex-backed = opaque on
     every theme. See overlay-readable-background-contract.md. */
  --tv2-glass-panel-floor: var(--color-surface-50, #fafafa);
  --tv2-glass-row-bg: rgba(var(--color-surface-50-rgb, 250 250 250) / 0.55);
  --tv2-glass-row-hover-bg: rgba(var(--color-surface-50-rgb, 250 250 250) / 0.88);
  --tv2-glass-panel-border: rgba(0, 0, 0, 0.08);
  --tv2-glass-row-border: rgba(0, 0, 0, 0.06);
  --tv2-glass-highlight: rgba(255, 255, 255, 0.7);
  --tv2-glass-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.18);
  --tv2-glass-blur: 16px;
  --tv2-glass-accent-soft: rgba(var(--accent-rgb, 99 102 241) / 0.12);
  --tv2-glass-accent-border: rgba(var(--accent-rgb, 99 102 241) / 0.35);
  --tv2-glass-accent-glow: rgba(var(--accent-rgb, 99 102 241) / 0.3);
  /* WRITING-mode (being-typed) row outline — a distinct GREEN (emerald 16 185 129),
     NOT accent-derived, so it stays distinct even when the user's accent is green/teal.
     `-soft` = the faint fill; `-border` = the ring. See .tv2-glass-row-editing below. */
  --tv2-glass-edit-soft: rgba(16 185 129 / 0.12);
  --tv2-glass-edit-border: rgba(16 185 129 / 0.6);
  --tv2-page-grad: radial-gradient(
    120% 80% at 100% 0%,
    rgba(var(--accent-rgb, 99 102 241) / 0.06),
    transparent 60%
  );
}
.dark {
  --tv2-glass-panel-bg: rgba(var(--color-surface-100-rgb, 24 24 27) / 0.62);
  --tv2-glass-panel-floor: var(--color-surface-100, #18181b);
  --tv2-glass-row-bg: rgba(var(--color-surface-200-rgb, 39 39 42) / 0.45);
  --tv2-glass-row-hover-bg: rgba(var(--color-surface-200-rgb, 39 39 42) / 0.72);
  --tv2-glass-panel-border: rgba(255, 255, 255, 0.1);
  --tv2-glass-row-border: rgba(255, 255, 255, 0.07);
  --tv2-glass-highlight: rgba(255, 255, 255, 0.1);
  --tv2-glass-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7);
  --tv2-glass-blur: 18px;
  --tv2-glass-accent-soft: rgba(var(--accent-rgb, 99 102 241) / 0.12);
  --tv2-glass-accent-border: rgba(var(--accent-rgb, 99 102 241) / 0.42);
  --tv2-glass-accent-glow: rgba(var(--accent-rgb, 99 102 241) / 0.45);
  --tv2-glass-edit-soft: rgba(16 185 129 / 0.14);
  --tv2-glass-edit-border: rgba(16 185 129 / 0.65);
  --tv2-page-grad: radial-gradient(
    120% 80% at 100% 0%,
    rgba(var(--accent-rgb, 99 102 241) / 0.1),
    transparent 55%
  );
}
.tv2-surface {
  background-image: var(--tv2-page-grad, none);
}
/* Find-as-you-type match paint (`find-overlay`) — Ranges registered by
   useFindHighlight (CSS Custom Highlight API; no DOM mutation over rendered
   markdown). ::highlight() accepts only color-ish properties, so this is a
   soft accent wash behind each matched span. */
::highlight(tv2-find) {
  background-color: rgba(var(--accent-rgb, 99 102 241) / 0.35);
}
.tv2-glass-panel {
  background-color: var(--tv2-glass-panel-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--tv2-glass-panel-border, rgba(255, 255, 255, 0.1));
  box-shadow:
    inset 0 1px 0 var(--tv2-glass-highlight, rgba(255, 255, 255, 0.1)),
    var(--tv2-glass-shadow, 0 18px 50px -24px rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(var(--tv2-glass-blur, 18px)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--tv2-glass-blur, 18px)) saturate(1.2);
}
.tv2-glass-card {
  background-image: linear-gradient(
    135deg,
    var(--tv2-glass-accent-soft, rgba(99, 102, 241, 0.12)),
    transparent 70%
  );
  background-color: var(--tv2-glass-panel-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--tv2-glass-accent-border, rgba(99, 102, 241, 0.4));
  box-shadow: inset 0 1px 0 var(--tv2-glass-highlight, rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(var(--tv2-glass-blur, 18px)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--tv2-glass-blur, 18px)) saturate(1.2);
}
.tv2-glass-menu {
  background-color: var(--tv2-glass-panel-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--tv2-glass-panel-border, rgba(255, 255, 255, 0.1));
  box-shadow:
    inset 0 1px 0 var(--tv2-glass-highlight, rgba(255, 255, 255, 0.1)),
    var(--tv2-glass-shadow, 0 18px 50px -24px rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
/* Rows: fill + border + sheen ONLY — NO backdrop-filter (virtualized list perf). */
.tv2-glass-row {
  background-color: var(--tv2-glass-row-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--tv2-glass-row-border, rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 var(--tv2-glass-highlight, rgba(255, 255, 255, 0.1));
  /* Animate ONLY the background here. The row's EDGE (its border-color + the inset
     box-shadow ring) is deliberately left un-animated: at rest the edge is a
     near-white glass hairline (--tv2-glass-row-border / --tv2-glass-highlight), and
     the focused/selected state swaps it to the light-blue accent. Cross-fading the
     edge made every keyboard-nav step visibly pass THROUGH white (the reported
     "edge goes white then light blue"). A command-mode cursor should snap, so the
     edge now applies instantly; the gray-to-accent-soft fill still eases (it never
     passes through white). Guarded by tasks-v2-row-edge-no-cross-fade.test.ts. */
  transition: background-color 120ms ease;
}
.tv2-glass-row:hover {
  background-color: var(--tv2-glass-row-hover-bg, rgba(255, 255, 255, 0.08));
}
/* Keyboard-nav hover suppression — Tasks v2. While the surface is flagged data-tv2-kbd-nav (a
   key was pressed; cleared on the next pointer move — see useSuppressHoverOnKeyboardNav), the
   pointer proximity reveal is hidden so a parked cursor's hover glow doesn't linger over
   whatever it happens to rest on. The `tv2-hover-reveal` marker rides on TV2_PREWARM_REVEAL
   (styles.ts). Unlayered + (0,4,0) specificity, so it beats BOTH the Tailwind group-hover
   utility AND the --tv2-warmth var opacity in one rule. `:not(:focus-*)` exempts genuinely
   keyboard-focused controls, so nothing is ever permanently hidden (row-actions-hover-reveal
   contract). Locked by tasks-v2-kbd-nav-hover-suppression.test.ts. */
[data-tv2-kbd-nav='true'] .tv2-hover-reveal:not(:focus-within):not(:focus-visible) {
  opacity: 0;
  pointer-events: none;
}
/* Scope decision B: also drop the row-background hover tint while keyboard-navigating, so
   nothing hover-related shows. Resets to the row's base fill (matches .tv2-glass-row). */
[data-tv2-kbd-nav='true'] .tv2-glass-row:hover {
  background-color: var(--tv2-glass-row-bg, rgba(255, 255, 255, 0.04));
}
.tv2-glass-row-selected {
  background-color: var(--tv2-glass-accent-soft, rgba(99, 102, 241, 0.12));
  border-color: var(--tv2-glass-accent-border, rgba(99, 102, 241, 0.4));
  box-shadow:
    inset 0 1px 0 var(--tv2-glass-highlight, rgba(255, 255, 255, 0.1)),
    0 0 26px -8px var(--tv2-glass-accent-glow, rgba(99, 102, 241, 0.45));
}
/* FOCUSED (command-mode cursor) row — the "you are here" cue: a SOLID left accent
   BAR + a faint accent-tinted fill + a hairline accent ring, all via INSET
   box-shadow / background (never clipped by the outliner's overflow scroll
   container nor spilling past the panel's right edge — which is exactly what the
   container's own `*:focus-visible` outline did, the "white rectangle"). The full
   left bar (not the old thin 0.35/0.42-alpha ring) makes the cursor row obvious,
   and the bar — which `-selected` does NOT have — disambiguates the cursor from the
   multi-select set (which keeps its fill + 26px outer glow, no bar). Was previously
   a weak 2px translucent ring that read almost identically to `-selected` (the
   "unclear which is selected" bug). Every accent token carries a literal fallback
   (color-var-fallback contract). Tokens are accent-derived, so it tracks the user's
   theme. Used by BOTH Tasks v2 and v3 (TV3_ROW aliases TV2_ROW). */
.tv2-glass-row-focused {
  background-color: var(--tv2-glass-accent-soft, rgba(99, 102, 241, 0.12));
  border-color: rgba(var(--accent-rgb, 99 102 241) / 0.7);
  box-shadow:
    inset 3px 0 0 0 rgb(var(--accent-rgb, 99 102 241)),
    inset 0 0 0 1px rgba(var(--accent-rgb, 99 102 241) / 0.55),
    inset 0 1px 0 var(--tv2-glass-highlight, rgba(255, 255, 255, 0.1));
}
/* EDITING (WRITING mode — the row is being typed) row — a distinct GREEN ring + faint
   green fill, so an actively-edited row reads differently from a settled COMMAND-mode
   focused row (the accent ring above). Same inset-ring shape as -focused (never clipped
   by the scroll container), plus a soft fill so it stays distinct even if the user's
   accent is itself green/teal. Green is NOT accent-derived on purpose. Editing ⟹ focused
   at the call sites, so a row takes THIS instead of -focused (never both); -cut still
   layers on top. No mobile/low-power override needed (rows carry no backdrop-filter); the
   row also has .tv2-glass-row, so the reduced-motion transition-kill already applies. */
.tv2-glass-row-editing {
  background-color: var(--tv2-glass-edit-soft, rgba(16 185 129 / 0.12));
  border-color: var(--tv2-glass-edit-border, rgba(16 185 129 / 0.6));
  box-shadow:
    inset 0 0 0 2px var(--tv2-glass-edit-border, rgba(16 185 129 / 0.6)),
    inset 0 1px 0 var(--tv2-glass-highlight, rgba(255, 255, 255, 0.1));
}
/* CUT (marked to move via Ctrl/Cmd+X) row — a DASHED accent outline + a slight dim so
   the row reads as "lifted," waiting to be pasted. The dashed border plus a 1px inset
   accent ring (never clipped by the scroll container — same reasoning as -focused) make
   it unmistakable, and the reduced opacity says "this one is in flight." Defined AFTER
   -selected/-focused so a row that is BOTH cut and focused shows the cut treatment.
   Cutting MUTATES NOTHING — this is the visible half of a pure UI state; the row stays
   put until pasted. Accent tokens track the user's theme. */
.tv2-glass-row-cut {
  opacity: 0.6;
  border-color: var(--tv2-glass-accent-border, rgba(99, 102, 241, 0.4));
  border-style: dashed;
  box-shadow:
    inset 0 0 0 1px var(--tv2-glass-accent-border, rgba(99, 102, 241, 0.4)),
    inset 0 1px 0 var(--tv2-glass-highlight, rgba(255, 255, 255, 0.1));
}
.tv2-glass-chip {
  background-color: var(--tv2-glass-row-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--tv2-glass-row-border, rgba(255, 255, 255, 0.08));
}
@media (max-width: 640px) {
  .tv2-glass-panel,
  .tv2-glass-card,
  .tv2-glass-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Blur is off on mobile (GPU cost) — the translucent fill would bleed, so
       drop to the opaque floor. This is the fix for the see-through "Right now"
       popup reported on phone. */
    background-color: var(--tv2-glass-panel-floor, #18181b);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tv2-glass-row {
    transition: none;
  }
}
/* Soft-white label on accent raised buttons. The JSX keeps `text-white` (the
   design-system rule + accent-bg-text-contrast lint require white on bg-accent,
   since the accent is white on "Vercel Clean" dark); this only softens that
   white to ~86% so the label doesn't read as harsh against the toned-down 3D
   sheen on `.amc-btn-raised` (@layer base). UNLAYERED so it beats the
   `text-white` Tailwind utility (@layer utilities); scoped to bg-accent +
   amc-btn-raised so red/amber/green raised buttons keep their full-white label.
   Hue is unchanged → theme-safe. Disabled keeps full text-white + the existing
   disabled:opacity-50. */
.bg-accent.amc-btn-raised:not(:disabled) {
  color: rgb(255 255 255 / 0.86);
}
/* ── KMS editor appearance (custom theme options) ───────────────────────────
   Driven by data attributes on the KMS panel root (set from the nothariEditor*
   settings in KmsView). These tune the editor reading column only and layer on
   top of the visual theme. Defaults (font 'sans' / width 'full' / bg 'theme')
   intentionally have NO rule — the editor keeps its themed look so nothing
   changes until the user opts in. Unlayered so they override the @layer base
   `.kms-prose .ProseMirror` rules. See kms-theme-override-contract.md. */
[data-kms-font='serif'] .kms-prose .ProseMirror {
  font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
}
[data-kms-font='mono'] .kms-prose .ProseMirror {
  font-family: var(
    --font-family-mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    'Liberation Mono',
    monospace
  );
}
/* KMS editor text-size tiers — independent of the global app fontSize. 'md'
   (default) has no rule so the editor inherits the app's size; the other three
   tiers set an explicit font-size that scopes to the editor prose only. Matches
   the RSS reader's rssReaderFontSize S/M/L/XL tier model. Unlayered so they
   override the @layer base `.kms-prose .ProseMirror` rules. */
[data-kms-size='sm'] .kms-prose .ProseMirror {
  font-size: 0.875rem; /* 14px — text-sm */
}
[data-kms-size='lg'] .kms-prose .ProseMirror {
  font-size: 1.125rem; /* 18px — text-lg */
}
[data-kms-size='xl'] .kms-prose .ProseMirror {
  font-size: 1.25rem; /* 20px — text-xl */
}
[data-kms-width='narrow'] .kms-prose .ProseMirror {
  max-width: 40rem;
  margin-inline: auto;
}
[data-kms-width='normal'] .kms-prose .ProseMirror {
  max-width: 48rem;
  margin-inline: auto;
}
[data-kms-width='wide'] .kms-prose .ProseMirror {
  max-width: 64rem;
  margin-inline: auto;
}
/* 'full' = no max-width (the current editor) — intentionally no rule. */
/* Paper / sepia page tint. Forces a warm light reading surface with dark text
   INDEPENDENT of the visual theme — so it stays readable even on a dark theme
   (whose headings are near-white via text-surface-900). Links keep their accent. */
[data-kms-bg='paper'] .kms-prose .ProseMirror {
  background-color: #f7f3e8;
  border-radius: 0.5rem;
  padding: 1.5rem 1.75rem;
}
[data-kms-bg='paper'] .kms-prose .ProseMirror,
[data-kms-bg='paper']
  .kms-prose
  .ProseMirror
  :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, strong, em, td, th) {
  color: #2d2a26;
}
[data-kms-bg='sepia'] .kms-prose .ProseMirror {
  background-color: #f4ecd8;
  border-radius: 0.5rem;
  padding: 1.5rem 1.75rem;
}
[data-kms-bg='sepia'] .kms-prose .ProseMirror,
[data-kms-bg='sepia']
  .kms-prose
  .ProseMirror
  :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, strong, em, td, th) {
  color: #433422;
}
/* ── Lock-to-portrait safety net (PortraitLockOverlay) ───────────────────────
   The true OS orientation lock (mobile-portrait-lock.ts) is best-effort and can
   be refused by the browser even in the installed app. PortraitLockOverlay is
   mounted only on a touch web client with the setting on; this rule is the whole
   show/hide mechanism — hidden by default, shown ONLY in landscape on a touch
   device (hover:none). So when the real lock holds the screen never reaches
   landscape, the media query never matches, and the overlay stays dormant; when
   the lock is refused, landscape shows it so the app is never stuck sideways.
   Declarative CSS is used deliberately over the flaky imperative lock API. See
   mobile-portrait-lock-contract.md. */
.portrait-lock-overlay {
  display: none;
}
@media (orientation: landscape) and (hover: none) {
  .portrait-lock-overlay {
    display: flex;
  }
}
/* ─── Jira surface theme (PRD §3.5) — scoped to the Jira feature only ──────────
   A Jira-flavored token set applied under `.jira-scope` (JiraBoardView root), so
   stepping into the Jira tab reads as Jira without restyling the rest of AMC.
   Responds to the class-based `.dark` signal like the surface tokens above. Every
   consumer passes a literal fallback (the bare-var-collapses-to-transparent rule).
   Replicates Jira's LOOK with our own tokens — no @atlaskit, fonts, or marks. */
.jira-scope {
  --jira-accent: #0052cc;
  --jira-surface: #ffffff;
  --jira-sunken: #f4f5f7;
  --jira-border: #dfe1e6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.dark .jira-scope {
  --jira-accent: #4c9aff;
  --jira-surface: #22272b;
  --jira-sunken: #1d2125;
  --jira-border: #2c333a;
}
/* Linear date picker (react-day-picker v10) — themed to AMC's surface/accent
   tokens (LinearDatePicker.tsx). Selected day = a filled accent circle (v10
   defaults to a border-only look); today = accent text; muted weekdays. */
.rdp-amc {
  --rdp-accent-color: rgb(var(--accent-rgb));
  --rdp-accent-background-color: rgb(var(--accent-rgb) / 0.15);
  --rdp-today-color: rgb(var(--accent-rgb));
  --rdp-day-width: 2rem;
  --rdp-day-height: 2rem;
  --rdp-outside-opacity: 0.4;
  --rdp-disabled-opacity: 0.35;
  margin: 0;
  color: rgb(var(--color-surface-800-rgb));
  font-size: 0.8125rem;
}
.rdp-amc .rdp-month_caption,
.rdp-amc .rdp-caption_label {
  color: rgb(var(--color-surface-800-rgb));
  font-weight: 600;
}
.rdp-amc .rdp-weekday {
  color: rgb(var(--color-surface-500-rgb));
  font-weight: 500;
}
.rdp-amc .rdp-chevron {
  fill: rgb(var(--color-surface-500-rgb));
}
.rdp-amc .rdp-button_previous:hover .rdp-chevron,
.rdp-amc .rdp-button_next:hover .rdp-chevron {
  fill: rgb(var(--color-surface-800-rgb));
}
.rdp-amc .rdp-day_button {
  border-radius: 9999px;
  border: none;
}
.rdp-amc .rdp-day_button:hover {
  background: rgb(var(--color-surface-300-rgb));
}
.rdp-amc .rdp-selected .rdp-day_button {
  background: rgb(var(--accent-rgb));
  color: #fff;
}
.rdp-amc .rdp-today:not(.rdp-selected) .rdp-day_button {
  color: rgb(var(--accent-rgb));
  font-weight: 700;
}
/* ── Suppress a spurious focus-visible ring on a restored dialog trigger ──────
   When a modal/drawer closes, useFocusTrap restores focus to the trigger that opened
   it. On a POINTER/TOUCH open, Chrome still paints `:focus-visible` on that programmatic
   `.focus()` — which left the mobile quick-actions launcher lit with the accent box until
   the user tapped elsewhere. `useFocusTrap.restoreFocusToTrigger` sets this marker ONLY
   for a pointer/touch open (never a keyboard open, so a real focus ring is untouched) and
   clears it on the trigger's next blur. UNLAYERED on purpose: it must beat BOTH the base
   `*:focus-visible` outline (@layer base) AND the Tailwind `focus-visible:ring-2` utility
   (@layer utilities) — a layered rule can't outrank a later layer, but an unlayered normal
   declaration wins over every layer. `box-shadow:none` (not a Tailwind-var reset) keeps this
   version-independent; it only applies while focused + marked, so a trigger's own shadow is
   affected for just that brief window. Locked by tests/unit/hooks/useFocusTrap.test.ts. */
[data-amc-suppress-focus-ring]:focus-visible {
  outline: none;
  box-shadow: none;
}
.placeholder\:italic::-moz-placeholder {
  font-style: italic
}
.placeholder\:italic::placeholder {
  font-style: italic
}
.placeholder\:text-\[var\(--arij-faint\2c \#8590a2\)\]::-moz-placeholder {
  color: var(--arij-faint,#8590a2)
}
.placeholder\:text-\[var\(--arij-faint\2c \#8590a2\)\]::placeholder {
  color: var(--arij-faint,#8590a2)
}
.placeholder\:text-surface-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1))
}
.placeholder\:text-surface-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1))
}
.placeholder\:text-surface-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-text-opacity, 1))
}
.placeholder\:text-surface-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-text-opacity, 1))
}
.placeholder\:text-surface-600::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1))
}
.placeholder\:text-surface-600::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1))
}
.before\:absolute::before {
  content: var(--tw-content);
  position: absolute
}
.before\:bottom-1::before {
  content: var(--tw-content);
  bottom: 0.25rem
}
.before\:left-0::before {
  content: var(--tw-content);
  left: 0px
}
.before\:top-1::before {
  content: var(--tw-content);
  top: 0.25rem
}
.before\:h-px::before {
  content: var(--tw-content);
  height: 1px
}
.before\:w-0\.5::before {
  content: var(--tw-content);
  width: 0.125rem
}
.before\:flex-1::before {
  content: var(--tw-content);
  flex: 1 1 0%
}
.before\:bg-accent::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-rgb) / var(--tw-bg-opacity, 1))
}
.before\:bg-surface-300\/40::before {
  content: var(--tw-content);
  background-color: rgb(var(--color-surface-300-rgb) / 0.4)
}
.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content)
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute
}
.after\:bottom-1::after {
  content: var(--tw-content);
  bottom: 0.25rem
}
.after\:right-0::after {
  content: var(--tw-content);
  right: 0px
}
.after\:top-1::after {
  content: var(--tw-content);
  top: 0.25rem
}
.after\:h-px::after {
  content: var(--tw-content);
  height: 1px
}
.after\:w-0\.5::after {
  content: var(--tw-content);
  width: 0.125rem
}
.after\:flex-1::after {
  content: var(--tw-content);
  flex: 1 1 0%
}
.after\:bg-accent::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-rgb) / var(--tw-bg-opacity, 1))
}
.after\:bg-surface-300\/40::after {
  content: var(--tw-content);
  background-color: rgb(var(--color-surface-300-rgb) / 0.4)
}
.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content)
}
.first\:mt-0:first-child {
  margin-top: 0px
}
.first\:mt-1\.5:first-child {
  margin-top: 0.375rem
}
.first\:border-0:first-child {
  border-width: 0px
}
.first\:border-l-0:first-child {
  border-left-width: 0px
}
.first\:border-t-0:first-child {
  border-top-width: 0px
}
.first\:pt-0:first-child {
  padding-top: 0px
}
.last\:mb-0:last-child {
  margin-bottom: 0px
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px
}
.last\:border-r-0:last-child {
  border-right-width: 0px
}
.last\:pb-0:last-child {
  padding-bottom: 0px
}
.focus-within\:pointer-events-auto:focus-within {
  pointer-events: auto
}
.focus-within\:border-accent:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1))
}
.focus-within\:border-accent\/50:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.5)
}
.focus-within\:border-accent\/60:focus-within {
  border-color: rgb(var(--accent-rgb) / 0.6)
}
.focus-within\:border-amber-500\/70:focus-within {
  border-color: rgb(245 158 11 / 0.7)
}
.focus-within\:border-status-needs-you\/70:focus-within {
  border-color: rgb(var(--status-needs-you-rgb) / 0.7)
}
.focus-within\:border-surface-400:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-400-rgb) / var(--tw-border-opacity, 1))
}
.focus-within\:bg-surface-200\/40:focus-within {
  background-color: rgb(var(--color-surface-200-rgb) / 0.4)
}
.focus-within\:opacity-100:focus-within {
  opacity: 1
}
.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus-within\:ring-accent\/25:focus-within {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.25)
}
.focus-within\:ring-accent\/30:focus-within {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.3)
}
.focus-within\:ring-accent\/40:focus-within {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.4)
}
.focus-within\:ring-accent\/50:focus-within {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.5)
}
.focus-within\:ring-offset-0:focus-within {
  --tw-ring-offset-width: 0px
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:border-\[rgb\(var\(--accent-rgb\)\)\]:hover {
  border-color: rgb(var(--accent-rgb))
}
.hover\:border-\[var\(--arij-accent\2c \#1868db\)\]:hover {
  border-color: var(--arij-accent,#1868db)
}
.hover\:border-\[var\(--arij-border\2c \#dfe1e6\)\]:hover {
  border-color: var(--arij-border,#dfe1e6)
}
.hover\:border-\[var\(--arij-faint\2c \#8590a2\)\]:hover {
  border-color: var(--arij-faint,#8590a2)
}
.hover\:border-\[var\(--arij-field-border\2c \#8590a2\)\]:hover {
  border-color: var(--arij-field-border,#8590a2)
}
.hover\:border-accent:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1))
}
.hover\:border-accent\/40:hover {
  border-color: rgb(var(--accent-rgb) / 0.4)
}
.hover\:border-accent\/50:hover {
  border-color: rgb(var(--accent-rgb) / 0.5)
}
.hover\:border-accent\/55:hover {
  border-color: rgb(var(--accent-rgb) / 0.55)
}
.hover\:border-accent\/60:hover {
  border-color: rgb(var(--accent-rgb) / 0.6)
}
.hover\:border-amber-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1))
}
.hover\:border-amber-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1))
}
.hover\:border-status-error\/50:hover {
  border-color: rgb(var(--status-error-rgb) / 0.5)
}
.hover\:border-surface-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-300-rgb) / var(--tw-border-opacity, 1))
}
.hover\:border-surface-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-400-rgb) / var(--tw-border-opacity, 1))
}
.hover\:border-surface-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-500-rgb) / var(--tw-border-opacity, 1))
}
.hover\:border-white:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}
.hover\:border-white\/20:hover {
  border-color: rgb(255 255 255 / 0.2)
}
.hover\:bg-\[\#fafafa\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
}
.hover\:bg-\[rgb\(var\(--surface-3\2c _28_38_54\)\)\]:hover {
  background-color: rgb(var(--surface-3, 28 38 54))
}
.hover\:bg-\[rgba\(var\(--accent-rgb\2c 99_91_255\)_\/_0\.12\)\]:hover {
  background-color: rgba(var(--accent-rgb,99 91 255) / 0.12)
}
.hover\:bg-\[var\(--arij-accent-hover\2c \#1558bc\)\]:hover {
  background-color: var(--arij-accent-hover,#1558bc)
}
.hover\:bg-\[var\(--arij-hover\2c \#f1f2f4\)\]:hover {
  background-color: var(--arij-hover,#f1f2f4)
}
.hover\:bg-\[var\(--arij-selected\2c \#e9f2ff\)\]:hover {
  background-color: var(--arij-selected,#e9f2ff)
}
.hover\:bg-\[var\(--arij-sunken\2c \#f7f8f9\)\]:hover {
  background-color: var(--arij-sunken,#f7f8f9)
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-accent\/10:hover {
  background-color: rgb(var(--accent-rgb) / 0.1)
}
.hover\:bg-accent\/15:hover {
  background-color: rgb(var(--accent-rgb) / 0.15)
}
.hover\:bg-accent\/20:hover {
  background-color: rgb(var(--accent-rgb) / 0.2)
}
.hover\:bg-accent\/25:hover {
  background-color: rgb(var(--accent-rgb) / 0.25)
}
.hover\:bg-accent\/30:hover {
  background-color: rgb(var(--accent-rgb) / 0.3)
}
.hover\:bg-accent\/5:hover {
  background-color: rgb(var(--accent-rgb) / 0.05)
}
.hover\:bg-accent\/50:hover {
  background-color: rgb(var(--accent-rgb) / 0.5)
}
.hover\:bg-accent\/80:hover {
  background-color: rgb(var(--accent-rgb) / 0.8)
}
.hover\:bg-accent\/90:hover {
  background-color: rgb(var(--accent-rgb) / 0.9)
}
.hover\:bg-amber-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1))
}
.hover\:bg-amber-500\/20:hover {
  background-color: rgb(245 158 11 / 0.2)
}
.hover\:bg-amber-500\/30:hover {
  background-color: rgb(245 158 11 / 0.3)
}
.hover\:bg-amber-500\/90:hover {
  background-color: rgb(245 158 11 / 0.9)
}
.hover\:bg-black\/10:hover {
  background-color: rgb(0 0 0 / 0.1)
}
.hover\:bg-black\/70:hover {
  background-color: rgb(0 0 0 / 0.7)
}
.hover\:bg-black\/75:hover {
  background-color: rgb(0 0 0 / 0.75)
}
.hover\:bg-black\/80:hover {
  background-color: rgb(0 0 0 / 0.8)
}
.hover\:bg-blue-500\/20:hover {
  background-color: rgb(59 130 246 / 0.2)
}
.hover\:bg-ember-400\/20:hover {
  background-color: rgb(var(--status-ember-400-rgb) / 0.2)
}
.hover\:bg-ember-500\/20:hover {
  background-color: rgb(var(--status-ember-500-rgb) / 0.2)
}
.hover\:bg-ember-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-ember-600-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-emerald-500\/20:hover {
  background-color: rgb(16 185 129 / 0.2)
}
.hover\:bg-green-500\/10:hover {
  background-color: rgb(34 197 94 / 0.1)
}
.hover\:bg-green-500\/20:hover {
  background-color: rgb(34 197 94 / 0.2)
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1))
}
.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1))
}
.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1))
}
.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1))
}
.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1)
}
.hover\:bg-red-500\/20:hover {
  background-color: rgb(239 68 68 / 0.2)
}
.hover\:bg-red-500\/25:hover {
  background-color: rgb(239 68 68 / 0.25)
}
.hover\:bg-red-500\/80:hover {
  background-color: rgb(239 68 68 / 0.8)
}
.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))
}
.hover\:bg-red-600\/10:hover {
  background-color: rgb(220 38 38 / 0.1)
}
.hover\:bg-slate-500\/20:hover {
  background-color: rgb(100 116 139 / 0.2)
}
.hover\:bg-status-agent-strong:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--status-agent-strong-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-status-agent-strong\/80:hover {
  background-color: rgb(var(--status-agent-strong-rgb) / 0.8)
}
.hover\:bg-status-agent\/10:hover {
  background-color: rgb(var(--status-agent-rgb) / 0.1)
}
.hover\:bg-status-agent\/20:hover {
  background-color: rgb(var(--status-agent-rgb) / 0.2)
}
.hover\:bg-status-agent\/25:hover {
  background-color: rgb(var(--status-agent-rgb) / 0.25)
}
.hover\:bg-status-error-strong\/80:hover {
  background-color: rgb(var(--status-error-strong-rgb) / 0.8)
}
.hover\:bg-status-error\/10:hover {
  background-color: rgb(var(--status-error-rgb) / 0.1)
}
.hover\:bg-status-error\/15:hover {
  background-color: rgb(var(--status-error-rgb) / 0.15)
}
.hover\:bg-status-error\/20:hover {
  background-color: rgb(var(--status-error-rgb) / 0.2)
}
.hover\:bg-status-error\/25:hover {
  background-color: rgb(var(--status-error-rgb) / 0.25)
}
.hover\:bg-status-error\/30:hover {
  background-color: rgb(var(--status-error-rgb) / 0.3)
}
.hover\:bg-status-error\/80:hover {
  background-color: rgb(var(--status-error-rgb) / 0.8)
}
.hover\:bg-status-needs-you-strong\/80:hover {
  background-color: rgb(var(--status-needs-you-strong-rgb) / 0.8)
}
.hover\:bg-status-needs-you-strong\/90:hover {
  background-color: rgb(var(--status-needs-you-strong-rgb) / 0.9)
}
.hover\:bg-status-needs-you\/10:hover {
  background-color: rgb(var(--status-needs-you-rgb) / 0.1)
}
.hover\:bg-status-needs-you\/20:hover {
  background-color: rgb(var(--status-needs-you-rgb) / 0.2)
}
.hover\:bg-status-needs-you\/25:hover {
  background-color: rgb(var(--status-needs-you-rgb) / 0.25)
}
.hover\:bg-status-needs-you\/30:hover {
  background-color: rgb(var(--status-needs-you-rgb) / 0.3)
}
.hover\:bg-status-question\/20:hover {
  background-color: rgb(var(--status-question-rgb) / 0.2)
}
.hover\:bg-status-question\/30:hover {
  background-color: rgb(var(--status-question-rgb) / 0.3)
}
.hover\:bg-surface-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-surface-100\/50:hover {
  background-color: rgb(var(--color-surface-100-rgb) / 0.5)
}
.hover\:bg-surface-100\/60:hover {
  background-color: rgb(var(--color-surface-100-rgb) / 0.6)
}
.hover\:bg-surface-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-200-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-surface-200\/30:hover {
  background-color: rgb(var(--color-surface-200-rgb) / 0.3)
}
.hover\:bg-surface-200\/40:hover {
  background-color: rgb(var(--color-surface-200-rgb) / 0.4)
}
.hover\:bg-surface-200\/50:hover {
  background-color: rgb(var(--color-surface-200-rgb) / 0.5)
}
.hover\:bg-surface-200\/60:hover {
  background-color: rgb(var(--color-surface-200-rgb) / 0.6)
}
.hover\:bg-surface-200\/70:hover {
  background-color: rgb(var(--color-surface-200-rgb) / 0.7)
}
.hover\:bg-surface-200\/80:hover {
  background-color: rgb(var(--color-surface-200-rgb) / 0.8)
}
.hover\:bg-surface-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-300-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-surface-300\/30:hover {
  background-color: rgb(var(--color-surface-300-rgb) / 0.3)
}
.hover\:bg-surface-300\/40:hover {
  background-color: rgb(var(--color-surface-300-rgb) / 0.4)
}
.hover\:bg-surface-300\/50:hover {
  background-color: rgb(var(--color-surface-300-rgb) / 0.5)
}
.hover\:bg-surface-300\/60:hover {
  background-color: rgb(var(--color-surface-300-rgb) / 0.6)
}
.hover\:bg-surface-300\/80:hover {
  background-color: rgb(var(--color-surface-300-rgb) / 0.8)
}
.hover\:bg-surface-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-400-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-surface-400\/30:hover {
  background-color: rgb(var(--color-surface-400-rgb) / 0.3)
}
.hover\:bg-surface-400\/60:hover {
  background-color: rgb(var(--color-surface-400-rgb) / 0.6)
}
.hover\:bg-surface-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-surface-50\/50:hover {
  background-color: rgb(var(--color-surface-50-rgb) / 0.5)
}
.hover\:bg-surface-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-500-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-surface-600\/10:hover {
  background-color: rgb(var(--color-surface-600-rgb) / 0.1)
}
.hover\:bg-surface-600\/15:hover {
  background-color: rgb(var(--color-surface-600-rgb) / 0.15)
}
.hover\:bg-surface-700\/50:hover {
  background-color: rgb(var(--color-surface-700-rgb) / 0.5)
}
.hover\:bg-surface-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-900-rgb) / var(--tw-bg-opacity, 1))
}
.hover\:bg-transparent:hover {
  background-color: transparent
}
.hover\:bg-violet-500\/20:hover {
  background-color: rgb(139 92 246 / 0.2)
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1)
}
.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15)
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2)
}
.hover\:bg-white\/\[0\.06\]:hover {
  background-color: rgb(255 255 255 / 0.06)
}
.hover\:from-violet-500\/10:hover {
  --tw-gradient-from: rgb(139 92 246 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.hover\:to-indigo-500\/10:hover {
  --tw-gradient-to: rgb(99 102 241 / 0.1) var(--tw-gradient-to-position)
}
.hover\:\!text-amber-400:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1)) !important
}
.hover\:\!text-surface-200:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-surface-200-rgb) / var(--tw-text-opacity, 1)) !important
}
.hover\:text-\[rgb\(var\(--accent-rgb\)\)\]:hover {
  color: rgb(var(--accent-rgb))
}
.hover\:text-\[var\(--arij-accent\2c \#1868db\)\]:hover {
  color: var(--arij-accent,#1868db)
}
.hover\:text-\[var\(--arij-ink\2c \#172b4d\)\]:hover {
  color: var(--arij-ink,#172b4d)
}
.hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-accent\/70:hover {
  color: rgb(var(--accent-rgb) / 0.7)
}
.hover\:text-accent\/80:hover {
  color: rgb(var(--accent-rgb) / 0.8)
}
.hover\:text-accent\/90:hover {
  color: rgb(var(--accent-rgb) / 0.9)
}
.hover\:text-amber-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1))
}
.hover\:text-amber-400:hover {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1))
}
.hover\:text-amber-500:hover {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1))
}
.hover\:text-amber-600:hover {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1))
}
.hover\:text-green-400:hover {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1))
}
.hover\:text-green-500:hover {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1))
}
.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1))
}
.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}
.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1))
}
.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}
.hover\:text-status-agent:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--status-agent-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-status-error:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--status-error-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-status-error-strong:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--status-error-strong-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-status-needs-you:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--status-needs-you-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-status-needs-you-strong\/80:hover {
  color: rgb(var(--status-needs-you-strong-rgb) / 0.8)
}
.hover\:text-status-needs-you\/80:hover {
  color: rgb(var(--status-needs-you-rgb) / 0.8)
}
.hover\:text-surface-300:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-300-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-surface-400:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-surface-500:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-surface-600:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-surface-700:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-700-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-surface-800:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-800-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-surface-900:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-surface-950:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-950-rgb) / var(--tw-text-opacity, 1))
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.hover\:text-white\/80:hover {
  color: rgb(255 255 255 / 0.8)
}
.hover\:text-white\/90:hover {
  color: rgb(255 255 255 / 0.9)
}
.hover\:underline:hover {
  text-decoration-line: underline
}
.hover\:no-underline:hover {
  text-decoration-line: none
}
.hover\:\!opacity-100:hover {
  opacity: 1 !important
}
.hover\:opacity-100:hover {
  opacity: 1
}
.hover\:opacity-80:hover {
  opacity: 0.8
}
.hover\:opacity-90:hover {
  opacity: 0.9
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.hover\:ring-accent:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent-rgb) / var(--tw-ring-opacity, 1))
}
.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  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)
}
.focus\:border-\[var\(--arij-accent\2c \#1868db\)\]:focus {
  border-color: var(--arij-accent,#1868db)
}
.focus\:border-accent:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1))
}
.focus\:border-accent\/50:focus {
  border-color: rgb(var(--accent-rgb) / 0.5)
}
.focus\:border-accent\/60:focus {
  border-color: rgb(var(--accent-rgb) / 0.6)
}
.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
}
.focus\:border-status-error:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--status-error-rgb) / var(--tw-border-opacity, 1))
}
.focus\:border-surface-600:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-600-rgb) / var(--tw-border-opacity, 1))
}
.focus\:bg-surface-100:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1))
}
.focus\:bg-surface-200\/70:focus {
  background-color: rgb(var(--color-surface-200-rgb) / 0.7)
}
.focus\:opacity-100:focus {
  opacity: 1
}
.focus\:shadow-none:focus {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px
}
.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-4:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-\[rgb\(var\(--accent-rgb\)\)\]:focus {
  --tw-ring-color: rgb(var(--accent-rgb))
}
.focus\:ring-\[var\(--arij-accent\2c \#1868db\)\]:focus {
  --tw-ring-color: var(--arij-accent,#1868db)
}
.focus\:ring-accent:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent-rgb) / var(--tw-ring-opacity, 1))
}
.focus\:ring-accent\/15:focus {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.15)
}
.focus\:ring-accent\/30:focus {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.3)
}
.focus\:ring-accent\/40:focus {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.4)
}
.focus\:ring-accent\/50:focus {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.5)
}
.focus\:ring-amber-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity, 1))
}
.focus-visible\:pointer-events-auto:focus-visible {
  pointer-events: auto
}
.focus-visible\:rounded-sm:focus-visible {
  border-radius: 0.125rem
}
.focus-visible\:border-accent:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1))
}
.focus-visible\:border-accent\/50:focus-visible {
  border-color: rgb(var(--accent-rgb) / 0.5)
}
.focus-visible\:border-white\/60:focus-visible {
  border-color: rgb(255 255 255 / 0.6)
}
.focus-visible\:bg-surface-200:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-200-rgb) / var(--tw-bg-opacity, 1))
}
.focus-visible\:stroke-white:focus-visible {
  stroke: #fff
}
.focus-visible\:stroke-2:focus-visible {
  stroke-width: 2
}
.focus-visible\:text-accent:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1))
}
.focus-visible\:opacity-100:focus-visible {
  opacity: 1
}
.focus-visible\:shadow-\[0_0_0_2px_rgba\(var\(--accent-rgb\)_\/_0\.25\)\]:focus-visible {
  --tw-shadow: 0 0 0 2px rgba(var(--accent-rgb) / 0.25);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.focus-visible\:\!outline-none:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px
}
.focus-visible\:outline:focus-visible {
  outline-style: solid
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px
}
.focus-visible\:outline-2:focus-visible {
  outline-width: 2px
}
.focus-visible\:outline-offset-1:focus-visible {
  outline-offset: 1px
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px
}
.focus-visible\:outline-accent:focus-visible {
  outline-color: rgb(var(--accent-rgb) / 1)
}
.focus-visible\:outline-accent\/60:focus-visible {
  outline-color: rgb(var(--accent-rgb) / 0.6)
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset
}
.focus-visible\:ring-\[rgb\(var\(--accent-rgb\2c 99_91_255\)\)\]:focus-visible {
  --tw-ring-color: rgb(var(--accent-rgb,99 91 255))
}
.focus-visible\:ring-\[var\(--arij-accent\2c \#1868db\)\]:focus-visible {
  --tw-ring-color: var(--arij-accent,#1868db)
}
.focus-visible\:ring-accent:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent-rgb) / var(--tw-ring-opacity, 1))
}
.focus-visible\:ring-accent\/40:focus-visible {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.4)
}
.focus-visible\:ring-accent\/50:focus-visible {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.5)
}
.focus-visible\:ring-accent\/60:focus-visible {
  --tw-ring-color: rgb(var(--accent-rgb) / 0.6)
}
.focus-visible\:ring-amber-400\/60:focus-visible {
  --tw-ring-color: rgb(251 191 36 / 0.6)
}
.focus-visible\:ring-amber-500\/50:focus-visible {
  --tw-ring-color: rgb(245 158 11 / 0.5)
}
.focus-visible\:ring-status-error\/50:focus-visible {
  --tw-ring-color: rgb(var(--status-error-rgb) / 0.5)
}
.focus-visible\:ring-status-needs-you\/50:focus-visible {
  --tw-ring-color: rgb(var(--status-needs-you-rgb) / 0.5)
}
.focus-visible\:ring-surface-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-400-rgb) / var(--tw-ring-opacity, 1))
}
.focus-visible\:ring-surface-600:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-surface-600-rgb) / var(--tw-ring-opacity, 1))
}
.focus-visible\:ring-surface-600\/40:focus-visible {
  --tw-ring-color: rgb(var(--color-surface-600-rgb) / 0.4)
}
.focus-visible\:ring-white\/60:focus-visible {
  --tw-ring-color: rgb(255 255 255 / 0.6)
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px
}
.focus-visible\:ring-offset-surface-50:focus-visible {
  --tw-ring-offset-color: rgb(var(--color-surface-50-rgb) / 1)
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.active\:cursor-grabbing:active {
  cursor: grabbing
}
.active\:bg-accent\/10:active {
  background-color: rgb(var(--accent-rgb) / 0.1)
}
.active\:bg-accent\/15:active {
  background-color: rgb(var(--accent-rgb) / 0.15)
}
.active\:bg-accent\/20:active {
  background-color: rgb(var(--accent-rgb) / 0.2)
}
.active\:bg-accent\/70:active {
  background-color: rgb(var(--accent-rgb) / 0.7)
}
.active\:bg-status-agent-strong\/70:active {
  background-color: rgb(var(--status-agent-strong-rgb) / 0.7)
}
.active\:bg-status-error-strong\/70:active {
  background-color: rgb(var(--status-error-strong-rgb) / 0.7)
}
.active\:bg-status-error\/20:active {
  background-color: rgb(var(--status-error-rgb) / 0.2)
}
.active\:bg-status-needs-you-strong\/70:active {
  background-color: rgb(var(--status-needs-you-strong-rgb) / 0.7)
}
.active\:bg-surface-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1))
}
.active\:bg-surface-200:active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-200-rgb) / var(--tw-bg-opacity, 1))
}
.active\:bg-surface-200\/60:active {
  background-color: rgb(var(--color-surface-200-rgb) / 0.6)
}
.active\:bg-surface-300:active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-300-rgb) / var(--tw-bg-opacity, 1))
}
.active\:bg-surface-400:active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-400-rgb) / var(--tw-bg-opacity, 1))
}
.active\:bg-surface-600\/20:active {
  background-color: rgb(var(--color-surface-600-rgb) / 0.2)
}
.active\:text-red-600:active {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}
.active\:text-surface-700:active {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-700-rgb) / var(--tw-text-opacity, 1))
}
.active\:text-surface-900:active {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1))
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none
}
.disabled\:cursor-default:disabled {
  cursor: default
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed
}
.disabled\:cursor-wait:disabled {
  cursor: wait
}
.disabled\:text-surface-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1))
}
.disabled\:no-underline:disabled {
  text-decoration-line: none
}
.disabled\:opacity-0:disabled {
  opacity: 0
}
.disabled\:opacity-100:disabled {
  opacity: 1
}
.disabled\:opacity-30:disabled {
  opacity: 0.3
}
.disabled\:opacity-40:disabled {
  opacity: 0.4
}
.disabled\:opacity-50:disabled {
  opacity: 0.5
}
.disabled\:opacity-60:disabled {
  opacity: 0.6
}
.disabled\:opacity-70:disabled {
  opacity: 0.7
}
.disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent
}
.disabled\:hover\:text-surface-400:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-400-rgb) / var(--tw-text-opacity, 1))
}
.disabled\:hover\:text-surface-500:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-text-opacity, 1))
}
.disabled\:active\:bg-transparent:active:disabled {
  background-color: transparent
}
.group:focus-within .group-focus-within\:flex {
  display: flex
}
.group:focus-within .group-focus-within\:opacity-0 {
  opacity: 0
}
.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1
}
.group\/bubble:hover .group-hover\/bubble\:pointer-events-auto {
  pointer-events: auto
}
.group\/tv2row:hover .group-hover\/tv2row\:pointer-events-auto {
  pointer-events: auto
}
.group:hover .group-hover\:pointer-events-auto {
  pointer-events: auto
}
.group:hover .group-hover\:flex {
  display: flex
}
.group\/tv2row:hover .group-hover\/tv2row\:hidden {
  display: none
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group\/collapse-rail:hover .group-hover\/collapse-rail\:border-surface-500 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-500-rgb) / var(--tw-border-opacity, 1))
}
.group:hover .group-hover\:bg-surface-300\/50 {
  background-color: rgb(var(--color-surface-300-rgb) / 0.5)
}
.group:hover .group-hover\:bg-surface-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-400-rgb) / var(--tw-bg-opacity, 1))
}
.group:hover .group-hover\:bg-violet-500\/25 {
  background-color: rgb(139 92 246 / 0.25)
}
.group\/pill:hover .group-hover\/pill\:text-surface-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-900-rgb) / var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-ember-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--status-ember-600-rgb) / var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-surface-300 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-300-rgb) / var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-surface-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-surface-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-600-rgb) / var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-surface-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-700-rgb) / var(--tw-text-opacity, 1))
}
.group:hover .group-hover\:text-violet-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1))
}
.group\/bindline:hover .group-hover\/bindline\:opacity-100 {
  opacity: 1
}
.group\/bindpill:hover .group-hover\/bindpill\:opacity-100 {
  opacity: 1
}
.group\/bubble:hover .group-hover\/bubble\:opacity-100 {
  opacity: 1
}
.group\/col:hover .group-hover\/col\:opacity-100 {
  opacity: 1
}
.group\/copyable-table:hover .group-hover\/copyable-table\:opacity-100 {
  opacity: 1
}
.group\/copyable:hover .group-hover\/copyable\:opacity-100 {
  opacity: 1
}
.group\/folder:hover .group-hover\/folder\:opacity-100 {
  opacity: 1
}
.group\/mermaid:hover .group-hover\/mermaid\:opacity-100 {
  opacity: 1
}
.group\/proj:hover .group-hover\/proj\:opacity-100 {
  opacity: 1
}
.group\/row:hover .group-hover\/row\:opacity-100 {
  opacity: 1
}
.group\/section:hover .group-hover\/section\:opacity-100 {
  opacity: 1
}
.group\/tv2row:hover .group-hover\/tv2row\:opacity-100 {
  opacity: 1
}
.group:hover .group-hover\:\!opacity-60 {
  opacity: 0.6 !important
}
.group:hover .group-hover\:opacity-0 {
  opacity: 0
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1
}
.group\/collapse-rail:focus .group-focus\/collapse-rail\:border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-rgb) / var(--tw-border-opacity, 1))
}
.aria-\[invalid\=true\]\:border-red-500[aria-invalid="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
}
.aria-\[invalid\=true\]\:focus\:border-red-500:focus[aria-invalid="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
}
.aria-\[invalid\=true\]\:focus\:ring-red-500\/40:focus[aria-invalid="true"] {
  --tw-ring-color: rgb(239 68 68 / 0.4)
}
.group[data-selected="true"] .group-data-\[selected\=true\]\:block {
  display: block
}
.group[data-selected="true"] .group-data-\[selected\=true\]\:opacity-100 {
  opacity: 1
}
@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:opacity-\[var\(--tv2-warmth\2c 0\)\] {
    opacity: var(--tv2-warmth,0)
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:animate-none {
    animation: none
  }
  .motion-reduce\:opacity-0 {
    opacity: 0
  }
  .motion-reduce\:transition-none {
    transition-property: none
  }
}
.dark\:border-\[\#5f6368\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(95 99 104 / var(--tw-border-opacity, 1))
}
.dark\:border-red-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1))
}
.dark\:bg-\[\#131314\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(19 19 20 / var(--tw-bg-opacity, 1))
}
.dark\:bg-accent\/10:is(.dark *) {
  background-color: rgb(var(--accent-rgb) / 0.1)
}
.dark\:bg-amber-500\/30:is(.dark *) {
  background-color: rgb(245 158 11 / 0.3)
}
.dark\:bg-amber-900\/10:is(.dark *) {
  background-color: rgb(120 53 15 / 0.1)
}
.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: rgb(120 53 15 / 0.2)
}
.dark\:bg-amber-900\/40:is(.dark *) {
  background-color: rgb(120 53 15 / 0.4)
}
.dark\:bg-blue-900\/40:is(.dark *) {
  background-color: rgb(30 58 138 / 0.4)
}
.dark\:bg-emerald-900\/40:is(.dark *) {
  background-color: rgb(6 78 59 / 0.4)
}
.dark\:bg-green-900\/30:is(.dark *) {
  background-color: rgb(20 83 45 / 0.3)
}
.dark\:bg-red-900\/30:is(.dark *) {
  background-color: rgb(127 29 29 / 0.3)
}
.dark\:bg-red-900\/40:is(.dark *) {
  background-color: rgb(127 29 29 / 0.4)
}
.dark\:bg-violet-900\/40:is(.dark *) {
  background-color: rgb(76 29 149 / 0.4)
}
.dark\:text-\[\#e3e3e3\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(227 227 227 / var(--tw-text-opacity, 1))
}
.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1))
}
.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1))
}
.dark\:text-amber-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1))
}
.dark\:text-blue-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1))
}
.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1))
}
.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1))
}
.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1))
}
.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}
.dark\:text-slate-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1))
}
.dark\:text-violet-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1))
}
.dark\:hover\:bg-\[\#1e1f20\]:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 31 32 / var(--tw-bg-opacity, 1))
}
.dark\:hover\:bg-red-900\/20:hover:is(.dark *) {
  background-color: rgb(127 29 29 / 0.2)
}
@media not all and (min-width: 768px) {
  .max-md\:min-w-9 {
    min-width: 2.25rem
  }
  .max-md\:pe-16 {
    padding-inline-end: 4rem
  }
  .max-md\:pe-28 {
    padding-inline-end: 7rem
  }
  .max-md\:pe-\[calc\(3rem\+2px\)\] {
    padding-inline-end: calc(3rem + 2px)
  }
  .max-md\:opacity-100 {
    opacity: 1
  }
}
@media (min-width: 640px) {
  .sm\:left-12 {
    left: 3rem
  }
  .sm\:col-span-2 {
    grid-column: span 2 / span 2
  }
  .sm\:block {
    display: block
  }
  .sm\:inline {
    display: inline
  }
  .sm\:flex {
    display: flex
  }
  .sm\:table-cell {
    display: table-cell
  }
  .sm\:w-56 {
    width: 14rem
  }
  .sm\:w-64 {
    width: 16rem
  }
  .sm\:w-72 {
    width: 18rem
  }
  .sm\:w-\[940px\] {
    width: 940px
  }
  .sm\:min-w-\[640px\] {
    min-width: 640px
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }
  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_7rem_6rem_7rem_6\.5rem_3\.5rem_4rem\] {
    grid-template-columns: minmax(0,1fr) 7rem 6rem 7rem 6.5rem 3.5rem 4rem
  }
  .sm\:flex-row {
    flex-direction: row
  }
  .sm\:items-end {
    align-items: flex-end
  }
  .sm\:items-center {
    align-items: center
  }
  .sm\:justify-between {
    justify-content: space-between
  }
  .sm\:border-l {
    border-left-width: 1px
  }
  .sm\:p-6 {
    padding: 1.5rem
  }
  .sm\:p-8 {
    padding: 2rem
  }
  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }
  .sm\:pl-3 {
    padding-left: 0.75rem
  }
  .sm\:pt-0 {
    padding-top: 0px
  }
}
@media (min-width: 768px) {
  .md\:pointer-events-none {
    pointer-events: none
  }
  .md\:sticky {
    position: sticky
  }
  .md\:left-auto {
    left: auto
  }
  .md\:right-4 {
    right: 1rem
  }
  .md\:top-\[calc\(-1rem\+4px\)\] {
    top: calc(-1rem + 4px)
  }
  .md\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
  }
  .md\:-mb-3 {
    margin-bottom: -0.75rem
  }
  .md\:mb-6 {
    margin-bottom: 1.5rem
  }
  .md\:ml-0 {
    margin-left: 0px
  }
  .md\:mt-6 {
    margin-top: 1.5rem
  }
  .md\:line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none
  }
  .md\:block {
    display: block
  }
  .md\:inline {
    display: inline
  }
  .md\:flex {
    display: flex
  }
  .md\:hidden {
    display: none
  }
  .md\:h-12 {
    height: 3rem
  }
  .md\:h-3\.5 {
    height: 0.875rem
  }
  .md\:min-h-0 {
    min-height: 0px
  }
  .md\:w-3\.5 {
    width: 0.875rem
  }
  .md\:w-32 {
    width: 8rem
  }
  .md\:w-48 {
    width: 12rem
  }
  .md\:w-52 {
    width: 13rem
  }
  .md\:w-56 {
    width: 14rem
  }
  .md\:w-96 {
    width: 24rem
  }
  .md\:w-\[240px\] {
    width: 240px
  }
  .md\:w-\[260px\] {
    width: 260px
  }
  .md\:w-\[268px\] {
    width: 268px
  }
  .md\:w-\[380px\] {
    width: 380px
  }
  .md\:w-\[420px\] {
    width: 420px
  }
  .md\:w-full {
    width: 100%
  }
  .md\:min-w-0 {
    min-width: 0px
  }
  .md\:min-w-\[18rem\] {
    min-width: 18rem
  }
  .md\:max-w-\[80\%\] {
    max-width: 80%
  }
  .md\:max-w-none {
    max-width: none
  }
  .md\:flex-1 {
    flex: 1 1 0%
  }
  .md\:shrink-0 {
    flex-shrink: 0
  }
  .md\:columns-2 {
    -moz-columns: 2;
         columns: 2
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
  .md\:grid-cols-\[240px_1fr\] {
    grid-template-columns: 240px 1fr
  }
  .md\:grid-cols-\[auto_1fr_1\.5fr_1\.4fr_auto\] {
    grid-template-columns: auto 1fr 1.5fr 1.4fr auto
  }
  .md\:flex-row {
    flex-direction: row
  }
  .md\:flex-col {
    flex-direction: column
  }
  .md\:flex-wrap {
    flex-wrap: wrap
  }
  .md\:items-start {
    align-items: flex-start
  }
  .md\:items-end {
    align-items: flex-end
  }
  .md\:items-center {
    align-items: center
  }
  .md\:justify-start {
    justify-content: flex-start
  }
  .md\:justify-end {
    justify-content: flex-end
  }
  .md\:justify-between {
    justify-content: space-between
  }
  .md\:gap-3 {
    gap: 0.75rem
  }
  .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
  }
  .md\:self-start {
    align-self: flex-start
  }
  .md\:overflow-visible {
    overflow: visible
  }
  .md\:overflow-x-visible {
    overflow-x: visible
  }
  .md\:truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
  .md\:whitespace-normal {
    white-space: normal
  }
  .md\:border-b-0 {
    border-bottom-width: 0px
  }
  .md\:border-l {
    border-left-width: 1px
  }
  .md\:border-r {
    border-right-width: 1px
  }
  .md\:border-surface-200 {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1))
  }
  .md\:bg-surface-300\/20 {
    background-color: rgb(var(--color-surface-300-rgb) / 0.2)
  }
  .md\:bg-surface-300\/70 {
    background-color: rgb(var(--color-surface-300-rgb) / 0.7)
  }
  .md\:p-1 {
    padding: 0.25rem
  }
  .md\:p-1\.5 {
    padding: 0.375rem
  }
  .md\:p-4 {
    padding: 1rem
  }
  .md\:p-6 {
    padding: 1.5rem
  }
  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }
  .md\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
  }
  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
  }
  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
  }
  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
  }
  .md\:pb-2 {
    padding-bottom: 0.5rem
  }
  .md\:pb-3 {
    padding-bottom: 0.75rem
  }
  .md\:pb-6 {
    padding-bottom: 1.5rem
  }
  .md\:pr-3 {
    padding-right: 0.75rem
  }
  .md\:pt-5 {
    padding-top: 1.25rem
  }
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
  }
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
  }
  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem
  }
  .md\:opacity-0 {
    opacity: 0
  }
  .md\:backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
  }
  .md\:focus-within\:opacity-100:focus-within {
    opacity: 1
  }
  .md\:hover\:-translate-y-\[1px\]:hover {
    --tw-translate-y: -1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }
  .md\:hover\:bg-surface-300\/70:hover {
    background-color: rgb(var(--color-surface-300-rgb) / 0.7)
  }
  .md\:hover\:shadow-sm:hover {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }
  .md\:focus\:opacity-100:focus {
    opacity: 1
  }
  .md\:focus-visible\:opacity-100:focus-visible {
    opacity: 1
  }
  .group:focus-within .md\:group-focus-within\:opacity-100 {
    opacity: 1
  }
  .group\/bubble:hover .md\:group-hover\/bubble\:pointer-events-auto {
    pointer-events: auto
  }
  .group\/bubble:hover .md\:group-hover\/bubble\:opacity-100 {
    opacity: 1
  }
  .group:hover .md\:group-hover\:opacity-100 {
    opacity: 1
  }
}
@media (min-width: 1024px) {
  .lg\:block {
    display: block
  }
  .lg\:max-w-4xl {
    max-width: 56rem
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}
@media (min-width: 1280px) {
  .xl\:max-w-5xl {
    max-width: 64rem
  }
  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}
@media (min-width: 1536px) {
  .\32xl\:max-w-6xl {
    max-width: 72rem
  }
}
.rtl\:-scale-x-100:where([dir="rtl"], [dir="rtl"] *) {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none
}
.\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none
}
.\[\&\>\*\:first-child\]\:mt-0>*:first-child {
  margin-top: 0px
}
.\[\&\>\*\:last-child\]\:mb-0>*:last-child {
  margin-bottom: 0px
}
.\[\&\>\*\:nth-child\(n\+3\)\]\:border-l>*:nth-child(n+3) {
  border-left-width: 1px
}
.\[\&\>\*\:nth-child\(n\+3\)\]\:border-\[var\(--arij-border\2c \#dfe1e6\)\]>*:nth-child(n+3) {
  border-color: var(--arij-border,#dfe1e6)
}
.\[\&\>\*\]\:pointer-events-auto>* {
  pointer-events: auto
}
.\[\&\>\*\]\:shrink-0>* {
  flex-shrink: 0
}
.\[\&\>\:first-child\]\:mt-0>:first-child {
  margin-top: 0px
}
.\[\&\>\:last-child\]\:mb-0>:last-child {
  margin-bottom: 0px
}
.\[\&\>button\]\:flex-none>button {
  flex: none
}
.\[\&\>button\]\:whitespace-nowrap>button {
  white-space: nowrap
}
.\[\&\>button\]\:px-3>button {
  padding-left: 0.75rem;
  padding-right: 0.75rem
}
.\[\&\>div\]\:my-0>div {
  margin-top: 0px;
  margin-bottom: 0px
}
.\[\&\>div\]\:mb-5>div {
  margin-bottom: 1.25rem
}
.\[\&\>div\]\:leading-7>div {
  line-height: 1.75rem
}
.\[\&\>p\:first-child\]\:inline>p:first-child {
  display: inline
}
.\[\&_a\]\:break-all a {
  word-break: break-all
}
.\[\&_a\]\:text-accent a {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1))
}
.\[\&_a\]\:underline a {
  text-decoration-line: underline
}
.\[\&_a\]\:underline-offset-2 a {
  text-underline-offset: 2px
}
.\[\&_a\]\:hover\:underline:hover a {
  text-decoration-line: underline
}
.\[\&_em\]\:italic em {
  font-style: italic
}
.\[\&_figcaption\]\:mt-2 figcaption {
  margin-top: 0.5rem
}
.\[\&_figcaption\]\:text-center figcaption {
  text-align: center
}
.\[\&_figcaption\]\:text-xs figcaption {
  font-size: 0.75rem;
  line-height: 1rem
}
.\[\&_figcaption\]\:text-surface-500 figcaption {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-500-rgb) / var(--tw-text-opacity, 1))
}
.\[\&_figure\]\:my-6 figure {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem
}
.\[\&_h1\]\:mb-3 h1 {
  margin-bottom: 0.75rem
}
.\[\&_h1\]\:mt-4 h1 {
  margin-top: 1rem
}
.\[\&_h1\]\:text-xl h1 {
  font-size: 1.25rem;
  line-height: 1.75rem
}
.\[\&_h1\]\:font-bold h1 {
  font-weight: 700
}
.\[\&_h2\]\:mb-2 h2 {
  margin-bottom: 0.5rem
}
.\[\&_h2\]\:mt-3 h2 {
  margin-top: 0.75rem
}
.\[\&_h2\]\:text-lg h2 {
  font-size: 1.125rem;
  line-height: 1.75rem
}
.\[\&_h2\]\:font-semibold h2 {
  font-weight: 600
}
.\[\&_h3\]\:mb-2 h3 {
  margin-bottom: 0.5rem
}
.\[\&_h3\]\:mt-3 h3 {
  margin-top: 0.75rem
}
.\[\&_h3\]\:text-base h3 {
  font-size: 1rem;
  line-height: 1.5rem
}
.\[\&_h3\]\:font-semibold h3 {
  font-weight: 600
}
.\[\&_img\]\:max-h-96 img {
  max-height: 24rem
}
.\[\&_li\]\:mb-1 li {
  margin-bottom: 0.25rem
}
.\[\&_li\]\:leading-7 li {
  line-height: 1.75rem
}
.\[\&_li\]\:text-surface-800 li {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-800-rgb) / var(--tw-text-opacity, 1))
}
.\[\&_ol\]\:mb-2 ol {
  margin-bottom: 0.5rem
}
.\[\&_ol\]\:list-\[lower-alpha\] ol {
  list-style-type: lower-alpha
}
.\[\&_ol\]\:list-decimal ol {
  list-style-type: decimal
}
.\[\&_ol\]\:pl-5 ol {
  padding-left: 1.25rem
}
.\[\&_ol_ol\]\:list-\[lower-roman\] ol ol {
  list-style-type: lower-roman
}
.\[\&_p\]\:my-0 p {
  margin-top: 0px;
  margin-bottom: 0px
}
.\[\&_p\]\:mb-2 p {
  margin-bottom: 0.5rem
}
.\[\&_p\]\:mb-5 p {
  margin-bottom: 1.25rem
}
.\[\&_p\]\:leading-7 p {
  line-height: 1.75rem
}
.\[\&_p\]\:text-surface-800 p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface-800-rgb) / var(--tw-text-opacity, 1))
}
.\[\&_pre\]\:rounded-lg pre {
  border-radius: 0.5rem
}
.\[\&_pre\]\:bg-surface-100 pre {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-100-rgb) / var(--tw-bg-opacity, 1))
}
.\[\&_pre\]\:p-4 pre {
  padding: 1rem
}
.\[\&_strong\]\:font-semibold strong {
  font-weight: 600
}
.\[\&_table\]\:mb-3 table {
  margin-bottom: 0.75rem
}
.\[\&_table\]\:w-full table {
  width: 100%
}
.\[\&_table\]\:border-collapse table {
  border-collapse: collapse
}
.\[\&_td\]\:border td {
  border-width: 1px
}
.\[\&_td\]\:border-b td {
  border-bottom-width: 1px
}
.\[\&_td\]\:border-surface-200 td {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1))
}
.\[\&_td\]\:px-2 td {
  padding-left: 0.5rem;
  padding-right: 0.5rem
}
.\[\&_td\]\:px-3 td {
  padding-left: 0.75rem;
  padding-right: 0.75rem
}
.\[\&_td\]\:py-1 td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem
}
.\[\&_td\]\:py-1\.5 td {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem
}
.\[\&_td\]\:text-xs td {
  font-size: 0.75rem;
  line-height: 1rem
}
.\[\&_th\]\:border th {
  border-width: 1px
}
.\[\&_th\]\:border-b th {
  border-bottom-width: 1px
}
.\[\&_th\]\:border-surface-200 th {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-200-rgb) / var(--tw-border-opacity, 1))
}
.\[\&_th\]\:border-surface-300 th {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-surface-300-rgb) / var(--tw-border-opacity, 1))
}
.\[\&_th\]\:bg-surface-50 th {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-50-rgb) / var(--tw-bg-opacity, 1))
}
.\[\&_th\]\:px-2 th {
  padding-left: 0.5rem;
  padding-right: 0.5rem
}
.\[\&_th\]\:px-3 th {
  padding-left: 0.75rem;
  padding-right: 0.75rem
}
.\[\&_th\]\:py-1 th {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem
}
.\[\&_th\]\:py-1\.5 th {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem
}
.\[\&_th\]\:text-left th {
  text-align: left
}
.\[\&_th\]\:text-xs th {
  font-size: 0.75rem;
  line-height: 1rem
}
.\[\&_th\]\:font-medium th {
  font-weight: 500
}
.\[\&_th\]\:font-semibold th {
  font-weight: 600
}
.\[\&_ul\]\:mb-2 ul {
  margin-bottom: 0.5rem
}
.\[\&_ul\]\:list-\[circle\] ul {
  list-style-type: circle
}
.\[\&_ul\]\:list-disc ul {
  list-style-type: disc
}
.\[\&_ul\]\:pl-5 ul {
  padding-left: 1.25rem
}
.\[\&_ul_ul\]\:list-\[square\] ul ul {
  list-style-type: square
}
@media(hover:hover) {
  .\[\@media\(hover\:hover\)\]\:opacity-0 {
    opacity: 0
  }
  .\[\@media\(hover\:hover\)\]\:transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
  }
  .\[\@media\(hover\:hover\)\]\:hover\:bg-surface-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-surface-200-rgb) / var(--tw-bg-opacity, 1))
  }
  .\[\@media\(hover\:hover\)\]\:hover\:text-accent:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--accent-rgb) / var(--tw-text-opacity, 1))
  }
  .\[\@media\(hover\:hover\)\]\:hover\:text-surface-700:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-surface-700-rgb) / var(--tw-text-opacity, 1))
  }
  .group:focus-within .\[\@media\(hover\:hover\)\]\:group-focus-within\:opacity-100 {
    opacity: 1
  }
  .group:hover .\[\@media\(hover\:hover\)\]\:group-hover\:opacity-100 {
    opacity: 1
  }
}
@media(pointer:coarse) {
  .\[\@media\(pointer\:coarse\)\]\:\!h-\[22px\] {
    height: 22px !important
  }
  .\[\@media\(pointer\:coarse\)\]\:\!w-\[22px\] {
    width: 22px !important
  }
  .\[\@media\(pointer\:coarse\)\]\:\!border-accent\/60 {
    border-color: rgb(var(--accent-rgb) / 0.6) !important
  }
  .\[\@media\(pointer\:coarse\)\]\:\!opacity-60 {
    opacity: 0.6 !important
  }
}