/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/tokens/src/tokens.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
  FILAMENT — design token SSOT
  UI themes: light = clear white system · dark = cool grey/black.
  Brand ramp (--g-*, --paper) kept for specimens; crimson filament + Signal.
  Glass = staged. Solid = committed. Ribbon logo only.
*/

:root {
  /* -- warm graphite ramp (never theme-swapped) -- */
  --g-000: #0a0908;
  --g-050: #0e0d0b;
  --g-100: #14120f;
  --g-150: #1a1814;
  --g-200: #221f1a;
  --g-300: #2e2b25;
  --g-400: #443f37;
  --g-500: #5f594f;
  --g-600: #857e72;
  --g-700: #a49d91;
  --g-800: #c9c3b8;
  --g-900: #e9e5dc;
  --g-950: #f3f0e9;
  --paper: #f0e6d8;

  /* -- brand filament --
   * Workspace override: set `--color-primary` (and optionally hover/deep/soft).
   * `--filament` follows primary; charts resolve
   * `--chart-series-accent` → `--filament` → `--color-primary`.
   * Charts-only: set `--chart-series-accent` after importing chart styles.
   */
  --color-primary: #d7025c;
  --color-primary-hover: #b5014d;
  --color-primary-deep: #7a0032;
  --color-primary-fg: #ffffff;
  --color-primary-soft: rgba(215, 2, 92, 0.14);
  --filament: var(--color-primary);
  --filament-hover: var(--color-primary-hover);
  --filament-soft: var(--color-primary-soft);

  /* -- conflict signal (never branding) -- */
  --signal: #ff3d00;
  --signal-soft: rgba(255, 61, 0, 0.14);

  /* -- type -- */
  --font-ui: "Source Sans 3", system-ui, sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: var(--font-jbmono, "JetBrains Mono"), ui-monospace, monospace;

  /* -- type scale (slightly larger base; display leans heavy) -- */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-lg: 1.3125rem;
  --t-xl: clamp(1.625rem, 1.15rem + 1.25vw, 2.125rem);
  --t-2xl: clamp(2.125rem, 1.5rem + 2.3vw, 3.5rem);
  --t-3xl: clamp(2.875rem, 1.7rem + 4.6vw, 5.75rem);
  --t-hero: clamp(3.5rem, 1.6rem + 7.8vw, 9rem);
  --t-hero-film: clamp(3.75rem, 1.6rem + 8.8vw, 10.5rem);

  /* -- tracking (Apple-tight display, calm UI) -- */
  --track-ui: -0.011em;
  --track-tight: -0.022em;
  --track-display: -0.038em;
  --track-hero: -0.045em;
  --track-label: 0.11em;

  /* -- space -- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;
  --s-48: 12rem;
  --s-64: 16rem;
  --s-80: 20rem;

  /* Soft Fusion geometry — evidence panels soft-square, instruments full pill */
  --r-draw: 8px;
  --r-soft: 12px;
  --r-pill: 999px;
  --glass-radius-dock: 999px;

  /* Semantic aliases — prefer these in shell / product CSS so intent stays clear.
   * Nesting rule: canvas (0) ⊃ chrome (soft) ⊃ record (draw) ⊃ instrument (pill). */
  --r-instrument: var(--r-pill);
  --r-chrome: var(--r-soft);
  --r-record: var(--r-draw);
  --r-canvas: 0px;

  /* -- signature: the seam --
   * A 2px nerve on the leading edge of the record that carries attention.
   * One live seam per view; records never glow.
   */
  --seam-w: 2px;
  --seam-live: var(--filament);
  --seam-attention: var(--signal);
  --seam-committed: var(--ink);
  --seam-quiet: var(--line-strong);

  --depth-tilt-x: 56deg;
  --depth-tilt-z: -38deg;
  --depth-gap: 44px;

  /* Motion — slower, more settled (premium weight) */
  --dur-tick: 160ms;
  --dur-stage: 520ms;
  --dur-settle: 900ms;
  --dur-commit: 320ms;
  --dur-scene: 1400ms;
  --ease-stage: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-commit: cubic-bezier(0.4, 0, 0.2, 1);

  --maxw: 1360px;
  --header-h: 72px;
  --header-bar-h: 72px;

  --glass-blur: 22px;
  --glass-blur-soft: 12px;
  --glass-blur-strong: 32px;
  --glass-saturate: 1.12;
  --glass-saturate-chrome: 1.18;
  /* Dock / composer — full instrument pill (matches --r-pill) */
  --glass-radius-dock: 999px;

  /* Professional halo defaults — whisper only (overridden per theme) */
  --halo-rim: rgba(255, 255, 255, 0.04);
  --halo-core: rgba(215, 2, 92, 0.05);
  --stage-bg: #101012;
  --stage-halo:
    radial-gradient(ellipse 70% 52% at 50% -10%, var(--halo-core), transparent 64%);
  --ambient-glow:
    radial-gradient(ellipse 100% 65% at 50% -32%, var(--halo-rim), transparent 58%),
    radial-gradient(ellipse 42% 30% at 50% -2%, var(--halo-core), transparent 55%);
}

/* -- dark (deep carbon UI) -- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-line: rgba(255, 255, 255, 0.11);
  --glass-paper-bg: rgba(255, 255, 255, 0.03);
  --glass-paper-line: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 1px 0 var(--glass-highlight) inset, 0 12px 32px rgba(0, 0, 0, 0.28);
  --glass-shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 32px rgba(0, 0, 0, 0.1);
  --glass-shadow-chrome: 0 1px 0 var(--glass-highlight) inset, 0 8px 24px rgba(0, 0, 0, 0.26);
  --glass-shadow-dock: 0 1px 0 var(--glass-highlight) inset, 0 12px 32px rgba(0, 0, 0, 0.28);
  --glass-shadow-soft: none;
  --glass-shadow-overlay: 0 1px 0 var(--glass-highlight) inset, 0 16px 40px rgba(0, 0, 0, 0.32);

  /* Deep carbon — dark, not washed grey */
  --bg: #0a0a0c;
  --surface: #121214;
  --surface-2: #1a1a1e;
  --line: #2a2a30;
  --line-strong: #3f3f48;
  --ink: #fafafa;
  --ink-2: #c4c4cc;
  --ink-3: #8b8b96;

  --selection-bg: #fafafa;
  --selection-fg: #0a0a0c;

  --contrast-bg: #fafafa;
  --contrast-fg: #121214;
  --plane-solid-bg: #fafafa;
  --plane-solid-ink: #52525b;

  /* Specimen paper room — brand warm tissue (not UI chrome) */
  --room-paper-bg: var(--paper);
  --room-paper-ink: var(--g-100);
  --room-paper-line: #cbb89a;
  --room-paper-line-strong: #bda88a;
  --room-paper-surface: #e8dcc8;
  --room-paper-surface-2: #ddd0b8;
  --room-paper-ink-2: var(--g-500);
  --room-paper-ink-3: var(--g-600);

  --footer-bg: #0e0e10;

  --chrome-bg: rgba(10, 10, 12, 0.72);
  --chrome-bg-scrolled: rgba(10, 10, 12, 0.88);
  --chrome-bg-open: rgba(18, 18, 20, 0.96);
  --chrome-border: rgba(255, 255, 255, 0.08);
  --chrome-border-strong: rgba(255, 255, 255, 0.12);
  --chrome-border-open: rgba(255, 255, 255, 0.14);
  --chrome-highlight: rgba(255, 255, 255, 0.1);
  --chrome-highlight-strong: rgba(255, 255, 255, 0.14);
  --chrome-inset: rgba(255, 255, 255, 0.04);
  --chrome-inset-strong: rgba(255, 255, 255, 0.06);
  --chrome-shadow: rgba(0, 0, 0, 0.45);
  --chrome-shadow-open: rgba(0, 0, 0, 0.58);
  --chrome-backdrop: rgba(0, 0, 0, 0.58);
  --chrome-sheet: rgba(10, 10, 12, 0.97);
  --chrome-divider: rgba(255, 255, 255, 0.08);
  --chrome-divider-fade: rgba(255, 255, 255, 0.14);
  --chrome-cta-inset: rgba(255, 255, 255, 0.12);
  --chrome-cta-shadow: rgba(215, 2, 92, 0.22);

  --elev-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 48px rgba(0, 0, 0, 0.5);
  --elev-shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 20px 48px rgba(0, 0, 0, 0.12);

  /* Dark halo: cool rim + whisper filament (no neon wash) */
  --halo-rim: rgba(255, 255, 255, 0.035);
  --halo-core: rgba(215, 2, 92, 0.055);
  --stage-bg: #101012;
  --stage-halo:
    radial-gradient(ellipse 70% 52% at 50% -10%, var(--halo-core), transparent 64%);
  --ambient-glow:
    radial-gradient(ellipse 100% 65% at 50% -32%, var(--halo-rim), transparent 58%),
    radial-gradient(ellipse 42% 30% at 50% -2%, var(--halo-core), transparent 55%);
}

/* -- light (clear white system) -- */
[data-theme="light"] {
  color-scheme: light;

  /* Soft Fusion light — solid Dropbox panels + modern instrument pills */
  --r-draw: 8px;
  --r-soft: 12px;
  --r-pill: 999px;
  --glass-radius-dock: 999px;
  --r-instrument: var(--r-pill);
  --r-chrome: var(--r-soft);
  --r-record: var(--r-draw);
  --r-canvas: 0px;
  --glass-blur: 0px;
  --glass-blur-soft: 0px;
  --glass-blur-strong: 0px;
  --glass-bg: #ffffff;
  --glass-bg-strong: #ffffff;
  --glass-line: #e8e8ea;
  --glass-paper-bg: #ffffff;
  --glass-paper-line: #e8e8ea;
  --glass-highlight: transparent;
  --glass-shadow-soft: none;
  --glass-shadow-chrome: none;
  --glass-shadow: none;
  --glass-shadow-paper: none;
  --glass-shadow-dock:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 24px rgba(24, 24, 27, 0.06);
  --glass-shadow-overlay:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 24px rgba(24, 24, 27, 0.08);
  --glass-shadow-raised:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 12px 32px rgba(24, 24, 27, 0.1);

  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f0f0f2;
  --line: #e8e8ea;
  --line-strong: #dcdce0;
  --ink: #18181b;
  --ink-2: #3f3f46;
  --ink-3: #71717a;

  --color-primary-hover: #a7014a;
  --color-primary-deep: #6e0030;
  --color-primary-soft: rgba(215, 2, 92, 0.08);

  --selection-bg: #18181b;
  --selection-fg: #ffffff;

  --contrast-bg: #18181b;
  --contrast-fg: #fafafa;
  --plane-solid-bg: #18181b;
  --plane-solid-ink: #a1a1aa;

  --room-paper-bg: var(--paper);
  --room-paper-ink: var(--g-100);
  --room-paper-line: #cbb89a;
  --room-paper-line-strong: #bda88a;
  --room-paper-surface: #e8dcc8;
  --room-paper-surface-2: #ddd0b8;
  --room-paper-ink-2: var(--g-500);
  --room-paper-ink-3: var(--g-600);

  --footer-bg: #fafafa;

  --chrome-bg: rgba(255, 255, 255, 0.86);
  --chrome-bg-scrolled: rgba(255, 255, 255, 0.94);
  --chrome-bg-open: rgba(255, 255, 255, 0.98);
  --chrome-border: rgba(24, 24, 27, 0.08);
  --chrome-border-strong: rgba(24, 24, 27, 0.12);
  --chrome-border-open: rgba(24, 24, 27, 0.14);
  --chrome-highlight: rgba(24, 24, 27, 0.05);
  --chrome-highlight-strong: rgba(24, 24, 27, 0.09);
  --chrome-inset: rgba(255, 255, 255, 0.85);
  --chrome-inset-strong: rgba(255, 255, 255, 0.95);
  --chrome-shadow: rgba(24, 24, 27, 0.04);
  --chrome-shadow-open: rgba(24, 24, 27, 0.08);
  --chrome-backdrop: rgba(24, 24, 27, 0.18);
  --chrome-sheet: rgba(255, 255, 255, 0.98);
  --chrome-divider: rgba(24, 24, 27, 0.08);
  --chrome-divider-fade: rgba(24, 24, 27, 0.12);
  --chrome-cta-inset: rgba(255, 255, 255, 0.14);
  --chrome-cta-shadow: rgba(215, 2, 92, 0.08);

  --elev-shadow: none;
  --elev-shadow-paper: none;

  /* Quiet white field — Metal/Linkup restraint */
  --halo-rim: rgba(255, 255, 255, 1);
  --halo-core: rgba(215, 2, 92, 0.014);
  --stage-bg: #fafafa;
  --stage-halo:
    radial-gradient(ellipse 70% 52% at 50% -10%, var(--halo-core), transparent 66%);
  --ambient-glow:
    radial-gradient(ellipse 110% 70% at 50% -34%, var(--halo-rim), transparent 55%),
    radial-gradient(ellipse 40% 28% at 50% 0%, var(--halo-core), transparent 56%);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/css/src/design-system/fonts.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
  Filament type faces — Source Sans 3 (UI) · Source Serif 4 (display) · JetBrains Mono (scarce).

  Primary path for theme.css + theme-catalog.css (CSP-safe: no Google).
  Static HTML kits without a bundler may use ./fonts.cdn.css instead.
*/
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/SourceSans3-Regular.827817a6.woff2) format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/SourceSans3-Medium.f8d8377b.woff2) format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/SourceSans3-SemiBold.580e937f.woff2) format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/SourceSerif4-Regular.40cb693c.woff2) format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/SourceSerif4-SemiBold.f09b3574.woff2) format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url(/_next/static/media/SourceSerif4-Italic-latin-ext.25bba0df.woff2) format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url(/_next/static/media/SourceSerif4-Italic.522b2995.woff2) format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/_next/static/media/JetBrainsMono-VariableFont_wght.4017ce1c.woff2) format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url(/_next/static/media/JetBrainsMono-Italic-VariableFont_wght.82a9551d.woff2) format("woff2");
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/styles/base.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Filament base — reset + document defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
}

html[data-theme="light"] {
  color-scheme: light;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  margin: 0;
}

/*
  Soft control reset — catalog skips Tailwind Preflight.
  Do not set padding here: this sheet is unlayered and would beat
  Tailwind @layer utilities (rail / theme toggle).
*/
button {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
}

:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/styles/materials.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Filament materials — glass = staged, solid = committed */
.fi-glass,
.glass,
.glass-panel {
  --_glass-bg: var(--glass-bg);
  --_glass-blur: var(--glass-blur);
  --_glass-saturate: var(--glass-saturate);
  background: var(--_glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}

.fi-glass-strong,
.glass-strong,
.glass-panel-strong {
  --_glass-bg: var(--glass-bg-strong);
  --_glass-blur: var(--glass-blur);
  --_glass-saturate: var(--glass-saturate);
  background: var(--_glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}

.fi-glass-chrome,
.glass-chrome {
  --_glass-bg: var(--glass-bg-strong);
  --_glass-blur: var(--glass-blur);
  --_glass-saturate: var(--glass-saturate-chrome);
  background: var(--_glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow-chrome);
  isolation: isolate;
}

.fi-glass-pill,
.glass-pill {
  border-radius: var(--r-pill);
}

.fi-glass-drawn,
.glass-drawn {
  border-radius: var(--r-draw);
}

/* Overlay panels (popover / floating glass) */
.fi-glass-overlay,
.glass-overlay {
  --_glass-bg: var(--glass-bg-strong);
  --_glass-blur: var(--glass-blur);
  --_glass-saturate: var(--glass-saturate);
  background: var(--_glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow-overlay, var(--glass-shadow-chrome));
  isolation: isolate;
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-glass,
  .fi-glass-strong,
  .fi-glass-chrome,
  .fi-glass-overlay,
  .glass,
  .glass-strong,
  .glass-chrome,
  .glass-overlay,
  .glass-panel,
  .glass-panel-strong {
    backdrop-filter: blur(var(--_glass-blur)) saturate(var(--_glass-saturate));
    -webkit-backdrop-filter: blur(var(--_glass-blur)) saturate(var(--_glass-saturate));
  }
}

.fi-solid,
.solid,
.committed,
[data-material="committed"],
[data-material="solid"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--surface) !important;
  border-color: var(--line-strong) !important;
  box-shadow: none;
}

/* ---------- Product instrument recipes (SSOT for auvy-os + Nuxt) ---------- */

/** Raised modal / sheet panel — drawn evidence radius */
.glass-modal-panel,
.fi-glass-modal {
  --_glass-bg: var(--bg);
  --_glass-blur: 0px;
  --_glass-saturate: 1;
  overflow: hidden;
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--glass-shadow-raised, var(--glass-shadow-overlay));
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/** Deep-frost on noisy canvases (maps, flows) */
.glass-modal-panel.glass-frost-2,
.fi-glass-modal.glass-frost-2 {
  --_glass-bg: var(--glass-bg-strong);
  --_glass-blur: calc(var(--glass-blur) * 1.25);
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 12px 40px -18px rgba(0, 0, 0, 0.45);
}

.glass-popover,
.fi-glass-popover {
  --_glass-bg: var(--bg);
  --_glass-blur: 0px;
  --_glass-saturate: 1;
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--glass-shadow-overlay);
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0.25rem;
}

.glass-dock-shell,
.fi-glass-dock {
  --_glass-bg: var(--bg);
  --_glass-blur: 0px;
  --_glass-saturate: 1;
  overflow: hidden;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.07);
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/** Instrument pill — alias for shell `.glass-chrome-pill` when shell.css is absent */
.fi-glass-chrome.glass-pill,
.glass-chrome.glass-pill {
  border-radius: var(--r-pill);
  box-shadow: var(--glass-shadow-chrome);
  padding: var(--s-1) var(--s-3);
}

.glass-lens-widget-shell {
  overflow: hidden;
  border-radius: var(--r-draw);
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  isolation: isolate;
}

.immersive-glass-card {
  overflow: hidden;
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--glass-shadow-raised, var(--glass-shadow-overlay));
  isolation: isolate;
  background-clip: padding-box;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.immersive-glass-card--composer {
  border-radius: var(--r-pill);
}

/** Non-dock composer paper — same material as dock instrument */
.composer-paper {
  border: 1px solid var(--line);
  background-color: var(--bg);
  border-radius: var(--r-pill);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.07);
  isolation: isolate;
  transition:
    background-color var(--dur-stage) var(--ease-stage),
    border-color var(--dur-tick) linear,
    box-shadow var(--dur-commit) var(--ease-commit);
}

.group:focus-within .composer-paper {
  border-color: color-mix(in srgb, var(--ink) 55%, var(--line));
  background-color: var(--bg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent),
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 14px 36px rgba(24, 24, 27, 0.1);
}

.app-tooltip {
  border-radius: var(--r-soft);
  padding: 0.375rem 0.75rem;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 24px rgba(24, 24, 27, 0.08);
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-tooltip-plain {
  border-radius: var(--r-draw);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background: transparent;
  padding: 0.375rem 0.75rem;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  box-shadow: none;
}

.modal-backdrop {
  background-color: transparent;
}

.modal-backdrop--immersive {
  background-color: color-mix(in srgb, var(--bg) 72%, transparent);
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-modal-panel,
  .fi-glass-modal,
  .glass-modal-panel.glass-frost-2,
  .fi-glass-modal.glass-frost-2,
  .glass-popover,
  .fi-glass-popover,
  .glass-dock-shell,
  .fi-glass-dock,
  .glass-lens-widget-shell,
  .immersive-glass-card,
  .composer-paper,
  .app-tooltip {
    backdrop-filter: blur(var(--_glass-blur, var(--glass-blur)))
      saturate(var(--_glass-saturate, var(--glass-saturate)));
    -webkit-backdrop-filter: blur(var(--_glass-blur, var(--glass-blur)))
      saturate(var(--_glass-saturate, var(--glass-saturate)));
  }

  .modal-backdrop--immersive {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

@supports not (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-backdrop--immersive {
    background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .modal-backdrop--immersive {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: color-mix(in srgb, var(--bg) 85%, transparent);
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/styles/signature.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
  FILAMENT SIGNATURE — the seam + figure voice

  Two marks carry the whole system, so nothing else has to shout:

  1. THE SEAM — a 2px nerve on the leading edge of the record that carries
     attention right now. `data-seam="live | attention | committed | quiet"`.
     One live seam per view. Records never glow, never lift on hover.
  2. THE FIGURE — numbers are display serif, tabular, and never wrap.
     Their label is mono, uppercase, wide-tracked: the ledger voice.
*/

[data-seam] {
  position: relative;
}

/* The seam rounds itself rather than clipping the record, so a seamed panel can
   still hold a scrollable table or an overflowing popover. */
[data-seam]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--seam-w);
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
  background: var(--_seam, var(--seam-quiet));
  /* The nerve fades out as it travels down the record. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  transition: background var(--dur-commit) var(--ease-commit);
}

[data-seam="live"] { --_seam: var(--seam-live); }
[data-seam="attention"] { --_seam: var(--seam-attention); }
[data-seam="committed"] { --_seam: var(--seam-committed); }
[data-seam="quiet"] { --_seam: var(--seam-quiet); }

/* Horizontal variant — for records read as a band (strips, docked rows). */
[data-seam][data-seam-edge="top"]::before {
  inset-block: 0 auto;
  inset-inline: 0;
  width: auto;
  height: var(--seam-w);
  mask-image: linear-gradient(to right, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
}

/* A seamed record gains breathing room so the nerve never crowds the text. */
[data-seam].fi-card,
[data-seam].card {
  padding-inline-start: calc(var(--s-8) + var(--seam-w));
}

/* Table rows cannot clip a pseudo-element, so the nerve rides the first cell. */
tr[data-seam] {
  position: static;
  overflow: visible;
}

tr[data-seam]::before {
  content: none;
}

tr[data-seam] > *:first-child {
  box-shadow: inset var(--seam-w) 0 0 var(--_seam, var(--seam-quiet));
  padding-inline-start: calc(var(--s-4) + var(--seam-w));
}

/* ---------- the figure voice ---------- */

.fi-stat__value,
.fi-figure,
.widget .stat,
.fi-ledger-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "tnum";
}

.fi-figure {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  white-space: nowrap;
  color: var(--ink);
}

.fi-figure__unit {
  margin-inline-start: 0.12em;
  font-size: 0.48em;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Button/Button.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Filament Button — crimson primary, glass staged, quiet underline */
.fi-btn,
.btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.015em;
  padding: 0.95em 1.95em;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink);
  transition:
    transform var(--dur-tick) var(--ease-commit),
    background var(--dur-stage) var(--ease-stage),
    color var(--dur-stage) var(--ease-stage),
    border-color var(--dur-stage) var(--ease-stage),
    box-shadow var(--dur-stage) var(--ease-stage);
  position: relative;
}
.fi-btn:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: scale(0.985);
}
.fi-btn:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fi-btn--sm { font-size: var(--t-xs); padding: 0.62em 1.35em; }
.fi-btn--md { font-size: var(--t-sm); padding: 0.95em 1.95em; }
.fi-btn--lg { font-size: var(--t-base); padding: 1.05em 2.35em; }

.fi-btn--primary,
.btn.primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
  box-shadow: none;
}
.fi-btn--primary:hover:not(:disabled),
.btn.primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: none;
}

.fi-btn--glass,
.btn.glass {
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink);
  box-shadow: none;
  isolation: isolate;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-btn--glass,
  .btn.glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.fi-btn--glass:hover:not(:disabled),
.btn.glass:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface);
}

.fi-btn--quiet,
.btn.quiet {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  color: var(--ink-2);
  border-radius: 0;
}
.fi-btn--quiet::after,
.btn.quiet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.45em;
  height: 1px;
  background: var(--ink);
  transition: right var(--dur-stage) var(--ease-stage);
}
.fi-btn--quiet:hover:not(:disabled),
.btn.quiet:hover:not(:disabled) {
  color: var(--ink);
}
.fi-btn--quiet:hover:not(:disabled)::after,
.btn.quiet:hover:not(:disabled)::after {
  right: 0;
}

.fi-btn--danger {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
  box-shadow: none;
}

.fi-btn__arr,
.btn .arr {
  font-family: var(--font-mono);
}
.fi-btn--loading {
  pointer-events: none;
  cursor: wait;
}
.fi-btn__spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fi-spin var(--dur-settle) linear infinite;
  flex-shrink: 0;
}
@keyframes fi-spin {
  to { transform: rotate(360deg); }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/IconButton/IconButton.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-icon-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  border: 1px solid transparent;
  transition:
    background var(--dur-tick) linear,
    color var(--dur-tick) linear,
    border-color var(--dur-tick) linear;
}

.fi-icon-btn--sm { width: 32px; height: 32px; }
.fi-icon-btn--md { width: 36px; height: 36px; }
.fi-icon-btn--lg { width: 44px; height: 44px; }

.fi-icon-btn--glass {
  background: var(--bg);
  border-color: var(--line);
}

.fi-icon-btn--glass:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.fi-icon-btn--quiet:hover {
  background: var(--surface);
  color: var(--ink);
}

.fi-icon-btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
  box-shadow: none;
}

.fi-icon-btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.fi-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fi-icon-btn:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: 2px;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Link/Link.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-link {
  color: var(--filament); font-weight: 500;
  text-underline-offset: 0.2em;
  transition: color var(--dur-tick) linear;
}
.fi-link:hover { color: var(--filament-hover); text-decoration: underline; }
.fi-link--quiet { color: var(--ink-2); }
.fi-link--quiet:hover { color: var(--ink); }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Chip/Chip.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-chip,
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.01em; padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--ink-2); background: transparent;
}
.fi-chip--sm { font-size: 0.68rem; padding: 4px 10px; gap: 6px; }
.fi-chip--md { font-size: 0.78rem; padding: 6px 14px; }
.fi-chip--lg { font-size: 0.875rem; padding: 8px 16px; }
.fi-chip:not(.fi-chip--dot)::before,
.chip:not(.fi-chip--dot)::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor;
}
.fi-chip--dot::before,
.chip.fi-chip--dot::before { content: none; }
.fi-chip__dot {
  width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor;
}
.fi-chip--verified,
.chip.verified {
  background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary);
}
.fi-chip--verified::before,
.chip.verified::before { background: var(--bg); border-color: var(--bg); }
.fi-chip--conflict,
.chip.conflict { border-color: var(--signal); color: var(--signal); }
.fi-chip--conflict::before,
.chip.conflict::before { background: var(--signal); border-color: var(--signal); }
.fi-chip--glass,
.chip.glass {
  background: var(--surface); border-color: var(--line);
  box-shadow: none; isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.fi-chip--filament,
.chip.filament { border-color: var(--color-primary); color: var(--color-primary); }
.fi-chip--filament::before,
.chip.filament::before { border-color: var(--color-primary); background: var(--color-primary); }

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Badge/Badge.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-badge,
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--bg);
}

/* Tone rides the hairline and the ink — no tinted fills competing with the CTA. */
.fi-badge--filament {
  border-color: color-mix(in srgb, var(--filament) 45%, var(--line));
  color: var(--filament);
  background: var(--bg);
}

