@layer reset, tokens, flow, primitives, layout, icons, shell, rail, pages, desk, product, showcase, responsive, a11y;
@layer tokens {
@media (prefers-reduced-data: no-preference) {
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Regular.woff2?v=latin") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-SemiBold.woff2?v=latin") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Inter-Bold.woff2?v=latin") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215;
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/InterDisplay-Bold.woff2?v=latin") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Regular.woff2?v=latin") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215;
}
}
:root {
  color-scheme: light dark;
  --density: 1;
 --dir: 1;
  interpolate-size: allow-keywords;
  --bg:        light-dark(#f3f0ea, #080b12);
  --bg-elev:   light-dark(#fffdf9, #101826);
 --bg-soft:   light-dark(#ebe6dd, #141d2e);
 --bg-hover:  light-dark(#e2dcd2, #1a2436);
 --bg-active: light-dark(#d5f3ed, #0f2a28);
  --card:      light-dark(#fffdf9, #182236);
  --chrome:    light-dark(rgba(255, 253, 249, 0.92), rgba(16, 24, 38, 0.94));
  --text:  light-dark(#161410, #eceaf5);
  --muted: light-dark(#5a5348, #b0aabf);
 --faint: light-dark(#7a7368, #8889a0);
  --accent:     light-dark(#0f766e, #3eefd0);
  --accent-dim: light-dark(#0d5e58, #1ab89a);
  --accent-ink: light-dark(#ffffff, #04221c);
  --accent-soft: light-dark(rgba(15, 118, 110, 0.14), rgba(62, 239, 208, 0.16));
  --accent-ring: light-dark(rgba(15, 118, 110, 0.28), rgba(62, 239, 208, 0.32));
  --accent-glow: light-dark(rgba(15, 118, 110, 0.22), rgba(62, 239, 208, 0.22));
  --mesh:        light-dark(rgba(15, 118, 110, 0.12), rgba(62, 239, 208, 0.16));
  --purple-soft: light-dark(rgba(139, 92, 246, 0.10), rgba(167, 139, 250, 0.12));
  --ok:            light-dark(#15803d, #6edf96);
  --ok-strong:     light-dark(#22c55e, #4ade80);
  --warn:          light-dark(#a16207, #e8c36a);
  --warn-strong:   light-dark(#eab308, #fbbf24);
  --danger:        light-dark(#dc2626, #f07178);
  --danger-strong: #ef4444;
  --info:          light-dark(#2563eb, #60a5fa);
  --purple:        light-dark(#7c3aed, #a78bfa);
  --ok-glow:     light-dark(rgba(22, 163, 74, 0.16), rgba(110, 223, 150, 0.16));
  --warn-glow:   light-dark(rgba(202, 138, 4, 0.16), rgba(232, 195, 106, 0.16));
  --danger-glow: light-dark(rgba(220, 38, 38, 0.16), rgba(240, 113, 120, 0.16));
  --tone-ok: var(--ok);
  --tone-ok-soft: var(--ok-glow);
  --tone-ok-ink: light-dark(#ffffff, #052e16);
  --tone-warn: var(--warn);
  --tone-warn-soft: var(--warn-glow);
  --tone-warn-ink: light-dark(#ffffff, #422006);
  --tone-danger: var(--danger);
  --tone-danger-soft: var(--danger-glow);
  --tone-danger-ink: light-dark(#ffffff, #2a0a0c);
  --tone-info: var(--info);
  --tone-info-soft: light-dark(rgba(37, 99, 235, 0.14), rgba(96, 165, 250, 0.16));
  --tone-info-ink: light-dark(#ffffff, #082f49);
  --tone-accent: var(--accent);
  --tone-accent-soft: var(--accent-soft);
  --tone-accent-ink: var(--accent-ink);
  --tone-purple: var(--purple);
  --tone-purple-soft: var(--purple-soft);
  --tone-purple-ink: light-dark(#ffffff, #2e1065);
  --tone-muted: var(--muted);
  --tone-muted-soft: var(--bg-hover);
  --tone-muted-ink: var(--text);
  --border:        light-dark(#ddd6cb, #2a3a52);
  --border-strong: light-dark(#c4bdb2, #334155);
  --hairline:      light-dark(#e4ddd3, #1c2532);
  --ink-on-solid: #ffffff;
  --stage-plate: #000000;
  --scrim: light-dark(rgba(15, 23, 42, 0.42), rgba(0, 0, 0, 0.65));
  --scrim-strong: light-dark(rgba(15, 23, 42, 0.62), rgba(4, 7, 12, 0.82));
  --highlight: light-dark(rgba(15, 23, 42, 0.06), rgba(255, 255, 255, 0.12));
  --shine: none;
  --ring: var(--accent);
  --radius-sm: 8px;
  --radius: clamp(10px, 1.2vw, 14px);
  --radius-md: var(--radius);
  --radius-lg: clamp(14px, 1.8vw, 18px);
  --radius-pill: 999px;
  --radius-full: var(--radius-pill);
  --shadow-soft: light-dark(0 2px 8px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(0, 0, 0, 0.2));
  --shadow: light-dark(0 12px 32px rgba(15, 23, 42, 0.06), 0 18px 50px rgba(0, 0, 0, 0.45));
  --shadow-strong: light-dark(0 24px 48px rgba(15, 23, 42, 0.10), 0 28px 64px rgba(0, 0, 0, 0.55));
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow);
  --shadow-lg: var(--shadow-strong);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-geist: "Geist", "Geist Sans", var(--font-system);
  --font-serif: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --font-display-stack: "Inter Display", var(--font-sans);
  --font: var(--font-custom, var(--font-sans));
  --font-display: var(--font-display-custom, var(--font-display-stack));
  --mono: var(--font-mono-custom, var(--font-mono));
  --font-features: "kern" 1, "liga" 1, "calt" 1;
  --font-features-pro: "kern" 1, "liga" 1, "calt" 1, "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
  --font-settings: normal;
  --font-display-settings: "opsz" 36;
  --font-tabular: tabular-nums;
  --font-proportional: proportional-nums;
  --t-3xs: clamp(0.60rem, 0.58rem + 0.08vw, 0.65rem);
  --t-2xs: clamp(0.68rem, 0.65rem + 0.10vw, 0.72rem);
  --t-xs: clamp(0.72rem, 0.7rem + 0.12vw, 0.78rem);
  --t-sm: clamp(0.83rem, 0.8rem + 0.18vw, 0.9rem);
  --t-md: clamp(0.95rem, 0.9rem + 0.25vw, 1.02rem);
  --t-lg: clamp(1.08rem, 1rem + 0.35vw, 1.18rem);
  --t-xl: clamp(1.28rem, 1.15rem + 0.6vw, 1.45rem);
  --t-2xl: clamp(1.55rem, 1.35rem + 1vw, 1.85rem);
  --t-3xl: clamp(2rem, 1.65rem + 1.8vw, 2.6rem);
  --t-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.4rem);
  --lh-tight: 1.3;
  --lh-body: 1.62;
  --lh-relaxed: 1.75;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-1: calc(clamp(3px, 0.2rem + 0.1vw, 4px) * var(--density));
  --space-2: calc(clamp(6px, 0.4rem + 0.15vw, 8px) * var(--density));
  --space-3: calc(clamp(10px, 0.7rem + 0.2vw, 12px) * var(--density));
  --space-4: calc(clamp(14px, 0.9rem + 0.3vw, 16px) * var(--density));
  --space-5: calc(clamp(20px, 1.4rem + 0.5vw, 24px) * var(--density));
  --space-6: calc(clamp(28px, 2rem + 0.8vw, 32px) * var(--density));
  --space-7: calc(clamp(40px, 3rem + 1vw, 48px) * var(--density));
  --space-8: calc(clamp(56px, 4rem + 1.2vw, 64px) * var(--density));
  --shell-h: calc(52px * var(--density));
  --list-min: clamp(280px, 35vw, 500px);
  --detail-min: clamp(320px, 40vw, 700px);
  --pane-w: 380px;
  --pane-gutter: 6px;
  --nav-w: 200px;
  --nav-collapsed: 52px;
  --tools-w: 280px;
  --status-h: calc(28px * var(--density));
  --row-h: calc(40px * var(--density));
  --grid-min: 12.5rem;
  --split-min: 18rem;
  --side-min: 18rem;
  --top-h: 3.1rem;
  --prose-w: 54rem;
  --desk-w: 88rem;
  --rail-break: 720px;
  --split-break: 640px;
  --viewport-max: 576px;
  --form-grid-col: 224px;
  --dur-instant: 0s;
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.4s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-spring: 0.35s;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-snappy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 50;
  --z-dropdown: 100;
  --z-tooltip: 110;
  --z-modal: 1000;
  --z-toast: 9999;
  --chrome-blur: blur(18px);
  --float-blur: blur(20px);
  --float-blur-lg: blur(24px);
  --scrim-blur: blur(10px);
  --panel-wash: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 92%, var(--accent-soft)), var(--card) 60%);
  --chrome-fill: color-mix(in srgb, color-mix(in srgb, var(--card) 92%, var(--accent-soft)) 88%, transparent);
  --dock-fill: color-mix(in srgb, color-mix(in srgb, var(--bg-soft) 88%, var(--accent-soft)) 70%, var(--card));
  --side-fill: color-mix(in srgb, color-mix(in srgb, var(--bg-soft) 88%, var(--accent-soft)) 65%, var(--card));
  --sticky-fill: color-mix(in srgb, color-mix(in srgb, var(--card) 94%, var(--accent-soft)) 92%, var(--bg-soft));
  --featured-wash: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 50%, transparent);
  --notice-fill: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 55%, var(--card));
  --intent-border: color-mix(in srgb, var(--intent, var(--accent)) 45%, var(--border));
  --intent-border-soft: color-mix(in srgb, var(--intent, var(--accent)) 28%, var(--border));
  --accent-edge: color-mix(in srgb, var(--accent) 55%, var(--border));
  --border-accent: color-mix(in oklab, var(--border) 55%, var(--accent));
 --border-accent-soft: color-mix(in oklab, var(--border) 70%, var(--accent));
  --border-accent-strong: color-mix(in oklab, var(--border) 40%, var(--accent));
 --edge-accent: var(--edge-accent);
  --edge-accent-soft: color-mix(in oklab, var(--border-strong) 70%, var(--accent));
 --edge-accent-strong: color-mix(in oklab, var(--border-strong) 40%, var(--accent));
  --hairline-accent: color-mix(in oklab, var(--hairline) 55%, var(--accent));
 --hairline-accent-soft: color-mix(in oklab, var(--hairline) 70%, var(--accent));
  --fill-flat: color-mix(in oklab, var(--card) 92%, var(--accent-soft));
 --fill-plate: color-mix(in oklab, var(--card) 94%, var(--accent-soft));
  --fill-quiet: color-mix(in oklab, var(--card) 96%, var(--accent-soft));
 --fill-sunken: color-mix(in oklab, var(--bg-soft) 80%, var(--accent-soft));
  --fill-sunken-soft: color-mix(in oklab, var(--bg-soft) 82%, var(--accent-soft));
 --fill-row: color-mix(in oklab, var(--bg-soft) 70%, var(--accent-soft));
  --fill-hover: color-mix(in oklab, var(--bg-hover) 55%, var(--accent-soft));
 --fill-elev: color-mix(in oklab, var(--bg-elev) 88%, var(--accent-soft));
  --fill-elev-soft: color-mix(in oklab, var(--bg-elev) 85%, var(--accent-soft));
 --fill-bg: color-mix(in oklab, var(--bg) 88%, var(--accent-soft));
  --fill-track: color-mix(in oklab, var(--bg-hover) 70%, var(--accent-soft));
 --fill-chrome: color-mix(in oklab, var(--chrome) 85%, var(--accent-soft));
  --fill-active: color-mix(in oklab, var(--bg-active) 55%, var(--accent-soft));
 --fill-active-hot: color-mix(in oklab, var(--bg-active) 70%, var(--accent-soft));
  --fill-nest: color-mix(in oklab, var(--panel-wash) 88%, var(--accent-soft));
 --fill-sticky: color-mix(in oklab, var(--sticky-fill) 85%, var(--accent-soft));
  --fill-dock: color-mix(in oklab, var(--dock-fill) 85%, var(--accent-soft));
 --fill-side: color-mix(in oklab, var(--side-fill) 88%, var(--accent-soft));
  --fill-notice: color-mix(in oklab, var(--notice-fill) 92%, var(--accent-soft));
 --fill-ink: color-mix(in oklab, var(--bg) 88%, var(--accent));
  --fill-mark: color-mix(in oklab, var(--bg-hover) 50%, var(--accent));
 --fill-rail: color-mix(in oklab, var(--accent-soft) 85%, var(--bg-elev));
 --fill-solid: color-mix(in oklab, var(--accent) 88%, var(--bg-elev));
  --border-feature: color-mix(in oklab, var(--accent) 35%, var(--border));
 --intent-edge: color-mix(in oklab, var(--intent-border-soft) 70%, var(--accent));
 --focus-halo: 0 0 0 4px color-mix(in oklab, var(--accent-ring) 50%, transparent);
 --intent-halo: 0 0 0 0.4rem var(--intent-soft, var(--accent-soft));
  --fill-outline: color-mix(in oklab, transparent 70%, var(--accent-soft));
 --fill-shimmer: color-mix(in oklab, var(--accent-soft) 55%, var(--bg-soft));
 --border-ok: color-mix(in oklab, var(--ok, var(--accent)) 65%, var(--border));
  --accent-mid: color-mix(in oklab, var(--accent) 55%, var(--accent-soft));
 --accent-fade: color-mix(in oklab, var(--accent) 55%, transparent);
 --ring-current: 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent);
  --wash-hold: color-mix(in srgb, var(--accent) 18%, transparent);
 --wash-drop: color-mix(in srgb, var(--accent) 22%, transparent);
 --wash-warn: color-mix(in srgb, var(--warn) 18%, transparent);
  --featured-wash-pro: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 22%, var(--card));
 --featured-wash-soft: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 18%, var(--card));
 --featured-wash-round: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 14%, var(--card));
  --intent-border-pro: color-mix(in srgb, var(--intent, var(--accent)) 32%, var(--border));
 --accent-edge-pro: color-mix(in srgb, var(--accent) 40%, var(--border));
  --brand-glow-soft: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent);
 --brand-glow-round: 0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent);
 --brand-glow-relaxed: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
  --outline-accent: color-mix(in srgb, var(--accent) 70%, transparent);
 --outline-accent-dash: color-mix(in srgb, var(--accent) 35%, transparent);
 --border-intent: color-mix(in srgb, var(--intent) 40%, var(--border));
  --plate: color-mix(in srgb, var(--bg-elev) 92%, transparent);
 --plate-soft: color-mix(in srgb, var(--bg-elev) 94%, transparent);
 --plate-quiet: color-mix(in srgb, var(--bg-elev) 96%, transparent);
 --plate-scrim: color-mix(in srgb, var(--bg) 75%, transparent);
  --dash-border: color-mix(in srgb, var(--border) 70%, var(--accent-ring));
 --chip-ring: 0 0 0 1px var(--accent-ring);
 --mark-ring: 0 0 0 2px var(--accent-ring);
 --control-ring: 0 0 0 3px var(--accent-ring);
 --intent-inset: inset 0 0 0 1px var(--intent-soft, var(--accent-ring));
 --spinner-track: var(--accent-ring);
 --track-inset: inset 0 0 0 1px var(--border-accent);
 --meter-sheen: color-mix(in srgb, var(--ink-on-solid) 42%, transparent);
 --btn-hover-wash: linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 0 0);
 --btn-press-wash: linear-gradient(color-mix(in srgb, currentColor 16%, transparent) 0 0);
 --heat-ok: color-mix(in oklab, var(--ok) calc(var(--heat, 0) * 55%), transparent);
 --heat-dn: color-mix(in oklab, var(--danger) calc(var(--heat, 0) * 55%), transparent);
 --progress-glow: 0 0 8px var(--accent-glow);
 --progress-glow-sm: 0 0 6px var(--accent-glow);
 --float-glow: 0 0 24px var(--accent-dim, rgba(0, 0, 0, 0.25));
 --float-glow-lg: 0 0 32px var(--accent-soft);
 --sticky-edge: var(--shadow-sm), 0 1px 0 var(--edge-accent);
  --callout-wash: linear-gradient(90deg, var(--intent-soft, var(--accent-soft)), transparent 70%) var(--card);
 --accent-wash: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 35%, var(--bg-soft)), var(--card) 70%);
  --intent-wash: linear-gradient(180deg, var(--intent-soft, var(--accent-soft)), var(--card) 55%);
 --mesh-alt: var(--purple-soft);
 --mast-glow: radial-gradient(ellipse at 12% 40%, var(--mesh), transparent 58%), radial-gradient(ellipse at 92% 8%, var(--mesh-alt), transparent 42%);
 --hero-wash: radial-gradient(ellipse at 10% 20%, var(--mesh), transparent 55%), var(--panel-wash);
  --hover-lift: translateY(-1px);
 --hover-elevate: 0 4px 12px rgba(0, 0, 0, 0.06);
 --brand-mark-bg: linear-gradient(145deg, var(--accent) 0%, var(--accent-dim) 100%);
 --brand-mark-shadow: 0 0 0 1px var(--accent-ring), 0 8px 18px var(--accent-glow);
  --glass-blur: blur(20px) saturate(180%);
 --glass-blur-lg: blur(32px) saturate(180%);
 --glass-bg: light-dark(rgba(255, 253, 249, 0.75), rgba(12, 17, 24, 0.75));
 --glass-border: color-mix(in oklab, light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08)) 72%, var(--accent));
  --glass-shadow: light-dark(0 8px 32px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.4));
  accent-color: var(--accent);
  caret-color: var(--accent);
}
* { scrollbar-width: thin; scrollbar-color: var(--border-accent) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px;
}
::-webkit-scrollbar-track { background: transparent;
}
::-webkit-scrollbar-thumb { background: var(--edge-accent); border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--faint) 45%, var(--accent));
}
:root[data-theme="light"] { color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark;
}
[data-theme="midnight"] {
  color-scheme: dark;
  --bg:        #05060a;
  --bg-elev:   #0b0e18;
  --bg-soft:   #080b14;
  --bg-hover:  #121628;
  --bg-active: #171332;
  --card:      #0e1220;
  --chrome:    rgba(11, 14, 24, 0.94);
  --text:  #e8e6f4;
  --muted: #a8a3c0;
  --faint: #7d7996;
  --accent:     #8b7cff;
  --accent-dim: #7869ea;
  --accent-ink: #0a0714;
  --accent-soft: rgba(139, 124, 255, 0.16);
  --accent-ring: rgba(139, 124, 255, 0.32);
  --accent-glow: rgba(139, 124, 255, 0.22);
  --mesh:        rgba(139, 124, 255, 0.16);
  --border:        #232a42;
  --border-strong: #2e3654;
  --hairline:      #1c2233;
  --scrim: rgba(0, 0, 0, 0.7);
  --scrim-strong: rgba(4, 7, 12, 0.85);
}
html[data-dir="rtl"], html[dir="rtl"] { direction: rtl; --dir: -1;
}
html[data-dir="ltr"], html[dir="ltr"] { direction: ltr; --dir: 1;
}
html[data-font="system"] { --font: var(--font-system); --font-display: var(--font-system);
}
html[data-font="geist"] { --font: var(--font-geist); --font-display: var(--font-geist);
}
html[data-font="inter"] { --font: var(--font-sans); --font-display: var(--font-display-stack);
}
html[data-font="serif"] { --font: var(--font-serif); --font-display: var(--font-serif);
}
html[data-font="mono"] { --font: var(--font-mono); --font-display: var(--font-mono);
}
html[data-font="custom"] { --font: var(--font-custom, var(--font-sans)); --font-display: var(--font-display-custom, var(--font));
}
html[data-palette="slate"] { --palette-h: 220; --palette-c: 0.14;
}
html[data-palette="indigo"] { --palette-h: 265; --palette-c: 0.16;
}
html[data-palette="emerald"] { --palette-h: 155; --palette-c: 0.15;
}
html[data-palette="amber"] { --palette-h: 75;  --palette-c: 0.16;
}
html[data-palette="rose"] { --palette-h: 15;  --palette-c: 0.17;
}
html[data-palette="violet"] { --palette-h: 290; --palette-c: 0.16;
}
html[data-palette="cyan"] { --palette-h: 200; --palette-c: 0.15;
}
@supports (color: oklch(0.5 0.1 200)) {html[data-palette]:not([data-palette="custom"]) {
    --accent: light-dark(
      oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175)),
      oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175))
    );
    --accent-dim: light-dark(
      oklch(0.42 var(--palette-c, 0.15) var(--palette-h, 175)),
      oklch(0.68 var(--palette-c, 0.15) var(--palette-h, 175))
    );
    --accent-ink: light-dark(#ffffff, oklch(0.12 0.04 var(--palette-h, 175)));
    --accent-soft: light-dark(oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175) / 0.14), oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175) / 0.16));
    --accent-ring: light-dark(oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175) / 0.28), oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175) / 0.32));
    --accent-glow: light-dark(oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175) / 0.22), oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175) / 0.22));
    --mesh: light-dark(oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175) / 0.12), oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175) / 0.16));
    --ring: var(--accent);
}
}
html[data-accent="custom"],
html[data-palette="custom"] {
  --accent-dim: var(--accent); --accent-ink: var(--ink-on-solid);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent); --ring: var(--accent);
  --mesh: color-mix(in srgb, var(--accent) 14%, transparent);
}
@supports (color: oklch(from red l c h)) {html[data-accent="custom"],
  html[data-palette="custom"] {
    --accent-dim: oklch(from var(--accent) calc(l * 0.88) c h);
    --accent-ink: oklch(from var(--accent) clamp(0.12, (0.62 - l) * 8, 0.98) 0.03 h);
    --accent-soft: oklch(from var(--accent) l c h / 0.16);
    --accent-ring: oklch(from var(--accent) l c h / 0.32);
    --accent-glow: oklch(from var(--accent) l c h / 0.22);
    --mesh: oklch(from var(--accent) l c h / 0.14);
}
}
html[data-palette="custom"],
html[data-accent="custom"] {
  --accent: var(--brand, var(--accent));
}
@media (prefers-reduced-motion: reduce) {:root { --hover-lift: none;
 --hover-elevate: none;
}
*, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
}
::selection { background: var(--accent-soft); color: var(--accent-ink);
}}
@layer product {
html[data-style="pro"],
html[data-style="sharp"],
html[data-style="flat"],
html[data-style="brutal"] {
  --shine: none; --chrome-blur: none; --float-blur: none; --float-blur-lg: none;
  --scrim-blur: none; --glass-blur: none; --glass-blur-lg: none;
  --hover-lift: none; --hover-elevate: var(--shadow-soft);
}
html[data-style="pro"],
html[data-style="sharp"],
html[data-style="flat"],
html[data-style="brutal"],
html[data-style="dense"],
html[data-style="soft"],
html[data-style="round"],
html[data-style="relaxed"] {
  --panel-wash: var(--card); --hero-wash: var(--card);
  --chrome-fill: var(--card); --dock-fill: var(--card); --side-fill: var(--card); --sticky-fill: var(--card);
}
html[data-style="pro"],
html[data-style="sharp"],
html[data-style="flat"],
html[data-style="brutal"],
html[data-style="dense"] { --featured-wash: var(--card);
}
html[data-style="pro"] {
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --glass-bg: var(--card); --glass-border: var(--border-accent-soft); --glass-shadow: var(--shadow);
  --mesh: transparent; --mesh-alt: transparent; --mast-glow: none;
  --featured-wash: var(--featured-wash-pro);
  --notice-fill: var(--card); --callout-wash: var(--card); --accent-wash: var(--card); --intent-wash: var(--card);
  --intent-border: var(--intent-border-pro); --intent-border-soft: var(--border-accent-soft);
  --accent-edge: var(--accent-edge-pro); --dash-border: var(--border-accent); --chip-ring: 0 0 0 1px var(--accent-ring);
  --brand-mark-bg: var(--accent); --brand-mark-shadow: var(--chip-ring);
  --font-features: var(--font-features-pro); --control-h: calc(2.35rem * var(--density));
}
html[data-style="pro"] :is(.popover, dialog.modal-overlay, .cmd-palette[data-surface="glass"], dialog.cmd-palette[data-surface="glass"]) { background: var(--bg-elev);
}
html[data-style="sharp"] {
  --radius-sm: 0; --radius: 2px; --radius-lg: 3px;
  --shadow-soft: none; --shadow: none; --shadow-md: none; --shadow-lg: none;
  --shadow-strong: 0 0 0 1px var(--border-accent); --mesh: transparent; --mesh-alt: transparent; --mast-glow: none;
  --dash-border: var(--edge-accent); --intent-border: var(--edge-accent); --intent-border-soft: var(--border-accent-soft); --glass-border: var(--border-accent);
  --brand-mark-bg: var(--accent); --brand-mark-shadow: 0 0 0 1px var(--edge-accent-strong); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="soft"] {
  --radius-sm: 10px; --radius: clamp(12px, 1.5vw, 18px); --radius-lg: clamp(18px, 2.2vw, 24px);
  --shadow-soft: 0 1px 4px rgba(15, 23, 42, 0.05); --shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08); --hover-lift: translateY(-2px); --hover-elevate: 0 8px 24px rgba(15, 23, 42, 0.08);
  --featured-wash: var(--featured-wash-soft);
  --dash-border: var(--border-accent); --glass-border: var(--border-accent-soft); --chip-ring: 0 0 0 1px var(--accent-ring);
  --brand-mark-shadow: var(--brand-glow-soft);
}
html[data-style="round"] {
  --radius-sm: 14px; --radius: 20px; --radius-lg: 28px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-md: 0 14px 36px rgba(15, 23, 42, 0.1);
  --hover-lift: translateY(-2px); --hover-elevate: 0 12px 28px rgba(15, 23, 42, 0.1);
  --featured-wash: var(--featured-wash-round);
  --dash-border: var(--border-accent); --glass-border: var(--border-accent-soft); --chip-ring: 0 0 0 1px var(--accent-ring);
  --brand-mark-shadow: var(--brand-glow-round);
}
html[data-style="dense"] {
  --density: 0.85; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
  --dash-border: var(--border-accent); --glass-border: var(--border-accent-soft); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="relaxed"] {
  --density: 1.15; --radius: clamp(12px, 1.4vw, 16px); --radius-lg: clamp(16px, 1.8vw, 20px); --featured-wash: var(--card);
  --hover-lift: translateY(-1px); --hover-elevate: 0 6px 18px rgba(15, 23, 42, 0.07);
  --dash-border: var(--border-accent); --glass-border: var(--border-accent-soft); --chip-ring: 0 0 0 1px var(--accent-ring);
  --brand-mark-shadow: var(--brand-glow-relaxed);
}
html[data-style="flat"] {
  --shadow-soft: none; --shadow: none; --shadow-md: none; --shadow-lg: none;
  --shadow-strong: none; --shadow-inner: none; --mesh: transparent;
  --dash-border: var(--edge-accent); --intent-border: var(--edge-accent);
  --brand-mark-bg: var(--accent); --brand-mark-shadow: 0 0 0 1px var(--edge-accent-strong); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="brutal"] {
  --radius-sm: 0; --radius: 0; --radius-lg: 0;
  --shadow-soft: 2px 2px 0 var(--edge-accent-soft); --shadow: 4px 4px 0 var(--edge-accent-soft);
  --shadow-md: 4px 4px 0 var(--edge-accent-soft); --shadow-lg: 6px 6px 0 var(--edge-accent-soft);
  --shadow-strong: 8px 8px 0 var(--edge-accent-soft); --mesh: transparent; --mast-glow: none; --dash-border: var(--edge-accent);
  --brand-mark-bg: var(--accent); --brand-mark-shadow: 3px 3px 0 var(--edge-accent); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="glass"] {
  --card: var(--glass-bg); --bg-elev: var(--glass-bg); --shadow: var(--glass-shadow); --radius: var(--radius-lg);
  --chrome-blur: var(--glass-blur); --float-blur: var(--glass-blur); --float-blur-lg: var(--glass-blur-lg); --scrim-blur: var(--glass-blur);
  --panel-wash: var(--glass-bg); --hero-wash: var(--glass-bg); --featured-wash: var(--glass-bg);
  --chrome-fill: var(--glass-bg); --dock-fill: var(--glass-bg); --side-fill: var(--glass-bg); --sticky-fill: var(--glass-bg);
  --glass-border: var(--border-accent); --dash-border: var(--border-accent); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="glass"] .panel[data-surface], html[data-style="glass"] .card[data-surface] { border-color: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}}
