/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/globals.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * apps/os residual formation — Filament owns tokens, shell, glass, materials.
 * Do not redefine .os-shell / .os-btn / glass recipes here.
 */

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

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

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

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

.mono {
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* —— Layout utilities (spacing via Filament --s-* when present) —— */
.os-stack {
  display: flex;
  flex-direction: column;
}

.os-stack--1 { gap: var(--s-1, 0.25rem); }
.os-stack--2 { gap: var(--s-2, 0.5rem); }
.os-stack--3 { gap: var(--s-3, 0.75rem); }
.os-stack--4 { gap: var(--s-4, 1rem); }
.os-stack--5 { gap: var(--s-5, 1.25rem); }
.os-stack--6 { gap: var(--s-6, 1.5rem); }
.os-stack--7 { gap: var(--s-7, 2rem); }

.os-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.os-cluster--2 { gap: var(--s-2, 0.5rem); }
.os-cluster--3 { gap: var(--s-3, 0.75rem); }
.os-cluster--4 { gap: var(--s-4, 1rem); }

.os-cluster--between {
  justify-content: space-between;
}

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

.os-grid-cards {
  display: grid;
  gap: var(--s-3, 0.75rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.os-muted {
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-faint {
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-eyebrow {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line, rgba(18, 18, 18, 0.12));
}

/* Header chrome helpers (Soft Fusion detail lives in os-shell-chrome.css) */
.os-chrome-nav {
  display: flex;
  align-items: center;
  gap: var(--s-2, 0.5rem);
}

.os-meta-chip {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-meta-chip[data-pulse='ready'] {
  color: var(--ok, #1f6b4a);
}

.os-sidebar-intro {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 var(--s-3, 0.75rem);
}

.os-sidebar-copy {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

/* Surface frames */
.os-surface {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.os-surface--pad {
  gap: var(--s-5, 1.25rem);
  padding: var(--s-5, 1.25rem) var(--s-6, 1.5rem) var(--s-7, 2rem);
  max-width: 68rem;
  width: 100%;
  margin-inline: auto;
}

.os-surface--flush {
  padding: 0;
}

.os-surface--canvas {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.os-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 0.75rem);
  height: 2.75rem;
  padding: 0 var(--s-4, 1rem);
  border-bottom: 1px solid var(--line, rgba(18, 18, 18, 0.12));
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
}

.os-toolbar__left,
.os-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--s-2, 0.5rem);
  min-width: 0;
}

.os-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 0.5rem);
}

.os-page-header__title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.os-page-header__desc {
  margin: 0;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
  font-size: 0.8125rem;
  max-width: 40rem;
}

.os-panel {
  border: 1px solid var(--line, rgba(18, 18, 18, 0.12));
  border-radius: var(--r-draw, 0);
  background: var(--surface, #fff);
  padding: var(--s-5, 1.25rem);
}

.os-panel--quiet {
  background: transparent;
}

.os-panel__title {
  margin: 0 0 var(--s-4, 1rem);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 0.5rem);
}

.os-field__label {
  font-size: 0.8125rem;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-field__hint {
  font-size: 0.6875rem;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-stat__value {
  font-size: 2.125rem;
  font-weight: 550;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.os-stat__label {
  margin-top: var(--s-1, 0.25rem);
  font-size: 0.6875rem;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Lists */
.os-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.os-list > li,
.os-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 0.75rem);
  padding: var(--s-3, 0.75rem) 0;
  border-top: 1px solid var(--line, rgba(18, 18, 18, 0.12));
  font-size: 0.8125rem;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-list > li:first-child,
.os-list-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.os-list-row--interactive {
  cursor: pointer;
  margin: 0 calc(var(--s-3, 0.75rem) * -1);
  padding-inline: var(--s-3, 0.75rem);
  border-top: 0;
}

.os-list-row--interactive + .os-list-row--interactive {
  border-top: 1px solid var(--line, rgba(18, 18, 18, 0.12));
}

.os-list-row--interactive:hover {
  background: color-mix(in srgb, var(--ink, #121212) 3.5%, transparent);
  color: var(--ink, #121212);
}

.os-list-row__main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.os-list-row__title {
  color: var(--ink, #121212);
  font-weight: 500;
}

.os-list-row__meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2, 0.5rem);
  font-size: 0.8125rem;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-crumb a:hover {
  color: var(--ink, #121212);
}

.os-crumb__sep {
  opacity: 0.5;
}

/* Lens bento — glass widgets via Filament material classes */
.os-lens-viewport {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-5, 1.25rem) var(--s-6, 1.5rem) var(--s-7, 2rem);
}

.os-lens-frame {
  position: relative;
  min-height: 100%;
}

.os-lens-frame__tag {
  position: absolute;
  top: var(--s-3, 0.75rem);
  right: var(--s-4, 1rem);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
  z-index: 1;
}

.os-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3, 0.75rem);
  auto-rows: minmax(9rem, auto);
}

@media (min-width: 768px) {
  .os-bento {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--s-4, 1rem);
  }
}

@media (min-width: 1100px) {
  .os-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.os-bento--edit .os-widget {
  outline: 1px solid var(--color-primary, #d7025c);
  outline-offset: 0;
}

.os-bento__slot > * {
  height: 100%;
}

.os-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 9rem;
  padding: var(--s-4, 1rem);
  transition: border-color 120ms ease, background 120ms ease;
}

.os-widget[role='button'] {
  cursor: pointer;
}

.os-widget--frameless {
  border: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}

.os-widget__head {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
  margin-bottom: var(--s-3, 0.75rem);
}

.os-widget__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 0.5rem);
  flex: 1 1;
  min-height: 0;
}

.os-widget__footer {
  margin-top: auto;
  padding-top: var(--s-3, 0.75rem);
}

/* Canvas */
.os-canvas-body {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-5, 1.25rem) var(--s-6, 1.5rem);
}

.os-doc {
  max-width: 44rem;
  margin: 0 auto;
  border: 1px solid var(--line, rgba(18, 18, 18, 0.12));
  border-radius: var(--r-draw, 0);
  background: var(--surface, #fff);
  padding: var(--s-7, 2rem) var(--s-8, 2.5rem);
}

.os-doc h1 {
  margin: var(--s-2, 0.5rem) 0 0;
  font-size: 2.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.os-doc p {
  margin: var(--s-4, 1rem) 0 0;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-doc ul {
  margin: var(--s-4, 1rem) 0 0;
  padding-left: var(--s-5, 1.25rem);
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
  font-size: 0.8125rem;
}

.os-doc li + li {
  margin-top: var(--s-1, 0.25rem);
}

.os-doc code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
}

.os-plan-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 0.75rem);
  padding: var(--s-3, 0.75rem) 0;
  border-bottom: 1px solid var(--line, rgba(18, 18, 18, 0.12));
  font-size: 0.8125rem;
}

.os-plan-step--done {
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
  text-decoration: line-through;
}

.os-resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 0.5rem);
  border: 1px solid var(--line, rgba(18, 18, 18, 0.12));
  border-radius: var(--r-draw, 0);
  background: var(--surface, #fff);
  padding: var(--s-5, 1.25rem);
  transition: border-color 120ms ease;
}

.os-resource-card:hover {
  border-color: var(--ink, #121212);
}

.os-resource-card__title {
  font-size: 1.1875rem;
  font-weight: 600;
}

/* Trace layout */
.os-trace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  flex: 1 1;
  min-height: 0;
}

.os-trace__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line, rgba(18, 18, 18, 0.12));
}

.os-trace__thread {
  flex: 1 1;
  overflow: auto;
  padding: var(--s-5, 1.25rem) var(--s-6, 1.5rem);
}

.os-trace__side {
  padding: var(--s-4, 1rem);
  overflow: auto;
  background: color-mix(in srgb, var(--bg, #f3f2ee) 92%, transparent);
}

@media (max-width: 960px) {
  .os-trace {
    grid-template-columns: 1fr;
  }

  .os-trace__side {
    display: none;
  }

  .os-trace__main {
    border-right: 0;
  }
}

/* Auth */
.os-auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s-6, 1.5rem);
  background: var(--bg, #f3f2ee);
}

.os-auth__card {
  width: min(100%, 24rem);
  border: 1px solid var(--os-glass-border-pill, var(--line, rgba(18, 18, 18, 0.12)));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    0 18px 48px -28px rgba(24, 24, 27, 0.28);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  padding: var(--s-8, 2.5rem) var(--s-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-5, 1.25rem);
}

.os-auth__brand {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-primary, #d7025c);
}

.os-auth__btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.os-auth__btn:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.prose-os code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
}

/* Vault rows link wrapper */
.os-vault-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.os-vault-link:hover .vrow {
  background: color-mix(in srgb, var(--ink, #121212) 3%, transparent);
}

/* —— LiveSurface cursor overlay (live-ui) —— */
.os-live-stage,
.viewer-live-stage {
  position: relative;
  min-height: 12rem;
  flex: 1 1;
}

.auvy-live-cursor-stage {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.auvy-live-remote-cursor {
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  z-index: 6;
  filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.22));
}

.auvy-live-remote-cursor svg {
  position: absolute;
  left: 0;
  top: 0;
}

.auvy-live-remote-cursor__plate {
  position: absolute;
  left: 14px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 10rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--cursor-color, #0f766e);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auvy-live-remote-cursor.is-agent .auvy-live-remote-cursor__plate {
  background: color-mix(in srgb, var(--cursor-color, #7c3aed) 88%, #111);
}

.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;
}

.os-live-markdown__draft {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.875rem;
  line-height: 1.5;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../../node_modules/.bun/@auvy-ai+filament-tokens@1.0.1/node_modules/@auvy-ai/filament-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.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/os-vitreous.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * apps/os Soft Fusion formation — Filament AppShell product + floating-chrome SSOT.
 * Flat chrome (shell.css); composer keeps Soft Fusion elevation only.
 * `[data-os-vitreous]` auth surfaces may still use glass tokens below.
 */

.os-shell--product[floating-chrome],
.os-shell--product[floatingChrome] {
  --os-float: 0.75rem;
  --os-float-gap: 0.5rem;
  --os-header-h: 2.5rem;
  --composer-dock-offset: calc(
    var(--layout-composer-dock-stack, 7.5rem) + var(--os-float, 0.75rem) +
      env(safe-area-inset-bottom, 0px)
  );
  --layout-composer-dock-stack: 7.5rem;
  --os-glass-edge: transparent;
  --os-glass-border: var(--line);
  --os-glass-border-pill: var(--line);
  --os-glass-bg: var(--surface, #fff);
  --os-shadow: rgba(24, 24, 27, 0.35);
}

[data-os-vitreous] {
  --os-float: 0.75rem;
  --os-float-gap: 0.5rem;
  --os-header-h: 2.5rem;
  --glass-blur: 12px;
  --glass-blur-soft: 10px;
  --glass-saturate: 1.15;
  --glass-saturate-chrome: 1.15;
  --os-glass-edge: var(--color-glass-edge, var(--glass-highlight, rgba(255, 255, 255, 0.55)));
  --os-glass-border: var(--color-glass-border, var(--glass-line, var(--line)));
  --os-glass-border-pill: var(
    --color-glass-border-pill,
    color-mix(in srgb, var(--glass-line, var(--line)) 65%, transparent)
  );
  --os-glass-bg: color-mix(
    in srgb,
    var(--color-glass-1, var(--glass-bg, var(--surface, #fff))) 92%,
    transparent
  );
  --os-shadow: var(--shadow-color, rgba(24, 24, 27, 0.35));
}

/* —— Filament AppShell product formation —— */
.os-shell--product[floating-chrome],
.os-shell--product[floatingChrome] {
  background: var(--bg, #f3f2ee);
  color: var(--ink, #121212);
}

.os-shell--product[floating-chrome] > .os-header,
.os-shell--product[floatingChrome] > .os-header {
  position: relative;
  z-index: 40;
  flex: none;
  height: var(--os-header-h);
  min-height: var(--os-header-h);
  padding-inline: max(var(--os-float), env(safe-area-inset-left, 0px))
    max(var(--os-float), env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.os-shell--product[floating-chrome] > .os-header .os-header-left,
.os-shell--product[floating-chrome] > .os-header .os-header-right,
.os-shell--product[floatingChrome] > .os-header .os-header-left,
.os-shell--product[floatingChrome] > .os-header .os-header-right {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.os-shell--product[floating-chrome] > .os-header .os-header-right,
.os-shell--product[floatingChrome] > .os-header .os-header-right {
  justify-content: flex-end;
  margin-left: auto;
}

.os-sidebar-column {
  position: relative;
  z-index: 30;
  flex: none;
  width: calc(var(--os-sidebar-w, 13.25rem) + var(--os-float));
  min-height: 0;
  overflow: hidden;
  padding: 0 0 var(--composer-dock-offset) var(--os-float);
  box-sizing: border-box;
  transition: width 180ms ease, padding 180ms ease, opacity 140ms ease;
}

.os-sidebar-column[data-collapsed='true'] {
  width: calc(var(--os-sidebar-w-collapsed, 3.5rem) + var(--os-float));
}

.os-sidebar-column .os-sidebar--product {
  height: calc(100% - var(--os-float-gap, 0.5rem));
  max-height: 100%;
}

.os-shell-main--product-scroll,
.os-shell-scroll {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  flex: 1 1;
  overflow: auto;
  padding-bottom: var(--composer-dock-offset);
}

.os-mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .os-sidebar-column {
    display: none;
  }

  .os-mobile-bottom-nav {
    display: block;
    position: fixed;
    z-index: 50;
    inset-inline: 0;
    bottom: 0;
    pointer-events: none;
    padding: 0 var(--os-float) calc(0.35rem + env(safe-area-inset-bottom, 0px));
  }

  .os-mobile-bottom-nav > * {
    pointer-events: auto;
  }

  .os-shell-main--product-scroll,
  .os-shell-scroll {
    padding-bottom: calc(var(--composer-dock-offset) + 3.75rem);
  }

  .layout-composer-dock {
    padding-bottom: calc(0.875rem + 3.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Auth vitreous only — product floating-chrome stays flat (Filament Soft Fusion) */
[data-os-vitreous] .glass-chrome-pill {
  background: var(--os-glass-bg);
  border: 1px solid var(--os-glass-border-pill);
  border-radius: 9999px;
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge),
    0 10px 28px -22px var(--os-shadow);
  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

[data-os-vitreous] .glass-chrome-pill.on {
  background: var(--ink, #121212);
  color: var(--bg, #f3f2ee);
  border-color: var(--ink, #121212);
}

[data-os-vitreous] .glass-lens-widget-shell {
  overflow: hidden;
  border-radius: 14px;
  background: var(--os-glass-bg);
  border: 1px solid var(--os-glass-border-pill);
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge),
    0 10px 28px -22px var(--os-shadow);
  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
}

/* —— Fixed composer stack: chips ABOVE rounded pill (clear split) —— */
.layout-composer-dock {
  position: fixed;
  z-index: 80;
  inset-inline: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding-left: max(var(--os-float, 0.75rem), env(safe-area-inset-left, 0px));
  padding-right: max(var(--os-float, 0.75rem), env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--os-float, 0.75rem) + env(safe-area-inset-bottom, 0px));
}

.layout-composer-dock-stack {
  pointer-events: none;
  width: min(100%, 56rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.625rem; /* Soft Fusion gap-2.5 — Nuxt COMPOSER_DOCK_STACK_COLUMN */
  align-items: stretch;
}

.layout-composer-dock-stack > * {
  pointer-events: auto;
}

.os-dock-error {
  margin: 0;
  font-size: 0.75rem;
  padding-inline: 0.65rem;
  color: var(--color-primary, #d7025c);
}

/* Layer 1 — bookmark chips (NOT inside rounded max shell) */
.layout-composer-bookmark-rail {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  min-width: 0;
  padding-inline: 0.15rem;
}

.layout-composer-bookmark-rail .os-dock-chips,
.layout-composer-bookmark-rail .trace-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
  max-width: none;
  margin: 0;
}

[data-os-vitreous] .layout-composer-bookmark-rail .tpill {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.85rem;
  padding: 0 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--os-glass-border-pill);
  background: var(--os-glass-bg);
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge),
    0 8px 22px -20px var(--os-shadow);
  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
  font-family: var(--font-ui, inherit);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

[data-os-vitreous] .layout-composer-bookmark-rail .tpill:hover {
  color: var(--ink, #121212);
  border-color: var(--os-glass-border);
}

[data-os-vitreous] .layout-composer-bookmark-rail .tpill.on {
  background: var(--ink, #121212);
  color: var(--bg, #f3f2ee);
  border-color: var(--ink, #121212);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--bg, #f3f2ee) 12%, transparent),
    0 10px 28px -22px var(--os-shadow);
}

[data-os-vitreous] .layout-composer-bookmark-rail .tpill.ghost {
  border-style: dashed;
  color: var(--ink-3);
}

[data-os-vitreous] .layout-composer-bookmark-rail .tpill em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  opacity: 0.55;
}

/* Soft Fusion product dock chips — flat instrument pills */
.os-shell--product[floating-chrome] .layout-composer-bookmark-rail .tpill,
.os-shell--product[floatingChrome] .layout-composer-bookmark-rail .tpill {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: var(--r-pill, 9999px);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--font-ui, inherit);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-shell--product[floating-chrome] .layout-composer-bookmark-rail .tpill:hover,
.os-shell--product[floatingChrome] .layout-composer-bookmark-rail .tpill:hover {
  color: var(--ink, #121212);
  background: var(--surface-2, #ebe8e2);
  border-color: var(--line-strong, var(--line));
}

.os-shell--product[floating-chrome] .layout-composer-bookmark-rail .tpill.on,
.os-shell--product[floatingChrome] .layout-composer-bookmark-rail .tpill.on {
  background: var(--ink, #121212);
  color: var(--bg, #f3f2ee);
  border-color: var(--ink, #121212);
}

.os-shell--product[floating-chrome] .layout-composer-bookmark-rail .tpill.ghost,
.os-shell--product[floatingChrome] .layout-composer-bookmark-rail .tpill.ghost {
  border-style: dashed;
  color: var(--ink-3);
}

.os-shell--product[floating-chrome] .layout-composer-bookmark-rail .tpill em,
.os-shell--product[floatingChrome] .layout-composer-bookmark-rail .tpill em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  opacity: 0.55;
}

/* Layer 2 — Soft Fusion composer instrument (elevation only; no frosted chrome) */
#layout-composer-panel.layout-composer-panel,
#layout-composer-panel.glass-dock-shell {
  width: 100%;
  isolation: isolate;
  border-radius: var(--r-pill, 9999px);
  border: 1px solid var(--line, var(--os-glass-border-pill));
  background: var(--surface, #fff);
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  padding: 0.35rem 0.45rem;
  transition:
    border-radius 280ms cubic-bezier(0.32, 0.72, 0, 1),
    background 280ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

#layout-composer-panel.glass-dock-shell[data-composer-dock-presentation='expanded'],
#layout-composer-panel.glass-dock-shell[data-composer-dock-presentation='intervention'] {
  border-radius: var(--r-pill, 9999px);
  background: var(--surface, #fff);
  border-color: var(--line-strong, var(--line));
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.05),
    0 16px 40px rgba(24, 24, 27, 0.12);
  padding: 0.55rem 0.65rem;
}

#layout-composer-panel .composer {
  width: 100%;
  max-width: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:is(.light, html[data-theme='light']) #layout-composer-panel.glass-dock-shell {
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 10px 28px rgba(24, 24, 27, 0.08);
}

.os-lens-nav-dock {
  bottom: calc(var(--layout-composer-dock-stack, 7.5rem) + 0.75rem) !important;
}

/* —— Canvas plane (dots + HUD) —— */
.os-canvas-plane {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg, #f3f2ee);
}

.os-canvas-plane__dots {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--line, rgba(18, 18, 18, 0.18)) 80%, transparent) 1.1px,
    transparent 1.1px
  );
  background-size: 22px 22px;
  background-position: -1px -1px;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 35%, transparent 100%);
}

.os-canvas-plane__wash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 60% 45% at 50% 0%,
      color-mix(in srgb, var(--color-primary, #d7025c) 6%, transparent) 0%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      transparent 55%,
      color-mix(in srgb, var(--bg, #f3f2ee) 70%, transparent) 100%
    );
}

.os-canvas-plane__chrome {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(18, 18, 18, 0.12)) 70%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 55%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.os-canvas-plane__body {
  position: relative;
  z-index: 1;
  flex: 1 1;
  min-height: 0;
  overflow: auto;
}

.os-lens-plane--flow .os-canvas-plane__body {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.os-canvas-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 9999px;
  border: 1px solid var(--os-glass-border-pill, var(--line));
  background: color-mix(in srgb, var(--surface, #fff) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--os-glass-edge, transparent);
}

.os-canvas-nav__btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.45rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
  transition: background 120ms ease, color 120ms ease;
}

.os-canvas-nav__btn:hover {
  color: var(--ink, #121212);
  background: color-mix(in srgb, var(--ink, #121212) 5%, transparent);
}

.os-canvas-nav__btn[aria-pressed='true'],
.os-canvas-nav__btn.on {
  color: var(--ink, #121212);
  background: color-mix(in srgb, var(--ink, #121212) 8%, transparent);
}

/* —— Lens hero HUD —— */
.os-lens-hero {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.35rem 0.15rem 1.25rem;
  max-width: 42rem;
}

.os-lens-hero__clock {
  margin: 0;
  font-size: 0.75rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink-2, rgba(18, 18, 18, 0.68)) 85%, transparent);
}

.os-lens-hero__clock-sep {
  margin-inline: 0.4rem;
  opacity: 0.4;
}

.os-lens-hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--ink-2, rgba(18, 18, 18, 0.68)) 90%, transparent);
}

.os-lens-hero__status-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.os-lens-hero__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--ink-3, rgba(18, 18, 18, 0.42)) 80%, transparent);
}

.os-lens-hero__dot[data-tone='ok'] {
  background: color-mix(in srgb, var(--ok, #1f6b4a) 85%, transparent);
}

.os-lens-hero__dot[data-tone='warn'] {
  background: color-mix(in srgb, var(--color-primary, #d7025c) 70%, transparent);
}

.os-lens-hero__dot[data-tone='idle'] {
  background: color-mix(in srgb, var(--ink-3, rgba(18, 18, 18, 0.42)) 90%, transparent);
}

.os-lens-hero__title,
.ds-display {
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink, #121212);
  text-wrap: balance;
}

.os-lens-hero__brain {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.os-brain-pill {
  height: 2rem;
  padding-inline: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Floating Lens nav dock (Nuxt lens-canvas-nav__dock) */
.os-lens-nav-dock {
  position: absolute;
  z-index: 4;
  right: max(1rem, var(--os-float, 0.75rem));
  bottom: calc(var(--composer-dock-offset, 6.5rem) + 0.35rem);
  padding: 0.35rem;
  border-radius: 9999px;
  border: 1px solid var(--os-glass-border-pill, var(--line));
  background: var(--os-glass-bg);
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge),
    0 10px 28px -22px var(--os-shadow);
  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
}

.os-lens-hero__lede {
  margin: 0;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

/* —— Miro-like Lens flow board (@xyflow/react) —— */
.os-lens-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.os-lens-flow__rf {
  width: 100%;
  height: 100%;
  background: transparent !important;
}

.os-lens-flow__rf .react-flow__node {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
  color: inherit;
}

.os-lens-flow__rf .react-flow__node.selected .os-lens-flow-node--surface,
.os-lens-flow__rf .react-flow__node:focus-visible .os-lens-flow-node--surface {
  outline: 2px solid color-mix(in srgb, var(--color-primary, #d7025c) 55%, transparent);
  outline-offset: 2px;
}

.os-lens-flow__rf .react-flow__attribution {
  display: none;
}

.os-lens-flow__controls {
  left: max(0.75rem, var(--os-float, 0.75rem)) !important;
  bottom: calc(var(--composer-dock-offset, 6.5rem) + 0.35rem) !important;
  border-radius: 12px !important;
  border: 1px solid var(--os-glass-border-pill, var(--line)) !important;
  background: var(--os-glass-bg, var(--surface)) !important;
  box-shadow: inset 0 1px 0 var(--os-glass-edge, transparent) !important;
  overflow: hidden;
}

.os-lens-flow__minimap {
  right: max(0.75rem, var(--os-float, 0.75rem)) !important;
  bottom: calc(var(--composer-dock-offset, 6.5rem) + 3.25rem) !important;
  border-radius: 12px !important;
  border: 1px solid var(--os-glass-border-pill, var(--line)) !important;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent) !important;
  overflow: hidden;
}

.os-lens-flow-node {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.os-lens-flow-node__inner {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.os-lens-flow-node--widget .os-widget,
.os-lens-flow-node--widget .os-lens-flow-node__inner > * {
  height: 100%;
}

.os-lens-flow-node--hero {
  padding: 0;
  justify-content: center;
}

.os-lens-flow-node--surface {
  overflow: visible;
}

.os-lens-surface-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.875rem;
}

.os-lens-node-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.os-lens-node-shell__body {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.os-lens-node-shell.is-selected > .os-lens-node-shell__body > .glass-lens-widget-shell,
.os-lens-node-shell.is-selected > .os-lens-node-shell__body > .os-lens-trace-card,
.os-lens-node-shell.is-selected.os-lens-flow-node--sticky {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-primary, #d7025c) 45%, transparent),
    0 12px 28px -18px var(--os-shadow, rgba(24, 24, 27, 0.35));
}

.os-lens-handle {
  width: 8px !important;
  height: 8px !important;
  border: 1.5px solid var(--surface, #fff) !important;
  background: var(--color-primary, #d7025c) !important;
  opacity: 0;
  transition: opacity 120ms ease;
}

.os-lens-flow__rf[data-edit='true'] .os-lens-handle,
.os-lens-flow__rf[data-connect='true'] .os-lens-handle,
.os-lens-node-shell.is-selected .os-lens-handle {
  opacity: 1;
}

.os-lens-resize-handle {
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
}

.os-lens-resize-line {
  border-color: color-mix(in srgb, var(--color-primary, #d7025c) 55%, transparent) !important;
}

.os-lens-node-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 9999px;
  border: 1px solid var(--os-glass-border-pill, var(--line));
  background: var(--os-glass-bg, var(--surface));
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    0 10px 24px -18px var(--os-shadow, rgba(24, 24, 27, 0.35));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.os-lens-tb-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 1.55rem;
  padding: 0 0.55rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-lens-tb-btn:hover {
  color: var(--ink, #121212);
  background: color-mix(in srgb, var(--ink, #121212) 6%, transparent);
}

.os-lens-surface-node__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: none;
  padding: 0.55rem 0.75rem 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(18, 18, 18, 0.12)) 70%, transparent);
}

.os-lens-surface-node__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.os-lens-surface-node__name {
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-lens-surface-node__actions {
  flex: none;
}

.os-lens-surface-node__body {
  position: relative;
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  background: color-mix(in srgb, var(--bg, #f3f2ee) 35%, var(--surface, #fff));
}

.os-lens-surface-node__idle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  height: 100%;
  padding: 1rem 0.9rem;
}

.os-lens-surface-node__idle p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-lens-surface-node__idle .mono {
  font-size: 0.6875rem;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

/* Zones */
.os-lens-zone {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  border: 1px dashed color-mix(in srgb, var(--line, rgba(18, 18, 18, 0.2)) 80%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 28%, transparent);
  pointer-events: none;
}

.os-lens-zone--desk {
  background: color-mix(in srgb, var(--surface, #fff) 35%, transparent);
}

.os-lens-zone--surfaces {
  border-color: color-mix(in srgb, var(--color-primary, #d7025c) 28%, transparent);
  background: color-mix(in srgb, var(--color-primary, #d7025c) 4%, transparent);
}

.os-lens-zone--streams {
  border-color: color-mix(in srgb, var(--ok, #1f6b4a) 30%, transparent);
  background: color-mix(in srgb, var(--ok, #1f6b4a) 4%, transparent);
}

.os-lens-zone__label {
  display: inline-block;
  margin: 0.75rem 1rem;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

/* Traces */
.os-lens-trace-card {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  padding: 0.85rem 0.9rem;
  border-radius: 0.875rem;
  border: 1px solid var(--os-glass-border-pill, var(--line));
  background: var(--os-glass-bg, var(--surface));
  box-shadow: inset 0 1px 0 var(--os-glass-edge, transparent);
}

.os-lens-flow-node--trace.is-active .os-lens-trace-card {
  border-color: color-mix(in srgb, var(--ok, #1f6b4a) 55%, transparent);
}

.os-lens-trace-card__kicker {
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-lens-trace-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink, #121212);
}

.os-lens-trace-card__meta {
  margin-top: auto;
  font-size: 0.6875rem;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

/* Stickies */
.os-lens-flow-node--sticky {
  border-radius: 0.35rem 0.85rem 0.85rem 0.85rem;
  box-shadow: 0 10px 24px -16px rgba(24, 24, 27, 0.35);
  overflow: hidden;
}

.os-lens-sticky--warm {
  background: #f6e2b8;
  color: #3a2c12;
}

.os-lens-sticky--cool {
  background: #d7e8ef;
  color: #16303a;
}

.os-lens-sticky--signal {
  background: #f3d0dc;
  color: #4a1028;
}

.os-lens-sticky-input {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0.75rem 0.8rem;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: inherit;
}

/* Edges */
.os-lens-edge {
  stroke: color-mix(in srgb, var(--ink, #121212) 28%, transparent);
  stroke-width: 1.75;
}

.os-lens-edge--live {
  stroke: var(--color-primary, #d7025c);
  stroke-width: 2;
}

.os-lens-edge--pin {
  stroke: color-mix(in srgb, var(--ok, #1f6b4a) 70%, transparent);
}

.os-lens-edge.is-selected {
  stroke: var(--color-primary, #d7025c);
  stroke-width: 2.5;
}

.os-lens-edge-label {
  position: absolute;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: all;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(18, 18, 18, 0.12));
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-lens-edge-label--live {
  color: var(--color-primary, #d7025c);
  border-color: color-mix(in srgb, var(--color-primary, #d7025c) 35%, transparent);
}

/* Panels */
.os-lens-panel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.65rem !important;
  padding: 0.3rem;
  border-radius: 9999px;
  border: 1px solid var(--os-glass-border-pill, var(--line));
  background: var(--os-glass-bg, var(--surface));
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    0 10px 24px -18px var(--os-shadow, rgba(24, 24, 27, 0.35));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.os-lens-panel__btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 1.7rem;
  padding: 0 0.7rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-lens-panel__btn:hover,
.os-lens-panel__btn.on {
  color: var(--ink, #121212);
  background: color-mix(in srgb, var(--ink, #121212) 7%, transparent);
}

.os-lens-panel__meta {
  padding: 0 0.65rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
  white-space: nowrap;
}

.os-lens-flow__status {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 3.25rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  background: var(--os-glass-bg, var(--surface));
  border: 1px solid var(--os-glass-border-pill, var(--line));
  pointer-events: none;
}

.os-lens-flow__status--err {
  color: var(--color-primary, #d7025c);
}

.os-lens-plane--flow .os-lens-nav-dock {
  z-index: 6;
}

.os-lens-flow__rf .react-flow__selection {
  background: color-mix(in srgb, var(--color-primary, #d7025c) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary, #d7025c) 45%, transparent);
}

.os-lens-flow__rf .react-flow__edgeupdater {
  display: none;
}


/* —— Widget chrome refinements —— */
.os-widget {
  border-radius: 0.875rem;
}

.os-widget__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.15rem -0.15rem 0.65rem;
  padding: 0 0.15rem 0.55rem;
  border-bottom: 1px solid var(--os-glass-border-pill, var(--line));
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-widget[role='button']:hover {
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-primary, #d7025c) 18%, transparent),
    0 16px 40px -24px var(--os-shadow, rgba(0, 0, 0, 0.35));
  transform: translateY(-1px);
}

.os-widget[role='button'] {
  transition:
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* —— Vault vitreous browse —— */
.os-vault-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .os-vault-layout {
    grid-template-columns: 1fr;
  }
}

.os-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.75rem;
}

.os-vault-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-height: 5.5rem;
  padding: 0.85rem 0.5rem 0.75rem;
  text-align: center;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--line, rgba(18, 18, 18, 0.12)) 90%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 22%, transparent);
  box-shadow: inset 0 1px 0 var(--os-glass-edge, transparent);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  width: 100%;
}

.os-vault-tile:hover {
  border-color: color-mix(in srgb, var(--line, rgba(18, 18, 18, 0.12)) 40%, var(--ink));
  background: color-mix(in srgb, var(--surface-hover, #fff) 35%, transparent);
}

.os-vault-tile[data-selected='true'],
.os-vault-tile[aria-current='page'] {
  border-color: color-mix(in srgb, var(--color-primary, #d7025c) 35%, var(--line));
  background: color-mix(in srgb, var(--color-primary, #d7025c) 8%, transparent);
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    inset 2px 0 0 var(--color-primary, #d7025c);
}

.os-vault-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--ink, #121212) 4%, transparent);
  color: var(--ink-2, rgba(18, 18, 18, 0.68));
}

.os-vault-tile__name {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--ink, #121212);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.os-vault-tile__meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--ink-3, rgba(18, 18, 18, 0.42));
}

.os-vault-mounts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--os-glass-border-pill, var(--line));
  background: var(--os-glass-bg, var(--surface));
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    0 10px 28px -22px var(--os-shadow, rgba(0, 0, 0, 0.3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.os-vault-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 12rem;
  padding: 2rem 1.25rem;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 30%, transparent);
  text-align: center;
}

/* —— Canvas resource stage —— */
.os-canvas-stage {
  position: relative;
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.os-canvas-stage__sheet {
  position: relative;
  z-index: 1;
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem 1.5rem 2rem;
}

.os-canvas-stage__card {
  max-width: 48rem;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid var(--os-glass-border-pill, var(--line));
  background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    0 18px 48px -28px var(--os-shadow, rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  padding: 1.75rem 2rem;
}

.os-canvas-stage__card:has(.os-live-sheet) {
  max-width: min(72rem, 100%);
}

/* Floating canvas window (Nuxt CoreLayoutCanvasViewer) */
.os-canvas-resource-plane .os-canvas-plane__body {
  display: flex;
  padding: 0.75rem 0.85rem calc(var(--composer-dock-offset, 6.5rem) + 0.5rem);
  min-height: 0;
}

.os-canvas-window {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  width: min(100%, 56rem);
  margin-inline: auto;
  border-radius: 14px;
  border: 1px solid var(--os-glass-border-pill, var(--line));
  background: color-mix(in srgb, var(--color-glass-1, var(--surface, #fff)) 94%, transparent);
  overflow: hidden;
}

.glass-canvas-window-panel {
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    0 18px 48px -24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(var(--glass-saturate, 1.15));
}

.os-canvas-window__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

.os-canvas-window__body {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem 1.5rem 1.75rem;
}

.os-window-chip {
  height: 2rem;
  padding-inline: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.os-window-chip--identity {
  max-width: 16rem;
}

.os-window-chip__ext {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.625rem;
  color: var(--ink-3);
}

.os-window-chip__id {
  font-size: 0.6875rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.os-window-chip-group {
  display: inline-flex;
  align-items: stretch;
  padding: 0.15rem;
  gap: 0.1rem;
  height: auto;
}

.os-window-seg {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  border-radius: 9999px;
  cursor: pointer;
}

.os-window-seg.on {
  background: var(--ink, #121212);
  color: var(--bg, #f3f2ee);
}

.os-canvas-hub {
  position: relative;
  z-index: 1;
  max-width: 48rem;
  padding: 1.5rem 1.5rem calc(var(--composer-dock-offset, 6.5rem) + 1rem);
}

.os-canvas-hub__hero {
  margin-bottom: 1.5rem;
}

.os-canvas-hub__lead {
  margin: 0.65rem 0 0;
  max-width: 32rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.os-canvas-hub__grid {
  margin-top: 0.25rem;
}

.os-live-stage {
  position: relative;
  min-height: 12rem;
  margin-top: 0.75rem;
}

.os-live-markdown__editor {
  min-height: 16rem;
}

.os-live-markdown .surface-editor-prose {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2, var(--ink));
}

/* —— Trace vitreous —— */
.os-trace-surface {
  height: 100%;
}

.os-trace__side {
  background: color-mix(in srgb, var(--bg, #f3f2ee) 70%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding: 1rem 0.85rem calc(var(--composer-dock-offset, 6.5rem) + 0.5rem);
}

.os-trace__main {
  background: transparent;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.os-trace__thread {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem 1.5rem calc(var(--composer-dock-offset, 6.5rem) + 1rem);
}

.os-trace-empty {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 28rem;
  padding: 2.5rem 0.25rem;
}

.os-trace-empty__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.os-trace-rail-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.os-trace-rail-item:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.os-trace-rail-item--active {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.os-trace-rail-item__title {
  font-size: 0.8125rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-trace-rail-item__meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem;
  color: var(--ink-3);
  flex-shrink: 0;
}

.os-vault-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.os-vault-chrome__status {
  font-size: 0.75rem;
  color: var(--ink-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.os-panel {
  border-radius: 14px;
  border-color: var(--os-glass-border-pill, var(--line));
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  box-shadow: inset 0 1px 0 var(--os-glass-edge, transparent);
}

.os-resource-card {
  border-radius: 14px;
  border-color: var(--os-glass-border-pill, var(--line));
  background: color-mix(in srgb, var(--surface, #fff) 90%, transparent);
  box-shadow:
    inset 0 1px 0 var(--os-glass-edge, transparent),
    0 10px 28px -22px var(--os-shadow, rgba(0, 0, 0, 0.28));
}

.os-resource-card:hover {
  border-color: color-mix(in srgb, var(--color-primary, #d7025c) 28%, var(--line));
}

.os-bento {
  gap: 0.875rem;
}

@media (min-width: 768px) {
  .os-bento {
    gap: 1rem;
  }
}

.os-lens-viewport {
  padding: 1.35rem 1.65rem 7.5rem;
}

.os-lens-frame {
  position: relative;
  z-index: 1;
}

@supports not (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  [data-os-vitreous] .glass-chrome-pill,
  [data-os-vitreous] .glass-lens-widget-shell,
  [data-os-vitreous] .os-composer-dock-shell,
  [data-os-vitreous] #layout-composer-panel.glass-dock-shell,
  [data-os-vitreous] .os-canvas-window {
    background: var(--surface, #fff);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.bun/next@16.3.0-preview.6+0a9d7a8c148cced6/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.3.0-preview.6+0a9d7a8c148cced6/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/vault-ui.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.vault-ui-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #f7f6f3);
  color: var(--color-fg, #1a1a1a);
}

.vault-ui-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 70%, transparent);
  background: color-mix(in oklab, var(--color-surface, #fff) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 20;
}

.vault-ui-brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.vault-ui-brand-link {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: inherit;
  text-decoration: none;
}

.vault-ui-brand-meta {
  font-size: 0.7rem;
  color: var(--color-fg-muted, #6b6560);
  white-space: nowrap;
}

.vault-ui-topnav {
  display: flex;
  gap: 0.35rem;
  flex: 1 1;
}

.vault-ui-topnav a {
  padding: 0.3rem 0.55rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-fg-muted, #6b6560);
  text-decoration: none;
}

.vault-ui-topnav a.is-active,
.vault-ui-topnav a:hover {
  color: var(--color-fg, #1a1a1a);
  background: color-mix(in oklab, var(--color-surface-hover, #eee) 80%, transparent);
}

.vault-ui-brain select {
  max-width: 12rem;
  font-size: 0.75rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color-border, #d4d0c8);
  background: var(--color-surface, #fff);
  color: inherit;
}

.vault-ui-main {
  flex: 1 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.vault-ui-page {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  flex: 1 1;
}

@media (max-width: 720px) {
  .vault-ui-page {
    grid-template-columns: 1fr;
  }
  .vault-ui-brand-meta {
    display: none;
  }
}

.vault-ui-rail {
  border-right: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 65%, transparent);
  padding: 0.75rem 0.65rem;
  background: color-mix(in oklab, var(--color-surface, #fff) 55%, transparent);
  overflow: auto;
}

.vault-ui-stage {
  min-width: 0;
  padding: 0.75rem 1rem 1.5rem;
  overflow: auto;
}

.vault-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 70%, transparent);
  border-radius: 0.2rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg-muted, #6b6560);
  white-space: nowrap;
}

.vault-about {
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 55%, transparent);
  border-radius: 0.3rem;
  background: color-mix(in oklab, var(--color-surface, #fff) 70%, transparent);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
}

.vault-about-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.vault-about-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.vault-about-slug {
  margin: 0.15rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--color-fg-muted, #6b6560);
}

.vault-about-hint {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--color-fg-muted, #6b6560);
  max-width: 42rem;
}

.vault-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.vault-btn {
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 75%, transparent);
  border-radius: 0.25rem;
  background: var(--color-surface, #fff);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 550;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}

.vault-btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--color-surface-hover, #eee) 90%, transparent);
}

.vault-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vault-btn-primary {
  background: color-mix(in oklab, var(--color-surface-hover, #eee) 95%, transparent);
}

.vault-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 65%, transparent);
  margin-bottom: 0.75rem;
}

.vault-tab {
  border: 0;
  background: transparent;
  padding: 0.45rem 0.7rem;
  font-size: 0.8rem;
  color: var(--color-fg-muted, #6b6560);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.vault-tab.is-active {
  color: var(--color-fg, #1a1a1a);
  border-bottom-color: var(--color-fg, #1a1a1a);
  font-weight: 600;
}

.vault-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vault-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}

.vault-file-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 55%, transparent);
  border-radius: 0.3rem;
  padding: 0.55rem 0.6rem;
  background: color-mix(in oklab, var(--color-surface, #fff) 80%, transparent);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.vault-file-tile:hover {
  border-color: color-mix(in oklab, var(--color-border, #d4d0c8) 90%, transparent);
}

.vault-file-name {
  font-size: 0.8rem;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.vault-empty {
  text-align: center;
  border: 1px dashed color-mix(in oklab, var(--color-border, #d4d0c8) 70%, transparent);
  border-radius: 0.35rem;
  padding: 1.5rem 1rem;
  max-width: 28rem;
  margin: 1rem auto;
}

.vault-empty h2 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.vault-empty p {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--color-fg-muted, #6b6560);
  line-height: 1.4;
}

.vault-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.vault-rail-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.4rem 0.45rem;
  border-radius: 0.25rem;
  font-size: 0.78rem;
  color: inherit;
  cursor: pointer;
}

.vault-rail-item.is-active,
.vault-rail-item:hover {
  background: color-mix(in oklab, var(--color-surface-hover, #eee) 85%, transparent);
}

.vault-rail-item .meta {
  display: block;
  font-size: 0.62rem;
  color: var(--color-fg-muted, #6b6560);
  margin-top: 0.1rem;
}

.vault-clone {
  margin-top: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.2rem;
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 50%, transparent);
  background: color-mix(in oklab, var(--color-bg, #f7f6f3) 80%, transparent);
  color: var(--color-fg-muted, #6b6560);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-commits {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vault-commit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 50%, transparent);
  border-radius: 0.25rem;
  font-size: 0.78rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.vault-error {
  color: var(--color-signal, #b42318);
  font-size: 0.75rem;
  margin-top: 0.35rem;
}

/* Studio — scientific multi-pane */
.vault-studio {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  min-height: 0;
  flex: 1 1;
  height: calc(100dvh - 3.25rem);
}

@media (max-width: 860px) {
  .vault-studio {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.vault-studio-side {
  border-right: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 65%, transparent);
  padding: 0.85rem 0.75rem;
  overflow: auto;
  background: color-mix(in oklab, var(--color-surface, #fff) 70%, transparent);
}

.vault-studio-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.vault-studio-lede,
.vault-studio-hint {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-fg-muted, #6b6560);
}

.vault-studio-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.vault-perspective-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 55%, transparent);
}

.vault-graph-canvas {
  flex: 1 1;
  min-height: 420px;
  height: 100%;
  position: relative;
}

.vault-graph-3d {
  cursor: grab;
  touch-action: none;
}

.vault-graph-3d:active {
  cursor: grabbing;
}

.vault-graph-node {
  min-width: 7.5rem;
  max-width: 11rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 70%, transparent);
  background: color-mix(in oklab, var(--color-surface, #fff) 92%, transparent);
  font-size: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.vault-graph-node-label {
  width: 100%;
  font-weight: 600;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vault-graph-handle {
  width: 6px !important;
  height: 6px !important;
  background: #98a2b3 !important;
  border: none !important;
}

.vault-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin: 0.65rem 0;
}

.vault-stat {
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 55%, transparent);
  border-radius: 0.25rem;
  padding: 0.35rem 0.4rem;
  text-align: center;
}

.vault-stat-k {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted, #6b6560);
}

.vault-stat-v {
  font-size: 0.9rem;
  font-weight: 650;
}

.vault-kind-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.vault-kind-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
}

.vault-selection {
  border-top: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 50%, transparent);
  padding-top: 0.65rem;
}

.vault-selection h3 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.vault-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  color: var(--color-fg-muted, #6b6560);
  word-break: break-all;
}

.vault-tier-hot {
  border-color: #f97066 !important;
  color: #b42318 !important;
}
.vault-tier-warm {
  border-color: #fdb022 !important;
  color: #b54708 !important;
}
.vault-tier-cool {
  border-color: #7cd4fd !important;
  color: #026aa2 !important;
}

.vault-page-hero {
  margin-bottom: 1rem;
}

.vault-page-hero h1 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.vault-page-hero p {
  margin: 0;
  max-width: 40rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-fg-muted, #6b6560);
}

.vault-brain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.vault-brain-card {
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 60%, transparent);
  border-radius: 0.35rem;
  padding: 0.85rem 0.9rem;
  background: color-mix(in oklab, var(--color-surface, #fff) 80%, transparent);
}

.vault-brain-card.is-active {
  border-color: color-mix(in oklab, var(--color-fg, #1a1a1a) 35%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-fg, #1a1a1a) 12%, transparent);
}

.vault-brain-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.vault-brain-card h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.vault-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.vault-brains-page {
  padding-bottom: 2rem;
}

a.vault-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Obsidian-style 2D force graph UI system */
.vault-studio-title {
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.vault-obsidian-graph {
  position: relative;
  flex: 1 1;
  min-height: 420px;
  background:
    radial-gradient(1200px 600px at 50% 40%, #f7f5f0 0%, var(--vault-graph-bg, #f3f1eb) 70%);
  overflow: hidden;
}

.vault-graph-loading {
  display: grid;
  place-items: center;
  min-height: 420px;
  font-size: 0.8rem;
  color: var(--color-fg-muted, #6b6560);
}

.vault-obsidian-hint {
  position: absolute;
  left: 0.75rem;
  bottom: 0.65rem;
  font-size: 0.65rem;
  color: color-mix(in oklab, var(--color-fg-muted, #6b6560) 85%, transparent);
  pointer-events: none;
  letter-spacing: 0.01em;
}

.vault-obsidian-chrome {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem 0.35rem;
  border-bottom: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 55%, transparent);
  background: color-mix(in oklab, var(--color-surface, #fff) 88%, transparent);
}

.vault-obsidian-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.vault-obsidian-search {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.vault-obsidian-search input {
  width: 100%;
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.3rem;
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 75%, transparent);
  background: var(--color-bg, #f7f6f3);
  color: inherit;
}

.vault-obsidian-search input:focus {
  outline: 2px solid color-mix(in oklab, var(--color-fg, #1a1a1a) 18%, transparent);
  outline-offset: 1px;
}

.vault-obsidian-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.vault-obsidian-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.vault-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid color-mix(in oklab, var(--color-border, #d4d0c8) 70%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.5rem 0.15rem 0.35rem;
  font-size: 0.68rem;
  background: transparent;
  color: var(--color-fg-muted, #6b6560);
  cursor: pointer;
  opacity: 0.45;
}

.vault-legend-chip.is-on {
  opacity: 1;
  color: var(--color-fg, #1a1a1a);
  background: color-mix(in oklab, var(--color-surface, #fff) 90%, transparent);
}

.vault-legend-chip i,
.vault-legend-swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--legend-color, #78716c);
  display: inline-block;
  flex-shrink: 0;
}

.vault-legend-swatch {
  margin-right: 0.25rem;
  vertical-align: middle;
}

.vault-obsidian-selected {
  margin: 0;
  font-size: 0.7rem;
  color: var(--color-fg-muted, #6b6560);
}

.vault-selection-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0;
}

.vault-kind-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.vault-kind-row .vault-chip {
  margin-right: auto;
}