.fi-badge--signal {
  border-color: color-mix(in srgb, var(--signal) 45%, var(--line));
  color: var(--signal);
  background: var(--bg);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Pill/Pill.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-pill,
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--t-sm);
  color: var(--ink-2);
  isolation: isolate;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Input/Input.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-input, .input {
  all: unset; box-sizing: border-box; display: block; width: 100%;
  font-family: var(--font-ui); color: var(--ink);
  border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--r-pill); padding: 0.75em 1.25em;
  min-height: 2.75rem;
  box-shadow: none; isolation: isolate;
  transition: border-color var(--dur-tick) linear, box-shadow var(--dur-stage) var(--ease-stage), background var(--dur-tick) linear;
}
.fi-input--sm { font-size: var(--t-xs); padding: 0.5em 1em; min-height: 2.15rem; }
.fi-input--md { font-size: var(--t-sm); }
.fi-input--lg { font-size: var(--t-base); padding: 0.9em 1.35em; min-height: 3.1rem; }
.fi-input--solid {
  background: var(--bg); border-color: var(--line);
  box-shadow: none;
}
.fi-input--quiet {
  background: transparent; border-color: transparent; box-shadow: none;
}
.fi-input--quiet:focus-visible {
  border-color: var(--line-strong); background: var(--surface);
}
.fi-input:focus-visible, .input:focus-visible {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.fi-input--invalid { border-color: var(--signal); }
.fi-input::placeholder, .input::placeholder { color: var(--ink-3); }

.fi-input-group {
  display: flex; align-items: center; gap: 0;
  width: 100%; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--bg);
  box-shadow: none; isolation: isolate;
  overflow: hidden;
}
.fi-input-group:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.fi-input-group[data-invalid="true"] { border-color: var(--signal); }
.fi-input-group .fi-input,
.fi-input-group .input {
  border: 0; box-shadow: none; background: transparent; border-radius: 0;
}
.fi-input-group__start,
.fi-input-group__end {
  display: inline-flex; align-items: center; gap: var(--s-1);
  color: var(--ink-3); padding: 0 0.9em; flex: none;
}
.fi-input-group__start { padding-right: 0; }
.fi-input-group__end { padding-left: 0; }

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Textarea/Textarea.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-textarea {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 6rem;
  resize: vertical;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-draw);
  padding: var(--s-4);
  box-shadow: none;
  isolation: isolate;
}

.fi-textarea--sm { font-size: var(--t-xs); min-height: 4.5rem; padding: var(--s-3); }
.fi-textarea--md { font-size: var(--t-sm); }
.fi-textarea--lg { font-size: var(--t-base); min-height: 8rem; padding: var(--s-5); }

.fi-textarea:focus-visible {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.fi-textarea--invalid { border-color: var(--signal); }
.fi-textarea::placeholder { color: var(--ink-3); }

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Checkbox/Checkbox.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-checkbox,
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.fi-checkbox input,
.checkbox input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-soft);
  background: var(--bg);
  cursor: pointer;
  flex: none;
}

.fi-checkbox input:checked,
.checkbox input:checked {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--bg);
}

.fi-checkbox input:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: 2px;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Switch/Switch.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-switch, .switch {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: relative; width: 44px; height: 26px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background var(--dur-tick) linear, border-color var(--dur-tick) linear;
  flex: none;
}
.fi-switch--sm { width: 36px; height: 20px; }
.fi-switch--sm::after { width: 14px; height: 14px; top: 2px; left: 2px; }
.fi-switch--sm.fi-switch--on::after, .fi-switch--sm.on::after { transform: translateX(16px); }
.fi-switch--lg { width: 52px; height: 30px; }
.fi-switch--lg::after { width: 22px; height: 22px; top: 3px; left: 3px; }
.fi-switch--lg.fi-switch--on::after, .fi-switch--lg.on::after { transform: translateX(22px); }
.fi-switch::after, .switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--ink-2);
  transition: transform var(--dur-commit) var(--ease-commit), background var(--dur-tick) linear;
}
.fi-switch--on, .fi-switch.on, .switch.on {
  background: var(--ink); border-color: var(--ink);
}
.fi-switch--on::after, .fi-switch.on::after, .switch.on::after {
  transform: translateX(18px); background: var(--bg);
}
.fi-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.fi-switch:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: 2px;
}
.fi-switch-field {
  display: inline-flex; align-items: flex-start; gap: var(--s-3);
  cursor: pointer; max-width: 28rem;
}
.fi-switch-field--disabled { opacity: 0.55; cursor: not-allowed; }
.fi-switch-field__text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.fi-switch-field__label {
  font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 500;
  letter-spacing: var(--track-ui, -0.011em); color: var(--ink);
}
.fi-switch-field__desc {
  font-size: var(--t-xs); color: var(--ink-3); letter-spacing: var(--track-ui, -0.011em);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/PageHeader/PageHeader.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-page-header,
.ds-page-header {
  margin-bottom: var(--s-10);
}

.fi-page-header__eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}

.fi-page-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.3rem + 0.85vw, 2.05rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  margin: 0 0 var(--s-2);
  line-height: 1.1;
  color: var(--ink);
}

.fi-page-header__desc {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.55;
  max-width: 48ch;
}

.fi-page-header__aside {
  margin-top: var(--s-4);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Slider/Slider.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-slider, .slider {
  appearance: none; width: 100%; height: 4px; border-radius: 999px;
  background: var(--line); outline: none;
}
.fi-slider::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--bg);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
    0 2px 8px color-mix(in srgb, var(--ink) 12%, transparent);
  cursor: pointer;
}
.fi-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--bg); cursor: pointer;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/SegmentedControl/SegmentedControl.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-segment,
.segment {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  isolation: isolate;
  position: relative;
}

.fi-segment button,
.segment button {
  all: unset;
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  transition:
    color var(--dur-tick) linear,
    background var(--dur-tick) linear;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.fi-segment button:hover,
.segment button:hover {
  color: var(--ink);
}

.fi-segment button[aria-selected="true"],
.fi-segment__on,
.segment button.on {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.fi-segment.segment--compact,
.segment.segment--compact {
  padding: 2px;
  gap: 2px;
}

.fi-segment.segment--compact button,
.segment.segment--compact button {
  padding: 5px 10px;
  font-size: var(--t-xs);
}

.fi-segment.segment--lg button,
.segment.segment--lg button {
  padding: 9px 18px;
}

.fi-segment.segment--neutral button[aria-selected="true"],
.fi-segment.segment--neutral .fi-segment__on,
.segment.segment--neutral button.on {
  background: var(--bg);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Select/Select.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-select {
  appearance: none; box-sizing: border-box; width: 100%;
  font-family: var(--font-ui); font-size: var(--t-sm); color: var(--ink);
  border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--r-pill); padding: 0.75em 2.5em 0.75em 1.25em;
  min-height: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  box-shadow: none; isolation: isolate;
}
.fi-select--sm { font-size: var(--t-xs); padding: 0.5em 2.2em 0.5em 1em; min-height: 2.15rem; }
.fi-select--md { font-size: var(--t-sm); }
.fi-select--lg { font-size: var(--t-base); padding: 0.9em 2.7em 0.9em 1.35em; min-height: 3.1rem; }
.fi-select:focus-visible {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.fi-select--invalid { border-color: var(--signal); }

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Field/Field.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-field { display: flex; flex-direction: column; gap: var(--s-2); }
.fi-field__label {
  font-family: var(--font-ui); font-weight: 500; font-size: var(--t-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.fi-field__hint { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }
.fi-field__error { font-size: var(--t-xs); color: var(--signal); margin: 0; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Tabs/Tabs.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-tabs-root {
  display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start;
}
.fi-tabs, .tabs {
  display: inline-flex; gap: 0; padding: 3px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: none; isolation: isolate;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-tabs, .tabs {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.fi-tabs button, .tabs button {
  all: unset; cursor: pointer; font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2); padding: 8px 18px; border-radius: var(--r-pill);
  transition: color var(--dur-tick) linear, background var(--dur-tick) linear;
  letter-spacing: var(--track-ui, -0.011em);
}
.fi-tabs button:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: 2px;
}
.fi-tabs__on, .tabs button.on {
  background: var(--ink); color: var(--bg);
}
.fi-tabs-panels { width: 100%; }
.fi-tabs__panel {
  width: 100%;
  font-size: var(--t-sm);
  color: var(--ink-2);
  letter-spacing: var(--track-ui, -0.011em);
  line-height: 1.5;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/GlassCard/GlassCard.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-glass-card,
.glass-card {
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: none;
  padding: var(--s-8);
  will-change: auto;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fi-glass-card--sm { padding: var(--s-4); }
.fi-glass-card--lg { padding: var(--s-10); }

.fi-glass-card--tilt,
.tilt {
  transform-style: preserve-3d;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Card/Card.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-card,
.card {
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--s-8);
  color: var(--ink);
  box-shadow: none;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Progress/Progress.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-progress, .progress {
  height: 6px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.fi-progress__bar, .progress__bar {
  height: 100%; border-radius: 999px;
  background: var(--ink);
  box-shadow: none;
  transition: width var(--dur-stage) var(--ease-stage);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Stat/Stat.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-stat, .stat { display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.fi-stat__value {
  font-family:var(--font-display);
  font-size:var(--t-xl);
  line-height:1.04;
  letter-spacing:var(--track-display);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "tnum";
}
.fi-stat__label {
  font-family:var(--font-mono);
  font-size:0.625rem;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--ink-3);
}
.fi-stat-grid, .stat-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:var(--s-6) var(--s-8);
  align-items:start;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Notice/Notice.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Notice — seam-led, not tinted. The nerve carries the tone, the panel stays calm. */
.fi-notice,
.notice {
  position: relative;
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--s-4) var(--s-6);
  padding-inline-start: calc(var(--s-6) + var(--seam-w));
  font-size: var(--t-sm);
  color: var(--ink-2);
  isolation: isolate;
}

.fi-notice::before,
.notice::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--seam-w);
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
  background: var(--seam-quiet);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
}

.fi-notice--filament::before {
  background: var(--seam-live);
}

.fi-notice--signal {
  color: var(--ink);
}

.fi-notice--signal::before {
  background: var(--seam-attention);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Seal/Seal.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-seal, .seal {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:0.1em;
  padding:4px 10px; border:1px dashed var(--line-strong); border-radius:var(--r-draw); color:var(--ink-3);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/ClaimMarker/ClaimMarker.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-claim, .claim-marker {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:0.08em;
  padding:4px 10px; border-radius:var(--r-draw); border:1px solid var(--line); color:var(--ink-2);
}
.fi-claim--filled, .claim-marker.filled { background:var(--filament); color:var(--color-primary-fg); border-color:var(--filament); }
.fi-claim--outline, .claim-marker.outline { border-color:var(--ink-2); }
.fi-claim--signal, .claim-marker.signal { border-color:var(--signal); color:var(--signal); }
.fi-label { font-size:var(--t-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); }

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/LedgerTable/LedgerTable.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Evidence / business ledger — quiet rows, comfortable vertical rhythm. */
.fi-ledger-table,
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.fi-ledger-table th,
.fi-ledger-table td,
.ledger th,
.ledger td {
  text-align: left;
  padding: 0.875rem var(--s-4) 0.875rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.fi-ledger-table th,
.ledger th {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.fi-ledger-table td,
.ledger td {
  color: var(--ink-2);
}

.fi-ledger-table td:first-child,
.ledger td:first-child {
  font-family: var(--font-mono);
  color: var(--ink);
}

.fi-ledger-table tbody tr:last-child td,
.ledger tbody tr:last-child td {
  border-bottom: 0;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Kbd/Kbd.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-kbd,
.kbd {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: var(--r-soft);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/StatusDot/StatusDot.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-status-dot, .status-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ink-3);
}
.fi-status-dot--live { background:var(--filament); box-shadow:none; }
.fi-status-dot--signal { background:var(--signal); }

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Separator/Separator.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-separator, .separator {
  border:none; border-top:1px solid var(--line); margin:var(--s-6) 0;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Spinner/Spinner.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-spinner, .loading-spinner {
  display:inline-block; border:2px solid var(--line-strong);
  border-top-color:var(--filament); border-radius:50%;
  animation:fi-spin var(--dur-settle) linear infinite;
}
.fi-spinner--sm { width:14px; height:14px; }
.fi-spinner--md { width:22px; height:22px; }
.fi-spinner--lg { width:36px; height:36px; }
@keyframes fi-spin { to { transform: rotate(360deg); } }

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/ThinkingOrb/ThinkingOrb.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Filament ThinkingOrb — canvas host; ink comes from the painter */
.fi-thinking-orb {
  display: block;
  flex: none;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Icon/Icon.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-icon, .icon {
  width:24px; height:24px; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; flex:none;
}
.fi-icon.sm, .icon.sm { width:18px; height:18px; }
.fi-icon.fill, .icon.fill { fill:currentColor; stroke:none; }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/PillNav/PillNav.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Marketing chrome nav — flat bar (Dropbox-clean), not a floating pill dock */
.fi-pillnav,
.pillnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
  border-radius: 0;
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fi-pillnav.is-static,
.pillnav.is-static {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  z-index: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg);
}

.fi-pillnav .mark,
.fi-pillnav .fi-pillnav__mark,
.pillnav .mark,
.pillnav .fi-pillnav__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: -0.02em;
}

.fi-pillnav .links,
.fi-pillnav .fi-pillnav__links,
.pillnav .links,
.pillnav .fi-pillnav__links {
  display: flex;
  gap: 0.15rem;
  margin-left: auto;
}

.fi-pillnav .links a,
.fi-pillnav .fi-pillnav__links a,
.pillnav .links a,
.pillnav .fi-pillnav__links a {
  font-size: var(--t-sm);
  color: var(--ink-2);
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-pill);
  transition:
    color var(--dur-tick) linear,
    background var(--dur-tick) linear;
}

.fi-pillnav .links a:hover,
.fi-pillnav .fi-pillnav__links a:hover,
.pillnav .links a:hover,
.pillnav .fi-pillnav__links a:hover {
  color: var(--ink);
  background: var(--surface);
}

.fi-pillnav .cta,
.pillnav .cta {
  font-size: var(--t-sm);
  font-weight: 600;
  background: var(--color-primary);
  color: var(--color-primary-fg);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  box-shadow: none;
  margin-left: 0.5rem;
}

@media (max-width: 860px) {
  .fi-pillnav .links,
  .fi-pillnav .fi-pillnav__links,
  .pillnav .links,
  .pillnav .fi-pillnav__links {
    display: none;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Breadcrumb/Breadcrumb.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-breadcrumb ol, .breadcrumb ol, .breadcrumb-trail ol {
  display:flex; flex-wrap:wrap; gap:var(--s-2); list-style:none; margin:0; padding:0;
  font-size:var(--t-sm); color:var(--ink-3);
}
.fi-breadcrumb li:not(:last-child)::after, .breadcrumb li:not(:last-child)::after {
  content:"/"; margin-left:var(--s-2); color:var(--ink-3);
}
.fi-breadcrumb a { color:var(--ink-2); }
.fi-breadcrumb a:hover { color:var(--filament); }
.fi-breadcrumb [aria-current] { color:var(--ink); }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Pagination/Pagination.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-pagination { display:inline-flex; align-items:center; gap:var(--s-3); }
.fi-pagination__meta { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--ink-3); }

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Modal/Modal.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-modal__backdrop,
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(24, 24, 27, 0.32);
  isolation: isolate;
}

.fi-modal__panel,
.modal-panel {
  position: fixed;
  z-index: 910;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2rem));
  max-height: min(85vh, 720px);
  overflow: auto;
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 16px 40px rgba(24, 24, 27, 0.12);
  padding: var(--s-8);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fi-modal__panel--sm { width: min(400px, calc(100vw - 2rem)); }
.fi-modal__panel--lg { width: min(720px, calc(100vw - 2rem)); }

.fi-modal__header,
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.fi-modal__titles {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.fi-modal__header h2 {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: var(--track-tight, -0.022em);
  margin: 0;
}

.fi-modal__description {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  letter-spacing: var(--track-ui, -0.011em);
  line-height: 1.45;
}

.fi-modal__body { min-width: 0; }

.fi-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.fi-modal__close,
.modal-header .close {
  all: unset;
  cursor: pointer;
  color: var(--ink-3);
  padding: var(--s-2);
  border-radius: var(--r-pill);
}

.fi-modal__close:hover {
  color: var(--ink);
  background: var(--surface);
}

.fi-modal__close:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: 2px;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Dialog/Dialog.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-dialog, .dialog-panel { width:min(420px, calc(100vw - 2rem)); }

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Toast/Toast.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-toaster {
  position: fixed;
  z-index: 960;
  right: var(--s-6);
  bottom: var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-3);
  pointer-events: none;
  max-width: min(360px, calc(100vw - 2rem));
}

.fi-toaster .fi-toast { pointer-events: auto; }

.fi-toast,
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.7rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 20px rgba(24, 24, 27, 0.08);
  font-size: var(--t-sm);
  isolation: isolate;
  animation: fi-toast-in var(--dur-stage) var(--ease-stage);
}

@keyframes fi-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fi-toast--signal { border-color: var(--signal); color: var(--signal); }
.fi-toast--success { border-color: var(--filament); }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Tooltip/Tooltip.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-tooltip { position:relative; display:inline-flex; }
.fi-tooltip__content {
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  padding:6px 10px; border-radius:var(--r-soft); font-size:var(--t-xs);
  border: 1px solid var(--line);
  background:var(--bg); color:var(--ink); white-space:nowrap;
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 24px rgba(24, 24, 27, 0.08);
  opacity:0; pointer-events:none; transition:opacity var(--dur-tick) linear;
}
.fi-tooltip--open .fi-tooltip__content,
.fi-tooltip:hover .fi-tooltip__content,
.fi-tooltip:focus-within .fi-tooltip__content { opacity:1; }
.fi-tooltip__content[hidden] { display:none; }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/Popover/Popover.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Dropbox-clean floating panel — solid surface, hairline border, quiet float */
.fi-popover {
  position: relative;
  display: inline-flex;
}

.fi-popover__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 14rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.25rem;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 24px rgba(24, 24, 27, 0.08);
  border-radius: var(--r-draw);
  isolation: isolate;
}

.fi-popover__panel.glass-overlay,
.fi-popover__panel.glass-drawn {
  background: var(--bg);
  border-color: var(--line);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 24px rgba(24, 24, 27, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fi-popover__label {
  margin: 0;
  padding: 0.45rem 0.75rem 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fi-popover__sep,
.fi-menu-sep {
  height: 1px;
  margin: 0.25rem 0;
  background: var(--line);
  border: 0;
}

.fi-menu-item,
.fi-popover__item,
.fi-popover__panel [role="menuitem"],
.fi-popover__panel [role="option"] {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: var(--r-soft);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear;
}

.fi-menu-item:hover,
.fi-popover__item:hover,
.fi-popover__panel [role="menuitem"]:hover,
.fi-popover__panel [role="option"]:hover,
.fi-menu-item[data-highlighted="true"],
.fi-popover__panel [aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
}

.fi-menu-item:focus-visible,
.fi-popover__item:focus-visible,
.fi-popover__panel [role="menuitem"]:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: -2px;
}

.fi-menu-item[aria-disabled="true"],
.fi-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.fi-menu-item__meta {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ink-3);
  font-weight: 400;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/PageState/PageState.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-page-state, .page-state, .empty-state, .error-state, .loading-state {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-12); border:1px solid var(--line); border-radius:var(--r-draw); background:var(--surface);
}
.fi-state__title { margin:0; font-size:var(--t-lg); font-weight:600; }
.fi-state__desc { margin:0; color:var(--ink-2); font-size:var(--t-sm); max-width:46ch; }
.fi-state__action { margin-top:var(--s-4); }


/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/EmptyState/EmptyState.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-empty-state, .page-state, .empty-state, .error-state, .loading-state {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-12); border:1px solid var(--line); border-radius:var(--r-draw); background:var(--surface);
}
.fi-state__title { margin:0; font-size:var(--t-lg); font-weight:600; }
.fi-state__desc { margin:0; color:var(--ink-2); font-size:var(--t-sm); max-width:46ch; }
.fi-state__action { margin-top:var(--s-4); }


/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/ErrorState/ErrorState.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-error-state, .page-state, .empty-state, .error-state, .loading-state {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-12); border:1px solid var(--line); border-radius:var(--r-draw); background:var(--surface);
}
.fi-state__title { margin:0; font-size:var(--t-lg); font-weight:600; }
.fi-state__desc { margin:0; color:var(--ink-2); font-size:var(--t-sm); max-width:46ch; }
.fi-state__action { margin-top:var(--s-4); }


/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/components/LoadingState/LoadingState.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fi-loading-state, .page-state, .empty-state, .error-state, .loading-state {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-12); border:1px solid var(--line); border-radius:var(--r-draw); background:var(--surface);
}
.fi-state__title { margin:0; font-size:var(--t-lg); font-weight:600; }
.fi-state__desc { margin:0; color:var(--ink-2); font-size:var(--t-sm); max-width:46ch; }
.fi-state__action { margin-top:var(--s-4); }


/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/shared/fi-cbtn.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Filament composer chrome buttons — catalog-safe (was graphite-cbtn in shell) */
.fi-cbtn,
.graphite-cbtn,
.composer .cbtn {
  all: unset;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  flex: none;
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear;
}
.fi-cbtn:hover,
.graphite-cbtn:hover,
.composer .cbtn:hover {
  background: var(--surface);
  color: var(--ink);
}
.fi-cbtn--send,
.graphite-cbtn--send,
.composer .cbtn.send {
  background: var(--filament);
  color: var(--color-primary-fg);
  border-color: var(--filament);
  box-shadow: none;
}
.fi-cbtn--send:hover,
.graphite-cbtn--send:hover,
.composer .cbtn.send:hover {
  opacity: 0.92;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/product.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Product specimen surfaces */
/* Graphite product specimens */
/* ---------- product: composer (styles elevated in Composer/Composer.css) ----------
   Scale law: S = single pill (plus · field · voice · send).
   M = context row unfolds above. L = tool row unfolds below.
   Rows unfold via grid-template-rows — the pill never becomes a form. */
.composer { max-width: 56rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); box-shadow: var(--glass-shadow-dock); padding: 6px; isolation: isolate; }
section.paper .composer { box-shadow: var(--glass-shadow-dock); }
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .composer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.composer .crow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-stage) var(--ease-stage); }
.composer .crow > div { min-height: 0; overflow: hidden; }
.composer.full .crow.systems { grid-template-rows: 1fr; }
.composer .main { display: flex; align-items: center; gap: 4px; }
.composer .inline-ctx { display: flex; gap: 6px; align-items: center; max-width: 0; opacity: 0; overflow: hidden; flex: none; transition: max-width var(--dur-stage) var(--ease-stage), opacity var(--dur-stage) linear; }
.composer.has-ctx .inline-ctx, .composer.full .inline-ctx { max-width: 420px; opacity: 1; }
.composer .inline-ctx .chip { padding: 4px 10px; font-size: 0.7rem; white-space: nowrap; }
.composer .field { flex: 1 1; min-width: 0; display: flex; align-items: baseline; gap: 2px; font-size: var(--t-base); color: var(--ink); padding: 0 var(--s-2); }
.composer .field .composer-input {
  all: unset;
  flex: 1 1;
  min-width: 0;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: transparent;
  caret-color: var(--ink);
}

.composer .field .composer-input::placeholder {
  color: var(--ink-3);
}

.composer .field:focus-within .ph {
  display: none;
}
.composer .caret { display: inline-block; width: 1px; height: 1.1em; background: var(--ink); transform: translateY(2px); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.composer .sys-inner { padding: var(--s-3) var(--s-3) var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.composer .sys-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); padding: 0 var(--s-1); }
.composer .sys-head .reach { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--ink-3); font-feature-settings: "tnum" 1; }
.composer .sys-pills { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sysp { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); font-family: var(--font-ui); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--ink-2); transition: border-color var(--dur-tick) linear, color var(--dur-tick) linear; }
.sysp:hover { border-color: var(--line-strong); color: var(--ink); }
.sysp .sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.sysp.syncing .sdot { background: transparent; border: 1px solid var(--ink-3); }
.sysp em { font-style: normal; font-weight: 400; font-size: 0.68rem; color: var(--ink-3); }
.sysp.ghost { border-style: dashed; color: var(--ink-3); }
.sysp.ghost:hover { color: var(--ink-2); border-color: var(--line-strong); }

/* ---------- product: trace chat pills (the shell above the composer) ---------- */
.demo-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.trace-pills { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); max-width: 680px; }
.tpill { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); box-shadow: none; font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.01em; color: var(--ink-2); transition: border-color var(--dur-tick) linear, color var(--dur-tick) linear, background var(--dur-tick) linear; isolation: isolate; }
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .tpill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
section:not(.paper) .tpill { box-shadow: none; }
.tpill:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.tpill.on {
  background: color-mix(in srgb, var(--filament) 16%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--filament) 42%, transparent);
}
section.paper .tpill.on {
  background: color-mix(in srgb, var(--filament) 10%, var(--surface));
  color: var(--ink);
  border-color: color-mix(in srgb, var(--filament) 32%, var(--line));
}
.tpill em { font-style: normal; font-weight: 400; font-size: 0.66rem; opacity: 0.55; }
.tpill .alert { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.tpill.ghost { border-style: dashed; color: var(--ink-3); }

/* ---------- product: lens canvas (the grid widgets snap to) ---------- */
.lens-canvas { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-draw); padding: var(--s-8); background-color: var(--surface);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(circle, var(--line-strong) 1px, transparent 1.5px);
  background-size: 120px 120px, 120px 120px, 24px 24px;
  background-position: -1px -1px, -1px -1px, 11px 11px; }
.lens-canvas .canvas-tag { position: absolute; top: var(--s-3); right: var(--s-4); font-family: var(--font-ui); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.lens-canvas .widget {
  background: var(--surface);
  box-shadow: var(--glass-shadow-soft);
  border: 1px solid var(--line);
}
section:not(.paper) .lens-canvas .widget {
  background: color-mix(in srgb, var(--surface) 88%, var(--ink) 4%);
  box-shadow: var(--glass-shadow-soft);
}

/* ---------- product: execution — the change summary ---------- */
.delta-panel {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  overflow: hidden;
  max-width: 760px;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .delta-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.delta-panel[data-material="committed"],
.delta-panel.solid {
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.delta-panel .d-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.delta-panel .d-head h5 { font-size: var(--t-base); font-weight: 600; letter-spacing: var(--track-tight, -0.022em); }
.delta-panel .d-head .wid { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0.06em; }
.d-strip { display: flex; gap: var(--s-6); padding: var(--s-3) var(--s-6); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); font-feature-settings: "tnum" 1; flex-wrap: wrap; }
.d-group { padding: var(--s-4) var(--s-6); }
.d-group + .d-group { border-top: 1px solid var(--line); }
.d-group .g-label { display: flex; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-2); font-family: var(--font-ui); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.drow { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; font-size: var(--t-sm); }
.drow .mk { width: 8px; height: 8px; border-radius: 2px; background: var(--ink); flex: none; align-self: center; }
.drow.staged .mk { background: transparent; border: 1px solid var(--ink-3); }
.drow.gated .mk { background: var(--signal); border-radius: 50%; }
.drow .what { color: var(--ink); font-weight: 500; white-space: nowrap; }
.drow .how { color: var(--ink-3); min-width: 0; }
.drow .vv { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); font-feature-settings: "tnum" 1; white-space: nowrap; }
.d-foot { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-6); border-top: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-3); flex-wrap: wrap; }