@layer reset {
@view-transition { navigation: auto;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;
}
html { height: 100%;
 -webkit-text-size-adjust: 100%;
}
body {
  height: 100%; font-family: var(--font); font-size: var(--t-md);
  background: var(--bg);
  color: var(--text); line-height: var(--lh-body, 1.55);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: var(--font-features);
  overflow: hidden;
}
html:not([data-canvas="doc"]):not([data-canvas="bare"]) body {
  background:
    radial-gradient(70rem 28rem at 8% -12%, var(--mesh), transparent 58%),
    radial-gradient(42rem 22rem at 100% 0%, var(--purple-soft), transparent 50%),
    var(--bg);
}
html[data-canvas="doc"] body,
html[data-canvas="bare"] body {
  overflow: auto;
}
html[data-canvas="bare"] body {
  background: transparent;
  height: auto;
}
.page { container-type: inline-size;
}
::selection { background: var(--accent-soft); color: var(--text);
}
::target-text { background: var(--accent-soft); color: var(--text);
}
h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-bold); line-height: var(--lh-tight); text-wrap: balance;
}
@supports (text-box-trim: trim-both) {h1, h2, h3, .display, .kicker {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
}
h1 { font-size: var(--t-2xl); letter-spacing: -0.04em;
}
h2 { font-size: var(--t-xl); letter-spacing: -0.03em;
}
h3 { font-size: var(--t-lg); letter-spacing: -0.02em;
}
h4 { font-size: var(--t-md);
}
h5 { font-size: var(--t-sm);
}
h6 { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase;
}
p { line-height: var(--lh-body); text-wrap: pretty; hanging-punctuation: first last;
}
a { color: var(--accent); text-decoration: none;
}
a:hover { text-decoration: underline;
}
button { font-family: inherit; font-size: inherit; cursor: pointer;
}
input, select, textarea { font-family: inherit; font-size: inherit;
}
img, svg { display: block; max-width: 100%;
}
code { font-family: var(--mono); font-size: 0.85em;
}
ul, ol { list-style: none;
}
hr { border: 0; border-top: 1px solid var(--border);
}
.hidden { display: none !important;
}
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none;
}
html[data-shell="plain"] .work,
html[data-shell="plain"] #work {
  container-name: work;
  container-type: inline-size;
  min-width: 0;
  min-height: 0;
  padding: var(--space-6);
  max-width: 48rem;
  margin-inline: auto;
}
html[data-shell="plain"][data-canvas="app"] .work,
html[data-shell="plain"][data-canvas="app"] #work,
html[data-canvas="bare"] .work,
html[data-canvas="bare"] #work {
  max-width: none;
  padding: 0;
  margin-inline: 0;
  width: 100%;
  container-type: normal;
}
.hint { font-size: var(--t-xs); color: var(--faint); margin: 0;
}
.mono { font-family: var(--mono);
}
html, body, .shell, .topbar, .layout {
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (prefers-reduced-motion: no-preference) {::view-transition-old(root) { animation: vf-vt-out var(--dur) var(--ease);
}
::view-transition-new(root) { animation: vf-vt-in var(--dur) var(--ease);
}
}
@keyframes vf-vt-out { to { opacity: 0; }
}
@keyframes vf-vt-in { from { opacity: 0; }
}}
@layer primitives {
.stack { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.cluster > .field { width: auto; min-width: 4.5rem; max-width: 7rem;
}
.sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--side-min, 18rem), 22rem);
  gap: var(--space-4);
  min-width: 0;
}
.sidebar[data-side="start"] {
  grid-template-columns: minmax(var(--side-min, 18rem), 22rem) minmax(0, 1fr);
}
.sidebar-main, .sidebar-side { min-width: 0;
}
.frame {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 16 / 9;
}
.frame[data-surface="sunken"] {
  background: var(--fill-bg);
  border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.frame > * { width: 100%; height: auto; display: block;
}
.frame > .velvet-viewport {
  position: absolute;
  inset: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.frame > .velvet-viewport > .velvet-canvas {
  width: 100%;
  height: 100%;
}
.frame[data-ratio="1/1"] { aspect-ratio: 1 / 1;
}
.frame[data-ratio="4/3"] { aspect-ratio: 4 / 3;
}
.frame[data-ratio="3/2"] { aspect-ratio: 3 / 2;
}
.frame[data-ratio="16/9"] { aspect-ratio: 16 / 9;
}
.frame[data-ratio="2/1"] { aspect-ratio: 2 / 1;
}
.frame[data-ratio="21/9"] { aspect-ratio: 21 / 9;
}
.frame[data-ratio="fill"] {
  aspect-ratio: auto;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 22rem;
}
.frame[data-live] > svg { visibility: hidden;
}
.frame[data-ratio="fill"] .velvet-canvas { cursor: crosshair;
}
@supports (aspect-ratio: attr(data-ratio type(<ratio>))) {.frame[data-ratio]:not([data-ratio="fill"]),
  .velvet-viewport[data-ratio]:not([data-ratio="fill"]) {
    aspect-ratio: attr(data-ratio type(<ratio>), 16 / 9);
}
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4) var(--space-5);
  align-items: start;
  min-width: 0;
  width: 100%;
}
.form-grid > * { min-width: 0;
}
.form-grid > .hint,
.form-grid > .drop,
.form-grid > .field:has(textarea),
.form-grid > .field:has(.list-row),
.form-grid > .field:has(.cluster),
.form-grid > .field:has(.drop),
.form-grid > .field:has(input[type="file"]) {
  grid-column: 1 / -1;
}
.scroll {
  min-height: 0;
  overflow: auto;
}
.scroll[data-axis="x"] { overflow-x: auto; overflow-y: hidden;
}
.scroll[data-axis="y"] { overflow-y: auto; overflow-x: hidden;
}
.scroll[data-stick] > * { overflow-anchor: none;
}
.scroll[data-stick]::after {
  content: "";
  display: block;
  height: 1px;
  overflow-anchor: auto;
}
.tab-panel { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
}
.panel-actions { margin-inline-start: auto;
}
.panel-actions .btn { min-inline-size: 1.75rem; padding-inline: var(--space-1);
}
.data-grid { overflow: auto; min-width: 0;
}
.data-grid[data-surface="sunken"] tr[data-current],
:is(.directory[data-surface="flat"], .panel[data-surface]) .data-table tr[data-current] {
  background: var(--accent-soft);
}
.data-grid[data-surface="sunken"] tr[data-current] td { color: var(--text);
}
.data-grid .grid-hit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.data-grid[data-surface="sunken"] tr:has(.grid-hit):hover { background: var(--accent-soft);
}
.graph { position: relative; min-height: 10rem; contain: layout paint;
}
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.graph-edge { stroke: var(--border); stroke-width: 0.08;
}
.graph-node {
  position: absolute;
  left: calc(var(--gx, 0) * 100% / 12);
  top: calc(var(--gy, 0) * 100% / 8);
  transform: translate(-50%, -50%);
  contain: layout style;
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 12.5rem)), 1fr));
  gap: var(--space-3);
}
.grid-auto > * { min-width: 0;
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 18rem)), 1fr));
  gap: var(--space-4);
}
.split > * { min-width: 0;
}
.center { display: flex; align-items: center; justify-content: center;
}
.between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
:is([data-tone="accent"], .callout-accent, .banner-accent) { --intent: var(--tone-accent); --intent-soft: var(--tone-accent-soft); --intent-ink: var(--tone-accent-ink);
}
:is([data-tone="ok"], [data-tone="live"], .callout-ok, .banner-ok) { --intent: var(--tone-ok); --intent-soft: var(--tone-ok-soft); --intent-ink: var(--tone-ok-ink);
}
:is([data-tone="warn"], [data-tone="away"], .callout-warn, .banner-warn) { --intent: var(--tone-warn); --intent-soft: var(--tone-warn-soft); --intent-ink: var(--tone-warn-ink);
}
:is([data-tone="danger"], .btn-danger, .callout-danger, .banner-danger) { --intent: var(--tone-danger); --intent-soft: var(--tone-danger-soft); --intent-ink: var(--tone-danger-ink);
}
[data-tone="info"] { --intent: var(--tone-info); --intent-soft: var(--tone-info-soft); --intent-ink: var(--tone-info-ink);
}
[data-tone="purple"] { --intent: var(--tone-purple); --intent-soft: var(--tone-purple-soft); --intent-ink: var(--tone-purple-ink);
}
[data-tone="muted"] { --intent: var(--tone-muted); --intent-soft: var(--tone-muted-soft); --intent-ink: var(--bg-elev);
}
:is([data-size="xs"], .btn-xs, .tiny) { --control-h: calc(1.75rem * var(--density)); --control-px: var(--space-2); --control-fs: var(--t-xs);
}
:is([data-size="sm"], .btn-sm) { --control-h: calc(2rem * var(--density)); --control-px: var(--space-3); --control-fs: var(--t-xs);
}
[data-size="md"] { --control-h: calc(2.5rem * var(--density)); --control-px: var(--space-4); --control-fs: var(--t-sm);
}
:is([data-size="lg"], .btn-lg) { --control-h: calc(3rem * var(--density)); --control-px: var(--space-5); --control-fs: var(--t-md);
}
[data-size="xl"] { --control-h: calc(3.5rem * var(--density)); --control-px: var(--space-6); --control-fs: var(--t-lg);
}
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; white-space: nowrap;
  background: var(--intent-soft, var(--accent-soft)); color: var(--intent, var(--accent));
  border: 1px solid var(--intent-soft, var(--accent-ring)); box-shadow: var(--chip-ring);
}
.badge[data-variant="solid"] { background: var(--intent, var(--accent)); color: var(--intent-ink, var(--accent-ink));
}
.badge[data-variant="outline"] { background: var(--fill-outline); border-color: currentColor;
}
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: var(--t-xs); font-weight: 500; color: var(--muted);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tag[data-surface="flat"] {
  background: var(--fill-track);
  border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.tag[data-surface="flat"]:hover { background: var(--fill-active); border-color: var(--accent);
}
.card {
  border-radius: var(--radius);
  min-width: 0;
}
.card[data-surface] { padding: var(--space-4);
}
[data-surface="glass"],
.card[data-surface="glass"],
.panel[data-surface="glass"] {
  background: var(--chrome-fill); backdrop-filter: var(--chrome-blur); -webkit-backdrop-filter: var(--chrome-blur);
  border: 1px solid var(--border-accent-soft); box-shadow: var(--shine), var(--chip-ring);
}
[data-surface="sunken"],
.card[data-surface="sunken"],
.panel[data-surface="sunken"] {
  background: var(--panel-wash); border: 1px solid var(--border-accent-soft); box-shadow: var(--shine), var(--chip-ring);
}
[data-surface="elevated"],
.card[data-surface="elevated"],
.panel[data-surface="elevated"] {
  background: var(--fill-plate);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shine), var(--shadow-md), var(--chip-ring);
}
[data-surface="flat"],
.card[data-surface="flat"],
.panel[data-surface="flat"] {
  background: var(--fill-quiet);
  border: 1px solid var(--border-accent-soft);
  box-shadow: var(--shine), var(--shadow-soft), var(--chip-ring);
}
.skeleton {
  background: linear-gradient(90deg, var(--fill-track) 22%, var(--fill-shimmer) 38%, var(--fill-track) 62%);
  background-size: 400% 100%; animation: skeleton-pulse 1.4s ease infinite; border-radius: var(--radius-sm);
}
@keyframes skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; }
}
.divider { height: 1px; background: var(--border-accent); margin: var(--space-3) 0; border: none;
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--text); font-weight: 600; flex-shrink: 0;
}
.avatar[data-surface="flat"] { background: var(--fill-track);
}
.avatar-sm { width: 32px; height: 32px; font-size: 12px;
}
.avatar-md { width: 40px; height: 40px; font-size: 14px;
}
.presence-stack { display: inline-flex; align-items: center;
}
.presence-stack .avatar {
  margin-inline-start: -8px; border: 2px solid var(--fill-elev); box-shadow: var(--shadow-sm), var(--chip-ring); transition: transform var(--dur-fast);
}
.presence-stack .avatar:first-child {
  margin-inline-start: 0;
}
.presence-stack .avatar:hover {
  transform: translateY(-2px) scale(1.08);
  z-index: 2;
}
.presence-ring { outline: 2px solid var(--accent); outline-offset: 2px;
}
.avatar-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px 8px 2px 2px;
  border-radius: var(--radius-pill); font-size: var(--t-xs); font-weight: 500;
}
.avatar-chip[data-surface="flat"] { background: var(--fill-sunken); border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.avatar-chip[data-surface="flat"]:hover { background: var(--fill-hover); border-color: var(--accent);
}
.input, .select, .textarea {
  width: 100%; max-width: 100%; min-width: 0;
  min-height: var(--control-h, calc(2.5rem * var(--density)));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: var(--control-fs, var(--t-sm));
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input[data-surface="sunken"], .select[data-surface="sunken"], .textarea[data-surface="sunken"] {
  background: var(--fill-elev);
  border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
:is(.input, .select, .textarea):hover { border-color: var(--edge-accent-strong);
}
:is(.input, .select, .textarea)::placeholder { color: var(--faint); opacity: 1;
}
:is(.input, .select, .textarea):disabled { opacity: 0.55; cursor: not-allowed;
}
@supports (appearance: base-select) {.select { appearance: base-select;
}
.select[data-surface="sunken"]::picker(select) {
    background: var(--fill-elev); color: var(--text);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-sm), var(--chip-ring);
}
}
.input[type="date"],
.input[type="time"],
.input[type="datetime-local"],
.input[type="month"],
.input[type="week"],
.input[type="number"],
.input[type="search"],
.input[type="file"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.input[type="date"]::-webkit-datetime-edit,
.input[type="time"]::-webkit-datetime-edit,
.input[type="datetime-local"]::-webkit-datetime-edit {
  min-width: 0;
}
.textarea { min-height: 6rem; resize: vertical;
}
@supports (field-sizing: content) {.textarea { field-sizing: content; max-height: 16rem;
}
}
input[type="color"].input { padding: 2px; max-width: 4.5rem; cursor: pointer;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--control-ring);
}
.field { display: flex; flex-direction: column; gap: var(--space-1); overflow: visible; min-width: 0; width: 100%;
}
.field-label { font-size: var(--t-xs); font-weight: 600; color: var(--muted);
}
.field-msg { font-size: var(--t-xs); color: var(--faint);
}
.field-msg.danger { color: var(--danger);
}
.field-msg.ok { color: var(--ok);
}
.field-msg.warn { color: var(--warn);
}
.field-msg.info { color: var(--accent);
}
.field:has(.field-msg.danger) .input,
.field:has(.field-msg.danger) .textarea,
.field:has(.field-msg.danger) .select,
.input:user-invalid,
.textarea:user-invalid,
.select:user-invalid { border-color: var(--danger);
}
.input:user-valid,
.textarea:user-valid,
.select:user-valid { border-color: var(--border-ok);
}
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 7rem; border-radius: var(--radius); cursor: pointer;
  text-align: center; color: var(--muted); font-size: var(--t-sm); position: relative;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.drop[data-surface="sunken"] {
  padding: var(--space-5) var(--space-4); border: 1.5px dashed var(--edge-accent);
  background: var(--fill-bg);
}
.drop[data-surface="sunken"]::before {
  content: "⬆"; font-size: 1.25rem; line-height: 1; opacity: .55; color: var(--accent);
}
.drop[data-surface="sunken"].on, .drop[data-surface="sunken"]:focus-within,
.drop[data-surface="sunken"]:hover {
  border-color: var(--accent); border-style: solid; background: var(--bg-active);
  color: var(--text); box-shadow: var(--control-ring);
}
.drop[data-surface="sunken"].on::before,
.drop[data-surface="sunken"]:focus-within::before,
.drop[data-surface="sunken"]:hover::before { opacity: 1;
}
.drop-label { pointer-events: none; font-weight: 550;
}
.input[type="file"]::file-selector-button {
  margin-inline-end: var(--space-2); border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm); background: var(--fill-elev); color: var(--text); box-shadow: var(--chip-ring);
  padding: .2rem .65rem; font: inherit; cursor: pointer;
}
.input[type="file"]::file-selector-button:hover { border-color: var(--accent); background: var(--fill-hover);
}
search.suggest,
.suggest { position: relative; display: block; min-width: 0; width: 100%;
}
.suggest-menu {
  display: none; opacity: 0; transform: translateY(-4px) scale(0.98);
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: var(--z-dropdown); margin: 0; list-style: none;
  max-height: 12rem; overflow: auto;
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    display var(--dur-fast) allow-discrete;
}
.suggest-menu[data-surface="glass"] {
  padding: var(--space-1);
  background: var(--plate);
  border: 1px solid var(--border-accent); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md), var(--chip-ring);
  backdrop-filter: var(--float-blur); -webkit-backdrop-filter: var(--float-blur);
}
.suggest[data-open="true"] .suggest-menu {
  display: flex; flex-direction: column; gap: 1px; opacity: 1; transform: translateY(0) scale(1);
}
@starting-style {
  .suggest[data-open="true"] .suggest-menu {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
.suggest-opt.off { display: none;
}
.suggest-opt {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); min-height: 40px;
  border: none; background: transparent; color: var(--text); border-radius: var(--radius-sm);
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
}
.suggest-menu[data-surface="glass"] .suggest-opt.on,
.suggest-menu[data-surface="glass"] .suggest-opt[aria-selected="true"] {
  background: var(--fill-active); color: var(--accent);
}
.suggest-menu[data-surface="glass"] .suggest-opt:hover,
.suggest-menu[data-surface="glass"] .suggest-opt:focus-visible {
  background: var(--fill-hover); color: var(--accent);
}
.suggest-empty {
  padding: var(--space-3);
  color: var(--faint);
  font-size: var(--t-sm);
}
.suggest-empty.off { display: none;
}
.kbd {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: 1;
  padding: 0.2em 0.5em;
  border-radius: 6px;
  color: var(--text);
}
.kbd[data-surface="flat"] {
  border: 1px solid var(--border-accent); border-bottom-width: 2px;
  background: var(--fill-sunken); box-shadow: var(--chip-ring);
}
.switch { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; cursor: pointer; font-size: var(--t-sm); position: relative;
}
.switch input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.switch-track {
  width: 44px; height: 24px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: var(--fill-track);
  border: 1px solid var(--border-accent); position: relative; box-shadow: var(--chip-ring);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); transition: transform var(--dur-fast) var(--ease);
}
.switch input:checked + .switch-track {
  background: var(--accent); border-color: var(--accent);
}
.switch input:checked + .switch-track::after {
  transform: translateX(20px);
  background: var(--accent-ink);
}
.switch input:focus-visible + .switch-track {
  outline: none; box-shadow: var(--control-ring);
}
.check {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 40px; cursor: pointer; font-size: var(--t-sm);
}
.input-check { width: auto; height: 18px; margin: 0; accent-color: var(--accent);
}
.list-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-accent); min-width: 0;
}
.directory[data-surface="flat"] .list-row:hover { background: var(--fill-row);
}
.list-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.list-row-text span { font-size: var(--t-sm); color: var(--muted);
}
.list-row .avatar-sm { width: 22px; height: 22px; font-size: 10px; flex: none;
}
.row-dot {
  width: 0.5rem; height: 0.5rem; flex: none;
  border-radius: var(--radius-full);
  background: var(--ok-strong);
}
.row-dot[data-tone="ok"],
.row-dot[data-tone="live"] { background: var(--ok-strong);
}
.row-dot[data-tone="away"],
.row-dot[data-tone="warn"] { background: var(--warn);
}
.row-dot[data-tone="danger"] { background: var(--danger);
}
.row-dot[data-tone="muted"] { background: var(--faint);
}
.block { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: var(--space-4);
}
.desk > .block {
  content-visibility: auto;
  contain-intrinsic-size: auto 12rem;
}
[data-island] {
  contain: layout style;
}
.metric {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 0; border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.metric[data-surface="flat"] { padding: var(--space-4) var(--space-5);
  background: var(--fill-flat);
}
.metric[data-surface="flat"]:hover { border-color: var(--border-accent-strong); transform: var(--hover-lift); box-shadow: var(--chip-ring);
}
.metric[data-surface="flat"][data-tone] {
  border-color: var(--border-intent);
  background: var(--intent-wash);
}
.metric[data-surface="flat"][data-tone] .metric-value { color: var(--intent);
}
.metric-value { font-size: var(--t-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.metric-label { order: -1; font-size: var(--t-xs); font-weight: 600; color: var(--muted);
}
.callout, .banner {
  display: flex; flex-direction: column; gap: var(--space-1);
  border-radius: var(--radius);
}
.callout[data-surface="sunken"], .banner[data-surface="sunken"] {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-accent-soft);
  border-inline-start: 3px solid var(--intent, var(--accent)); background: var(--callout-wash);
  box-shadow: var(--chip-ring);
}
.callout p, .banner p { color: var(--muted); font-size: var(--t-sm);
}
.customize-body { padding: var(--space-3);
}
.customize-btn { flex-shrink: 0;
}
.act-form { display: contents;
}
:is(.btn, .btn-primary, .btn-ghost, .btn-danger, .ghost, .btn-xs, .btn-sm, .tiny) {
  --btn-bg: transparent; --btn-fg: var(--intent, var(--text)); --btn-bd: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h, calc(2.5rem * var(--density)));
  padding: var(--space-1) var(--control-px, var(--space-4));
  border: 1px solid var(--btn-bd); border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--control-fs, var(--t-sm)); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
:is(.btn-primary, .btn-danger, [data-variant="solid"]) {
  --btn-bg: var(--intent, var(--accent)); --btn-fg: var(--intent-ink, var(--accent-ink)); --btn-bd: transparent;
  box-shadow: var(--shine), var(--chip-ring);
}
[data-variant="soft"] { --btn-bg: var(--intent-soft, var(--accent-soft)); --btn-fg: var(--intent, var(--accent)); --btn-bd: transparent;
}
[data-variant="outline"] { --btn-bd: var(--intent, var(--border-strong));
}
:is(.btn, .btn-primary, .btn-ghost, .btn-danger, .ghost, .btn-xs, .btn-sm, .tiny):hover {
  background-image: var(--btn-hover-wash);
}
:is(.btn, .btn-primary, .btn-ghost, .btn-danger, .ghost, .btn-xs, .btn-sm, .tiny):active {
  background-image: var(--btn-press-wash);
  transform: translateY(1px);
}
:is(.btn, .btn-primary, .btn-danger, .btn-ghost).busy {
  pointer-events: none; opacity: 0.72;
}
.busy::before {
  content: "";
  width: 0.85em; height: 0.85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vf-spin 0.7s linear infinite;
}
button:disabled {
  opacity: 0.45; pointer-events: none; cursor: default;
}
.btn-lg { min-width: min(160px, 100%); border-radius: var(--radius);
}
.skip-link {
  position: absolute; top: -100px; left: 0; z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.skip-link:focus { top: 0;
}
:focus-visible {
  outline: 2px solid var(--ring, var(--accent));
  outline-offset: 2px;
  box-shadow: var(--focus-halo);
}
.md { font-size: var(--t-sm); color: var(--text);
}
.md p, .md li { margin: 0 0 var(--space-2); color: var(--muted);
}
.md h2 { font-size: var(--t-lg); margin: var(--space-5) 0 var(--space-2);
}
.md h3 { font-size: var(--t-md); margin: 0 0 var(--space-2);
}
.md h4 { font-size: var(--t-sm); margin: var(--space-3) 0 var(--space-1); text-transform: none;
}
.md ul { padding-left: 1.2rem; margin: 0 0 var(--space-2);
}
.md ol { padding-left: 1.4rem; margin: 0 0 var(--space-2);
}
.md blockquote { margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-3); border-inline-start: 3px solid var(--accent); color: var(--muted);
}
.md[data-surface="flat"] pre { margin: 0 0 var(--space-3); padding: var(--space-3); background: var(--fill-track); border: 1px solid var(--border-accent); border-radius: var(--radius-sm); overflow-x: auto; box-shadow: var(--chip-ring);
}
.md[data-surface="flat"] pre code { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text); background: none; padding: 0;
}
.md table { margin: 0 0 var(--space-3); border-collapse: collapse; font-size: var(--t-xs);
}
.md th, .md td { border: 1px solid var(--border-accent); padding: var(--space-1) var(--space-2); text-align: start;
}
.md[data-surface="flat"] th { background: var(--fill-track); color: var(--text);
}
.md a { color: var(--accent);
}
.code-block {
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.55; border-radius: var(--radius-sm);
  overflow-x: auto; color: var(--text); white-space: pre; margin: 0; min-width: 0; max-width: 100%;
}
.code-block[data-surface="sunken"] {
  background: var(--fill-bg);
  border: 1px solid var(--border-accent); padding: var(--space-4); box-shadow: var(--chip-ring);
}
.code { margin: 0;
}
.code-lang { font-size: var(--t-xs); font-weight: 600; color: var(--muted); margin: 0 0 var(--space-1);
}
.code-kw { color: var(--accent);
}
.code-str { color: var(--ok);
}
.code-cmt { color: var(--faint); font-style: italic;
}
.loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-6);
}
.spinner {
  display: block;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid var(--spinner-track);
  border-top-color: var(--accent);
  animation: vf-spin 0.7s linear infinite;
}
@keyframes vf-spin { to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {.spinner { animation: vf-pulse 1.1s ease-in-out infinite;
}
.skeleton { animation: none;
}
.meter-fill::after,
  .meter.busy .meter-fill,
  .meter.play .meter-fill { animation: none;
}
.busy::before { animation: vf-pulse 1.1s ease-in-out infinite;
}
}
@keyframes vf-pulse { 50% { opacity: 0.35; }
}
.sk-line { height: 0.7rem; width: 100%;
}
.banner { position: sticky; top: 0; z-index: var(--z-sticky);
}
.fold { border-radius: var(--radius);
}
.fold[data-surface="flat"] {
  border: 1px solid var(--border-accent);
  background: var(--fill-flat); box-shadow: var(--shine), var(--chip-ring);
}
.fold > summary {
  display: flex; align-items: center; gap: var(--space-2); min-height: 40px;
  padding: 0 var(--space-4); cursor: pointer; font-weight: 600; user-select: none;
  transition: background var(--dur-fast) var(--ease);
}
.fold[data-surface="flat"] > summary:hover,
.faq-list[data-surface="sunken"] .fold > summary:hover { background: var(--fill-hover);
}
.fold-body { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border-accent); color: var(--muted); font-size: var(--t-sm);
}
@supports (interpolate-size: allow-keywords) {.fold::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition: block-size var(--dur) var(--ease),
      opacity var(--dur) var(--ease),
      content-visibility var(--dur) allow-discrete;
}
.fold[open]::details-content {
    block-size: auto;
    opacity: 1;
}
@starting-style {
    .fold[open]::details-content {
      block-size: 0;
      opacity: 0;
    }
}
}
@media (prefers-reduced-motion: reduce) {.fold::details-content { transition: none;
}
}
.tip { position: relative; anchor-name: --vf-tip;
}
.tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  z-index: var(--z-tooltip);
}
.tip[data-surface="elevated"]::after {
  background: var(--fill-elev);
  border: 1px solid var(--border-accent); box-shadow: var(--shadow-sm), var(--chip-ring);
}
@supports (position-anchor: --vf-tip) {.tip::after {
    position-anchor: --vf-tip;
    left: auto; bottom: auto; transform: none;
    position-area: block-start;
    margin-bottom: 6px;
}
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1;
}
.table-wrap {
  overflow: auto; max-height: 16rem;
  border-radius: var(--radius);
}
.table-wrap[data-surface="flat"] {
  border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
  background:
    linear-gradient(to right, var(--bg-elev) 30%, transparent),
    linear-gradient(to right, transparent, var(--bg-elev) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), transparent) 100% 0;
  background-repeat: no-repeat; background-color: var(--card);
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.virtual-spacer td { line-height: 0; font-size: 0;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
}
.data-table th, .data-table td {
  padding: var(--space-2) var(--space-3); text-align: start;
  border-block-end: 1px solid var(--border-accent-soft);
}
.data-table thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  font-size: var(--t-xs); color: var(--muted); font-weight: 650;
}
.directory[data-surface="flat"] .data-table thead th {
  background: var(--fill-elev); box-shadow: 0 1px 0 var(--border-accent);
}
.data-table.col-resize { table-layout: fixed;
}
.col-grip {
  position: absolute; inset-inline-end: -3px; top: 0; bottom: 0;
  width: 7px; cursor: col-resize; touch-action: none;
}
.col-grip:hover, .col-grip[data-resizing] { background: var(--accent-dim);
}
@supports (animation-timeline: scroll()) {.data-table thead th {
    animation: sticky-header-elevate linear both;
    animation-timeline: scroll(nearest root); animation-range: 0px 40px;
}
}
@keyframes sticky-header-elevate {
  to {
    box-shadow: var(--sticky-edge);
  }
}
.page-progress, .reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent);
  box-shadow: var(--progress-glow); transform-origin: 0 50%; z-index: var(--z-toast); pointer-events: none; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {.page-progress, .reading-progress {
    animation: page-scroll-progress linear;
    animation-timeline: scroll();
}
}
@keyframes page-scroll-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.data-table tbody tr:last-child td { border-bottom: none;
}
.directory[data-surface="flat"] .data-table tbody tr:not([data-current]):hover { background: var(--fill-row);
}
.slider { width: 100%; min-height: 40px; accent-color: var(--accent);
}
.meter { width: 100%; height: 10px; border-radius: var(--radius-pill); overflow: hidden; position: relative;
}
.meter[data-surface="sunken"] { background: var(--fill-track); box-shadow: var(--track-inset);
}
.meter-fill {
  display: block; height: 100%;
  position: relative;
  background: var(--intent, var(--accent));
  border-radius: var(--radius-pill);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
  overflow: hidden;
}
.meter-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--meter-sheen),
    transparent
  );
  transform: translateX(-100%);
  animation: meter-sheen 1.15s linear infinite;
}
.meter[data-tone="ok"] .meter-fill::after,
.meter[data-tone="danger"] .meter-fill::after { display: none;
}
.meter.busy .meter-fill {
  width: 32% !important;
  animation: meter-indet 1.15s var(--ease-in-out) infinite;
}
.meter.busy .meter-fill::after { display: none;
}
.meter.play .meter-fill {
  width: 8%;
  animation: meter-play 2.6s var(--ease-in-out) infinite;
}
@keyframes meter-sheen {
  to { transform: translateX(100%); }
}
@keyframes meter-indet {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@keyframes meter-play {
  0% { width: 8%; }
  70% { width: 86%; }
  100% { width: 100%; }
}
.dialog-actions { padding: 0 var(--space-4) var(--space-4);
}
.live {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--t-xs); font-weight: 650;
}
.live i {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: var(--ring-current);
}
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  font-size: var(--t-sm);
}
.crumbs li { display: flex; align-items: center; gap: var(--space-1);
}
.crumbs li:not(:last-child)::after {
  content: "/";
  color: var(--faint);
}
.crumb {
  border: none; background: transparent; color: var(--accent);
  padding: 0 var(--space-1); min-height: 40px; font: inherit; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
}
a.crumb:hover { text-decoration: underline;
}
.crumbs [aria-current="page"] { color: var(--text); font-weight: 650;
}
.steps {
  display: flex; gap: var(--space-3); align-items: flex-start; overflow-x: auto;
}
.steps[data-surface="flat"] {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  background: var(--fill-plate);
  border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
}
.step {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--t-sm); color: var(--muted); flex: 1; min-width: 0;
}
.step.on { color: var(--text); font-weight: 650;
}
.tabs .tab-panel { display: none;
}
.tabs:has(.tab-bar > label:nth-child(1) input:checked) .tab-panel:nth-child(1),
.tabs:has(.tab-bar > label:nth-child(2) input:checked) .tab-panel:nth-child(2),
.tabs:has(.tab-bar > label:nth-child(3) input:checked) .tab-panel:nth-child(3),
.tabs:has(.tab-bar > label:nth-child(4) input:checked) .tab-panel:nth-child(4),
.tabs:has(.tab-bar > label:nth-child(5) input:checked) .tab-panel:nth-child(5),
.tabs:has(.tab-bar > label:nth-child(6) input:checked) .tab-panel:nth-child(6) {
  display: block;
}
.tabs .tab-panel { padding: var(--space-3) 0; color: var(--muted); font-size: var(--t-sm);
}
.tabs[data-surface="flat"] {
  padding: var(--space-2); border-radius: var(--radius);
  background: var(--fill-plate);
  border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
}
.tabs[data-surface="flat"] .tab-bar > label:has(input:checked) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.tabs .tab-panels { contain: layout;
}
.tabs .tab-panels > .tab-panel {
  color: inherit; font-size: inherit; content-visibility: auto; contain-intrinsic-size: auto 8rem;
}
.pager { display: flex; align-items: center; gap: var(--space-2);
}
.pager-status { font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--muted);
}
.velvet-viewport {
  position: relative; width: 100%; max-width: 36rem;
  background: var(--fill-bg);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9;
}
.velvet-stage {
  position: relative;
  width: 100%;
  background: var(--stage-plate);
  border-radius: var(--radius);
  overflow: hidden;
}
.velvet-stage > video,
.velvet-stage > audio {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.velvet-stage[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--faint);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: vf-spin 0.9s linear infinite;
}
.velvet-viewport[data-ratio="1/1"] { aspect-ratio: 1 / 1;
}
.velvet-viewport[data-ratio="4/3"] { aspect-ratio: 4 / 3;
}
.velvet-viewport[data-ratio="3/2"] { aspect-ratio: 3 / 2;
}
.velvet-viewport[data-ratio="16/9"] { aspect-ratio: 16 / 9;
}
.velvet-viewport[data-ratio="2/1"] { aspect-ratio: 2 / 1;
}
.velvet-viewport[data-ratio="21/9"] { aspect-ratio: 21 / 9;
}
.velvet-viewport[data-ratio="fill"] {
  aspect-ratio: auto;
  max-width: none;
  width: 100%;
  height: 100%;
}
.ago { font-variant-numeric: tabular-nums;
}
.velvet-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.velvet-gpu {
  image-rendering: pixelated;
  contain: strict;
}
.popover {
  margin: auto;
  border-radius: var(--radius);
  color: var(--text);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}