/* ---------- product: chain view ---------- */
.chain-view {
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  padding: var(--s-2) var(--s-5);
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .chain-view {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.chain-view__row {
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
}
.chain-view__row--linked {
  border-bottom: 1px solid var(--line);
}
.chain-view__who {
  font-weight: 600;
  letter-spacing: var(--track-tight, -0.022em);
  color: var(--ink);
}
.chain-view__how {
  color: var(--ink-3);
  font-size: var(--t-sm);
}
.chain-view__when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1;
}

/* ---------- product: proof annex ---------- */
.cert .cert-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.cert .row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
  letter-spacing: var(--track-ui, -0.011em);
}
.cert .row b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* ---------- product: full voice mode (the orb) ---------- */
.voicestage {
  position: relative;
  border-radius: var(--r-draw);
  background-color: var(--stage-bg);
  background-image:
    var(--stage-halo),
    radial-gradient(ellipse 72% 56% at 50% 44%, color-mix(in srgb, var(--filament) 10%, transparent), transparent 68%);
  border: 1px solid var(--line);
  min-height: 420px;
  padding: var(--s-12) var(--s-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  overflow: hidden;
  max-width: 760px;
}
.voicestage--compact {
  min-height: 0;
  padding: var(--s-3);
  gap: var(--s-2);
  border: 0;
  background: transparent;
}
.voicestage--compact .orb { width: 44px; height: 44px; margin: 0; }
.voicestage--compact .vs-label,
.voicestage--compact .vs-line,
.voicestage--compact .vs-verbs { display: none; }
.voicestage .vs-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur-stage) var(--ease-stage);
}
.voicestage.on .vs-label { color: var(--ink-2); }
.orb { position: relative; width: 160px; height: 160px; cursor: pointer; flex: none; margin: var(--s-8) 0; }
.orb .halo {
  position: absolute;
  inset: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo-rim) 0%, transparent 62%);
  opacity: 0.55;
  transition: opacity var(--dur-settle) var(--ease-settle);
  pointer-events: none;
}
.orb.live .halo {
  opacity: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--filament) 18%, transparent) 0%, transparent 64%);
}
.orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.orb .ring.r2 { inset: -20px; border-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.orb .ring.r3 { inset: -44px; border-color: color-mix(in srgb, var(--ink) 6%, transparent); }
.orb .ring.r4 { inset: -72px; border-color: color-mix(in srgb, var(--ink) 3%, transparent); }
.orb .ring.spin {
  inset: -10px;
  border: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  animation: orbspin 26s linear infinite;
}
.orb.live .ring.spin {
  animation-duration: 8s;
  border-color: color-mix(in srgb, var(--filament) 42%, transparent);
}
@keyframes orbspin { to { transform: rotate(360deg); } }
.orb .ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--filament) 35%, transparent);
  opacity: 0;
  pointer-events: none;
}
.orb .core {
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f4f4f5 48%, #d4d4d8 100%);
  box-shadow:
    0 0 44px color-mix(in srgb, var(--ink) 12%, transparent),
    0 0 100px var(--halo-rim);
}
.orb.live .core {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, color-mix(in srgb, var(--filament) 18%, #fff) 55%, color-mix(in srgb, var(--filament) 35%, #e4e4e7) 100%);
  box-shadow:
    0 0 60px color-mix(in srgb, var(--filament) 28%, transparent),
    0 0 140px color-mix(in srgb, var(--filament) 14%, transparent);
}
.voicestage .vs-line {
  min-height: 1.5em;
  font-size: var(--t-sm);
  letter-spacing: var(--track-ui, -0.011em);
  color: var(--ink-2);
  text-align: center;
  max-width: 48ch;
}
.voicestage .vs-verbs {
  display: flex;
  gap: var(--s-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-stage) linear, transform var(--dur-stage) var(--ease-settle);
}
.voicestage.on .vs-verbs { opacity: 1; transform: none; }
.voicestage .vs-verbs span {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.voicestage .vs-exit {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 14px;
}
.cbtn { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none; transition: background var(--dur-tick) linear, color var(--dur-tick) linear; }
.cbtn:hover { background: var(--surface); color: var(--ink); }
.cbtn.send {
  background: var(--filament); color: var(--color-primary-fg); border-color: var(--filament);
  box-shadow: none;
}
section.paper .cbtn.send {
  background: var(--filament); color: var(--color-primary-fg); border-color: var(--filament);
}
.cbtn.on {
  background: color-mix(in srgb, var(--filament) 18%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--filament) 35%, transparent);
  animation: breathe 2.2s var(--ease-settle) infinite;
}
section.paper .cbtn.on {
  background: color-mix(in srgb, var(--filament) 12%, var(--surface));
  color: var(--ink);
}
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------- composer: model selector (AUVY Canon) ---------- */
.model-sel { position: relative; flex: none; }
.model-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.01em; color: var(--ink-3); transition: background var(--dur-tick) linear, color var(--dur-tick) linear; }
.model-btn:hover { background: var(--glass-bg); color: var(--ink); }
.model-btn .mdot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none; }
.model-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 24px rgba(24, 24, 27, 0.08);
  padding: 0.25rem;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--dur-stage) linear, transform var(--dur-stage) var(--ease-stage);
  z-index: 6;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
section:not(.paper) .model-menu { box-shadow:
  0 1px 2px rgba(24, 24, 27, 0.04),
  0 8px 24px rgba(24, 24, 27, 0.08);
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .model-menu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.model-sel.open .model-menu { opacity: 1; transform: none; pointer-events: auto; }
.mrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: var(--r-soft);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink);
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear;
}
.mrow:hover { background: var(--surface); color: var(--ink); }
.mrow .nm { display: inline-flex; align-items: center; gap: 8px; }
.mrow .nm .mdot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity var(--dur-tick) linear; }
.mrow.on { color: var(--ink); }
.mrow.on .nm .mdot { opacity: 1; }
.mrow .role { font-family: var(--font-ui); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.model-menu .m-note { border-top: 1px solid var(--line); margin-top: 4px; padding: 8px 12px 4px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--ink-3); }
.ibtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.01em; color: var(--ink-2); padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid transparent; transition: color var(--dur-tick) linear, border-color var(--dur-tick) linear, background var(--dur-tick) linear; }
.ibtn:hover { color: var(--ink); border-color: var(--line-strong); }
.ibtn.solid {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
section.paper .ibtn.solid {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
/* ---------- product: voice ---------- */
.voice-panel {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--s-6);
  box-shadow: none;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .voice-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.wave { display: flex; align-items: center; gap: 3px; height: 56px; margin: var(--s-4) 0; }
.wave i { display: block; width: 3px; height: 8%; background: var(--ink); opacity: 0.85; border-radius: 1px; }
.voice-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.tscript { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); display: grid; gap: var(--s-2); }
.tscript .ln { display: flex; gap: var(--s-4); }
.tscript .who { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); min-width: 92px; padding-top: 2px; }
.tscript .dest { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }

/* ---------- product: trace ---------- */
.trace { max-width: 760px; display: grid; gap: var(--s-4); }
.msg-you { justify-self: end; max-width: 80%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-soft) var(--r-soft) 4px var(--r-soft); padding: var(--s-4) var(--s-6); font-size: var(--t-sm); color: var(--ink); }
.run-block {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  padding: var(--s-6);
  box-shadow: none;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .run-block {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.run-block .run-head { display: flex; justify-content: space-between; gap: var(--s-4); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.toolcall { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); }
.toolcall .st { margin-left: auto; color: var(--ink-3); }
.toolcall.running .st { color: var(--ink); }
.stream { padding: var(--s-4) 0 var(--s-2); font-size: var(--t-sm); color: var(--ink-2); border-top: 1px solid var(--line); }
.stream .dots i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-2); margin-left: 3px; animation: dotp 1.2s infinite; }
.stream .dots i:nth-child(2) { animation-delay: 0.15s; } .stream .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotp { 0%,100% { opacity: 0.2; } 40% { opacity: 1; } }
.osactions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.cbom-note { margin-top: var(--s-3); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-3); }
.intervene { display: flex; align-items: center; gap: var(--s-4); border: 1px solid var(--signal); border-radius: var(--r-draw); padding: var(--s-4) var(--s-6); background: rgba(255, 61, 0, 0.04); flex-wrap: wrap; }
.intervene .txt { font-size: var(--t-sm); color: var(--ink); flex: 1 1; min-width: 220px; }
.intervene .txt b { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); display: block; margin-bottom: 2px; }

/* ---------- product: lens bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } }
.widget { border: 1px solid var(--line); border-radius: var(--r-draw); background: var(--surface); padding: var(--s-6); min-height: 180px; display: flex; flex-direction: column; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent) inset; }
.widget .w-head { display: flex; justify-content: space-between; font-family: var(--font-ui); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-label, 0.11em); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); }
.widget .stat { font-size: var(--t-2xl); font-weight: 500; letter-spacing: var(--track-display, -0.038em); line-height: 1; margin-top: auto; }
.widget .delta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); margin-top: var(--s-2); }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: auto; }
.spark i { flex: 1 1; background: var(--ink); opacity: 0.9; transform-origin: bottom; border-radius: 1px 1px 0 0; }
.wlist { display: grid; gap: 0; margin-top: auto; }
.wlist .li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); }
.wlist .li b { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }

/* ---------- product: vault rows ---------- */
.vault-rows { border-top: 1px solid var(--line-strong); }
.vrow { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-1); border-bottom: 1px solid var(--line); font-size: var(--t-sm); letter-spacing: var(--track-ui, -0.011em); }
.vrow .nm { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.vrow .kind { font-family: var(--font-ui); font-weight: 600; font-size: 0.64rem; letter-spacing: var(--track-label, 0.11em); text-transform: uppercase; color: var(--ink-3); }
.vrow .ver { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); font-feature-settings: "tnum" 1; }

/* ---------- product: routine / pathway ---------- */
.routine-card {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  padding: var(--s-6);
  max-width: 460px;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .routine-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.routine-card .r-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-3); }
.routine-card h5 { font-size: var(--t-base); font-weight: 600; letter-spacing: var(--track-tight, -0.022em); }
.switch { width: 40px; height: 22px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); position: relative; cursor: pointer; flex: none; transition: background var(--dur-tick) linear; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform var(--dur-commit) var(--ease-commit), background var(--dur-tick) linear; }
.switch.on { background: var(--ink); border-color: var(--ink); }
.switch.on::after { transform: translateX(18px); background: var(--bg); }
section.paper .switch.on { background: var(--ink); }
section.paper .switch.on::after { background: var(--bg); }
.routine-card .sig { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: var(--s-4); }
.routine-card .r-stats { display: flex; gap: var(--s-6); border-top: 1px solid var(--line); padding-top: var(--s-4); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); font-feature-settings: "tnum" 1; flex-wrap: wrap; }
.path-steps { display: flex; align-items: center; gap: 0; margin-top: var(--s-6); flex-wrap: wrap; }
.pstep { display: flex; align-items: center; }
.pstep .nd { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-2); flex: none; }
.pstep.done .nd { background: var(--ink); border-color: var(--ink); }
.pstep.cur .nd { background: var(--glass-bg-strong); border-color: var(--ink); }
.pstep.gate .nd { border-color: var(--signal); }
.pstep .plbl { font-family: var(--font-ui); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 var(--s-2); }
.pstep .conn { width: 40px; height: 1px; background: var(--line-strong); margin-right: var(--s-2); }

/* ---------- product: presence + brain switcher ---------- */
.presence { display: flex; align-items: center; }
.presence .av { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 600; font-size: 0.58rem; letter-spacing: 0.04em; color: var(--ink-2); margin-left: -8px; }
.presence .av:first-child { margin-left: 0; }
.presence .av.agent {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
  animation: breathe 2.6s var(--ease-settle) infinite;
}
.chip.filament {
  border-color: rgba(215, 2, 92, 0.4);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.chip.filament::before { border-color: var(--color-primary); background: var(--color-primary); }
section.paper .presence .av.agent {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.brainpill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 8px 16px;
  font-size: var(--t-sm);
  cursor: pointer;
  box-shadow: none;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .brainpill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.brainpill .k { font-family: var(--font-ui); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- product: connect tile ---------- */
.ctile {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  padding: var(--s-6);
  max-width: 380px;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .ctile {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.ctile .c-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.ctile h5 { font-size: var(--t-base); font-weight: 600; letter-spacing: var(--track-tight, -0.022em); }
.ctile .cap { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s-4); letter-spacing: var(--track-ui, -0.011em); }
.ctile .c-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s-3); font-family: var(--font-ui); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-label, 0.11em); color: var(--ink-3); }

/* ---------- product: command palette ---------- */
.palette {
  max-width: 620px;
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 12px 32px rgba(24, 24, 27, 0.1);
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .palette {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
section.paper .palette { box-shadow:
  0 1px 2px rgba(24, 24, 27, 0.04),
  0 12px 32px rgba(24, 24, 27, 0.1);
}
.palette .p-in { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-base); }
.palette .p-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6); font-size: var(--t-sm); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.palette .p-row:last-child { border-bottom: none; }
.palette .p-row:hover, .palette .p-row.on { background: var(--surface); color: var(--ink); }
.palette .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: var(--r-soft); padding: 2px 6px; }

/* ---------- product: toast ---------- */
#toast { position: fixed; bottom: 24px; right: 24px; z-index: 95; display: flex; align-items: center; gap: var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--glass-line); background: var(--glass-bg-strong); color: var(--ink); padding: 10px 20px; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; opacity: 0; transform: translateY(16px); pointer-events: none; box-shadow: var(--glass-shadow-overlay); isolation: isolate; }

.demo-note { font-size: var(--t-sm); color: var(--ink-3); max-width: 52ch; }
.prod-block { padding: var(--s-8) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 220px 1fr; gap: var(--s-8); align-items: start; }
@media (max-width: 860px) { .prod-block { grid-template-columns: 1fr; } }
.prod-block > .comp-label { padding-top: var(--s-2); }

/* ---------- big claim ---------- */
.claim { padding: var(--s-40) 0; }
.claim p { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; max-width: 20ch; }
.claim .word { display: inline-block; will-change: transform, opacity; }



/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/PlaneStack/PlaneStack.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* PlaneStack — 3D glass plane motif (catalog + product) */
.stack-scene {
  perspective: 1400px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 980px) {
  .stack-scene {
    height: 380px;
  }
}

.stack {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(var(--depth-tilt-x)) rotateZ(var(--depth-tilt-z));
  will-change: transform;
}

.plane {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform-style: preserve-3d;
}

.plane .lbl {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--ink-2);
}

.plane.solid {
  background: color-mix(in srgb, var(--color-primary-deep) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--line-strong));
  box-shadow:
    0 0 36px color-mix(in srgb, var(--color-primary) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.plane.solid .lbl {
  color: color-mix(in srgb, var(--color-primary-fg) 70%, var(--ink));
  letter-spacing: 0.16em;
}

html[data-theme="light"] .plane.solid {
  background: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--line));
  box-shadow:
    0 0 24px color-mix(in srgb, var(--color-primary) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .plane.solid .lbl {
  color: var(--color-primary-deep);
}

.stack-caption {
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: var(--s-4);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/WorkOrderCard/WorkOrderCard.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* WorkOrderCard — solid surface; committed tightens border */
.wo-card {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-draw);
  padding: var(--s-8);
  will-change: transform, opacity;
  transform-style: preserve-3d;
  box-shadow: none;
  isolation: isolate;
  max-width: 420px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.wo-card.committed {
  background: var(--surface);
  border-color: var(--line-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.wo-card .wo-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-6);
  gap: var(--s-4);
  flex-wrap: wrap;
}

.wo-card .wo-id {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.wo-card h4 {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: var(--track-tight, -0.022em);
  margin-bottom: var(--s-2);
}

.wo-card .wo-desc {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin-bottom: var(--s-6);
  letter-spacing: var(--track-ui, -0.011em);
}

.wo-effects {
  border-top: 1px solid var(--line);
}

.wo-effects .fx {
  display: flex;
  justify-content: space-between;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
  gap: var(--s-4);
}

.wo-status {
  margin-top: var(--s-6);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--ink-2);
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/Composer/Composer.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Composer — Soft Fusion instrument: one full pill that grows */
.composer {
  --composer-pad: 0.4rem;
  --composer-btn: 2.5rem;
  max-width: 56rem;
  width: 100%;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.07);
  padding: var(--composer-pad);
  isolation: isolate;
  transition:
    border-color var(--dur-tick) linear,
    box-shadow var(--dur-stage) var(--ease-stage),
    background var(--dur-tick) linear;
}

section.paper .composer {
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.07);
}

.composer:focus-within {
  border-color: color-mix(in srgb, var(--ink) 55%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent),
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 14px 36px rgba(24, 24, 27, 0.1);
}

.composer.full:focus-within {
  border-color: color-mix(in srgb, var(--filament) 35%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--filament) 18%, transparent),
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 14px 36px rgba(24, 24, 27, 0.1);
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .composer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.composer .crow {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-stage) var(--ease-stage);
}

.composer .crow > div {
  min-height: 0;
  overflow: hidden;
}

.composer.full .crow.systems {
  grid-template-rows: 1fr;
}

.composer .main {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-height: var(--composer-btn);
  padding-inline: 0.15rem;
}

.composer .inline-ctx {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  flex: none;
  transition:
    max-width var(--dur-stage) var(--ease-stage),
    opacity var(--dur-stage) linear;
}

.composer.has-ctx .inline-ctx,
.composer.full .inline-ctx {
  max-width: 420px;
  opacity: 1;
}

.composer .inline-ctx .chip {
  padding: 0.3rem 0.75rem;
  font-size: 0.7rem;
  white-space: nowrap;
  border-radius: var(--r-pill);
  background: var(--surface);
  border-color: var(--line);
}

.composer .field {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--t-base);
  letter-spacing: var(--track-ui, -0.011em);
  color: var(--ink);
  padding: 0 0.55rem;
  min-height: var(--composer-btn);
}

.composer .field .composer-input {
  all: unset;
  flex: 1 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  background: transparent;
  caret-color: var(--filament);
}

.composer .field .composer-input::placeholder {
  color: var(--ink-3);
}

.composer .field:focus-within .ph {
  display: none;
}

.composer .caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  background: var(--filament);
  border-radius: 1px;
  transform: translateY(1px);
  animation: composer-caret 1.1s steps(1) infinite;
}

@keyframes composer-caret {
  50% { opacity: 0; }
}

.composer .sys-inner {
  padding: 0.85rem 0.95rem 0.75rem;
  border-bottom: 1px solid var(--line);
  margin: 0.15rem 0.35rem 0.35rem;
}

.composer .sys-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
  padding: 0 0.2rem;
}

.composer .sys-head .label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.composer .sys-head .reach {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-feature-settings: "tnum" 1;
}

.composer .sys-pills {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Chrome buttons — circular instruments inside the pill */
.composer .fi-cbtn,
.composer .cbtn {
  width: var(--composer-btn);
  height: var(--composer-btn);
  border-radius: var(--r-pill);
  color: var(--ink-2);
}

.composer .fi-cbtn:hover,
.composer .cbtn:hover {
  background: var(--surface);
  color: var(--ink);
}

.composer .fi-cbtn--send,
.composer .cbtn.send {
  background: var(--filament);
  color: var(--color-primary-fg);
  border-color: var(--filament);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--filament) 28%, transparent);
  transition:
    transform var(--dur-tick) var(--ease-commit),
    background var(--dur-tick) linear,
    box-shadow var(--dur-tick) linear,
    opacity var(--dur-tick) linear;
}

.composer .fi-cbtn--send:hover:not(:disabled),
.composer .cbtn.send:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: scale(1.04);
  opacity: 1;
}

.composer .fi-cbtn--send:disabled,
.composer .cbtn.send:disabled {
  opacity: 0.38;
  box-shadow: none;
  cursor: default;
}

.composer .fi-cbtn--send.on,
.composer .cbtn.send.on,
.composer .cbtn.on {
  animation: composer-breathe 2.2s var(--ease-settle) infinite;
}

@keyframes composer-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

/* Model selector — nested pill */
.composer .model-sel {
  position: relative;
  flex: none;
}

.composer .model-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  border: 1px solid transparent;
  transition:
    background var(--dur-tick) linear,
    color var(--dur-tick) linear,
    border-color var(--dur-tick) linear;
}

.composer .model-btn:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.composer .model-sel.open .model-btn {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.composer .model-btn .mdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--filament);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--filament) 16%, transparent);
}

.composer .model-menu {
  border-radius: var(--r-draw);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 12px 32px rgba(24, 24, 27, 0.12);
  padding: 0.3rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.composer .mrow {
  border-radius: var(--r-soft);
}

.composer .mrow:hover {
  background: var(--surface);
}

/* Transparent when nested in a dock shell that already has the pill chrome */
.composer-dock-input .composer,
.glass-dock-shell .composer {
  border: none;
  background: transparent;
  box-shadow: none;
  max-width: none;
  width: 100%;
}

.composer-dock-input .composer:focus-within,
.glass-dock-shell .composer:focus-within {
  box-shadow: none;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/TracePill/TracePill.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* TracePill — styles live in specimens/product.css + shared */

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/Ledger/Ledger.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Ledger — styles live in specimens/product.css + shared */

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/ChangeSummary/ChangeSummary.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ChangeSummary — styles live in specimens/product.css + shared */

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/ProofAnnex/ProofAnnex.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ProofAnnex — styles live in specimens/product.css + shared */

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/RunBlock/RunBlock.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* RunBlock — styles live in specimens/product.css + shared */

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/VaultRow/VaultRow.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* VaultRow — styles live in specimens/product.css + shared */

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/RoutineCard/RoutineCard.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* RoutineCard — styles live in specimens/product.css + shared */

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/ConnectTile/ConnectTile.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ConnectTile — styles live in specimens/product.css + shared */

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/VoiceOrb/VoiceOrb.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* VoiceOrb — styles live in specimens/product.css + shared */

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/CommandPalette/CommandPalette.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* CommandPalette — styles live in specimens/product.css + shared */

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/ChainView/ChainView.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ChainView — styles live in specimens/product.css + shared */

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/specimens/LensWidget/LensWidget.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* LensWidget — styles live in specimens/product.css + shared */

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/react/src/styles/index.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
  @auvy-ai/filament-react styles entry

  Themes (@auvy-ai/filament/theme.css | theme-catalog.css) import tokens once.
  This barrel owns component + specimen look only — do not re-import tokens.
*/

/* Components */

/* Specimens */

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/css/src/design-system/base.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

html {
  background: var(--bg);
  color: var(--ink);
}
html.nav-open { overflow: hidden; }

body {
  background-color: var(--bg);
  background-image: var(--ambient-glow);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: var(--track-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
  transition:
    background-color var(--dur-stage) var(--ease-stage),
    color var(--dur-stage) var(--ease-stage);
}
h1, h2, h3, h4 {
  letter-spacing: var(--track-tight);
  font-weight: 600;
  line-height: 1.12;
}
h1 {
  letter-spacing: var(--track-display);
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
em.d, .serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.mono { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.label { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 4rem); }

/* ---------- rooms: carbon acts, paper proves ---------- */
.room-paper {
  background: var(--room-paper-bg);
  color: var(--room-paper-ink);
  --bg: var(--room-paper-bg);
  --line: var(--room-paper-line);
  --line-strong: var(--room-paper-line-strong);
  --surface: var(--room-paper-surface);
  --surface-2: var(--room-paper-surface-2);
  --ink: var(--room-paper-ink);
  --ink-2: var(--room-paper-ink-2);
  --ink-3: var(--room-paper-ink-3);
  --glass-bg: var(--glass-paper-bg);
  --glass-bg-strong: rgba(20, 18, 15, 0.07);
  --glass-line: var(--glass-paper-line);
  --elev-shadow: var(--elev-shadow-paper);
}
.room-paper ::selection { background: var(--room-paper-ink); color: var(--room-paper-bg); }

/* ---------- instruments: pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  padding: 6px 14px;
  font-size: var(--t-sm);
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear, border-color var(--dur-tick) linear;
}
.pill.solid {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 18%, transparent);
}

/* ---------- evidence: drawn squares ---------- */
.drawn {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-draw);
  background: var(--surface);
}

/* Site-specific chip register (mono in evidence) — extends primitives .chip */
.chip.site {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
}
.chip.site.stale { border-style: dashed; }

.signal-dot { width: 8px; height: 8px; background: var(--signal); border-radius: 50%; flex: none; }
/* ledger footer + claim markers stay in base (site film register) */
.claim-marker {
  display: inline-block; width: 8px; height: 8px; flex: none;
  border: 1px solid var(--ink-2); border-radius: 1px;
  vertical-align: baseline; margin-left: 6px;
  position: relative; top: -1px;
}
.claim-marker.shipping { background: var(--ink-2); }
.claim-marker.specced { background: transparent; }
.claim-marker.roadmap { border-color: var(--signal); background: transparent; }
.claim-marker.roadmap::after { content: ""; position: absolute; inset: 2px; background: var(--signal); }

/* ---------- scene chrome ---------- */
.scene { position: relative; }
.scene-inner { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--s-24); padding-bottom: var(--s-24); }
.scene-head { display: flex; align-items: baseline; gap: var(--s-6); margin-bottom: var(--s-12); }
.scene-head .idx { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-sm); color: var(--ink-3); letter-spacing: 0.12em; }
.scene-head h2 { font-size: var(--t-2xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; max-width: 24ch; }

/* ledger footer: every scene ends with its own audit line */
.ledger-footer {
  border-top: 1px solid var(--line);
  padding: var(--s-3) 0 0;
  margin-top: var(--s-16);
  display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- reveal defaults (GSAP sets final state; no-JS stays visible) ---------- */
[data-reveal] { will-change: transform, opacity; }

/* ---------- reduced motion: parity build, not fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/css/src/design-system/shell.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Enterprise OS shell — header, sidebar, and composer float as glass.
 * Main / center content sits on the solid atmosphere (no glass panel).
 * Layout insets use --os-float / --os-float-gap (token space).
 */

/* ---------- layout grid (floating) ---------- */
.os-shell {
  --os-float: var(--s-3);
  --os-float-gap: var(--s-3);
  --os-sidebar-w: 16.5rem;
  --os-sidebar-w-collapsed: 4.5rem;
  /* Floating chrome uses comfort radius; center canvas stays square. */
  --os-panel-radius: var(--r-chrome, var(--r-soft));
  --composer-dock-offset: 8rem;

  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--os-float-gap);
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--os-float);
  padding-bottom: calc(var(--os-float) + env(safe-area-inset-bottom, 0px));
  background-color: var(--bg);
  background-image: var(--ambient-glow);
  background-repeat: no-repeat;
  color: var(--ink);
  isolation: isolate;
}

.os-shell-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--os-float-gap);
  min-height: 0;
  overflow: hidden;
}

/* Center canvas — solid layout bed, not a floating glass card */
.os-shell-main {
  min-width: 0;
  overflow: auto;
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.os-shell-main--padded {
  padding: var(--s-6) var(--s-8);
}

.os-shell-main--with-dock {
  padding-bottom: calc(var(--composer-dock-offset) + var(--s-6));
}

/* ---------- header (floating glass) ---------- */
.os-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding: 0.45rem 0.85rem;
  min-height: 3rem;
  border-radius: calc(var(--os-panel-radius) + 2px);
  border: 1px solid color-mix(in srgb, var(--glass-line) 85%, transparent);
  background: color-mix(in srgb, var(--glass-bg-strong) 92%, transparent);
  box-shadow: none;
  isolation: isolate;
}

/* Identity-only header — brain · work order · ledger (no center title/tabs) */
.os-header--identity {
  grid-template-columns: minmax(0, 1fr) auto;
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .os-header {
    backdrop-filter: blur(calc(var(--glass-blur) * 1.15)) saturate(var(--glass-saturate-chrome));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.15))
      saturate(var(--glass-saturate-chrome));
  }
}

.os-header-left,
.os-header-center,
.os-header-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.os-header-left {
  gap: var(--s-3);
}

.os-header-center {
  justify-content: center;
  text-align: center;
}

.os-header-right {
  justify-content: flex-end;
}

.os-header-title {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42ch;
}

.os-header-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Work order status strip — top of film / header */
.work-order-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: var(--s-3);
  border-left: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

.work-order-strip .wo-sep {
  opacity: 0.45;
}

.work-order-strip .wo-state {
  color: var(--ink-2);
  text-transform: lowercase;
}

.work-order-strip .wo-state.staging {
  color: color-mix(in srgb, var(--filament) 72%, var(--ink));
}

.work-order-strip .wo-state.gated {
  color: var(--signal);
}

.work-order-strip .wo-state.committed {
  color: var(--ink);
  font-weight: 600;
}

/* Collapsed ledger chip — corner affordance */
.ledger-chip {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
  background: transparent;
  transition: border-color var(--dur-tick) linear, color var(--dur-tick) linear, background var(--dur-tick) linear;
}

.ledger-chip:hover {
  border-color: var(--line-strong);
  color: var(--ink-2);
  background: var(--glass-bg);
}

.ledger-chip .lc-staged {
  color: var(--ink-2);
}

.ledger-chip .lc-committed {
  color: color-mix(in srgb, var(--filament) 78%, var(--ink));
  font-weight: 600;
}

/* ---------- sidebar (floating glass) ---------- */
.os-sidebar {
  width: var(--os-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: calc(var(--os-panel-radius) + 2px);
  border: 1px solid color-mix(in srgb, var(--glass-line) 85%, transparent);
  background: color-mix(in srgb, var(--glass-bg-strong) 92%, transparent);
  box-shadow: none;
  isolation: isolate;
  transition: width var(--dur-stage) var(--ease-stage);
  overflow: hidden;
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .os-sidebar {
    backdrop-filter: blur(calc(var(--glass-blur) * 1.1)) saturate(var(--glass-saturate-chrome));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.1))
      saturate(var(--glass-saturate-chrome));
  }
}

.os-sidebar--collapsed {
  width: var(--os-sidebar-w-collapsed);
}

.os-sidebar-chrome {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2);
  padding: 0.65rem 0.75rem 0.25rem;
  border-bottom: none;
}

.os-sidebar-collapse {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition:
    background var(--dur-tick) linear,
    color var(--dur-tick) linear,
    border-color var(--dur-tick) linear;
}

.os-sidebar-collapse:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  background: var(--glass-bg);
}

.os-sidebar-top,
.os-sidebar-bottom {
  flex: none;
  padding: var(--s-3) var(--s-4);
}

.os-sidebar-main {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: 0.35rem 0.65rem 1rem;
}

.os-sidebar--collapsed .os-sidebar-nav-item {
  justify-content: center;
  padding-inline: var(--s-2);
}

.os-sidebar--collapsed .os-sidebar-chrome {
  justify-content: center;
}

.os-sidebar-nav-section {
  margin-bottom: var(--s-5);
}

.os-sidebar-nav-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-3) 88%, transparent);
  padding: 0.35rem 0.7rem;
  margin-bottom: 0.15rem;
}

.os-sidebar-nav-item {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-chrome, var(--r-soft));
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear;
}

.os-sidebar-nav-item:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
}

.os-sidebar-nav-item.on {
  background: color-mix(in srgb, var(--filament) 8%, transparent);
  color: var(--ink);
  box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--filament) 65%, transparent);
}

section.paper .os-sidebar-nav-item.on {
  background: color-mix(in srgb, var(--filament) 8%, var(--surface));
  color: var(--ink);
}

.os-sidebar-nav-item .nav-dot {
  width: var(--s-1);
  height: var(--s-1);
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}

.os-sidebar-nav-item.on .nav-dot {
  background: var(--filament);
  opacity: 0.9;
}

.sidebar-trace-stack {
  display: grid;
  gap: var(--s-1);
}

.sidebar-trace-row {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-chrome, var(--r-soft));
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ink-2);
  border-left: none;
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear;
}

.sidebar-trace-row:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
}

.sidebar-trace-row.on {
  background: color-mix(in srgb, var(--filament) 7%, transparent);
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--filament) 60%, transparent);
}

.sidebar-trace-row.on .str-meta {
  color: color-mix(in srgb, var(--filament) 55%, var(--ink-3));
}

.sidebar-trace-row .str-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ---------- composer dock — OS stack: transcript → bookmarks → composer ---------- */
.composer-dock-host {
  position: absolute;
  left: var(--os-float);
  right: var(--os-float);
  bottom: var(--os-float);
  z-index: 60;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 0;
}

/* Product OS — dock host is positioned by layout; Fi owns stack only */
.composer-dock-host--product {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: 100%;
  height: 100%;
  pointer-events: none;
  align-items: stretch;
}

.composer-dock-host--product .composer-dock-stack {
  width: 100%;
  max-width: none;
  height: 100%;
  pointer-events: none;
}

/**
 * Product OS supplies its own vitreous transcript surface
 * (`brain-transcript-panel-surface`). Keep Filament's wrapper as layout only —
 * no second border / padding / card so the stack reads as one instrument.
 */
.composer-dock-host--product .composer-dock-transcript {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  isolation: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Product panel id — pill / expanded glass SSOT (auvy-os #layout-composer-panel) */
#layout-composer-panel.glass-dock-shell {
  border-color: var(--glass-line);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition:
    background-color var(--dur-stage) var(--ease-stage),
    border-color var(--dur-tick) linear,
    box-shadow var(--dur-commit) var(--ease-commit);
}

#layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="pill"],
#layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="voice-core"],
#layout-composer-panel.glass-dock-shell.composer-dock-pill-presentation {
  border-radius: var(--r-pill);
  border-color: var(--line, var(--glass-line));
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.07);
}

#layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="expanded"],
#layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="intervention"] {
  /* Soft Fusion: dock stays a full pill even when rows unfold */
  border-radius: var(--r-pill);
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--line-strong);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 14px 34px rgba(24, 24, 27, 0.1);
}

.composer-toolbar-host {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.composer-toolbar-host--readonly {
  grid-template-columns: minmax(0, 1fr);
}

.composer-toolbar-host__leading,
.composer-toolbar-host__trailing {
  display: flex;
  align-items: center;
  flex: none;
}

.composer-toolbar-host__trailing {
  justify-content: flex-end;
}

.composer-toolbar-host__editor {
  min-width: 0;
  min-height: 0;
}

.composer-dock-host .composer-dock-stack {
  pointer-events: auto;
  /* max-w-4xl — matches auvy-os layout-composer-dock-stack-width */
  width: min(100%, 56rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.625rem; /* Soft Fusion — matches OS COMPOSER_DOCK_STACK_COLUMN_CLASS gap-2.5 */
}

.composer-dock-bookmarks {
  width: 100%;
}

.composer-dock-bookmarks .trace-pills {
  max-width: none;
  margin-bottom: 0;
}

.composer-dock-delta {
  max-width: 100%;
}

.composer-dock-delta .delta-panel {
  max-width: none;
  box-shadow: var(--glass-shadow-overlay);
}

/* Transcript rail — high-contrast vitreous card above bookmarks */
.composer-dock-transcript {
  width: 100%;
  max-height: min(42vh, var(--s-80));
  overflow: auto;
  border-radius: var(--os-panel-radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow-soft);
  padding: var(--s-4) var(--s-5);
  isolation: isolate;
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .composer-dock-transcript {
    backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  }
}

/* Composer input shell — pill = glass instrument, expanded = drawn solid */
.composer-dock-input.glass-dock-shell {
  width: 100%;
  isolation: isolate;
  transition:
    background var(--dur-stage) var(--ease-stage),
    border-color var(--dur-tick) linear,
    box-shadow var(--dur-commit) var(--ease-commit),
    border-radius var(--dur-stage) var(--ease-stage);
}

.composer-dock-host[data-presentation="pill"] .composer-dock-input.glass-dock-shell {
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.07);
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .composer-dock-host[data-presentation="pill"] .composer-dock-input.glass-dock-shell {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.composer-dock-host[data-presentation="expanded"] .composer-dock-input.glass-dock-shell,
.composer-dock-host[data-presentation="immersive"] .composer-dock-input.glass-dock-shell {
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 14px 34px rgba(24, 24, 27, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: var(--s-2);
}

.composer-dock-host .composer-dock-input .composer {
  max-width: none;
  width: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: var(--s-1);
}

.composer-dock-host[data-presentation="immersive"] {
  inset: var(--os-float);
  padding: var(--s-6);
  border-radius: var(--os-panel-radius);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  isolation: isolate;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .composer-dock-host[data-presentation="immersive"] {
    backdrop-filter: blur(calc(var(--glass-blur) * 1.6)) saturate(var(--glass-saturate-chrome));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.6))
      saturate(var(--glass-saturate-chrome));
  }
}

/* Glass chrome pill — header / bottom nav / toolbar instruments */
.glass-chrome-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--line, var(--glass-line));
  background: var(--surface, var(--glass-bg-strong));
  box-shadow: var(--glass-shadow-chrome, none);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  isolation: isolate;
  transition:
    background var(--dur-tick) linear,
    border-color var(--dur-tick) linear,
    color var(--dur-tick) linear,
    box-shadow var(--dur-tick) linear;
}

.glass-chrome-pill:hover {
  border-color: var(--line-strong, var(--glass-line));
  background: var(--surface-2, var(--surface));
  color: var(--ink);
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-chrome-pill {
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate-chrome));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate-chrome));
  }
}

/* graphite-cbtn — Vue composerChrome bridge */
.graphite-cbtn,
.composer .cbtn {
  all: unset;
  cursor: pointer;
  width: var(--s-10);
  height: var(--s-10);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  flex: none;
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear;
}

.graphite-cbtn:hover,
.composer .cbtn:hover {
  background: var(--glass-bg);
  color: var(--ink);
}

.graphite-cbtn--send,
.composer .cbtn.send {
  background: var(--filament);
  color: var(--color-primary-fg);
  border-color: var(--filament);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--filament) 28%, transparent);
}

section.paper .graphite-cbtn--send,
section.paper .composer .cbtn.send {
  background: var(--filament);
  color: var(--color-primary-fg);
  border-color: var(--filament);
}

.graphite-cbtn--send:hover,
.composer .cbtn.send:hover {
  opacity: 0.92;
}

/* ---------- bottom nav (mobile floating glass) ---------- */
.os-bottom-nav {
  display: none;
  position: absolute;
  left: var(--os-float);
  right: var(--os-float);
  bottom: var(--os-float);
  z-index: 70;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-1);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow-chrome);
  isolation: isolate;
}
@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .os-bottom-nav {
    backdrop-filter: blur(calc(var(--glass-blur) * 1.15)) saturate(var(--glass-saturate-chrome));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.15))
      saturate(var(--glass-saturate-chrome));
  }
}

@media (max-width: 768px) {
  .os-shell-body {
    grid-template-columns: 1fr;
  }

  /* Catalog float shell only — product OS owns sidebar visibility via layout */
  .os-sidebar:not(.os-sidebar--product) {
    display: none;
  }

  .os-bottom-nav:not(.os-bottom-nav--product) {
    display: grid;
  }

  .composer-dock-host:not(.composer-dock-host--product) {
    bottom: calc(var(--os-float) + 4.5rem);
  }
}

.mobile-bottom-nav-tab {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mobile-bottom-nav-tab.on {
  color: var(--ink);
}

/* Catalog / Storybook — force visible bottom nav outside mobile breakpoints */
.os-bottom-nav--demo {
  display: grid;
  position: relative;
}

.mobile-bottom-nav-fab {
  all: unset;
  cursor: pointer;
  width: var(--s-12);
  height: var(--s-12);
  border-radius: 50%;
  background: var(--filament);
  color: var(--color-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(var(--s-5) * -1) auto 0;
  box-shadow: 0 var(--s-2) var(--s-6) color-mix(in srgb, var(--filament) 30%, transparent);
}

section.paper .mobile-bottom-nav-fab {
  background: var(--filament);
  color: var(--color-primary-fg);
}

/* ---------- banners ---------- */
.os-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}

.os-banner.offline {
  background: color-mix(in srgb, var(--signal) 12%, var(--bg));
  color: var(--ink);
}

.os-banner.degraded {
  background: var(--glass-bg);
  color: var(--ink-2);
}

.os-banner.maintenance {
  background: var(--surface);
  color: var(--ink-3);
}

/* ---------- enterprise scene framing ---------- */
.enterprise-scene {
  max-width: 960px;
  margin: 0 auto;
}

.enterprise-scene-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
  flex-wrap: wrap;
}

.enterprise-scene-head h1 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 18ch;
}

.enterprise-scene-head .serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}

.enterprise-scene-sub {
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 52ch;
  margin-top: var(--s-3);
}

.comp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* Scope shell typography overrides — never clobber global base .label / .mono */
.os-shell .label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.os-shell .mono {
  font-family: var(--font-mono);
}

.os-shell .serif {
  font-family: var(--font-display);
}

/* ---------- contained shell (catalog pattern demos) ---------- */
.os-shell--contained {
  min-height: 32.5rem;
  height: 100%;
  max-height: min(80vh, 45rem);
  border-radius: var(--os-panel-radius);
  overflow: hidden;
}

/* ---------- overlay shell — fullscreen center, chrome floats above ---------- */
/*
 * Formation:
 * - .os-shell-main fills the viewport (z-index 0)
 * - header, sidebar, composer, bottom-nav hover above as glass
 * - main content uses --os-chrome-* safe insets so it clears overlays
 */
.os-shell--overlay {
  --os-header-h: 2.75rem;
  --os-chrome-top: calc(var(--os-float) + var(--os-header-h) + var(--os-float-gap));
  --os-chrome-left: calc(var(--os-float) + var(--os-sidebar-w) + var(--os-float-gap));
  --os-chrome-right: var(--os-float);
  --os-chrome-bottom: calc(var(--composer-dock-offset) + var(--os-float));

  display: block;
  gap: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

.os-shell--overlay:has(.os-sidebar--collapsed) {
  --os-chrome-left: calc(var(--os-float) + var(--os-sidebar-w-collapsed) + var(--os-float-gap));
}

.os-shell--overlay > .os-header {
  position: absolute;
  top: var(--os-float);
  left: var(--os-float);
  right: var(--os-float);
  z-index: 50;
  margin: 0;
  min-height: var(--os-header-h);
  padding: 0.28rem 0.55rem;
  border-radius: var(--os-panel-radius);
  gap: 0.45rem;
  box-shadow: var(--glass-shadow-chrome);
}

.os-shell--overlay .os-shell-body {
  position: absolute;
  inset: 0;
  display: block;
  gap: 0;
  overflow: hidden;
}

.os-shell--overlay .os-sidebar {
  position: absolute;
  top: var(--os-chrome-top);
  left: var(--os-float);
  bottom: var(--os-chrome-bottom);
  z-index: 40;
  width: var(--os-sidebar-w);
  max-height: none;
  margin: 0;
  border-radius: var(--os-panel-radius);
  box-shadow: var(--glass-shadow-chrome);
}

.os-shell--overlay .os-sidebar--collapsed {
  width: var(--os-sidebar-w-collapsed);
}

.os-shell--overlay .os-sidebar-chrome {
  padding: 0.4rem 0.45rem 0.15rem;
}

.os-shell--overlay .os-sidebar-top,
.os-shell--overlay .os-sidebar-bottom {
  padding: 0.35rem 0.45rem;
}

.os-shell--overlay .os-sidebar-main {
  padding: 0.2rem 0.4rem 0.65rem;
}

.os-shell--overlay .os-sidebar-nav-label {
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.05rem;
}

.os-shell--overlay .os-sidebar-nav-item {
  gap: 0.5rem;
  padding: 0.32rem 0.5rem;
  border-radius: var(--r-record, var(--r-draw));
  font-size: 0.8125rem;
}

.os-shell--overlay .sidebar-trace-row {
  gap: 0.1rem;
  padding: 0.38rem 0.5rem;
  border-radius: var(--r-record, var(--r-draw));
  font-size: 0.78rem;
}

.os-shell--overlay .ledger-chip {
  padding: 0.22rem 0.55rem;
  font-size: 0.58rem;
}

.os-shell--overlay .os-shell-main {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: auto;
  padding: 0;
}

/* Safe inset for scrollable content under floating chrome */
.os-shell--overlay .os-shell-main--overlay-safe {
  padding-top: var(--os-chrome-top);
  padding-left: var(--os-chrome-left);
  padding-right: var(--os-chrome-right);
  padding-bottom: var(--os-chrome-bottom);
  box-sizing: border-box;
}

/* Full-bleed surfaces (Lens canvas) ignore safe padding — paint edge to edge */
.os-shell--overlay .os-shell-main.lens-main.os-shell-main--overlay-safe,
.os-shell--overlay .os-shell-main.vault-main.os-shell-main--overlay-safe {
  padding: 0;
}

.os-shell--overlay .composer-dock-host {
  z-index: 60;
  gap: 0.35rem;
}

.os-shell--overlay .os-bottom-nav {
  z-index: 55;
}

@media (max-width: 900px) {
  .os-shell--overlay {
    --os-chrome-left: var(--os-float);
    --os-chrome-bottom: calc(var(--composer-dock-offset) + 4.5rem + var(--os-float));
  }

  .os-shell--overlay .os-sidebar {
    display: none;
  }
}

/* ---------- product shell (auvy-os full-bleed) ---------- */
/*
 * Product formation:
 * - #layout.os-shell--product is the fixed viewport root
 * - sidebar slot + main column in .os-shell-body
 * - absolute Header + floating canvas chip live inside main (not catalog #header)
 * - canvas panel teleports to body; chip teleports to #header-canvas-window-slot
 */
.os-shell--product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
  padding: 0;
  background-image: none;
  isolation: auto;
}

/**
 * Product floating chrome — flat, clear enterprise formation.
 * Structure via border + surface; no halo / blur / elevation stack.
 * OS product overrides can widen `--os-float` for Soft Fusion dock breathing room.
 */
.os-shell--product[floating-chrome],
.os-shell--product[floatingChrome] {
  --os-float: 0.75rem;
  --os-float-gap: 0.5rem;
  --os-header-h: 2.5rem;
  --os-sidebar-w: 13.25rem;
  --os-sidebar-w-collapsed: 3.5rem;
  --os-panel-radius: var(--r-record, var(--r-draw));
  --composer-dock-offset: 6.5rem;

  /* Flatten glass tokens inside product shell (SSOT cascade for pills/dock/cards). */
  --glass-blur: 0px;
  --glass-blur-soft: 0px;
  --glass-blur-strong: 0px;
  --glass-saturate: 1;
  --glass-saturate-chrome: 1;
  --glass-bg: var(--surface);
  --glass-bg-strong: var(--surface);
  --glass-line: var(--line);
  --glass-highlight: transparent;
  --glass-shadow: none;
  --glass-shadow-chrome: none;
  --glass-shadow-dock: none;
  --glass-shadow-soft: none;
  --glass-shadow-paper: none;
  --glass-shadow-overlay: 0 10px 28px -14px rgba(0, 0, 0, 0.35);
  --ambient-glow: none;
  --halo-core: transparent;
  --halo-rim: transparent;

  background-color: var(--bg);
  background-image: none;
}

.os-shell--product[floating-chrome]:has(
    #layout-composer-panel[data-composer-dock-presentation="expanded"]
  ),
.os-shell--product[floatingChrome]:has(
    #layout-composer-panel[data-composer-dock-presentation="expanded"]
  ),
.os-shell--product[floating-chrome]:has(
    #layout-composer-panel[data-composer-dock-presentation="intervention"]
  ),
.os-shell--product[floatingChrome]:has(
    #layout-composer-panel[data-composer-dock-presentation="intervention"]
  ) {
  --composer-dock-offset: 12.25rem;
}

/* Floating product rail — solid column, clear edge */
.os-shell--product[floating-chrome] .os-sidebar--product,
.os-shell--product[floatingChrome] .os-sidebar--product {
  border-radius: var(--os-panel-radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: auto;
}

/* Flat chrome instruments */
.os-shell--product[floating-chrome] .glass-chrome-pill,
.os-shell--product[floatingChrome] .glass-chrome-pill {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.os-shell--product[floating-chrome] .glass-chrome-pill:hover,
.os-shell--product[floatingChrome] .glass-chrome-pill:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink);
}

/**
 * Soft Fusion exception: flat chrome flattens pills/sidebar, but the layout
 * composer must still float above the lens with Soft Fusion elevation.
 */
.os-shell--product[floating-chrome] #layout-composer-panel.glass-dock-shell,
.os-shell--product[floatingChrome] #layout-composer-panel.glass-dock-shell {
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.08);
}

.os-shell--product[floating-chrome]
  #layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="pill"],
.os-shell--product[floatingChrome]
  #layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="pill"],
.os-shell--product[floating-chrome]
  #layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="voice-core"],
.os-shell--product[floatingChrome]
  #layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="voice-core"],
.os-shell--product[floating-chrome]
  #layout-composer-panel.glass-dock-shell.composer-dock-pill-presentation,
.os-shell--product[floatingChrome]
  #layout-composer-panel.glass-dock-shell.composer-dock-pill-presentation {
  border-radius: var(--r-pill);
  border-color: var(--line);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.08);
}

.os-shell--product[floating-chrome]
  #layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="expanded"],
.os-shell--product[floatingChrome]
  #layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="expanded"],
.os-shell--product[floating-chrome]
  #layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="intervention"],
.os-shell--product[floatingChrome]
  #layout-composer-panel.glass-dock-shell[data-composer-dock-presentation="intervention"] {
  border-radius: var(--r-pill);
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.05),
    0 16px 40px rgba(24, 24, 27, 0.12);
}

/* Lens bento cards — quiet paper lift so widgets read above the canvas wash */
.os-shell--product[floating-chrome] .glass-lens-widget-shell,
.os-shell--product[floatingChrome] .glass-lens-widget-shell {
  background: var(--surface);
  border-color: var(--line);
  box-shadow:
    0 1px 1px rgba(24, 24, 27, 0.03),
    0 8px 22px -12px rgba(24, 24, 27, 0.14);
}

.os-shell--product[floating-chrome] .fi-cbtn,
.os-shell--product[floatingChrome] .fi-cbtn,
.os-shell--product[floating-chrome] .graphite-cbtn,
.os-shell--product[floatingChrome] .graphite-cbtn {
  width: 2.25rem;
  height: 2.25rem;
  box-shadow: none;
}

.os-shell--product[floating-chrome] .fi-cbtn--send,
.os-shell--product[floatingChrome] .fi-cbtn--send {
  width: 2.5rem;
  height: 2.5rem;
  box-shadow: none;
}

.os-shell--product[floating-chrome] .fi-segment,
.os-shell--product[floatingChrome] .fi-segment,
.os-shell--product[floating-chrome] .segment,
.os-shell--product[floatingChrome] .segment {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.os-shell--product[floating-chrome] .fi-option-card,
.os-shell--product[floatingChrome] .fi-option-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}

.os-shell--product[floating-chrome] .fi-option-card:hover,
.os-shell--product[floatingChrome] .fi-option-card:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: none;
}

.os-shell--product[floating-chrome] .fi-option-card.on,
.os-shell--product[floatingChrome] .fi-option-card.on {
  background: var(--surface-2);
  border-color: var(--ink);
  box-shadow: none;
}

/**
 * Product sidebar nav rows — flat wash + ink bar active (clear selection).
 */
.os-shell--product[floating-chrome] .sidebar-nav-row,
.os-shell--product[floatingChrome] .sidebar-nav-row {
  border-radius: var(--r-record, var(--r-draw));
  transition:
    background var(--dur-tick) linear,
    color var(--dur-tick) linear,
    box-shadow var(--dur-tick) linear;
}

.os-shell--product[floating-chrome] .sidebar-nav-row:hover,
.os-shell--product[floatingChrome] .sidebar-nav-row:hover {
  background: color-mix(in srgb, var(--ink) 4.5%, transparent);
  color: var(--ink);
}

.os-shell--product[floating-chrome] .sidebar-nav-row.sidebar-nav-row--active,
.os-shell--product[floatingChrome] .sidebar-nav-row.sidebar-nav-row--active {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 2px 0 0 0 var(--ink);
}

.os-shell--product[floating-chrome] .sidebar-nav-row:focus-visible,
.os-shell--product[floatingChrome] .sidebar-nav-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.os-shell--product[floating-chrome] .sidebar-nav-section,
.os-shell--product[floatingChrome] .sidebar-nav-section {
  gap: 0.05rem;
}

.os-shell--product .os-shell-body {
  display: flex;
  flex: 1 1;
  min-height: 0;
  min-width: 0;
  gap: 0;
  overflow: hidden;
}

.os-shell--product .os-shell-main {
  position: relative;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Product overlay header — identity wrapper; OS owns flex + absolute chrome */
.os-header--product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: unset;
  width: 100%;
  flex-shrink: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: auto;
  padding: 0;
  min-height: unset;
  gap: 0;
}

.os-header--product .os-header-left,
.os-header--product .os-header-center,
.os-header--product .os-header-right {
  display: contents;
}

/* Product sidebar rail — width owned by layout column, solid bed */
.os-sidebar--product {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: var(--bg, transparent);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: auto;
  overflow: hidden;
}

.os-sidebar--product.os-sidebar--collapsed {
  width: 100%;
}

.os-sidebar--product .os-sidebar-top,
.os-sidebar--product .os-sidebar-bottom {
  padding: 0;
}

.os-sidebar--product .os-sidebar-main {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1;
}

/* Product bottom nav — OS glass pill + icon tabs; no catalog grid/crimson FAB */
.os-bottom-nav--product {
  display: flex;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  grid-template-columns: unset;
  gap: inherit;
  align-items: flex-end;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: auto;
  width: 100%;
  max-width: inherit;
}

.os-bottom-nav--product .mobile-bottom-nav-tab {
  display: flex;
  flex: 1 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: var(--r-pill);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  touch-action: manipulation;
  transition: opacity var(--dur-tick) linear, transform var(--dur-tick) linear;
  opacity: 0.45;
}

.os-bottom-nav--product .mobile-bottom-nav-tab:hover {
  opacity: 0.75;
}

.os-bottom-nav--product .mobile-bottom-nav-tab.on {
  opacity: 1;
}

.os-bottom-nav--product .mobile-bottom-nav-tab svg {
  width: 1.625rem;
  height: 1.625rem;
  color: inherit;
  transition: transform var(--dur-tick) linear;
}

.os-bottom-nav--product .mobile-bottom-nav-tab.on svg {
  transform: scale(1.12);
}

.os-bottom-nav--product .mobile-bottom-nav-fab {
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  min-height: 3.5rem;
  margin: 0;
  transform: translateY(-0.75rem);
  align-items: center;
  justify-content: center;
  border-radius: var(--r-instrument, var(--r-pill));
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  touch-action: manipulation;
  opacity: 0.7;
  transition: opacity var(--dur-tick) linear, transform var(--dur-tick) linear;
}

.os-bottom-nav--product .mobile-bottom-nav-fab:hover,
.os-bottom-nav--product .mobile-bottom-nav-fab[aria-expanded="true"] {
  opacity: 1;
}

.os-bottom-nav--product .mobile-bottom-nav-fab svg {
  color: inherit;
  transition: transform var(--dur-tick) linear;
}

.os-bottom-nav--product .mobile-bottom-nav-fab[aria-expanded="true"] svg {
  transform: scale(1.08);
}

/* ---------- brain switcher ---------- */
.brainpill {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  padding: 0.35rem 0.55rem 0.35rem 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--dur-tick) linear, background var(--dur-tick) linear;
}

.brainpill:hover {
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  background: var(--glass-bg);
}

.brainpill .k {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- split pane (main + rail) ---------- */
.os-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0fr;
  min-height: 0;
  flex: 1 1;
  height: 100%;
  transition: grid-template-columns var(--dur-stage) var(--ease-stage);
}

.os-split.open {
  grid-template-columns: minmax(0, 1fr) var(--os-split-rail, 20rem);
}

.os-split-primary {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.os-split-rail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  margin-left: var(--os-float-gap);
  border-radius: calc(var(--os-panel-radius) + 2px);
  border: 1px solid color-mix(in srgb, var(--glass-line) 80%, transparent);
  background: color-mix(in srgb, var(--glass-bg-strong) 88%, transparent);
  box-shadow: none;
  isolation: isolate;
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .os-split-rail {
    backdrop-filter: blur(calc(var(--glass-blur) * 1.05)) saturate(var(--glass-saturate-chrome));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.05))
      saturate(var(--glass-saturate-chrome));
  }
}

.os-split:not(.open) .os-split-rail {
  overflow: hidden;
  margin-left: 0;
  border-width: 0;
  background: transparent;
  box-shadow: none;
}

/* ---------- trace thread ---------- */
/* Trace thread — OS-aligned contrast (user bubble · agent bare · tool mono) */
.trace-thread {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: 100%;
  max-width: 64rem;
}

.trace-msg {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-width: min(100%, 38rem);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  animation: os-trace-in var(--dur-stage, 220ms) var(--ease-stage, ease) both;
}

.trace-msg.you {
  align-self: flex-end;
  width: fit-content;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-chrome, var(--r-soft));
  border-top-right-radius: calc(var(--r-record, var(--r-draw)) / 2);
  border: 1px solid color-mix(in srgb, var(--filament) 18%, transparent);
  background: color-mix(in srgb, var(--filament) 8%, transparent);
  color: var(--ink);
}

.trace-msg.assistant {
  align-self: stretch;
  max-width: min(100%, 44rem);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: var(--t-base);
}

.trace-msg.tool {
  align-self: stretch;
  max-width: min(100%, 44rem);
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-record, var(--r-draw));
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.trace-msg .tm-role {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.trace-msg.you .tm-role,
.trace-msg.assistant .tm-role {
  color: var(--ink-2);
}

.trace-msg .tm-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.composer-dock-transcript .trace-thread {
  max-width: none;
}

.os-shell-main.trace-main .trace-thread {
  max-width: 42rem;
}

@keyframes os-trace-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

/* Surface switcher chips in header */
.os-surface-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
}

.os-surface-switch button {
  all: unset;
  cursor: pointer;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear;
}

.os-surface-switch button:hover {
  color: var(--ink);
}