.popover[data-surface="glass"] {
  padding: var(--space-4);
  border: 1px solid var(--border-accent);
  background: var(--plate);
  backdrop-filter: var(--float-blur); -webkit-backdrop-filter: var(--float-blur);
  box-shadow: var(--shadow-lg), var(--chip-ring), var(--float-glow);
}
:is([popover], .popover):not(:popover-open) { display: none !important; pointer-events: none !important; opacity: 0; transform: scale(0.96) translateY(-4px);
}
:is([popover], .popover):popover-open { display: flex !important; pointer-events: auto !important; opacity: 1; transform: translateY(0);
}
@starting-style {
  :is([popover], .popover):popover-open { opacity: 0; transform: scale(0.96) translateY(-4px); }
}
dialog.modal-overlay {
  border-radius: var(--radius);
  padding: 0;
  max-width: min(92vw, 38rem);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
}
dialog.modal-overlay[data-surface="glass"] {
  border: 1px solid var(--border-accent);
  background: var(--plate-soft);
  backdrop-filter: var(--float-blur-lg); -webkit-backdrop-filter: var(--float-blur-lg);
  box-shadow: var(--shadow-lg), var(--chip-ring);
}
dialog.modal-overlay::backdrop {
  background: var(--plate-scrim);
  backdrop-filter: var(--scrim-blur);
  -webkit-backdrop-filter: var(--scrim-blur);
  transition: opacity 0.22s var(--ease), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
}
dialog.modal-overlay:not([open]) {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
}
dialog.modal-overlay:not([open])::backdrop {
  opacity: 0;
}
@starting-style {
  dialog.modal-overlay[open] {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  dialog.modal-overlay[open]::backdrop {
    opacity: 0;
  }
}
.timeline {
  display: flex; flex-direction: column; position: relative;
  padding-inline-start: var(--space-5); gap: var(--space-4);
}
.timeline::before {
  content: ""; position: absolute; inset-block: var(--space-2); inset-inline-start: 7px; width: 2px;
}
.timeline[data-surface="flat"] {
  background: var(--fill-quiet); border: 0; box-shadow: none;
  border-radius: var(--radius); padding-block: var(--space-2); padding-inline-end: var(--space-2);
}
.timeline[data-surface="flat"]::before { background: var(--border-accent);
}
.timeline-item {
  position: relative; display: flex; flex-direction: column; gap: var(--space-1);
}
.timeline-dot {
  position: absolute; inset-inline-start: calc(var(--space-5) * -1 + 2px); top: 4px;
  width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--accent);
  border: 2px solid var(--bg-elev); box-shadow: var(--mark-ring);
}
.timeline-dot.ok { background: var(--ok);
}
.timeline-dot.warn { background: var(--warn);
}
.timeline-dot.danger { background: var(--danger);
}
.timeline-content { border-radius: var(--radius-sm);
}
.timeline-content[data-surface="flat"] {
  background: var(--fill-flat);
  border: 1px solid var(--border-accent);
  padding: var(--space-3); box-shadow: var(--shadow-sm);
}
.timeline-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.timeline-title { font-weight: 650; font-size: var(--t-sm);
}
.timeline-time { font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums;
}
.toast-wrap, .toast-hud {
  position: fixed; bottom: var(--space-4); inset-inline-end: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  z-index: var(--z-toast); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-3);
  border-radius: var(--radius); font-size: var(--t-sm); min-width: 18rem; max-width: 28rem;
  animation: toast-in 0.24s var(--ease-spring);
}
.toast[data-surface="elevated"] {
  padding: var(--space-3) var(--space-4); background: var(--fill-elev);
  border: 1px solid var(--border-accent); box-shadow: var(--shadow-lg), var(--chip-ring);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-icon { display: inline-flex; align-items: center; color: var(--accent);
}
.toast-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(90deg, var(--accent), var(--accent-mid)); box-shadow: var(--progress-glow-sm);
}
.notif-panel {
  width: 24rem; max-height: 28rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.notif-panel[data-surface="elevated"] {
  background: var(--fill-elev);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius); box-shadow: var(--shadow-md), var(--chip-ring);
}
.notif-item {
  display: flex; gap: var(--space-3); padding: var(--space-3);
  border-block-end: 1px solid var(--hairline-accent); transition: background var(--dur-fast);
}
.notif-panel[data-surface="elevated"] .notif-item:hover { background: var(--fill-hover);
}
.notif-panel[data-surface="elevated"] .notif-item.unread,
.notif-panel[data-surface="elevated"] .notif-unread { background: var(--accent-soft);
}
.active { font-weight: inherit;
}
.done { font-weight: inherit;
}
.ok { color: var(--ok);
}
.warn { color: var(--warn);
}
.cmd-palette, dialog.cmd-palette {
  width: min(92vw, 36rem); border-radius: var(--radius); padding: 0; overflow: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
}
.cmd-palette[data-surface="glass"], dialog.cmd-palette[data-surface="glass"] {
  border: 1px solid var(--border-accent);
  background: var(--plate-quiet);
  backdrop-filter: var(--float-blur-lg); -webkit-backdrop-filter: var(--float-blur-lg);
  box-shadow: var(--shadow-lg), var(--chip-ring), var(--float-glow-lg);
}
.cmd-palette:not([open]):not(:popover-open), dialog.cmd-palette:not([open]) {
  opacity: 0; transform: scale(0.96) translateY(-8px);
}
@starting-style {
  .cmd-palette[open], .cmd-palette:popover-open, dialog.cmd-palette[open] {
    opacity: 0; transform: scale(0.96) translateY(-8px);
  }
}
.cmd-input-wrap {
  display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border-accent);
}
.cmd-palette[data-surface="glass"] .cmd-input-wrap,
dialog.cmd-palette[data-surface="glass"] .cmd-input-wrap { background: var(--fill-sunken);
}
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--t-md);
  color: var(--text);
}
.cmd-list {
  max-height: 22rem; overflow-y: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: 2px;
}
.cmd-group {
  padding: var(--space-1) var(--space-2);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cmd-item {
  display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--t-sm); color: var(--text); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cmd-palette[data-surface="glass"] .cmd-item:hover,
.cmd-palette[data-surface="glass"] .cmd-item.selected,
dialog.cmd-palette[data-surface="glass"] .cmd-item:hover,
dialog.cmd-palette[data-surface="glass"] .cmd-item.selected {
  background: var(--accent); color: var(--accent-ink);
}
.cmd-badge {
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.notif-flyout {
  width: 22rem;
  max-height: 26rem;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
section.panel + section.panel { margin-block-start: var(--space-2);
}
#work { line-height: 1.55;
}
#work p { max-width: 68ch;
}
form.act-form:has(> button.list-row) {
  display: block;
  margin: 0;
}
button.list-row {
  width: 100%;
  margin: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-accent);
  min-width: 0;
}
:is(.directory[data-surface="flat"], .panel[data-surface]) button.list-row:hover { background: var(--fill-hover);
}
button.list-row[data-current] { color: var(--accent);
}
:is(.directory[data-surface="flat"], .panel[data-surface]) button.list-row[data-current] .list-row-text strong::after {
  content: "";
  display: inline-block;
  width: 0.35rem; height: 0.35rem;
  margin-inline-start: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.list-row .avatar[data-surface="flat"] {
  background: hsl(var(--av-h, 220) 38% 42%);
  color: var(--bg-elev);
}
[data-grid] td[data-heat] {
  background: var(--heat-ok);
  --heat: 0;
}
[data-grid] td[data-heat="1.00"] { --heat: 1;
}
[data-grid] td[data-heat="0.90"] { --heat: 1;
}
[data-grid] td[data-heat="0.80"] { --heat: 0.89;
}
[data-grid] td[data-heat="0.70"] { --heat: 0.78;
}
[data-grid] td[data-heat="0.60"] { --heat: 0.67;
}
[data-grid] td[data-heat="0.50"] { --heat: 0.56;
}
[data-grid] td[data-heat="0.40"] { --heat: 0.44;
}
[data-grid] td[data-heat="0.30"] { --heat: 0.33;
}
[data-grid] td[data-heat="0.20"] { --heat: 0.22;
}
[data-grid] td[data-heat="0.10"] { --heat: 0.11;
}
[data-grid] td[data-heat="0.00"] { --heat: 0;
}
[data-grid] td[data-dir="dn"] {
  background: var(--heat-dn);
}
[data-grid] th[data-sort] { cursor: pointer; user-select: none;
}
[data-grid] tr[data-cursor="1"] {
  outline: 1px solid var(--accent-fade);
  outline-offset: -1px;
}
[data-grid] [data-ago] { color: var(--muted);
}
@container (max-width: 28rem) {[data-grid] [data-prio="3"], [data-grid] [data-prio="4"] { display: none;
}
}
@container (max-width: 20rem) {[data-grid] [data-prio="2"] { display: none;
}
}}
@layer flow {
.flow {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--flow-gap, var(--space-3));
}
.flow[data-container] {
  container-type: inline-size;
}
.flow[data-flow="col"],
.flow[data-flow="stack"] { flex-direction: column;
}
.flow[data-flow="row"] {
  flex-direction: row;
  align-items: center;
}
.flow[data-flow="wrap"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.flow[data-flow="center"] {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.flow[data-flow="between"] {
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.flow[data-flow="split"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.flow[data-flow="split"][data-ratio="1-2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.flow[data-flow="split"][data-ratio="2-1"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.flow[data-flow="split"][data-ratio="1-3"] { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}
.flow[data-flow="split"][data-ratio="3-1"] { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.flow[data-flow="split"][data-ratio="1-4"] { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
}
.flow[data-flow="split"][data-ratio="4-1"] { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
}
.flow[data-flow="split"][data-ratio="golden"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
}
.flow[data-flow="sidebar"] {
  display: grid;
  grid-template-columns: minmax(var(--side-min, 16rem), 22rem) minmax(0, 1fr);
  align-items: stretch;
}
.flow[data-flow="sidebar"][data-side="end"] {
  grid-template-columns: minmax(0, 1fr) minmax(var(--side-min, 16rem), 22rem);
}
.flow[data-flow="deck"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--flow-min, 14rem), 1fr));
  align-items: start;
}
.flow[data-flow="dock"] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1 1 auto;
}
.flow[data-flow="shell"] {
  display: grid;
  grid-template-columns: 4.5rem minmax(14rem, 16.5rem) minmax(0, 1fr) minmax(12rem, 15rem);
  align-items: stretch;
  min-height: 0;
  height: 100%;
  gap: 0;
}
.flow[data-flow="board"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.flow[data-flow="grid"] { display: grid; grid-template-columns: repeat(var(--flow-cols, 12), minmax(0, 1fr)); align-items: start;
}
.flow[data-flow="grid"] > :is([data-grid], .panel) { align-self: stretch;
}
.flow[data-flow="grid"] > [data-grid] { display: grid;
}
.flow[data-flow="grid"][style*="--grid-min"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 12rem), 1fr));
}
.flow[data-cols="1"] { --flow-cols: 1;
}
.flow[data-cols="2"] { --flow-cols: 2;
}
.flow[data-cols="3"] { --flow-cols: 3;
}
.flow[data-cols="4"] { --flow-cols: 4;
}
.flow[data-cols="5"] { --flow-cols: 5;
}
.flow[data-cols="6"] { --flow-cols: 6;
}
.flow[data-cols="7"] { --flow-cols: 7;
}
.flow[data-cols="8"] { --flow-cols: 8;
}
.flow[data-cols="9"] { --flow-cols: 9;
}
.flow[data-cols="10"] { --flow-cols: 10;
}
.flow[data-cols="11"] { --flow-cols: 11;
}
.flow[data-cols="12"] { --flow-cols: 12;
}
.flow[data-cols="16"] { --flow-cols: 16;
}
.flow[data-cols="24"] { --flow-cols: 24;
}
.flow[data-cols] { --fc: var(--flow-cols);
}
.flow[data-flow="bento"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--flow-min, 16rem)), 1fr));
  grid-auto-flow: dense;
  align-items: stretch;
}
.flow[data-flow="bento"] > [data-span="2"] { grid-column: span 2;
}
.flow[data-flow="bento"] > [data-span="3"] { grid-column: span 3;
}
.flow[data-flow="bento"] > [data-span="4"] { grid-column: span 4;
}
.flow[data-flow="bento"] > [data-row-span="2"] { grid-row: span 2;
}
.flow[data-flow="bento"] > [data-row-span="3"] { grid-row: span 3;
}
.flow[data-flow="bento"][data-cols],
.flow[data-flow="masonry"][data-cols] {
  grid-template-columns: repeat(var(--flow-cols), minmax(0, 1fr));
}
.flow[data-flow="subgrid"],
.flow > [data-subgrid="col"],
.flow > [data-flow="subgrid"] {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: var(--subgrid-span, 1 / -1);
}
.flow > [data-subgrid="row"] {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: var(--subgrid-row-span, 1 / -1);
}
.flow > [data-subgrid="both"] {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: var(--subgrid-span, 1 / -1);
  grid-row: var(--subgrid-row-span, 1 / -1);
}
.flow[data-flow="masonry"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--flow-min, 14rem)), 1fr));
}
@supports (grid-template-rows: masonry) {.flow[data-flow="masonry"] { grid-template-rows: masonry;
}
}
@container (max-width: 40rem) {
  .flow[data-collapse="col"] {
    display: flex;
    flex-direction: column;
  }
  .flow[data-collapse="col"] > * {
    width: auto;
    min-width: 0;
  }
}
.flow[data-flow="timeline"] {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-inline-start: var(--space-5);
}
.flow[data-flow="timeline"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.35rem;
  width: 2px;
}
.flow[data-flow="timeline"][data-surface="flat"] { background: var(--fill-quiet); border: 0; box-shadow: none; border-radius: var(--radius); padding-inline: var(--space-2);
}
.flow[data-flow="timeline"][data-surface="flat"]::before { background: var(--accent-soft);
}
.flow[data-gap="0"] { --flow-gap: 0px;
}
.flow[data-gap="1"] { --flow-gap: var(--space-1);
}
.flow[data-gap="2"] { --flow-gap: var(--space-2);
}
.flow[data-gap="3"] { --flow-gap: var(--space-3);
}
.flow[data-gap="4"] { --flow-gap: var(--space-4);
}
.flow[data-gap="5"] { --flow-gap: var(--space-5);
}
.flow[data-gap="6"] { --flow-gap: var(--space-6);
}
.flow[data-align="start"] { align-items: start;
}
.flow[data-align="center"] { align-items: center;
}
.flow[data-align="end"] { align-items: end;
}
.flow[data-align="stretch"] { align-items: stretch;
}
.flow[data-align="baseline"] { align-items: baseline;
}
.flow[data-justify="start"] { justify-content: start;
}
.flow[data-justify="center"] { justify-content: center;
}
.flow[data-justify="end"] { justify-content: end;
}
.flow[data-justify="between"] { justify-content: space-between;
}
.flow[data-justify="around"] { justify-content: space-around;
}
.flow[data-justify="evenly"] { justify-content: space-evenly;
}
.flow > [data-fill],
.flow > [data-width="fill"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.flow > [data-width="hug"] {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
}
.flow > [data-span="1"] { grid-column: span 1 / span 1;
}
.flow > [data-span="2"] { grid-column: span 2 / span 2;
}
.flow > [data-span="3"] { grid-column: span 3 / span 3;
}
.flow > [data-span="4"] { grid-column: span 4 / span 4;
}
.flow > [data-span="5"] { grid-column: span 5 / span 5;
}
.flow > [data-span="6"] { grid-column: span 6 / span 6;
}
.flow > [data-span="7"] { grid-column: span 7 / span 7;
}
.flow > [data-span="8"] { grid-column: span 8 / span 8;
}
.flow > [data-span="9"] { grid-column: span 9 / span 9;
}
.flow > [data-span="10"] { grid-column: span 10 / span 10;
}
.flow > [data-span="11"] { grid-column: span 11 / span 11;
}
.flow > [data-span="12"],
.flow > [data-span="full"] { grid-column: 1 / -1;
}
.flow > [data-row-span="1"] { grid-row: span 1 / span 1;
}
.flow > [data-row-span="2"] { grid-row: span 2 / span 2;
}
.flow > [data-row-span="3"] { grid-row: span 3 / span 3;
}
.flow > [data-row-span="4"] { grid-row: span 4 / span 4;
}
.flow > [data-row-span="full"] { grid-row: 1 / -1;
}
.flow > [data-bento="hero"] { grid-column: span 2 / span 2; grid-row: span 2 / span 2;
}
.flow > [data-bento="wide"] { grid-column: span 2 / span 2;
}
.flow > [data-bento="tall"] { grid-row: span 2 / span 2;
}
.flow > [data-bento="stat"] { grid-column: span 1 / span 1; grid-row: span 1 / span 1;
}
.flow > [data-order="first"] { order: -1;
}
.flow > [data-order="last"] { order: 99;
}
.flow > [data-order="1"] { order: 1;
}
.flow > [data-order="2"] { order: 2;
}
.flow > [data-order="3"] { order: 3;
}
.flow > [data-order="4"] { order: 4;
}
.flow > [data-order="5"] { order: 5;
}
.flow > [data-order="6"] { order: 6;
}
[data-ratio="1/1"], [data-ratio="1-1"], [data-ratio="square"] { aspect-ratio: 1 / 1;
}
[data-ratio="16/9"], [data-ratio="16-9"], [data-ratio="video"] { aspect-ratio: 16 / 9;
}
[data-ratio="4/3"], [data-ratio="4-3"] { aspect-ratio: 4 / 3;
}
[data-ratio="3/2"], [data-ratio="3-2"] { aspect-ratio: 3 / 2;
}
[data-ratio="21/9"], [data-ratio="21-9"], [data-ratio="ultrawide"] { aspect-ratio: 21 / 9;
}
[data-ratio="9/16"], [data-ratio="9-16"], [data-ratio="portrait"] { aspect-ratio: 9 / 16;
}
[data-ratio="golden"] { aspect-ratio: 1.618 / 1;
}
[data-ratio] > img,
[data-ratio] > video,
[data-ratio] > canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@container work (max-width: 40rem) {.flow[data-flow="split"], .flow[data-flow="sidebar"],
  .flow[data-flow="sidebar"][data-side="end"],
  .flow[data-flow="board"], .flow[data-flow="bento"] { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="bento"] > [data-bento="hero"],
  .flow[data-flow="bento"] > [data-span],
  .flow[data-flow="bento"] > [data-bento="wide"] { grid-column: 1 / -1;
}
}
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .flow[data-flow="split"],
    .flow[data-flow="sidebar"],
    .flow[data-flow="sidebar"][data-side="end"],
    .flow[data-flow="board"] { grid-template-columns: minmax(0, 1fr); }
  }
}
.flow[data-flow="floor"] {
  display: grid;
  align-items: stretch;
  align-content: stretch;
  min-height: 0;
  height: 100%;
}
.flow[data-flow="floor"] > [data-grid] {
  grid-column: calc(var(--gc, 0) + 1) / span var(--gx, 1);
  grid-row: calc(var(--gr, 0) + 1) / span var(--gy, 1);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flow[data-flow="floor"][data-supergrid] > [data-dnd-item]:not([data-grid]) {
  grid-column: auto;
  grid-row: auto;
}
.flow[data-flow="floor"] > [data-area],
.flow[data-flow="floor"] > [data-zone],
.flow[data-flow="floor"] > [data-dnd-zone] {
  min-width: 0;
  min-height: var(--row-h);
}
.flow[data-flow="floor"][data-surface="sunken"] > [data-area],
.flow[data-flow="floor"][data-surface="sunken"] > [data-zone],
.flow[data-flow="floor"][data-surface="sunken"] > [data-dnd-zone] {
  border: 1.5px dashed var(--edge-accent); border-radius: var(--radius);
  background: var(--fill-elev);
}
.flow[data-flow="floor"][data-surface="sunken"] > [data-dnd-zone].dnd-over {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--chip-ring);
}
.flow[data-flow="floor"] [data-theme="light"] { color-scheme: light;
}
.flow[data-flow="floor"] [data-theme="dark"] { color-scheme: dark;
}
@container work (max-width: 48rem) {.flow > [data-span-sm="full"],
  .flow > [data-span-sm="12"] { grid-column: 1 / -1;
}
.flow > [data-span-sm="6"] { grid-column: span 6 / span 6;
}
.flow > [data-span-sm="4"] { grid-column: span 4 / span 4;
}
.flow > [data-span-sm="3"] { grid-column: span 3 / span 3;
}
}
@container work (max-width: 64rem) {.flow > [data-span-md="full"] { grid-column: 1 / -1;
}
.flow > [data-span-md="8"] { grid-column: span 8 / span 8;
}
.flow > [data-span-md="6"] { grid-column: span 6 / span 6;
}
.flow > [data-span-md="4"] { grid-column: span 4 / span 4;
}
}
@container work (max-width: 32rem) {.flow[data-flow="grid"]:not([data-cols="1"]) { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="grid"] > [data-span] { grid-column: 1 / -1;
}
.flow[data-flow="grid"] > [data-grid] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}
.flow[data-flow="floor"]:not([data-cols="1"]):not([data-supergrid]) { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="floor"]:not([data-supergrid]) > [data-span] { grid-column: 1 / -1;
}
.flow[data-flow="split"],
  .flow[data-flow="sidebar"] { grid-template-columns: minmax(0, 1fr);
}
}
@supports not (container-type: inline-size) {@media (max-width: 600px) {.flow[data-flow="grid"]:not([data-cols="1"]) { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="grid"] > [data-span] { grid-column: 1 / -1;
}
.flow[data-flow="grid"] > [data-grid] {
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
}
.flow[data-flow="floor"]:not([data-cols="1"]):not([data-supergrid]) { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="floor"]:not([data-supergrid]) > [data-span] { grid-column: 1 / -1;
}
.flow[data-flow="split"],
    .flow[data-flow="sidebar"] { grid-template-columns: minmax(0, 1fr);
}
}
}
.tile-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.5rem;
  cursor: grab;
  font: inherit;
  color: var(--muted, inherit);
}
svg.canvas {
  display: block;
  width: 100%;
  height: min(22rem, 46vh);
  border-radius: var(--radius, 0.5rem);
  touch-action: none;
}
svg.canvas[data-surface="sunken"] { background: var(--fill-elev); border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
svg.canvas .stroke {
  fill: none;
  stroke: var(--intent, var(--accent, currentColor));
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.canvas .stroke-live {
  opacity: 0.55;
  pointer-events: none;
}
.flow[data-flow="floor"] > [data-dnd-item],
#ws-float > [data-float] {
  transition: opacity 0.35s ease, scale 0.35s ease;
}
@starting-style {
  .flow[data-flow="floor"] > [data-dnd-item],
  #ws-float > [data-float] {
    opacity: 0;
    scale: 0.96;
  }
}
.flow[data-flow="wrap"] > .flow[data-flow="col"] { flex: 1 1 0%; min-width: 0;
}
.workspace[data-pack="desk"] > [data-area] { min-height: 0; min-width: 0; overflow: hidden;
}
#dnd-ghost {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  border: 2px solid var(--accent);
  background: var(--wash-drop);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow-soft), var(--chip-ring);
}
#dnd-ghost[data-overlap] {
  border-color: var(--warn);
  background: var(--wash-warn);
  border-style: dashed;
}
#dnd-ghost[hidden] { display: none;
}
html.dnd-live [data-dnd-zone] {
  outline: 1px dashed var(--outline-accent-dash);
}
.tile-bar::after {
  content: "⠿";
  opacity: 0;
  transition: opacity 0.15s ease;
}
[data-dnd-item]:hover .tile-bar::after { opacity: 0.55;
}
[data-dnd-item]:active .tile-bar { cursor: grabbing;
}
.flow[data-flow="floor"] > *:not([data-grid]) {
  grid-column: 1 / -1;
  width: 100%;
}
.flow[data-flow="floor"]:not([data-supergrid]) > *:not([data-grid]):not([data-dnd-item]) {
  width: 100%;
}
.flow[data-flow="floor"][data-supergrid] > *:not([data-grid]):not([data-dnd-item]):not([data-span]) {
  width: 100%;
}
.flow[data-flow="floor"][data-supergrid] > [data-dnd-item][data-span]:not([data-grid]) {
  grid-column: 1 / -1;
}
[data-dnd-item] { view-transition-name: var(--vt, none);
}
@property --fc {
  syntax: "<integer>";
  inherits: true;
  initial-value: 12;
}
@property --fr {
  syntax: "<integer>";
  inherits: true;
  initial-value: 8;
}
.flow[data-flow="floor"] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="8"] { grid-template-columns: repeat(8, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="12"] { grid-template-columns: repeat(12, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="16"] { grid-template-columns: repeat(16, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="24"] { grid-template-columns: repeat(24, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="2"] { grid-template-rows: repeat(2, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="4"] { grid-template-rows: repeat(4, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="6"] { grid-template-rows: repeat(6, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="8"] { grid-template-rows: repeat(8, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="12"] { grid-template-rows: repeat(12, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="16"] { grid-template-rows: repeat(16, minmax(0, 1fr));
}
.workspace[data-fc="6"] { --fc: 6;
}
.workspace[data-fc="12"] { --fc: 12;
}
.workspace[data-fc="24"] { --fc: 24;
}
.workspace[data-fr="4"] { --fr: 4;
}
.workspace[data-fr="8"] { --fr: 8;
}
.workspace[data-fr="16"] { --fr: 16;
}
.workspace[data-pack="desk"] {
  display: grid;
  contain: none;
  gap: 0;
  width: 100%;
  flex: 1 1 0;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-flow="on"][data-main="off"][data-stack="off"][data-dock="off"] {
  grid-template-columns:
    minmax(13rem, min(var(--side-w, 18rem), 30rem))
    minmax(0, 1fr)
    minmax(12rem, min(var(--end-w, 16rem), 24rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "side flow end"
    "side foot end";
}
.workspace[data-pack="desk"][data-foot="off"] {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "top top top"
    "side flow end";
}
.workspace[data-pack="desk"]:not(:has(> [data-area="side"] [data-dnd-item])):not(:has(> [data-area="end"] [data-dnd-item])) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "top"
    "flow"
    "foot";
}
.workspace[data-pack="desk"]:not(:has(> [data-area="side"] [data-dnd-item])):has(> [data-area="end"] [data-dnd-item]) {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, min(var(--end-w, 16rem), 24rem));
  grid-template-areas:
    "top top"
    "flow end"
    "foot end";
}
.workspace[data-pack="desk"]:has(> [data-area="side"] [data-dnd-item]):not(:has(> [data-area="end"] [data-dnd-item])) {
  grid-template-columns: minmax(13rem, min(var(--side-w, 18rem), 30rem)) minmax(0, 1fr);
  grid-template-areas:
    "top top"
    "side flow"
    "side foot";
}
.workspace[data-pack="desk"] > [data-area="side"]:not(:has([data-dnd-item])),
.workspace[data-pack="desk"] > [data-area="end"]:not(:has([data-dnd-item])),
.workspace[data-pack="desk"] > [data-area="foot"]:not(:has([data-dnd-item])) {
  display: none;
}
.flow[data-at-narrow="hide"] { @container (max-width: 40rem) { display: none; }
}
[data-island][data-defer="1"] { min-height: 2.5rem;
}}
@layer icons {
:root {
  --ico-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --ico-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ico-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='4' y1='21' y2='14'/%3E%3Cline x1='4' x2='4' y1='10' y2='3'/%3E%3Cline x1='12' x2='12' y1='21' y2='12'/%3E%3Cline x1='12' x2='12' y1='8' y2='3'/%3E%3Cline x1='20' x2='20' y1='21' y2='16'/%3E%3Cline x1='20' x2='20' y1='12' y2='3'/%3E%3Cline x1='2' x2='6' y1='14' y2='14'/%3E%3Cline x1='10' x2='14' y1='8' y2='8'/%3E%3Cline x1='18' x2='22' y1='16' y2='16'/%3E%3C/svg%3E");
  --ico-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ico-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  --ico-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E");
  --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  --ico-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
  --ico-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.8l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
  --ico-bar-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='20' y2='10'/%3E%3Cline x1='18' x2='18' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='16'/%3E%3C/svg%3E");
  --ico-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  --ico-credit-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E");
  --ico-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='currentColor'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E");
  --ico-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  --ico-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  --ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --ico-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.6a2 2 0 0 0 1.5 1.5L21 12l-5.6 1.9a2 2 0 0 0-1.5 1.5L12 21l-1.9-5.6a2 2 0 0 0-1.5-1.5L3 12l5.6-1.9a2 2 0 0 0 1.5-1.5z'/%3E%3Cpath d='M19 3v4'/%3E%3Cpath d='M21 5h-4'/%3E%3Cpath d='M5 17v2'/%3E%3Cpath d='M6 18H4'/%3E%3C/svg%3E");
}
.icon {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  vertical-align: middle;
}
.icon-sm { width: 16px; height: 16px; -webkit-mask-size: 16px; mask-size: 16px;
}
.icon-md { width: 20px; height: 20px; -webkit-mask-size: 20px; mask-size: 20px;
}
@keyframes icon-spin { to { transform: rotate(360deg); }
}
.icon-chevron-left { -webkit-mask-image: var(--ico-chevron-left); mask-image: var(--ico-chevron-left);
}
.icon-x { -webkit-mask-image: var(--ico-x); mask-image: var(--ico-x);
}
.icon-map-pin { -webkit-mask-image: var(--ico-map-pin); mask-image: var(--ico-map-pin);
}
.icon-settings { -webkit-mask-image: var(--ico-settings); mask-image: var(--ico-settings);
}
.icon-info { -webkit-mask-image: var(--ico-info); mask-image: var(--ico-info);
}
.icon-moon { -webkit-mask-image: var(--ico-moon); mask-image: var(--ico-moon);
}
.icon-file-text { -webkit-mask-image: var(--ico-file-text); mask-image: var(--ico-file-text);
}
.icon-home { -webkit-mask-image: var(--ico-home); mask-image: var(--ico-home);
}
.icon-zap { -webkit-mask-image: var(--ico-zap); mask-image: var(--ico-zap);
}
.icon-paperclip { -webkit-mask-image: var(--ico-paperclip); mask-image: var(--ico-paperclip);
}
.icon-bar-chart { -webkit-mask-image: var(--ico-bar-chart); mask-image: var(--ico-bar-chart);
}
.icon-rocket { -webkit-mask-image: var(--ico-rocket); mask-image: var(--ico-rocket);
}
.icon-lock { -webkit-mask-image: var(--ico-lock); mask-image: var(--ico-lock);
}
.icon-shield { -webkit-mask-image: var(--ico-shield); mask-image: var(--ico-shield);
}
.icon-credit-card { -webkit-mask-image: var(--ico-credit-card); mask-image: var(--ico-credit-card);
}
.icon-palette { -webkit-mask-image: var(--ico-palette); mask-image: var(--ico-palette);
}
.icon-inbox { -webkit-mask-image: var(--ico-inbox); mask-image: var(--ico-inbox);
}
.icon-dot { -webkit-mask-image: var(--ico-dot); mask-image: var(--ico-dot);
}
.icon-users { -webkit-mask-image: var(--ico-users); mask-image: var(--ico-users);
}
.icon-sparkles { -webkit-mask-image: var(--ico-sparkles); mask-image: var(--ico-sparkles);
}
.icon-layers { -webkit-mask-image: var(--ico-sliders); mask-image: var(--ico-sliders);
}}
@layer a11y {
@media (prefers-contrast: more) {
  :root {
    --text: light-dark(#0c0a08, #fffdf8);
    --muted: light-dark(#3f3a32, #d2ccc2);
    --border: light-dark(#8a8378, #8b9bb0);
    --border-strong: light-dark(#5c564c, #b4c2d4);
    --accent: light-dark(#0a5c56, #5ff0d4);
  }
  .btn, .btn-primary, .btn-ghost, .btn-danger, .panel[data-surface], .input, .select, .textarea {
    border-width: 2px;
  }
}
@media (forced-colors: active) {.btn-primary,
.btn-ghost,
.btn-danger,
.ps-pill,
.rail-item,
.panel[data-surface],
.card[data-surface],
.mast-aside[data-surface="elevated"],
.recipe[data-surface="flat"],
.band[data-surface="flat"],
.sheet[data-surface="elevated"],
.toast[data-surface="elevated"],
.cmd-palette[data-surface="glass"],
.live-meter[data-surface="flat"] [data-island],
.cmd-card[data-surface="elevated"],
.sig-toast[data-surface="elevated"],
.directory[data-surface="flat"],
.value-card[data-surface="flat"],
.site-foot[data-surface="flat"],
.surface[data-surface="flat"],
.elev-surface[data-surface="glass"],
.defer-panel[data-surface="glass"],
.filter-bar[data-surface="sunken"],
.command-bar[data-surface="glass"],
.toolbar[data-surface="glass"],
.notice-bar[data-surface="sunken"],
.auth-shell[data-surface="elevated"],
.mast[data-surface="elevated"],
.hero-mast[data-surface="elevated"] .mast,
.empty-cta[data-surface="sunken"],
.step-rail[data-surface="sunken"],
.promo-band[data-surface="elevated"],
.action-card[data-surface="flat"],
.media-tile[data-surface="elevated"],
.link-tile[data-surface="flat"],
.pricing-tier[data-surface="elevated"],
.chip-row[data-surface="sunken"],
.logo-strip[data-surface="flat"],
.theme-strip[data-surface="flat"],
.style-strip[data-surface="flat"],
.callout[data-surface="sunken"],
.banner[data-surface="sunken"],
.data-grid[data-surface="sunken"],
.cal[data-surface="flat"],
.bulk[data-surface="elevated"],
.thread[data-surface="sunken"],
.tline[data-surface="flat"],
.code-block[data-surface="sunken"],
.drop[data-surface="sunken"],
.frame[data-surface="sunken"],
.shelf[data-surface="elevated"],
.empty[data-surface="sunken"],
.empty-rich[data-surface="sunken"],
.topbar-jump[data-surface="sunken"],
.topbar[data-surface="glass"],
.rail[data-surface="glass"],
.vf-inspect[data-surface="elevated"],
.tools[data-surface="elevated"],
.status[data-surface="elevated"],
.timeline-content[data-surface="flat"],
#desk-hold[data-surface="elevated"],
#ws-float [data-float][data-surface="elevated"],
#ws-float [data-float][data-surface="flat"],
.workspace[data-surface="flat"],
.flow[data-flow="floor"][data-surface="sunken"],
.suggest-menu[data-surface="glass"],
.notif-panel[data-surface="elevated"],
.tag-input[data-surface="sunken"],
.seg-switch[data-surface="sunken"],
.multi-select[data-surface="sunken"],
.date-range[data-surface="flat"],
.input[data-surface="sunken"],
.select[data-surface="sunken"],
.textarea[data-surface="sunken"],
.meter[data-surface="sunken"],
.tag[data-surface="flat"],
.kbd[data-surface="flat"],
.avatar[data-surface="flat"],
.avatar-chip[data-surface="flat"],
.table-wrap[data-surface="flat"],
.tip[data-surface="elevated"],
iframe.vf-embed[data-surface="sunken"],
svg.canvas[data-surface="sunken"],
.kpi-strip[data-surface="sunken"],
.feed-list[data-surface="sunken"],
.metric[data-surface="flat"],
.timeline[data-surface="flat"],
.flow[data-flow="timeline"][data-surface="flat"],
.plan-board[data-surface="flat"],
.list-desk[data-surface="flat"],
.ops-desk[data-surface="flat"],
.dash-shell[data-surface="flat"],
.launch-pad[data-surface="flat"],
.settings-shell[data-surface="flat"],
.doc-shell[data-surface="flat"],
.guide-shell[data-surface="flat"],
.page-hero[data-surface="flat"],
.site-page[data-surface="flat"],
.status-dock[data-surface="glass"],
.trust-band[data-surface="flat"],
.pricing-board[data-surface="elevated"],
.faq-list[data-surface="sunken"],
.feature-band[data-surface="flat"],
.stat-band[data-surface="sunken"],
.process-band[data-surface="elevated"],
.quote-board[data-surface="sunken"] {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
}
.btn-primary { background: Highlight; color: HighlightText;
}
.icon {
    forced-color-adjust: none;
    background-color: ButtonText;
}
.rail-item.active { outline: 2px solid Highlight;
}
.meter-fill { forced-color-adjust: none;
}
}
@media (prefers-reduced-transparency: reduce) {:root {
    --chrome: light-dark(#fffdf9, #0c1118);
    --scrim: light-dark(rgb(15 23 42 / 0.72), rgb(0 0 0 / 0.82));
    --focus-halo: none;
 --intent-halo: none;
 --mark-ring: 0 0 0 2px var(--border-accent);
 --control-ring: 0 0 0 3px var(--border-accent);
 --spinner-track: var(--border-accent);
 --intent-inset: inset 0 0 0 1px var(--border-accent);
 --track-inset: inset 0 0 0 1px var(--border);
 --meter-sheen: transparent;
 --heat-ok: var(--ok-soft, var(--accent-soft));
 --heat-dn: var(--danger-soft, var(--accent-soft));
 --progress-glow: none;
 --progress-glow-sm: none;
 --float-glow: none;
 --float-glow-lg: none;
 --sticky-edge: var(--shadow-sm);
}
.topbar[data-surface="glass"],
.rail[data-surface="glass"],
.elev-surface[data-surface="glass"],
.defer-panel[data-surface="glass"],
.popover[data-surface="glass"],
dialog.modal-overlay[data-surface="glass"],
.suggest-menu[data-surface="glass"],
.cmd-palette[data-surface="glass"],
.command-bar[data-surface="glass"],
.toolbar[data-surface="glass"],
.status-dock[data-surface="glass"],
.hero-mast[data-surface="elevated"] .mast,
.auth-shell[data-surface="elevated"],
.step-rail[data-surface="sunken"],
.kpi-strip[data-surface="sunken"],
.list-desk .directory[data-surface="flat"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.topbar[data-surface="glass"],
.rail[data-surface="glass"] {
    background: var(--chrome); border-color: var(--border-accent);
}
.elev-surface[data-surface="glass"], .defer-panel[data-surface="glass"],
  .popover[data-surface="glass"], dialog.modal-overlay[data-surface="glass"],
  .suggest-menu[data-surface="glass"], .cmd-palette[data-surface="glass"],
  .hero-mast[data-surface="elevated"] .mast,
  .auth-shell[data-surface="elevated"], .step-rail[data-surface="sunken"],
  .list-desk .directory[data-surface="flat"] { background: var(--card); border-color: var(--border-accent);
}
.command-bar[data-surface="glass"], .toolbar[data-surface="glass"],
  .status-dock[data-surface="glass"],
  .filter-bar[data-surface="sunken"], .kpi-strip[data-surface="sunken"] {
    background: var(--bg-soft); border-color: var(--border-accent);
}
}
@media (prefers-reduced-motion: reduce) {.presence-stack .avatar:hover { transform: none;
}
.surface[data-surface="flat"], .media-tile[data-surface="elevated"],
  .link-tile[data-surface="flat"], .elev-surface[data-surface="glass"],
  .defer-panel[data-surface="glass"],
  .action-card[data-surface="flat"], .pricing-tier[data-surface="elevated"],
  .value-card[data-surface="flat"] {
    transition: none !important;
}
.surface[data-surface="flat"]:hover,
.media-tile[data-surface="elevated"]:hover,
.link-tile[data-surface="flat"]:hover,
.elev-surface[data-surface="glass"]:hover,
.defer-panel[data-surface="glass"]:hover,
.value-card[data-surface="flat"]:hover,
.action-card[data-surface="flat"]:hover,
.metric[data-surface="flat"]:hover { transform: none !important;
}
}
@media (prefers-reduced-data: reduce) {body {
    background: var(--bg);
}
.mast[data-surface="elevated"]::before,
  .hero-mast[data-surface="elevated"] .mast[data-surface="elevated"]::before { display: none;
}
.auth-shell[data-surface="elevated"], .step-rail[data-surface="sunken"],
  .kpi-strip[data-surface="sunken"], .list-desk .directory[data-surface="flat"] {
    background: var(--card);
}
}
[data-vf-panic] {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9999;
  margin: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  background: #b3261e;
  color: #fff;
  font: 12px/1.5 system-ui, sans-serif;
  word-break: break-word;
}
@media print {.skip-link, .topbar, .rail, .tools, .status, .sig-tray, .modal-overlay, #appLoader {
    display: none !important;
}
html, body { height: auto; overflow: visible;
}
.shell { display: block; height: auto; overflow: visible;
}
.content, .work { overflow: visible !important; height: auto !important;
}
.list-desk .directory[data-surface="flat"] .data-table thead th { position: static;
}
.toolbar { position: static;
}
.surface[data-surface="flat"], .media-tile[data-surface="elevated"],
  .link-tile[data-surface="flat"], .elev-surface[data-surface="glass"],
  .defer-panel[data-surface="glass"],
  .auth-shell[data-surface="elevated"], .step-rail[data-surface="sunken"],
  .hero-mast[data-surface="elevated"] .mast,
  .action-card[data-surface="flat"], .directory[data-surface="flat"],
  .value-card[data-surface="flat"], .site-foot[data-surface="flat"],
  .kpi-strip[data-surface="sunken"],
  .toolbar[data-surface="glass"], .filter-bar[data-surface="sunken"],
  .command-bar[data-surface="glass"], .feed-list[data-surface="sunken"],
  .empty-cta[data-surface="sunken"],
  .chip-row[data-surface="sunken"], .logo-strip[data-surface="flat"],
  .theme-strip[data-surface="flat"], .style-strip[data-surface="flat"],
  .pricing-tier[data-surface="elevated"],
  .trust-band[data-surface="flat"], .pricing-board[data-surface="elevated"],
  .faq-list[data-surface="sunken"], .feature-band[data-surface="flat"],
  .stat-band[data-surface="sunken"], .process-band[data-surface="elevated"],
  .quote-board[data-surface="sunken"], .promo-band[data-surface="elevated"],
  .recipe[data-surface="flat"], .toast[data-surface="elevated"],
  .cmd-palette[data-surface="glass"] {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    break-inside: avoid;
}
.surface[data-surface="flat"]:hover, .media-tile[data-surface="elevated"]:hover,
  .link-tile[data-surface="flat"]:hover, .elev-surface[data-surface="glass"]:hover,
  .defer-panel[data-surface="glass"]:hover { transform: none !important;
}
}}
@layer product {
/* Product CSS. Bundled last in @layer product — always wins. */

@layer product {
  :root {
    --brand: #0f766e;
    /* --font-custom: "Source Serif 4", serif; */
    --shine: none;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --panel-pad: clamp(var(--space-4), 1.25rem + 0.25vw, var(--space-6));
    --panel-gap: var(--space-3);
    --panel-radius: var(--radius);
    --panel-border: 1px solid var(--border);
    --panel-bg: var(--card);
    --card-pad: var(--panel-pad);
    --card-radius: var(--panel-radius);
    --card-border: var(--panel-border);
    --card-bg: var(--panel-bg);
    --workspace-gap: var(--space-4);
    --workspace-pad: clamp(var(--space-2), 1vw, var(--space-4));
  }

  /* Matte surfaces — tokens only, no glass. */
  .surface, .card, .panel, .stat-card, .action-card, .pricing-tier {
    background: var(--panel-bg);
    border: var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: var(--panel-pad);
  }

  /* Card & Panel Variants: Outline, Soft, Ghost, Solid */
  .card[data-variant="outline"], .panel[data-variant="outline"] {
    background: transparent;
    border: 1px solid var(--border-strong);
    box-shadow: none;
  }
  .card[data-variant="soft"], .panel[data-variant="soft"] {
    background: var(--bg-hover);
    border: 1px solid transparent;
    box-shadow: none;
  }
  .card[data-variant="ghost"], .panel[data-variant="ghost"] {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
  }
  .card[data-variant="solid"], .panel[data-variant="solid"] {
    background: var(--intent-wash, var(--card));
    border: 1px solid var(--intent-border, var(--border));
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
  }

  /* Nested panels inside cards/surfaces: prevent double border and zero-margin squeeze */
  .surface > .panel,
  .card > .panel,
  .surface > .flow > .panel,
  .card > .flow > .panel {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Workspace and custom containers */
  .workspace, [data-workspace] {
    gap: var(--workspace-gap, var(--space-4));
    padding: var(--workspace-pad, clamp(var(--space-2), 1vw, var(--space-4)));
  }

  .workspace [data-panel],
  .workspace .panel,
  .workspace .card {
    border-radius: var(--panel-radius, var(--radius));
    padding: var(--panel-pad, var(--space-4));
  }

  /* Section / hero / band spacing */
  .mast,
  .hero-mast,
  .band,
  .band-wide,
  .content-section,
  .page-hero,
  .page-head {
    padding-inline: clamp(var(--space-3), 1.25rem + 0.5vw, var(--space-6));
  }

  .hero-mast[data-surface],
  .mast[data-surface],
  .page-hero[data-surface],
  .band[data-surface] {
    padding: clamp(var(--space-4), 1.5rem + 0.5vw, var(--space-6));
    border-radius: var(--radius-lg, var(--radius));
  }

  /* Root fix for Page Hero, Shell Headers, and Container Breathing Room:
     Ensure Title, Kicker, Subtitle, and Text NEVER touch panel or container edges. */
  .page-hero,
  .page-head {
    padding: clamp(var(--space-4), 1.25rem + 0.5vw, var(--space-6));
    border-radius: var(--radius);
    margin-block-end: var(--space-4);
    min-width: 0;
  }

  .band-head,
  [data-panel] > .band-head,
  .page-hero .band-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding-inline: var(--space-2);
  }
  .mast-copy { padding-inline: var(--space-2); }

  .band-head h2,
  .band-head h3,
  .page-hero h2,
  .page-hero h1 {
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  .band-head .kicker,
  .page-hero .kicker {
    margin-block-end: 2px;
    letter-spacing: 0.08em;
  }

  .band-head .lede,
  .page-hero .lede {
    margin-block-start: 4px;
    line-height: 1.55;
    max-width: 48rem;
    color: var(--muted);
    font-size: var(--t-sm);
  }

  .surface:hover, .card:hover, .panel:hover, .stat-card:hover, .action-card:hover, .pricing-tier:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: none;
  }

  /* Panel & Card Head, Title, Subtitle, & Body Spacing */
  .panel-head,
  [data-panel] > [data-slot="head"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
    padding-inline: var(--space-2);
    min-width: 0;
  }

  .panel-head h2, .panel-head h3,
  [data-panel] > [data-slot="head"] h2,
  [data-panel] > [data-slot="head"] h3,
  .panel-title {
    font-size: var(--t-md);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin: 0;
  }

  .panel-sub {
    font-size: var(--t-xs);
    color: var(--muted);
    line-height: 1.45;
    margin-block-start: 2px;
  }

  [data-panel] > [data-slot="body"],
  .panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding-inline: var(--space-2);
    line-height: 1.6;
  }

  .panel p, [data-slot="body"] p {
    margin: 0;
    color: var(--muted);
    font-size: var(--t-sm);
    line-height: 1.6;
  }

  /* All Shell Containers & Workspaces */
  .ops-desk, .settings-shell, .plan-board, .dash-shell, .launch-pad,
  .doc-shell, .guide-shell, .list-desk, .site-page {
    padding-inline: clamp(var(--space-3), 1.25rem + 0.5vw, var(--space-6));
    padding-block: clamp(var(--space-3), 1rem + 0.5vw, var(--space-6));
    padding-block-end: var(--space-6);
    gap: var(--space-5);
  }

  /* Feed lists and recipe step lists */
  .feed-list {
    border-radius: var(--radius);
    padding: var(--space-4);
    min-width: 0;
  }
  .recipe {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
    border-radius: var(--radius);
  }
  .recipe li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
    min-width: 0;
  }
  .recipe strong {
    font-size: var(--t-md);
    letter-spacing: -0.02em;
    font-weight: 700;
  }
  .recipe p {
    color: var(--muted);
    font-size: var(--t-sm);
    line-height: 1.55;
    gap: var(--space-5);
  }

  /* Alignment utilities */
  /* Compact actions + form controls */
  .form-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
  }

  .form-grid > .field {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
  }

  .form-grid button[type="submit"],
  .form-grid .btn,
  .form-grid .btn-primary,
  form.stack button[type="submit"] {
    width: auto;
    min-width: 6.5rem;
    max-width: max-content;
    height: 38px;
    padding-inline: var(--space-4);
    font-size: var(--t-sm);
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    align-self: flex-end;
    justify-self: start;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  }

  .form-grid button[type="submit"]:hover,
  form.stack button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  .form-grid input.input,
  form.stack input.input {
    height: 38px;
    border-radius: var(--radius-sm, 6px);
    padding-inline: var(--space-3);
    font-size: var(--t-sm);
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .text-start, [data-align="start"], [data-text-align="start"] {
    text-align: start;
    align-items: flex-start;
  }
  .text-center, [data-align="center"], [data-text-align="center"] {
    text-align: center;
    align-items: center;
  }
  .text-end, [data-align="end"], [data-text-align="end"] {
    text-align: end;
    align-items: flex-end;
  }
  .text-justify, [data-text-align="justify"] {
    text-align: justify;
  }

  /* Anchor positioning hook */
  .topbar-settings-btn {
    anchor-name: --settings-anchor;
  }

  /* Settings popover */
  .popover.settings-drawer {
    position: fixed;
    inset-block-start: calc(var(--top-h, 3.25rem) + 8px);
    inset-inline-end: 1rem;
    inset-block-end: auto;
    inset-inline-start: auto;
    margin: 0;
    inline-size: min(calc(100vw - 2rem), 26rem);
    max-inline-size: 26rem;
    max-block-size: calc(100dvh - var(--top-h, 3.25rem) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-lg, var(--radius));
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-xl, 0 16px 40px rgba(0, 0, 0, 0.35));
    z-index: 1000;
    transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
    opacity: 0;
    transform: translateY(-8px);
  }

  .popover.settings-drawer:popover-open {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .popover.settings-drawer:popover-open {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  @supports (position-anchor: --settings-anchor) {
    .popover.settings-drawer {
      position-anchor: --settings-anchor;
      inset-block-start: anchor(bottom);
      inset-inline-end: anchor(right);
      margin-block-start: 8px;
    }
  }

  .popover.settings-drawer::backdrop {
    background: color-mix(in srgb, var(--bg) 50%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
    opacity: 0;
  }

  .popover.settings-drawer:popover-open::backdrop {
    opacity: 1;
  }

  @starting-style {
    .popover.settings-drawer:popover-open::backdrop {
      opacity: 0;
    }
  }

  @media (max-width: 640px) {
    .popover.settings-drawer {
      inset: auto !important;
      margin: auto !important;
      inline-size: min(calc(100vw - 2rem), 24rem);
      max-block-size: 85dvh;
      transform: scale(0.95);
    }
    .popover.settings-drawer:popover-open {
      transform: scale(1);
    }
    @starting-style {
      .popover.settings-drawer:popover-open {
        transform: scale(0.95);
      }
    }
  }

  /* Bento flow */
  .flow[data-flow="bento"] {
    gap: var(--space-4);
  }
  .flow[data-flow="bento"] > [data-span],
  .flow[data-flow="bento"] > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .flow[data-flow="bento"] > [data-span] > .surface,
  .flow[data-flow="bento"] > div > .surface {
    flex: 1;
  }

  /* Responsive layout collapse: prevent horizontal overflow */
  @media (max-width: 640px) {
    .flow[data-flow="bento"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .flow[data-flow="bento"] > [data-span],
    .flow[data-flow="bento"] > div {
      grid-column: 1 / -1 !important;
    }
    .flow[data-flow="split"],
    .flow[data-flow="sidebar"],
    .flow[data-flow="board"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .flow[data-flow="grid"] > [data-grid] {
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
    }
  }

  @container work (max-width: 42rem) {
    .flow[data-flow="bento"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .flow[data-flow="bento"] > [data-span],
    .flow[data-flow="bento"] > div {
      grid-column: 1 / -1 !important;
    }
    .flow[data-flow="split"],
    .flow[data-flow="sidebar"],
    .flow[data-flow="board"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .flow[data-flow="grid"] > [data-grid] {
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
    }
  }
}

/* ui-add:charts:css — spark/bars/ring skins (copied from charts.css; you own them) */
.chart-spark, .spark { color: var(--accent); display: block; }
.chart-spark .spark-line, .spark .spark-line { stroke: currentColor; }
.spark-fill { fill: currentColor; }
.bars, .chart-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.bar, .chart-bar { display: grid; grid-template-columns: 4.5rem 1fr 2.5rem; gap: var(--space-2); align-items: center; font-size: var(--t-xs); }
.bar-label, .chart-bar-label { color: var(--muted); font-weight: 600; }
.bar-track, .chart-bar-track { height: 8px; background: var(--bg-hover); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill, .chart-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.bar-n, .chart-bar-n { text-align: end; font-variant-numeric: tabular-nums; color: var(--text); }
.ring, .chart-ring { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.ring span, .chart-ring span { font-weight: 700; font-variant-numeric: tabular-nums; }
.ring em, .chart-ring em { font-style: normal; font-size: var(--t-xs); color: var(--muted); }
.ring-track, .chart-ring-track { stroke: var(--bg-hover); }
.ring-fill, .chart-ring-fill { stroke: var(--accent); stroke-linecap: round; }

/* ui-add:stat:css — stat card skin (copied from kit.css; you own it) */
.stat-card { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.stat-card { min-width: 0; }
.stat-label { font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.stat-value { font-size: var(--t-2xl); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-foot { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.stat-delta { font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.stat-delta[data-tone="ok"] { color: var(--tone-ok); }
.stat-delta[data-tone="danger"] { color: var(--tone-danger); }
.stat-hint { font-size: var(--t-3xs); color: var(--faint); }

/* ui-add:thread:css — thread surface skin (copied from kit.css; you own it) */
.thread { display: grid; gap: var(--space-3); }
.thread-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; }
.thread-msg { display: grid; gap: 2px; max-width: 85%; }
.thread-msg.thread-mine { justify-self: end; text-align: end; }
.thread-meta { display: flex; gap: var(--space-2); font-size: var(--t-3xs); color: var(--muted); }
.thread-msg.thread-mine .thread-meta { flex-direction: row-reverse; }
.thread-msg p { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--bg-hover); font-size: var(--t-sm); overflow-wrap: anywhere; }
.thread-msg.thread-mine p { background: var(--accent-soft); }
.thread-compose { display: flex; gap: var(--space-2); }
.thread-compose input { flex: 1; }

/* ui-add:tline:css — timeline feed skin (copied from kit.css; you own it) */
.tline { list-style: none; margin: 0; padding: 0; display: grid; }
.tline-item { display: grid; grid-template-columns: 12px 1fr; gap: var(--space-2); position: relative; padding-bottom: var(--space-4); }
.tline-item:last-child { padding-bottom: 0; }
.tline-item::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--bg-hover); }
.tline-item:last-child::before { display: none; }
.tline-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 3px; justify-self: center; background: var(--muted); z-index: 1; }
.tline-item[data-tone="ok"] .tline-dot { background: var(--tone-ok); }
.tline-item[data-tone="warn"] .tline-dot { background: var(--tone-warn); }
.tline-item[data-tone="danger"] .tline-dot { background: var(--tone-danger); }
.tline-item[data-tone="accent"] .tline-dot { background: var(--accent); }
.tline-body { display: grid; gap: 2px; min-width: 0; }
.tline-time { font-size: var(--t-3xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ui-add:cal:css — month calendar skin (copied from kit.css; you own it) */
.cal { display: grid; gap: var(--space-2); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cal-title { font-size: var(--t-md); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: var(--t-3xs); font-weight: 700; color: var(--muted); text-transform: uppercase; padding: var(--space-1) 0; }
.cal-cell { min-height: 4.5rem; border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--space-1); display: grid; gap: 4px; align-content: start; }
.cal-cell.cal-today { background: var(--accent-soft); border-color: var(--accent); }
.cal-day { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.cal-cell.cal-muted .cal-day { opacity: 0.45; }
.cal-chips { display: grid; gap: 2px; min-width: 0; }
.cal-chip { font-size: var(--t-3xs); line-height: 1.3; padding: 0 4px; border-radius: var(--radius-pill); background: var(--bg-hover); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip[data-tone="ok"] { background: var(--tone-ok-soft); color: var(--tone-ok); }
.cal-chip[data-tone="warn"] { background: var(--tone-warn-soft); color: var(--tone-warn); }
.cal-chip[data-tone="danger"] { background: var(--tone-danger-soft); color: var(--tone-danger); }
.cal-chip[data-tone="accent"] { background: var(--tone-accent-soft); color: var(--accent); }
.cal-more { font-size: var(--t-3xs); color: var(--faint); }

/* ui-add:plot:css — time-series plot skin (copied from charts.css + kit.css; you own it) */
.plot-frame { width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--bg); }
.plot-frame > svg { display: block; }
.plot-stats { font-size: var(--t-xs); }

  /* Canvas editor page — product layer wins. */
  #kitRows {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 34vh;
    overflow-y: auto;
    padding: 8px 0;
  }
  #kitRows form { margin: 0; }
  #kitFilter {
    width: min(320px, 100%);
    margin: 8px 0;
  }
  .velvet-viewport {
    max-width: none;
    width: 100%;
  }
  .velvet-canvas {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 8px;
    display: block;
    /* The drawing surface is LIGHT even before the first paint —
       a transparent canvas reads as a broken dark hole. Sizing rides
       the canvas' intrinsic 960×540 ratio (no aspect-ratio needed);
       the grid below is @supports-gated so gradient-less engines
       keep the clean white surface. */
    background-color: #ffffff;
  }
  @supports (background-image: linear-gradient(#000, #000)) {
    .velvet-canvas {
      background-image:
        linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
  }

  /* Toolbar: one horizontal row that wraps on narrow screens. */
  [data-island="toolbar"] .cluster {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 6px;
  }
  [data-island="toolbar"] form { margin: 0; }
}
@layer desk {
/* Desk pack tracks. Layered in `@layer desk`. Default 3-col (main off, empty-rail :has(… */
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-flow="off"][data-stack="off"][data-dock="off"] {
  display: grid;
  contain: none;
  grid-template-columns:
    minmax(13rem, min(var(--side-w, 18rem), 30rem))
    minmax(0, 1fr)
    minmax(12rem, min(var(--end-w, 16rem), 24rem));
  grid-template-rows: var(--top-h, auto) minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "side main end"
    "side foot end";
}
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-lead="end"][data-flow="off"][data-stack="off"][data-dock="off"] {
  grid-template-columns:
    minmax(12rem, min(var(--end-w, 16rem), 24rem))
    minmax(0, 1fr)
    minmax(13rem, min(var(--side-w, 18rem), 30rem));
  grid-template-rows: var(--top-h, auto) minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "end main side"
    "end foot side";
}
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-flow="on"] {
  display: grid;
  contain: none;
  grid-template-columns:
    minmax(13rem, min(var(--side-w, 18rem), 30rem))
    minmax(0, 1fr)
    minmax(12rem, min(var(--end-w, 16rem), 24rem));
  grid-template-rows: var(--top-h, auto) minmax(0, 1fr) minmax(0, auto) minmax(0, auto) auto auto;
  grid-template-areas:
    "top top top"
    "side main end"
    "side flow end"
    "side stack end"
    "side foot end"
    "dock dock dock";
}
/* Default floor recipe (main off, 3-row) lives unlayered in flow.css peel tail so it is… */
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-lead="end"][data-flow="on"][data-main="off"][data-stack="off"][data-dock="off"] {
  grid-template-columns:
    minmax(12rem, min(var(--end-w, 16rem), 24rem))
    minmax(0, 1fr)
    minmax(13rem, min(var(--side-w, 18rem), 30rem));
  grid-template-areas:
    "top top top"
    "end flow side"
    "end foot side";
}
}
@layer desk {
/* Desk skins + resize grips. Lattice tracks live in flow.css (peel tail). */
.workspace[data-skin="game"] {
  --top-h: 2.5rem;
  --side-w: 14rem;
  --end-w: 14rem;
}
.workspace[data-surface="flat"][data-skin="game"] [data-area="flow"] {
  background: var(--fill-ink);
}
[data-z] { z-index: calc(2 + var(--z, 0)); }
[data-lock] { cursor: default; }
[data-tile-resize] {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  z-index: 4;
}
[data-tile-resize="n"], [data-tile-resize="s"] { left: 50%; width: 1.2rem; margin-left: -0.6rem; cursor: ns-resize; }
[data-tile-resize="e"], [data-tile-resize="w"] { top: 50%; height: 1.2rem; margin-top: -0.6rem; cursor: ew-resize; }
[data-tile-resize="n"] { top: 0; }
[data-tile-resize="s"] { bottom: 0; }
[data-tile-resize="e"] { right: 0; }
[data-tile-resize="w"] { left: 0; }
[data-tile-resize="nw"] { top: 0; left: 0; cursor: nwse-resize; }
[data-tile-resize="ne"] { top: 0; right: 0; cursor: nesw-resize; }
[data-tile-resize="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
[data-tile-resize="se"] { bottom: 0; right: 0; cursor: nwse-resize; }
[data-dnd-item] { position: relative; touch-action: none; }
.desk-grab [data-dnd-item] { cursor: grab; }
.desk-grab [data-dnd-item][data-resizing] { cursor: grabbing; }
[data-tile-resize] { touch-action: none; opacity: 0.45; }
[data-tile-resize]:hover,
[data-tile-resize]:active { opacity: 1; }
#ws-float {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none !important;
}
#ws-float:not(:has([data-float])) {
  display: none !important;
  pointer-events: none !important;
}
#ws-float [data-float] {
  position: fixed;
  left: calc(var(--fx, 16) / 64 * (100vw - 2.5rem) + 1.25rem);
  top: calc(var(--fy, 8) / 64 * (100vh - 9rem) + 1.25rem);
  width: min(calc(var(--fw, 36) / 64 * 100vw), 92vw);
  max-height: min(calc(var(--fh, 46) / 64 * 100vh), 78vh);
  overflow: auto;
  pointer-events: auto;
  border-radius: var(--radius);
}
#ws-float [data-float][data-surface="elevated"],
#ws-float [data-float][data-surface="flat"] {
  background: var(--fill-flat);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow), var(--chip-ring);
}
#ws-float .stack > :not([data-float]) {
  position: fixed;
  right: 1.25rem;
  bottom: 4.5rem;
  width: min(28rem, 92vw);
  max-height: min(70vh, 36rem);
  overflow: auto;
}
@media (max-width: 48rem) {
  #ws-float [data-float],
  #ws-float .stack > :not([data-float]) {
    left: 0.75rem;
    right: 0.75rem;
    top: auto;
    bottom: 4.5rem;
    width: auto;
    max-height: 60vh;
  }
}

#desk-hold {
  position: fixed;
  z-index: 420;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 9rem;
  border-radius: var(--radius, 0.65rem);
}
#desk-hold[data-surface="elevated"] {
  padding: 0.35rem;
  background: var(--fill-plate);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow), var(--chip-ring);
}
#desk-hold[hidden] { display: none; }
#desk-hold [data-hold] {
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#desk-hold[data-surface="elevated"] [data-hold]:hover { background: var(--wash-hold); }
iframe.vf-embed {
  display: block;
  width: 100%;
  min-height: 16rem;
  border: 0;
}
iframe.vf-embed[data-surface="sunken"] { background: var(--fill-bg); border: 1px solid var(--border-accent); border-radius: var(--radius); box-shadow: var(--chip-ring); }
[data-dnd-zone].dnd-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.flow[data-flow="floor"].dnd-over {
  outline: 2px solid var(--outline-accent);
}

/* Catalog shelf (`#build-kit`): presence = build mode. Cards are drag sources with the… */
.shelf {
  border-block-end: 1px solid var(--border-accent);
}
.shelf[data-surface="elevated"] {
  padding: var(--space-1) var(--space-2);
  background: var(--fill-elev);
  border-block-end-color: var(--border-accent); box-shadow: var(--chip-ring);
}
.shelf .cluster { gap: var(--space-2); }
.shelf-card {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: inherit; text-align: start;
  border-radius: var(--r-sm, 8px); color: var(--text);
  font-size: var(--t-sm); cursor: grab; user-select: none;
}
.shelf-card[data-surface="flat"] {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-accent);
  background: var(--fill-flat); box-shadow: var(--chip-ring);
}
.shelf-card[data-surface="flat"]:hover, .shelf-card[data-surface="flat"]:focus-visible {
  border-color: var(--accent-dim, var(--accent)); box-shadow: var(--chip-ring);
}
.shelf-card:active { cursor: grabbing; }
.shelf-card .icon { color: var(--muted); }

/* Face-scoped density (3.11): a tile may pack tighter than its page without touching th… */
[data-density="dense"] {
  --density: 0.82;
  --grid-min: 10rem;
}

/* Pointer-owning faces (FaceCaps::POINTER — ink/canvas class): the browser must not tur… */
[data-pointer] {
  touch-action: none;
  user-select: none;
}

/* Chart-tab strip (kernel chrome `ct-strip`): a full 8-tab strip scrolls horizontally i… */
[data-key="ct-strip"] {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-key="ct-strip"]::-webkit-scrollbar { display: none; }
[data-key="ct-strip"] > * { flex: 0 0 auto; }
}