.os-surface-switch button.on {
  background: color-mix(in srgb, var(--filament) 16%, var(--surface));
  color: var(--ink);
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--filament) 70%, transparent);
}

/* Header menu button — reuse cbtn sizing */
.os-header-menu {
  width: 2rem;
  height: 2rem;
  color: var(--ink-3);
}

.os-header-menu:hover {
  color: var(--ink);
  background: var(--glass-bg);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/css/src/design-system/lens.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Lens product surface — snap-grid canvas, bento widgets, feed rail, hero HUD.
 * Law: widgets lift on canvas; data mono/tabular; Signal only on attention.
 */

/* ---------- page shell ---------- */
.lens-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: var(--s-6);
}

.lens-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.lens-page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--s-6);
  min-height: 0;
  flex: 1 1;
  align-items: start;
}

@media (max-width: 1100px) {
  .lens-page-body {
    grid-template-columns: 1fr;
  }

  .lens-feed-rail {
    order: -1;
  }
}

.lens-page-canvas-wrap {
  min-width: 0;
  min-height: 0;
}

/* Full-bleed lens inside OS shell */
.os-shell-main.lens-main {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- hero HUD ---------- */
.lens-canvas-hero {
  pointer-events: auto;
  text-align: left;
  max-width: 52ch;
}

.lens-canvas-hero .hero-clock {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
  font-feature-settings: "tnum" 1;
}

.lens-canvas-hero .hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  font-size: 0.68rem;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

.lens-canvas-hero .hero-status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lens-canvas-hero .hero-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}

.lens-canvas-hero .hero-status-dot.ok { background: var(--ink-2); }
.lens-canvas-hero .hero-status-dot.warn { background: var(--signal); }
.lens-canvas-hero .hero-status-dot.sync { background: var(--ink); opacity: 0.55; }

.lens-canvas-hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.lens-canvas-hero .hero-brain {
  margin-top: var(--s-4);
}

/* ---------- feed rail ---------- */
.lens-feed-rail {
  border: 1px solid var(--line);
  border-radius: var(--r-draw);
  background: color-mix(in srgb, var(--bg) 96%, var(--surface));
  padding: var(--s-4);
  max-height: min(72vh, 640px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.lens-feed-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-1);
}

.lens-feed-rail-head h2 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lens-feed-rail-count {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--ink-3);
}

.lens-feed-list {
  display: grid;
  gap: 2px;
}

/* ---------- feed row ---------- */
.lens-feed-row {
  position: relative;
  min-width: 0;
}

.lens-feed-row button.lens-feed-open {
  all: unset;
  cursor: pointer;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-8) var(--s-2) var(--s-2);
  border-radius: 6px;
  box-sizing: border-box;
  transition: background var(--dur-tick) linear;
}

.lens-feed-row button.lens-feed-open:hover {
  background: var(--glass-bg);
}

.lens-feed-row.attention button.lens-feed-open {
  border-left: 2px solid var(--signal);
  padding-left: calc(var(--s-2) - 2px);
}

.lens-feed-row .feed-title {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lens-feed-row .feed-meta {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--ink-3);
  flex: none;
}

.lens-feed-row .feed-excerpt {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lens-feed-row .feed-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}

.lens-feed-row button.lens-feed-archive {
  all: unset;
  cursor: pointer;
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--ink-3);
  padding: 4px;
  border-radius: var(--r-pill);
  transition: opacity var(--dur-tick) linear, color var(--dur-tick) linear, background var(--dur-tick) linear;
}

.lens-feed-row:hover button.lens-feed-archive {
  opacity: 1;
}

.lens-feed-row button.lens-feed-archive:hover {
  color: var(--ink);
  background: var(--glass-bg);
}

/* intervention row */
.lens-feed-intervention {
  border: 1px solid var(--glass-line);
  border-radius: var(--r-draw);
  background: var(--glass-bg);
  padding: var(--s-4);
  box-shadow: var(--glass-shadow-soft);
  isolation: isolate;
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .lens-feed-intervention {
    backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  }
}

.lens-feed-intervention .int-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s-2);
}

.lens-feed-intervention p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin-bottom: var(--s-3);
}

/* ---------- icon well ---------- */
.lens-icon-well {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--ink-2);
  position: relative;
}

.lens-icon-well.sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.lens-icon-well.attention {
  border-color: color-mix(in srgb, var(--signal) 40%, var(--line));
  color: var(--signal);
}

.lens-icon-well .well-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  border: 1px solid var(--bg);
}

.lens-icon-well .well-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--bg);
}

/* ---------- widget extensions ---------- */
.widget .w-head .w-icon {
  color: var(--ink-3);
}

.widget .w-head .w-icon.signal {
  color: var(--signal);
}

.widget.span-2 {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .widget.span-2 {
    grid-column: span 1;
  }
}

.lens-action-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.lens-action-plan:first-child {
  border-top: none;
}

.lens-action-plan b {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-3);
}

.lens-action-plan .ap-state {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.lens-action-plan .ap-state.due {
  color: var(--signal);
}

/* connect prompt */
.lens-connect-prompt {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-draw);
  padding: var(--s-6);
  text-align: center;
  background: var(--glass-bg);
  isolation: isolate;
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .lens-connect-prompt {
    backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  }
}

.lens-connect-prompt h3 {
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.lens-connect-prompt p {
  font-size: var(--t-xs);
  color: var(--ink-2);
  margin-bottom: var(--s-4);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

/* bootstrap veil */
.lens-bootstrap-veil {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--line) 80%, transparent) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  background-color: color-mix(in srgb, var(--bg) 92%, transparent);
}

.lens-bootstrap-veil .veil-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-bottom: var(--s-4);
}

.lens-bootstrap-veil p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-align: center;
  max-width: 32ch;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/css/src/design-system/trace.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Trace product surface — transcript column, agent runs, interventions.
 */

.trace-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: var(--s-6);
}

.os-shell-main.trace-main {
  padding: var(--s-4) var(--s-5) var(--s-3);
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-items: stretch;
}

.os-shell-main.trace-main .os-split {
  width: 100%;
}

.trace-page-head {
  width: 100%;
  max-width: 42rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-inline: auto;
  padding-bottom: 0;
  border-bottom: none;
}

.trace-page-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 0.7vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.trace-page-head .trace-meta {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.trace-page-body {
  width: 100%;
  max-width: 760px;
  flex: 1 1;
  min-height: 0;
  overflow: auto;
}

.trace-transcript {
  display: grid;
  gap: var(--s-4);
}

.trace-run-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.trace-bootstrap-veil {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
  background-color: color-mix(in srgb, var(--bg) 92%, transparent);
}

.trace-bootstrap-veil p {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/css/src/design-system/vault.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Vault product surface — synapse browse platform parity:
 * mounts rail · resource tree · flat rows · canvas split.
 */

.vault-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: var(--s-4);
}

.os-shell-main.vault-main {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* browse + canvas split */
.vault-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: var(--s-6);
  min-height: 0;
  flex: 1 1;
  align-items: stretch;
}

.vault-page:not(.vault-page-canvas-open) .vault-workspace {
  grid-template-columns: 1fr;
}

.vault-browse-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.vault-browse-split {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--s-4);
  min-height: 0;
  flex: 1 1;
}

.vault-browse-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* mounts rail */
.vault-mounts-rail {
  border: 1px solid var(--line);
  border-radius: var(--r-draw);
  background: color-mix(in srgb, var(--bg) 96%, var(--surface));
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(72vh, 640px);
  overflow: auto;
}

.vault-mounts-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-1);
}

.vault-mount-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  transition: background var(--dur-tick) linear, color var(--dur-tick) linear;
}

.vault-mount-btn:hover {
  background: var(--glass-bg);
  color: var(--ink);
}

.vault-mount-btn.on {
  background: color-mix(in srgb, var(--filament) 8%, transparent);
  color: var(--ink);
  box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--filament) 60%, transparent);
}

section.paper .vault-mount-btn.on {
  background: color-mix(in srgb, var(--filament) 6%, var(--surface));
  color: var(--ink);
}

.vault-mount-btn .mount-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  opacity: 0.7;
}

/* browse header */
.vault-browse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}

.vault-browse-header h2 {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vault-browse-header .vault-path {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.vault-browse-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.vault-search {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  min-width: 180px;
  outline: none;
}

/* toolbar */
.vault-browse-toolbar {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.vault-browse-view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.vault-view-btn {
  all: unset;
  cursor: pointer;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.vault-view-btn.on {
  background: color-mix(in srgb, var(--filament) 14%, var(--surface));
  color: var(--ink);
}

section.paper .vault-view-btn.on {
  background: color-mix(in srgb, var(--filament) 10%, var(--surface));
  color: var(--ink);
}

.vault-browse-action-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.vault-browse-selection-count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-right: var(--s-2);
}

/* list panel — design-system vault rows */
.vault-list-panel,
.vault-tree-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-draw);
  background: var(--bg);
  padding: var(--s-4) var(--s-4);
  max-height: min(68vh, 600px);
  overflow: auto;
  flex: 1 1;
}

.vault-list-panel .vault-rows {
  border-top: 1px solid var(--line-strong);
}

.vrow.selectable {
  cursor: pointer;
  border-radius: 4px;
  padding-left: var(--s-2);
  padding-right: var(--s-2);
  margin: 0 calc(-1 * var(--s-2));
  transition: background var(--dur-tick) linear;
}

.vrow.selectable:hover {
  background: var(--glass-bg);
}

.vrow.selectable.on {
  background: var(--glass-bg-strong);
  border-left: 2px solid var(--signal);
  padding-left: calc(var(--s-2) - 2px);
}

/* resource tree */
.vault-resource-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vault-resource-tree-nest {
  padding-left: var(--s-4);
  margin-left: var(--s-2);
  border-left: 1px solid var(--line);
}

.vault-resource-folder {
  border-radius: 6px;
}

.vault-resource-folder-summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-sm);
  color: var(--ink);
  border-radius: 6px;
  border: 1px solid transparent;
}

.vault-resource-folder-summary::-webkit-details-marker { display: none; }

.vault-resource-folder-summary:hover {
  background: var(--glass-bg);
  border-color: var(--line);
}

.vault-resource-chevron {
  width: 14px;
  height: 14px;
  flex: none;
  position: relative;
}

.vault-resource-chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-60%) rotate(-45deg);
  transition: transform var(--dur-tick) linear;
}

.vault-resource-folder[open] > .vault-resource-folder-summary .vault-resource-chevron::before {
  transform: translateY(-40%) rotate(45deg);
}

.vault-resource-folder-name {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-resource-folder-sub {
  font-size: 0.62rem;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-resource-leaf {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  box-sizing: border-box;
  padding: var(--s-2) var(--s-2);
  border-radius: 6px;
  font-size: var(--t-sm);
  border: 1px solid transparent;
  transition: background var(--dur-tick) linear, border-color var(--dur-tick) linear;
}

.vault-resource-leaf:hover {
  background: var(--glass-bg);
  border-color: var(--line);
}

.vault-resource-leaf.on {
  background: var(--glass-bg-strong);
  border-left: 2px solid var(--signal);
  padding-left: calc(var(--s-2) - 2px);
}

.vault-resource-leaf .nm {
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
}

.vault-resource-leaf .kind {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
}

.vault-resource-leaf .ver {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  flex: none;
  font-feature-settings: "tnum" 1;
}

/* canvas pane */
.vault-canvas-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.vault-canvas-empty {
  display: none;
}

.vault-page:not(.vault-page-canvas-open) .vault-canvas-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-draw);
  color: var(--ink-3);
  font-size: var(--t-sm);
  min-height: 200px;
}

.vault-empty-shell {
  padding: var(--s-12) var(--s-6);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
}

/* legacy detail panel (storybook isolated previews) */
.vault-detail-panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-draw);
  background: var(--surface);
  padding: var(--s-6);
  max-height: min(72vh, 640px);
  overflow: auto;
}

.vault-detail-panel h3 {
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--s-2);
  word-break: break-all;
}

.vault-detail-panel .detail-kind {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}

.vault-detail-panel .detail-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-bottom: var(--s-6);
}

.vault-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

@media (max-width: 1100px) {
  .vault-workspace {
    grid-template-columns: 1fr;
  }

  .vault-canvas-pane {
    min-height: 360px;
  }
}

@media (max-width: 768px) {
  .vault-browse-split {
    grid-template-columns: 1fr;
  }

  .vault-mounts-rail {
    display: none;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/css/src/design-system/canvas.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Resource canvas surfaces — extension-bound terminal views (synapse canvas registry parity).
 */

.canvas-resource-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-draw);
  background: var(--surface);
  overflow: hidden;
}

.canvas-surface-chrome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, var(--surface));
  flex-wrap: wrap;
}

.canvas-surface-chrome-main {
  min-width: 0;
  flex: 1 1;
}

.canvas-kind-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}

.canvas-surface-title {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  word-break: break-all;
  margin-bottom: var(--s-2);
}

.canvas-surface-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.canvas-surface-version {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-feature-settings: "tnum" 1;
}

.canvas-surface-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.canvas-surface-body {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-6);
}

.canvas-surface-loading {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.canvas-skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: var(--line);
  width: 72%;
}

.canvas-skeleton-line.short { width: 40%; }
.canvas-skeleton-block {
  height: 120px;
  border-radius: var(--r-draw);
  background: var(--glass-bg);
  margin-top: var(--s-4);
}

/* document lane */
.canvas-doc-surface {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: var(--s-4);
}

.canvas-doc-editor {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-wrap;
  margin: 0;
  flex: 1 1;
}

.canvas-doc-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* file preview */
.canvas-file-preview {
  display: grid;
  place-items: center;
  min-height: 240px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-draw);
  background: var(--bg);
}

.canvas-file-preview-page {
  text-align: center;
  color: var(--ink-3);
}

.canvas-file-preview-label {
  font-size: var(--t-sm);
  color: var(--ink);
  margin-top: var(--s-3);
}

.canvas-file-preview-hint {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  margin-top: var(--s-2);
}

/* visual widget */
.canvas-visual-surface {
  display: flex;
  justify-content: center;
  padding: var(--s-4) 0;
}

.canvas-visual-widget {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-draw);
  background: var(--bg);
  padding: var(--s-6);
  min-width: 280px;
}

.canvas-visual-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  height: 120px;
  margin: var(--s-4) 0;
}

.canvas-visual-bars span {
  flex: 1 1;
  background: var(--ink);
  opacity: 0.85;
  min-height: 8px;
}

.canvas-visual-caption {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* spreadsheet */
.canvas-spreadsheet {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.canvas-spreadsheet-grid {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-feature-settings: "tnum" 1;
}

.canvas-spreadsheet-grid th,
.canvas-spreadsheet-grid td {
  border: 1px solid var(--line);
  padding: var(--s-2) var(--s-3);
  text-align: left;
}

.canvas-spreadsheet-grid th {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--glass-bg);
}

/* meeting */
.canvas-meeting-surface {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.canvas-meeting-attendees {
  display: flex;
  gap: 0;
}

.canvas-meeting-attendees .presence-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.58rem;
  color: var(--ink-2);
  margin-left: -8px;
}

.canvas-meeting-attendees .presence-av:first-child { margin-left: 0; }
.canvas-meeting-attendees .presence-av.agent {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.canvas-meeting-transcript {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  margin: 0;
}

/* kv panels (neuron, reflex, data) */
.canvas-kv {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}

.canvas-kv div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-3);
  align-items: baseline;
}

.canvas-kv dt {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.canvas-kv dd {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink);
  margin: 0;
}

.canvas-neuron-caption,
.canvas-pathway-caption {
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* plan */
.canvas-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.canvas-plan-list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.canvas-plan-list li.signal { color: var(--signal); }

.canvas-plan-check {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  width: 1.2em;
  flex: none;
}

/* engagement timeline */
.canvas-engagement-timeline {
  display: grid;
  gap: var(--s-4);
}

.canvas-engagement-event {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.canvas-engagement-event.signal { color: var(--signal); }
.canvas-engagement-event .mono {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.canvas-member-surface {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.canvas-routine-surface .routine-card {
  max-width: none;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/css/src/theme/theme.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
  @auvy-ai/filament — full product theme (MATERIAL ONLY)
  Tokens + self-hosted faces + React component/specimen CSS + OS surfaces.

  Does NOT include the Tailwind @theme bridge (filament-tokens theme entry).
  Product apps: import that bridge next to Tailwind, or use an OS alias @theme
  (auvy-os filament-app-theme.css). See docs/TAILWIND.md.
*/


/* OS product surfaces not in the React package */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../../auvy-filament/packages/tokens/src/skins/skins.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
  Product skins — shadcn-style accent packs for AUVY products & ventures.

  Import after Filament theme, then set data-product-skin on <html> or .fi-root:

    import "@auvy-ai/filament/theme.css";
    import "@auvy-ai/filament-tokens/skins.css";
    // document.documentElement.dataset.productSkin = "akolo"

  Or use applyProductSkin() / <FilamentProvider skin="akolo" />.

  - auvy  = default crimson (tokens.css already) — this file is a no-op marker
  - akolo = Deal OS — cool blue primary (sample; ventures may ship @akolo/skin)
  - mina  = reserved venture — slate/teal (sample until mina skin repo exists)
  - off   = do not use these packs; skip Filament entirely
*/

[data-product-skin="auvy"],
:root:not([data-product-skin]) {
  /* Default Filament crimson lives in tokens.css — keep explicit for tooling. */
  --product-skin: auvy;
}

/* —— Akolo (Deal / ETA OS) —— */
[data-product-skin="akolo"] {
  --product-skin: akolo;
  --color-primary: #1b6ef3;
  --color-primary-hover: #1557c7;
  --color-primary-deep: #0d3f94;
  --color-primary-fg: #ffffff;
  --color-primary-soft: color-mix(in srgb, #1b6ef3 14%, transparent);
  --filament: var(--color-primary);
  --filament-hover: var(--color-primary-hover);
  --filament-soft: var(--color-primary-soft);
  --halo-core: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --chart-series-accent: var(--color-primary);
  /* Slightly sharper chrome for deal-desk density */
  --r-draw: 5px;
  --glass-blur: 18px;
  --glass-blur-strong: 28px;
}

/* —— Mina (reserved — sample cool slate until venture skin ships) —— */
[data-product-skin="mina"] {
  --product-skin: mina;
  --color-primary: #0f766e;
  --color-primary-hover: #0d9488;
  --color-primary-deep: #115e59;
  --color-primary-fg: #ffffff;
  --color-primary-soft: color-mix(in srgb, #0f766e 14%, transparent);
  --filament: var(--color-primary);
  --filament-hover: var(--color-primary-hover);
  --filament-soft: var(--color-primary-soft);
  --halo-core: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --chart-series-accent: var(--color-primary);
  --r-draw: 8px;
  --glass-blur: 24px;
  --glass-blur-strong: 36px;
}

/* Explicit off marker — products using this should not import Filament theme. */
[data-product-skin="off"] {
  --product-skin: off;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../packages/surfaces/live-ui/src/canvas/graph-nodes.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Soft Fusion graph node materials — ported from OS engagementCanvasNodes.css.
 * Surfaces owns paint; OS places Vue Flow / graph engines.
 * Token aliases map OS shadcn names → Filament Soft Fusion.
 */
.surface-graph-nodes,
.engagement-canvas-node {
  --color-fg: var(--ink, #fafafa);
  --color-fg-muted: var(--ink-3, #8b8b96);
  --color-border: var(--line, #2a2a30);
  --color-surface: var(--surface, #121214);
  --color-primary: var(--color-primary, #d7025c);
  --color-primary-soft: var(--color-primary-soft, rgba(215, 2, 92, 0.14));
  --color-success: #3d9a6a;
  --color-warning: #b45309;
  --color-error: #c45c5c;
  --blur-glass-1: calc(var(--glass-blur, 22px) * 0.4);
}

/* Shared engagement canvas node chrome — imported by graph + node components */

.engagement-canvas-node {
  --engagement-node-shadow: 0 1px 2px color-mix(in srgb, var(--color-fg) 5%, transparent),
    0 8px 22px -14px color-mix(in srgb, var(--color-fg) 18%, transparent);
  position: relative;
  border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass-1, 8px));
          backdrop-filter: blur(var(--blur-glass-1, 8px));
  box-shadow: var(--engagement-node-shadow);
  transition:
    transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 140ms ease,
    opacity 140ms ease,
    border-color 140ms ease;
}

.engagement-canvas-node--selected {
  border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface) 92%);
  box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--color-fg) 16%, transparent);
}

.engagement-canvas-node--dimmed {
  opacity: 0.3;
  transform: scale(0.97);
  filter: saturate(0.85);
}

.engagement-canvas-node--banner {
  border-radius: 0.75rem;
}

.engagement-canvas-node--card {
  border-radius: 0.625rem;
}

.engagement-canvas-node--pill {
  border-radius: 9999px;
}

.engagement-canvas-node--tile {
  border-radius: 0.5rem;
}

.engagement-canvas-node--glyph-shape {
  border-radius: 0.375rem;
}

.engagement-canvas-node__rail {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.engagement-canvas-node__icon-wrap {
  display: flex;
  shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-muted);
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

/* ----- Accent vocabulary: one tone per node, applied to the icon chip ----- */

.engagement-canvas-node {
  --engagement-accent: var(--color-fg-muted);
  --engagement-accent-soft: color-mix(in srgb, var(--color-fg) 8%, transparent);
}

.engagement-canvas-node--accent-primary {
  --engagement-accent: var(--color-primary);
  --engagement-accent-soft: var(--color-primary-soft);
}

.engagement-canvas-node--accent-positive {
  --engagement-accent: var(--color-success);
  --engagement-accent-soft: color-mix(in srgb, var(--color-success) 14%, transparent);
}

.engagement-canvas-node--accent-warning {
  --engagement-accent: var(--color-warning);
  --engagement-accent-soft: color-mix(in srgb, var(--color-warning) 14%, transparent);
}

.engagement-canvas-node--accent-danger {
  --engagement-accent: var(--color-error);
  --engagement-accent-soft: color-mix(in srgb, var(--color-error) 13%, transparent);
}

.engagement-canvas-node__icon-wrap--primary,
.engagement-canvas-node__icon-wrap--positive,
.engagement-canvas-node__icon-wrap--warning,
.engagement-canvas-node__icon-wrap--danger {
  color: var(--engagement-accent);
  background: var(--engagement-accent-soft);
  border-color: color-mix(in srgb, var(--engagement-accent) 35%, transparent);
}

.engagement-canvas-node--selected.engagement-canvas-node--accent-primary,
.engagement-canvas-node--selected.engagement-canvas-node--accent-positive,
.engagement-canvas-node--selected.engagement-canvas-node--accent-warning,
.engagement-canvas-node--selected.engagement-canvas-node--accent-danger {
  border-color: color-mix(in srgb, var(--engagement-accent) 55%, var(--color-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--engagement-accent) 45%, transparent),
    0 8px 22px -14px color-mix(in srgb, var(--color-fg) 16%, transparent);
}

.engagement-canvas-node__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.engagement-canvas-node__title {
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
  line-height: 1.35;
  color: var(--color-fg);
}

.engagement-canvas-node__summary {
  margin-top: 0.125rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.4;
  color: var(--color-fg-muted);
}

.engagement-canvas-node__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.engagement-canvas-node__meta--divider {
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.engagement-canvas-node__chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  background: color-mix(in srgb, var(--color-surface-hover) 75%, transparent);
  padding: 0.125rem 0.4375rem;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.engagement-canvas-node__chip--missing {
  border-style: dashed;
  color: var(--color-fg-subtle);
}

.engagement-canvas-node__owner {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  background: color-mix(in srgb, var(--color-surface-hover) 80%, transparent);
  font-size: 9px;
  font-weight: 600;
  color: var(--color-fg-muted);
}

.engagement-canvas-node__governance-dot {
  height: 0.375rem;
  width: 0.375rem;
  shrink: 0;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background: color-mix(in srgb, var(--color-fg-muted) 40%, transparent);
}

.engagement-canvas-node__handle {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  border: none !important;
  background: transparent !important;
  opacity: 0;
}

.engagement-canvas-node--compact {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--color-fg) 4%, transparent),
    0 4px 14px -10px color-mix(in srgb, var(--color-fg) 12%, transparent);
}

.engagement-canvas-node--compact .engagement-canvas-node__title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0;
}

.engagement-canvas-node--glyph-tier {
  box-shadow:
    0 1px 1px color-mix(in srgb, var(--color-fg) 3%, transparent),
    0 2px 8px -6px color-mix(in srgb, var(--color-fg) 10%, transparent);
}

.engagement-canvas-node__rail--glyph {
  align-items: center;
  gap: 0.5rem;
}

.engagement-canvas-node__title--glyph {
  margin-top: 0;
  font-size: 9px;
  line-height: 1.25;
}

.engagement-canvas-node__chip--people {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.engagement-canvas-node--profile .engagement-canvas-node__title {
  font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
  .engagement-canvas-node {
    transition: opacity 0.01s linear;
  }
}

.engagement-activity-junction {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  color: var(--color-fg-muted);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fg) 8%, transparent);
  cursor: pointer;
  transition:
    transform 140ms ease,
    opacity 140ms ease,
    border-color 140ms ease;
}

.engagement-activity-junction--hub {
  pointer-events: auto;
  width: 20px;
  height: 20px;
}

.engagement-activity-junction--hovered {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  color: var(--color-fg);
}

/* Attachment badge chips — peer of OS EngagementAttachmentBadgeRow */
.engagement-attachment-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.engagement-attachment-badges__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 22px;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border, var(--line, #2a2a30)) 70%, transparent);
  background: color-mix(in srgb, var(--color-surface, var(--surface, #121214)) 70%, transparent);
  color: var(--color-fg-muted, var(--ink-3, #8b8b96));
  font-size: 0.6875rem;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

.engagement-attachment-badges__chip--alert {
  border-color: color-mix(
    in srgb,
    var(--color-border, var(--line, #2a2a30)) 40%,
    var(--color-error, #c45c5c)
  );
  color: var(--color-fg, var(--ink, #fafafa));
}

.engagement-attachment-badges__chip--touchpoint {
  border-style: dashed;
}

.engagement-attachment-badges__overflow {
  color: var(--color-fg-muted, var(--ink-3, #8b8b96));
  font-size: 0.6875rem;
  font-weight: 600;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../packages/surfaces/live-ui/src/canvas/canvas.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Surfaces canvas window chrome — Soft Fusion visual SSOT (Filament / auvy-os peer).
 * Mirrors: glass-modal-panel + glass-frost-2 + glass-canvas-window-panel (14px rail),
 * CanvasViewerChrome h-9 bar, CanvasKindPill, EngagementVersionTimeline overlay.
 * Hosts that load Filament tokens get live theme; literals are Soft Fusion dark fallbacks.
 */

:root {
  /* Canvas geometry — layoutCanvasWindow peer */
  --surface-canvas-rail-width: min(560px, calc(100vw - 1.5rem));
  --surface-canvas-rail-min: 360px;
  --surface-canvas-rail-top: calc(
    env(safe-area-inset-top, 0px) + var(--layout-shell-header-height, 3.5rem) + 0.125rem
  );
  --surface-canvas-rail-right: 12px;
  --surface-canvas-rail-bottom: 1rem;
  --surface-canvas-overlay-z: 40;
  --surface-canvas-radius: 14px;
  --surface-canvas-transition: 280ms cubic-bezier(0.32, 0.72, 0, 1);

  /* Soft Fusion fallbacks when Filament tokens are not on the page */
  --surface-sf-bg: #0a0a0c;
  --surface-sf-surface: #121214;
  --surface-sf-line: #2a2a30;
  --surface-sf-ink: #fafafa;
  --surface-sf-ink-2: #c4c4cc;
  --surface-sf-ink-3: #8b8b96;
  --surface-sf-primary: #d7025c;
  --surface-sf-glass-line: rgba(255, 255, 255, 0.11);
  --surface-sf-glass-highlight: rgba(255, 255, 255, 0.06);
  --surface-sf-glass-blur: 22px;
  --surface-sf-glass-saturate: 1.12;
  --surface-sf-r-draw: 8px;
  --surface-sf-shadow-chrome: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.26);
}

.surface-canvas-chrome {
  --_bg: var(--bg, var(--surface-sf-bg));
  --_surface: var(--surface, var(--surface-sf-surface));
  --_line: var(--line, var(--surface-sf-line));
  --_ink: var(--ink, var(--surface-sf-ink));
  --_ink-2: var(--ink-2, var(--surface-sf-ink-2));
  --_ink-3: var(--ink-3, var(--surface-sf-ink-3));
  --_primary: var(--color-primary, var(--surface-sf-primary));
  --_glass-line: var(--glass-line, var(--surface-sf-glass-line));
  --_glass-highlight: var(--glass-highlight, var(--surface-sf-glass-highlight));
  --_glass-blur: var(--glass-blur, var(--surface-sf-glass-blur));
  --_glass-saturate: var(--glass-saturate, var(--surface-sf-glass-saturate));
  --_r-draw: var(--r-draw, var(--surface-sf-r-draw));
  --_shadow-chrome: var(--glass-shadow-chrome, var(--surface-sf-shadow-chrome));
  --_font: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
  --_mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  color: var(--_ink);
  background: var(--_bg);
  font-family: var(--_font);
  transition:
    width var(--surface-canvas-transition),
    inset var(--surface-canvas-transition),
    border-radius var(--surface-canvas-transition),
    box-shadow var(--surface-canvas-transition);
}

/* Floating rail — OS LAYOUT_CANVAS_WINDOW_PANEL_SHELL peer */
.surface-canvas-chrome--rail {
  position: fixed;
  top: var(--surface-canvas-rail-top);
  right: var(--surface-canvas-rail-right);
  bottom: var(--surface-canvas-rail-bottom);
  width: var(--surface-canvas-rail-width);
  min-width: min(100%, var(--surface-canvas-rail-min));
  z-index: var(--surface-canvas-overlay-z);
  border-radius: var(--surface-canvas-radius);
  overflow: hidden;
  border: 1px solid var(--_line);
  background: var(--_bg);
  box-shadow: var(--_shadow-chrome);
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .surface-canvas-chrome--rail {
    border-color: var(--_glass-line);
    background-clip: padding-box;
    backdrop-filter: blur(calc(var(--_glass-blur) * 1.25)) saturate(var(--_glass-saturate));
    -webkit-backdrop-filter: blur(calc(var(--_glass-blur) * 1.25)) saturate(var(--_glass-saturate));
    box-shadow:
      inset 0 1px 0 var(--_glass-highlight),
      0 12px 40px -18px rgba(0, 0, 0, 0.45),
      var(--_shadow-chrome);
  }
}

/* Full-bleed page host */
.surface-canvas-chrome--fullscreen {
  position: fixed;
  inset: 0;
  z-index: calc(var(--surface-canvas-overlay-z) + 10);
  width: 100vw;
  height: 100vh;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--_bg);
}

/* Lens / compact embed */
.surface-canvas-chrome--widget {
  position: relative;
  max-width: 28rem;
  min-height: 14rem;
  border-radius: var(--surface-canvas-radius);
  overflow: hidden;
  border: 1px solid var(--_line);
  background: var(--_bg);
  box-shadow: var(--_shadow-chrome);
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .surface-canvas-chrome--widget {
    border-color: var(--_glass-line);
    background-clip: padding-box;
    backdrop-filter: blur(calc(var(--_glass-blur) * 1.25)) saturate(var(--_glass-saturate));
    -webkit-backdrop-filter: blur(calc(var(--_glass-blur) * 1.25)) saturate(var(--_glass-saturate));
    box-shadow:
      inset 0 1px 0 var(--_glass-highlight),
      var(--_shadow-chrome);
  }
}

.surface-canvas-chrome--bare {
  position: relative;
  min-height: 12rem;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* In-window title bar — CanvasViewerChrome peer (h-9) */
.surface-canvas-chrome__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0 0.25rem 0 0;
  border-bottom: 1px solid color-mix(in srgb, var(--_line) 25%, transparent);
  background: color-mix(in srgb, var(--_surface) 20%, transparent);
  overflow: hidden;
}

.surface-canvas-chrome__kind {
  flex-shrink: 0;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--_line) 45%, transparent);
  background: color-mix(in srgb, var(--_surface) 50%, transparent);
  border-radius: var(--_r-draw);
  padding: 1px 0.375rem;
  margin-left: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--_ink-3);
  font-family: var(--_mono);
}

.surface-canvas-chrome__divider {
  width: 1px;
  height: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--_line) 20%, transparent);
  flex-shrink: 0;
}

.surface-canvas-chrome__title {
  letter-spacing: -0.02em;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  margin: 0;
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--_ink);
}

.surface-canvas-chrome__meta {
  font-size: 0.6875rem;
  color: var(--_ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.surface-canvas-chrome__actions {
  display: flex;
  gap: 1px;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: auto;
  margin-right: 0.25rem;
  max-width: 58%;
  overflow-x: auto;
  scrollbar-width: none;
}

.surface-canvas-chrome__actions::-webkit-scrollbar {
  display: none;
}

.surface-canvas-chrome__btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--_line) 45%, transparent);
  background: transparent;
  color: var(--_ink-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--_r-draw);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.surface-canvas-chrome__btn:hover {
  border-color: var(--_primary);
  color: var(--_ink);
}

.surface-canvas-chrome__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.surface-canvas-chrome__stage {
  position: relative;
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  background: var(--_bg);
}

.surface-canvas-chrome__timeline-slot {
  position: absolute;
  inset-inline: 0;
  top: 0.75rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 0.75rem;
}

@media (min-width: 640px) {
  .surface-canvas-chrome__timeline-slot {
    top: 1rem;
    padding: 0 1rem;
  }
}

.surface-canvas-chrome__timeline-slot > * {
  pointer-events: auto;
  width: 100%;
  max-width: min(40rem, calc(100vw - 1.5rem));
}

@media (min-width: 640px) {
  .surface-canvas-chrome__timeline-slot > * {
    max-width: min(48rem, calc(100vw - 2rem));
  }
}

/* EngagementVersionTimeline overlay — glass-modal-panel glass-frost-2 rounded-sm */
.surface-version-timeline {
  --_bg: var(--bg, var(--surface-sf-bg));
  --_surface: var(--surface, var(--surface-sf-surface));
  --_line: var(--line, var(--surface-sf-line));
  --_ink: var(--ink, var(--surface-sf-ink));
  --_ink-3: var(--ink-3, var(--surface-sf-ink-3));
  --_primary: var(--color-primary, var(--surface-sf-primary));
  --_glass-line: var(--glass-line, var(--surface-sf-glass-line));
  --_glass-highlight: var(--glass-highlight, var(--surface-sf-glass-highlight));
  --_glass-blur: var(--glass-blur, var(--surface-sf-glass-blur));
  --_glass-saturate: var(--glass-saturate, var(--surface-sf-glass-saturate));
  --_r-draw: var(--r-draw, var(--surface-sf-r-draw));

  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--_r-draw);
  border: 1px solid var(--_line);
  background: var(--_bg);
  color: var(--_ink);
  box-shadow:
    inset 0 1px 0 var(--_glass-highlight),
    0 12px 40px -18px rgba(0, 0, 0, 0.45);
  isolation: isolate;
}

@supports (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .surface-version-timeline {
    border-color: var(--_glass-line);
    background-clip: padding-box;
    backdrop-filter: blur(calc(var(--_glass-blur) * 1.25)) saturate(var(--_glass-saturate));
    -webkit-backdrop-filter: blur(calc(var(--_glass-blur) * 1.25)) saturate(var(--_glass-saturate));
  }
}

@media (min-width: 640px) {
  .surface-version-timeline {
    padding: 0.625rem 1rem;
  }
}

.surface-version-timeline--dock {
  max-width: 100%;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--_surface) 35%, transparent);
}

.surface-version-timeline--inline {
  border-radius: var(--_r-draw);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--_surface) 40%, transparent);
}

.surface-version-timeline__stop--compact {
  width: 8px;
  height: 8px;
  margin-left: -4px;
}

.surface-version-timeline__stop:focus-visible {
  outline: 2px solid var(--_primary);
  outline-offset: 1px;
}

/* Canvas viewer insets — peer of OS canvasViewerShellSpacing */
.surface-canvas-chrome__inset-dock {
  padding: 0.875rem 0.5rem 0.875rem 0.375rem; /* py-3.5 pr-2 pl-1.5 */
}

.surface-canvas-chrome__inset-content {
  padding: 1rem 0.75rem 1rem 0.5rem; /* py-4 pr-3 pl-2 */
}

.surface-canvas-chrome__inset-content-expanded {
  padding: 1.25rem 1rem; /* py-5 px-3/4 */
}

.surface-canvas-chrome__inset-state {
  padding: 1rem 0.75rem 1rem 0.5rem;
}

.surface-canvas-chrome__inset-file {
  padding: 0.5rem 0.5rem 0.75rem 0;
}

.surface-canvas-chrome__inset-skeleton {
  padding: 0.75rem 0.25rem 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.surface-canvas-chrome__inset-skeleton-visual {
  padding: 1rem 0.5rem 1rem 0.25rem;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.surface-canvas-chrome__icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-draw, 8px);
  background: transparent;
  color: var(--ink-2, #c4c4cc);
  cursor: pointer;
}

.surface-canvas-chrome__icon-btn:hover {
  border-color: color-mix(in srgb, var(--line, #2a2a30) 45%, transparent);
  color: var(--ink, #fafafa);
}

.surface-canvas-chrome__icon-btn[data-pressed='true'] {
  background: color-mix(in srgb, var(--color-primary, #d7025c) 12%, transparent);
  color: var(--ink, #fafafa);
}

.surface-canvas-chrome__icon-btn[data-destructive='true']:hover {
  color: #c45c5c;
  border-color: color-mix(in srgb, #c45c5c 35%, transparent);
}

.surface-canvas-chrome__icon-btn--labeled {
  width: auto;
  min-width: 1.75rem;
  padding: 0 0.4rem;
  gap: 0.25rem;
}

.surface-canvas-chrome__icon-btn--primary {
  background: color-mix(in srgb, var(--color-primary, #d7025c) 16%, transparent);
  color: var(--ink, #fafafa);
}

.surface-canvas-chrome__icon-btn-label {
  display: none;
  font-size: 0.65rem;
  font-weight: 600;
}

@media (min-width: 640px) {
  .surface-canvas-chrome__icon-btn-label {
    display: inline;
  }
}

.surface-version-timeline__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.surface-version-timeline__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--_ink-3);
}

.surface-version-timeline__meta {
  font-size: 0.6875rem;
  color: var(--_ink-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.surface-version-timeline__track {
  position: relative;
  height: 1.25rem;
  padding: 0.125rem 0.25rem;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.surface-version-timeline__rail {
  position: absolute;
  inset-inline: 0.25rem;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--_line) 70%, transparent);
}

.surface-version-timeline__fill {
  position: absolute;
  left: 0.25rem;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--_ink) 80%, transparent);
}

.surface-version-timeline__stop {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 2px solid var(--_ink);
  background: var(--_bg);
  padding: 0;
  cursor: pointer;
}

.surface-version-timeline__stop[data-active='true'] {
  background: var(--_primary);
  border-color: var(--_primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--_primary) 25%, transparent);
}

.surface-version-timeline__summary {
  font-size: 0.75rem;
  color: var(--_ink-3);
}

.surface-version-banner {
  margin: 0.5rem 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-draw, var(--surface-sf-r-draw));
  border: 1px solid var(--glass-line, var(--surface-sf-glass-line));
  background: color-mix(
    in srgb,
    var(--bg, var(--surface-sf-bg)) 88%,
    var(--surface, var(--surface-sf-surface)) 12%
  );
  font-size: 0.8rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ink-2, var(--surface-sf-ink-2));
  box-shadow: inset 0 1px 0 var(--glass-highlight, var(--surface-sf-glass-highlight));
}

.surface-graph-canvas {
  position: relative;
  width: 100%;
  min-height: 16rem;
  height: 100%;
  background:
    radial-gradient(
      circle at 18% 18%,
      color-mix(in srgb, var(--color-primary, var(--surface-sf-primary)) 10%, transparent),
      transparent 42%
    ),
    var(--bg, var(--surface-sf-bg));
  color: var(--ink, var(--surface-sf-ink));
}

.surface-graph-canvas svg {
  width: 100%;
  height: 100%;
  min-height: 16rem;
}

.surface-graph-node {
  fill: var(--surface, var(--surface-sf-surface));
  stroke: var(--color-primary, var(--surface-sf-primary));
  stroke-width: 1.5;
}

.surface-graph-node__label {
  fill: var(--ink, var(--surface-sf-ink));
  font-size: 11px;
  font-family: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
}

.surface-graph-edge {
  stroke: color-mix(in srgb, var(--ink-3, var(--surface-sf-ink-3)) 70%, transparent);
  stroke-width: 1.25;
  fill: none;
}

.surface-toolblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  color: var(--ink, var(--surface-sf-ink));
  font-family: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
}

.surface-toolblock__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  border-radius: var(--r-draw, 8px);
}

.surface-toolblock__header:hover .surface-toolblock__chevron {
  opacity: 0.7;
}

.surface-toolblock__header:disabled {
  cursor: default;
}

.surface-toolblock__lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--line, var(--surface-sf-line)) 70%, transparent);
}

.surface-toolblock__lead-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.surface-toolblock__lead-icon-glyph {
  display: block;
  width: 14px;
  height: 14px;
  font-size: 0.7rem;
  line-height: 14px;
  text-align: center;
  color: var(--ink-2, var(--surface-sf-ink-2));
}

.surface-toolblock__lead-icon-integration {
  display: block;
  width: 14px;
  height: 14px;
  overflow: hidden;
  border-radius: 2px;
}

.surface-toolblock__lead-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.surface-toolblock__lead[data-state='pending'] {
  background: var(--color-primary, var(--surface-sf-primary));
  animation: surface-toolblock-pulse 1s ease-in-out infinite;
}

.surface-toolblock__lead[data-state='success'] {
  background: #3d9a6a;
}

.surface-toolblock__lead[data-state='error'] {
  background: #c45c5c;
}

.surface-toolblock__title {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surface-toolblock[data-tool-state='pending'] .surface-toolblock__title {
  color: color-mix(in srgb, var(--ink-3, var(--surface-sf-ink-3)) 85%, transparent);
}

.surface-toolblock[data-tool-state='error'] .surface-toolblock__title {
  color: #c45c5c;
}

.surface-toolblock[data-tool-state='success'] .surface-toolblock__title {
  color: var(--ink, var(--surface-sf-ink));
}

.surface-toolblock__subtitle {
  font-size: 0.75rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink-3, var(--surface-sf-ink-3)) 75%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surface-toolblock__header-extra {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ink-3, var(--surface-sf-ink-3)) 80%, transparent);
  font-size: 0.75rem;
}

.surface-toolblock__header-extra--success {
  color: var(--ink-2, var(--ink-3, #8b8b96));
}

.surface-toolblock__chevron {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0;
  color: var(--ink-3, var(--surface-sf-ink-3));
  transition: opacity 150ms ease;
}

.surface-toolblock__body {
  width: 100%;
  padding: 0.35rem 0 0.5rem 1.4rem;
  font-size: 0.8rem;
  color: var(--ink-3, var(--surface-sf-ink-3));
}

.surface-toolblock__error {
  margin: 0;
  padding: 0.5rem;
  border-radius: var(--r-draw, 8px);
  border: 1px solid color-mix(in srgb, var(--line, #2a2a30) 40%, transparent);
  background: color-mix(in srgb, var(--surface, #121214) 30%, transparent);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.75rem;
}

@keyframes surface-toolblock-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

/* Kind body paint — Filament Soft Fusion (figure + ledger + seam) */
.surface-kind-body {
  color: var(--ink, var(--surface-sf-ink));
  font-family: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
}

.surface-kind-body__sheet td {
  border: 1px solid color-mix(in srgb, var(--line, var(--surface-sf-line)) 55%, transparent);
  padding: 0.28rem 0.45rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.surface-kind-body__json,
.surface-kind-body__doc {
  margin: 0;
  color: var(--ink-2, var(--surface-sf-ink-2));
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: var(--t-sm, 0.875rem);
  line-height: 1.45;
}

.surface-kind-body__pack {
  padding: var(--s-3, 0.75rem) var(--s-2, 0.5rem);
}

.surface-kind-body__pack p {
  margin: 0.35rem 0 0;
  color: var(--ink-3);
  font-size: var(--t-sm, 0.875rem);
}

.surface-kind-body__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 0.75rem);
  padding: 0.15rem 0.05rem 0.2rem;
}

.surface-kind-body__kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3, 0.75rem);
}

.surface-kind-body__kpi-head .fi-stat__label {
  display: block;
  margin-bottom: 0.2rem;
}

.surface-kind-body__kpi-title {
  display: block;
  font-family: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
  font-size: var(--t-base, 1.0625rem);
  font-weight: 650;
  letter-spacing: var(--track-tight, -0.022em);
  color: var(--ink);
}

.surface-kind-body__kpi-head p {
  margin: 0.15rem 0 0;
  font-size: var(--t-xs, 0.75rem);
  line-height: 1.35;
  color: var(--ink-3);
  max-width: 22ch;
}

.surface-kind-body__spark {
  flex: 0 0 auto;
  color: var(--filament, var(--color-primary, #d7025c));
}

.surface-kind-body__spark-line {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.surface-kind-body__spark-area {
  fill: color-mix(in srgb, var(--filament, var(--color-primary, #d7025c)) 18%, transparent);
}

.surface-kind-body__kpi-grid.fi-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
  align-items: stretch;
}

.surface-kind-body__kpi-cell.fi-stat {
  position: relative;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.45rem 0.55rem 0.5rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--r-draw, 8px);
  background: color-mix(in srgb, var(--surface-2, #1a1a1e) 55%, var(--surface, #121214));
  overflow: hidden;
}

.surface-kind-body__kpi-cell .fi-stat__value {
  font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.55rem);
  line-height: 1.05;
  letter-spacing: var(--track-display, -0.038em);
}

.surface-kind-body__kpi-delta {
  font-style: normal;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--ink-2);
}

.surface-kind-body__kpi-cell[data-tone='up'] .surface-kind-body__kpi-delta {
  color: color-mix(in srgb, #3d9a6a 70%, var(--ink));
}

.surface-kind-body__kpi-cell[data-tone='down'] .surface-kind-body__kpi-delta {
  color: var(--filament, var(--color-primary, #d7025c));
}

.surface-kind-body__kpi-table.fi-ledger-table,
.surface-kind-body__kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-xs, 0.75rem);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.surface-kind-body__kpi-table td {
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  padding: 0.28rem 0.2rem;
  color: var(--ink-2);
}

.surface-kind-body__kpi-table td[data-head='1'] {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 650;
  border-top: 0;
  padding-bottom: 0.35rem;
}

.surface-kind-body__kpi-table td:last-child {
  text-align: end;
  font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  color: var(--ink);
  letter-spacing: var(--track-tight, -0.022em);
}

.surface-kind-body__kpi-table tr:first-child td:last-child {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--ink-3);
  font-size: 0.62rem;
}

.surface-kind-body__kpi-note {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: var(--track-label, 0.08em);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Example HTML app — Filament instrument widget */
.sf-html-app {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 0.75rem);
  padding: 0.15rem 0.1rem 0.15rem 0.35rem;
  color: var(--ink);
  font-family: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
}

.sf-html-app__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3, 0.75rem);
}

.sf-html-app__head strong {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-base, 1.0625rem);
  font-weight: 650;
  letter-spacing: var(--track-tight, -0.022em);
}

.sf-html-app__pill {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: var(--r-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--filament, var(--color-primary, #d7025c)) 45%, transparent);
  background: var(--color-primary-soft, rgba(215, 2, 92, 0.14));
  color: var(--ink);
}

.sf-html-app__lede {
  margin: 0;
  font-size: var(--t-xs, 0.75rem);
  line-height: 1.4;
  color: var(--ink-3);
}

.sf-html-app__metrics.fi-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2, 0.5rem);
}

.sf-html-app__metrics .fi-stat {
  gap: 0.15rem;
  padding: 0.4rem 0.45rem 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: var(--r-draw, 8px);
  background: color-mix(in srgb, var(--surface-2, #1a1a1e) 50%, transparent);
  overflow: hidden;
}

.sf-html-app__metrics .fi-stat__value {
  font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.35rem);
}

.sf-html-app__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sf-html-app__list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem 0.35rem 0.7rem;
  border-radius: var(--r-draw, 8px);
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  font-size: var(--t-xs, 0.75rem);
  overflow: hidden;
}

.sf-html-app__list em {
  font-style: normal;
  font-weight: 650;
  letter-spacing: var(--track-ui, -0.011em);
}

.sf-html-app__list span {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.62rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Preview hub — Soft Fusion cards */
.preview-hub {
  color: var(--ink, var(--surface-sf-ink));
  background: transparent;
  font-family: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
}

.preview-hub__card {
  border: 1px solid var(--line, var(--surface-sf-line)) !important;
  border-radius: var(--surface-canvas-radius) !important;
  background: var(--bg, var(--surface-sf-bg)) !important;
  color: var(--ink, var(--surface-sf-ink)) !important;
  box-shadow: var(--glass-shadow-chrome, var(--surface-sf-shadow-chrome));
}

.preview-hub__card.is-active {
  border-color: color-mix(
    in srgb,
    var(--color-primary, var(--surface-sf-primary)) 55%,
    var(--line, var(--surface-sf-line))
  ) !important;
}

.preview-hub__card header {
  border-bottom-color: color-mix(
    in srgb,
    var(--line, var(--surface-sf-line)) 45%,
    transparent
  ) !important;
}

.preview-hub__card footer {
  border-top-color: color-mix(
    in srgb,
    var(--line, var(--surface-sf-line)) 45%,
    transparent
  ) !important;
}

.preview-hub__card footer button,
.preview-hub__densities button {
  border-color: color-mix(
    in srgb,
    var(--line, var(--surface-sf-line)) 45%,
    transparent
  ) !important;
  border-radius: var(--r-draw, var(--surface-sf-r-draw)) !important;
  color: var(--ink-2, var(--surface-sf-ink-2)) !important;
  background: transparent !important;
}

.preview-hub__densities button.is-active,
.preview-hub__card footer button:hover {
  border-color: var(--color-primary, var(--surface-sf-primary)) !important;
  color: var(--ink, var(--surface-sf-ink)) !important;
}

.preview-hub .muted {
  color: var(--ink-3, var(--surface-sf-ink-3)) !important;
}

/* Dock-rail panel header — peer of OS CanvasSurfacePanelHeader */
.surface-canvas-panel-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.375rem 0.625rem 0.375rem 0.25rem;
  min-width: 0;
}

.surface-canvas-panel-header--loading {
  animation: surface-skeleton-pulse 1.4s ease-in-out infinite;
}

.surface-canvas-panel-header__skeleton {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.surface-canvas-panel-header__identity {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  overflow: hidden;
}

.surface-canvas-panel-header__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink, #fafafa);
}

.surface-canvas-panel-header__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.65rem;
  color: var(--ink-3, #8b8b96);
}

.surface-canvas-panel-header__actions {
  margin-left: auto;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1px;
}

/* Loading skeleton — peer of OS CanvasViewerLoadingSkeleton */
.surface-canvas-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  animation: surface-skeleton-pulse 1.4s ease-in-out infinite;
}

.surface-canvas-skeleton[data-variant='dot'] {
  display: inline-flex;
  width: auto;
  animation: none;
}

.surface-canvas-skeleton__bar {
  border-radius: 2px;
  background: color-mix(in srgb, var(--surface, #121214) 55%, var(--ink, #fafafa) 8%);
}

.surface-canvas-skeleton__bar--lg {
  height: 1.75rem;
}

.surface-canvas-skeleton__bar--md {
  height: 0.875rem;
}

.surface-canvas-skeleton__bar--sm {
  height: 0.75rem;
}

.surface-canvas-skeleton__panel {
  border: 1px solid color-mix(in srgb, var(--line, #2a2a30) 35%, transparent);
  border-radius: var(--r-draw, 8px);
  background: color-mix(in srgb, var(--surface, #121214) 25%, transparent);
  padding: 0.75rem;
}

.surface-canvas-skeleton__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-3, #8b8b96) 50%, transparent);
}

.surface-canvas-skeleton__sheet-row {
  display: flex;
}

.surface-canvas-skeleton__sheet-cell {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #2a2a30) 18%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--line, #2a2a30) 18%, transparent);
  flex-shrink: 0;
}

.surface-canvas-skeleton__sheet-cell:last-child {
  border-right: none;
}

.surface-canvas-skeleton__visual {
  min-height: min(50dvh, 24rem);
  flex: 1 1;
  border: 1px solid color-mix(in srgb, var(--line, #2a2a30) 35%, transparent);
  border-radius: var(--r-draw, 8px);
  background: color-mix(in srgb, var(--surface, #121214) 35%, transparent);
}

.surface-canvas-skeleton__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.surface-canvas-skeleton__grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .surface-canvas-skeleton__grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.surface-canvas-skeleton__file {
  display: flex;
  flex-direction: column;
  min-height: min(56dvh, 34rem);
  flex: 1 1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line, #2a2a30) 40%, transparent);
  border-radius: var(--r-draw, 8px);
  background: color-mix(in srgb, var(--surface, #121214) 25%, transparent);
}

.surface-canvas-skeleton__file-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #2a2a30) 30%, transparent);
}

.surface-canvas-skeleton__file-body {
  flex: 1 1;
  min-height: 12rem;
  margin: 1rem;
  border-radius: var(--r-draw, 8px);
  background: color-mix(in srgb, var(--surface, #121214) 40%, transparent);
}

.surface-canvas-skeleton__data-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 1280px) {
  .surface-canvas-skeleton__data-table {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

@keyframes surface-skeleton-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../packages/surfaces/live-ui/src/cursors/cursors.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Default live cursor / presence chrome styles.
 * Import once in host apps: `@auvy-surfaces/live-ui/cursors.css`
 *
 * Overridable CSS variables (set on stage or :root):
 *   --cursor-color, --auvy-live-cursor-plate-fg, --auvy-live-cursor-stroke,
 *   --auvy-live-cursor-shadow, --auvy-live-cursor-z
 */

.auvy-live-cursor-stage {
  position: absolute;
  inset: 0;
  z-index: var(--auvy-live-cursor-z, 5);
  pointer-events: none;
  overflow: hidden;
}

.auvy-live-remote-cursor {
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  z-index: calc(var(--auvy-live-cursor-z, 5) + 1);
  filter: drop-shadow(0 1px 3px var(--auvy-live-cursor-shadow, rgba(0, 0, 0, 0.28)));
  /* Smooth peer pointer motion without fighting 60Hz publishes */
  transition:
    transform 0.055s linear,
    opacity 0.2s ease;
  will-change: transform;
}

.auvy-live-remote-cursor__plate {
  position: absolute;
  left: 14px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: 10rem;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  background: var(--cursor-color, var(--color-primary, #d7025c));
  color: var(--auvy-live-cursor-plate-fg, #fff);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auvy-live-remote-cursor svg {
  position: absolute;
  left: 0;
  top: 0;
}

.auvy-live-remote-cursor.is-agent .auvy-live-remote-cursor__plate {
  background: color-mix(in srgb, var(--cursor-color, var(--color-primary, #d7025c)) 72%, #111);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary, #d7025c) 40%, transparent);
}

.auvy-agent-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.auvy-live-presence-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.auvy-live-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 12rem;
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--presence-color, var(--color-primary, #d7025c)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--presence-color, var(--color-primary, #d7025c)) 38%, transparent);
  color: var(--fg, inherit);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auvy-live-presence-pill.is-agent {
  --presence-color: var(--color-primary, #d7025c);
}

.auvy-live-presence-pill.is-editing::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--presence-color, var(--color-primary, #d7025c));
}

/* Avatar stack — peer of OS CollaboratorPresenceAvatarStack */
.auvy-live-presence-avatars {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.auvy-live-presence-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.35rem;
  border-radius: 999px;
  border: 2px solid var(--bg, #0a0a0c);
  background: color-mix(in srgb, var(--presence-color, var(--color-primary, #d7025c)) 75%, #000);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
}

.auvy-live-presence-avatars > :last-child {
  margin-left: 0;
}

.auvy-live-presence-avatar.is-agent::after {
  content: 'AI';
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  font-size: 0.45rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.1rem 0.15rem;
  border-radius: 3px;
  background: var(--color-primary, #d7025c);
  color: #fff;
}

.auvy-live-presence-avatar.is-overflow {
  background: color-mix(in srgb, var(--surface, #121214) 80%, var(--ink, #fafafa));
  color: var(--ink-2, #c4c4cc);
  font-size: 0.58rem;
}

/* Member presence status chip — peer of OS MemberPresenceBadge */
.auvy-member-presence-badge {
  display: inline-flex;
  max-width: 11rem;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line, #2a2a30) 50%, transparent);
  background: color-mix(in srgb, var(--surface, #121214) 35%, transparent);
  color: var(--ink-3, #8b8b96);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

.auvy-member-presence-badge--compact {
  padding: 0.125rem 0.375rem;
  font-size: 0.65rem;
}

.auvy-member-presence-badge[data-state='online'],
.auvy-member-presence-badge[data-state='idle'] {
  border-color: color-mix(in srgb, #3d9a6a 35%, transparent);
  background: color-mix(in srgb, #3d9a6a 10%, transparent);
  color: #3d9a6a;
}

.auvy-member-presence-badge[data-state='recent'] {
  border-color: color-mix(in srgb, var(--line, #2a2a30) 60%, transparent);
  background: color-mix(in srgb, var(--surface, #121214) 40%, transparent);
  color: var(--ink-3, #8b8b96);
}

.viewer-live-stage:has(.ProseMirror:focus) .auvy-live-remote-cursor {
  opacity: 0.72;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../packages/surfaces/live-ui/src/spreadsheet/spreadsheet.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Soft Fusion live spreadsheet grid — Surfaces paint SSOT.
 * Peer of OS SpreadsheetGrid.vue (ss-grid*) + lab `.auvy-live-sheet*`.
 * Prefer Filament tokens; fallbacks match Soft Fusion dark / light via --bg/--ink.
 */

.auvy-live-sheet,
.live-sheet {
  --_sheet-line: var(--line, var(--lab-line, #2a2a30));
  --_sheet-ink: var(--ink, var(--lab-ink, #fafafa));
  --_sheet-muted: var(--ink-3, var(--lab-muted, #8b8b96));
  --_sheet-surface: var(--surface, var(--lab-panel, #121214));
  --_sheet-bg: var(--bg, #0a0a0c);
  --_sheet-primary: var(--color-primary, var(--lab-accent, #d7025c));
  --_sheet-chrome: color-mix(in srgb, var(--_sheet-surface) 88%, var(--_sheet-bg));
  --_sheet-radius: var(--surface-canvas-radius, var(--r-draw, 14px));
  --_sheet-mono: var(--font-mono, var(--lab-mono, ui-monospace, monospace));

  display: flex;
  flex-direction: column;
  min-height: 280px;
  border: 1px solid color-mix(in srgb, var(--_sheet-line) 70%, transparent);
  border-radius: var(--_sheet-radius);
  background: color-mix(in srgb, var(--_sheet-surface) 92%, transparent);
  color: var(--_sheet-ink);
  overflow: hidden;
  font-family: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
}

.auvy-live-sheet-bar,
.live-sheet-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--_sheet-line) 55%, transparent);
  background: var(--_sheet-chrome);
}

.auvy-live-sheet-tabs,
.live-sheet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.auvy-live-sheet-tabs button,
.live-sheet-tabs button {
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
  color: var(--_sheet-muted);
  cursor: pointer;
}

.auvy-live-sheet-tabs button.active,
.live-sheet-tabs button.active {
  background: color-mix(in srgb, var(--_sheet-bg) 55%, var(--_sheet-surface));
  color: var(--_sheet-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_sheet-line) 55%, transparent);
  font-weight: 600;
}

.auvy-live-sheet-meta {
  font-size: 0.72rem;
  font-family: var(--_sheet-mono);
  color: var(--_sheet-muted);
}

.auvy-live-sheet-formula,
.live-sheet-formula {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--_sheet-line) 55%, transparent);
  background: color-mix(in srgb, var(--_sheet-surface) 70%, transparent);
}

.auvy-live-sheet-addr,
.live-sheet-addr {
  min-width: 2.75rem;
  text-align: center;
  font-family: var(--_sheet-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--_sheet-line) 60%, transparent);
  background: color-mix(in srgb, var(--_sheet-bg) 40%, var(--_sheet-surface));
}

.auvy-live-sheet-formula-value,
.live-sheet-formula-value {
  flex: 1 1;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--_sheet-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auvy-live-sheet-scroll,
.live-sheet-scroll {
  flex: 1 1;
  overflow: auto;
  min-height: 200px;
}

.auvy-live-sheet table,
.live-sheet table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.auvy-live-sheet th,
.auvy-live-sheet td,
.live-sheet th,
.live-sheet td {
  border: 1px solid color-mix(in srgb, var(--_sheet-line) 55%, transparent);
  padding: 0;
  vertical-align: top;
}

.auvy-live-sheet thead th,
.live-sheet thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--_sheet-chrome);
  padding: 0.35rem 0.5rem;
  text-align: left;
  font-size: 0.75rem;
}

.auvy-live-sheet thead th .col-letter,
.live-sheet thead th .col-letter {
  display: block;
  font-size: 0.62rem;
  color: var(--_sheet-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auvy-live-sheet thead th.is-active,
.auvy-live-sheet tbody th.is-active,
.live-sheet thead th.is-active {
  background: color-mix(in srgb, var(--_sheet-primary) 8%, var(--_sheet-chrome));
}

.auvy-live-sheet tbody th,
.live-sheet tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--_sheet-chrome);
  padding: 0.4rem 0.45rem;
  text-align: center;
  font-size: 0.7rem;
  color: var(--_sheet-muted);
  min-width: 2rem;
}

.auvy-live-sheet td,
.live-sheet td {
  position: relative;
  min-width: 6rem;
}

.auvy-live-sheet td.is-active,
.live-sheet td.is-active {
  outline: 2px solid color-mix(in srgb, var(--_sheet-primary) 80%, transparent);
  outline-offset: -2px;
  z-index: 3;
}

.auvy-live-sheet td input,
.live-sheet td input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-family: var(--_sheet-mono);
  font-size: 0.8rem;
  color: inherit;
  outline: none;
}

.auvy-live-sheet-peers,
.live-sheet-peers {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  max-width: 100%;
  padding: 0.1rem;
  pointer-events: none;
  z-index: 2;
  animation: surface-sheet-peer-in 160ms ease-out;
}

.auvy-live-sheet-peers span,
.live-sheet-peers span {
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0 0 4px 0;
  padding: 0.05rem 0.3rem;
  font-size: 0.58rem;
  font-weight: 650;
  color: #fff;
}

.auvy-live-sheet td:has(.auvy-live-sheet-peers) input,
.live-sheet td:has(.live-sheet-peers) input {
  padding-top: 1rem;
}

.auvy-live-sheet-actions,
.live-sheet-actions {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--_sheet-line) 55%, transparent);
  background: var(--_sheet-chrome);
}

.auvy-live-sheet-actions button,
.live-sheet-actions button {
  border: 1px solid color-mix(in srgb, var(--_sheet-line) 60%, transparent);
  background: color-mix(in srgb, var(--_sheet-bg) 35%, var(--_sheet-surface));
  color: var(--_sheet-ink);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.auvy-live-sheet-actions button:hover,
.live-sheet-actions button:hover {
  border-color: color-mix(in srgb, var(--_sheet-primary) 35%, var(--_sheet-line));
}

.auvy-live-sheet-muted {
  color: var(--_sheet-muted);
  font-size: 0.85rem;
}

@keyframes surface-sheet-peer-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../packages/surfaces/live-ui/src/lens/lens.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Soft Fusion Lens desk — Surfaces paint SSOT (Filament peer).
 * Import once: `@auvy-surfaces/live-ui/lens.css`
 *
 * Filament voice: carbon stage, crimson nerve, glass chrome, display figures.
 * Records never lift/glow — attention is the seam.
 */

.lens-desk {
  --_lens-bg: var(--bg, var(--lab-bg, #0a0a0c));
  --_lens-panel: var(--surface, var(--lab-panel, #121214));
  --_lens-panel-2: var(--surface-2, #1a1a1e);
  --_lens-ink: var(--ink, var(--lab-ink, #fafafa));
  --_lens-muted: var(--ink-3, var(--lab-muted, #8b8b96));
  --_lens-ink-2: var(--ink-2, #c4c4cc);
  --_lens-line: var(--line, var(--lab-line, #2a2a30));
  --_lens-line-strong: var(--line-strong, #3f3f48);
  --_lens-primary: var(--color-primary, var(--filament, #d7025c));
  --_lens-radius: var(--surface-canvas-radius, var(--r-soft, 12px));
  --_lens-radius-draw: var(--r-draw, 8px);
  --_lens-font: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
  --_lens-display: var(--font-display, 'Source Serif 4', Georgia, serif);
  --_lens-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --_lens-glass: var(
    --glass-shadow-chrome,
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.26)
  );
  --_lens-blur: var(--glass-blur-soft, 12px);
  --lens-board-zoom: 0.68;

  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--s-4, 1rem) var(--s-5, 1.25rem) var(--s-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 0.75rem);
  min-height: calc(100vh - 3.35rem);
  color: var(--_lens-ink);
  font-family: var(--_lens-font);
}

.lens-desk-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4, 1rem);
  justify-content: space-between;
  align-items: flex-start;
}

.lens-desk-header h1 {
  margin: 0 0 0.2rem;
  font-size: var(--t-xl, 1.625rem);
  letter-spacing: var(--track-tight, -0.022em);
  font-weight: 650;
  line-height: 1.1;
}

.lens-desk-header .muted,
.lens-desk-header p.muted {
  margin: 0;
  max-width: 62ch;
  color: var(--_lens-muted);
  font-size: var(--t-sm, 0.875rem);
  line-height: 1.45;
}

.lens-desk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.lens-desk-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(8rem, auto);
  gap: var(--s-3, 0.75rem);
}

.lens-desk-grid.is-scale-grid {
  grid-auto-rows: minmax(6.5rem, auto);
  gap: var(--s-2, 0.5rem);
}

/* Miro stage — Filament carbon canvas with instrument grid */
.lens-board-viewport {
  position: relative;
  flex: 1 1;
  min-height: 24rem;
  max-height: calc(100vh - 10rem);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--_lens-line) 70%, transparent);
  border-radius: calc(var(--_lens-radius) + 4px);
  background:
    radial-gradient(
      ellipse 55% 40% at 100% 0%,
      color-mix(in srgb, var(--_lens-primary) 10%, transparent),
      transparent 60%
    ),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--_lens-line-strong) 40%, transparent) 1px, transparent 0)
      0 0 / 24px 24px,
    var(--stage-bg, color-mix(in srgb, var(--_lens-bg) 94%, #000));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight, rgba(255, 255, 255, 0.05)),
    inset 0 0 0 1px color-mix(in srgb, var(--_lens-line) 25%, transparent);
  padding: var(--s-4, 1rem);
}

.lens-board-world {
  transform: scale(var(--lens-board-zoom, 0.68));
  transform-origin: top left;
  width: calc(100% / var(--lens-board-zoom, 0.68));
  min-height: calc(100% / var(--lens-board-zoom, 0.68));
}

.lens-board-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem;
  border: 1px solid color-mix(in srgb, var(--_lens-line) 65%, transparent);
  border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--_lens-panel) 88%, transparent);
  box-shadow: var(--glass-shadow-chrome, none);
}

.lens-board-zoom button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--_lens-ink);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}

.lens-board-zoom button:hover {
  background: var(--color-primary-soft, rgba(215, 2, 92, 0.14));
}

.lens-board-zoom [data-testid='lens-board-zoom-label'] {
  min-width: 2.85rem;
  text-align: center;
  font-family: var(--_lens-mono);
  font-size: 0.68rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--_lens-muted);
}

.lens-edit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--_lens-primary) 35%, transparent);
  background: var(--color-primary-soft, rgba(215, 2, 92, 0.14));
  font-family: var(--_lens-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
}

.lens-edit-label {
  display: block;
  margin: 0.35rem 0 0.2rem;
}

.lens-edit-area {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--_lens-line) 65%, transparent);
  border-radius: var(--_lens-radius-draw, 8px);
  background: color-mix(in srgb, var(--_lens-bg) 88%, transparent);
  color: var(--_lens-ink);
  font-family: var(--_lens-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  resize: vertical;
  min-height: 4.5rem;
}

.lens-edit-area:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--_lens-primary) 45%, var(--_lens-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--_lens-primary) 22%, transparent);
}

.lens-card-body.is-editable {
  gap: 0.25rem;
}

.lens-live-paint {
  max-height: 9rem;
  overflow: auto;
  margin-bottom: 0.15rem;
}

.lens-desk.is-scale .lens-desk-grid.is-scale-grid > .lens-card {
  min-height: 6.5rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 12rem;
}

/* Surface window — glass record; seam carries live attention */
.lens-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  border: 1px solid color-mix(in srgb, var(--_lens-line) 75%, transparent);
  border-radius: var(--_lens-radius);
  background: color-mix(in srgb, var(--_lens-panel) 92%, transparent);
  backdrop-filter: blur(var(--_lens-blur)) saturate(var(--glass-saturate, 1.12));
  -webkit-backdrop-filter: blur(var(--_lens-blur)) saturate(var(--glass-saturate, 1.12));
  box-shadow: var(--_lens-glass);
  overflow: hidden;
  transition: border-color 160ms var(--ease-commit, ease), box-shadow 160ms var(--ease-commit, ease);
}

.lens-card:hover {
  border-color: color-mix(in srgb, var(--_lens-primary) 32%, var(--_lens-line));
  box-shadow:
    var(--_lens-glass),
    0 0 0 1px color-mix(in srgb, var(--_lens-primary) 14%, transparent);
}

.lens-card.is-doc-live {
  border-color: color-mix(in srgb, var(--_lens-primary) 42%, var(--_lens-line));
}

.lens-card-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--_lens-line) 55%, transparent);
  font-size: var(--t-xs, 0.75rem);
  background: color-mix(in srgb, var(--_lens-panel-2) 70%, transparent);
  backdrop-filter: blur(calc(var(--_lens-blur) * 0.55)) saturate(1.15);
  -webkit-backdrop-filter: blur(calc(var(--_lens-blur) * 0.55)) saturate(1.15);
}

.lens-card-chrome strong {
  font-weight: 650;
  letter-spacing: var(--track-ui, -0.011em);
  color: var(--_lens-ink);
}

.lens-card-chrome .muted {
  font-family: var(--_lens-mono);
  font-size: 0.62rem;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  color: var(--_lens-muted);
}

.lens-card-body {
  flex: 1 1;
  min-height: 0;
  position: relative;
  padding: 0.65rem 0.75rem 0.7rem;
  overflow: auto;
}

.lens-card-body-surface {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.lens-card-body-surface .lens-pack-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--_lens-line) 40%, transparent);
}

.lens-card-body-surface code,
.lens-pack-foot code {
  font-family: var(--_lens-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--_lens-muted);
}

.lens-card-body-surface .chip,
.lens-pack-foot .chip {
  font-family: var(--_lens-mono);
  font-size: 0.58rem;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  border-radius: var(--r-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--_lens-line) 60%, transparent);
  background: transparent;
  color: var(--_lens-muted);
  padding: 0.12rem 0.4rem;
}

.lens-card-body-live,
.lens-card-body-warm {
  min-height: 7rem;
}

.lens-card-cursors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.lens-card-cursors-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.lens-card-preview {
  font-size: var(--t-sm, 0.875rem);
  color: var(--_lens-muted);
  line-height: 1.45;
}

.lens-attach-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
  padding: 0.14rem 0.5rem;
  border-radius: var(--r-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--_lens-line) 55%, transparent);
  background: color-mix(in srgb, var(--_lens-panel) 70%, transparent);
  color: var(--_lens-muted);
  font-family: var(--_lens-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
}

.lens-attach-badge.is-live {
  border-color: color-mix(in srgb, var(--_lens-primary) 45%, transparent);
  background: var(--color-primary-soft, rgba(215, 2, 92, 0.14));
  color: var(--_lens-ink);
}

.lens-preview-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.lens-preview-ctas a {
  font-family: var(--_lens-mono);
  font-size: 0.62rem;
  letter-spacing: var(--track-label, 0.11em);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--_lens-ink-2);
  border: 1px solid color-mix(in srgb, var(--_lens-line) 60%, transparent);
  border-radius: var(--r-pill, 999px);
  padding: 0.22rem 0.55rem;
}

.lens-preview-ctas a:hover {
  border-color: color-mix(in srgb, var(--_lens-primary) 40%, transparent);
  color: var(--_lens-ink);
  background: var(--color-primary-soft, rgba(215, 2, 92, 0.14));
}

/* Shared live stage — OpenPulse multiplayer window chrome */
.viewer-live-stage,
.sync-live-stage,
.sync-surface-window {
  position: relative;
  min-height: 18rem;
  border: 1px solid color-mix(in srgb, var(--_lens-line, var(--line, #2a2a30)) 70%, transparent);
  border-radius: var(--_lens-radius, 14px);
  overflow: hidden;
  background: color-mix(in srgb, var(--_lens-panel, var(--surface, #121214)) 92%, transparent);
  backdrop-filter: blur(var(--_lens-blur, 12px));
  -webkit-backdrop-filter: blur(var(--_lens-blur, 12px));
  box-shadow: var(
    --_lens-glass,
    var(--glass-shadow-chrome, inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.26))
  );
  color: var(--_lens-ink, var(--ink, #fafafa));
}

.chip-live {
  border-color: color-mix(in srgb, var(--color-primary, #d7025c) 40%, transparent) !important;
  background: color-mix(in srgb, var(--color-primary, #d7025c) 12%, transparent) !important;
  color: var(--ink, #fafafa) !important;
}

.chip-agent {
  border-color: color-mix(in srgb, var(--color-primary, #d7025c) 28%, transparent) !important;
  background: color-mix(in srgb, var(--color-primary, #d7025c) 8%, transparent) !important;
  color: var(--ink, #fafafa) !important;
}

/* Atmosphere — primary nerve wash only (no purple/teal forks) */
.lens-desk::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 65% 42% at 100% -10%,
      color-mix(in srgb, var(--_lens-primary) 14%, transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 50% 36% at -8% 18%,
      color-mix(in srgb, var(--_lens-primary) 6%, transparent),
      transparent 52%
    ),
    radial-gradient(ellipse 80% 45% at 50% 120%, rgba(0, 0, 0, 0.4), transparent 55%);
}

.lens-desk > * {
  position: relative;
  z-index: 1;
}

.lens-mode-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.45rem;
  font-size: var(--t-xs, 0.75rem);
}

.lens-mode-links a {
  color: var(--_lens-muted);
  text-decoration: none;
  letter-spacing: var(--track-ui, -0.011em);
}

.lens-mode-links a.active,
.lens-mode-links a:hover {
  color: var(--_lens-ink);
  font-weight: 650;
}

.lens-desk-meta .chip,
.lens-desk-meta [class*='chip'] {
  border-radius: var(--r-pill, 999px);
  font-family: var(--_lens-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../packages/surfaces/editor/src/prose.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Soft Fusion document prose — professional craft (auvy-home geometry + Filament crimson).
 * Flat hairlines, Source Sans, peer-colored collab carets. Import: `@auvy-surfaces/editor/prose.css`
 */

.surface-editor {
  --auvy-editor-fg: #e4e4e7;
  --auvy-editor-heading: #fafafa;
  --auvy-editor-muted: rgba(228, 228, 231, 0.62);
  --auvy-editor-placeholder: rgba(228, 228, 231, 0.32);
  --auvy-editor-caret: #d7025c;
  --auvy-editor-local-caret: var(--auvy-editor-caret);
  --auvy-editor-accent: #d7025c;
  --auvy-editor-panel: #0a0a0c;
  --auvy-editor-elevated: #121214;
  --auvy-editor-line: rgba(250, 250, 250, 0.1);
  --auvy-editor-shadow: none;
  --auvy-editor-radius: 2px;
  --auvy-editor-font: var(--font-ui, 'Source Sans 3', ui-sans-serif, system-ui, sans-serif);
  --auvy-editor-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

  position: relative;
  display: flex;
  min-height: 0;
  min-width: 0;
  flex: 1 1;
  flex-direction: column;
  background: transparent;
  color: var(--auvy-editor-fg);
}

.surface-editor__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-shrink: 0;
  padding: 0.5rem 1.15rem;
  border-bottom: 1px solid var(--auvy-editor-line);
  background: color-mix(in srgb, var(--auvy-editor-elevated) 94%, transparent);
}

.surface-editor__chrome-label {
  font-family: var(--auvy-editor-mono);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auvy-editor-muted);
}

.surface-editor__chrome-meta {
  font-family: var(--auvy-editor-mono);
  font-size: 0.58rem;
  font-weight: 550;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--auvy-editor-muted);
}

.surface-editor__stage {
  position: relative;
  display: flex;
  min-height: 0;
  min-width: 0;
  flex: 1 1;
  flex-direction: column;
}

.surface-editor__host {
  min-height: 0;
  min-width: 0;
  flex: 1 1;
  padding: 1.5rem 1.65rem 2.25rem;
}

.surface-editor__host .ProseMirror {
  min-height: 18rem;
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;
  outline: none;
  caret-color: var(--auvy-editor-local-caret, var(--auvy-editor-caret));
  padding: 0.35rem 0 5.5rem;
}

.surface-editor__host .ProseMirror:focus-visible {
  outline: none;
}

.surface-editor__host .ProseMirror ::selection {
  background: color-mix(in srgb, var(--auvy-editor-accent) 22%, transparent);
}

.surface-editor-prose {
  color: var(--auvy-editor-fg);
  font-family: var(--auvy-editor-font);
  font-size: 16.25px;
  line-height: 1.7;
  letter-spacing: -0.011em;
  font-feature-settings: 'kern' on;
}

.surface-editor-prose > * + * {
  margin-top: 0.32em;
}

/* Quiet block affordance — hairline craft, not soft glow */
.surface-editor-prose > * {
  position: relative;
  border-radius: var(--auvy-editor-radius);
  transition: background 0.14s ease;
}

.surface-editor:focus-within .surface-editor-prose > *:hover {
  background: rgba(255, 255, 255, 0.02);
}

.surface-editor-prose h1,
.surface-editor-prose h2,
.surface-editor-prose h3 {
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.22;
  color: var(--auvy-editor-heading);
}

.surface-editor-prose h1 {
  font-size: 2.15em;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
  font-weight: 680;
}

.surface-editor-prose h1:first-child {
  margin-top: 0.1em;
}

.surface-editor-prose h2 {
  font-size: 1.38em;
  margin-top: 1.35em;
  margin-bottom: 0.28em;
}

.surface-editor-prose h3 {
  font-size: 1.12em;
  margin-top: 1.15em;
  margin-bottom: 0.2em;
  color: color-mix(in srgb, var(--auvy-editor-heading) 92%, var(--auvy-editor-muted));
}

.surface-editor-prose p {
  margin: 0;
}

.surface-editor-prose p.is-empty::before,
.surface-editor-prose .is-empty::before,
.surface-editor-prose .is-editor-empty p.is-empty:first-child::before {
  color: var(--auvy-editor-placeholder);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  font-weight: 450;
}

.surface-editor-prose ul,
.surface-editor-prose ol {
  padding-left: 1.4em;
  margin: 0.45em 0;
}

.surface-editor-prose li {
  padding-left: 0.15em;
}

.surface-editor-prose li + li {
  margin-top: 0.28em;
}

.surface-editor-prose li::marker {
  color: color-mix(in srgb, var(--auvy-editor-accent) 45%, var(--auvy-editor-muted));
}

.surface-editor-prose blockquote {
  border-left: 2.5px solid color-mix(in srgb, var(--auvy-editor-accent) 62%, transparent);
  margin: 1em 0;
  padding: 0.15em 0 0.15em 1em;
  color: var(--auvy-editor-muted);
  font-size: 1.02em;
}

.surface-editor-prose blockquote p {
  font-style: italic;
}

.surface-editor-prose code {
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono, 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.86em;
  padding: 0.12em 0.38em;
  letter-spacing: -0.02em;
}

.surface-editor-prose pre {
  border-radius: 12px;
  background: color-mix(in srgb, #050508 70%, var(--auvy-editor-elevated));
  border: 1px solid rgba(255, 255, 255, 0.055);
  padding: 0.95em 1.1em;
  overflow-x: auto;
  margin: 0.95em 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.surface-editor-prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.88em;
  line-height: 1.55;
}

.surface-editor-prose a {
  color: color-mix(in srgb, var(--auvy-editor-accent) 72%, #fff);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.12s ease;
}

.surface-editor-prose a:hover {
  color: color-mix(in srgb, var(--auvy-editor-accent) 55%, #fff);
}

.surface-editor-prose hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--auvy-editor-line) 12%,
    var(--auvy-editor-line) 88%,
    transparent
  );
  margin: 1.65em 0;
}

.surface-editor-prose ul[data-type='taskList'],
.surface-editor-prose .surface-editor-task-list {
  list-style: none;
  padding-left: 0.05em;
  margin: 0.55em 0;
}

.surface-editor-prose ul[data-type='taskList'] li,
.surface-editor-prose .surface-editor-task-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.12em 0.2em;
  border-radius: 6px;
}

.surface-editor-prose ul[data-type='taskList'] li:hover {
  background: rgba(255, 255, 255, 0.025);
}

.surface-editor-prose ul[data-type='taskList'] li > label {
  flex-shrink: 0;
  margin-top: 0.32em;
}

.surface-editor-prose ul[data-type='taskList'] li > div {
  flex: 1 1;
  min-width: 0;
}

.surface-editor-prose ul[data-type='taskList'] input[type='checkbox'] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--auvy-editor-accent);
  cursor: pointer;
  border-radius: 4px;
}

.surface-editor-prose ul[data-type='taskList'] li[data-checked='true'] > div {
  color: var(--auvy-editor-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(230, 230, 234, 0.28);
}

.surface-editor-callout,
.surface-editor-prose aside[data-surface-callout] {
  margin: 1.05em 0;
  padding: 0.95em 1.05em 0.95em 1.15em;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--auvy-editor-accent) 22%, var(--auvy-editor-line));
  border-left: 3px solid color-mix(in srgb, var(--auvy-editor-accent) 78%, transparent);
  background: color-mix(in srgb, var(--auvy-editor-accent) 7%, var(--auvy-editor-elevated));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.surface-editor-callout[data-variant='warn'],
.surface-editor-prose aside[data-surface-callout][data-variant='warn'] {
  border-color: color-mix(in srgb, #f59e0b 28%, var(--auvy-editor-line));
  border-left-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 8%, var(--auvy-editor-elevated));
}

.surface-editor-callout[data-variant='tip'],
.surface-editor-prose aside[data-surface-callout][data-variant='tip'] {
  border-color: color-mix(in srgb, #34d399 28%, var(--auvy-editor-line));
  border-left-color: #34d399;
  background: color-mix(in srgb, #34d399 8%, var(--auvy-editor-elevated));
}

.surface-editor-prose mark {
  background: color-mix(in srgb, var(--auvy-editor-accent) 26%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0.06em 0.22em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.surface-editor-prose img.surface-editor-image,
.surface-editor-prose .surface-editor-image {
  max-width: 100%;
  border-radius: 12px;
  margin: 1em 0;
  border: 1px solid var(--auvy-editor-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.surface-editor-prose u {
  text-decoration-color: color-mix(in srgb, var(--auvy-editor-accent) 50%, transparent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
}

.surface-editor-slash__group {
  padding: 0.55rem 0.7rem 0.25rem;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(230, 230, 234, 0.38);
}

/* Bubble + floating menus — hairline craft panels */
.surface-editor__bubble,
.surface-editor__floating {
  display: flex;
  gap: 0.1rem;
  align-items: center;
  padding: 0.22rem;
  border-radius: 4px;
  border: 1px solid var(--auvy-editor-line);
  background: color-mix(in srgb, var(--auvy-editor-elevated) 97%, transparent);
  box-shadow: none;
  z-index: 20;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: max-content;
  transition: opacity 0.14s ease, transform 0.14s ease;
  transform: translateY(2px);
}

.surface-editor__bubble:not([style*='visibility: hidden']),
.surface-editor__floating:not([style*='visibility: hidden']) {
  transform: translateY(0);
}

.surface-editor__menu-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.surface-editor__menu-sep {
  width: 1px;
  align-self: stretch;
  margin: 0.18rem 0.14rem;
  background: var(--auvy-editor-line);
  flex-shrink: 0;
}

.surface-editor__floating::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 0.1rem 0 0.06rem;
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 450;
  line-height: 1;
  color: var(--auvy-editor-muted);
  background: transparent;
  border: 1px solid var(--auvy-editor-line);
  pointer-events: none;
}

.surface-editor__bubble button,
.surface-editor__floating button {
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #e4e4e7;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.3rem 0.48rem;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.surface-editor__bubble button[data-action='bold'] {
  font-weight: 800;
}

.surface-editor__bubble button[data-action='italic'] {
  font-style: italic;
  font-weight: 500;
}

.surface-editor__bubble button[data-action='underline'] {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.surface-editor__bubble button[data-action='strike'] {
  text-decoration: line-through;
  opacity: 0.92;
}

.surface-editor__bubble button[data-action='code'] {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: -0.04em;
}

.surface-editor__bubble button:hover,
.surface-editor__floating button:hover {
  background: rgba(255, 255, 255, 0.075);
}

.surface-editor__bubble button.is-active,
.surface-editor__floating button.is-active {
  background: color-mix(in srgb, var(--auvy-editor-accent) 28%, transparent);
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auvy-editor-accent) 35%, transparent);
}

.surface-editor__bubble button:focus-visible,
.surface-editor__floating button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--auvy-editor-accent) 65%, transparent);
  outline-offset: 1px;
}

/* Slash command palette */
.surface-editor-slash {
  position: fixed;
  z-index: 40;
  min-width: 17.5rem;
  max-width: 22rem;
  max-height: min(24rem, 72vh);
  overflow-y: auto;
  padding: 0.45rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--auvy-editor-line) 90%, #fff);
  background: color-mix(in srgb, var(--auvy-editor-elevated) 97%, #000);
  box-shadow: var(--auvy-editor-shadow);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  animation: surface-editor-slash-in 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

@keyframes surface-editor-slash-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.surface-editor-slash__item {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #e8e8ec;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: background 0.1s ease;
}

.surface-editor-slash__item strong {
  font-size: 0.86rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.surface-editor-slash__item span {
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(230, 230, 234, 0.5);
}

.surface-editor-slash__item.is-selected,
.surface-editor-slash__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Collaboration caret — peer color via --peer-color / inline (home-flat plates) */
.collaboration-carets__caret {
  border-left: 1.5px solid var(--peer-color, var(--auvy-editor-caret));
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}

.collaboration-carets__label {
  position: absolute;
  top: -1.55em;
  left: -1px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.58rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.38rem;
  border-radius: 2px;
  background: var(--peer-color, var(--auvy-editor-caret));
  color: #fff;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  opacity: 0.92;
  box-shadow: none;
  animation: collaboration-carets-label-in 0.18s ease;
}

@keyframes collaboration-carets-label-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 0.92;
    transform: translateY(0);
  }
}

.collaboration-carets__selection,
.ProseMirror-yjs-selection {
  border-radius: 1px;
}

/* Light Soft Fusion / home clear-white */
:root[data-theme='light'] .surface-editor,
[data-theme='light'] .surface-editor {
  --auvy-editor-fg: #18181b;
  --auvy-editor-heading: #09090b;
  --auvy-editor-muted: rgba(63, 63, 70, 0.88);
  --auvy-editor-placeholder: rgba(113, 113, 122, 0.7);
  --auvy-editor-panel: #ffffff;
  --auvy-editor-elevated: #fafafa;
  --auvy-editor-line: rgba(24, 24, 27, 0.1);
  --auvy-editor-shadow: none;
}

:root[data-theme='light'] .surface-editor:focus-within .surface-editor-prose > *:hover,
[data-theme='light'] .surface-editor:focus-within .surface-editor-prose > *:hover {
  background: rgba(15, 15, 20, 0.03);
}

:root[data-theme='light'] .surface-editor__chrome,
[data-theme='light'] .surface-editor__chrome {
  background: color-mix(in srgb, #f7f7f9 92%, #d7025c);
}

:root[data-theme='light'] .surface-editor__chrome-label,
[data-theme='light'] .surface-editor__chrome-label {
  color: rgba(28, 28, 34, 0.72);
}

:root[data-theme='light'] .surface-editor__bubble,
:root[data-theme='light'] .surface-editor__floating,
[data-theme='light'] .surface-editor__bubble,
[data-theme='light'] .surface-editor__floating,
:root[data-theme='light'] .surface-editor-slash,
[data-theme='light'] .surface-editor-slash {
  background: rgba(255, 255, 255, 0.97);
  color: #1c1c22;
  box-shadow: var(--auvy-editor-shadow);
}

:root[data-theme='light'] .surface-editor__bubble button,
:root[data-theme='light'] .surface-editor__floating button,
[data-theme='light'] .surface-editor__bubble button,
[data-theme='light'] .surface-editor__floating button {
  color: #1c1c22;
}

:root[data-theme='light'] .surface-editor__menu-sep,
[data-theme='light'] .surface-editor__menu-sep {
  background: rgba(15, 15, 20, 0.12);
}

:root[data-theme='light'] .surface-editor-prose code,
[data-theme='light'] .surface-editor-prose code {
  background: rgba(15, 15, 20, 0.05);
  border-color: rgba(15, 15, 20, 0.06);
}

:root[data-theme='light'] .surface-editor-prose pre,
[data-theme='light'] .surface-editor-prose pre {
  background: rgba(15, 15, 20, 0.035);
  border-color: rgba(15, 15, 20, 0.08);
  box-shadow: none;
}

:root[data-theme='light'] .surface-editor-slash__item,
[data-theme='light'] .surface-editor-slash__item {
  color: #1c1c22;
}

:root[data-theme='light'] .surface-editor-slash__item span,
[data-theme='light'] .surface-editor-slash__item span {
  color: rgba(28, 28, 34, 0.5);
}

:root[data-theme='light'] .surface-editor-slash__group,
[data-theme='light'] .surface-editor-slash__group {
  color: rgba(28, 28, 34, 0.4);
}

:root[data-theme='light'] .surface-editor-callout,
:root[data-theme='light'] .surface-editor-prose aside[data-surface-callout],
[data-theme='light'] .surface-editor-callout,
[data-theme='light'] .surface-editor-prose aside[data-surface-callout] {
  background: color-mix(in srgb, var(--auvy-editor-accent) 5%, #fff);
  box-shadow: none;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!../../node_modules/.bun/next@16.2.12+8a2f997484851db3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  /* Defer to newest Filament tokens when theme.css is loaded */
  --lab-bg: var(--bg, #0a0a0c);
  --lab-panel: var(--surface, #121214);
  --lab-ink: var(--ink, #fafafa);
  --lab-muted: var(--ink-3, #8b8b96);
  --lab-line: var(--line, #2a2a30);
  --lab-accent: var(--color-primary, #d7025c);
  --lab-accent-soft: var(--color-primary-soft, color-mix(in srgb, #d7025c 14%, transparent));
  --lab-warn: #b45309;
  --lab-err: #b91c1c;
  --lab-radius: var(--r-draw, 8px);
  --lab-font: var(--font-ui, 'Source Sans 3', system-ui, sans-serif);
  --lab-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--lab-bg);
  color: var(--lab-ink);
  font-family: var(--lab-font);
}

a {
  color: var(--lab-accent);
}

.lab-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--lab-bg);
  color: var(--lab-ink);
  isolation: isolate;
}

.lab-header {
  display: grid;
  grid-template-columns: minmax(11rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1.15rem;
  min-height: 3.1rem;
  border-bottom: 1px solid var(--lab-line);
  /* Filament glass-chrome from materials.css when class is present */
  position: sticky;
  top: 0;
  z-index: 40;
}

.lab-header.fi-glass-chrome,
.lab-header.glass-chrome {
  background: var(--glass-bg-strong, color-mix(in srgb, var(--lab-panel) 92%, transparent));
  border-bottom-color: var(--glass-line, var(--lab-line));
  box-shadow: var(--glass-shadow-chrome, none);
}

.lab-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: inherit;
}

.lab-brand-title {
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.lab-brand-sub {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--lab-muted);
  letter-spacing: 0.01em;
}

.chip-local {
  /* Filament Chip owns paint; keep marker only */
  letter-spacing: 0.02em;
}

/* Prefer Filament .fi-chip — do not override background to white */

.lab-hub {
  max-width: 920px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.lab-hub__hero {
  max-width: 36rem;
}

.lab-hub__eyebrow,
.sync-lab-eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lab-muted);
  font-weight: 600;
}

.lab-hub__brand {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.65rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.lab-hub__lede {
  margin: 0.75rem 0 0;
  max-width: 34rem;
  color: var(--lab-muted);
  line-height: 1.55;
  font-size: 1.02rem;
}

.lab-hub__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.lab-hub__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.65rem;
}

.lab-hub__tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 6.5rem;
  padding: 0.95rem 1rem;
  border-radius: calc(var(--lab-radius) + 4px);
  border: 1px solid color-mix(in srgb, var(--lab-line) 80%, transparent);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--lab-panel) 92%, var(--lab-accent)) 0%,
      var(--lab-panel) 55%
    );
  text-decoration: none;
  color: inherit;
  box-shadow: var(--glass-shadow-chrome, inset 0 1px 0 rgba(255, 255, 255, 0.05));
  transition: border-color 120ms ease, transform 120ms ease;
  text-align: left;
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.lab-hub__tile:hover {
  border-color: color-mix(in srgb, var(--lab-accent) 42%, var(--lab-line));
  transform: translateY(-1px);
}

.lab-hub__tile strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.lab-hub__tile span {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--lab-muted);
}

.lab-hub__vault {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: calc(var(--lab-radius) + 2px);
  border: 1px dashed color-mix(in srgb, var(--lab-line) 75%, transparent);
  background: color-mix(in srgb, var(--lab-panel) 55%, transparent);
}

.lab-hub__vault h2 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.lab-hub__vault p {
  margin: 0;
  max-width: 28rem;
}

.lab-hub__vault-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.lab-hub__quiet {
  font-size: 0.85rem;
  color: var(--lab-muted);
  text-decoration: none;
}

.lab-hub__quiet:hover {
  color: var(--lab-ink);
}

.lab-theme-toggle {
  font-size: 0.75rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--lab-line) 70%, transparent);
  border-radius: 999px;
  text-decoration: none;
  color: var(--lab-ink);
  background: color-mix(in srgb, var(--lab-panel) 55%, transparent);
}
.lab-theme-toggle:hover {
  border-color: color-mix(in srgb, var(--lab-accent) 45%, transparent);
  background: var(--lab-accent-soft);
}

.lab-nav {
  display: flex;
  gap: 1.15rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.lab-nav a {
  color: var(--lab-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.lab-nav a.active,
.lab-nav button.active {
  color: var(--lab-ink);
  font-weight: 650;
}

.lab-nav button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--lab-muted);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.lab-canvas-overlay__kinds {
  position: fixed;
  top: calc(var(--layout-shell-header-height, 3.25rem) + 0.5rem);
  left: 0.75rem;
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: min(36rem, calc(100vw - min(28rem, 42vw) - 2rem));
  pointer-events: auto;
}

.lab-canvas-overlay {
  /* Wrapper must cover viewport so Playwright sees it as visible; chrome is fixed inside. */
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
}

.lab-canvas-overlay > * {
  pointer-events: auto;
}

.lab-canvas-overlay__kind {
  appearance: none;
  font-size: 0.72rem;
  padding: 0.18rem 0.42rem;
  border-radius: 6px;
  border: 1px solid var(--lab-line, #2a2a30);
  background: color-mix(in srgb, var(--lab-bg, #0a0a0c) 88%, transparent);
  color: var(--lab-ink, #fafafa);
  cursor: pointer;
  font-family: inherit;
}

.lab-canvas-overlay__kind.is-active {
  border-color: var(--lab-accent, #d7025c);
}

.lab-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-height: 2rem;
}

.lab-brain {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.lab-main {
  flex: 1 1;
  padding: 1rem;
  min-height: 0;
}

.lab-main-flush {
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.lab-boot {
  padding: 2rem;
  color: var(--lab-muted);
}

.lab-gate {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 3.5rem);
  padding: 2rem;
}

.lab-gate-card {
  width: min(28rem, 100%);
  padding: 2rem 1.85rem 1.5rem;
  text-align: center;
}

.lab-gate-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.lab-gate-hint {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

.lab-gate-links {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
  justify-content: center;
}

.lab-auth-callback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-height: 40vh;
  justify-content: center;
}

.lab-kinds-notice {
  margin-bottom: 0.25rem;
}

.lab-gate-card h1 {
  margin: 0 0 0.5rem;
  letter-spacing: -0.03em;
}

.lab-workspace {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  min-height: calc(100vh - 3.25rem);
}

.lab-sidebar {
  border-right: 1px solid var(--lab-line);
  background: var(--lab-panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lab-sidebar-head {
  padding: 0.85rem 0.85rem 0.5rem;
  border-bottom: 1px solid var(--lab-line);
}

.lab-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.brain-select,
.frame-select {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lab-muted);
}

.brain-select select,
.frame-select select,
.file-search-input {
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: var(--lab-ink);
  border: 1px solid var(--lab-line);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  background: #fff;
  min-width: 0;
}

.file-search {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1;
  padding: 0.75rem;
}

.file-search-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lab-muted);
  margin-bottom: 0.35rem;
}

.file-search-input {
  width: 100%;
  border-radius: 999px;
}

.file-search-meta {
  font-size: 0.75rem;
  color: var(--lab-muted);
  margin: 0.45rem 0;
}

.file-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.file-row {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font: inherit;
  color: inherit;
}

.file-row:hover {
  background: color-mix(in srgb, var(--lab-accent) 6%, transparent);
}

.file-row.active {
  background: var(--lab-accent-soft);
  border-color: color-mix(in srgb, var(--lab-accent) 28%, transparent);
}

.file-row-title {
  font-weight: 600;
  font-size: 0.92rem;
}

.file-row-meta {
  display: flex;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--lab-muted);
}

.file-ext {
  font-family: var(--lab-mono);
}

.file-row-path {
  font-size: 0.7rem;
  color: var(--lab-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-empty {
  padding: 0.75rem;
  color: var(--lab-muted);
  font-size: 0.85rem;
}

.lab-viewer-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.viewer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1;
  padding: 1rem 1.15rem 0.75rem;
}

.viewer-empty {
  padding: 3rem 2rem;
  color: var(--lab-muted);
}

.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}

.viewer-title {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.viewer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-end;
}

/* Legacy bare .chip in viewer chrome — align with Filament pill grammar */
.viewer-actions .chip:not(.fi-chip) {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--lab-line);
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  background: var(--lab-panel);
  color: var(--lab-ink);
}

.viewer-stage {
  flex: 1 1;
  min-height: 18rem;
  background: var(--lab-panel);
  overflow: auto;
}

.viewer-stage.frame-window {
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius);
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(28, 25, 23, 0.04);
}

.viewer-stage.frame-widget {
  border: 1px dashed #a8a29e;
  border-radius: 8px;
  padding: 0.85rem;
  max-width: 36rem;
}

.viewer-stage.frame-bare {
  padding: 0;
  background: transparent;
}

.editor-stub {
  border: 1px solid var(--lab-line);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
  background: #fff;
}

.editor-stub-bar {
  font-family: var(--lab-mono);
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
}

.draft-preview {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--lab-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  background: #fafaf9;
  border-radius: 8px;
  padding: 0.85rem;
  border: 1px solid var(--lab-line);
}

.pack-paint {
  min-height: 8rem;
}

.viewer-inspector {
  margin-top: 0.85rem;
  border-top: 1px solid var(--lab-line);
  padding-top: 0.65rem;
  font-size: 0.8rem;
}

.inspector-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  color: var(--lab-muted);
}

.ok {
  color: var(--lab-accent);
}

.bad {
  color: var(--lab-err);
}

.btn-primary,
.btn-quiet {
  font: inherit;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

.btn-primary {
  border: none;
  background: var(--lab-ink);
  color: #fff;
}

.btn-quiet {
  border: 1px solid var(--lab-line);
  background: #fff;
  color: var(--lab-muted);
  font-size: 0.8rem;
}

.muted {
  color: var(--lab-muted);
}

.mono {
  font-family: var(--lab-mono);
}

.err {
  color: var(--lab-err);
}

.warn {
  color: var(--lab-warn);
  font-size: 0.8rem;
  margin: 0.4rem 0 0;
}

.chip-agent {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.presence-agents {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.presence-agents li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.agent-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #047857;
}

.live-tiptap {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius);
  background: #fff;
  overflow: hidden;
}

.live-tiptap-bar {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-family: var(--lab-mono);
  color: var(--lab-muted);
  border-bottom: 1px solid var(--lab-line);
  background: #fafaf9;
}

.live-tiptap-host {
  flex: 1 1;
  min-height: 180px;
  padding: 0.75rem 1rem;
}

.live-tiptap-prose {
  outline: none;
  min-height: 160px;
  line-height: 1.55;
}

.live-tiptap-prose p {
  margin: 0 0 0.65rem;
}

/* .chip-live → lens.css Soft Fusion */

.sync-lab {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 1.65rem 2.5rem;
  min-height: calc(100vh - 3.35rem);
}

.sync-lab-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-end;
}

.sync-lab-header h1 {
  margin: 0;
  font-size: clamp(1.65rem, 2.4vw, 2.05rem);
  letter-spacing: -0.04em;
  font-weight: 600;
  line-height: 1.05;
}

.sync-lab-eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lab-muted);
  font-weight: 650;
}

.sync-lab-sub {
  margin: 0.45rem 0 0;
  max-width: 36rem;
  line-height: 1.5;
  color: var(--lab-muted);
}

.sync-lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.sync-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(12.5rem, 0.7fr);
  gap: 1.15rem;
  align-items: start;
}

.sync-lab-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sync-surface-window {
  display: flex;
  flex-direction: column;
  min-height: 28rem;
  border-radius: 2px;
  border: 1px solid var(--lab-line);
  background: var(--lab-panel);
  overflow: hidden;
  box-shadow: none;
}

.sync-surface-window .surface-editor {
  min-height: 28rem;
}

.sync-surface-window .surface-editor__host {
  padding: 1.5rem 1.75rem 2.25rem;
}

.sync-surface-window .surface-editor__host .ProseMirror {
  min-height: 22rem;
  max-width: 40rem;
}

.sync-editor-booting {
  margin: 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--lab-muted);
  letter-spacing: -0.01em;
}

.sync-preview {
  border: 1px solid color-mix(in srgb, var(--lab-line) 85%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--lab-panel) 92%, transparent);
  padding: 0.75rem 1rem;
}

.sync-preview--slim {
  padding: 0.6rem 0.9rem;
}

.sync-preview--slim pre {
  max-height: 3.75rem;
  overflow: auto;
  color: var(--lab-muted);
  font-size: 0.78rem;
}

.sync-preview h3,
.sync-lab-side h3 {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--lab-muted);
}

.sync-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--lab-mono);
  font-size: 0.82rem;
  line-height: 1.45;
  min-height: 1.5rem;
}

.sync-lab-side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sync-lab-side > section {
  border: 1px solid color-mix(in srgb, var(--lab-line) 85%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--lab-panel) 92%, transparent);
  padding: 0.85rem 0.95rem;
}

.sync-lab-debug {
  border: 1px solid color-mix(in srgb, var(--lab-line) 85%, transparent);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  background: color-mix(in srgb, var(--lab-panel) 92%, transparent);
  font-size: 0.8rem;
}

.sync-lab-debug summary {
  cursor: pointer;
  color: var(--lab-muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sync-lab-debug[open] summary {
  margin-bottom: 0.65rem;
  color: var(--lab-ink);
}

.sync-lab-debug h4 {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.68rem;
  color: var(--lab-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.sync-debug-meta {
  margin: 0 0 0.35rem;
}

.sync-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow: auto;
  font-family: var(--lab-mono);
  font-size: 0.72rem;
  color: var(--lab-muted);
}

.sync-log li {
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--lab-line);
}

@media (max-width: 860px) {
  .lab-workspace {
    grid-template-columns: 1fr;
  }

  .lab-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--lab-line);
    max-height: 40vh;
  }

  .sync-lab-grid {
    grid-template-columns: 1fr;
  }
}

/* —— Lab chrome (no OS AppShell / OsHeader) —— */
.lab-kinds-gate {
  min-height: calc(100vh - 4rem);
  display: grid;
  place-items: center;
  padding: 2rem;
}

.lab-kinds {
  padding: 1.25rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, var(--lab-accent-soft), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, color-mix(in srgb, var(--lab-accent) 6%, transparent), transparent 50%),
    var(--lab-bg);
  min-height: calc(100vh - 3.25rem);
}
.lab-kinds-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.lab-kinds-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.lab-kinds-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) 1fr;
  gap: 1rem;
  min-height: 28rem;
}
.lab-kinds-rail {
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius);
  background: var(--lab-panel);
  padding: 0.5rem;
  overflow: auto;
}
.lab-kinds-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lab-kind-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.lab-kind-item:hover {
  background: color-mix(in srgb, var(--color-primary, var(--lab-accent)) 8%, transparent);
}
.lab-kind-item.active {
  background: color-mix(in srgb, var(--color-primary, var(--lab-accent)) 14%, transparent);
}
.lab-kind-ext {
  font-weight: 650;
  font-family: var(--lab-mono);
  font-size: 0.85rem;
}
.lab-kind-meta {
  font-size: 0.7rem;
  color: var(--lab-muted);
}
.lab-kinds-note {
  font-size: 0.75rem;
  padding: 0.5rem 0.65rem;
}
.lab-kinds-detail {
  /* GlassCard owns chrome; keep layout only */
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 22rem;
}
.lab-kinds-detail-head h2 {
  margin: 0 0 0.35rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.lab-kinds-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.lab-kinds-adapters {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
}
.lab-kinds-preview {
  flex: 1 1;
  border: 1px solid var(--lab-line);
  border-radius: 8px;
  overflow: auto;
  min-height: 12rem;
  background: #fff;
}
.lab-fixture-pre {
  margin: 0;
  padding: 0.85rem 1rem;
  font-family: var(--lab-mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
}
.lab-html-frame {
  padding: 1rem;
}
.lab-sheet-preview {
  padding: 0.75rem;
}
.lab-sheet-name {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.lab-sheet-preview table {
  border-collapse: collapse;
  width: 100%;
}
.lab-sheet-preview td {
  border: 1px solid var(--lab-line);
  padding: 0.35rem 0.5rem;
  font-family: var(--lab-mono);
  font-size: 0.8rem;
}
.lab-sheet-preview thead th {
  border: 1px solid var(--lab-line);
  background: #fafaf9;
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  text-align: left;
}
.lab-sheet-preview .col-letter {
  display: block;
  font-size: 0.65rem;
  color: var(--lab-muted);
  letter-spacing: 0.04em;
}
.lab-sheet-preview .row-num {
  color: var(--lab-muted);
  text-align: center;
  width: 2rem;
}

.viewer-live-stage {
  position: relative;
  min-height: 240px;
}

/* Sheet + sync stage + cursors → @auvy-surfaces/live-ui/{spreadsheet,lens,cursors}.css */

.lab-kinds-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.viewer-ext-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
@media (max-width: 900px) {
  .lab-kinds-grid {
    grid-template-columns: 1fr;
  }
}

/* Lens desk/card Soft Fusion → @auvy-surfaces/live-ui/lens.css */

.lens-desk.is-scale {
  max-width: none;
}

.lens-desk-grid.is-scale-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(11rem, auto);
  gap: 0.65rem;
  max-height: none;
  overflow: visible;
  padding-bottom: 0.25rem;
  scroll-behavior: auto;
}

.lens-desk.is-live .lens-desk-grid.is-live-grid {
  max-height: none;
  overflow: visible;
}

.lens-mode-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.45rem;
  font-size: 0.85rem;
}

.lens-mode-links a {
  color: var(--lab-muted);
  text-decoration: none;
}

.lens-mode-links a.active {
  color: var(--lab-ink);
  font-weight: 650;
}

.lens-card-body-warm {
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
}

.lens-desk.is-live .lens-desk-grid.is-live-grid {
  max-height: none;
  overflow: visible;
}

.lens-vault-rail {
  border: 1px solid color-mix(in srgb, var(--lab-line) 70%, transparent);
  border-radius: 14px;
  box-shadow: var(--glass-shadow-chrome, none);
  background: color-mix(in srgb, var(--lab-panel) 88%, transparent);
  background: var(--lab-panel);
  padding: 0.65rem 0.75rem;
}

.lens-vault-rail h3 {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
}

.lens-vault-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lens-vault-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--lab-line);
  border-radius: 8px;
  background: var(--lab-bg);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.lens-vault-item:hover {
  border-color: color-mix(in srgb, var(--lab-accent) 40%, var(--lab-line));
}

.lens-sheet-stage {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius);
  background: var(--lab-panel);
}

.lens-sheet-stage h2 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

/* Surface preview hub — Soft Fusion layout (material from live-ui canvas.css) */
.preview-hub {
  padding: 1.25rem 1.5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  min-height: 70vh;
}
.preview-hub__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.preview-hub__head h1 {
  margin: 0 0 0.25rem;
  letter-spacing: var(--track-tight, -0.022em);
}
.preview-hub .muted {
  color: var(--lab-muted);
  font-size: 0.875rem;
}
.preview-hub__densities {
  display: flex;
  gap: 0.35rem;
}
.preview-hub__densities button,
.preview-hub__card footer button {
  appearance: none;
  border: 1px solid var(--lab-line);
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--lab-radius);
  cursor: pointer;
}
.preview-hub__densities button.is-active,
.preview-hub__card.is-active {
  border-color: var(--lab-accent);
}
.preview-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.preview-hub__card {
  border: 1px solid var(--lab-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--lab-bg);
  color: var(--lab-ink);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.preview-hub__card header {
  padding: 0.5rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--lab-line) 45%, transparent);
}
.preview-hub__thumb {
  flex: 1 1;
  min-height: 120px;
  max-height: 160px;
  overflow: hidden;
}
.preview-hub__card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--lab-line) 45%, transparent);
  align-items: center;
}
.preview-hub__card footer a {
  font-size: 0.75rem;
  margin-left: auto;
}
.preview-hub__hint {
  margin-top: 1.25rem;
}
.preview-hub__stage-wrap {
  margin-top: 1rem;
  min-height: 20rem;
}

.lens-preview-ctas {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.lens-preview-ctas a {
  font-size: 0.75rem;
}

/* Canvas stage lab placer — Soft Fusion chrome surrounds Surfaces window */
.canvas-stage {
  min-height: 70vh;
  position: relative;
}
.canvas-stage__head {
  padding: 1rem 1.25rem;
}
.canvas-stage__head h1 {
  margin: 0 0 0.25rem;
  letter-spacing: var(--track-tight, -0.022em);
}
.canvas-stage .muted {
  color: var(--lab-muted);
  font-size: 0.875rem;
}
.canvas-stage__densities,
.canvas-stage__kinds {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.canvas-stage__densities {
  margin-top: 0.65rem;
}
.canvas-stage__kinds {
  padding: 0 1.25rem 0.75rem;
}
.canvas-stage__densities button,
.canvas-stage__kind {
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--lab-radius);
  border: 1px solid var(--lab-line);
  background: transparent;
  color: var(--lab-ink);
  cursor: pointer;
  text-decoration: none;
}
.canvas-stage__densities button.is-active,
.canvas-stage__kind.is-active {
  border-color: var(--lab-accent);
}
.canvas-stage__aside {
  max-width: calc(100% - min(28rem, 42vw) - 2rem);
  padding: 1.25rem;
}
.canvas-stage__aside h2 {
  font-size: 1rem;
  margin: 0 0 0.35rem;
}
.canvas-stage__toolblocks {
  margin-top: 1rem;
  display: grid;
  gap: 0.35rem;
}