/* The marketing pages (landing, docs, account dialog) are always dark and opt out of the
   theme toggle. They mirror the builder's dark palette, including its green accent, so the
   public site matches the dashboard people actually work in. The app itself stays themeable
   and re-declares its own light scheme below. */
:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
  --cream: #16181c;
  --paper: #1c1f24;
  --raised: #212429;
  --sunken: #121418;
  --ink: #e9ebee;
  --muted: #a2a9b3;
  --subtle: #79808a;
  --accent: #89d185;
  --accent-strong: #a5dfa1;
  --accent-tint: rgba(137, 209, 133, .1);
  --accent-line: #40603c;
  --on-accent: #14251a;
  --slate-dark: #0d0f12;
  --ok: #89d185;
  --line: #2c3037;
  --line-soft: #24272c;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --wordmark: var(--mono);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #171717; }
/* Painted explicitly so the marketing shell never inherits the app's themed body colour.
   The whole page sits on the hero's near-black and re-declares the surface greys in the same
   neutral family as the product screenshots, so nothing reads blue against it. */
#landing-view { position: relative; min-height: 100vh; color: var(--ink); background: #171717; --cream: #171717; --paper: #1e1e1e; --raised: #232323; --sunken: #141414; --line: #333; --line-soft: #292929; --rail: #333; }
/* One pair of hairlines marks the content column from the header to the footer. Every landing
   section is the same width, so its own top/bottom rules meet these rails exactly. The rails sit
   above every section (nothing on the page raises itself past z-index 1 except the header and its
   menus) so no section needs to repaint its own side border — two hairlines on the same edge
   antialias apart and read as one thick double line. box-sizing is set here rather than inherited:
   the universal reset above matches elements only, so without it the two borders sat outside the
   1280 and the rails ran a pixel wide of every section edge. */
#landing-view::before { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; box-sizing: border-box; width: min(1280px, calc(100vw - 32px)); transform: translateX(-50%); border-left: 1px solid var(--rail); border-right: 1px solid var(--rail); content: ""; pointer-events: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  min-height: 60px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 max(20px, calc((100% - 1180px) / 2));
  background: rgba(23, 23, 23, 0.96);
  backdrop-filter: blur(8px);
}

.site-brand { display: inline-flex; width: fit-content; align-items: center; gap: 9px; color: var(--ink); font-family: var(--wordmark); font-size: 0.86rem; font-weight: 200; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; -webkit-font-smoothing: antialiased; }
.site-brand > span:not(.pipe-logo) { color: rgba(233, 235, 238, .82); }
.pipe-logo { display: inline-grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; }
.pipe-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-nav { display: flex; gap: 26px; }
.site-nav a { color: var(--muted); font-family: inherit; font-size: clamp(0.86rem, 1.4vw, 0.95rem); font-weight: 300; opacity: .8; text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.header-actions { display: flex; justify-self: end; align-items: center; gap: 7px; }
.header-actions .button { font-family: inherit; font-size: clamp(0.86rem, 1.4vw, 0.95rem); font-weight: 300; }
.mobile-nav { position: relative; display: none; justify-self: end; }
.mobile-nav-toggle { display: grid; width: 40px; height: 40px; grid-template-rows: repeat(3, 1px); align-content: center; justify-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 7px; padding: 0; color: var(--ink); background: var(--paper); cursor: pointer; list-style: none; }
.mobile-nav-toggle::-webkit-details-marker { display: none; }
.mobile-nav-toggle::marker { content: ""; }
.mobile-nav-toggle span { display: block; width: 18px; height: 1px; background: currentColor; }
.mobile-nav[open] .mobile-nav-toggle { border-color: var(--accent-line); color: var(--accent); background: var(--raised); }
.mobile-nav-panel { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: min(280px, calc(100vw - 32px)); gap: 7px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; background: #1e1e1e; box-shadow: 0 18px 48px rgba(0, 0, 0, .38); }
.mobile-nav-item { display: flex; width: 100%; min-height: 42px; align-items: center; border: 1px solid transparent; border-radius: 6px; padding: 0 12px; color: var(--ink); background: transparent; font: inherit; font-size: .78rem; font-weight: 560; text-align: left; text-decoration: none; }
.mobile-nav-item:hover, .mobile-nav-item[aria-current="page"] { border-color: var(--line); color: var(--accent); background: var(--raised); }
.mobile-nav-auth { display: grid; gap: 7px; border-top: 1px solid var(--line); margin-top: 3px; padding-top: 10px; }
.mobile-nav-item.is-primary { justify-content: center; border-color: var(--accent-line); color: var(--on-accent); background: var(--accent); font-weight: 720; text-align: center; }
.mobile-nav-item.is-primary:hover { border-color: var(--accent-strong); color: var(--on-accent); background: var(--accent-strong); }
.button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 6px; padding: 0 12px; font-size: 0.7rem; font-weight: 720; letter-spacing: -0.005em; text-decoration: none; }
.button-quiet { color: var(--muted); background: transparent; }
.button-quiet:hover { color: var(--accent); background: var(--accent-tint); }
.button-dark { border-color: rgba(137,209,133,.32); color: #fff; background: rgba(73,145,79,.2); }
.button-dark:hover { background: rgba(73,145,79,.4); }
.button-download { border-color: var(--line); color: var(--muted); background: var(--paper); text-decoration: none; }
.button-download:hover { border-color: var(--accent-line); color: var(--accent); background: var(--raised); }
.button.is-coming-soon { color: var(--subtle); cursor: default; }
.button.is-coming-soon:hover { border-color: var(--line); color: var(--subtle); background: var(--paper); }
.button.is-coming-soon em { border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 8px; color: var(--accent); background: var(--accent-tint); font-size: .62rem; font-style: normal; font-weight: 740; }
.docs-coming-soon { color: var(--muted); }
.docs-coming-soon em { color: var(--accent); font-style: normal; font-weight: 700; }
.button-primary { border-color: var(--accent-line); color: var(--on-accent); background: var(--accent); }
.button-primary:hover { background: var(--accent-strong); }
.hero-actions > .button-primary { border-color: rgba(137,209,133,.32); color: #fff; background: rgba(73,145,79,.2); }
.hero-actions > .button-primary:hover { background: rgba(73,145,79,.4); }
.hero-actions .button-download { background: #171717; }
.hero-actions .button-download:hover { background: var(--raised); }
.button-large { min-height: 40px; border-radius: 7px; padding: 0 18px; font-size: 0.79rem; }

/* flow-root: the prompt's bottom margin has to stay inside the section, or it would collapse
   through the (now sibling) marker bar and the dot field would stop 72px short of it. */
.hero-section { position: relative; display: flow-root; width: 100%; margin: 0 auto; padding: 116px 0 0; background: #171717; }
.hero-section::before { position: absolute; top: 0; bottom: 0; left: 50%; width: min(1280px, calc(100% - 32px)); background-image: radial-gradient(#454545 .75px, transparent .75px); background-size: 16px 16px; content: ""; transform: translateX(-50%); pointer-events: none; }
.hero-section > * { position: relative; }
.hero-copy { width: min(740px, calc(100% - 40px)); margin: 0 auto 42px; text-align: center; }
/* Match the smooth radial scrim used by the section copy panels. A single falloff keeps the
   dot field quiet behind the hero text without the banding introduced by a second mask. */
.hero-copy::before { position: absolute; top: -116px; bottom: -90px; left: 50%; width: min(1180px, calc(100vw - 32px)); background: radial-gradient(ellipse at center, rgba(23,23,23,.68) 0%, rgba(23,23,23,.65) 26%, rgba(23,23,23,.57) 45%, rgba(23,23,23,.44) 62%, rgba(23,23,23,.27) 79%, rgba(23,23,23,.11) 91%, transparent 100%); content: ""; transform: translateX(-50%); pointer-events: none; }
.hero-copy > * { position: relative; }
.hero-copy h1 { margin: 0 0 20px; color: var(--ink); font-size: clamp(1rem, 4vw, 2.8rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; white-space: nowrap; }
.hero-title-copy { font-weight: 300; opacity: .8; }
.hero-copy h1 .hero-title-tag { display: inline-block; border: 2px solid rgba(220,72,72,.42); border-radius: .16em; padding: .04em .2em .08em; background: rgba(220,72,72,.2); }
.hero-lead { max-width: 680px; margin: 0 auto 28px; color: var(--muted); font-size: clamp(0.86rem, 1.4vw, 0.95rem); font-weight: 300; line-height: 1.7; opacity: .8; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; }
.hero-prompt { display: grid; width: min(740px, calc(100vw - 48px)); min-height: 128px; margin: 0 auto 72px; grid-template-rows: minmax(0, 1fr) 44px; overflow: hidden; border: 1px solid #3c3c3c; border-radius: 13px; color: #e6e6e6; background: #111; }
.hero-prompt-input { display: flex; min-width: 0; align-items: flex-start; padding: 16px 18px 11px; text-align: left; }
.hero-prompt-typing { color: #d2d2d2; font-size: clamp(.76rem, 1.15vw, .9rem); font-weight: 390; line-height: 1.65; transition: opacity .6s ease; }
.hero-prompt-cursor { display: inline-block; width: 1px; height: 1.12em; margin-left: 2px; background: var(--accent); vertical-align: -.15em; animation: hero-prompt-blink .8s steps(1) infinite; }
.hero-prompt footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #303030; padding: 0 8px 0 16px; background: #151515; }
.hero-prompt-status { position: relative; display: block; width: 400px; height: 26px; transition: opacity .6s ease; }
.hero-prompt.is-fading .hero-prompt-typing, .hero-prompt.is-fading .hero-prompt-status { opacity: 0; }
.hero-prompt-loader { position: absolute; top: 4px; left: 1px; width: 18px; height: 18px; border: 2px solid #3b443c; border-top-color: #9fd49a; border-radius: 50%; opacity: 0; animation: hero-prompt-spin .85s linear infinite; animation-play-state: paused; transition: opacity .2s ease; }
.hero-prompt-status.is-loading .hero-prompt-loader { opacity: 1; animation-play-state: running; }
.hero-prompt-status.is-complete .hero-prompt-loader { opacity: 0; animation-play-state: paused; }
.hero-prompt-check { position: absolute; top: 2px; left: -1px; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(137,209,133,.46); border-radius: 50%; color: #eaf7e8; background: rgba(73,145,79,.5); opacity: 0; transform: scale(.75); transition: opacity .25s ease, transform .25s ease; }
.hero-prompt-status.is-complete .hero-prompt-check { opacity: 1; transform: scale(1); }
.hero-prompt-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-prompt-connections { position: absolute; inset: 0 auto 0 29px; display: flex; min-width: 0; align-items: center; gap: 7px; }
.hero-prompt-connections-policy { visibility: hidden; }
.hero-prompt-status.is-policy-flow .hero-prompt-connections-pharma { visibility: hidden; }
.hero-prompt-status.is-policy-flow .hero-prompt-connections-policy { visibility: visible; }
.hero-prompt-connections > * { opacity: 0; transform: translateY(4px); transition: opacity .6s ease, transform .6s ease; }
.hero-prompt-status.is-connected .source-tag-pfizer { opacity: 1; transform: translateY(0); transition-delay: .2s; }
.hero-prompt-status.is-connected .source-tag-merck { opacity: 1; transform: translateY(0); transition-delay: 1.4s; }
.hero-prompt-status.is-connected .source-tag-gsk { opacity: 1; transform: translateY(0); transition-delay: 2.6s; }
.hero-prompt-status.is-connected .hero-prompt-flow-arrow { opacity: 1; transform: translateY(0); transition-delay: 3.8s; }
.hero-prompt-status.is-connected .hero-openai-logo { opacity: 1; transform: translateY(0); transition-delay: 4.8s; }
.hero-prompt-status.is-connected .hero-prompt-mongo-arrow { opacity: 1; transform: translateY(0); transition-delay: 6s; }
.hero-prompt-status.is-connected .hero-mongodb-logo { opacity: 1; transform: translateY(0); transition-delay: 7s; }
.hero-prompt-status.is-policy-flow.is-connected .source-tag-house { opacity: 1; transform: translateY(0); transition-delay: .2s; }
.hero-prompt-status.is-policy-flow.is-connected .source-tag-senate { opacity: 1; transform: translateY(0); transition-delay: 1.4s; }
.hero-prompt-status.is-policy-flow.is-connected .hero-prompt-policy-model-arrow { opacity: 1; transform: translateY(0); transition-delay: 2.6s; }
.hero-prompt-status.is-policy-flow.is-connected .hero-nvidia-logo { opacity: 1; transform: translateY(0); transition-delay: 3.8s; }
.hero-prompt-status.is-policy-flow.is-connected .hero-prompt-policy-gcp-arrow { opacity: 1; transform: translateY(0); transition-delay: 5s; }
.hero-prompt-status.is-policy-flow.is-connected .hero-gcp-logo { opacity: 1; transform: translateY(0); transition-delay: 6.2s; }
.source-tag { display: grid; height: 22px; place-items: center; border: 1px solid rgba(238, 135, 63, .48); border-radius: 6px; padding: 0 7px; color: #fff; background: rgba(224, 100, 32, .2); font: 680 .5rem Inter, ui-sans-serif, system-ui, sans-serif; font-style: normal; line-height: 1; }
.policy-source-tag { border-color: rgba(112,168,255,.42); background: rgba(49,134,255,.2); }
.hero-prompt-flow-arrow { display: grid; width: 14px; height: 22px; place-items: center; color: #a6d6a0; font-size: .75rem; line-height: 1; }
.hero-openai-logo { display: flex; height: 24px; align-items: center; gap: 4px; border: 1px solid #404040; border-radius: 6px; padding: 0 6px 0 4px; color: #f0f0f0; background: #202020; }
.hero-openai-logo svg { width: 16px; height: 16px; fill: currentColor; }
.hero-openai-logo strong { font-size: .48rem; font-weight: 680; letter-spacing: -.02em; }
.hero-mongodb-logo { display: flex; height: 24px; align-items: center; gap: 3px; border: 1px solid rgba(0,237,100,.36); border-radius: 6px; padding: 0 6px 0 4px; color: #00ed64; background: rgba(0,104,74,.2); }
.hero-mongodb-logo svg { width: 12px; height: 17px; fill: currentColor; }
.hero-mongodb-logo strong { color: #fff; font-size: .48rem; font-weight: 680; letter-spacing: -.025em; }
.hero-nvidia-logo { display: flex; height: 24px; align-items: center; gap: 4px; border: 1px solid rgba(118,185,0,.38); border-radius: 6px; padding: 0 6px 0 4px; color: #76b900; background: rgba(118,185,0,.12); }
.hero-nvidia-logo > svg { width: 18px; height: 16px; fill: currentColor; }
.hero-nvidia-logo > span { display: grid; gap: 1px; line-height: 1; }
.hero-nvidia-logo strong { color: #fff; font-size: .47rem; font-weight: 720; letter-spacing: -.02em; }
.hero-nvidia-logo small { color: #aeb2ad; font-size: .34rem; font-weight: 560; white-space: nowrap; }
.hero-gcp-logo { display: flex; height: 24px; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 0 7px 0 5px; color: #fff; background: rgba(128,128,128,.2); }
.hero-gcp-logo img { width: 19px; height: 19px; object-fit: contain; }
.hero-gcp-logo svg { display: none; }
.hero-gcp-logo strong { font-size: .46rem; font-weight: 680; letter-spacing: -.025em; white-space: nowrap; }
.hero-prompt-submit { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(137,209,133,.34); border-radius: 8px; color: #eff8ed; background: rgba(73,145,79,.34); opacity: .72; transition: opacity .18s ease, border-color .18s ease, background-color .18s ease; }
.hero-prompt-submit.is-sent { opacity: .92; }
.hero-prompt-submit:hover { border-color: rgba(137,209,133,.55); background: rgba(73,145,79,.48); }
.hero-prompt-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hero-prompt-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes hero-prompt-spin { to { transform: rotate(360deg); } }
.text-link { border: 0; padding: 8px 0; color: var(--muted); background: transparent; font-size: 0.75rem; font-weight: 680; text-decoration: underline; text-decoration-color: var(--subtle); text-underline-offset: 4px; }
.text-link:hover { color: var(--accent); }
/* A quiet bordered band closes the hero copy off from the product shot. Its opaque fill ends
   the dot field, and its rules run the full width of the page rather than stopping at the
   content column — the preview drops its own top border so the band's edge is the only line. */
.hero-band { width: 100%; height: 96px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #171717; }
.hero-section-marker { display: flex; align-items: center; }
.hero-section-marker-inner { position: relative; display: flex; width: min(1280px, calc(100vw - 32px)); height: 100%; margin: 0 auto; align-items: center; gap: clamp(18px, 2.8vw, 38px); padding: 0 clamp(28px, 4vw, 58px); color: #767676; font-family: var(--mono); font-size: clamp(.68rem, 1vw, .8rem); letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.hero-section-marker-inner::before { position: absolute; top: 50%; left: -1px; width: 2px; height: 34px; background: var(--accent); content: ""; transform: translateY(-50%); }
.hero-section-marker-count { display: inline-flex; align-items: center; gap: .62em; white-space: nowrap; }
.hero-section-marker-count strong { color: var(--accent); font-size: 1.06em; font-weight: 560; }
.hero-section-marker-dot { color: #555; }
.hero-section-marker-label { color: #969696; font-family: var(--wordmark); font-weight: 480; opacity: .62; white-space: nowrap; }
.hero-band-before-preview { width: min(1280px, calc(100vw - 32px)); margin-inline: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #171717; }
/* Section markers below the hero pin under the header once you reach them, the way the docs page
   marker does, and unpin when their section scrolls out from under them. The rules run edge to
   edge while the label stays on the content column; the fill is translucent so the section
   passing underneath stays faintly visible. Sits below the header's z-index, never over it. */
.hero-section-marker-sticky { position: sticky; z-index: 20; top: 59px; background: rgba(23, 23, 23, .96); backdrop-filter: blur(8px); }
/* The page rails (#landing-view::before, z-index 2) are painted over by a pinned marker, so a
   sticky one carries the two vertical lines itself, on the content column where the rails run. */
.hero-section-marker-sticky .hero-section-marker-inner { border-left: 1px solid var(--rail); border-right: 1px solid var(--rail); }
/* Hero mock: a scaled mirror of the dark pipeline builder. */
.app-preview-frame { position: relative; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; }
/* No border of its own: the frame is exactly the content column, so the page rails draw all four
   edges it needs — the band above supplies the top rule, the flow strip below the bottom one. */
.app-preview { position: relative; z-index: 1; display: grid; width: 100%; min-height: 560px; grid-template-columns: 50px minmax(0, 1fr); overflow: hidden; border: 0; border-radius: 0; color: #e6e6e6; background: #1e1e1e; }
.app-preview-rail { display: flex; align-items: center; flex-direction: column; gap: 6px; border-right: 1px solid #333; padding: 12px 5px; background: #171717; }
.app-preview-nav-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: #8f8f8f; }
.app-preview-nav-icon.is-active { color: #f0f0f0; background: #292929; }
.app-preview-nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-preview-main { display: grid; min-width: 0; grid-template-rows: 55px 36px minmax(0, 1fr); }
.app-preview-bar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #333; padding: 0 13px; background: #171717; }
.app-preview-path { display: flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; color: #b0b0b0; font-size: .66rem; white-space: nowrap; }
.app-preview-path b { color: #b8b8b8; font-weight: 500; }.app-preview-path i { color: #666; font-style: normal; }.app-preview-path strong { overflow: hidden; color: #e6e6e6; text-overflow: ellipsis; }
.app-preview-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.mock-time-tag { display: inline-flex; min-height: 29px; align-items: center; border: 1px solid #454545; border-radius: 999px; padding: 0 10px; color: #b8b8b8; background: #242424; font-size: .57rem; font-weight: 680; white-space: nowrap; }
.mock-time-tag.is-running { border-color: rgba(137,209,133,.5); color: #e7f3e4; background: rgba(73,145,79,.26); animation: mock-time-pulse 1.15s ease-in-out infinite; }
.mock-time-tag.is-running::before { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(137,209,133,.25); content: ""; }
.app-preview-tabs { display: flex; min-width: 0; align-items: stretch; justify-content: space-between; border-bottom: 1px solid #333; padding: 0 12px 0 9px; background: #171717; }
.app-preview-tabs > span { display: flex; min-width: 0; align-items: stretch; overflow: hidden; }
.app-preview-tabs b { position: relative; padding: 0 9px; color: #9a9a9a; font-size: .58rem; font-weight: 650; line-height: 35px; white-space: nowrap; }
.app-preview-tabs b.is-active { color: #a6d6a0; }
.app-preview-tabs b.is-active::after { position: absolute; right: 6px; bottom: 0; left: 6px; height: 2px; background: var(--accent); content: ""; }
.app-preview-tabs > em { flex: 0 0 auto; align-self: center; color: #929292; font-size: .48rem; font-style: normal; white-space: nowrap; }
.app-preview-body { display: grid; min-width: 0; min-height: 469px; grid-template-columns: minmax(0, 1fr) minmax(285px, 38%); }
.app-preview-canvas { min-width: 0; overflow: hidden; }
.app-preview-grid { position: relative; width: 100%; height: 100%; min-width: 0; overflow: hidden; background-color: #1e1e1e; background-image: radial-gradient(#454545 .75px, transparent .75px); background-size: 16px 16px; }
.mock-edges { position: absolute; inset: 0; width: 100%; height: 100%; }.mock-edges path { fill: none; stroke: #666; stroke-width: 1.4; vector-effect: non-scaling-stroke; }.mock-edges polygon { fill: #777; }.mock-edge-source-flow { stroke-dasharray: 9 7; animation: mock-source-edge-flow 15s linear infinite; }.mock-edge-enriched-flow { stroke-dasharray: 9 7; animation: mock-enriched-edge-flow 15s linear infinite; }
.mock-node { position: absolute; width: 22%; min-width: 112px; height: 78px; border: 1px solid #3c3c3c; border-radius: 7px; background: #191919; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.mock-node.is-selected { border-color: #75a774; box-shadow: 0 0 0 2px rgba(137,209,133,.13), 0 4px 12px rgba(0,0,0,.35); }
.mock-node-source { top: 56%; left: 4%; }.mock-node-extract { top: 15%; left: 39%; }.mock-node-enrich { top: 56%; left: 39%; }.mock-node-dataset { top: 56%; right: 2%; }
.mock-node header { min-height: 48px; padding: 9px 9px; border-bottom: 1px solid #333; }
.mock-node strong, .mock-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-node strong { margin-bottom: 4px; color: #e6e6e6; font: 680 .54rem var(--mono); }
.mock-node small { color: #a0a0a0; font-size: .44rem; }
.mock-node footer { display: flex; height: 29px; align-items: center; justify-content: space-between; gap: 5px; padding: 0 8px; color: #aaa; font-size: .39rem; }
.mock-node footer span { display: flex; min-width: 0; align-items: center; overflow: hidden; white-space: nowrap; }
.mock-node footer em { flex: 0 0 auto; color: #89d185; font-style: normal; }
.mock-ok { width: 6px; height: 6px; flex: 0 0 6px; margin-right: 5px; border-radius: 50%; background: var(--ok); }
.mock-port { position: absolute; z-index: 2; top: calc(50% - 5px); width: 10px; height: 10px; border: 2px solid #1e1e1e; border-radius: 50%; background: #777; box-shadow: 0 0 0 1px #777; }.mock-port.is-input { left: -6px; }.mock-port.is-output { right: -6px; }
.mock-run-log { position: absolute; z-index: 4; top: calc(100% + 3px); right: -1px; left: -1px; overflow: hidden; border: 1px solid rgba(83,145,96,.7); border-radius: 6px; color: #bfe4c4; background: rgba(24,55,34,.96); box-shadow: 0 7px 16px rgba(0,0,0,.28); opacity: 0; transform: translateY(-4px); }
.mock-run-log-heading { display: flex; height: 20px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(123,190,134,.18); padding: 0 6px; color: #a9ddb1; font-size: .36rem; font-weight: 760; }
.mock-run-log-heading span { display: flex; align-items: center; }.mock-run-log-heading i { width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #63c477; box-shadow: 0 0 0 0 rgba(99,196,119,.3); animation: mock-log-dot 1.1s ease-in-out infinite; }.mock-run-log-heading b { color: #83cf91; font-size: .34rem; letter-spacing: .04em; text-transform: uppercase; }
.mock-run-log code { display: block; height: 40px; overflow: hidden; padding: 5px 6px 6px; color: #bfe4c4; font: .34rem/1.5 var(--mono); white-space: nowrap; }
.mock-run-log code span { display: block; overflow: hidden; text-overflow: ellipsis; }
.mock-node-source { animation: mock-source-node-run 15s ease infinite; }.mock-node-extract { animation: mock-raw-node-run 15s ease infinite; }.mock-node-enrich { animation: mock-qwen-node-run 15s ease infinite; }.mock-node-dataset { animation: mock-db-node-run 15s ease infinite; }
.mock-node-source .mock-run-log { animation: mock-source-log 15s ease infinite; }.mock-node-extract .mock-run-log { animation: mock-raw-log 15s ease infinite; }.mock-node-enrich .mock-run-log { animation: mock-qwen-log 15s ease infinite; }.mock-node-dataset .mock-run-log { animation: mock-db-log 15s ease infinite; }
.mock-node-source .mock-run-log code { animation: mock-source-lines 15s linear infinite; }.mock-node-extract .mock-run-log code { animation: mock-raw-lines 15s linear infinite; }.mock-node-enrich .mock-run-log code { animation: mock-qwen-lines 15s linear infinite; }.mock-node-dataset .mock-run-log code { animation: mock-db-lines 15s linear infinite; }
.app-preview-chat { display: grid; min-width: 0; grid-template-rows: minmax(0, 1fr) auto; border-left: 1px solid #333; background: #171717; }
.app-preview-chat-messages { display: flex; min-height: 0; flex-direction: column; gap: 8px; overflow: hidden; padding: 16px 13px; }
.mock-chat-message { width: 100%; max-width: 100%; margin: 0; padding: 2px; color: #c4c4c4; background: transparent; font-size: .76rem; line-height: 1.55; }
.mock-chat-message strong { color: #e6e6e6; font-family: var(--mono); }
.mock-chat-message p { margin: 0 0 8px; }.mock-chat-message ul { margin: 0; padding-left: 17px; }.mock-chat-message li + li { margin-top: 5px; }.mock-chat-message li::marker { color: var(--accent); }
.mock-chat-message.is-user { width: fit-content; max-width: 88%; align-self: flex-end; border: 1px solid rgba(137,209,133,.28); border-radius: 9px 4px 9px 9px; padding: 8px 9px; color: #e5f4e3; background: rgba(73,145,79,.2); }
.mock-composer { display: grid; min-height: 78px; grid-template-rows: 1fr auto; margin: 0 13px 13px; border: 1px solid #333; border-radius: 11px; padding: 11px 9px 7px 11px; color: #828282; background: #101010; font-size: .7rem; }
.mock-composer footer { display: flex; align-items: center; justify-content: space-between; }.mock-composer footer em { border: 1px solid #454545; border-radius: 6px; padding: 5px 7px; color: #b8b8b8; background: #2d2d30; font-size: .64rem; font-style: normal; }
.mock-composer b { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 1px solid rgba(137,209,133,.32); border-radius: 5px; color: #e7f3e4; background: rgba(73,145,79,.3); font-size: .7rem; }

@keyframes mock-time-pulse { 0%, 100% { opacity: .72; box-shadow: 0 0 0 0 rgba(137,209,133,0); } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(137,209,133,.1); } }
@keyframes mock-log-dot { 0%, 100% { opacity: .68; box-shadow: 0 0 0 0 rgba(99,196,119,0); } 50% { opacity: 1; box-shadow: 0 0 0 3px rgba(99,196,119,.12); } }
@keyframes mock-source-edge-flow { 0%, 3%, 34%, 100% { stroke: #666; stroke-dashoffset: 0; } 6%, 31% { stroke: #89d185; stroke-dashoffset: -52; } }
@keyframes mock-enriched-edge-flow { 0%, 42%, 77%, 100% { stroke: #666; stroke-dashoffset: 0; } 46%, 73% { stroke: #89d185; stroke-dashoffset: -52; } }
@keyframes mock-source-node-run { 0%, 3%, 23%, 100% { border-color: #3c3c3c; box-shadow: 0 2px 8px rgba(0,0,0,.35); } 6%, 20% { border-color: #75a774; box-shadow: 0 0 0 2px rgba(137,209,133,.13), 0 4px 12px rgba(0,0,0,.35); } }
@keyframes mock-raw-node-run { 0%, 20%, 42%, 100% { border-color: #3c3c3c; box-shadow: 0 2px 8px rgba(0,0,0,.35); } 24%, 39% { border-color: #75a774; box-shadow: 0 0 0 2px rgba(137,209,133,.13), 0 4px 12px rgba(0,0,0,.35); } }
@keyframes mock-qwen-node-run { 0%, 31%, 61%, 100% { border-color: #3c3c3c; box-shadow: 0 2px 8px rgba(0,0,0,.35); } 36%, 57% { border-color: #75a774; box-shadow: 0 0 0 2px rgba(137,209,133,.13), 0 4px 12px rgba(0,0,0,.35); } }
@keyframes mock-db-node-run { 0%, 55%, 83%, 100% { border-color: #3c3c3c; box-shadow: 0 2px 8px rgba(0,0,0,.35); } 61%, 79% { border-color: #75a774; box-shadow: 0 0 0 2px rgba(137,209,133,.13), 0 4px 12px rgba(0,0,0,.35); } }
@keyframes mock-source-log { 0%, 3%, 96%, 100% { opacity: 0; transform: translateY(-4px); } 6%, 91% { opacity: 1; transform: translateY(0); } }
@keyframes mock-raw-log { 0%, 21%, 96%, 100% { opacity: 0; transform: translateY(-4px); } 25%, 91% { opacity: 1; transform: translateY(0); } }
@keyframes mock-qwen-log { 0%, 34%, 96%, 100% { opacity: 0; transform: translateY(-4px); } 38%, 91% { opacity: 1; transform: translateY(0); } }
@keyframes mock-db-log { 0%, 58%, 96%, 100% { opacity: 0; transform: translateY(-4px); } 62%, 91% { opacity: 1; transform: translateY(0); } }
@keyframes mock-source-lines { 0%, 5% { clip-path: inset(0 0 100% 0); } 9% { clip-path: inset(0 0 66% 0); } 13% { clip-path: inset(0 0 33% 0); } 17%, 93% { clip-path: inset(0); } 96%, 100% { clip-path: inset(0 0 100% 0); } }
@keyframes mock-raw-lines { 0%, 24% { clip-path: inset(0 0 100% 0); } 28% { clip-path: inset(0 0 66% 0); } 32% { clip-path: inset(0 0 33% 0); } 36%, 93% { clip-path: inset(0); } 96%, 100% { clip-path: inset(0 0 100% 0); } }
@keyframes mock-qwen-lines { 0%, 37% { clip-path: inset(0 0 100% 0); } 42% { clip-path: inset(0 0 66% 0); } 47% { clip-path: inset(0 0 33% 0); } 52%, 93% { clip-path: inset(0); } 96%, 100% { clip-path: inset(0 0 100% 0); } }
@keyframes mock-db-lines { 0%, 61% { clip-path: inset(0 0 100% 0); } 66% { clip-path: inset(0 0 66% 0); } 71% { clip-path: inset(0 0 33% 0); } 76%, 93% { clip-path: inset(0); } 96%, 100% { clip-path: inset(0 0 100% 0); } }

/* Three square stages line up with the hero frame and continue its architectural grid. */
.flow-strip { display: grid; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #171717; }
.flow-strip > div { position: relative; display: flex; min-width: 0; min-height: clamp(300px, 29vw, 350px); flex-direction: column; justify-content: flex-end; padding: clamp(28px, 3vw, 42px); }
.flow-strip > div + div { border-left: 1px solid var(--line); }
.flow-strip .flow-icon { display: grid; width: 58px; height: 58px; margin-bottom: 24px; place-items: center; border: 1px solid #383838; border-radius: 12px; color: var(--accent); background: #1d1d1d; }
.flow-strip .flow-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.flow-strip strong { display: block; margin: 0 0 12px; color: var(--ink); font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 720; letter-spacing: -0.025em; }
.flow-strip p { max-width: 34em; margin: 0; color: var(--muted); font-size: clamp(.76rem, 1.05vw, .88rem); line-height: 1.7; }

/* "Own the code": explainer beside a mirror of the pipeline code viewer. Shares the hero's
   width so the two screenshots line up down the page. */
.principles-grid { display: flex; flex-direction: column; }
.principles-grid :is(.library-copy, .agnostic-window, .own-code-copy) { order: 1; }
.principles-grid :is(.library-window, .agnostic-copy, .own-code-window) { order: 2; }
.own-code-section { display: grid; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; border-bottom: 1px solid var(--line); }
.own-code-section > *, .library-section > * { min-height: 0; aspect-ratio: 1; }
/* The copy halves carry the hero's dot field so the text sits on the same ground the product
   shot floats above; the screenshot halves stay flat so the dots never show through a mock.
   As in the hero, a wash of the page colour sits between the dots and the words — the field
   stays legible at the panel edges and quiets down where the text runs. */
.own-code-copy, .library-copy, .agnostic-copy { position: relative; background-color: #171717; background-image: radial-gradient(#454545 .75px, transparent .75px); background-size: 16px 16px; }
.own-code-copy::before, .library-copy::before, .agnostic-copy::before { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(23,23,23,.68) 0%, rgba(23,23,23,.65) 26%, rgba(23,23,23,.57) 45%, rgba(23,23,23,.44) 62%, rgba(23,23,23,.27) 79%, rgba(23,23,23,.11) 91%, transparent 100%); content: ""; pointer-events: none; }
.own-code-copy > *, .library-copy > *, .agnostic-copy > * { position: relative; }
.own-code-copy { display: flex; justify-content: center; flex-direction: column; padding: clamp(36px, 5vw, 64px); }
.own-code-copy h2 { margin: 0 0 18px; color: var(--ink); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 720; letter-spacing: -0.03em; line-height: 1.15; }
.own-code-copy > p:not(.section-kicker) { margin: 0 0 16px; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.own-code-copy ul { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.own-code-copy li { display: grid; align-items: baseline; grid-template-columns: 30px minmax(0, 1fr); padding: 6px 0; }
.own-code-copy li span { color: var(--accent); font: 740 .56rem var(--mono); }
.own-code-copy li strong { color: var(--ink); font-size: .76rem; font-weight: 700; }
.own-code-copy li small { grid-column: 2; margin-top: 4px; color: var(--subtle); font-size: .68rem; line-height: 1.55; }

.own-code-window { display: grid; min-width: 0; grid-template-rows: 44px minmax(0, 1fr); overflow: hidden; border-left: 1px solid var(--line); color: #e6e6e6; background: #1e1e1e; }
.own-code-bar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #333; padding: 0 12px; background: #171717; }
.own-code-path { display: flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; color: #b0b0b0; font-size: .55rem; white-space: nowrap; }
.own-code-path b { color: #b8b8b8; font-weight: 500; }.own-code-path i { color: #666; font-style: normal; }.own-code-path strong { overflow: hidden; color: #e6e6e6; text-overflow: ellipsis; }
.own-code-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.own-code-actions em { display: inline-flex; min-height: 26px; align-items: center; border: 1px solid #454545; border-radius: 6px; padding: 0 9px; color: #d0d0d0; background: #2d2d30; font-size: .48rem; font-style: normal; font-weight: 700; }
.own-code-actions .is-primary { border-color: rgba(137,209,133,.32); color: #e7f3e4; background: rgba(73,145,79,.2); }
.own-code-body { display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); }
.own-code-tree { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-right: 1px solid #333; background: #171717; }
.own-code-tree > header { display: flex; align-items: center; justify-content: space-between; padding: 11px 11px 9px; color: #8f8f8f; font-size: .42rem; font-weight: 750; letter-spacing: .08em; }
.own-code-tree > header small { font: inherit; letter-spacing: 0; }
.own-code-root { padding: 5px 11px; color: #cfcfcf; font: 700 .48rem var(--mono); }
.own-code-folder, .own-code-file { display: flex; min-width: 0; align-items: center; gap: 6px; padding: 4px 11px 4px 18px; overflow: hidden; color: #b0b0b0; font: 500 .47rem var(--mono); white-space: nowrap; }
.own-code-folder { color: #cfcfcf; font-weight: 700; }
.own-code-folder.is-closed { color: #9a9a9a; }
.own-code-folder.is-l2 { padding-left: 30px; }
.own-code-file.is-l3 { padding-left: 42px; }
.own-code-file i { display: grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; border-radius: 3px; color: #89d185; background: rgba(137,209,133,.12); font: 700 .36rem var(--mono); font-style: normal; }
.own-code-file.is-active { color: #e6e6e6; background: #232323; box-shadow: inset 2px 0 var(--accent); }
.own-code-viewer { display: grid; min-width: 0; grid-template-rows: 32px minmax(0, 1fr); }
.own-code-tabs { display: flex; min-width: 0; align-items: stretch; overflow: hidden; border-bottom: 1px solid #333; background: #171717; }
.own-code-tabs b { padding: 0 12px; border-right: 1px solid #333; color: #9a9a9a; font: 650 .47rem var(--mono); line-height: 31px; white-space: nowrap; }
.own-code-tabs b.is-active { color: #e6e6e6; background: #1e1e1e; box-shadow: inset 0 2px var(--accent); }
.own-code-source { margin: 0; min-width: 0; overflow: hidden; padding: 14px 16px; color: #d4d4d4; font: .47rem/1.85 var(--mono); tab-size: 4; }
.own-code-source .tok-com { color: #6a9955; }
.own-code-source .tok-key { color: #c586c0; }
.own-code-source .tok-str { color: #ce9178; }
.own-code-source .tok-fn { color: #dcdcaa; }

/* Maintained sources: the Source Library table on the left, explainer on the right. Same
   width as the hero and the code section above it. */
.library-section { display: grid; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; border-bottom: 1px solid var(--line); }
.library-window { display: grid; min-width: 0; grid-template-rows: 56px minmax(0, 1fr); overflow: hidden; border-left: 1px solid var(--line); color: #e6e6e6; background: #171717; }
.library-bar { display: flex; min-height: 56px; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #333; padding: 0 13px; background: #171717; }
.library-heading { display: flex; min-width: 0; align-items: center; gap: 10px; }
.library-heading > i { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid #3c3c3c; border-radius: 6px; color: #cacaca; background: #1e1e1e; font-style: normal; }
.library-heading > i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.library-heading > span { min-width: 0; }
.library-heading strong, .library-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-heading strong { margin-bottom: 4px; color: #f0f0f0; font-size: .68rem; font-weight: 600; }
.library-heading small { color: #b0b0b0; font-size: .48rem; }
.library-table { display: grid; min-width: 0; min-height: 0; align-content: start; grid-template-rows: 28px repeat(12, 42px); background: #171717; }
.library-head, .library-row { display: grid; min-width: 0; align-items: center; gap: 12px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) 104px 76px 70px 12px; padding: 0 13px; }
.library-head { min-height: 28px; border-bottom: 1px solid #333; color: #b0b0b0; background: #171717; font-size: .4rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.library-row { min-height: 42px; border-bottom: 1px solid #292929; background: #171717; }
.library-row.is-linked { background: #1e1e1e; box-shadow: inset 2px 0 var(--accent); }
.library-row > span { min-width: 0; overflow: hidden; }
.library-row strong { display: block; overflow: hidden; color: #e6e6e6; font-size: .55rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.library-row small { display: block; margin-top: 3px; overflow: hidden; color: #8f8f8f; font-size: .45rem; text-overflow: ellipsis; white-space: nowrap; }
.library-url { overflow: hidden; color: #9a9a9a; font: .47rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.library-owner { display: inline-block; max-width: 100%; overflow: hidden; border-radius: 5px; padding: 4px 7px; font-size: .44rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.library-owner.is-government { color: #f2a35a; background: rgba(242, 145, 60, .14); }
.library-owner.is-corporate { color: #72aef5; background: rgba(72, 135, 220, .15); }
.library-state { display: flex; align-items: center; gap: 6px; color: #b0b0b0; font-size: .47rem; white-space: nowrap; }
.library-state i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--ok); }
.library-link-state { overflow: hidden; color: #b0b0b0; font-size: .47rem; text-overflow: ellipsis; white-space: nowrap; }
.library-link-state.is-linked { color: #89d185; font-weight: 700; }
.library-arrow { color: #89d185; font-size: .64rem; }
.library-copy { display: flex; justify-content: center; flex-direction: column; padding: clamp(36px, 5vw, 64px); }
.library-copy h2 { margin: 0 0 18px; color: var(--ink); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 720; letter-spacing: -0.03em; line-height: 1.15; }
.library-copy > p:not(.section-kicker) { margin: 0 0 16px; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.library-copy ul { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.library-copy li { padding: 6px 0 6px 20px; }
.library-copy li::before { float: left; margin-left: -20px; color: var(--accent); content: "✓"; font-size: .68rem; }
.library-copy li strong { display: block; color: var(--ink); font-size: .76rem; font-weight: 700; }
.library-copy li small { display: block; margin-top: 4px; color: var(--subtle); font-size: .68rem; line-height: 1.55; }

/* Model and storage agnostic: a provider catalog using the same dense, ruled rows as the Source
   Library. Model and data connections share one list because they are equally swappable inputs
   to generated pipeline code. Mock on the left, explainer on the right. */
.agnostic-section { display: grid; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; border-bottom: 1px solid var(--line); }
.agnostic-section > * { min-height: 0; aspect-ratio: 1; }
.agnostic-window { min-width: 0; overflow: hidden; color: #e6e6e6; background: #171717; }
.agnostic-table { display: grid; min-width: 0; min-height: 0; align-content: start; grid-template-rows: 28px repeat(12, 42px); background: #171717; }
.agnostic-head, .agnostic-row { display: grid; min-width: 0; align-items: center; gap: 0; grid-template-columns: minmax(0, 1.05fr) 84px minmax(0, 1.45fr) 36px; padding: 0; }
.agnostic-head { min-height: 28px; border-bottom: 1px solid #333; color: #c3c3c3; font-size: .5rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.agnostic-row { min-height: 42px; border-bottom: 1px solid #292929; background: #171717; }
.agnostic-row:hover { background: #1e1e1e; box-shadow: inset 2px 0 var(--accent); }
.agnostic-head > span, .agnostic-row > span { display: flex; height: 100%; min-width: 0; align-items: center; overflow: hidden; padding-inline: 11px; }
.agnostic-head > span:first-child, .agnostic-row > span:first-child { padding-left: 13px; }
.agnostic-head > span:last-child, .agnostic-row > span:last-child { padding-right: 13px; }
.agnostic-head > span + span, .agnostic-row > span + span { border-left: 1px solid #292929; }
.agnostic-provider { display: flex; align-items: center; gap: 9px; }
.agnostic-provider strong { overflow: hidden; color: #e6e6e6; font-size: .55rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.provider-logo { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid #363636; border-radius: 6px; background: #222; font-style: normal; }
.provider-logo img { display: block; width: 15px; height: 15px; object-fit: contain; }
.provider-logo-wide img { width: 19px; height: 13px; }
.agnostic-kind { display: inline-block; max-width: 100%; overflow: hidden; border-radius: 5px; padding: 4px 7px; font-size: .44rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.agnostic-kind.is-model { color: #c8b6ff; background: rgba(145, 112, 238, .12); }
.agnostic-kind.is-data { color: #89d185; background: rgba(137, 209, 133, .12); }
.agnostic-catalog { overflow: hidden; color: #9a9a9a; font: .47rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.agnostic-arrow { justify-content: flex-end; color: #707070; font-size: .7rem; text-align: right; }
/* This section runs mock-then-copy, but the divider still belongs to the inner column's left
   edge, so it lands on the same pixel as the Source Library's and Own the code's. */
.agnostic-copy { display: flex; justify-content: center; flex-direction: column; border-left: 1px solid var(--line); padding: clamp(36px, 5vw, 64px); }
.agnostic-copy h2 { margin: 0 0 18px; color: var(--ink); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 720; letter-spacing: -0.03em; line-height: 1.15; }
.agnostic-copy > p:not(.section-kicker) { margin: 0 0 16px; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.agnostic-copy ul { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.agnostic-copy li { padding: 6px 0 6px 20px; }
.agnostic-copy li:last-child { border-bottom: 0; }
.agnostic-copy li::before { float: left; margin-left: -20px; color: var(--accent); content: "✓"; font-size: .68rem; }
.agnostic-copy li strong { display: block; color: var(--ink); font-size: .76rem; font-weight: 700; }
.agnostic-copy li small { display: block; margin-top: 4px; color: var(--subtle); font-size: .68rem; line-height: 1.55; }

.features-section { width: min(1280px, calc(100vw - 32px)); margin: 0 auto; padding: 0; text-align: center; }
.section-kicker { margin: 0 0 13px; color: var(--accent); font-size: 0.58rem; font-weight: 780; letter-spacing: 0.14em; }
.features-section > .section-kicker, .features-section > h2 { padding-inline: clamp(20px, 3vw, 38px); }
.features-section > h2 { margin: 0 auto 48px; max-width: 760px; color: var(--ink); font-size: clamp(1.6rem, 3.4vw, 2.25rem); font-weight: 720; letter-spacing: -0.03em; line-height: 1.2; }
/* Cells divided by hairlines rather than floating cards, so the grid reads with the rails. */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 0; text-align: left; }
.feature-grid article { border: 0; border-radius: 0; padding: 30px clamp(20px, 3vw, 38px); background: transparent; }
.feature-grid article + article { border-left: 1px solid var(--line); }
.feature-grid article:nth-child(3n+1) { border-left: 0; }
.feature-grid article:nth-child(n+4) { border-top: 1px solid var(--line); }
.feature-grid article:hover { background: #1c1c1c; }
.feature-icon { display: grid; width: 34px; height: 34px; margin-bottom: 16px; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-tint); }
.feature-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-grid h3 { margin: 0 0 7px; color: var(--ink); font-size: .82rem; font-weight: 720; letter-spacing: -0.015em; }
.feature-grid p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.62; }

.is-desktop-runtime :is([data-desktop-download], [data-download-menu], .desktop-download-settings-panel) { display: none !important; }

/* Desktop download platform picker */
.download-menu { position: relative; display: inline-flex; }
.download-chevron { width: 13px; height: 13px; margin-right: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.download-menu.is-open .download-chevron { transform: rotate(180deg); }
/* text-align is reset because the hero centres its copy and that would cascade in here. */
.download-panel { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: max(348px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.5); text-align: left; }
.download-panel.is-center { left: 50%; transform: translateX(-50%); }
.download-panel-title { margin: 0; padding: 8px 10px 9px; color: var(--subtle); font-size: .58rem; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
/* Downloads are closed: the panel still names the three builds so the roadmap is legible, but
   every row is inert and the flag says so before anyone reaches for one. */
.download-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.download-panel-flag { flex: 0 0 auto; border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 8px; color: var(--accent); background: var(--accent-tint); font-size: .5rem; font-weight: 740; letter-spacing: .06em; }
.download-panel-note { margin: 0 0 4px; padding: 0 10px 9px; color: var(--subtle); font-size: .62rem; line-height: 1.5; text-transform: none; }
.download-option[aria-disabled="true"] { cursor: default; opacity: .5; }
.download-option[aria-disabled="true"]:hover { background: transparent; }
.download-option[aria-disabled="true"]:hover .download-mark { border-color: var(--line); color: var(--muted); }
.download-option { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-radius: 7px; padding: 9px 10px; color: inherit; text-decoration: none; }
.download-option:hover, .download-option:focus-visible { background: var(--raised); outline: none; }
.download-option:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-line); }
.platform-logo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.download-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--sunken); }
.download-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.download-mark .platform-logo { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.download-option:hover .download-mark { border-color: var(--accent-line); color: var(--accent); }
.download-option-text { min-width: 0; }
.download-option-text strong { display: block; color: var(--ink); font-size: .76rem; font-weight: 700; letter-spacing: -0.012em; }
.download-option-text small { display: block; margin-top: 2px; color: var(--subtle); font-size: .62rem; }
.download-option em { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--muted); background: var(--sunken); font: 640 .58rem var(--mono); font-style: normal; }
/* The visitor's own platform is marked rather than hidden: all three stay downloadable. */
.download-option[data-download-detected] .download-option-text strong::after { margin-left: 7px; border: 1px solid var(--accent-line); border-radius: 999px; padding: 1px 6px; color: var(--accent); background: var(--accent-tint); content: "Detected"; font-size: .5rem; font-weight: 740; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }

.site-footer { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 max(20px, calc((100% - 1240px) / 2)); color: var(--subtle); background: transparent; font-size: 0.66rem; }
.site-footer p { margin: 0; }
.site-footer .site-brand { font-size: .77rem; }
.site-footer .pipe-logo { width: 22px; height: 22px; flex-basis: 22px; }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* Interior pages (documentation, pricing) are built from the landing page's parts rather than
   their own: the same 1280px content column between the page rails, the same dot field and scrim
   behind display copy, the same monospace index marks, and hairlines instead of floating cards. */
.page-hero { position: relative; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; padding: clamp(38px, 4.6vw, 62px) clamp(20px, 4vw, 58px) clamp(52px, 6vw, 78px); background-color: #171717; background-image: radial-gradient(#454545 .75px, transparent .75px); background-size: 16px 16px; text-align: center; }
.page-hero::before { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(23,23,23,.68) 0%, rgba(23,23,23,.65) 26%, rgba(23,23,23,.57) 45%, rgba(23,23,23,.44) 62%, rgba(23,23,23,.27) 79%, rgba(23,23,23,.11) 91%, transparent 100%); content: ""; pointer-events: none; }
.page-hero > * { position: relative; }
.page-hero .section-kicker { margin-bottom: 16px; font: 700 .5rem/1 var(--mono); letter-spacing: .16em; }
.page-hero h1 { margin: 0 auto 20px; max-width: 900px; color: var(--ink); font-size: clamp(1.5rem, 3.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.14; }
/* The same boxed word as the landing headline, in the accent rather than the alert colour. */
.page-hero-copy { font-weight: 300; opacity: .8; }
.page-hero h1 .page-hero-tag { display: inline-block; border: 2px solid rgba(137,209,133,.42); border-radius: .16em; padding: .04em .2em .08em; background: rgba(73,145,79,.2); }
.page-hero-lead { max-width: 700px; margin: 0 auto; color: var(--muted); font-size: clamp(.82rem, 1.3vw, .92rem); font-weight: 300; line-height: 1.7; opacity: .85; }
/* Repository mark, standing in for a kicker above the headline. */
.page-hero-repo { display: inline-grid; width: 42px; height: 42px; margin: 0 auto 18px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--paper); transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.page-hero-repo:hover, .page-hero-repo:focus-visible { border-color: var(--accent-line); color: var(--accent); background: var(--accent-tint); outline: none; }
.page-hero-repo svg { width: 21px; height: 21px; fill: currentColor; }

/* Closing call to action, set like a landing section rather than a card. */
.page-cta { position: relative; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(48px, 6vw, 76px) clamp(20px, 4vw, 58px); background-color: #171717; background-image: radial-gradient(#454545 .75px, transparent .75px); background-size: 16px 16px; text-align: center; }
.page-cta::before { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(23,23,23,.68) 0%, rgba(23,23,23,.65) 26%, rgba(23,23,23,.57) 45%, rgba(23,23,23,.44) 62%, rgba(23,23,23,.27) 79%, rgba(23,23,23,.11) 91%, transparent 100%); content: ""; pointer-events: none; }
.page-cta > * { position: relative; }
.page-cta h2 { margin: 0 0 10px; color: var(--ink); font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 560; letter-spacing: -0.022em; }
.page-cta p { margin: 0 auto 24px; max-width: 560px; color: var(--muted); font-size: .8rem; font-weight: 300; line-height: 1.7; }
.page-cta .button { text-decoration: none; }

/* The landing marks each section with a counted band; here one band does the same job for the
   whole page, sticking under the header and naming the section you are currently reading. It
   carries the rails' hairlines on its own edges so the column never breaks where it sits. */
.docs-marker-band { position: sticky; z-index: 20; top: 59px; display: flex; width: min(1280px, calc(100vw - 32px)); height: 56px; margin: 0 auto; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--rail); border-right: 1px solid var(--rail); background: rgba(23, 23, 23, .96); backdrop-filter: blur(8px); }
.docs-marker-band .hero-section-marker-inner { width: 100%; }
.docs-marker-band .hero-section-marker-inner::before { height: 24px; }

.docs-shell { display: grid; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; grid-template-columns: 236px minmax(0, 1fr); }
.docs-rail { min-width: 0; border-right: 1px solid var(--line); }
.docs-rail nav { position: sticky; top: 116px; display: grid; padding: clamp(26px, 3vw, 40px) 0 40px; counter-reset: docs-rail-item; }
.docs-rail-title { margin: 0 0 14px; padding: 0 clamp(16px, 1.8vw, 26px); color: var(--subtle); font: 700 .5rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.docs-rail a { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; gap: 9px; border-left: 2px solid transparent; padding: 9px clamp(14px, 1.6vw, 24px); color: var(--muted); font: 600 .66rem var(--mono); letter-spacing: -0.012em; text-decoration: none; counter-increment: docs-rail-item; }
.docs-rail a::before { color: var(--subtle); content: counter(docs-rail-item, decimal-leading-zero); font-size: .56rem; font-weight: 740; }
.docs-rail a:hover { border-left-color: var(--accent-line); color: var(--ink); background: #1c1c1c; }
.docs-rail a.is-active { border-left-color: var(--accent); color: var(--accent-strong); background: var(--accent-tint); }
.docs-rail a.is-active::before { color: var(--accent); }

.docs-article-page { min-width: 0; padding: clamp(26px, 3vw, 44px) clamp(20px, 3.4vw, 58px) clamp(52px, 6vw, 80px); counter-reset: docs-block; }

/* Sections read as numbered rows off a monospace gutter — the same device as the "own your code"
   list and the section markers, so the reference and the pitch share one index voice. */
.docs-block { display: grid; margin-top: 40px; grid-template-columns: 44px minmax(0, 1fr); border-top: 1px solid var(--line); padding-top: 28px; counter-increment: docs-block; scroll-margin-top: 132px; }
.docs-block:first-of-type { margin-top: 0; border-top: 0; padding-top: 4px; }
.docs-block > * { grid-column: 2; }
.docs-block::before { grid-column: 1; grid-row: 1; align-self: baseline; color: var(--accent); content: "[" counter(docs-block, decimal-leading-zero) "]"; font: 740 .56rem var(--mono); }
.docs-block h2 { margin: 0 0 14px; color: var(--ink); font-size: clamp(1.1rem, 2vw, 1.32rem); font-weight: 560; letter-spacing: -0.022em; line-height: 1.2; }
.docs-block h3 { margin: 26px 0 10px; color: var(--ink); font: 640 .74rem var(--mono); letter-spacing: -0.01em; }
.docs-block p { max-width: 720px; margin: 0 0 14px; color: var(--muted); font-size: .8rem; line-height: 1.72; }
.docs-block p:last-child { margin-bottom: 0; }
.docs-block code { border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink); background: var(--raised); font: .72rem var(--mono); }
.docs-inline-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.docs-inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Stage and term rows run the full width of the section, like the library table and the code
   list on the landing page, so their hairlines land on the same edges as the section rules.
   Only the prose inside them is held to a reading measure. */
.docs-stages { display: grid; gap: 0; margin: 0 0 16px; padding: 0; counter-reset: docs-stage; list-style: none; }
.docs-stages li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; border-top: 1px solid var(--line); padding: 13px 0; counter-increment: docs-stage; }
.docs-stages li:last-child { border-bottom: 1px solid var(--line); }
.docs-stages li::before { grid-row: 1 / 3; color: var(--accent); content: "0" counter(docs-stage); font: 740 .56rem var(--mono); }
.docs-stages b { color: var(--ink); font: 640 .7rem var(--mono); letter-spacing: -0.01em; }
.docs-stages span { max-width: 640px; color: var(--muted); font-size: .74rem; line-height: 1.6; }

.docs-terms { margin: 0 0 16px; }
.docs-terms > div { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 4px 20px; border-top: 1px solid var(--line); padding: 13px 0; }
.docs-terms > div:last-child { border-bottom: 1px solid var(--line); }
.docs-terms dt { color: var(--ink); font: 640 .7rem var(--mono); letter-spacing: -0.01em; }
.docs-terms dd { max-width: 640px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.62; }

/* Squared off and lit from a single accent tick, matching the marker bands rather than a card. */
.docs-block p.docs-callout { max-width: 780px; border: 0; border-left: 2px solid var(--accent); border-radius: 0; padding: 13px 18px 13px 17px; background: linear-gradient(90deg, var(--accent-tint), rgba(137, 209, 133, 0) 88%); }
.docs-callout > b:first-child { display: block; margin-bottom: 4px; }
.docs-callout b { color: var(--accent-strong); font: 700 .72rem var(--mono); letter-spacing: -0.01em; }

/* Pricing page. Plans and meters are hairline-divided cells in the content column, the same
   grid the feature strip and the source library use on the landing page. */
.plan-grid { display: grid; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.plan { display: flex; min-width: 0; flex-direction: column; padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 34px) clamp(30px, 3vw, 44px); }
.plan + .plan { border-left: 1px solid var(--line); }
.plan.is-featured { background: #1c1c1c; }
.plan-name { display: flex; min-height: 22px; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 18px; color: var(--accent); font: 700 .5rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.plan-badge { border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 8px; color: var(--accent); background: var(--accent-tint); font-size: .46rem; font-weight: 740; letter-spacing: .08em; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 6px; color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.plan-price small { color: var(--subtle); font: 600 .62rem var(--mono); letter-spacing: -0.01em; }
.plan-summary { margin: 0 0 22px; color: var(--muted); font-size: .78rem; font-weight: 300; line-height: 1.6; }
.plan .button { align-self: stretch; margin-bottom: 22px; }
.plan-features { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.plan-features li { border-top: 1px solid var(--line); padding: 11px 0 11px 20px; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.plan-features li:last-child { border-bottom: 1px solid var(--line); }
.plan-features li::before { float: left; margin-left: -20px; color: var(--accent); content: "✓"; font-size: .66rem; }
.plan-features li.is-absent { color: var(--subtle); }
.plan-features li.is-absent::before { color: #5a5a5a; content: "—"; }
.plan-features b { color: var(--ink); font-weight: 640; }
.plan-note { margin: 18px 0 0; color: var(--subtle); font-size: .66rem; line-height: 1.55; }

/* Two meters, priced per unit of work. The rate is set in the same monospace as the canvas
   labels so a number on this page reads like a number in the product. */
.meter-grid { display: grid; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.meter { min-width: 0; padding: clamp(28px, 3.2vw, 44px) clamp(20px, 3vw, 44px); }
.meter + .meter { border-left: 1px solid var(--line); }
.meter-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--accent); font: 700 .5rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.meter-label i { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 7px; background: var(--accent-tint); font-size: .6rem; font-style: normal; }
.meter h3 { margin: 0 0 10px; color: var(--ink); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 560; letter-spacing: -0.022em; }
.meter > p { max-width: 560px; margin: 0 0 20px; color: var(--muted); font-size: .78rem; font-weight: 300; line-height: 1.65; }
.meter-rates { display: grid; gap: 0; margin: 0 0 18px; padding: 0; list-style: none; }
.meter-rates li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 18px; border-top: 1px solid var(--line); padding: 13px 0; }
.meter-rates li:last-child { border-bottom: 1px solid var(--line); }
.meter-rates b { color: var(--ink); font: 640 .7rem var(--mono); letter-spacing: -0.01em; }
.meter-rates strong { color: var(--accent-strong); font: 660 .82rem var(--mono); letter-spacing: -0.02em; white-space: nowrap; }
.meter-rates small { grid-column: 1 / -1; color: var(--subtle); font-size: .66rem; line-height: 1.5; }
.meter-example { margin: 0; border-left: 2px solid var(--accent); padding: 11px 16px 11px 15px; background: linear-gradient(90deg, var(--accent-tint), rgba(137, 209, 133, 0) 88%); color: var(--muted); font-size: .72rem; line-height: 1.6; }
.meter-example b { display: block; margin-bottom: 3px; color: var(--accent-strong); font: 700 .64rem var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.meter-example em { color: var(--ink); font-style: normal; font-weight: 640; }

/* Copy beside a product mock, the landing page's explainer shape. Alternating .is-reversed puts
   the mock on the left so consecutive sections read as a pair rather than a repeat. */
.split-section { display: grid; width: min(1280px, calc(100vw - 32px)); margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; border-bottom: 1px solid var(--line); }
.split-copy { position: relative; display: flex; justify-content: center; flex-direction: column; padding: clamp(36px, 4.4vw, 60px) clamp(20px, 3vw, 48px); background-color: #171717; background-image: radial-gradient(#454545 .75px, transparent .75px); background-size: 16px 16px; }
.split-copy::before { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(23,23,23,.68) 0%, rgba(23,23,23,.65) 26%, rgba(23,23,23,.57) 45%, rgba(23,23,23,.44) 62%, rgba(23,23,23,.27) 79%, rgba(23,23,23,.11) 91%, transparent 100%); content: ""; pointer-events: none; }
.split-copy > * { position: relative; }
.split-copy .section-kicker { margin-bottom: 15px; font: 700 .5rem/1 var(--mono); letter-spacing: .16em; }
.split-copy h2 { margin: 0 0 16px; color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 560; letter-spacing: -0.022em; line-height: 1.16; }
.split-copy > p { max-width: 520px; margin: 0 0 16px; color: var(--muted); font-size: .78rem; font-weight: 300; line-height: 1.7; }
.split-copy ol { display: grid; gap: 0; margin: 22px 0 0; padding: 0; counter-reset: split-step; list-style: none; }
.split-copy li { display: grid; align-items: baseline; grid-template-columns: 30px minmax(0, 1fr); border-top: 1px solid var(--line); padding: 13px 0; counter-increment: split-step; }
.split-copy li:last-child { border-bottom: 1px solid var(--line); }
.split-copy li::before { color: var(--accent); content: "0" counter(split-step); font: 740 .56rem var(--mono); }
.split-copy li strong { color: var(--ink); font: 640 .7rem var(--mono); letter-spacing: -0.01em; }
.split-copy li small { grid-column: 2; margin-top: 4px; color: var(--subtle); font-size: .68rem; line-height: 1.55; }
/* Inline code in marketing prose, sized relative to whatever it sits in. */
:is(.split-copy, .split-foot, .statement-copy, .page-cta) code { border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink); background: var(--raised); font-family: var(--mono); font-size: .92em; }
.split-window { display: flex; min-width: 0; flex-direction: column; border-left: 1px solid var(--line); background: #1e1e1e; }
.split-section.is-reversed .split-copy { order: 2; border-left: 1px solid var(--line); }
.split-section.is-reversed .split-window { order: 1; border-left: 0; }
.split-bar { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #333; padding: 0 14px; background: #171717; }
.split-bar strong { color: #d2d2d2; font-size: .55rem; font-weight: 500; }
.split-bar em { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(137,209,133,.32); border-radius: 999px; padding: 3px 9px; color: #a6d6a0; background: rgba(73,145,79,.2); font-size: .46rem; font-style: normal; font-weight: 700; }
.split-bar em i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
.split-body { display: grid; flex: 1; align-content: center; gap: 0; padding: clamp(18px, 2.4vw, 30px) clamp(16px, 2.4vw, 34px); }
.split-body-title { margin: 0 0 6px; color: #7c7c7c; font: 700 .48rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.credit-balance { margin-bottom: 4px; padding-bottom: 18px; }
.credit-balance b { display: block; margin-bottom: 8px; color: #7c7c7c; font: 700 .48rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.credit-balance strong { display: block; color: var(--accent); font: 500 clamp(1.9rem, 3.4vw, 2.6rem) var(--mono); letter-spacing: -0.04em; line-height: 1; }
.credit-balance small { display: block; margin-top: 9px; color: #8b8b8b; font-size: .58rem; }
.credit-topup { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; border: 1px solid #333; border-radius: 8px; padding: 11px 12px; background: #191919; }
.credit-topup > span { display: grid; gap: 3px; }
.credit-topup b { color: #d8d8d8; font: 620 .6rem var(--mono); letter-spacing: -0.01em; }
.credit-topup small { color: #8b8b8b; font-size: .55rem; }
.credit-switch { display: inline-flex; width: 34px; height: 19px; flex: 0 0 34px; align-items: center; justify-content: flex-end; border: 1px solid rgba(137,209,133,.42); border-radius: 999px; padding: 0 2px; background: rgba(73,145,79,.32); }
.credit-switch i { width: 13px; height: 13px; border-radius: 50%; background: var(--accent-strong); }
.readout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 16px; border-top: 1px solid #2c2c2c; padding: 15px 0; }
.readout:last-child { border-bottom: 1px solid #2c2c2c; }
.readout b { grid-area: 1 / 1; color: #d8d8d8; font: 620 .62rem var(--mono); letter-spacing: -0.01em; }
.readout span { grid-area: 2 / 1; color: #8b8b8b; font-size: .58rem; }
.readout strong { grid-area: 1 / 2 / 3 / 3; align-self: center; color: var(--accent); font: 660 1.05rem var(--mono); letter-spacing: -0.02em; text-align: right; }
.readout.is-quiet strong { color: #b0b0b0; font-size: .68rem; }
/* Only the balance carries the accent; what drew it down stays neutral. */
.readout.is-spend strong { color: #b0b0b0; }
.split-foot { border-top: 1px solid #333; padding: 12px 14px; color: #8b8b8b; background: #171717; font-size: .55rem; line-height: 1.5; }

/* Panels that fill a .split-window edge to edge rather than sitting in its padded body:
   the exported project tree, a source excerpt, and a terminal. */
.split-window > .tree-panel, .split-window > .code-panel, .split-window > .term-panel { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
.tree-panel { padding: 8px 0 clamp(14px, 1.8vw, 22px); background: #171717; }
.tree-row { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 4px clamp(14px, 2vw, 26px); overflow: hidden; color: #d6d6d6; font: 500 .66rem var(--mono); white-space: nowrap; }
.tree-row.is-dir { color: #ededed; font-weight: 700; }
.tree-row.is-l1 { padding-left: calc(clamp(14px, 2vw, 26px) + 14px); }
.tree-row.is-l2 { padding-left: calc(clamp(14px, 2vw, 26px) + 28px); }
.tree-row.is-l3 { padding-left: calc(clamp(14px, 2vw, 26px) + 42px); }
/* File marks, coloured by language the way an editor's explorer colours them: the glyph carries
   the type, so no chip behind it. Line icons take their hue from the row through currentColor;
   the Python logo is filled and carries its own two brand colours. */
.tree-row i.ft { display: grid; width: 13px; height: 13px; flex: 0 0 13px; place-items: center; }
.tree-row i.ft svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tree-row i.ft-py svg { width: 12px; height: 12px; stroke: none; }
/* Folder rows get the editor's expanded-folder chevron, dimmer than the name it opens. */
.tree-row i.ft-dir { color: #8f8f8f; }
.tree-row.is-open-source i.ft-dir { color: inherit; }
.tree-row i.ft-json { color: #cbcb41; }
.tree-row i.ft-md, .tree-row i.ft-readme { color: #519aba; }
.tree-row i.ft-txt { color: #b8b8b8; }
.tree-row i.ft-toml { color: #a074c4; }
.tree-row i.ft-docker { color: #2496ed; }
.tree-row.is-open-source { color: var(--accent-strong); background: var(--accent-tint); box-shadow: inset 2px 0 var(--accent); }
.tree-row em { margin-left: auto; padding-left: 12px; color: var(--accent); font: 700 .46rem var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.tree-note { margin: 10px clamp(14px, 2vw, 26px) 0; padding-top: 12px; border-top: 1px solid #2c2c2c; color: #8b8b8b; font-size: .58rem; line-height: 1.55; }
.tree-note b { color: var(--accent-strong); font: 700 .58rem var(--mono); }

/* The code surface sits at the page background; the tab strip goes a shade under it so the
   active tab still reads as the sheet you are looking at. */
.code-panel { background: #171717; }
.code-panel-tabs { display: flex; min-width: 0; align-items: stretch; overflow: hidden; border-bottom: 1px solid #333; background: #131313; }
.code-panel-tabs b { border-right: 1px solid #333; padding: 0 13px; color: #9a9a9a; font: 650 .55rem var(--mono); line-height: 33px; white-space: nowrap; }
.code-panel-tabs b.is-active { color: #e6e6e6; background: #171717; box-shadow: inset 0 2px var(--accent); }
.code-panel pre { min-width: 0; margin: 0; overflow: auto; padding: clamp(14px, 1.8vw, 20px) clamp(14px, 2vw, 24px); color: #d4d4d4; font: .58rem/1.8 var(--mono); tab-size: 4; }
.code-panel .tok-com { color: #6a9955; }
.code-panel .tok-key { color: #c586c0; }
.code-panel .tok-str { color: #ce9178; }
.code-panel .tok-fn { color: #dcdcaa; }

.term-panel { justify-content: center; padding: clamp(16px, 2vw, 26px) clamp(14px, 2vw, 24px); font: .58rem/1.95 var(--mono); }
.term-line { min-width: 0; overflow: hidden; color: #d0d0d0; text-overflow: ellipsis; white-space: nowrap; }
.term-line::before { margin-right: 9px; color: var(--accent); content: "$"; }
.term-line.is-output { color: #8b8b8b; }
.term-line.is-output::before { content: " "; }
.term-line .tok-com { color: #6a9955; }
.term-line b { color: #e6e6e6; font-weight: 500; }
.term-gap { height: 12px; }

/* Harness session: what the agent was given before it ran — model, working directory, tools —
   above the turns it took with them. A user turn is prompted with ">", a tool call with a dot,
   so reading down the panel you can tell who did what. */
.harness-spec { display: grid; gap: 7px; margin: 0; border-bottom: 1px solid #2c2c2c; padding: 13px clamp(14px, 2vw, 24px) 15px; font: .55rem/1.5 var(--mono); }
.harness-spec > div { display: grid; min-width: 0; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; }
.harness-spec dt { color: #6f6f6f; letter-spacing: .06em; text-transform: uppercase; }
.harness-spec dd { min-width: 0; margin: 0; overflow: hidden; color: #cfcfcf; text-overflow: ellipsis; white-space: nowrap; }
.harness-spec dd em { color: #8b8b8b; font-style: normal; }
.harness-tools { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.harness-tools b { border: 1px solid #343434; border-radius: 4px; padding: 0 5px; color: #b2b2b2; background: #232323; font-weight: 500; }
.harness-tools b.is-pipe { border-color: rgba(137,209,133,.3); color: #a6d6a0; background: rgba(73,145,79,.14); }
.term-line.is-turn::before { content: ">"; }
.term-tool { display: grid; min-width: 0; grid-template-columns: 9px minmax(0, 23ch) minmax(0, 1fr); gap: 0 8px; }
.term-tool::before { align-self: center; color: var(--accent); content: "\25CF"; font-size: .5em; }
.term-tool b { min-width: 0; overflow: hidden; color: #d0d0d0; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.term-tool span { min-width: 0; overflow: hidden; color: #8b8b8b; text-overflow: ellipsis; white-space: nowrap; }


/* A wide statement cell over a hairline row of three qualifying columns. */
.statement-section { width: min(1280px, calc(100vw - 32px)); margin: 0 auto; border-bottom: 1px solid var(--line); }
.statement-copy { padding: clamp(30px, 3.6vw, 50px) clamp(20px, 3vw, 48px) clamp(24px, 2.6vw, 34px); }
.statement-copy .section-kicker { margin-bottom: 15px; font: 700 .5rem/1 var(--mono); letter-spacing: .16em; }
.statement-copy h2 { margin: 0 0 14px; max-width: 780px; color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 560; letter-spacing: -0.022em; line-height: 1.16; }
.statement-copy p { max-width: 720px; margin: 0 0 12px; color: var(--muted); font-size: .78rem; font-weight: 300; line-height: 1.7; }
.statement-copy p:last-child { margin-bottom: 0; }
.statement-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.statement-table > div { padding: 22px clamp(20px, 3vw, 48px) 26px; }
.statement-table > div + div { border-left: 1px solid var(--line); }
.statement-table b { display: block; margin-bottom: 8px; color: var(--ink); font: 640 .68rem var(--mono); letter-spacing: -0.01em; }
.statement-table span { display: block; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.statement-table em { display: inline-block; margin-top: 10px; color: var(--accent); font-size: .62rem; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.statement-table em.is-caution { color: #d8b46a; }

/* Questions, set as the same hairline definition rows the docs use. */
.faq-section { width: min(1280px, calc(100vw - 32px)); margin: 0 auto; padding: clamp(30px, 3.6vw, 50px) clamp(20px, 3vw, 48px) clamp(36px, 4vw, 58px); border-bottom: 1px solid var(--line); }
.faq-section .section-kicker { margin-bottom: 15px; font: 700 .5rem/1 var(--mono); letter-spacing: .16em; }
.faq-section h2 { margin: 0 0 22px; color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 560; letter-spacing: -0.022em; }
.faq-list { margin: 0; }
.faq-list > div { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: 6px 28px; border-top: 1px solid var(--line); padding: 15px 0; }
.faq-list > div:last-child { border-bottom: 1px solid var(--line); }
.faq-list dt { color: var(--ink); font: 640 .7rem var(--mono); letter-spacing: -0.01em; line-height: 1.5; }
.faq-list dd { max-width: 640px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.62; }
.faq-list code { border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink); background: var(--raised); font: .68rem var(--mono); }

/* Account dialog */
/* The auth dialog sits outside #landing-view, so it repeats the marketing surface greys. */
.account-dialog { --cream: #171717; --paper: #1e1e1e; --raised: #232323; --sunken: #141414; --line: #333; width: min(430px, calc(100% - 28px)); max-height: calc(100vh - 30px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 26px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.account-dialog::backdrop { background: rgba(6, 8, 10, 0.66); backdrop-filter: blur(4px); }
.dialog-x { position: absolute; top: 16px; right: 16px; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 6px; color: var(--subtle); background: transparent; font-size: 1.1rem; }
.dialog-x:hover { color: var(--accent); background: var(--raised); }
.dialog-brand { margin-bottom: 22px; }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 7px; padding: 3px; background: var(--cream); }
.account-tabs button { min-height: 30px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 0.68rem; font-weight: 720; }
.account-tabs button.is-active { color: var(--accent); background: var(--raised); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.account-form { display: grid; }
.form-heading h2 { margin: 0 0 5px; font-size: 1.15rem; font-weight: 730; letter-spacing: -0.025em; }
.form-heading p { margin: 0 0 20px; color: var(--muted); font-size: 0.72rem; }
.account-form label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--ink); font-size: 0.63rem; font-weight: 740; }
.account-form label span { color: var(--subtle); font-weight: 550; }
.account-form input { width: 100%; min-height: 38px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; color: var(--ink); background: var(--sunken); outline: none; font-size: 0.74rem; }
.account-form input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(137, 209, 133, 0.12); }
.field-note { margin: -8px 0 13px; color: var(--subtle); font-size: 0.6rem; line-height: 1.45; }
/* Sign-ups are invite-only for now. The panel keeps the tab's shape so logging in is still one
   click away, and reads as a notice rather than a form with its fields taken out. */
.form-heading h2 { display: flex; align-items: center; gap: 9px; }
.coming-soon-pill { border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 9px; color: var(--accent); background: var(--accent-tint); font-size: .55rem; font-weight: 740; letter-spacing: .06em; }
.beta-notice { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; color: var(--muted); background: var(--sunken); font-size: .68rem; line-height: 1.5; }
.form-error { margin: 0 0 13px; border: 1px solid #6b3b36; border-radius: 6px; padding: 9px 10px; color: #e5928a; background: rgba(160, 72, 67, .14); font-size: 0.68rem; line-height: 1.45; }
.form-submit { width: 100%; margin-top: 3px; }
.form-submit:disabled { cursor: wait; opacity: 0.62; }

/* Regular-user pipeline builder */
/* The app opts back into light: :root is dark for the always-dark marketing pages. */
.user-app { display: grid; height: 100vh; grid-template-columns: 60px minmax(0, 1fr); overflow: hidden; color-scheme: light; color: #24282d; background: #f5f6f8; --pipeline-blue: #2876d2; --pipeline-border: #dfe2e7; }
.is-desktop-runtime .user-app { position: relative; height: 100vh; padding-top: 52px; }
.is-desktop-runtime .user-app::before { position: absolute; z-index: 20; top: 0; right: 0; left: 0; height: 52px; border-bottom: 1px solid #dfe2e7; background: linear-gradient(to right, #f8f9fa 60px, #fff 60px); content: ""; -webkit-app-region: drag; }
.is-desktop-runtime .pipeline-main { height: calc(100vh - 52px); }
.pipeline-sidebar { display: flex; min-height: 0; align-items: center; flex-direction: column; border-right: 1px solid #dfe2e7; padding: 15px 8px; background: #f8f9fa; }
.rail-brand { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 10px; color: #2168b5; text-decoration: none; }
.rail-brand:hover { background: #edf3fa; }
.rail-brand .pipe-logo { width: 25px; height: 25px; flex-basis: 25px; }
.workspace-nav { display: grid; gap: 8px; margin-top: 26px; }
.workspace-nav button { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 9px; color: #747c86; background: transparent; }
.workspace-nav button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workspace-nav button:hover { color: #315f91; background: #edf2f7; }
.workspace-nav button.is-active, .workspace-nav button.is-active:hover { color: #202621; background: transparent; box-shadow: none; }
.new-pipeline-button { display: flex; min-height: 36px; align-items: center; justify-content: center; gap: 8px; margin: 20px 4px 0; border: 1px solid #cbd0d7; border-radius: 7px; color: #333a42; background: #fff; box-shadow: 0 1px 2px rgba(30,39,48,.04); font-size: .68rem; font-weight: 700; }
.new-pipeline-button:hover { border-color: #8eb7e5; color: #195ea9; background: #f7fbff; }
.conversation-label { margin: 23px 10px 8px; color: #8b929b; font-size: .54rem; font-weight: 800; letter-spacing: .1em; }
.pipeline-list { display: grid; align-content: start; gap: 3px; overflow: auto; }
.pipeline-list button { display: grid; min-height: 37px; grid-template-columns: 20px minmax(0, 1fr) 10px; align-items: center; gap: 7px; border: 0; border-radius: 7px; padding: 0 9px; color: #626972; background: transparent; text-align: left; }
.pipeline-list button:hover, .pipeline-list button.is-current { color: #202832; background: #e9ebee; }
.pipeline-list button.is-current { font-weight: 700; }
.pipeline-list-icon { color: #737b85; font-size: .88rem; }
.pipeline-list button > span:nth-child(2) { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border: 1px solid #a9afb6; border-radius: 50%; }
.status-dot.is-green { border: 0; background: #2eaa68; box-shadow: 0 0 0 2px #d9f2e4; }
.sidebar-profile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; border-top: 1px solid #e0e3e7; padding: 14px 5px 0; }
.profile-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 7px; color: #fff; background: #3973a9; font-size: .68rem; font-weight: 800; }
.sidebar-profile strong, .sidebar-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile strong { margin-bottom: 2px; color: #353b43; font-size: .65rem; }.sidebar-profile small { color: #9298a0; font-size: .52rem; }
.sidebar-profile button { border: 0; color: #858c95; background: transparent; }

.pipeline-main { --pipeline-chat-width: min(clamp(560px, 42vw, 720px), calc(100% - 360px)); display: grid; height: 100vh; min-width: 0; grid-template-columns: minmax(0, 1fr) var(--pipeline-chat-width); grid-template-rows: 68px 43px minmax(300px, 1fr); overflow: hidden; background: #fff; transition: grid-template-columns .2s ease; }
.pipeline-main.is-chat-resizing { cursor: col-resize; transition: none; user-select: none; }
.pipeline-main.is-chat-resizing * { cursor: col-resize !important; }
.pipeline-main.is-app-page { grid-template-rows: 68px minmax(300px, 1fr); }
.pipeline-main.is-app-page .pipeline-workspace { grid-column: 1 / -1; grid-row: 2; }
.pipeline-main.is-app-page .key-vault-view, .pipeline-main.is-app-page .settings-view { grid-row: 2 / -1; }
.pipeline-main.is-sources-page #back-to-pipeline { display: none; }
.pipelines-list-view { min-height: 0; grid-column: 1 / -1; grid-row: 1 / -1; overflow: auto; color: #30373f; background: #f5f6f8; }
.pipelines-list-page { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 60px; }
.pipeline-catalog-panel { margin-top: 14px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 10px; background: #fff; }
.pipeline-catalog-panel > header { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 18px; padding: 0 17px; }.pipeline-catalog-panel h2, .pipeline-catalog-panel p { margin: 0; }.pipeline-catalog-panel h2 { margin-bottom: 5px; font-size: .74rem; }.pipeline-catalog-panel p { color: #899099; font-size: .52rem; }.pipeline-browser-heading { min-width: 0; }.pipeline-browser-path { display: flex; min-height: 22px; align-items: center; gap: 6px; margin-bottom: 3px; color: #9299a1; font-size: .48rem; }.pipeline-browser-path button { border: 0; padding: 2px 0; color: #3973ad; background: transparent; font: inherit; font-weight: 720; }.pipeline-browser-path button[aria-current="page"] { color: #7f8790; cursor: default; }.pipeline-browser-path strong { overflow: hidden; color: #68727c; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }.pipeline-browser-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }.pipeline-browser-header-actions > button { min-height: 30px; border: 1px solid #d2d8de; border-radius: 6px; padding: 0 10px; color: #58636e; background: #fff; font-size: .48rem; font-weight: 720; }.pipeline-browser-header-actions > button:last-of-type { border-color: #bcd1e6; color: #2869aa; background: #f3f8fd; }#delete-open-workspace { min-height: 33px; border-color: transparent; color: #9f5a53; background: transparent; font-size: .55rem; }
.pipeline-folder-tabs { display: flex; min-height: 44px; align-items: flex-end; gap: 3px; border-top: 1px solid #e5e8eb; border-bottom: 1px solid #e1e5e8; padding: 0 14px; background: #fafbfc; }.pipeline-folder-tabs button { position: relative; min-height: 43px; border: 0; padding: 0 13px; color: #737c85; background: transparent; font-size: .54rem; font-weight: 720; }.pipeline-folder-tabs button.is-active { color: #2869aa; }.pipeline-folder-tabs button.is-active::after { position: absolute; right: 9px; bottom: -1px; left: 9px; height: 2px; background: #2876d2; content: ""; }
.pipeline-folder-tabs > nav { display: flex; align-self: stretch; align-items: flex-end; gap: 3px; }
#create-folder-button, #pipeline-folder-new-pipeline { min-height: 33px; align-self: center; border: 1px solid rgba(39,99,79,.32); border-radius: 6px; padding: 0 12px; color: #27634f; background: rgba(39,99,79,.2); font-size: .63rem; font-weight: 400; transition: background-color .15s ease; }
#create-folder-button:hover, #pipeline-folder-new-pipeline:hover { background: rgba(39,99,79,.4); }
.pipeline-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e5e8eb; padding: 10px 13px; background: #fafbfc; }.pipeline-folder-tabs + #pipeline-folder-pipelines-panel .pipeline-catalog-toolbar { border-top: 0; }.pipeline-catalog-toolbar label { display: flex; width: min(360px, 100%); height: 33px; align-items: center; gap: 8px; border: 1px solid #d5dae0; border-radius: 7px; padding: 0 10px; color: #9299a1; background: #fff; }.pipeline-catalog-toolbar input { width: 100%; border: 0; color: #3e4750; background: transparent; outline: none; font-size: .56rem; }.pipeline-catalog-toolbar > button { min-height: 33px; border: 1px solid #1767bd; border-radius: 7px; padding: 0 12px; color: #fff; background: #2876d2; font-size: .51rem; font-weight: 740; }
.pipeline-catalog-table { border-top: 1px solid #e2e5e8; overflow-x: auto; }.pipeline-catalog-table-head, .pipeline-catalog-row { display: grid; min-width: 1040px; grid-template-columns: minmax(210px, 1.65fr) 112px 58px 92px 58px 140px 96px 92px 18px; align-items: center; gap: 12px; padding: 0 16px; text-align: left; }.pipeline-catalog-table-head { min-height: 36px; color: #8c939b; background: #fafbfc; font-size: .47rem; font-weight: 770; letter-spacing: .06em; text-transform: uppercase; }
.pipeline-catalog-table.is-folder-root .pipeline-catalog-table-head, .pipeline-folder-browser-row { min-width: 980px; grid-template-columns: minmax(220px, 1.6fr) 76px 70px 108px 128px minmax(130px, .9fr) minmax(130px, .9fr) 18px; }
.pipeline-folder-browser-row > span:not(.pipeline-catalog-name) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-folder-browser-row b { width: fit-content; border: 1px solid transparent; border-radius: 5px; padding: 4px 7px; color: #7b838b; background: #eef0f2; font-size: .54rem; font-weight: 500; }
.pipeline-folder-browser-row b.is-active { border-color: rgba(39,122,80,.32); color: #fff; background: rgba(39,122,80,.2); }
.pipeline-catalog-row { width: 100%; min-height: 54px; border-top: 1px solid #e8eaed; color: #69727b; background: #fff; cursor: pointer; font-size: .55rem; }.pipeline-catalog-row:hover, .pipeline-catalog-row:focus-visible { background: #f7fafe; }.pipeline-catalog-name { display: flex; min-width: 0; align-items: center; }.pipeline-catalog-name > span { min-width: 0; }.pipeline-catalog-name strong { display: block; overflow: hidden; margin: 0; color: #343e48; font-size: .63rem; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-catalog-status { width: fit-content; border: 1px solid transparent; border-radius: 999px; padding: 5px 8px; font-size: .49rem; font-weight: 400; }.pipeline-catalog-status.is-active { border-color: rgba(39,122,80,.32); color: #fff; background: rgba(39,122,80,.2); }.pipeline-catalog-status.is-inactive { border-color: rgba(170,73,63,.32); color: #fff; background: rgba(170,73,63,.2); }.pipeline-catalog-arrow { color: #6e98c2; font-size: .78rem; }
.pipeline-catalog-type { width: fit-content; border: 1px solid; border-radius: 5px; padding: 4px 7px; font-size: .52rem; font-weight: 400; white-space: nowrap; }
.pipeline-catalog-type.is-data-pipeline { border-color: rgba(40,105,170,.32); color: #fff; background: rgba(40,105,170,.2); }
.pipeline-catalog-type.is-orchestration { border-color: rgba(154,91,22,.32); color: #fff; background: rgba(154,91,22,.2); }
.pipeline-list-empty { display: grid; min-height: 150px; place-content: center; gap: 7px; color: #8b929a; text-align: center; }.pipeline-list-empty strong { color: #525b64; font-size: .66rem; }.pipeline-list-empty span { font-size: .53rem; }
.folder-storage-panel { background: #fff; }
.folder-storage-list { display: grid; gap: 10px; padding: 14px 18px 18px; }
.storage-resource-card { overflow: hidden; border: 1px solid #dce2e7; border-radius: 9px; background: #fff; }
.storage-resource-card > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 18px; padding: 0 15px; }
.storage-resource-identity { display: flex; min-width: 0; align-items: center; gap: 11px; }.storage-resource-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 8px; color: #256a61; background: #e2f2ed; font-size: .7rem; font-style: normal; font-weight: 760; }.storage-resource-identity > div { min-width: 0; }.storage-resource-identity strong, .storage-resource-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.storage-resource-identity strong { margin-bottom: 5px; color: #36414b; font-size: .63rem; }.storage-resource-identity small { color: #87919a; font-size: .47rem; }
.storage-resource-status { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #d3caa9; border-radius: 999px; padding: 5px 8px; color: #80682b; background: #fbf7e8; font-size: .44rem; font-weight: 760; text-transform: uppercase; }.storage-resource-status i, .storage-draft-badge i { width: 6px; height: 6px; border-radius: 50%; background: #c59b35; }
.storage-resource-details { display: grid; grid-template-columns: 1.05fr 1.15fr 1.2fr .65fr .7fr; gap: 14px; border-top: 1px solid #e8ebee; border-bottom: 1px solid #e8ebee; padding: 12px 15px; background: #fafbfc; }.storage-resource-details span, .storage-resource-details strong { display: block; }.storage-resource-details span { margin-bottom: 5px; color: #9299a1; font-size: .43rem; text-transform: uppercase; letter-spacing: .05em; }.storage-resource-details strong { overflow: hidden; color: #59636d; font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.storage-resource-card > footer { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 15px; }.storage-resource-endpoint { overflow: hidden; color: #818a93; font: .46rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }.storage-resource-actions { display: flex; flex: 0 0 auto; gap: 6px; }.storage-resource-actions button { min-height: 27px; border: 1px solid #d7dce1; border-radius: 6px; padding: 0 8px; color: #65707a; background: #fff; font-size: .44rem; font-weight: 700; }.storage-resource-actions button:last-child { border-color: transparent; color: #9f5a53; background: transparent; }
.pipeline-catalog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }.pipeline-catalog-actions select { min-width: 135px; width: 100%; height: 30px; border: 1px solid #d5dae0; border-radius: 6px; padding: 0 7px; color: #59636d; background: #fff; font-size: .48rem; }.pipeline-catalog-actions button { width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid #d5dae0; border-radius: 6px; color: #68727b; background: #fff; font-size: .62rem; }.pipeline-catalog-actions button:disabled { cursor: default; opacity: .35; }
.pipeline-topbar { position: relative; z-index: 20; display: flex; min-width: 0; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--pipeline-border); padding: 1px 16px 0; background: #f8f9fa; }
.pipeline-title-group { display: flex; min-width: 0; align-items: center; gap: 11px; }
.pipeline-breadcrumbs { display: flex; min-width: 0; align-items: center; gap: 8px; margin-bottom: 0; color: #7d858e; font-size: .78rem; white-space: nowrap; }
.pipeline-breadcrumbs button { max-width: min(32vw, 360px); overflow: hidden; border: 0; padding: 4px 0; color: inherit; background: transparent; font: inherit; text-overflow: ellipsis; white-space: nowrap; }.pipeline-breadcrumbs button:hover { color: #2268af; text-decoration: underline; text-underline-offset: 3px; }
.pipeline-breadcrumbs #workspace-section-name { color: #59636d; font-weight: 400; }
.pipeline-breadcrumbs button.is-back-link { color: #2869aa; }
.pipeline-breadcrumbs strong { overflow: hidden; color: #3f4953; font-weight: 760; text-overflow: ellipsis; }
.pipeline-breadcrumbs.has-block #workspace-section-name { color: #7d858e; font-weight: 500; }
.pipeline-breadcrumbs b { color: #c0c4c9; font-weight: 400; }
.pipeline-breadcrumbs b:last-of-type, #pipeline-breadcrumb-name { display: none; }
.pipeline-breadcrumbs.has-block b:last-of-type, .pipeline-breadcrumbs.has-block #pipeline-breadcrumb-name { display: inline; }
.pipeline-title-row { display: none; }
.pipeline-title-row h1 { overflow: hidden; margin: 0; color: #22282f; font-size: .97rem; font-weight: 720; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-state { border: 1px solid #d6dae0; border-radius: 999px; padding: 3px 7px; color: #737a83; background: #f8f9fa; font-size: .52rem; font-weight: 700; }
.pipeline-state.is-running { border-color: #b9d6f6; color: #1e65b1; background: #ecf5ff; }
.pipeline-state.is-complete { border-color: #bfe0cc; color: #247c4f; background: #ebf8f0; }
.pipeline-version-control { position: relative; flex: 0 0 auto; }
.pipeline-version-menu-button { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; border: 1px solid #d8dde1; border-radius: 7px; padding: 0 9px; color: #5e6871; background: #f8f9fa; font-size: .55rem; font-weight: 720; }
.pipeline-version-menu-button:hover, .pipeline-version-menu-button[aria-expanded="true"] { border-color: #b9c7ba; color: #3f5942; background: #f1f5f1; }
.pipeline-version-menu-button small { color: #7b867d; font-size: .49rem; font-weight: 650; }
.pipeline-version-menu-button b { color: #8c948e; font-size: .58rem; }
.pipeline-version-menu { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; width: 310px; overflow: hidden; border: 1px solid #d8dde1; border-radius: 10px; padding: 6px; color: #3f4851; background: #fff; box-shadow: 0 16px 40px rgba(27,38,48,.18); }
.pipeline-version-menu[hidden] { display: none; }
.pipeline-version-menu > button { display: grid; width: 100%; min-height: 54px; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 9px; border: 0; border-radius: 7px; padding: 7px 9px; color: #414b54; background: transparent; text-align: left; }
.pipeline-version-menu > button:hover { background: #f1f5f1; }
.pipeline-version-menu > button:disabled { cursor: wait; opacity: .55; }
.pipeline-version-menu > button i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: #527453; background: #e9f2e9; font-size: .67rem; font-style: normal; font-weight: 800; }
.pipeline-version-menu > button strong, .pipeline-version-menu > button small { display: block; }
.pipeline-version-menu > button strong { margin-bottom: 4px; font-size: .57rem; }
.pipeline-version-menu > button small { color: #858e95; font-size: .47rem; font-weight: 500; }
.pipeline-version-recent { margin-top: 4px; border-top: 1px solid #e7eaec; padding: 9px 9px 5px; }
.pipeline-version-recent > span { display: block; margin-bottom: 5px; color: #92999f; font-size: .42rem; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
#pipeline-version-list, #orchestration-version-list { display: grid; max-height: 220px; overflow-y: auto; scrollbar-color: #cfd6d0 transparent; scrollbar-width: thin; }
.pipeline-version-row { display: flex; width: 100%; min-height: 34px; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 6px; padding: 0 6px; color: #68727a; background: transparent; font-size: .46rem; text-align: left; }
.pipeline-version-row:hover { background: #f1f5f1; }
.pipeline-version-row.is-active { color: #527453; background: #eaf2ea; }
.pipeline-version-row:disabled { cursor: wait; opacity: .65; }
.pipeline-version-row strong { max-width: 175px; overflow: hidden; color: #4b555d; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-version-row.is-active strong { color: #3f6541; }
.pipeline-version-empty { padding: 6px 0 3px; color: #969da3; font-size: .47rem; }
.pipeline-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.toolbar-button, .run-pipeline-button { min-height: 33px; border-radius: 6px; padding: 0 12px; font-size: .63rem; font-weight: 700; }
.toolbar-button { border: 1px solid #d6dae0; color: #545b64; background: #fff; }
.add-block-top-button { display: inline-flex; align-items: center; gap: 5px; color: #2168b5; }
.run-pipeline-button { display: flex; align-items: center; gap: 7px; border: 1px solid #1767bd; color: #fff; background: #2876d2; }
.run-pipeline-button:hover { background: #1f66b9; }.run-pipeline-button:disabled { cursor: wait; opacity: .72; }

.pipeline-tabs { display: flex; grid-column: 1 / -1; align-items: stretch; justify-content: space-between; border-bottom: 1px solid var(--pipeline-border); padding: 0 15px 0 19px; background: #f8f9fa; }
.pipeline-tabs > [role="tablist"] { display: flex; min-width: 0; gap: 3px; overflow-x: auto; scrollbar-width: none; }.pipeline-tabs > [role="tablist"]::-webkit-scrollbar { display: none; }
.pipeline-tabs [role="tab"] { position: relative; border: 0; padding: 0 12px; color: #717882; background: transparent; font-size: .62rem; font-weight: 650; }
.pipeline-tabs [role="tab"].is-active { color: #1f5fa9; }
.pipeline-tabs [role="tab"].is-active::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: var(--pipeline-blue); content: ""; }
.run-inspection-navigation { display: none !important; align-items: center; gap: 10px; }
.run-inspection-navigation button { min-height: 30px; border: 0; border-radius: 6px; padding: 0 10px; color: #41627f; background: #edf2f6; font-size: .55rem; font-weight: 720; }
.run-inspection-navigation > strong { margin-left: 2px; color: #87919a; font: 650 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.pipeline-main.is-run-inspection .pipeline-tabs > [role="tablist"], .pipeline-main.is-run-inspection .pipeline-tabs > .canvas-tools { display: none; }
.pipeline-main.is-run-inspection .run-inspection-navigation { display: flex !important; }
.canvas-tools { display: flex; align-items: center; gap: 2px; }
.canvas-tools button { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 5px; color: #747b84; background: transparent; }
.canvas-tools button:hover { background: #e9ecf0; }.canvas-tools span { min-width: 40px; color: #8a9199; font-size: .54rem; text-align: center; }

.pipeline-workspace { position: relative; display: grid; min-height: 0; grid-column: 1; grid-row: 3; grid-template-rows: minmax(0, 1fr); overflow: auto; background: #f7f8fa; }
.pipeline-summary-bar { position: sticky; left: 0; z-index: 5; display: flex; min-width: 760px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e7ea; padding: 0 17px; color: #7c838c; background: rgba(255,255,255,.9); font-size: .54rem; }
.pipeline-summary-bar > div { display: flex; align-items: center; gap: 17px; }
.summary-health { color: #3f6e54; }.summary-health i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }
.pipeline-summary-bar button { border: 0; color: #2168b5; background: transparent; font-size: .59rem; font-weight: 720; }
.pipeline-canvas { position: relative; width: 1600px; min-width: 1600px; height: 900px; min-height: 900px; overflow: hidden; background-color: #f7f8fa; background-image: radial-gradient(#d6d9de .75px, transparent .75px); background-size: 16px 16px; cursor: grab; transform-origin: 0 0; }.pipeline-canvas.is-panning { cursor: grabbing; user-select: none; }
.pipeline-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pipeline-edges path { fill: none; stroke: #aab4c0; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pipeline-edges .connection-preview { stroke: #2876d2; stroke-width: 1.8; stroke-dasharray: 6 5; }
.connection-help-toast { position: sticky; z-index: 10; top: 12px; left: 50%; width: fit-content; max-width: 330px; transform: translateX(-50%); border: 1px solid #b9d4f0; border-radius: 999px; padding: 7px 11px; color: #245f99; background: rgba(239,247,255,.96); box-shadow: 0 4px 12px rgba(38,79,119,.1); font-size: .5rem; font-weight: 700; pointer-events: none; }
.pipeline-node { position: absolute; width: 220px; height: 94px; border: 1px solid #ccd2d9; border-radius: 7px; background: #fff; box-shadow: 0 2px 6px rgba(37,47,58,.07); cursor: default; }.pipeline-node.is-dragging { z-index: 7; cursor: grabbing; box-shadow: 0 8px 22px rgba(37,47,58,.16); }.pipeline-node > header { cursor: grab; }.pipeline-node.is-dragging > header { cursor: grabbing; }
.pipeline-node:hover { border-color: #8eafd3; box-shadow: 0 4px 12px rgba(37,47,58,.11); }
.pipeline-node.is-selected { border-color: #3980d0; box-shadow: 0 0 0 2px rgba(40,118,210,.13), 0 4px 12px rgba(37,47,58,.1); }
.pipeline-node.is-writing-code { z-index: 8; }
.block-code-activity { position: absolute; z-index: 9; top: calc(100% + 6px); right: 0; left: 0; overflow: hidden; border: 1px solid #ccd6de; border-radius: 7px; color: #4d5963; background: rgba(255,255,255,.97); box-shadow: 0 7px 18px rgba(37,47,58,.12); pointer-events: none; }
.block-code-status { display: flex; min-height: 27px; align-items: center; gap: 7px; border-bottom: 1px solid #e6eaed; padding: 0 8px; font-size: .48rem; font-weight: 720; }.block-code-status i { width: 9px; height: 9px; flex: 0 0 9px; border: 1.5px solid #b1bac2; border-top-color: #3f6f99; border-radius: 50%; animation: spin .65s linear infinite; }.block-code-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.block-code-activity.is-complete .block-code-status { color: #26784f; }.block-code-activity.is-complete .block-code-status i { display: grid; place-items: center; border: 0; color: #26784f; animation: none; }.block-code-activity.is-complete .block-code-status i::after { content: "✓"; font-size: .58rem; font-weight: 850; }
.block-code-changes { display: flex; min-height: 25px; align-items: center; gap: 5px; padding: 0 8px; background: #f8fafb; }.block-code-changes b { border-radius: 4px; padding: 2px 4px; font: 800 .46rem ui-monospace, SFMono-Regular, Menlo, monospace; }.block-code-changes .is-added { color: #1f6b45; border: 1px solid rgba(38,120,79,.26); background: rgba(38,120,79,.13); }.block-code-changes .is-removed { color: #9a443d; border: 1px solid rgba(160,74,67,.26); background: rgba(160,74,67,.12); }.block-code-changes small { min-width: 0; margin-left: auto; overflow: hidden; color: #7f8992; font: .43rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }.block-code-activity.has-new-lines .block-code-changes b { animation: code-line-flash .7s ease-out; }
.pipeline-node header { display: grid; height: 59px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 0 10px; border-bottom: 1px solid #ebedf0; }
.pipeline-node header strong, .pipeline-node header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-node header strong { margin-bottom: 4px; color: #2d343c; font: 680 .66rem ui-monospace, SFMono-Regular, Menlo, monospace; }.pipeline-node header small { color: #858c95; font-size: .52rem; }
.node-menu { width: 26px; height: 26px; border: 0; border-radius: 5px; padding: 0; color: #8d959e; background: transparent; font-size: .6rem; letter-spacing: .06em; }.node-menu:hover, .node-menu[aria-expanded="true"] { color: #356fa9; background: #edf3f9; }.node-header-actions { display: flex; align-items: center; gap: 3px; }
.pipeline-node footer { display: flex; height: 34px; align-items: center; justify-content: space-between; padding: 0 10px; color: #7d848d; font-size: .49rem; }
/* min-width:0 lets the label shrink: a flex item defaults to min-width:auto, which kept the
   build status at its full text width and pushed it outside the block instead of truncating. */
.pipeline-node footer span { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; overflow: hidden; }.pipeline-node footer small { font-size: inherit; }
.pipeline-node footer > button { flex: 0 0 auto; }
.pipeline-node footer .node-state-label { display: block; min-width: 0; overflow: hidden; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-node footer span.is-running-source .node-ok { width: 9px; height: 9px; border: 1.5px solid #b1bac2; border-top-color: #2876d2; background: transparent; animation: spin .65s linear infinite; }
.pipeline-node footer > button { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 4px; padding: 4px 2px 4px 6px; color: #2369b4; background: transparent; font-size: .5rem; font-weight: 760; }.pipeline-node footer > button:hover { color: #155797; background: #edf4fb; }.pipeline-node footer > button span { font-size: .62rem; }
.node-ok { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }
.node-port { position: absolute; z-index: 4; top: calc(50% - 6px); width: 12px; height: 12px; touch-action: none; user-select: none; border: 2px solid #fff; border-radius: 50%; padding: 0; background: #8695a5; box-shadow: 0 0 0 1px #7e8d9d; cursor: crosshair; }.node-port:hover, .node-port:focus-visible { background: #2876d2; box-shadow: 0 0 0 2px rgba(40,118,210,.28); outline: none; }.node-port.is-connecting { background: #2876d2; box-shadow: 0 0 0 4px rgba(40,118,210,.2); }.node-port.is-connect-target { background: #35a768; box-shadow: 0 0 0 3px rgba(53,167,104,.18); animation: port-pulse 1.2s ease-in-out infinite; }.input-port { left: -7px; }.output-port { right: -7px; }
@keyframes port-pulse { 50% { box-shadow: 0 0 0 6px rgba(53,167,104,.08); } }
@keyframes code-line-flash { 0% { opacity: 0; transform: translateY(5px) scale(.9); } 45% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { transform: scale(1); } }
.external-sources-node { top: 155px; left: 44px; width: 240px; }
.external-sources-node .source-count { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px; color: #2168b5; background: #e8f2fd; font-size: .54rem; font-weight: 800; }
.external-sources-node footer > button { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 4px 0; color: #2369b4; background: transparent; font-size: .49rem; font-weight: 740; }.external-sources-node footer > button:hover { text-decoration: underline; text-underline-offset: 2px; }.external-sources-node footer > button span { font-size: .62rem; }
.node-extract { top: 105px; left: 341px; width: 210px; }.node-enrich { top: 230px; left: 594px; width: 210px; }.node-dataset { top: 155px; left: 847px; width: 210px; }
.created-pipeline-node footer > span i { background: #a7afb7; }
.block-choice-icon.database-connector { color: #326486; background: #e2eef5; }
.created-pipeline-node footer > button { border: 0; padding: 3px 0; color: #2369b4; background: transparent; font-size: .49rem; font-weight: 740; }.created-pipeline-node footer > button:hover { text-decoration: underline; }

.pipeline-main.is-block-detail-open .canvas-tools { visibility: hidden; }
.block-detail-view { min-width: 0; min-height: 100%; grid-column: 1; grid-row: 1 / -1; overflow: auto; color: #30373f; background: #f5f6f8; }
.block-detail-header { position: sticky; z-index: 3; top: 0; display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dfe3e7; padding: 0 22px; background: rgba(255,255,255,.97); }
.block-detail-header > div { display: flex; min-width: 0; align-items: center; gap: 12px; }
.block-detail-icon { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border-radius: 9px; font-size: .69rem; font-weight: 800; }.block-detail-icon.custom-code { color: #82581c; background: #fff0d3; }.block-detail-icon.external-source { color: #1e63ac; background: #e2effc; font-size: .95rem; }.block-detail-icon.embeddings { color: #256d65; background: #def3ef; font-size: .9rem; }.block-detail-icon.llm-transform { color: #6751a4; background: #eeebfc; font-size: .9rem; }.block-detail-icon.database-connector { color: #326486; background: #e2eef5; font-size: .9rem; }
.block-detail-header p, .block-detail-header h2, .block-detail-header > div span { display: block; margin: 0; }.block-detail-header p { margin-bottom: 4px; color: #2970b8; font-size: .53rem; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }.block-detail-header h2 { overflow: hidden; margin-bottom: 4px; color: #303943; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }.block-detail-header > div > div > span { overflow: hidden; color: #858d96; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }.block-detail-state { flex: 0 0 auto; border-radius: 999px; padding: 6px 9px; color: #287a51; background: #e6f4ec; font-size: .5rem; font-weight: 720; }.block-detail-state i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }
.block-detail-tabs { position: sticky; z-index: 3; top: 82px; display: flex; min-height: 43px; align-items: stretch; gap: 3px; border-bottom: 1px solid #dfe3e7; padding: 0 20px; background: rgba(250,251,252,.98); }.block-detail-tabs button { position: relative; border: 0; padding: 0 12px; color: #737c85; background: transparent; font-size: .59rem; font-weight: 680; }.block-detail-tabs button.is-active { color: #245f9c; }.block-detail-tabs button.is-active::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: #2876d2; content: ""; }.block-detail-tabs button span { margin-left: 4px; border-radius: 999px; padding: 2px 5px; color: #77828b; background: #e8ecef; font-size: .45rem; }
.block-detail-content { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 48px; }
.block-detail-overview { display: grid; grid-template-columns: 1.25fr 1fr 1fr; overflow: hidden; border: 1px solid #dce1e5; border-radius: 10px; background: #fff; }.block-detail-overview article { min-height: 92px; padding: 17px 18px; }.block-detail-overview article + article { border-left: 1px solid #e5e8eb; }.block-detail-overview span, .block-detail-overview strong, .block-detail-overview small { display: block; }.block-detail-overview span { margin-bottom: 8px; color: #8a929a; font-size: .52rem; }.block-detail-overview strong { margin-bottom: 6px; color: #35404a; font-size: .75rem; }.block-detail-overview small { overflow: hidden; color: #9299a1; font: .5rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.block-detail-form { margin-top: 14px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 10px; background: #fff; }.block-detail-form > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e5e8eb; padding: 0 18px; }.block-detail-form h3, .block-detail-form p { margin: 0; }.block-detail-form h3 { margin-bottom: 5px; font-size: .7rem; }.block-detail-form p { color: #899099; font-size: .52rem; }.block-detail-form > header > span { color: #69737d; font-size: .52rem; font-weight: 700; }.block-detail-form > header > span.is-saved { color: #287a51; }.block-detail-form > header > span.is-error { color: #ae493f; }
.block-detail-credential { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e5e8eb; padding: 10px 18px; background: #f8fbf9; }.block-detail-credential[hidden] { display: none; }.block-detail-credential > div:first-child > span, .block-detail-credential > div:first-child > code, .block-detail-credential > div:first-child > small { display: block; }.block-detail-credential > div:first-child > span { margin-bottom: 5px; color: #849087; font-size: .43rem; font-weight: 780; letter-spacing: .07em; }.block-detail-credential > div:first-child > code { margin-bottom: 5px; color: #31473a; font: 700 .59rem ui-monospace, SFMono-Regular, Menlo, monospace; }.block-detail-credential > div:first-child > small { color: #7f8982; font-size: .48rem; }.block-detail-credential-actions { display: grid; flex: 0 0 auto; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center; gap: 6px; }.block-detail-credential-actions > strong { grid-column: 1 / -1; justify-self: end; border-radius: 999px; padding: 5px 8px; font-size: .46rem; }.block-detail-credential-actions > strong i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }.block-detail-credential-actions > strong.is-linked { color: #287950; background: #e2f2e9; }.block-detail-credential-actions > strong.is-linked i { background: #35a768; }.block-detail-credential-actions > strong.is-missing { color: #9a6222; background: #fff0d9; }.block-detail-credential-actions > strong.is-missing i { background: #d59439; }.block-detail-credential-actions select, .block-detail-credential-actions button { min-height: 33px; border: 1px solid #cfd7d1; border-radius: 6px; color: #46534a; background: #fff; font-size: .5rem; }.block-detail-credential-actions select { min-width: 210px; padding: 0 27px 0 9px; }.block-detail-credential-actions button { padding: 0 10px; font-weight: 700; }.block-detail-credential-actions button:hover { border-color: #9eb8a6; background: #f4f8f5; }.block-detail-credential-actions button:disabled, .block-detail-credential-actions select:disabled { cursor: not-allowed; opacity: .5; }
.block-detail-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 18px; }.block-detail-fields label { color: #535d67; font-size: .55rem; font-weight: 720; }.block-detail-fields input, .block-detail-fields textarea { display: block; width: 100%; margin-top: 8px; border: 1px solid #d4d9df; border-radius: 7px; padding: 0 11px; color: #35404a; background: #fff; outline: none; font-size: .62rem; font-weight: 500; }.block-detail-fields input { height: 39px; }.block-detail-fields textarea { min-height: 230px; resize: vertical; padding-block: 12px; background: #fafbfc; font: .62rem/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; }.block-detail-fields input:focus, .block-detail-fields textarea:focus { border-color: #8db4dd; box-shadow: 0 0 0 3px rgba(40,118,210,.08); }.block-config-field { grid-column: 1 / -1; }.block-config-field > small { display: block; margin-top: 7px; color: #9299a1; font-size: .49rem; font-weight: 500; }
.block-detail-form > footer { display: flex; min-height: 60px; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid #e5e8eb; padding: 0 18px; background: #fafbfc; }.block-detail-form > footer button { min-height: 35px; border: 1px solid #d3d8dd; border-radius: 7px; padding: 0 13px; color: #56616b; background: #fff; font-size: .55rem; font-weight: 720; }.block-detail-form > footer button[type="submit"] { border-color: #1767bd; color: #fff; background: #2876d2; }.block-detail-form > footer button:hover { border-color: #9db6cf; }.block-detail-form > footer button[type="submit"]:hover { background: #1f66b9; }.block-detail-form > footer button:disabled { cursor: wait; opacity: .65; }
.block-snapshots-panel { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 48px; }.block-snapshots-panel > header { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #dfe3e7; }.block-snapshots-panel > header p, .block-snapshots-panel > header h3, .block-snapshots-panel > header span { display: block; margin: 0; }.block-snapshots-panel > header p { margin-bottom: 4px; color: #2870b7; font-size: .47rem; font-weight: 800; letter-spacing: .08em; }.block-snapshots-panel > header h3 { margin-bottom: 5px; font-size: .78rem; }.block-snapshots-panel > header > div > span { color: #838b93; font-size: .52rem; }.local-compute-pill { flex: 0 0 auto; border-radius: 999px; padding: 6px 9px; color: #287851; background: #e5f4eb; font-size: .5rem; font-weight: 720; }.local-compute-pill i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }.block-snapshot-layout { display: grid; min-height: 440px; max-height: 650px; grid-template-columns: 290px minmax(0,1fr); margin-top: 14px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 10px; background: #fff; }.block-snapshot-layout > aside { overflow: auto; border-right: 1px solid #e1e5e8; padding: 7px; background: #f8f9fa; }.block-snapshot-row { display: grid; width: 100%; min-height: 72px; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 7px; padding: 8px 9px; color: #58636d; background: transparent; text-align: left; }.block-snapshot-row:hover, .block-snapshot-row.is-active { background: #e9eef2; }.block-snapshot-row > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #287851; background: #e1f1e8; font-size: .58rem; font-style: normal; font-weight: 800; }.block-snapshot-row.is-failed > i { color: #a24a43; background: #f8e7e5; }.block-snapshot-row strong, .block-snapshot-row small { display: block; }.block-snapshot-row strong { overflow: hidden; margin-bottom: 5px; color: #39434c; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }.block-snapshot-row small { color: #899199; font-size: .47rem; }.block-snapshot-row > span:last-child { color: #74808a; font-size: .47rem; white-space: nowrap; }.block-snapshot-empty { display: grid; min-height: 250px; place-content: center; gap: 6px; padding: 20px; color: #899199; text-align: center; }.block-snapshot-empty strong { color: #56616b; font-size: .6rem; }.block-snapshot-empty span { font-size: .49rem; line-height: 1.5; }.block-snapshot-viewer { display: grid; min-width: 0; min-height: 0; grid-template-rows: 49px minmax(0,1fr); }.block-snapshot-viewer > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e3e7ea; padding: 0 12px 0 14px; background: #fafbfc; }.block-snapshot-viewer > header > div:first-child { min-width: 0; }.block-snapshot-viewer strong, .block-snapshot-viewer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.block-snapshot-viewer strong { margin-bottom: 4px; color: #414c56; font-size: .57rem; }.block-snapshot-viewer small { color: #899199; font-size: .46rem; }.block-snapshot-viewer > header > div:last-child { display: flex; flex: 0 0 auto; gap: 3px; }.block-snapshot-viewer header button { min-height: 27px; border: 0; border-radius: 6px; padding: 0 8px; color: #727c85; background: transparent; font-size: .49rem; font-weight: 700; }.block-snapshot-viewer header button.is-active { color: #315d83; background: #e7edf2; }.block-snapshot-viewer pre { min-height: 0; margin: 0; overflow: auto; padding: 18px 19px 60px; color: #39444e; background: #fff; font: .61rem/1.68 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre; }

.pipeline-source-builder { margin-top: 14px; overflow: hidden; border: 1px solid #d7dde2; border-radius: 11px; background: #fff; }
.pipeline-source-builder > header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e4e8eb; padding: 15px 18px; background: #fbfcfd; }
.pipeline-source-builder > header p, .pipeline-source-builder > header h3, .pipeline-source-builder > header span { display: block; margin: 0; }.pipeline-source-builder > header .eyebrow { margin-bottom: 5px; color: #2771b9; font-size: .52rem; font-weight: 800; letter-spacing: .09em; }.pipeline-source-builder > header h3 { margin-bottom: 5px; color: #303a43; font-size: .75rem; }.pipeline-source-builder > header > div > span { color: #7f8891; font-size: .56rem; line-height: 1.5; }
.source-folder-pill { flex: 0 0 auto; border: 1px solid #d4dce4; border-radius: 6px; padding: 7px 9px; color: #546473; background: #fff; font: .57rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.pipeline-source-build-form { display: grid; grid-template-columns: minmax(150px,.75fr) minmax(240px,1.35fr) auto; align-items: end; gap: 10px; padding: 16px 18px 8px; }.pipeline-source-build-form label { color: #505a64; font-size: .57rem; font-weight: 720; }.pipeline-source-build-form input { display: block; width: 100%; height: 39px; margin-top: 7px; border: 1px solid #d3d9de; border-radius: 7px; padding: 0 10px; color: #35404a; outline: none; font-size: .62rem; }.pipeline-source-build-form input:focus { border-color: #77a8d8; box-shadow: 0 0 0 3px rgba(40,118,210,.09); }.pipeline-source-build-form button { height: 39px; border: 1px solid #1767bd; border-radius: 7px; padding: 0 14px; color: #fff; background: #2876d2; font-size: .57rem; font-weight: 760; }.pipeline-source-build-form button:hover { background: #1f66b9; }.pipeline-source-build-form button:disabled { cursor: wait; opacity: .6; }
.pipeline-source-build-status { min-height: 22px; margin: 0; padding: 2px 18px 9px; color: #687682; font-size: .54rem; }.pipeline-source-build-status.is-error { color: #a5473f; }
.pipeline-source-build-list { display: grid; gap: 7px; border-top: 1px solid #e7eaed; padding: 12px 18px 16px; }.pipeline-source-empty { display: flex; min-height: 62px; justify-content: center; flex-direction: column; border: 1px dashed #d6dce1; border-radius: 8px; padding: 0 13px; color: #64717c; background: #fafbfc; }.pipeline-source-empty strong { margin-bottom: 5px; font-size: .59rem; }.pipeline-source-empty span { color: #8a9299; font-size: .52rem; }
.pipeline-source-build-card { display: grid; min-height: 66px; grid-template-columns: minmax(190px,1fr) minmax(160px,.9fr) auto; align-items: center; gap: 13px; border: 1px solid #dce1e5; border-radius: 8px; padding: 9px 11px; color: #4c5761; background: #fff; text-align: left; }.pipeline-source-build-card:hover, .pipeline-source-build-card.is-active { border-color: #91b5d8; background: #f7fafe; }.pipeline-source-build-card > span:first-child { display: flex; min-width: 0; align-items: center; gap: 9px; }.pipeline-source-build-card > span:first-child > i { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 7px; color: #276bb0; background: #e5f0fb; font-size: .65rem; font-style: normal; font-weight: 800; }.pipeline-source-build-card strong, .pipeline-source-build-card small { display: block; }.pipeline-source-build-card > span:first-child strong { overflow: hidden; margin-bottom: 4px; color: #39434c; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }.pipeline-source-build-card > span:first-child small { overflow: hidden; color: #8a9299; font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }.pipeline-source-card-progress strong { margin-bottom: 5px; color: #277851; font-size: .55rem; }.pipeline-source-build-card.is-running .pipeline-source-card-progress strong, .pipeline-source-build-card.is-queued .pipeline-source-card-progress strong { color: #276bac; }.pipeline-source-build-card.is-failed .pipeline-source-card-progress strong { color: #a5473f; }.pipeline-source-card-progress small { overflow: hidden; color: #838c94; font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }.pipeline-source-card-files { color: #3974ad; font-size: .52rem; font-weight: 720; white-space: nowrap; }
.pipeline-source-build-card.is-running .pipeline-source-card-progress strong::before, .pipeline-source-build-card.is-queued .pipeline-source-card-progress strong::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; border: 1.5px solid #b7c0c8; border-top-color: #2876d2; border-radius: 50%; animation: spin .65s linear infinite; }
.pipeline-block-source-files { border-top: 1px solid #dfe4e8; background: #fff; }.pipeline-block-source-files > header { display: flex; height: 49px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e8eb; padding: 0 17px; background: #fafbfc; }.pipeline-block-source-files > header span, .pipeline-block-source-files > header strong { display: block; }.pipeline-block-source-files > header span { margin-bottom: 3px; color: #9299a0; font-size: .44rem; font-weight: 800; letter-spacing: .08em; }.pipeline-block-source-files > header strong { color: #4d5964; font: .57rem ui-monospace, SFMono-Regular, Menlo, monospace; }.pipeline-block-source-files > header small { color: #858d95; font-size: .49rem; }
.pipeline-block-source-file-layout { display: grid; min-height: 330px; max-height: 520px; grid-template-columns: 260px minmax(0,1fr); }.pipeline-block-source-file-layout nav { overflow: auto; border-right: 1px solid #e2e6e9; padding: 8px; background: #f8f9fa; }.block-source-tree-branch { display: grid; min-width: 0; }.pipeline-block-source-file-layout nav button { display: flex; width: 100%; min-height: 32px; align-items: center; gap: 6px; overflow: hidden; border: 0; border-radius: 5px; padding-right: 7px; color: #5f6972; background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.pipeline-block-source-file-layout nav button:hover { color: #2f3c47; background: #edf1f4; }.block-source-folder-row { font-size: .57rem; font-weight: 680; }.block-source-folder-row .block-source-folder-arrow { width: 12px; flex: 0 0 12px; color: #8a949d; font-size: .72rem; text-align: center; }.block-source-folder-row i { width: 16px; flex: 0 0 16px; color: #688198; font-size: .64rem; font-style: normal; }.block-source-file-row { font: .55rem ui-monospace, SFMono-Regular, Menlo, monospace; }.block-source-file-row.is-active { color: #263b4c; background: #e4ebf1; font-weight: 680; box-shadow: inset 2px 0 #4d7598; }.block-source-file-row > span { width: 21px; flex: 0 0 21px; color: #718392; font-size: .44rem; font-weight: 800; text-align: center; }.pipeline-block-source-file-layout > section { display: grid; min-width: 0; min-height: 0; grid-template-rows: 36px minmax(0,1fr); }.pipeline-block-source-file-layout > section > div { overflow: hidden; border-bottom: 1px solid #e4e8eb; padding: 11px 13px 0; color: #56616b; background: #fafbfc; font: .52rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }.pipeline-block-source-file-layout pre { min-height: 0; margin: 0; overflow: auto; padding: 16px 18px 55px; color: #38434d; background: #fff; font: .61rem/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; white-space: pre; }

.create-pipeline-dialog { width: min(480px, calc(100% - 28px)); border: 0; border-radius: 13px; padding: 0; color: #30373f; background: #fff; box-shadow: 0 28px 90px rgba(22,31,40,.26); }.create-pipeline-dialog::backdrop { background: rgba(25,32,40,.44); backdrop-filter: blur(3px); }.create-pipeline-dialog > header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e5e8; padding: 0 18px; }.create-pipeline-dialog > header > div { display: flex; align-items: center; gap: 11px; }.create-pipeline-dialog > header > div > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: #fff; background: #2876d2; }.create-pipeline-dialog h2, .create-pipeline-dialog p { margin: 0; }.create-pipeline-dialog h2 { margin-bottom: 5px; font-size: .76rem; }.create-pipeline-dialog header p { color: #899099; font-size: .5rem; }.create-pipeline-dialog header > button { width: 29px; height: 29px; border: 0; border-radius: 6px; color: #7f8790; background: transparent; font-size: .9rem; }.create-pipeline-dialog header > button:hover { background: #f0f2f4; }.create-pipeline-dialog form { padding: 20px 18px 18px; }.create-pipeline-dialog form > label { display: block; margin-bottom: 8px; color: #515b65; font-size: .55rem; font-weight: 720; }.create-pipeline-dialog form > label:not(:first-child) { margin-top: 14px; }.create-pipeline-dialog :is(input, select) { width: 100%; height: 42px; border: 1px solid #d3d9de; border-radius: 8px; padding: 0 12px; color: #343d46; background: #fff; outline: none; font-size: .62rem; }.create-pipeline-dialog :is(input, select):focus { border-color: #8bb4df; box-shadow: 0 0 0 3px rgba(40,118,210,.09); }.create-pipeline-dialog form > p { margin-top: 9px; color: #a9483e; font-size: .52rem; }.create-pipeline-dialog form > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.create-pipeline-dialog form button { min-height: 34px; border: 1px solid #d2d7dc; border-radius: 7px; padding: 0 12px; color: #58616a; background: #fff; font-size: .55rem; font-weight: 720; }.create-pipeline-dialog form button[type="submit"] { border-color: #1767bd; color: #fff; background: #2876d2; }.create-pipeline-dialog form button:disabled { cursor: wait; opacity: .65; }
.create-pipeline-dialog.is-orchestration > header > div > span { background: #c97824; }
.create-pipeline-type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 17px; border: 0; padding: 0; }
.create-pipeline-type-picker legend { grid-column: 1 / -1; margin-bottom: 8px; color: #515b65; font-size: .55rem; font-weight: 720; }
.create-pipeline-type-picker label { position: relative; min-width: 0; cursor: pointer; }
.create-pipeline-type-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.create-pipeline-type-picker label > span { display: grid; min-height: 78px; grid-template-columns: 26px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; border: 1px solid #d7dde2; border-radius: 8px; padding: 10px; background: #fff; }
.create-pipeline-type-picker i { display: grid; width: 26px; height: 26px; grid-row: 1 / 3; place-items: center; border-radius: 6px; color: #2869aa; background: #eaf3fc; font-size: .65rem; font-style: normal; }
.create-pipeline-type-picker b { color: #3e4852; font-size: .56rem; }
.create-pipeline-type-picker small { margin-top: 4px; color: #89929b; font-size: .44rem; line-height: 1.35; }
.create-pipeline-type-picker input:checked + span { border-color: #83add7; background: #f5f9fd; box-shadow: 0 0 0 2px rgba(40,118,210,.08); }
.create-pipeline-type-picker label:last-child i { color: #9a5b16; background: #fff0dc; }
.create-pipeline-type-picker label:last-child input:checked + span { border-color: #dcaa6e; background: #fffaf3; box-shadow: 0 0 0 2px rgba(201,120,36,.08); }
.create-pipeline-dialog form > .create-pipeline-note { margin: 12px 0 0; border-left: 2px solid #dfa35e; padding: 7px 0 7px 10px; color: #80623e; background: #fffaf3; line-height: 1.45; }

.storage-dialog { width: min(900px, calc(100% - 28px)); max-height: calc(100dvh - 34px); overflow: hidden; border: 1px solid #dce2e7; border-radius: 13px; padding: 0; color: #30373f; background: #fff; box-shadow: 0 28px 90px rgba(22,31,40,.3); }.storage-dialog::backdrop { background: rgba(20,27,34,.52); backdrop-filter: blur(3px); }.storage-dialog > header { display: flex; min-height: 74px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e5e8; padding: 0 18px; }.storage-dialog > header > div { display: flex; align-items: center; gap: 11px; }.storage-dialog > header > div > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 9px; color: #246b59; background: #e1f1eb; font-size: .68rem; font-weight: 760; }.storage-dialog h2, .storage-dialog p { margin: 0; }.storage-dialog h2 { margin-bottom: 5px; font-size: .78rem; }.storage-dialog header p { color: #88919a; font-size: .49rem; }.storage-dialog > header > button { width: 29px; height: 29px; border: 0; border-radius: 6px; color: #7f8790; background: transparent; font-size: .9rem; }.storage-dialog > header > button:hover { background: #f0f2f4; }
.storage-dialog > form { max-height: calc(100dvh - 108px); overflow-y: auto; }.storage-type-picker { padding: 16px 18px; }.storage-type-picker > div:first-child { margin-bottom: 11px; }.storage-type-picker > div:first-child strong, .storage-type-picker > div:first-child span { display: block; }.storage-type-picker > div:first-child strong { margin-bottom: 4px; color: #4e5963; font-size: .55rem; }.storage-type-picker > div:first-child span { color: #8a939b; font-size: .46rem; }.storage-type-picker > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.storage-type-picker label { cursor: pointer; }.storage-type-picker input { position: absolute; opacity: 0; pointer-events: none; }.storage-type-picker label > span { display: grid; min-height: 74px; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 9px; border: 1px solid #d9dfe4; border-radius: 8px; padding: 10px 11px; background: #fafbfc; }.storage-type-picker label i { display: grid; width: 32px; height: 32px; grid-row: 1 / 3; place-items: center; border-radius: 8px; color: #416f63; background: #e6f1ed; font-size: .56rem; font-style: normal; font-weight: 760; }.storage-type-picker label b { align-self: end; color: #4b5660; font-size: .53rem; }.storage-type-picker label small { align-self: start; margin-top: 3px; color: #8b939b; font-size: .42rem; }.storage-type-picker input:checked + span { border-color: #6d9d8e; background: #f1f8f5; box-shadow: 0 0 0 2px rgba(56,120,98,.09); }.storage-type-picker input:focus-visible + span { outline: 2px solid #55967f; outline-offset: 2px; }
.storage-config-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; border-top: 1px solid #e4e8eb; border-bottom: 1px solid #e4e8eb; }.storage-config-fields { padding: 17px 18px 19px; }.storage-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 13px; }.storage-field-grid label { min-width: 0; color: #59636d; font-size: .49rem; font-weight: 720; }.storage-field-grid label > span { display: inline-block; }.storage-field-grid :is(input, select) { display: block; width: 100%; height: 38px; margin-top: 7px; border: 1px solid #d4dae0; border-radius: 7px; padding: 0 10px; color: #3f4953; background: #fff; outline: none; font-size: .54rem; }.storage-field-grid input[readonly] { color: #66717b; background: #f5f7f8; }.storage-field-grid :is(input, select):focus { border-color: #75a696; box-shadow: 0 0 0 3px rgba(49,114,91,.09); }.storage-field-grid label small { display: block; overflow: hidden; margin-top: 5px; color: #969da4; font-size: .41rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.storage-field-grid select { padding-right: 28px; appearance: none; background-color: #fff; background-image: linear-gradient(45deg, transparent 50%, #7f8992 50%), linear-gradient(135deg, #7f8992 50%, transparent 50%); background-position: calc(100% - 14px) 16px, calc(100% - 10px) 16px; background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; }
.storage-estimate-panel { border-left: 1px solid #e4e8eb; padding: 17px; background: #f7f9f8; }.storage-draft-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 8px; color: #7c652c; background: #f8efd5; font-size: .42rem; font-weight: 760; text-transform: uppercase; }.storage-estimate-panel h3 { margin: 14px 0 5px; color: #3c4843; font-size: .63rem; line-height: 1.35; }.storage-estimate-panel > p { color: #85908a; font-size: .45rem; line-height: 1.45; }.storage-estimate-panel dl { margin: 15px 0 0; border-top: 1px solid #dde3df; }.storage-estimate-panel dl > div { display: flex; min-height: 37px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e2e7e4; }.storage-estimate-panel dt { color: #87918c; font-size: .44rem; }.storage-estimate-panel dd { margin: 0; color: #52605a; font-size: .46rem; font-weight: 700; text-align: right; }.storage-estimate-total { margin-top: 14px; border: 1px solid #cfe0d8; border-radius: 8px; padding: 12px; background: #edf7f2; }.storage-estimate-total span, .storage-estimate-total strong, .storage-estimate-total small { display: block; }.storage-estimate-total span { margin-bottom: 5px; color: #688176; font-size: .42rem; }.storage-estimate-total strong { margin-bottom: 5px; color: #285f4d; font-size: .86rem; }.storage-estimate-total small { color: #779084; font-size: .38rem; line-height: 1.4; }.storage-estimate-panel .storage-connection-note { margin-top: 12px; border-left: 2px solid #d2b05e; padding-left: 8px; color: #7d7561; }.storage-connection-note b { color: #715c28; }
#storage-form-error { margin: 10px 18px 0; color: #a9483e; font-size: .48rem; }.storage-dialog form > footer { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; background: #fafbfc; }.storage-dialog form > footer > span { color: #8b939b; font-size: .43rem; }.storage-dialog form > footer > div { display: flex; flex: 0 0 auto; gap: 8px; }.storage-dialog form > footer button { min-height: 34px; border: 1px solid #d1d7dc; border-radius: 7px; padding: 0 11px; color: #5d6770; background: #fff; font-size: .51rem; font-weight: 720; }.storage-dialog form > footer button[type="submit"] { border-color: #3f715f; color: #fff; background: #427461; }
.storage-resource-details { grid-template-columns: repeat(3,1fr); }
.storage-type-picker > div:last-child { grid-template-columns: repeat(2,1fr); }
.folder-orchestration-dialog { width: min(650px, calc(100% - 28px)); max-height: calc(100dvh - 30px); overflow: auto; border: 0; border-radius: 13px; padding: 0; color: #30373f; background: #fff; box-shadow: 0 28px 90px rgba(22,31,40,.28); }.folder-orchestration-dialog::backdrop { background: rgba(25,32,40,.48); backdrop-filter: blur(3px); }.folder-orchestration-dialog > header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e5e8; padding: 0 18px; }.folder-orchestration-dialog > header > div { display: flex; align-items: center; gap: 11px; }.folder-orchestration-dialog > header > div > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: #fff; background: #2876d2; }.folder-orchestration-dialog h2, .folder-orchestration-dialog p { margin: 0; }.folder-orchestration-dialog h2 { margin-bottom: 5px; font-size: .76rem; }.folder-orchestration-dialog header p { color: #899099; font-size: .5rem; }.folder-orchestration-dialog > header > button { width: 29px; height: 29px; border: 0; border-radius: 6px; color: #7f8790; background: transparent; font-size: .9rem; }.folder-chain-preview { padding: 15px 18px; background: #f6f9fc; }.folder-chain-preview > span { display: block; margin-bottom: 9px; color: #7b8792; font-size: .44rem; font-weight: 800; letter-spacing: .08em; }.folder-chain-preview > div { display: flex; align-items: center; gap: 7px; overflow-x: auto; }.folder-chain-preview > div > span { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; color: #94a0aa; }.folder-chain-preview i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #276bac; background: #dfeefa; font-size: .44rem; font-style: normal; }.folder-chain-preview strong { color: #44515c; font-size: .5rem; }.folder-chain-preview p { color: #8b929a; font-size: .5rem; }.folder-schedule-existing { border-top: 1px solid #e1e5e8; border-bottom: 1px solid #e1e5e8; }.folder-schedule-existing > header { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 0 18px; }.folder-schedule-existing > header strong { font-size: .56rem; }.folder-schedule-existing > header small { color: #8b929a; font-size: .45rem; }#folder-schedule-list article { display: grid; min-height: 55px; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 9px; border-top: 1px solid #e7eaed; padding: 0 18px; }#folder-schedule-list article strong, #folder-schedule-list article small { display: block; }#folder-schedule-list article strong { margin-bottom: 4px; font-size: .53rem; }#folder-schedule-list article small, #folder-schedule-list article > span { color: #8a929a; font-size: .44rem; }#folder-schedule-list button { min-height: 27px; border: 1px solid #d6dbe0; border-radius: 6px; padding: 0 8px; color: #737c84; background: #fff; font-size: .44rem; font-weight: 700; }#folder-schedule-list button.is-enabled { border-color: #b8dec8; color: #287a51; background: #e9f6ee; }#folder-schedule-list button:last-child { border-color: transparent; color: #9b5a54; }.folder-schedule-empty { padding: 0 18px 14px; color: #90979e; font-size: .48rem; }#folder-schedule-form { padding: 17px 18px 18px; }#folder-schedule-form > label, #folder-schedule-form > div label { display: block; color: #515b65; font-size: .52rem; font-weight: 700; }#folder-schedule-form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }#folder-schedule-form input:not([type="checkbox"]) { display: block; width: 100%; height: 38px; margin-top: 7px; border: 1px solid #d3d9de; border-radius: 7px; padding: 0 10px; color: #343d46; background: #fff; outline: none; font-size: .56rem; }.folder-schedule-enabled { display: flex !important; align-items: center; gap: 7px; margin-top: 13px; }.folder-schedule-enabled input { margin: 0; }.folder-orchestration-dialog form > p { margin-top: 9px; color: #a9483e; font-size: .5rem; }.folder-orchestration-dialog form footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }.folder-orchestration-dialog form footer button { min-height: 34px; border: 1px solid #d2d7dc; border-radius: 7px; padding: 0 12px; color: #58616a; background: #fff; font-size: .52rem; font-weight: 720; }.folder-orchestration-dialog form footer button[type="submit"] { border-color: #1767bd; color: #fff; background: #2876d2; }
.folder-orchestration-panel { background: #fff; }.folder-orchestration-panel > header { display: flex; min-height: 72px; align-items: center; border-bottom: 1px solid #e2e5e8; padding: 0 18px; }.folder-orchestration-panel > header > div { display: flex; align-items: center; gap: 11px; }.folder-orchestration-panel > header > div > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: #fff; background: #2876d2; }.folder-orchestration-panel h3, .folder-orchestration-panel p { margin: 0; }.folder-orchestration-panel h3 { margin-bottom: 5px; font-size: .72rem; }.folder-orchestration-panel header p { color: #899099; font-size: .5rem; }.folder-orchestration-panel form > p { margin-top: 9px; color: #a9483e; font-size: .5rem; }.folder-orchestration-panel form footer { display: flex; justify-content: flex-end; margin-top: 16px; }.folder-orchestration-panel form footer button { min-height: 34px; border: 1px solid #1767bd; border-radius: 7px; padding: 0 12px; color: #fff; background: #2876d2; font-size: .52rem; font-weight: 720; }
.save-pipeline-version-dialog { width: min(720px, calc(100% - 32px)); max-width: 720px; max-height: calc(100dvh - 32px); margin: auto; overflow: hidden; border: 1px solid #d5ddd6; border-radius: 16px; padding: 0; color: #30383f; background: #f7f9f7; box-shadow: 0 28px 90px rgba(18,28,21,.3); }
.save-pipeline-version-dialog::backdrop { background: rgba(16,22,18,.58); backdrop-filter: blur(4px); }
.save-pipeline-version-dialog > form { position: relative; display: grid; min-height: 520px; place-items: center; padding: 62px 70px 54px; }
.save-version-close { position: absolute; top: 18px; right: 18px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #d5dbd6; border-radius: 9px; color: #707a72; background: rgba(255,255,255,.72); font-size: 1rem; }
.save-version-close:hover { color: #344738; background: #fff; }
.save-version-content { width: min(560px, 100%); }
.save-version-content > span { display: block; margin-bottom: 14px; color: #5e7b60; font-size: .55rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.save-version-content h2 { margin: 0 0 12px; color: #29332b; font-size: 1.7rem; letter-spacing: -.03em; }
.save-version-content > p { max-width: 500px; margin: 0 0 34px; color: #7b847d; font-size: .67rem; line-height: 1.6; }
.save-version-content label { display: block; margin-bottom: 9px; color: #4b574d; font-size: .59rem; font-weight: 750; }
.save-version-content input { width: 100%; height: 52px; border: 1px solid #cdd6ce; border-radius: 10px; padding: 0 14px; color: #2f3931; background: #fff; outline: none; font-size: .78rem; }
.save-version-content input:focus { border-color: #769177; box-shadow: 0 0 0 3px rgba(106,153,85,.12); }
.save-version-error { margin: 10px 0 0 !important; color: #a54b43 !important; font-size: .55rem !important; }
.save-version-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.save-version-actions button { min-height: 39px; border: 1px solid #cfd7d0; border-radius: 8px; padding: 0 14px; color: #59645b; background: #fff; font-size: .59rem; font-weight: 740; }
.save-version-actions button[type="submit"] { border-color: #557255; color: #fff; background: #557255; }
.save-version-actions button[type="submit"]:hover { background: #466448; }
.save-version-actions button:disabled { cursor: wait; opacity: .6; }

.block-node-menu { position: fixed; z-index: 90; width: 205px; border: 1px solid #d7dce1; border-radius: 8px; padding: 5px; background: #fff; box-shadow: 0 12px 34px rgba(29,39,49,.18); }.block-node-menu > button { display: grid; width: 100%; min-height: 52px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; border: 0; border-radius: 6px; padding: 0 9px; color: #a24540; background: transparent; text-align: left; }.block-node-menu > button:hover { background: #fff1f0; }.block-node-menu > button > span:first-child { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 6px; color: #b04c46; background: #fbe8e6; font-size: .76rem; }.block-node-menu strong, .block-node-menu small { display: block; }.block-node-menu strong { margin-bottom: 4px; font-size: .54rem; }.block-node-menu small { color: #8a929a; font-size: .44rem; }

.block-picker-dialog { width: min(650px, calc(100% - 28px)); border: 0; border-radius: 12px; padding: 0; color: #30373f; background: #fff; box-shadow: 0 28px 90px rgba(22,31,40,.25); }.block-picker-dialog::backdrop { background: rgba(25,32,40,.42); backdrop-filter: blur(2px); }.block-picker-dialog > header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e4e8; padding: 0 18px; }.block-picker-dialog > header > div { display: flex; align-items: center; gap: 11px; }.block-picker-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: #fff; background: #2876d2; font-size: .9rem; }.block-picker-dialog h2, .block-picker-dialog header p { margin: 0; }.block-picker-dialog h2 { margin-bottom: 4px; font-size: .81rem; }.block-picker-dialog header p { color: #8a9199; font-size: .5rem; }.block-picker-dialog header > button { width: 29px; height: 29px; border: 0; border-radius: 6px; color: #7f8790; background: transparent; font-size: .86rem; }.block-picker-dialog header > button:hover { background: #f0f2f4; }
.block-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 16px 17px; }.block-picker-grid > button { display: grid; min-height: 112px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 11px; border: 1px solid #dce1e5; border-radius: 9px; padding: 15px; color: #414a53; background: #fff; text-align: left; }.block-picker-grid > button:hover { border-color: #7da9d8; background: #f7fafe; box-shadow: 0 3px 10px rgba(35,75,115,.08); }.block-choice-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; font-size: .76rem; font-weight: 800; }.block-choice-icon.custom-code { color: #82581c; background: #fff0d3; font-size: .5rem; }.block-choice-icon.external-source { color: #1e63ac; background: #e2effc; }.block-choice-icon.embeddings { color: #256d65; background: #def3ef; }.block-choice-icon.llm-transform { color: #6751a4; background: #eeebfc; }.block-picker-grid strong, .block-picker-grid small, .block-picker-grid em { display: block; }.block-picker-grid strong { margin: 2px 0 6px; font-size: .64rem; }.block-picker-grid small { min-height: 31px; color: #858d95; font-size: .49rem; line-height: 1.45; }.block-picker-grid em { width: fit-content; margin-top: 7px; color: #8a929a; font-size: .41rem; font-style: normal; font-weight: 780; letter-spacing: .07em; }.block-picker-grid > button > b { color: #4280be; font-size: .76rem; font-weight: 500; }.block-picker-dialog > footer { display: flex; min-height: 54px; align-items: center; justify-content: space-between; border-top: 1px solid #e1e4e8; padding: 0 17px; color: #8b929a; background: #fafbfc; font-size: .47rem; }.block-picker-dialog > footer button { min-height: 31px; border: 1px solid #d3d8de; border-radius: 6px; padding: 0 11px; color: #5e6670; background: #fff; font-size: .52rem; font-weight: 700; }
.block-picker-grid > button:last-child:nth-child(odd) { grid-column: 1 / -1; }

.run-history-view { min-height: 0; grid-column: 1 / -1; grid-row: 3 / -1; overflow: auto; color: #30373f; background: #f5f6f8; }
.run-history-page { width: 100%; }
#run-history-detail-view { width: min(1180px, calc(100% - 42px)); margin: 0 auto; padding: 25px 0 45px; }
.run-history-table.pipeline-catalog-table { border-top: 0; overflow: visible; }
/* These lists have no panel border to close them off, so the table draws the last line. */
:is(.run-history-table, .connections-table, .vault-table).pipeline-catalog-table { border-bottom: 1px solid #e8eaed; }
.pipeline-catalog-table.is-run-table .pipeline-catalog-table-head, .run-history-row { min-width: 900px; grid-template-columns: minmax(120px, .8fr) 108px minmax(150px, 1.1fr) 90px minmax(140px, 1fr) minmax(150px, 1.3fr) 18px; }
.run-history-row { width: 100%; border: 0; border-top: 1px solid #e8eaed; font: inherit; text-align: left; }
.run-history-row > span:not(.pipeline-catalog-name) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-history-row .pipeline-catalog-name strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .69rem; }
.run-status { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 5px 8px; font-size: .45rem; font-weight: 730; }
.run-status i { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }
.run-status.succeeded { color: #277850; background: #e6f4ec; }.run-status.succeeded i { background: #35a768; }
.run-status.failed { color: #a04843; background: #fbe9e7; }.run-status.failed i { background: #cf5b53; }
.run-status.running { color: #2769ab; background: #e6f0fb; }.run-status.running i { background: #3c82ce; }
.run-history-row .run-status { border: 1px solid transparent; border-radius: 5px; padding: 4px 7px; color: #fff; font-size: .54rem; font-weight: 500; }
.run-history-row .run-status i { display: none; }
.run-history-row .run-status.succeeded { border-color: rgba(39,122,80,.56); background: rgba(39,122,80,.52); }
.run-history-row .run-status.failed { border-color: rgba(170,73,63,.54); background: rgba(170,73,63,.5); }
.run-history-row .run-status.running { border-color: rgba(40,105,170,.54); background: rgba(40,105,170,.5); }
/* The label row stays put while runs scroll under it. */
#run-history-list-view .pipeline-catalog-table-head { position: sticky; top: 0; z-index: 11; }
.run-detail-heading { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #dfe3e7; }.run-detail-heading > div { display: flex; align-items: center; gap: 11px; }.run-detail-heading > div:last-child { gap: 8px; }.run-detail-heading button { min-height: 32px; border: 1px solid #d3d9df; border-radius: 6px; padding: 0 10px; color: #58616a; background: #fff; font-size: .53rem; font-weight: 700; }.run-detail-heading #back-to-run-history { display: grid; width: 32px; padding: 0; place-items: center; font-size: .8rem; }.run-detail-heading p, .run-detail-heading h2 { margin: 0; }.run-detail-heading p { margin-bottom: 4px; color: #8a929a; font-size: .47rem; }.run-detail-heading h2 { font-size: .84rem; }
.run-detail-summary { display: grid; min-height: 105px; grid-template-columns: minmax(280px, 1fr) auto; align-items: center; gap: 24px; margin-top: 15px; border: 1px solid #dce1e5; border-radius: 9px; padding: 0 17px; background: #fff; }.run-detail-result { display: flex; align-items: center; gap: 12px; }.run-result-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 50%; font-size: .72rem; font-weight: 800; }.run-result-icon.succeeded { color: #267950; background: #e4f4eb; }.run-result-icon.failed { color: #a04843; background: #fbe8e6; }.run-detail-result h3, .run-detail-result p { margin: 0; }.run-detail-result h3 { margin-bottom: 5px; font-size: .68rem; }.run-detail-result p { color: #858d96; font-size: .49rem; }.run-detail-summary dl { display: flex; margin: 0; }.run-detail-summary dl > div { min-width: 105px; border-left: 1px solid #e3e6e9; padding-left: 15px; }.run-detail-summary dt { color: #8b929a; font-size: .45rem; }.run-detail-summary dd { margin: 6px 0 0; color: #424b54; font-size: .53rem; font-weight: 680; }
.run-detail-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 13px; margin-top: 13px; }.run-stages-panel, .run-log-panel { overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.run-stages-panel > header, .run-log-panel > header { display: flex; min-height: 59px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e8eb; padding: 0 14px; }.run-stages-panel h3, .run-stages-panel p, .run-log-panel h3, .run-log-panel p { margin: 0; }.run-stages-panel h3, .run-log-panel h3 { margin-bottom: 4px; font-size: .64rem; }.run-stages-panel p, .run-log-panel p { color: #8d949c; font-size: .47rem; }.run-stages-panel header > span { color: #858d95; font-size: .48rem; }.run-log-panel header button { border: 0; color: #286caf; background: transparent; font-size: .48rem; font-weight: 700; }

.compute-view { min-height: 0; grid-column: 1 / -1; grid-row: 3 / -1; overflow: auto; color: #30373f; background: #f5f6f8; }
.compute-page { width: min(1050px, calc(100% - 42px)); margin: 0 auto; padding: 25px 0 45px; }.compute-heading { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dfe3e7; }.compute-heading p, .compute-heading h2, .compute-heading span { display: block; margin: 0; }.compute-heading p { margin-bottom: 5px; color: #2771be; font-size: .5rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }.compute-heading h2 { margin-bottom: 5px; font-size: .94rem; }.compute-heading > div > span { color: #7f8790; font-size: .55rem; }.compute-ready { border-radius: 999px; padding: 6px 9px; color: #287a51; background: #e5f4eb; font-size: .5rem; font-weight: 720; }.compute-ready i, .compute-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }
.compute-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 15px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.compute-stats article { min-height: 88px; padding: 15px 16px; }.compute-stats article + article { border-left: 1px solid #e5e8eb; }.compute-stats span, .compute-stats strong, .compute-stats small { display: block; }.compute-stats span { margin-bottom: 8px; color: #8a929a; font-size: .49rem; }.compute-stats strong { margin-bottom: 6px; color: #35404a; font-size: .76rem; }.compute-stats small { color: #969ca3; font-size: .47rem; }
.compute-panel { margin-top: 14px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.compute-panel > header { display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e5e8eb; padding: 0 17px; }.compute-panel h3, .compute-panel p { margin: 0; }.compute-panel h3 { margin-bottom: 5px; font-size: .68rem; }.compute-panel p { color: #899099; font-size: .5rem; }.compute-panel > header > span { border-radius: 6px; padding: 6px 8px; color: #5d6872; background: #eef0f2; font: .49rem ui-monospace, SFMono-Regular, Menlo, monospace; }.compute-environment-row { display: grid; min-height: 92px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 17px; }.compute-environment-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; color: #2869aa; background: #e5f0fb; font-size: .82rem; }.compute-environment-row strong, .compute-environment-row small { display: block; }.compute-environment-row strong { margin-bottom: 6px; font-size: .63rem; }.compute-environment-row small { color: #858d96; font-size: .5rem; }.compute-status { color: #287a51; font-size: .5rem; font-weight: 700; }.compute-panel dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid #e5e8eb; background: #fafbfc; }.compute-panel dl > div { min-height: 70px; padding: 14px 16px; }.compute-panel dl > div + div { border-left: 1px solid #e5e8eb; }.compute-panel dt { margin-bottom: 7px; color: #8a929a; font-size: .47rem; }.compute-panel dd { margin: 0; color: #46515b; font-size: .55rem; font-weight: 680; }
.run-stage-list { padding: 3px 14px 10px; }.run-stage-item { display: grid; min-height: 60px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #eceef0; }.run-stage-item:last-child { border-bottom: 0; }.run-stage-item > i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #277850; background: #e6f4ec; font-size: .5rem; font-style: normal; font-weight: 800; }.run-stage-item.is-failed > i { color: #a04843; background: #fbe8e6; }.run-stage-item strong, .run-stage-item small { display: block; }.run-stage-item strong { margin-bottom: 4px; color: #424b54; font-size: .54rem; }.run-stage-item small { color: #8b929a; font-size: .45rem; }.run-stage-item > span:last-child { color: #7d858e; font-size: .47rem; }.run-log-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }.run-log-panel pre { min-height: 350px; margin: 0; overflow: auto; padding: 15px 16px 45px; color: #cbd6df; background: #26323d; font: .5rem/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; }

.key-vault-view { min-height: 0; grid-column: 1 / -1; grid-row: 3 / -1; overflow: auto; color: #30373f; background: #fff; }
.key-vault-page { width: 100%; }
.recipes-view.connections-view { grid-column: 1 / -1; }
.pipeline-main.is-app-page.is-recipes-page { grid-template-rows: minmax(0, 1fr); }
.recipes-table { display: block; margin: 0; overflow: visible; border: 0; border-radius: 0; background: #fff; }
.pipeline-catalog-table.is-recipe-table .pipeline-catalog-table-head, .recipe-row { min-width: 940px; grid-template-columns: minmax(250px, 1.65fr) minmax(150px, 1fr) 100px 80px minmax(150px, 1fr) 18px; }
#recipe-catalog-view .pipeline-catalog-table-head { position: sticky; z-index: 11; top: 68px; }
.recipe-row { width: 100%; border: 0; border-top: 1px solid #e8eaed; font: inherit; text-align: left; }
.recipe-row-category { color: #69727b; font-size: .55rem; }
.recipe-row-count { color: #5e6872; font: .58rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.recipe-row-runtime { display: inline-flex; width: fit-content; border-radius: 5px; padding: 4px 7px; color: #5d6771; background: #edf0f3; font-size: .52rem; font-weight: 600; }

.recipe-detail-view { position: fixed; z-index: 50; inset: 0 0 0 60px; display: grid; min-width: 320px; grid-template-rows: 68px 43px minmax(0, 1fr); overflow: hidden; color: #30373f; background: #f5f6f8; }
.recipe-detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--pipeline-border); padding: 0 15px 0 19px; background: #fff; }
.recipe-detail-topbar .pipeline-title-group { min-width: 0; }
.recipe-detail-topbar .pipeline-title-row { margin-top: 2px; }
.recipe-detail-topbar .pipeline-title-row h1 { max-width: min(52vw, 640px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-detail-topbar .pipeline-breadcrumbs strong { max-width: min(34vw, 420px); }.recipe-detail-topbar .save-recipe-template { min-height: 29px; flex: 0 0 auto; margin-left: 4px; border: 1px solid #1f5943; border-radius: 6px; padding: 0 11px; color: #fff; background: #27634f; font-size: .52rem; font-weight: 720; text-decoration: none; }.recipe-detail-topbar .save-recipe-template:hover { color: #fff; background: #1f5943; text-decoration: none; }.recipe-detail-topbar .save-recipe-template:disabled { cursor: wait; opacity: .65; }
.recipe-version { margin-left: 10px; color: #8a929a; font-size: .47rem; }
.recipe-detail-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.recipe-detail-actions > span { color: #587461; font-size: .5rem; font-weight: 680; }.recipe-detail-actions > span i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }
.recipe-detail-actions button { min-height: 34px; border: 1px solid #c7d0d8; border-radius: 7px; padding: 0 12px; color: #7a838c; background: #f1f3f5; font-size: .55rem; font-weight: 720; }
.recipe-detail-tabs { min-height: 43px; }
.recipe-detail-tabs > span { display: flex; align-items: center; color: #858d96; font-size: .5rem; }.recipe-detail-tabs > span i { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #35a768; }
.recipe-template-workspace { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) min(42vw, 620px); overflow: hidden; }
.recipe-canvas-viewport { min-width: 0; min-height: 0; overflow: auto; background: #f7f8fa; }
.recipe-canvas { position: relative; width: 1180px; min-width: 1180px; height: 680px; min-height: 680px; overflow: hidden; background-color: #f7f8fa; background-image: radial-gradient(#d6d9de .75px, transparent .75px); background-size: 16px 16px; }
.recipe-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }.recipe-edges path { fill: none; stroke: #aab4c0; stroke-width: 1.4; }
.recipe-pipeline-node { position: absolute; width: 220px; height: 94px; border: 1px solid #ccd2d9; border-radius: 7px; background: #fff; box-shadow: 0 2px 6px rgba(37,47,58,.07); }
.recipe-pipeline-node:first-child { border-color: #3980d0; box-shadow: 0 0 0 2px rgba(40,118,210,.13), 0 4px 12px rgba(37,47,58,.1); }
.recipe-pipeline-node header { display: grid; height: 59px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #ebedf0; padding: 0 10px; }
.recipe-pipeline-node header strong, .recipe-pipeline-node header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.recipe-pipeline-node header strong { margin-bottom: 4px; color: #2d343c; font: 680 .66rem ui-monospace, SFMono-Regular, Menlo, monospace; }.recipe-pipeline-node header small { color: #858c95; font-size: .52rem; }
.recipe-node-kind { border-radius: 5px; padding: 4px 6px; color: #607080; background: #edf0f3; font: 700 .43rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.recipe-pipeline-node footer { display: flex; height: 34px; align-items: center; padding: 0 10px; color: #7d848d; font-size: .49rem; }.recipe-pipeline-node footer i { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #35a768; }
.recipe-node-port { position: absolute; z-index: 4; top: calc(50% - 6px); width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #8695a5; box-shadow: 0 0 0 1px #7e8d9d; }.recipe-node-port.is-input { left: -7px; }.recipe-node-port.is-output { right: -7px; }
.recipe-chat-dock { display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; border-left: 1px solid var(--pipeline-border); background: #fff; }
.recipe-chat-messages { min-height: 0; overflow: auto; padding: 22px 20px; }.recipe-chat-messages .pipeline-chat-welcome { display: block; }.recipe-chat-messages .pipeline-chat-welcome p { max-width: none; color: #3d454d; font-size: .76rem; line-height: 1.65; }
.recipe-chat-note { margin-top: 18px; border: 1px solid #dfe3e7; border-radius: 9px; padding: 13px; background: #f8f9fa; }.recipe-chat-note strong { color: #414a53; font-size: .58rem; }.recipe-chat-note p { margin: 6px 0 0; color: #818992; font-size: .52rem; line-height: 1.55; }
.recipe-chat-composer { margin: 0 16px 16px; }.recipe-model-picker { position: relative; display: inline-flex; min-height: 31px; align-items: center; margin-right: auto; border: 1px solid #d9dde1; border-radius: 8px; color: #59626b; background: rgba(255,255,255,.66); }.recipe-model-picker select { min-height: 29px; max-width: 190px; appearance: none; border: 0; padding: 0 28px 0 10px; color: inherit; background: transparent; outline: none; font-size: .67rem; font-weight: 700; cursor: pointer; }.recipe-model-picker > span:last-child { position: absolute; right: 9px; pointer-events: none; }.recipe-save-dialog form > label:not(:first-child) { margin-top: 14px; }
.unsaved-recipe-dialog > header > div > span { background: #c97824; }.unsaved-recipe-content { padding: 20px 18px 18px; }.unsaved-recipe-content > p { margin: 0; color: #646e77; font-size: .6rem; line-height: 1.55; }.unsaved-recipe-content > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }.unsaved-recipe-content button { min-height: 34px; border: 1px solid #d2d7dc; border-radius: 7px; padding: 0 12px; color: #58616a; background: #fff; font-size: .55rem; font-weight: 720; }.unsaved-recipe-content #discard-unsaved-recipe { color: #9b4a42; }.unsaved-recipe-content #save-unsaved-recipe { border-color: #1f5943; color: #fff; background: #27634f; }
.key-vault-heading { position: sticky; z-index: 12; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e5e8eb; padding: 0 16px; background: #fff; }.key-vault-heading h2, .key-vault-heading p { display: block; margin: 0; }.key-vault-heading h2 { color: #29313a; font-size: .78rem; font-weight: 600; }.key-vault-heading p { overflow: hidden; margin-top: 3px; color: #7e858e; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }.key-vault-heading > button { min-height: 33px; border: 1px solid rgba(39,99,79,.4); border-radius: 6px; padding: 0 12px; color: #27634f; background: rgba(39,99,79,.16); font-size: .63rem; font-weight: 700; }
.vault-table.pipeline-catalog-table { border-top: 0; overflow: visible; }
.pipeline-catalog-table.is-vault-table .pipeline-catalog-table-head, .vault-secret-row { min-width: 1020px; grid-template-columns: minmax(215px, 1.35fr) minmax(160px, 1fr) 120px minmax(150px, .9fr) 96px 172px; }
#key-vault-view .pipeline-catalog-table-head { position: sticky; top: 68px; z-index: 11; }
.vault-secret-row { border-top: 1px solid #e8eaed; }
.vault-secret-row > span:not(.pipeline-catalog-name) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-secret-row .pipeline-catalog-name strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; }
.vault-secret-value { display: flex; min-width: 0; align-items: center; gap: 6px; }.vault-secret-value code { min-width: 0; overflow: hidden; color: #69727b; font: .62rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }.vault-secret-value button, .vault-row-actions button { border: 0; color: #536779; background: transparent; font-size: .56rem; }.vault-secret-value button { width: 24px; height: 24px; padding: 0; border-radius: 5px; }.vault-secret-value button:hover { background: #e8edf1; }.vault-scope { display: inline-block; width: fit-content; border: 1px solid transparent; border-radius: 5px; padding: 4px 7px; color: #596b7d; background: #edf1f4; font-size: .54rem; font-weight: 500; }.vault-used-by { font-size: .6rem; }.vault-used-by b { display: inline-grid; width: 17px; height: 17px; margin-left: 4px; place-items: center; border-radius: 50%; color: #2768a9; background: #e5effa; font-size: .48rem; }.vault-updated { color: #858d95; font-size: .6rem; }.vault-row-actions { display: flex; justify-content: flex-end; gap: 4px; }.vault-row-actions button { border-radius: 5px; padding: 5px; font-weight: 700; }.vault-row-actions button:hover { background: #e9edf0; }.vault-row-actions [data-delete-secret] { color: #a04444; }.vault-row-actions [data-delete-secret]:hover { background: #faeaea; }.vault-list-panel > footer { display: flex; min-height: 39px; align-items: center; justify-content: space-between; border-top: 1px solid #e5e8eb; padding: 0 13px; color: #8a929a; background: #fafbfc; font-size: .46rem; }.vault-list-panel > footer i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }
.vault-dialog { width: min(470px, calc(100% - 28px)); border: 0; border-radius: 12px; padding: 0; color: #30373f; background: #fff; box-shadow: 0 28px 90px rgba(22,31,40,.25); }.vault-dialog::backdrop { background: rgba(25,32,40,.42); backdrop-filter: blur(2px); }.vault-dialog > header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e4e8; padding: 0 18px; }.vault-dialog > header > div { display: flex; align-items: center; gap: 10px; }.vault-dialog h2, .vault-dialog header p { margin: 0; }.vault-dialog h2 { margin-bottom: 4px; font-size: .79rem; }.vault-dialog header p { color: #8a9199; font-size: .49rem; }.vault-dialog header > button { width: 28px; height: 28px; border: 0; border-radius: 6px; color: #7f8790; background: transparent; font-size: .85rem; }.vault-dialog header > button:hover { background: #f0f2f4; }.vault-dialog form { display: grid; padding: 17px 18px 18px; }.vault-dialog form > label { margin: 10px 0 6px; color: #505861; font-size: .53rem; font-weight: 700; }.vault-dialog form > label:first-child { margin-top: 0; }.vault-dialog label span { color: #969ca3; font-weight: 500; }.vault-dialog input, .vault-dialog select { width: 100%; min-height: 36px; border: 1px solid #d3d8de; border-radius: 6px; padding: 0 10px; color: #3d454e; background: #fff; outline: none; font-size: .56rem; }.vault-dialog input:focus, .vault-dialog select:focus { border-color: #5f9bd9; box-shadow: 0 0 0 2px rgba(40,118,210,.1); }.vault-field-note { margin: 5px 0 0; color: #939aa2; font-size: .46rem; }.vault-dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 19px; }.vault-dialog-actions button { min-height: 33px; border-radius: 6px; padding: 0 12px; font-size: .54rem; font-weight: 700; }.vault-dialog-actions button:first-child { border: 1px solid #d3d8de; color: #606872; background: #fff; }.vault-dialog-actions button:last-child { border: 1px solid #1767bd; color: #fff; background: #2876d2; }
.pipeline-main.is-secondary-view .pipeline-actions, .pipeline-main.is-secondary-view .canvas-tools { visibility: hidden; }

.vault-dialog .vault-checkbox { display: flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid #e0e4e8; border-radius: 7px; padding: 9px 10px; color: #626b74; background: #f8f9fa; font-size: .51rem; font-weight: 600; }
.vault-dialog .vault-checkbox input { width: 15px; min-height: 15px; margin: 0; box-shadow: none; }
.source-catalog-note { color: #8a929a; font-size: .51rem; }

.source-link-state { color: #8b929a; font-size: .6rem; }
.source-link-state.is-linked { color: #277851; font-weight: 700; }
#link-source-to-pipeline.is-linked { border-color: #d3d8dd; color: #5a646d; background: #fff; }

.pipeline-code-files-view { display: grid; min-height: 0; grid-column: 1; grid-row: 3; grid-template-rows: minmax(0, 1fr); overflow: hidden; color: #30373f; background: #f7f8fa; }
.pipeline-code-shell { display: grid; min-height: 0; grid-template-columns: 250px minmax(0, 1fr); overflow: hidden; background: #fff; }
.pipeline-code-tree { min-width: 0; overflow: auto; border-right: 1px solid #e1e4e7; padding: 0 7px 18px; background: #f7f8fa; }
.pipeline-code-tree > header { display: flex; height: 43px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e7ea; padding: 0 9px; color: #858d96; font-size: .6rem; font-weight: 800; letter-spacing: .08em; }
.pipeline-code-tree > header small { max-width: 135px; overflow: hidden; color: #a0a6ad; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-code-root { padding: 13px 9px 7px; color: #414a53; font-size: .68rem; font-weight: 700; }
.pipeline-code-branch { display: grid; min-width: 0; }
.pipeline-code-folder, .pipeline-code-branch [data-pipeline-code-file] { display: flex; width: 100%; min-height: 34px; align-items: center; gap: 7px; border: 0; border-radius: 6px; color: #606a73; background: transparent; text-align: left; }
.pipeline-code-folder { font-size: .63rem; font-weight: 680; }.pipeline-code-folder > span { width: 12px; flex: 0 0 12px; color: #9299a1; font-size: .75rem; text-align: center; }
.pipeline-code-branch [data-pipeline-code-file] { padding-right: 8px; font: .64rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.pipeline-code-branch [data-pipeline-code-file] > span { width: 20px; flex: 0 0 20px; color: #7c858e; font-size: .52rem; font-weight: 760; text-align: center; }
.pipeline-code-folder:hover, .pipeline-code-branch [data-pipeline-code-file]:hover { color: #353e47; background: #eef0f2; }.pipeline-code-branch [data-pipeline-code-file].is-active { color: #2f3740; background: #e6e9ec; font-weight: 700; }
.pipeline-code-viewer { display: grid; min-width: 0; min-height: 0; grid-template-rows: 44px minmax(0, 1fr); background: #fff; }
.pipeline-code-viewer > header { --code-toolbar-bg: #fafbfc; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; border-bottom: 1px solid #e2e5e8; color: #4e5862; background: var(--code-toolbar-bg); font: .64rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.pipeline-code-tabs { display: flex; width: 100%; min-width: 0; height: 100%; align-items: stretch; gap: 1px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-color: #b6bcc3 transparent; scrollbar-width: thin; touch-action: pan-x; -webkit-overflow-scrolling: touch; }.pipeline-code-tabs::-webkit-scrollbar { height: 5px; }.pipeline-code-tabs::-webkit-scrollbar-track { background: transparent; }.pipeline-code-tabs::-webkit-scrollbar-thumb { border-radius: 999px; background: #b6bcc3; }.pipeline-code-tabs-empty { align-self: center; padding-left: 14px; color: #929aa2; font-family: system-ui, sans-serif; font-size: .58rem; }
.pipeline-code-tab { display: flex; max-width: 220px; flex: 0 0 auto; align-items: center; border-right: 1px solid #e2e5e8; color: #69727b; background: #f3f5f6; }.pipeline-code-tab.is-active { color: #323b44; background: #fff; box-shadow: inset 0 2px #58738b; }
.pipeline-code-tab > button { min-height: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; }.pipeline-code-tab > button:first-child { max-width: 175px; height: 100%; overflow: hidden; padding-left: 11px !important; font: .6rem ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }.pipeline-code-tab > button:last-child { width: 27px; height: 27px; margin: 0 3px; color: #8a929a; font-size: .76rem; }.pipeline-code-tab > button:last-child:hover { color: #3e4851; background: #e8ebed !important; }
.pipeline-code-viewer > header button { min-height: 30px; border: 1px solid #d7dce1; border-radius: 6px; padding: 0 10px; color: #59636c; background: #fff; font-size: .59rem; font-weight: 700; }
.pipeline-code-viewer > header button:hover { border-color: #c1c7cd; color: #303840; }
.pipeline-code-actions { position: relative; z-index: 2; display: flex; height: 100%; align-items: center; gap: 6px; padding: 0 14px 0 18px; background: var(--code-toolbar-bg); }
.pipeline-code-actions::before { position: absolute; top: 0; bottom: 0; left: -42px; width: 42px; background: linear-gradient(90deg, transparent, var(--code-toolbar-bg)); content: ""; pointer-events: none; }
.pipeline-code-viewer pre { min-height: 0; margin: 0; overflow: auto; padding: 23px 25px 80px; color: #39434d; background: #fff; font: .72rem/1.68 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; white-space: pre; }
.pipeline-code-viewer pre.is-empty { display: grid; place-items: center; color: #929aa2; font: .64rem system-ui, sans-serif; }

.connections-view { z-index: 11; display: block; min-width: 760px; min-height: 100%; grid-column: 1; grid-row: 1 / -1; overflow: auto; color: #30373f; background: #fff; }
.pipeline-main.is-app-page.is-sources-page { grid-template-rows: minmax(0, 1fr); }
.pipeline-main.is-app-page.is-sources-page .pipeline-workspace { grid-row: 1 / -1; }
.pipeline-main.is-app-page.is-vault-page { grid-template-rows: minmax(0, 1fr); }
.pipeline-main.is-app-page.is-vault-page .key-vault-view { grid-row: 1 / -1; }
.pipeline-main.is-app-page.is-docs-page { grid-template-rows: minmax(0, 1fr); }
.pipeline-main.is-app-page.is-docs-page .docs-view { grid-row: 1 / -1; }
.connections-view-header { position: sticky; z-index: 12; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e5e8eb; padding: 0 16px; background: #fff; }
.connections-heading { display: flex; min-width: 0; align-items: center; gap: 11px; }.connections-heading > div { min-width: 0; }.connections-heading p, .connections-heading h2 { margin: 0; }.connections-heading h2 { color: #29313a; font-size: .78rem; font-weight: 600; }.connections-heading p { overflow: hidden; margin-top: 3px; color: #7e858e; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.back-to-pipeline { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #d5dae0; border-radius: 6px; color: #4f5862; background: #fff; font-size: .88rem; }.back-to-pipeline:hover { border-color: #9bbce0; color: #1e64ad; background: #f5f9fe; }
.connections-actions .catalog-filter-button { position: relative; display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 0; border-radius: 6px; padding: 0; color: #98a0a8; background: transparent; }.catalog-filter-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.catalog-filter-button:hover, .catalog-filter-button:focus-visible, .catalog-filter-button[aria-expanded="true"], .catalog-filter-button.is-filtered { color: #29313a; outline: none; }.catalog-filter-button.is-filtered::after { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #27634f; content: ""; }
.catalog-filter-panel { border-bottom: 1px solid #e5e8eb; padding: 15px 16px 16px; background: #fbfcfc; }.catalog-filter-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px 14px; }.catalog-filter-field { display: grid; min-width: 0; gap: 6px; }.catalog-filter-field > span { color: #8c939b; font-size: .47rem; font-weight: 770; letter-spacing: .06em; text-transform: uppercase; }.catalog-filter-field :is(input, select) { min-width: 0; min-height: 30px; border: 1px solid #dce1e5; border-radius: 6px; padding: 0 9px; color: #39424b; background: #fff; font-size: .56rem; }.catalog-filter-field :is(input, select):focus { border-color: #8bb49a; outline: none; box-shadow: 0 0 0 3px rgba(39,99,79,.1); }.catalog-filter-field input::placeholder { color: #a3aab1; }.catalog-filter-panel > footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; }.catalog-filter-panel > footer button { min-height: 30px; border-radius: 6px; padding: 0 13px; font-size: .56rem; font-weight: 700; }.catalog-filter-clear { border: 1px solid #d4d9df; color: #59616a; background: #fff; }.catalog-filter-save { border: 1px solid #1f5943; color: #fff; background: #27634f; }
.connections-actions .catalog-chip { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 0; border-radius: 6px; padding: 0; color: #98a0a8; background: transparent; }.catalog-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.catalog-chip:hover, .catalog-chip:focus-visible, .catalog-chip[aria-pressed="true"] { color: #29313a; outline: none; }
.catalog-search { position: relative; display: flex; min-width: 0; align-items: center; }.catalog-search > svg { position: absolute; left: 10px; width: 13px; height: 13px; fill: none; stroke: #7d9684; stroke-width: 1.9; stroke-linecap: round; pointer-events: none; }.catalog-search input { width: 450px; max-width: 100%; min-height: 32px; border: 1px solid #d4dfd7; border-radius: 6px; padding: 0 10px 0 29px; color: #39424b; background: rgba(39,99,79,.05); font-size: .56rem; }.catalog-search input::placeholder { color: #8e9b91; }.catalog-search input:focus { border-color: #8bb49a; outline: none; box-shadow: 0 0 0 3px rgba(39,99,79,.1); }
.catalog-search:focus-within > svg { stroke: #6d767f; }
.connections-actions { display: flex; min-width: 0; align-items: center; gap: 7px; }.connections-actions button { min-height: 32px; border-radius: 6px; padding: 0 11px; font-size: .56rem; font-weight: 700; }.sync-connections { border: 1px solid #d4d9df; color: #59616a; background: #fff; }.add-connection-button { border: 1px solid #1767bd; color: #fff; background: #2876d2; }
.connection-stat-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: #1e63ac; background: #e4f0fc; font-size: .9rem; font-weight: 800; }
.connections-stats { display: flex; align-items: center; }.connections-stats > span { min-width: 82px; border-left: 1px solid #e4e7ea; padding-left: 16px; color: #8a9199; font-size: .49rem; }.connections-stats strong { margin-bottom: 3px; color: #38414a; font-size: .63rem; }
.connections-table { display: block; margin: 0; overflow: visible; border: 0; border-radius: 0; background: #fff; }
.pipeline-catalog-table.is-source-table .pipeline-catalog-table-head, .connection-row { min-width: 940px; grid-template-columns: minmax(200px, 1.4fr) minmax(200px, 1.6fr) 130px 110px 110px 18px; }
#connections-view .pipeline-catalog-table-head { position: sticky; top: 68px; z-index: 11; }
.connection-url { overflow: hidden; color: #7b848d; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.connection-row { width: 100%; border: 0; border-top: 1px solid #e8eaed; font: inherit; text-align: left; }.connection-row.is-selected { background: #f7fafe; }
.connection-identity { display: flex; min-width: 0; align-items: center; gap: 9px; }.connection-identity > span:last-child { min-width: 0; }.connection-identity strong, .connection-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.connection-identity strong { margin-bottom: 4px; font-size: .58rem; }.connection-identity small { color: #8c939b; font-size: .49rem; }
.connection-title-line { display: flex; min-width: 0; align-items: center; gap: 7px; }.connection-title-line strong { min-width: 0; margin-bottom: 0; }.source-owner-label { display: inline-flex; flex: 0 0 auto; align-items: center; border-radius: 5px; padding: 4px 7px; font-size: .54rem; font-weight: 500; white-space: nowrap; }.source-owner-label.user-generated { color: #5d6771; background: #edf0f3; }.source-owner-label.pipechat-maintained { color: #225f9e; background: #e5f0fb; }
.website-favicon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 6px; font-size: .6rem; font-weight: 800; }.website-favicon.blue { color: #1d62aa; background: #e4f0fc; }.website-favicon.violet { color: #6751a4; background: #eeebfc; }.website-favicon.green { color: #277153; background: #e4f3eb; }
.connection-type, .connection-time { color: #737b84; font-size: .51rem; }.connection-health { color: #258156; font-size: .6rem; font-weight: 500; }.connection-health i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }.row-menu { color: #969ca3; font-size: .58rem; letter-spacing: .06em; }

.source-detail-view { position: fixed; z-index: 50; inset: 0 0 0 60px; display: grid; min-width: 320px; grid-template-rows: 70px 42px minmax(0, 1fr); overflow: hidden; color: #30373f; background: #f5f6f8; }
.source-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dce0e4; padding: 0 24px; background: #fff; }
.source-detail-header .back-to-pipeline { width: 34px; height: 34px; }
.source-detail-content { width: min(1120px, calc(100% - 48px)); margin: 0 auto; overflow: auto; padding: 28px 0 45px; }
.source-identity-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 15px; border: 1px solid #dfe3e7; border-radius: 10px; padding: 19px; background: #fff; }
.large-favicon { width: 48px; height: 48px; border-radius: 10px; font-size: .85rem; }
.source-title-line { display: flex; align-items: center; gap: 10px; }.source-title-line h3 { margin: 0; font-size: .88rem; }.detail-health { border-radius: 999px; padding: 4px 8px; color: #257d51; background: #e9f6ef; font-size: .49rem; font-weight: 700; }.detail-health i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #35a768; }
.source-identity-card a { display: inline-block; margin-top: 5px; color: #2268b3; font-size: .56rem; font-weight: 630; text-decoration: none; }.source-identity-card a:hover { text-decoration: underline; }.source-identity-card p { max-width: 720px; margin: 7px 0 0; color: #7b838c; font-size: .55rem; line-height: 1.5; }
.source-detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 13px; border: 1px solid #dfe3e7; border-radius: 9px; background: #fff; }
.source-detail-stats article { min-height: 67px; padding: 15px 17px; }.source-detail-stats article + article { border-left: 1px solid #e5e8eb; }.source-detail-stats span, .source-detail-stats strong { display: block; }.source-detail-stats span { margin-bottom: 7px; color: #8c939b; font-size: .49rem; }.source-detail-stats strong { color: #3b434b; font-size: .64rem; }
.source-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 13px; }
.source-info-panel, .source-fields-panel { overflow: hidden; border: 1px solid #dfe3e7; border-radius: 9px; background: #fff; }
.source-info-panel > header, .source-fields-panel > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e9eb; padding: 0 16px; }.source-info-panel h3, .source-info-panel p, .source-fields-panel h3, .source-fields-panel p { margin: 0; }.source-info-panel h3, .source-fields-panel h3 { margin-bottom: 4px; font-size: .66rem; }.source-info-panel header p, .source-fields-panel header p { color: #90969e; font-size: .49rem; }.source-info-panel header button { border: 0; color: #2168b5; background: transparent; font-size: .52rem; font-weight: 700; }
.source-info-panel dl { margin: 0; }.source-info-panel dl > div { display: grid; min-height: 45px; grid-template-columns: 125px minmax(0, 1fr); align-items: center; border-bottom: 1px solid #eef0f2; padding: 0 16px; }.source-info-panel dl > div:last-child { border-bottom: 0; }.source-info-panel dt { color: #8a9199; font-size: .5rem; }.source-info-panel dd { overflow: hidden; margin: 0; color: #454d56; font-size: .53rem; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.sync-success { border-radius: 999px; padding: 4px 7px; color: #277c52; background: #e8f6ee; font-size: .48rem; font-weight: 700; }.sync-success.is-warning { color: #916018; background: #fff0d3; }.sync-result { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 16px 15px; }.sync-result > div + div { border-left: 1px solid #e6e9eb; padding-left: 17px; }.sync-result span, .sync-result strong { display: block; }.sync-result span { margin-bottom: 6px; color: #8b929a; font-size: .48rem; }.sync-result strong { font-size: .67rem; }.sync-progress { height: 5px; margin: 0 16px; overflow: hidden; border-radius: 999px; background: #edf0f2; }.sync-progress span { display: block; height: 100%; border-radius: inherit; background: #35a768; }.sync-note { margin: 13px 16px 17px; color: #778079; font-size: .49rem; }.sync-note i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }
.source-fields-panel { margin-top: 13px; }.source-fields-panel > header > span { color: #858c94; font-size: .5rem; }.source-field-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 15px 16px 18px; }.source-field-list span { border: 1px solid #dce1e5; border-radius: 6px; padding: 6px 8px; color: #59626b; background: #fafbfc; font: .51rem ui-monospace, SFMono-Regular, Menlo, monospace; }

.source-detail-tabs { display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid #dfe3e7; padding: 0 max(24px, calc((100% - 1120px) / 2)); background: #fff; }
.source-detail-tabs button { position: relative; border: 0; padding: 0 15px; color: #717983; background: transparent; font-size: .58rem; font-weight: 680; }.source-detail-tabs button:hover { color: #2b4f75; }.source-detail-tabs button.is-active { color: #1f65af; }.source-detail-tabs button.is-active::after { position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: #2876d2; content: ""; }
.source-tab-panel { min-height: 0; }
.source-workspace-tab { overflow: auto; padding: 25px max(24px, calc((100% - 1120px) / 2)) 45px; }
.tab-page-heading { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dfe3e7; }.tab-page-heading p, .tab-page-heading h3, .tab-page-heading span { display: block; margin: 0; }.tab-page-heading p { margin-bottom: 4px; color: #8c939b; font-size: .48rem; text-transform: uppercase; letter-spacing: .08em; }.tab-page-heading h3 { margin-bottom: 5px; font-size: .88rem; }.tab-page-heading span { color: #7f8790; font-size: .53rem; }.tab-page-heading > button { min-height: 33px; border: 1px solid #1767bd; border-radius: 6px; padding: 0 12px; color: #fff; background: #2876d2; font-size: .55rem; font-weight: 720; }
.version-list { display: grid; gap: 8px; margin-top: 15px; }.version-list > button { display: grid; min-height: 72px; grid-template-columns: auto minmax(0, 1.4fr) minmax(170px, 1fr) 65px 20px; align-items: center; gap: 12px; border: 1px solid #dce1e5; border-radius: 8px; padding: 0 15px; color: #414a53; background: #fff; text-align: left; }.version-list > button:hover { border-color: #99bde4; background: #f8fbfe; }.version-list strong, .version-list small { display: block; }.version-list strong { margin-bottom: 5px; font-size: .64rem; }.version-list small { color: #8a929a; font-size: .5rem; }.version-badge { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 7px; color: #215f9f; background: #e5f0fb; font: 750 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; }.version-summary { color: #727a83; font-size: .52rem; }.version-current { justify-self: start; border-radius: 999px; padding: 4px 7px; color: #287951; background: #e8f5ee; font-size: .47rem; font-weight: 720; }.version-arrow { color: #7c858e; font-size: .72rem; }
.maintained-access-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 17px; margin-top: 15px; border: 1px solid #dce1e5; border-radius: 9px; padding: 22px; background: #fff; }.maintained-lock { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 10px; color: #2467ac; background: #e6f1fc; font-size: 1rem; font-weight: 800; }.maintained-access-copy h3, .maintained-access-copy p { margin: 0; }.maintained-access-copy h3 { margin-bottom: 6px; font-size: .72rem; }.maintained-access-copy p { max-width: 610px; color: #7d858e; font-size: .53rem; line-height: 1.5; }.maintained-counts { display: flex; align-items: center; }.maintained-counts span { min-width: 96px; border-left: 1px solid #e2e5e8; padding-left: 17px; color: #858d95; font-size: .48rem; }.maintained-counts strong { display: block; margin-bottom: 6px; color: #36414a; font-size: .78rem; }
.code-folder-view { min-height: 600px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.nested-view-heading { display: flex; min-height: 64px; align-items: center; gap: 11px; border-bottom: 1px solid #dfe3e7; padding: 0 15px; background: #fff; }.nested-view-heading > button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #d5dae0; border-radius: 6px; color: #4f5862; background: #fff; }.nested-view-heading p, .nested-view-heading h3 { margin: 0; }.nested-view-heading p { margin-bottom: 4px; color: #899099; font-size: .48rem; }.nested-view-heading h3 { font-size: .73rem; }.nested-view-heading > span { margin-left: auto; }
.code-folder-shell { display: grid; min-height: 535px; grid-template-columns: 270px minmax(0, 1fr); }.source-code-tree { min-width: 0; border-right: 1px solid #dfe3e7; padding: 0 8px 18px; background: #f8f9fa; }.source-code-tree > header { display: flex; height: 38px; align-items: center; justify-content: space-between; padding: 0 8px; color: #858d96; font-size: .47rem; font-weight: 800; letter-spacing: .08em; }.source-code-tree > header small { font-size: inherit; }.code-tree-root { padding: 7px 8px; color: #414a53; font-size: .55rem; }.code-tree-root span, .code-tree-folder span { color: #8a929b; }.code-tree-folder { padding: 7px 10px 4px 18px; color: #5e6770; font-size: .53rem; font-weight: 680; }.source-code-tree > button { display: flex; width: 100%; min-height: 29px; align-items: center; gap: 7px; border: 0; border-radius: 5px; padding: 0 8px 0 28px; color: #626a73; background: transparent; font-size: .51rem; text-align: left; }.source-code-tree > button span { width: 18px; color: #3472b1; font: 700 .43rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }.source-code-tree > button:hover, .source-code-tree > button.is-active { color: #1f5fa6; background: #e7f0fa; }
.source-code-viewer { display: grid; min-width: 0; grid-template-rows: 39px minmax(0, 1fr); background: #fbfcfd; }.source-code-viewer > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfe3e7; padding: 0 12px; color: #505962; background: #fff; font: .51rem ui-monospace, SFMono-Regular, Menlo, monospace; }.source-code-viewer > header > div { display: flex; align-items: center; gap: 9px; }.source-code-viewer > header > div span { border-radius: 999px; padding: 3px 6px; color: #286ba9; background: #e8f2fc; font-size: .45rem; font-weight: 750; }.source-code-viewer > header button { border: 0; color: #3970a8; background: transparent; font-size: .48rem; }.source-code-viewer pre { min-height: 0; margin: 0; overflow: auto; padding: 18px 20px 80px; color: #35404b; background: #fbfcfd; font: .55rem/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre; }

.health-summary-strip { display: flex; min-height: 48px; align-items: center; gap: 24px; margin-top: 14px; border: 1px solid #dce1e5; border-radius: 8px; padding: 0 14px; color: #7c848c; background: #fff; font-size: .5rem; }.health-summary-strip > span + span { border-left: 1px solid #e2e5e8; padding-left: 24px; }.health-summary-strip i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #35a768; }.health-summary-strip strong { margin-right: 3px; color: #3d474f; }
.health-check-list { display: grid; gap: 8px; margin-top: 11px; }.health-check-list > button { display: grid; min-height: 68px; grid-template-columns: auto minmax(0, 1fr) 135px 65px 15px; align-items: center; gap: 12px; border: 1px solid #dce1e5; border-radius: 8px; padding: 0 15px; color: #424a53; background: #fff; text-align: left; }.health-check-list > button:hover { border-color: #9bbde2; background: #f8fbfe; }.health-check-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #23774d; background: #e4f4eb; font-size: .68rem; font-weight: 800; }.health-check-icon.is-warning { color: #9a6719; background: #fff0d3; }.health-check-list strong, .health-check-list small { display: block; }.health-check-list strong { margin-bottom: 5px; font-size: .59rem; }.health-check-list small { color: #899099; font-size: .49rem; }.health-version, .health-duration { color: #747c85; font-size: .5rem; }.health-version b { border-radius: 999px; padding: 3px 6px; color: #2868a8; background: #e7f1fb; }.health-duration { text-align: right; }
.health-detail-view { min-height: 0; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.health-detail-content { overflow: auto; padding: 15px; background: #f7f8fa; }.health-run-card { display: flex; min-height: 94px; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #dce1e5; border-radius: 8px; padding: 0 16px; background: #fff; }.health-run-card > div:first-child { display: flex; align-items: center; gap: 11px; }.large-check { width: 38px; height: 38px; }.health-run-card h3, .health-run-card p { margin: 0; }.health-run-card h3 { margin-bottom: 5px; font-size: .68rem; }.health-run-card p { color: #858d96; font-size: .5rem; }.health-run-meta { display: flex; }.health-run-meta > span { min-width: 100px; border-left: 1px solid #e4e7ea; padding-left: 15px; color: #8a9199; font-size: .47rem; }.health-run-meta strong { display: block; margin-top: 6px; color: #404951; font-size: .56rem; }
.sample-data-panel, .validation-results { margin-top: 12px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 8px; background: #fff; }.sample-data-panel > header, .validation-results > header { display: flex; min-height: 57px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e7ea; padding: 0 15px; }.sample-data-panel h3, .sample-data-panel p, .validation-results h3 { margin: 0; }.sample-data-panel h3, .validation-results h3 { margin-bottom: 4px; font-size: .64rem; }.sample-data-panel p { color: #899099; font-size: .49rem; }.sample-data-panel header button { border: 0; color: #2168b5; background: transparent; font-size: .5rem; font-weight: 700; }.sample-table-wrap { overflow: auto; }.sample-data-panel table { width: 100%; min-width: 820px; border-collapse: collapse; text-align: left; }.sample-data-panel th { height: 34px; padding: 0 12px; color: #858d96; background: #fafbfc; font-size: .46rem; text-transform: uppercase; letter-spacing: .05em; }.sample-data-panel td { height: 43px; border-top: 1px solid #e9ebed; padding: 0 12px; color: #4e5760; font-size: .5rem; }.sample-data-panel td:last-child { max-width: 260px; overflow: hidden; color: #2870b6; text-overflow: ellipsis; white-space: nowrap; }.validation-results > header > span { color: #2a7a52; font-size: .5rem; font-weight: 720; }.validation-results > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; padding: 14px 15px 17px; }.validation-results > div span { color: #5f6871; font-size: .51rem; }.validation-results > div i { display: inline-grid; width: 18px; height: 18px; margin-right: 6px; place-items: center; border-radius: 50%; color: #26784f; background: #e6f4ec; font-size: .45rem; font-style: normal; }

.pipeline-chat-dock { position: relative; z-index: 8; display: grid; min-width: 0; min-height: 0; grid-column: 2; grid-row: 3; grid-template-rows: minmax(0, 1fr) auto; border-left: 1px solid #e5e8ec; background: #f7f8fa; }
.pipeline-chat-resizer { position: absolute; z-index: 12; top: 50%; left: 0; display: grid; width: 20px; height: 72px; place-items: center; transform: translate(-50%, -50%); border: 0; color: #87958a; background: transparent; cursor: col-resize; touch-action: none; }
.pipeline-chat-resizer span { position: relative; display: grid; width: 9px; height: 46px; place-items: center; border: 1px solid #b9c3ba; border-radius: 6px; background: #eef2ee; transition: height .15s ease, border-color .15s ease, background .15s ease; }
.pipeline-chat-resizer span::after { width: 2px; height: 21px; border-radius: 2px; background: currentColor; content: ""; }

/* Full orchestration builder mirrors the pipeline canvas with pipelines as nodes. */
.orchestration-builder-view { display: grid; min-width: 0; min-height: 0; grid-column: 1 / -1; grid-row: 1 / -1; grid-template-rows: 68px 43px minmax(0, 1fr); overflow: hidden; color: #30373f; background: #fff; }
.orchestration-builder-view[hidden] { display: none; }
.orchestration-builder-topbar { position: relative; z-index: 20; display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dfe2e7; padding: 0 16px; background: #f8f9fa; }
.orchestration-builder-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.orchestration-builder-breadcrumbs b:last-of-type { display: inline; }
.orchestration-builder-breadcrumbs #orchestration-builder-breadcrumb-name { max-width: min(32vw, 360px); color: #59636d; font-weight: 400; }
.orchestration-version-control .pipeline-version-menu { left: 0; }
.orchestration-builder-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.orchestration-builder-actions .add-block-top-button { min-height: 34px; }
.orchestration-builder-actions .run-pipeline-button { min-height: 34px; }
.orchestration-builder-actions #run-orchestration-builder { min-height: 34px; border-color: rgba(40,118,210,.34); color: #2869aa; background: rgba(40,118,210,.09); font-weight: 500; }
.orchestration-builder-actions #run-orchestration-builder:hover:not(:disabled) { background: rgba(40,118,210,.16); }
.orchestration-builder-actions #run-orchestration-builder:disabled { cursor: default; opacity: .45; }
.orchestration-delete-button { min-height: 34px; border: 0; padding: 0 8px; color: #a14e47; background: transparent; font-size: .52rem; font-weight: 720; }
.orchestration-builder-tabs { display: flex; min-width: 0; align-items: stretch; justify-content: space-between; border-bottom: 1px solid #dfe2e7; background: #fff; }
.orchestration-builder-tabs > div { display: flex; align-items: stretch; padding-left: 12px; }
.orchestration-builder-tabs button { position: relative; border: 0; padding: 0 12px; color: #747d86; background: transparent; font-size: .57rem; font-weight: 700; }
.orchestration-builder-tabs button.is-active { color: #2869aa; }
.orchestration-builder-tabs button.is-active::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: #2876d2; content: ""; }
.orchestration-builder-tabs button:disabled { opacity: .45; }
.orchestration-builder-tabs > span { display: flex; align-items: center; gap: 7px; padding-right: 16px; color: #7b858e; font-size: .48rem; }
.orchestration-builder-tabs > span i { width: 7px; height: 7px; border-radius: 50%; background: #38a268; }
.orchestration-builder-shell { display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) var(--pipeline-chat-width); }
.orchestration-run-history-view { min-width: 0; min-height: 0; overflow: auto; color: #30373f; background: #f5f6f8; }
.orchestration-run-history-view[hidden] { display: none; }
.orchestration-run-history-table.pipeline-catalog-table { border-top: 0; border-bottom: 1px solid #e8eaed; overflow: visible; }
.pipeline-catalog-table.is-orchestration-run-table .pipeline-catalog-table-head, .orchestration-run-history-row { min-width: 980px; grid-template-columns: minmax(145px,.85fr) 100px minmax(150px,1fr) 82px 100px minmax(220px,1.4fr) minmax(180px,1.2fr); }
.orchestration-run-history-table .pipeline-catalog-table-head { position: sticky; top: 0; z-index: 11; }
.orchestration-run-history-row { cursor: default; }
.orchestration-run-history-row > span:not(.pipeline-catalog-name) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orchestration-run-history-row .pipeline-catalog-name strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.orchestration-run-history-row .pipeline-catalog-name small { display: block; overflow: hidden; margin-top: 3px; color: #9098a0; font-size: .43rem; text-overflow: ellipsis; white-space: nowrap; }
.orchestration-run-history-row .run-status { width: fit-content; border: 1px solid transparent; border-radius: 5px; padding: 4px 7px; color: #fff; font-size: .54rem; font-weight: 400; }
.orchestration-run-history-row .run-status.succeeded { border-color: rgba(39,122,80,.56); background: rgba(39,122,80,.2); }
.orchestration-run-history-row .run-status.failed { border-color: rgba(170,73,63,.54); background: rgba(170,73,63,.2); }
.orchestration-run-history-row .run-status.running { border-color: rgba(40,105,170,.54); background: rgba(40,105,170,.2); }
.orchestration-run-history-view .pipeline-list-empty { min-height: 230px; border-top: 0; }
.orchestration-canvas-viewport { min-width: 0; min-height: 0; overflow: auto; background: #f7f8fa; }
.orchestration-canvas { position: relative; width: 1240px; min-width: 100%; height: 760px; min-height: 100%; overflow: hidden; background-color: #f7f8fa; background-image: radial-gradient(#d6d9de .75px, transparent .75px); background-size: 16px 16px; transition: width .18s ease; }
.orchestration-schedule-dialog { width: min(580px, calc(100vw - 32px)); overflow: hidden; border: 1px solid #d7dde2; border-radius: 11px; padding: 0; color: #3b4650; background: #fff; box-shadow: 0 22px 60px rgba(35,43,52,.24); }
.orchestration-schedule-dialog::backdrop { background: rgba(33,39,45,.42); backdrop-filter: blur(2px); }
.orchestration-schedule-dialog > header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e2e6e9; padding: 0 16px; background: #fafbfc; }
.orchestration-schedule-dialog > header > div { display: flex; min-width: 0; align-items: center; gap: 11px; }
.orchestration-schedule-dialog > header > div > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 8px; color: #9a5b16; background: #fff0dc; font-size: .72rem; }
.orchestration-schedule-dialog h2, .orchestration-schedule-dialog p { margin: 0; }.orchestration-schedule-dialog h2 { margin-bottom: 5px; color: #37424c; font-size: .69rem; }.orchestration-schedule-dialog header p { overflow: hidden; color: #89929b; font-size: .46rem; text-overflow: ellipsis; white-space: nowrap; }.orchestration-schedule-dialog header p strong { color: #58636d; font-weight: 600; }
.orchestration-schedule-dialog header > button { border: 0; color: #7e8790; background: transparent; font-size: .85rem; }
.orchestration-schedule-dialog form { display: grid; gap: 13px; padding: 17px; }.orchestration-schedule-dialog form > div { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; }.orchestration-schedule-dialog form label { color: #66717b; font-size: .47rem; font-weight: 600; }.orchestration-schedule-dialog form input:not([type="checkbox"]) { display: block; width: 100%; height: 35px; margin-top: 6px; border: 1px solid #d1d8de; border-radius: 7px; padding: 0 9px; color: #3f4953; background: #fff; outline: none; font-size: .53rem; }.orchestration-schedule-dialog form input:focus { border-color: #8db4dd; box-shadow: 0 0 0 2px rgba(40,118,210,.09); }.orchestration-schedule-dialog form label small { display: block; margin-top: 5px; color: #929aa2; font-size: .4rem; font-weight: 400; }
.orchestration-schedule-dialog .orchestration-enabled-field { display: flex; align-items: center; gap: 7px; color: #4e6e5b; }
.orchestration-schedule-dialog form > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #e5e8eb; margin: 2px -17px -17px; padding: 13px 17px; color: #858e97; background: #fafbfc; font-size: .42rem; }.orchestration-schedule-dialog form > footer button { min-height: 31px; border: 1px solid #1767bd; border-radius: 6px; padding: 0 12px; color: #fff; background: #2876d2; font-size: .48rem; font-weight: 600; }
.orchestration-pipeline-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(680px, calc(100dvh - 36px)); overflow: hidden; border: 1px solid #d7dde2; border-radius: 11px; padding: 0; color: #3b4650; background: #fff; box-shadow: 0 22px 60px rgba(35,43,52,.24); }.orchestration-pipeline-dialog[open] { display: grid; grid-template-rows: 70px minmax(0,1fr) 52px; }.orchestration-pipeline-dialog::backdrop { background: rgba(33,39,45,.42); backdrop-filter: blur(2px); }
.orchestration-pipeline-dialog > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e2e6e9; padding: 0 16px; background: #fafbfc; }.orchestration-pipeline-dialog > header > div { display: flex; min-width: 0; align-items: center; gap: 11px; }.orchestration-pipeline-dialog > header > div > span { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 8px; color: #2869aa; background: #e7f1fb; font-size: .72rem; }.orchestration-pipeline-dialog h2, .orchestration-pipeline-dialog p { margin: 0; }.orchestration-pipeline-dialog h2 { margin-bottom: 5px; color: #37424c; font-size: .69rem; }.orchestration-pipeline-dialog header p { color: #89929b; font-size: .46rem; }.orchestration-pipeline-dialog header > button { border: 0; color: #7e8790; background: transparent; font-size: .85rem; }
.orchestration-pipeline-table { min-height: 0; overflow: auto; }.orchestration-pipeline-table-head, .orchestration-pipeline-option { display: grid; min-width: 650px; grid-template-columns: minmax(240px,1fr) 75px 75px 125px 64px; align-items: center; gap: 12px; padding: 0 17px; }.orchestration-pipeline-table-head { min-height: 36px; color: #8c939b; background: #fafbfc; font-size: .47rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.orchestration-pipeline-option { min-height: 52px; border-top: 1px solid #e8eaed; color: #69727b; font-size: .54rem; }.orchestration-pipeline-option:hover { background: #f7fafe; }.orchestration-pipeline-option > span:first-child { min-width: 0; }.orchestration-pipeline-option strong, .orchestration-pipeline-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.orchestration-pipeline-option strong { margin-bottom: 4px; color: #343e48; font-size: .62rem; font-weight: 500; }.orchestration-pipeline-option small { color: #87919a; font-size: .43rem; }.orchestration-pipeline-option > button { min-width: 54px; min-height: 29px; border: 1px solid #bcd1e6; border-radius: 6px; padding: 0 9px; color: #2869aa; background: #f3f8fd; font-size: .47rem; font-weight: 600; }.orchestration-pipeline-option > button:hover { background: #e5f0fa; }.orchestration-pipeline-option > button:disabled { border-color: rgba(39,122,80,.24); color: #347657; background: rgba(39,122,80,.12); cursor: default; }
.orchestration-pipeline-dialog-empty { display: grid; min-height: 220px; place-content: center; gap: 7px; padding: 24px; color: #8b929a; text-align: center; }.orchestration-pipeline-dialog-empty strong { color: #525b64; font-size: .66rem; }.orchestration-pipeline-dialog-empty span { font-size: .5rem; }.orchestration-pipeline-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #e5e8eb; padding: 0 17px; color: #858e97; background: #fafbfc; font-size: .44rem; }.orchestration-pipeline-dialog > footer button { min-height: 31px; border: 1px solid #1767bd; border-radius: 6px; padding: 0 12px; color: #fff; background: #2876d2; font-size: .48rem; font-weight: 600; }
.orchestration-connection-help { position: absolute; z-index: 10; top: 72px; left: 50%; width: fit-content; max-width: 340px; transform: translateX(-50%); border: 1px solid #b9d4f0; border-radius: 999px; padding: 7px 11px; color: #245f99; background: rgba(239,247,255,.96); box-shadow: 0 4px 12px rgba(38,79,119,.1); font-size: .47rem; font-weight: 600; pointer-events: none; }
.orchestration-canvas-edges { position: absolute; z-index: 1; top: 0; left: 0; overflow: visible; pointer-events: none; }
.orchestration-canvas-edges path { fill: none; stroke: #8ba5bc; stroke-width: 2; stroke-linecap: round; }
.orchestration-canvas-edges .orchestration-arrow-head { fill: #8ba5bc; stroke: none; }
.orchestration-canvas-edges .orchestration-connection-preview { stroke: #2876d2; stroke-dasharray: 6 5; }
.orchestration-canvas-nodes { position: absolute; z-index: 2; inset: 0; }
.orchestration-pipeline-node { position: absolute; width: 226px; height: 106px; border: 1px solid #bfcbd6; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(37,47,58,.09); transition: border-color .15s, box-shadow .15s, opacity .15s; }
.orchestration-pipeline-node:hover { border-color: #6f9dca; box-shadow: 0 7px 18px rgba(37,47,58,.13); }
.orchestration-pipeline-node.is-start { border-color: #d39a5d; box-shadow: 0 0 0 2px rgba(201,120,36,.1), 0 5px 15px rgba(37,47,58,.1); }
.orchestration-pipeline-node.is-dragging { z-index: 8; opacity: .45; cursor: grabbing; }
.orchestration-pipeline-node > header { display: grid; height: 70px; grid-template-columns: minmax(0,1fr) 22px; align-items: center; gap: 8px; border-bottom: 1px solid #e7eaed; padding: 0 9px 0 13px; cursor: grab; touch-action: none; user-select: none; }
.orchestration-pipeline-node.is-dragging > header { cursor: grabbing; }
.orchestration-pipeline-node header strong, .orchestration-pipeline-node header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orchestration-pipeline-node header strong { margin-bottom: 5px; color: #303a44; font: 680 .62rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.orchestration-pipeline-node header small { color: #858f98; font-size: .44rem; }
.orchestration-pipeline-node header button { display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 5px; color: #9a6b65; background: transparent; font-size: .7rem; }
.orchestration-pipeline-node header button:hover { color: #a34840; background: #faecea; }
.orchestration-pipeline-node > footer { display: flex; height: 35px; align-items: center; justify-content: space-between; padding: 0 9px; color: #78838c; font-size: .43rem; }
.orchestration-pipeline-node > footer > span { display: flex; align-items: center; }
.orchestration-pipeline-node > footer > span > i { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #3da06a; }
.orchestration-pipeline-node > footer b { color: #95a0a9; font-size: .4rem; font-weight: 600; }
.orchestration-pipeline-node > footer > button { border: 0; border-radius: 5px; padding: 4px 6px; color: #955b20; background: rgba(209,134,56,.12); font-size: .4rem; font-weight: 600; }.orchestration-pipeline-node > footer > button:hover { background: rgba(209,134,56,.22); }
.orchestration-node-port { position: absolute; z-index: 3; top: calc(50% - 6px); width: 12px; height: 12px; touch-action: none; user-select: none; border: 2px solid #fff; border-radius: 50%; padding: 0; background: #6f96ba; box-shadow: 0 0 0 1px #6f96ba; cursor: crosshair; }.orchestration-node-port:hover, .orchestration-node-port:focus-visible { background: #2876d2; box-shadow: 0 0 0 3px rgba(40,118,210,.2); outline: none; }.orchestration-node-port.is-connecting { background: #2876d2; box-shadow: 0 0 0 4px rgba(40,118,210,.2); }.orchestration-node-port.is-connect-target { background: #35a768; box-shadow: 0 0 0 3px rgba(53,167,104,.18); animation: port-pulse 1.2s ease-in-out infinite; }.orchestration-node-port.is-connected { background: #3da06a; box-shadow: 0 0 0 1px #3da06a; }
.orchestration-node-port.input { left: -7px; }
.orchestration-node-port.output { right: -7px; }
.orchestration-pipeline-node.is-start .orchestration-node-port.input:not(:hover):not(:focus-visible):not(.is-connect-target) { background: #d18638; box-shadow: 0 0 0 1px #d18638; }
.orchestration-pipeline-node.is-unconnected:not(.is-start) > footer > span > i { background: #a4acb3; }
.orchestration-canvas-empty { position: absolute; z-index: 2; top: 150px; left: 80px; display: grid; width: 300px; min-height: 150px; place-content: center; justify-items: center; border: 1px dashed #c9d3dc; border-radius: 10px; color: #84909a; background: rgba(255,255,255,.7); text-align: center; }
.orchestration-canvas-empty[hidden] { display: none; }
.orchestration-canvas-empty > span { display: grid; width: 36px; height: 36px; margin-bottom: 11px; place-items: center; border-radius: 8px; color: #2869aa; background: #e8f2fb; font-size: .85rem; }
.orchestration-canvas-empty strong { margin-bottom: 6px; color: #4c5862; font-size: .61rem; }
.orchestration-canvas-empty p { margin: 0; font-size: .47rem; }
.orchestration-chat-dock { position: relative; z-index: 8; display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0,1fr) auto; border-left: 1px solid #e5e8ec; background: #f7f8fa; }

@media (max-width: 840px) {
  .orchestration-builder-view { overflow: auto; grid-template-rows: auto auto auto; }
  .orchestration-builder-topbar { min-height: 112px; align-items: flex-start; flex-direction: column; padding-block: 13px; }
  .orchestration-builder-actions { width: 100%; flex-wrap: wrap; }
  .orchestration-builder-shell { min-height: 1100px; grid-template-columns: 1fr; grid-template-rows: 700px 400px; }
  .orchestration-schedule-dialog form > div { grid-template-columns: 1fr; }
  .orchestration-chat-dock { border-top: 1px solid #dfe3e7; border-left: 0; }
}
.pipeline-chat-resizer:hover, .pipeline-chat-resizer:focus-visible { color: #5f795f; outline: none; }
.pipeline-chat-resizer:hover span, .pipeline-chat-resizer:focus-visible span, .pipeline-main.is-chat-resizing .pipeline-chat-resizer span { height: 50px; border-color: #8fa68f; background: #e5eee5; }
.pipeline-chat-resizer:active, .pipeline-main.is-chat-resizing .pipeline-chat-resizer { color: #456745; }
.user-chat-messages { display: flex; min-width: 0; min-height: 0; flex-direction: column; align-items: stretch; gap: 16px; overflow-x: hidden; overflow-y: auto; padding: 20px 16px 16px; scrollbar-color: #d6dce2 transparent; scrollbar-width: thin; }
.pipeline-chat-welcome { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 10px; }
.pipeline-chat-welcome > p { max-width: none; margin: 0; padding: 2px 2px 5px; color: #59636d; background: transparent; font-size: .78rem; line-height: 1.58; }.pipeline-chat-welcome > p strong { color: #303a44; }
.user-suggestions { display: grid; gap: 6px; }
.user-suggestions button { min-height: 39px; border: 1px solid rgba(220,225,230,.9); border-radius: 9px; padding: 0 12px; color: #5f6973; background: rgba(255,255,255,.55); font-size: .7rem; text-align: left; white-space: nowrap; }
.user-suggestions button::after { float: right; color: #a1a9b2; content: "→"; }
.user-suggestions button:hover { border-color: #cbd1d7; color: #353e47; background: rgba(255,255,255,.94); }
.user-message { display: flex; width: 100%; flex: 0 0 auto; }
.user-message.is-user { justify-content: flex-end; }
.user-message .message-bubble { min-width: 0; max-width: 88%; }
.user-message:not(.is-user) .message-bubble { width: 100%; max-width: 100%; border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; }
.message-content { min-width: 0; padding: 1px 2px; color: #4f5963; background: transparent; font-size: .78rem; line-height: 1.58; overflow-wrap: anywhere; }
.message-content > :first-child { margin-top: 0; }.message-content > :last-child { margin-bottom: 0; }
.message-content p { margin: 0 0 11px; }
.message-content h2, .message-content h3 { margin: 16px 0 7px; color: #303942; line-height: 1.3; }.message-content h2 { font-size: .9rem; }.message-content h3 { font-size: .82rem; }
.message-content ul, .message-content ol { margin: 7px 0 12px; padding-left: 20px; }.message-content li + li { margin-top: 5px; }
.message-content strong { color: #303942; font-weight: 750; }
.message-content code { border-radius: 4px; padding: 2px 4px; color: #3f4851; background: #e9ecef; font: .72rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.message-content pre { max-width: 100%; margin: 10px 0 13px; overflow: auto; border: 1px solid #dde1e5; border-radius: 9px; padding: 12px 13px; color: #38434d; background: #eef0f2; }.message-content pre code { padding: 0; color: inherit; background: transparent; font-size: .7rem; line-height: 1.55; white-space: pre; }
.message-content blockquote { margin: 9px 0 12px; border-left: 2px solid #c6ccd2; padding: 2px 0 2px 11px; color: #69737d; }
.message-content a { color: #3f596f; text-decoration-color: #aab6c0; text-underline-offset: 2px; }
.user-message.is-user .message-content { border: 1px solid #bfd3c0; border-radius: 12px 4px 12px 12px; padding: 10px 12px; color: #344538; background: #e7f1e7; white-space: pre-wrap; }
.user-message.is-streaming:not(.has-build-progress) .message-content:empty::after { color: #7c858e; content: "Codex is thinking…"; animation: pulse 1.2s infinite; }
.pipeline-build-progress { margin-top: 13px; border-top: 1px solid #dde2e6; padding-top: 10px; background: transparent; }.pipeline-build-progress > strong { display: block; padding: 0 1px 7px; color: #3d4750; font-size: .66rem; }.pipeline-build-progress-list { display: grid; padding: 0; }
.pipeline-tool-activity { display: flex; min-height: 31px; align-items: center; gap: 9px; color: #626d77; font-size: .65rem; }.pipeline-tool-activity + .pipeline-tool-activity { border-top: 1px solid #edf0f2; }.pipeline-tool-activity i { width: 13px; height: 13px; flex: 0 0 13px; border: 1.5px solid #b5bdc5; border-top-color: #59636d; border-radius: 50%; animation: spin .65s linear infinite; }.pipeline-tool-activity.is-complete i { display: grid; place-items: center; border: 0; color: #2c7b53; animation: none; }.pipeline-tool-activity.is-complete i::after { content: "✓"; font-size: .72rem; font-weight: 850; }.pipeline-tool-activity.is-error { color: #a54b43; }.pipeline-tool-activity.is-error i { display: grid; place-items: center; border: 0; color: #ae4d45; animation: none; }.pipeline-tool-activity.is-error i::after { content: "×"; font-size: .8rem; font-weight: 800; }
.source-confirmation-card { margin-top: 10px; overflow: hidden; border: 1px solid #cfd8e1; border-radius: 10px; background: #fff; }.source-confirmation-heading { padding: 11px 12px 9px; }.source-confirmation-heading strong, .source-confirmation-heading span { display: block; }.source-confirmation-heading strong { margin-bottom: 4px; color: #35424d; font-size: .68rem; }.source-confirmation-heading span { color: #7d8790; font-size: .59rem; line-height: 1.45; }.source-confirmation-urls { display: grid; gap: 1px; border-block: 1px solid #e5e9ec; background: #f7f9fa; }.source-confirmation-urls > div { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; }.source-confirmation-urls > div + div { border-top: 1px solid #e6eaed; }.source-confirmation-urls i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 6px; color: #276eaf; background: #e6f0fa; font-size: .7rem; font-style: normal; }.source-confirmation-urls span { min-width: 0; }.source-confirmation-urls strong, .source-confirmation-urls code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.source-confirmation-urls strong { margin-bottom: 3px; color: #404b55; font-size: .61rem; }.source-confirmation-urls code { padding: 0; color: #6e7b86; background: transparent; font-size: .56rem; }.source-confirmation-open { min-height: 29px; border: 1px solid #cbd5de; border-radius: 7px; padding: 7px 9px 0; color: #355f83; background: #fff; font-size: .57rem; font-weight: 730; text-decoration: none; white-space: nowrap; }.source-confirmation-open:hover { border-color: #94abc0; background: #f8fbfd; }.source-confirmation-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 9px 10px; }.source-confirmation-actions button { min-height: 31px; border: 1px solid #d3d9de; border-radius: 7px; padding: 0 10px; color: #5d6770; background: #fff; font-size: .6rem; font-weight: 720; }.source-confirmation-actions button:last-child { border-color: #4b6d8c; color: #fff; background: #526f89; }.source-confirmation-actions button:hover:not(:disabled) { border-color: #aebbc6; }.source-confirmation-actions button:last-child:hover:not(:disabled) { background: #425f79; }.source-confirmation-actions button:disabled { cursor: wait; opacity: .55; }
.pipeline-building-indicator { display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 16px 7px; border: 1px solid rgba(63,111,153,.26); border-radius: 999px; padding: 4px 11px 4px 9px; color: #3f6f99; background: rgba(63,111,153,.11); font-size: .62rem; font-weight: 700; animation: building-throb 2.6s ease-in-out infinite; }
.pipeline-building-indicator[hidden] { display: none; }
.pipeline-building-indicator i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
@keyframes building-throb { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pipeline-building-indicator { animation: none; opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .hero-prompt-cursor, .hero-prompt-loader { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .mock-time-tag.is-running, .mock-run-log-heading i, .mock-edges path, .mock-node, .mock-run-log, .mock-run-log code { animation: none; }
  .mock-run-log { opacity: 1; transform: none; }
  .mock-run-log code { clip-path: inset(0); }
}

.user-chat-composer { display: grid; min-height: 92px; grid-template-rows: minmax(42px, auto) auto; align-items: stretch; margin: 0 16px 16px; border: 1px solid #dfe3e6; border-radius: 13px; background: #f3f4f5; box-shadow: 0 5px 18px rgba(31,45,61,.055); }
.user-chat-composer:focus-within { border-color: #b9c0c7; box-shadow: 0 0 0 3px rgba(74,84,94,.06), 0 7px 20px rgba(31,45,61,.065); }
.user-chat-composer textarea { display: block; width: 100%; min-width: 0; max-height: 120px; resize: none; border: 0; padding: 14px 14px 5px; color: #333a42; background: transparent; outline: none; font-size: .8rem; line-height: 1.5; }
.user-chat-composer textarea::placeholder { color: #9ca2a9; }
.user-composer-footer { display: flex; min-height: 42px; align-items: center; gap: 10px; padding: 0 8px; }
.model-picker-button { display: inline-flex; min-height: 31px; align-items: center; gap: 7px; margin-right: auto; border: 1px solid #d9dde1; border-radius: 8px; padding: 0 10px; color: #59626b; background: rgba(255,255,255,.66); font-size: .67rem; font-weight: 700; }
.model-picker-button:hover { border-color: #c3c9cf; color: #343c44; background: #fff; }.model-picker-button.is-disconnected::before { width: 6px; height: 6px; border-radius: 50%; background: #b37a34; content: ""; }.model-picker-button:disabled { cursor: wait; opacity: .6; }
.user-composer-footer button[type="submit"] { display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 9px; color: #fff; background: #59636d; box-shadow: 0 3px 8px rgba(48,57,66,.15); font-size: .88rem; }
.user-composer-footer button[type="submit"]:hover { transform: translateY(-1px); background: #454e57; box-shadow: 0 5px 11px rgba(48,57,66,.18); }

.settings-view { min-height: 0; grid-column: 1 / -1; grid-row: 3 / -1; overflow: auto; color: #30373f; background: #f5f6f8; }
.settings-page { width: min(860px, calc(100% - 42px)); margin: 0 auto; padding: 34px 0 45px; }
.settings-heading { margin-bottom: 22px; }
.settings-heading p { margin: 0 0 6px; color: #2771be; font-size: .51rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.settings-heading h2 { margin: 0 0 7px; font-size: 1.22rem; }
.settings-heading > span { color: #7e858e; font-size: .59rem; }
.account-settings-panel { overflow: hidden; border: 1px solid #dfe3e7; border-radius: 10px; background: #fff; }
.account-settings-panel > header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e9ec; padding: 0 18px; }.account-settings-panel h3, .account-settings-panel p { margin: 0; }.account-settings-panel h3 { margin-bottom: 5px; font-size: .72rem; }.account-settings-panel p { color: #858d96; font-size: .54rem; }.account-settings-panel > header > span { color: #47705c; font-size: .52rem; font-weight: 700; }
.account-settings-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 18px; }.account-settings-fields label { color: #555e67; font-size: .55rem; font-weight: 700; }.account-settings-fields input { display: block; width: 100%; height: 38px; margin-top: 7px; border: 1px solid #d5dae0; border-radius: 7px; padding: 0 10px; color: #343c45; background: #fff; outline: none; font-size: .61rem; font-weight: 500; }.account-settings-fields input:focus { border-color: #9ca8b3; box-shadow: 0 0 0 3px rgba(70,82,94,.06); }
.account-settings-panel > footer { display: flex; min-height: 58px; align-items: center; justify-content: space-between; border-top: 1px solid #e6e9ec; padding: 0 18px; color: #858d96; background: #fafbfc; font-size: .52rem; }.account-settings-panel > footer strong { color: #4d5660; }.account-settings-panel > footer button { min-height: 33px; border: 1px solid #59636d; border-radius: 7px; padding: 0 12px; color: #fff; background: #59636d; font-size: .54rem; font-weight: 700; }
.desktop-download-settings-panel, .account-session-panel { margin-top: 14px; }
.settings-panel { overflow: hidden; border: 1px solid #dfe3e7; border-radius: 9px; background: #fff; }
.settings-panel > div { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 17px; }
.settings-panel > div + div { border-top: 1px solid #e7e9ec; }
.settings-panel strong, .settings-panel small { display: block; }
.settings-panel strong { margin-bottom: 5px; font-size: .64rem; }
.settings-panel small { color: #858d96; font-size: .52rem; }
.settings-panel button, .settings-panel .settings-download { display: inline-flex; min-width: 70px; min-height: 31px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d5dae0; border-radius: 6px; padding: 0 11px; color: #545c65; background: #fff; font-size: .55rem; font-weight: 700; text-decoration: none; }
.settings-panel .settings-download { flex: 0 0 auto; border-color: #59636d; color: #fff; background: #59636d; white-space: nowrap; }
.settings-panel .settings-download:hover { border-color: #454e57; background: #454e57; }
.settings-panel .settings-signout { border-color: #ecc9c4; color: #ad4337; background: #fff8f7; }

.pipeline-codex-dialog { width: min(520px, calc(100% - 28px)); border: 0; border-radius: 13px; padding: 0; color: #30373f; background: #fff; box-shadow: 0 28px 90px rgba(22,31,40,.28); }.pipeline-codex-dialog::backdrop { background: rgba(25,32,40,.46); backdrop-filter: blur(3px); }
.pipeline-codex-dialog > header { display: flex; min-height: 74px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e1e4e8; padding: 0 18px; }.pipeline-codex-dialog > header > div { display: flex; align-items: center; gap: 10px; }.pipeline-codex-dialog h2, .pipeline-codex-dialog header p { margin: 0; }.pipeline-codex-dialog h2 { margin-bottom: 4px; font-size: .78rem; }.pipeline-codex-dialog header p { color: #899099; font-size: .49rem; }.pipeline-codex-dialog header > button { width: 28px; height: 28px; border: 0; border-radius: 6px; color: #7f8790; background: transparent; font-size: .9rem; }
.pipeline-model-panel { min-height: 190px; padding: 25px 22px 22px; }.pipeline-model-panel > label { display: block; margin-bottom: 8px; color: #59626b; font-size: .53rem; font-weight: 750; }.pipeline-model-panel > select { width: 100%; height: 42px; border: 1px solid #d4d9de; border-radius: 9px; padding: 0 38px 0 12px; color: #353e47; background: #f8f9fa; outline: none; font-size: .6rem; }.pipeline-model-panel > select:focus { border-color: #aeb6be; box-shadow: 0 0 0 3px rgba(64,74,84,.06); }.pipeline-model-panel > div { display: flex; min-height: 48px; align-items: center; justify-content: space-between; margin-top: 13px; border-top: 1px solid #e7eaed; color: #6f7972; font-size: .5rem; }.pipeline-model-panel > div i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }.pipeline-model-actions { display: flex; gap: 12px; }.pipeline-model-panel > div button { border: 0; padding: 5px 0; color: #59636d; background: transparent; font-size: .5rem; font-weight: 750; }.pipeline-model-panel > div button:hover { color: #272f37; }.pipeline-model-panel #disconnect-pipeline-codex { color: #a35a52; }
.pipeline-codex-content { min-height: 190px; display: grid; place-items: center; padding: 22px; text-align: center; }.pipeline-codex-content h3, .pipeline-codex-content p { margin: 0; }.pipeline-codex-content h3 { margin: 12px 0 7px; font-size: .76rem; }.pipeline-codex-content p { max-width: 390px; color: #7c858e; font-size: .53rem; line-height: 1.55; }.pipeline-codex-content code { display: block; margin: 14px 0 11px; border: 1px solid #cdddf0; border-radius: 7px; padding: 8px 12px; color: #1f62a7; background: #f1f7fd; font: 800 .9rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; user-select: all; }.pipeline-codex-content a, .pipeline-codex-content button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; border: 1px solid #1767bd; border-radius: 6px; padding: 0 11px; color: #fff; background: #2876d2; font-size: .53rem; font-weight: 720; text-decoration: none; }.pipeline-codex-spinner { width: 29px; height: 29px; border: 2px solid #d5e3f1; border-top-color: #2876d2; border-radius: 50%; animation: spin .8s linear infinite; }.pipeline-codex-success { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #277d52; background: #e4f4eb; font-size: .9rem; }.pipeline-codex-error { color: #a14943 !important; }.pipeline-codex-dialog > footer { border-top: 1px solid #e8eaed; padding: 11px 18px; color: #9299a0; background: #fafbfc; font-size: .47rem; }

.compute-heading > button { min-height: 36px; border: 1px solid #1767bd; border-radius: 7px; padding: 0 13px; color: #fff; background: #2876d2; font-size: .56rem; font-weight: 720; }
.compute-runtime-banner { display: grid; min-height: 84px; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; margin-top: 15px; border: 1px solid #c9d9e8; border-radius: 9px; padding: 0 16px; background: #f4f8fc; }.compute-runtime-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 9px; color: #2268af; background: #dcecfb; font-size: .78rem; font-weight: 800; }.compute-runtime-banner strong, .compute-runtime-banner p, .compute-runtime-banner small, .compute-runtime-banner > div:last-child span { display: block; margin: 0; }.compute-runtime-banner > div:nth-child(2) strong { margin-bottom: 5px; color: #354c63; font-size: .63rem; }.compute-runtime-banner p { max-width: 650px; color: #718191; font-size: .51rem; line-height: 1.5; }.compute-runtime-banner > div:last-child { min-width: 130px; border-left: 1px solid #d7e2ec; padding-left: 17px; text-align: right; }.compute-runtime-banner > div:last-child small { margin-bottom: 5px; color: #7c8b99; font-size: .46rem; }.compute-runtime-banner > div:last-child strong { margin-bottom: 4px; color: #35414d; font-size: .76rem; }.compute-runtime-banner > div:last-child span { color: #287a51; font-size: .44rem; font-weight: 680; }
.compute-summary { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 13px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.compute-summary article { min-height: 81px; padding: 14px 16px; }.compute-summary article + article { border-left: 1px solid #e5e8eb; }.compute-summary span, .compute-summary strong, .compute-summary small { display: block; }.compute-summary span { margin-bottom: 7px; color: #8a929a; font-size: .48rem; }.compute-summary strong { margin-bottom: 5px; color: #35404a; font-size: .77rem; }.compute-summary small { color: #969ca3; font-size: .46rem; }
.compute-blocks-panel, .compute-orchestration-panel { margin-top: 13px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.compute-blocks-panel > header, .compute-orchestration-panel > header { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; }.compute-blocks-panel h3, .compute-blocks-panel p, .compute-orchestration-panel h3, .compute-orchestration-panel p { margin: 0; }.compute-blocks-panel h3, .compute-orchestration-panel h3 { margin-bottom: 5px; font-size: .68rem; }.compute-blocks-panel p, .compute-orchestration-panel p { color: #899099; font-size: .5rem; }.compute-blocks-panel > header > span { color: #858d96; font-size: .49rem; }
.compute-block-list { display: grid; gap: 10px; border-top: 1px solid #e5e8eb; padding: 13px; background: #f7f8fa; }.compute-block-card { overflow: hidden; border: 1px solid #dce1e5; border-radius: 8px; background: #fff; }.compute-block-card > header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; padding: 0 14px; }.compute-block-card > header > div { display: flex; min-width: 0; align-items: center; gap: 10px; }.compute-block-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: #6651a4; background: #eeebfc; font-size: .55rem; font-weight: 800; }.compute-block-icon.is-external_sources { color: #1e63ac; background: #e2effc; font-size: .8rem; }.compute-block-icon.is-database_connector { color: #326486; background: #e2eef5; font-size: .74rem; }.compute-block-icon.is-custom_code { color: #82581c; background: #fff0d3; font-size: .44rem; }.compute-block-card header strong, .compute-block-card header small { display: block; }.compute-block-card header strong { margin-bottom: 5px; color: #38424c; font-size: .61rem; }.compute-block-card header small { color: #8b929a; font-size: .48rem; }
.compute-needs-key, .compute-assigned { width: fit-content; border-radius: 999px; padding: 5px 8px; font-size: .46rem; font-weight: 720; }.compute-needs-key { color: #a14c43; background: #fbeae8; }.compute-assigned { color: #287a51; background: #e5f4eb; }
.compute-block-usage { display: grid; grid-template-columns: minmax(150px,.55fr) minmax(180px,1fr); align-items: center; gap: 18px; border-top: 1px solid #e8eaed; border-bottom: 1px solid #e8eaed; padding: 11px 14px; background: #fafbfc; }.compute-block-usage span, .compute-block-usage strong { display: block; }.compute-block-usage > div > span { margin-bottom: 5px; color: #899099; font-size: .46rem; }.compute-block-usage strong { color: #4b5660; font-size: .52rem; }.compute-usage-track { height: 6px; overflow: hidden; border-radius: 999px; background: #e4e7ea; }.compute-usage-track i { display: block; height: 100%; border-radius: inherit; background: #4a89ca; }
.compute-allocation-form { display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) auto auto; align-items: end; gap: 11px; padding: 13px 14px 14px; }.compute-allocation-form label, .compute-orchestration-panel form label { color: #606a74; font-size: .48rem; font-weight: 700; }.compute-allocation-form input, .compute-allocation-form select, .compute-orchestration-panel input, .compute-orchestration-panel select { display: block; width: 100%; height: 35px; margin-top: 7px; border: 1px solid #d4d9df; border-radius: 6px; padding: 0 9px; color: #404a54; background: #fff; outline: none; font-size: .53rem; }.compute-allocation-form button, .compute-orchestration-panel form > button { height: 35px; border: 1px solid #59636d; border-radius: 6px; padding: 0 11px; color: #fff; background: #59636d; font-size: .51rem; font-weight: 720; }.compute-allocation-form button:disabled, .compute-orchestration-panel form > button:disabled { cursor: wait; opacity: .65; }.compute-allocation-result { align-self: center; min-width: 38px; color: #287a51; font-size: .47rem; font-weight: 680; }
.compute-orchestration-panel > header { border-bottom: 1px solid #e5e8eb; }.compute-orchestration-panel > form { display: grid; grid-template-columns: 1.25fr 1fr .8fr auto; align-items: end; gap: 12px; padding: 16px; }.compute-orchestration-panel form label > span { display: block; margin-top: 5px; color: #969ca3; font-size: .43rem; font-weight: 500; }

.scheduling-view { min-height: 0; grid-column: 1 / -1; grid-row: 3 / -1; overflow: auto; color: #30373f; background: #f5f6f8; }
.scheduling-page { width: min(1050px, calc(100% - 42px)); margin: 0 auto; padding: 25px 0 45px; }
.scheduling-heading { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dfe3e7; }.scheduling-heading p, .scheduling-heading h2, .scheduling-heading > div > span { display: block; margin: 0; }.scheduling-heading p { margin-bottom: 5px; color: #2771be; font-size: .5rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }.scheduling-heading h2 { margin-bottom: 5px; font-size: .94rem; }.scheduling-heading > div > span { color: #7f8790; font-size: .55rem; }.scheduler-online { flex: 0 0 auto; border-radius: 999px; padding: 7px 10px; color: #287a51; background: #e5f4eb; font-size: .49rem; font-weight: 720; }.scheduler-online i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #35a768; }
.scheduling-summary { display: grid; grid-template-columns: .7fr .7fr 1.6fr; margin-top: 15px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.scheduling-summary article { min-width: 0; min-height: 81px; padding: 14px 16px; }.scheduling-summary article + article { border-left: 1px solid #e5e8eb; }.scheduling-summary span, .scheduling-summary strong, .scheduling-summary small { display: block; }.scheduling-summary span { margin-bottom: 7px; color: #8a929a; font-size: .48rem; }.scheduling-summary strong { overflow: hidden; margin-bottom: 5px; color: #35404a; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }.scheduling-summary small { overflow: hidden; color: #969ca3; font-size: .46rem; text-overflow: ellipsis; white-space: nowrap; }
.schedule-create-panel, .schedule-list-panel { margin-top: 13px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }.schedule-create-panel > header, .schedule-list-panel > header { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; }.schedule-create-panel h3, .schedule-create-panel p, .schedule-list-panel h3, .schedule-list-panel p { margin: 0; }.schedule-create-panel h3, .schedule-list-panel h3 { margin-bottom: 5px; font-size: .68rem; }.schedule-create-panel header p, .schedule-list-panel header p { color: #899099; font-size: .5rem; }.schedule-create-panel header code { border-radius: 6px; padding: 6px 8px; color: #5d6872; background: #eef0f2; font: .49rem ui-monospace, SFMono-Regular, Menlo, monospace; }.schedule-list-panel > header { border-bottom: 1px solid #e5e8eb; }.schedule-list-panel > header > span { color: #858d96; font-size: .49rem; }
.schedule-presets { display: flex; min-height: 44px; align-items: center; gap: 7px; border-top: 1px solid #e7eaed; border-bottom: 1px solid #e7eaed; padding: 0 16px; background: #fafbfc; }.schedule-presets span { margin-right: 3px; color: #899099; font-size: .47rem; font-weight: 700; }.schedule-presets button { min-height: 25px; border: 1px solid #d8dde2; border-radius: 999px; padding: 0 9px; color: #5e6872; background: #fff; font-size: .46rem; font-weight: 680; }.schedule-presets button:hover { border-color: #9eb8d2; color: #286bad; background: #f5f9fd; }
#schedule-form { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr .8fr auto; align-items: end; gap: 12px; padding: 16px; }#schedule-form > label:not(.schedule-enabled-field) { color: #606a74; font-size: .48rem; font-weight: 700; }#schedule-form input[type="text"], #schedule-form input:not([type]) { display: block; width: 100%; height: 35px; margin-top: 7px; border: 1px solid #d4d9df; border-radius: 6px; padding: 0 9px; color: #404a54; background: #fff; outline: none; font-size: .53rem; }#schedule-form input:focus { border-color: #91acd0; box-shadow: 0 0 0 3px rgba(40,118,210,.08); }.schedule-enabled-field { display: flex; min-height: 35px; align-items: center; gap: 8px; border: 1px solid #d9dde2; border-radius: 6px; padding: 0 10px; cursor: pointer; }.schedule-enabled-field input { width: 14px; height: 14px; margin: 0; accent-color: #2876d2; }.schedule-enabled-field strong, .schedule-enabled-field small { display: block; }.schedule-enabled-field strong { color: #58626c; font-size: .49rem; }.schedule-enabled-field small { margin-top: 2px; color: #969ca3; font-size: .4rem; white-space: nowrap; }#schedule-form > button { height: 35px; border: 1px solid #1767bd; border-radius: 6px; padding: 0 12px; color: #fff; background: #2876d2; font-size: .51rem; font-weight: 720; }#schedule-form > button:disabled { cursor: wait; opacity: .65; }.schedule-form-status { min-height: 25px; margin: 0; padding: 0 16px 10px; color: #6d7680; font-size: .48rem; }.schedule-form-status.is-success { color: #287a51; }.schedule-form-status.is-error { color: #a34d45; }
.schedule-list { display: grid; }.schedule-card { display: grid; min-height: 78px; grid-template-columns: minmax(190px, 1.15fr) minmax(130px, .75fr) minmax(220px, 1.35fr) auto; align-items: center; gap: 16px; padding: 0 16px; }.schedule-card + .schedule-card { border-top: 1px solid #e7eaed; }.schedule-identity { display: flex; min-width: 0; align-items: center; gap: 10px; }.schedule-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: #276db5; background: #e4f0fb; font-size: .8rem; }.schedule-identity strong, .schedule-identity small, .schedule-expression span, .schedule-timing span, .schedule-timing strong, .schedule-timing small { display: block; }.schedule-identity strong { overflow: hidden; margin-bottom: 5px; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }.schedule-identity small, .schedule-expression span, .schedule-timing span, .schedule-timing small { color: #8b929a; font-size: .46rem; }.schedule-expression span, .schedule-timing span { margin-bottom: 5px; }.schedule-expression code { color: #53606d; font: .54rem ui-monospace, SFMono-Regular, Menlo, monospace; }.schedule-timing { min-width: 0; }.schedule-timing strong { overflow: hidden; margin-bottom: 4px; color: #505b66; font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }.schedule-actions { display: flex; align-items: center; gap: 7px; }.schedule-actions button { min-height: 29px; border-radius: 6px; padding: 0 9px; font-size: .46rem; font-weight: 720; }.schedule-toggle { border: 1px solid #d5d9de; color: #727a82; background: #f5f6f7; }.schedule-toggle.is-enabled { border-color: #b8dec8; color: #287a51; background: #e9f6ee; }.schedule-delete { border: 1px solid transparent; color: #9b625c; background: transparent; }.schedule-delete:hover { border-color: #ecc9c4; background: #fff8f7; }.schedule-empty { padding: 32px 20px 36px; text-align: center; }.schedule-empty > span { display: grid; width: 38px; height: 38px; margin: 0 auto 10px; place-items: center; border-radius: 50%; color: #71859a; background: #edf2f7; font-size: .9rem; }.schedule-empty strong { display: block; margin-bottom: 6px; font-size: .63rem; }.schedule-empty p { color: #8b929a; font-size: .49rem; }

@media (max-width: 840px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .header-actions { display: none; }
  .mobile-nav { display: block; }
  .hero-section { padding-top: 84px; }
  /* Stacked, the headline no longer has a full column to run across, so it wraps instead of
     shrinking to fit one line — nowrap plus a viewport-scaled size drove it down to body copy. */
  .hero-copy h1 { font-size: clamp(1.6rem, 4.6vw, 2.2rem); white-space: normal; }
  .app-preview-body { min-height: 400px; grid-template-columns: minmax(0, 1fr); }
  .app-preview-chat { display: none; }
  .flow-strip > div { padding: 24px; }
  .flow-strip .flow-icon { width: 46px; height: 46px; border-radius: 10px; }
  .flow-strip .flow-icon svg { width: 26px; height: 26px; }
  .own-code-section { grid-template-columns: 1fr; }
  .own-code-section > *, .library-section > * { aspect-ratio: auto; }
  .own-code-copy { padding: 62px clamp(20px, 3.4vw, 38px); }
  /* Stacked, the copy leads and the mock follows in both halves — so the code viewer swaps
     to the library window's borders: a top rule against the copy, none at the bottom
     where the section's own rule closes it. */
  .principles-grid .own-code-copy { order: 1; }
  .principles-grid .own-code-window { order: 2; }
  .own-code-window { border: 1px solid #3c3c3c; border-bottom: 0; }
  .own-code-body { min-height: 320px; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
  .library-section { grid-template-columns: 1fr; }
  .library-copy { padding: 62px clamp(20px, 3.4vw, 38px); }
  .library-window { border: 1px solid #3c3c3c; border-bottom: 0; }
  .library-head, .library-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 104px 82px 76px 12px; }
  /* Stacked, the copy leads and the mock follows, as in every other half-and-half section. */
  .agnostic-section { grid-template-columns: 1fr; }
  .agnostic-section > * { aspect-ratio: auto; }
  .principles-grid .agnostic-copy { order: 1; border-left: 0; padding: 62px clamp(20px, 3.4vw, 38px); }
  .principles-grid .agnostic-window { order: 2; min-height: 560px; border: 1px solid #3c3c3c; border-bottom: 0; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid article:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .feature-grid article:nth-child(odd) { border-left: 0; }
  .feature-grid article:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plan-grid { grid-template-columns: 1fr; }
  .plan + .plan { border-top: 1px solid var(--line); border-left: 0; }
  .meter-grid { grid-template-columns: 1fr; }
  .meter + .meter { border-top: 1px solid var(--line); border-left: 0; }
  .split-section { grid-template-columns: 1fr; }
  .split-copy { padding-inline: clamp(20px, 3.4vw, 58px); }
  .split-window { border-top: 1px solid var(--line); border-left: 0; }
  /* Stacked, the copy always leads and the mock follows, whichever side it takes when wide. */
  .split-section.is-reversed .split-copy { order: 1; border-left: 0; }
  .split-section.is-reversed .split-window { order: 2; }
  .statement-table { grid-template-columns: 1fr; }
  .statement-table > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .docs-shell { grid-template-columns: minmax(0, 1fr); }
  .docs-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .docs-rail nav { position: static; display: flex; overflow-x: auto; padding: 16px clamp(20px, 3.4vw, 58px); gap: 7px; scrollbar-width: none; }
  .docs-rail nav::-webkit-scrollbar { display: none; }
  .docs-rail-title { display: none; }
  .docs-rail a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; border: 1px solid var(--line); border-left-width: 1px; border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
  .docs-rail a:hover { border-color: var(--accent-line); }
  .docs-rail a.is-active { border-color: var(--accent-line); }
  .user-app { grid-template-columns: 60px minmax(0,1fr); }
  .pipeline-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 68px 43px minmax(240px, 1fr) minmax(320px, 42vh); }
  .pipeline-version-menu-button small { max-width: 110px; overflow: hidden; border-left: 0; padding-left: 0; text-overflow: ellipsis; white-space: nowrap; }
  .pipeline-workspace { grid-column: 1; grid-row: 3; }
  .pipeline-chat-dock { grid-column: 1; grid-row: 4; grid-template-rows: minmax(0, 1fr) auto; border-top: 1px solid var(--pipeline-border); border-left: 0; }
  .pipeline-chat-resizer { display: none; }
  .user-chat-messages { flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; padding: 16px 18px 12px; }
  .pipeline-chat-welcome { flex-direction: column; align-items: stretch; }
  .pipeline-chat-welcome > p { max-width: none; }
  .user-suggestions { display: grid; }
  .user-message { width: 100%; max-width: none; }
  .user-message .message-bubble { min-width: 0; max-width: 92%; }
  .user-chat-composer { display: grid; min-height: 82px; margin: 0 17px 12px; }
  .user-chat-composer textarea { width: 100%; max-height: 80px; padding: 13px 12px 4px; }
  .user-composer-footer { min-height: 40px; justify-content: flex-start; }
  .user-suggestions button:last-child { display: none; }
  .pipeline-code-files-view { grid-column: 1; grid-row: 3; }
  #run-history-detail-view { width: calc(100% - 24px); }
  .run-history-view, .compute-view, .scheduling-view, .key-vault-view, .settings-view { grid-column: 1; grid-row: 3 / -1; }
  .recipe-template-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 1fr) minmax(260px, 38vh); overflow: auto; }
  .recipe-chat-dock { border-top: 1px solid var(--pipeline-border); border-left: 0; }
  .connections-view { min-width: 0; }
}

@media (max-width: 620px) {
  .recipe-detail-topbar { padding-inline: 12px; }
  .recipe-detail-actions > span, .recipe-version, .recipe-detail-tabs > span { display: none; }
  .recipe-detail-topbar .pipeline-title-row h1 { max-width: 48vw; }
  .save-pipeline-version-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 13px; }
  .save-pipeline-version-dialog > form { min-height: 480px; padding: 58px 22px 30px; }
  .save-version-content h2 { font-size: 1.35rem; }
  .site-header { min-height: 56px; padding-inline: 16px; }
  .header-actions { gap: 4px; }.header-actions .button { padding-inline: 10px; }
  .hero-section { width: 100%; padding: 64px 0 0; }
  .hero-copy { margin-bottom: 34px; }
  .hero-copy h1 { margin-bottom: 16px; font-size: clamp(1.5rem, 6.8vw, 1.85rem); }
  .hero-lead { margin-bottom: 24px; font-size: .82rem; line-height: 1.62; }
  /* One 20px gutter for every stacked band — copy halves, feature cells, and the index marks
     all start on the same line inside the rails. */
  .hero-band { height: 64px; }
  .hero-section-marker-inner { gap: 14px; padding-inline: 20px; }
  .own-code-copy, .library-copy, .agnostic-copy { padding: 46px 20px; }
  .own-code-copy h2, .library-copy h2, .agnostic-copy h2 { font-size: 1.42rem; }
  .own-code-copy > p:not(.section-kicker), .library-copy > p:not(.section-kicker), .agnostic-copy > p:not(.section-kicker) { font-size: .76rem; }
  .hero-prompt { width: min(740px, calc(100% - 40px)); min-height: 160px; margin-bottom: 52px; }
  .hero-prompt-input { padding: 16px 15px 12px; }
  .hero-prompt-status { width: 232px; }
  .hero-prompt-connections { transform: scale(.67); transform-origin: left center; }
  .hero-prompt-connections-policy { transform: scale(.57); }
  .hero-openai-logo { width: 28px; padding: 0; justify-content: center; }
  .hero-openai-logo strong { display: none; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .button { width: 100%; }
  .own-code-tree { display: none; }
  .own-code-body { grid-template-columns: minmax(0, 1fr); }
  .own-code-actions em:not(.is-primary) { display: none; }
  .library-head span:nth-child(2), .library-row > span:nth-child(2), .library-head span:nth-child(3), .library-row > span:nth-child(3) { display: none; }
  .library-head, .library-row { grid-template-columns: minmax(0, 1fr) 76px 70px 12px; }
  .agnostic-head span:nth-child(3), .agnostic-row > span:nth-child(3) { display: none; }
  .agnostic-head, .agnostic-row { gap: 0; grid-template-columns: minmax(0, 1fr) 66px 32px; padding: 0; }
  .agnostic-head > span, .agnostic-row > span { padding-inline: 8px; }
  .agnostic-head > span:first-child, .agnostic-row > span:first-child { padding-left: 10px; }
  .agnostic-head > span:last-child, .agnostic-row > span:last-child { padding-right: 10px; }
  /* No room for a legible builder screenshot on a phone: the [01/04] mark stays and the
     feature list below it carries the section on its own. */
  .app-preview-frame, .hero-band-before-preview { display: none; }
  .app-preview { min-height: 540px; grid-template-columns: 40px minmax(0, 1fr); }
  .app-preview-rail { padding-inline: 2px; }
  .app-preview-nav-icon { width: 34px; height: 34px; }
  .app-preview-main { grid-template-rows: 54px 35px minmax(0, 1fr); }
  .app-preview-bar { justify-content: center; padding-inline: 6px; }
  .app-preview-path { display: none; }
  .app-preview-actions { gap: 4px; }
  .mock-time-tag { min-height: 27px; padding-inline: 7px; font-size: .45rem; }
  .app-preview-tabs { padding-inline: 5px; }
  .app-preview-tabs b { padding-inline: 7px; font-size: .43rem; }
  .app-preview-tabs b:nth-child(n+3) { display: none; }
  .app-preview-tabs > em { display: none; }
  .app-preview-body { min-height: 450px; }
  .mock-edges { display: none; }
  .mock-node { width: min(155px, calc(100% - 38px)); min-width: 0; max-width: none; }
  .mock-node-source { top: 5%; left: 13px; }
  .mock-node-extract { top: 29%; right: 13px; left: auto; }
  .mock-node-enrich { top: 53%; left: 13px; }
  .mock-node-dataset { top: 77%; right: 13px; }
  .flow-strip { grid-template-columns: 1fr; }
  .flow-strip > div { aspect-ratio: auto; min-height: min(100vw, 420px); }
  .flow-strip > div + div { border-left: 0; }
  .flow-strip > div + div { border-top: 1px solid var(--line); }
  .features-section { width: calc(100vw - 32px); padding: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { border-left: 0 !important; }
  .feature-grid article + article { border-top: 1px solid var(--line); }
  .download-menu { display: flex; }
  .hero-actions .download-menu { width: 100%; }
  .download-menu [data-download-trigger] { width: 100%; }
  .download-panel { width: min(348px, calc(100vw - 32px)); }
  .page-hero, .page-cta, .docs-marker-band, .docs-shell { width: calc(100vw - 32px); }
  /* Interior pages (pricing, Open Source) are built from mock panels tuned for a half-column of
     a 1280px page. Stacked on a phone that column gets narrower, not wider, so the same type
     lands between 7 and 9px. Lift the whole family to a readable floor; the code sample keeps
     its horizontal scroll rather than reflowing Python. */
  :is(.page-hero, .split-copy, .statement-copy, .faq-section) .section-kicker { font-size: .6rem; }
  .plan-name { font-size: .62rem; }
  .plan-price small, .plan-note { font-size: .68rem; }
  .split-copy li::before { font-size: .62rem; }
  .split-copy li small { font-size: .72rem; }
  .split-bar strong, .split-foot { font-size: .66rem; }
  .tree-row { font-size: .72rem; }
  .tree-row em { font-size: .54rem; }
  .tree-note, .tree-note b { font-size: .66rem; }
  .code-panel-tabs b { font-size: .64rem; }
  .code-panel pre { padding-inline: 14px; font-size: .66rem; }
  .term-panel { padding-inline: 14px; font-size: .66rem; }
  .harness-spec { padding-inline: 14px; font-size: .64rem; }
  .harness-spec > div { grid-template-columns: 68px minmax(0, 1fr); }
  .statement-table b { font-size: .74rem; }
  .statement-table em { font-size: .66rem; }
  /* Three rows that keep nowrap content wider than a small phone: the index mark's label, the
     mock window's status pill, and the file tabs. Let each give way in its own way rather than
     pushing the page sideways. */
  .hero-section-marker-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .split-bar { min-height: 0; flex-wrap: wrap; padding-block: 9px; }
  .code-panel-tabs { overflow-x: auto; scrollbar-width: none; }
  .code-panel-tabs::-webkit-scrollbar { display: none; }
  .code-panel-tabs b { flex: 0 0 auto; }
  .plan-grid, .meter-grid, .split-section, .statement-section, .faq-section { width: calc(100vw - 32px); }
  .docs-marker-band { top: 55px; height: 48px; }
  .hero-section-marker-sticky { top: 55px; height: 64px; }
  .docs-block { grid-template-columns: minmax(0, 1fr); scroll-margin-top: 118px; }
  .docs-block > * { grid-column: 1; }
  .docs-block::before { margin-bottom: 9px; }
  .docs-terms > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .page-cta .button { width: 100%; }
  .faq-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .meter-rates li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 10px; padding: 24px 36px; }
  .account-dialog { padding: 27px 20px; }
  .user-app { display: block; height: 100vh; }
  .pipeline-sidebar { display: none; }
  .source-detail-view { left: 0; }
  .pipeline-main { height: 100vh; grid-template-rows: 65px 43px minmax(220px, 1fr) minmax(330px, 46vh); }
  .pipeline-topbar { padding-inline: 15px; }
  .pipeline-catalog-panel > header { align-items: flex-start; flex-direction: column; padding-block: 14px; }.pipeline-browser-header-actions { width: 100%; justify-content: flex-end; }
  .block-detail-header { padding-inline: 12px; }.block-detail-state { display: none; }.block-detail-content { width: calc(100% - 24px); padding-top: 12px; }.block-detail-overview { grid-template-columns: 1fr 1fr; }.block-detail-overview article:first-child { grid-column: 1 / -1; }.block-detail-overview article:nth-child(2) { border-top: 1px solid #e5e8eb; border-left: 0; }.block-detail-overview article:nth-child(3) { border-top: 1px solid #e5e8eb; }.block-detail-fields { grid-template-columns: 1fr; }.block-config-field { grid-column: auto; }
  .pipeline-breadcrumbs { display: none; }
  .pipeline-title-row h1 { max-width: 48vw; }
  .toolbar-button { display: none; }
  .add-block-top-button { display: grid; width: 33px; padding: 0; place-items: center; }
  .add-block-top-button .add-block-label { display: none; }
  .pipeline-tabs { padding-left: 7px; }
  .pipeline-tabs [role="tab"] { padding-inline: 8px; }
  .canvas-tools { display: none; }
  .block-picker-dialog { max-height: calc(100vh - 24px); overflow: auto; }
  .block-picker-grid { grid-template-columns: 1fr; padding: 12px; }
  .block-picker-grid > button { min-height: 98px; }
  .block-picker-grid > button:last-child:nth-child(odd) { grid-column: auto; }
  .block-picker-dialog > footer span { display: none; }
  .block-picker-dialog > footer { justify-content: flex-end; }
  .run-detail-heading { align-items: flex-start; padding-block: 12px; }
  .run-detail-heading > div:last-child .run-status { display: none; }
  .run-detail-summary { align-items: flex-start; grid-template-columns: 1fr; padding-block: 16px; }
  .run-detail-summary dl { width: 100%; flex-wrap: wrap; row-gap: 15px; }
  .run-detail-summary dl > div { min-width: 50%; }
  .run-detail-grid { grid-template-columns: 1fr; }
  .run-log-panel pre { min-height: 280px; }
  .compute-page { width: calc(100% - 24px); padding-top: 14px; }.compute-stats { grid-template-columns: 1fr 1fr; }.compute-stats article:nth-child(3) { border-top: 1px solid #e5e8eb; border-left: 0; }.compute-stats article:nth-child(4) { border-top: 1px solid #e5e8eb; }.compute-panel dl { grid-template-columns: 1fr 1fr; }.compute-panel dl > div:nth-child(3) { border-top: 1px solid #e5e8eb; border-left: 0; }.compute-panel dl > div:nth-child(4) { border-top: 1px solid #e5e8eb; }.compute-runtime-banner { grid-template-columns: auto minmax(0,1fr); padding-block: 13px; }.compute-runtime-banner > div:last-child { grid-column: 1 / -1; border-top: 1px solid #d7e2ec; border-left: 0; padding: 11px 0 0; text-align: left; }.compute-summary { grid-template-columns: 1fr 1fr; }.compute-summary article:last-child { grid-column: 1 / -1; border-top: 1px solid #e5e8eb; border-left: 0; }.compute-block-usage { grid-template-columns: 1fr; }.compute-allocation-form, .compute-orchestration-panel > form { grid-template-columns: 1fr; }.compute-allocation-result { min-height: 15px; }
  .scheduling-page { width: calc(100% - 24px); padding-top: 14px; }.scheduling-summary { grid-template-columns: 1fr 1fr; }.scheduling-summary article:last-child { grid-column: 1 / -1; border-top: 1px solid #e5e8eb; border-left: 0; }.schedule-create-panel header code { display: none; }.schedule-presets { overflow-x: auto; }.schedule-presets span, .schedule-presets button { flex: 0 0 auto; }#schedule-form { grid-template-columns: 1fr; }.schedule-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identity actions" "expression timing"; gap: 11px 16px; padding-block: 13px; }.schedule-identity { grid-area: identity; }.schedule-expression { grid-area: expression; }.schedule-timing { grid-area: timing; }.schedule-actions { grid-area: actions; }
  .folder-orchestration-dialog { width: calc(100% - 20px); }.folder-chain-preview { padding-inline: 13px; }#folder-schedule-list article { grid-template-columns: minmax(0,1fr) auto auto; padding: 9px 13px; }#folder-schedule-list article > span { display: none; }#folder-schedule-form > div { grid-template-columns: 1fr; }
  .key-vault-heading > div { min-width: 0; }
  .key-vault-heading > button { flex: 0 0 auto; padding-inline: 9px; }
  .vault-security-state { display: none; }
  .pipeline-chat-welcome { display: block; }
  .pipeline-chat-welcome > p { max-width: none; }
  .user-suggestions { margin-top: 7px; }
  .user-suggestions button { min-height: 26px; }
  .user-suggestions button:nth-child(n+2) { display: none; }
  .user-message { width: 100%; max-width: none; }
  .user-message .message-bubble { max-width: 94%; }
  .connections-view { min-width: 100%; }
  .connections-view-header { padding-inline: 12px; }
  .connections-stats { width: 100%; }
  .connections-actions .sync-connections { display: none; }
  .catalog-search input { width: 300px; }
  .source-catalog-note { display: none; }
  #source-catalog-rows { display: grid; gap: 8px; }
  .source-detail-header { padding-inline: 12px; }
  .source-detail-header .connections-actions { display: none; }
  .source-detail-tabs { justify-content: stretch; padding-inline: 6px; }
  .source-detail-tabs button { flex: 1; padding-inline: 4px; }
  .source-detail-content { width: calc(100% - 24px); padding-top: 14px; }
  .source-detail-stats { grid-template-columns: 1fr 1fr; }
  .source-detail-stats article:nth-child(3) { border-top: 1px solid #e5e8eb; border-left: 0; }.source-detail-stats article:nth-child(4) { border-top: 1px solid #e5e8eb; }
  .source-detail-grid { grid-template-columns: 1fr; }
  .source-workspace-tab { padding: 12px 12px 28px; }
  .tab-page-heading { min-height: 82px; }
  .tab-page-heading > div { min-width: 0; }
  .tab-page-heading > button { flex: 0 0 auto; padding-inline: 9px; }
  .version-list > button { grid-template-columns: auto minmax(0, 1fr) auto 14px; gap: 9px; padding-inline: 11px; }
  .version-list > button .version-summary { display: none; }
  .version-list > button > span:nth-child(4):empty { display: none; }
  .code-folder-view { min-height: 540px; overflow: auto; }
  .code-folder-shell { min-width: 700px; min-height: 475px; grid-template-columns: 220px minmax(0, 1fr); }
  .health-summary-strip { gap: 12px; overflow-x: auto; white-space: nowrap; }
  .health-summary-strip > span + span { padding-left: 12px; }
  .health-check-list > button { grid-template-columns: auto minmax(0, 1fr) 14px; gap: 9px; padding-inline: 11px; }
  .health-version, .health-duration { display: none; }
  .health-run-card { align-items: flex-start; flex-direction: column; padding: 16px; }
  .health-run-meta { width: 100%; }
  .health-run-meta > span { min-width: 0; flex: 1; }
  .validation-results > div { grid-template-columns: 1fr; }
  .source-title-line { flex-wrap: wrap; gap: 6px; }
  .maintained-access-card { align-items: flex-start; grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .maintained-counts { grid-column: 1 / -1; width: 100%; }
  .maintained-counts span { flex: 1; }
}

/* Block snapshot data viewer */
.block-detail-view.is-snapshots-tab { overflow: hidden; }
.block-snapshots-panel { box-sizing: border-box; height: calc(100% - 125px); min-height: 360px; padding: 12px 0; }
.block-snapshot-layout { height: 100%; min-height: 0; max-height: none; margin-top: 0; }
.block-snapshot-layout > aside { min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.block-snapshot-viewer { overflow: hidden; grid-template-rows: 58px minmax(0, 1fr); }
.block-snapshot-viewer > header { min-height: 58px; }
.block-snapshot-controls { display: flex; align-items: center; gap: 8px !important; }
.block-snapshot-controls > div { display: flex; gap: 2px; border: 1px solid #dde2e6; border-radius: 7px; padding: 2px; background: #f1f3f5; }
.block-snapshot-controls > div button { min-height: 25px; border-radius: 5px; padding-inline: 8px; }
.block-snapshot-controls > div button.is-active { color: #315d83; background: #fff; box-shadow: 0 1px 3px rgba(34,48,61,.09); }
.block-snapshot-json { width: 100%; height: 100%; min-width: 0; min-height: 0; box-sizing: border-box; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }
.block-snapshot-json[hidden], .block-snapshot-table-wrap[hidden] { display: none; }
.block-snapshot-table-wrap { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; background: #fff; }
.block-snapshot-table-wrap table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #44505a; font-size: .57rem; text-align: left; }
.block-snapshot-table-wrap thead { position: sticky; z-index: 2; top: 0; }
.block-snapshot-table-wrap th { color: #727d87; background: #f7f8fa; font-size: .48rem; font-weight: 760; letter-spacing: .035em; text-transform: uppercase; }
.block-snapshot-table-wrap th, .block-snapshot-table-wrap td { max-width: 390px; border-right: 1px solid #e7eaed; border-bottom: 1px solid #e7eaed; padding: 10px 12px; vertical-align: top; }
.block-snapshot-table-wrap tr > :first-child { position: sticky; z-index: 1; left: 0; width: 34px; min-width: 34px; color: #929aa2; background: #fafbfc; text-align: right; }
.block-snapshot-table-wrap thead tr > :first-child { z-index: 3; background: #f2f4f6; }
.block-snapshot-table-wrap td > span { display: block; font: .56rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.block-snapshot-table-empty { display: grid; min-height: 100%; place-items: center; padding: 30px; color: #8a939b; font-size: .56rem; }

@media (max-width: 720px) {
  .block-snapshots-panel { width: calc(100% - 24px); }
  .block-snapshot-layout { grid-template-columns: 1fr; grid-template-rows: 135px minmax(0, 1fr); }
  .block-snapshot-layout > aside { border-right: 0; border-bottom: 1px solid #e1e5e8; }
  .block-snapshot-viewer > header { align-items: flex-start; min-height: 78px; flex-direction: column; padding-block: 8px; }
  .block-snapshot-viewer { grid-template-rows: 78px minmax(0, 1fr); }
}

/* Run inspection */
.block-snapshot-layout { grid-template-columns: minmax(0, 1fr); }
.block-snapshot-layout > aside { display: none; }
.pipeline-main.is-run-inspection .pipeline-actions { visibility: hidden; }
.pipeline-main.is-run-inspection .pipeline-node { height: 59px; }
.pipeline-main.is-run-inspection .pipeline-node .node-port, .pipeline-main.is-run-inspection .pipeline-node .node-menu, .pipeline-main.is-run-inspection .pipeline-node .source-count, .pipeline-main.is-run-inspection .pipeline-node footer { display: none; }
.pipeline-main.is-run-inspection .pipeline-node > header { cursor: default; }
.pipeline-node.has-run-summary { border-radius: 7px 7px 0 0; }
.pipeline-main.is-run-inspection .pipeline-node.has-run-summary.run-state-succeeded:hover { border-color: #35a768; box-shadow: 0 0 0 1px #35a768, 0 7px 16px rgba(39,120,80,.14); }
.pipeline-main.is-run-inspection .pipeline-node.has-run-summary.run-state-succeeded:hover > .node-run-summary { border-color: #35a768; box-shadow: 1px 0 0 #35a768, -1px 0 0 #35a768, 0 1px 0 #35a768, 0 7px 16px rgba(39,120,80,.14); }
.pipeline-main.is-run-inspection .pipeline-node.has-run-summary.run-state-failed:hover { border-color: #cf5b53; box-shadow: 0 0 0 1px #cf5b53, 0 7px 16px rgba(160,72,67,.14); }
.pipeline-main.is-run-inspection .pipeline-node.has-run-summary.run-state-failed:hover > .node-run-summary { border-color: #cf5b53; box-shadow: 1px 0 0 #cf5b53, -1px 0 0 #cf5b53, 0 1px 0 #cf5b53, 0 7px 16px rgba(160,72,67,.14); }
.node-run-summary { position: absolute; z-index: 8; top: 100%; right: -1px; left: -1px; overflow: hidden; border: 1px solid #ccd2d9; border-top: 0; border-radius: 0 0 7px 7px; background: rgba(255,255,255,.98); box-shadow: 0 5px 9px rgba(35,48,60,.06); }
.node-run-summary > header { display: flex; height: 29px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6eaed; padding: 0 7px 0 8px; cursor: default !important; }
.node-run-summary > header span { display: flex; align-items: center; color: #64707a; font-size: .46rem; font-weight: 740; }
.node-run-summary > header i { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #aab2b9; }
.node-run-summary.is-succeeded > header span { color: #287950; }.node-run-summary.is-succeeded > header i { background: #35a768; }
.node-run-summary.is-failed > header span { color: #a24943; }.node-run-summary.is-failed > header i { background: #cf5b53; }
.node-run-summary.is-running { border-color: #c9dfd1; }
.node-run-summary.is-running > header { background: #f7fbf8; }
.node-run-summary.is-running > header span { color: #397655; }
.node-run-summary.is-running > header i { background: #3ca669; box-shadow: 0 0 0 0 rgba(60,166,105,.28); animation: run-status-pulse 2s ease-in-out infinite; }
.node-run-summary.is-running > code { color: #a96024; background: #fff7ed; }
.node-run-summary.is-queued > header span { color: #7d8790; }
.node-run-summary.is-queued > header i { background: #b7bec5; }
/* Succeeded, but a source collected nothing: amber rather than the clean green, so a half-empty
   run cannot be mistaken for a good one at a glance. */
.run-status.succeeded.has-source-failures { color: #8a6118; background: #fbf1de; }.run-status.succeeded.has-source-failures i { background: #c9922f; }
.run-status.queued, .run-status.not-started { color: #69737c; background: #edf0f2; }
.run-status.queued i, .run-status.not-started i { background: #aeb6bd; }
@keyframes run-status-pulse { 0%, 100% { opacity: .7; box-shadow: 0 0 0 0 rgba(60,166,105,0); } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(60,166,105,.12); } }
.node-run-summary > header button { min-height: 23px; border: 0; border-radius: 5px; padding: 0 5px; color: #2e6698; background: transparent; font-size: .45rem; font-weight: 740; }
.node-run-summary > header button:hover { background: #edf3f8; }
.node-run-output { min-height: 25px; border-radius: 6px; padding: 0 9px; color: #fff; font-size: .46rem; font-weight: 760; }
.node-run-output.is-succeeded { border: 1px solid #bfd3c0; color: #344538; background: #e7f1e7; opacity: 1; }
.node-run-output.is-succeeded:hover { border-color: #aac5ac; color: #293b2e; background: #dcebdc; }
.node-run-output.is-failed { border: 1px solid #963d38; background: #c95650; }
.node-run-output.is-failed:hover { border-color: #81342f; color: #fff; background: #b44742; }
.node-run-summary > code { display: block; height: 66px; box-sizing: border-box; overflow: auto; padding: 7px 8px 9px; color: #a96024; background: #fff7ed; font: .42rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; }
.node-run-summary.is-succeeded > code { color: #344538; background: #e7f1e7; opacity: 1; }
.node-run-summary.is-failed > code { color: #fff; background: #b44742; }
.run-output-dialog { width: min(1320px, calc(100% - 32px)); height: min(760px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid #cad4de; border-radius: 12px; padding: 0; color: #303a43; background: #fff; box-shadow: 0 28px 90px rgba(22,31,40,.3); }
.run-output-dialog[open] { display: grid; grid-template-rows: 70px 46px minmax(0, 1fr); }
.run-output-dialog::backdrop { background: rgba(20,29,38,.56); backdrop-filter: blur(3px); }
.run-output-dialog > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfe4e8; padding: 0 18px; }
.run-output-dialog h2, .run-output-dialog header small { display: block; margin: 0; }
.run-output-dialog h2 { font-size: .76rem; }.run-output-dialog header small { margin-bottom: 5px; color: #84909a; font-size: .47rem; }
.run-output-dialog > header > button { display: grid; width: 29px; height: 29px; place-items: center; border: 0; border-radius: 6px; color: #74808a; background: #eef1f4; font-size: .9rem; }
.run-output-dialog-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; border-bottom: 1px solid #e3e7ea; padding: 0 18px; color: #7d8790; background: #fafbfc; font-size: .49rem; }
.run-output-dialog-meta strong { color: #43515d; font-size: .54rem; }
.run-output-dialog-meta > span { justify-self: end; }
.run-output-dialog-format { display: flex; gap: 2px; border: 1px solid #dde2e6; border-radius: 7px; padding: 2px; background: #f1f3f5; }
.run-output-dialog-format button { min-height: 25px; border: 0; border-radius: 5px; padding: 0 10px; color: #727c85; background: transparent; font-size: .48rem; font-weight: 700; }
.run-output-dialog-format button.is-active { color: #315d83; background: #fff; box-shadow: 0 1px 3px rgba(34,48,61,.09); }
.run-output-dialog pre { min-width: 0; min-height: 0; margin: 0; overflow: auto; padding: 20px 22px 70px; color: #35424d; background: #fff; font: .59rem/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre; }
.run-output-dialog > [hidden] { display: none; }
.run-output-dialog .block-snapshot-table-wrap th, .run-output-dialog .block-snapshot-table-wrap td { border-color: #eef1f3; padding: 12px 15px; }
.run-output-dialog .block-snapshot-table-wrap td > span { color: #34404a; }
.run-block-inspector { display: grid; min-width: 0; min-height: 100%; grid-column: 1; grid-row: 1 / -1; grid-template-rows: 72px 43px minmax(0, 1fr); overflow: hidden; color: #35404a; background: #f6f7f9; }
.run-block-inspector[hidden] { display: none; }
.run-block-inspector > header { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #dfe3e7; padding: 0 18px; background: #fff; }
.run-block-inspector > header > button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #d2d8de; border-radius: 7px; color: #4c5c6a; background: #fff; font-size: .7rem; }
.run-block-inspector > header > div { min-width: 0; }
.run-block-inspector > header p, .run-block-inspector > header h2 { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.run-block-inspector > header p { margin-bottom: 5px; color: #858f98; font-size: .48rem; }
.run-block-inspector > header h2 { font-size: .78rem; }
.run-block-inspector > header > span { margin-left: auto; }
.run-block-inspector > nav { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid #dfe3e7; padding-left: 17px; background: #fafbfc; }
.run-block-inspector > nav button { position: relative; border: 0; padding: 0 11px; color: #737d86; background: transparent; font-size: .55rem; font-weight: 680; }
.run-block-inspector > nav button.is-active { color: #245f9c; }
.run-block-inspector > nav button.is-active::after { position: absolute; right: 7px; bottom: -1px; left: 7px; height: 2px; background: #2876d2; content: ""; }
.run-block-panel { min-width: 0; min-height: 0; margin: 14px 16px 16px; overflow: hidden; border: 1px solid #dce1e5; border-radius: 9px; background: #fff; }
.run-block-panel[hidden] { display: none; }
.run-block-logs-panel pre { width: 100%; height: 100%; box-sizing: border-box; margin: 0; overflow: auto; padding: 19px 21px 80px; color: #d5dee6; background: #26323d; font: .62rem/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; }
.run-block-data-panel { display: grid; grid-template-rows: 58px minmax(0, 1fr); }
.run-block-data-panel > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e3e7ea; padding: 0 12px 0 15px; background: #fafbfc; }
.run-block-data-panel > header strong, .run-block-data-panel > header small { display: block; }
.run-block-data-panel > header strong { margin-bottom: 4px; font-size: .57rem; }.run-block-data-panel > header small { color: #899199; font-size: .46rem; }
.run-block-data-controls { display: flex; gap: 8px; }
.run-block-data-controls > div { display: flex; gap: 2px; border: 1px solid #dde2e6; border-radius: 7px; padding: 2px; background: #f1f3f5; }
.run-block-data-controls button { min-height: 25px; border: 0; border-radius: 5px; padding: 0 8px; color: #727c85; background: transparent; font-size: .48rem; font-weight: 700; }
.run-block-data-controls button.is-active { color: #315d83; background: #fff; box-shadow: 0 1px 3px rgba(34,48,61,.09); }
#run-block-data-json { width: 100%; height: 100%; min-width: 0; min-height: 0; box-sizing: border-box; margin: 0; overflow: auto; padding: 18px 20px 80px; color: #39444e; font: .61rem/1.68 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre; }
#run-block-data-json[hidden], #run-block-data-table[hidden] { display: none; }

/* Orchestration builder lives inside the Pipelines tab. */
.workspace-pipeline-library { background: #fff; }

#pipeline-folder-pipelines-panel #folder-schedule-form { margin: 18px 18px 22px; border: 1px solid #d9e0e6; border-radius: 10px; padding: 0; background: #fff; box-shadow: 0 8px 24px rgba(39,54,68,.07); }
#pipeline-folder-pipelines-panel #folder-schedule-form > header { display: flex; min-height: 64px; align-items: center; border-bottom: 1px solid #e4e8eb; padding: 0 16px; background: #fafbfc; }
#pipeline-folder-pipelines-panel #folder-schedule-form > header strong, #pipeline-folder-pipelines-panel #folder-schedule-form > header small { display: block; }
#pipeline-folder-pipelines-panel #folder-schedule-form > header strong { margin-bottom: 5px; color: #394550; font-size: .65rem; }
#pipeline-folder-pipelines-panel #folder-schedule-form > header small { color: #87919a; font-size: .48rem; }
#pipeline-folder-pipelines-panel #folder-schedule-form > label { margin: 15px 16px 0; }
#pipeline-folder-pipelines-panel #folder-schedule-form input:not([type="checkbox"]), #pipeline-folder-pipelines-panel #folder-schedule-form select { display: block; width: 100%; height: 38px; margin-top: 7px; border: 1px solid #d3d9de; border-radius: 7px; padding: 0 10px; color: #343d46; background: #fff; outline: none; font-size: .56rem; }
#pipeline-folder-pipelines-panel #folder-schedule-form select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, #77838e 50%), linear-gradient(135deg, #77838e 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 11px) 16px; background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; }
#pipeline-folder-pipelines-panel #folder-schedule-form :is(input:not([type="checkbox"]), select):focus { border-color: #8db4dd; box-shadow: 0 0 0 3px rgba(40,118,210,.08); }
.folder-orchestration-step-builder { margin: 15px 16px 0; overflow: hidden; border: 1px solid #dce2e7; border-radius: 9px; }
.folder-orchestration-step-builder > header { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; background: #f7f9fb; }
.folder-orchestration-step-builder > header strong, .folder-orchestration-step-builder > header small { display: block; }
.folder-orchestration-step-builder > header strong { margin-bottom: 5px; color: #43505b; font-size: .58rem; }
.folder-orchestration-step-builder > header small { max-width: 430px; color: #87919a; font-size: .46rem; line-height: 1.45; }
.folder-orchestration-step-builder > header > div:last-child { display: flex; flex: 0 0 auto; align-items: end; gap: 6px; }
#pipeline-folder-pipelines-panel #folder-schedule-form .folder-orchestration-step-builder select { width: 190px; margin: 0; }
#add-folder-orchestration-step { min-height: 38px; border: 1px solid #bfcbd6; border-radius: 7px; padding: 0 11px; color: #315f87; background: #fff; font-size: .5rem; font-weight: 740; }
#add-folder-orchestration-step:disabled { cursor: not-allowed; opacity: .48; }
#folder-chain-list { display: grid; gap: 0; padding: 12px; background: #fff; }
.folder-orchestration-flow-empty { display: flex; min-height: 64px; align-items: center; gap: 10px; border: 1px dashed #ccd6de; border-radius: 8px; padding: 0 12px; color: #7f8a94; background: #fbfcfd; }
.folder-orchestration-flow-empty > i, #folder-chain-list > article > i { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 50%; color: #276bac; background: #dfeefa; font-size: .5rem; font-style: normal; font-weight: 800; }
.folder-orchestration-flow-empty strong, .folder-orchestration-flow-empty small { display: block; }
.folder-orchestration-flow-empty strong { margin-bottom: 4px; color: #4b5863; font-size: .54rem; }
.folder-orchestration-flow-empty small { font-size: .45rem; line-height: 1.45; }
#pipeline-folder-pipelines-panel #folder-chain-list > article { position: relative; display: grid; min-height: 62px; grid-template-columns: 29px minmax(0,1fr) auto auto; align-items: center; gap: 10px; border: 1px solid #dfe4e8; border-radius: 8px; padding: 8px 10px; background: #fff; }
#pipeline-folder-pipelines-panel #folder-chain-list > article + article { margin-top: 14px; }
#pipeline-folder-pipelines-panel #folder-chain-list > article + article::before { position: absolute; top: -15px; left: 24px; width: 1px; height: 14px; background: #b8cad9; content: ""; }
#folder-chain-list > article > span:nth-child(2) strong, #folder-chain-list > article > span:nth-child(2) small { display: block; }
#folder-chain-list > article > span:nth-child(2) strong { margin-bottom: 4px; color: #3f4c57; font-size: .56rem; }
#folder-chain-list > article > span:nth-child(2) small { color: #85909a; font-size: .45rem; }
#folder-chain-list > article > b { border-radius: 999px; padding: 4px 7px; color: #607f9a; background: #edf3f8; font-size: .42rem; font-weight: 780; text-transform: uppercase; }
#folder-chain-list > article > span:last-child { display: flex; gap: 4px; }
#folder-chain-list > article > span:last-child button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #d4dbe1; border-radius: 6px; color: #64717c; background: #fff; font-size: .62rem; }
#folder-chain-list > article > span:last-child button:last-child { color: #a24f48; }
#folder-chain-list > article > span:last-child button:disabled { opacity: .3; }
#pipeline-folder-pipelines-panel #folder-schedule-form > .folder-orchestration-schedule-fields { margin: 15px 16px 0; }
#pipeline-folder-pipelines-panel #folder-schedule-form > .folder-schedule-enabled { margin: 13px 16px 0; }
#pipeline-folder-pipelines-panel #folder-schedule-form > p { margin: 10px 16px 0; color: #a9483e; font-size: .5rem; }
#pipeline-folder-pipelines-panel #folder-schedule-form > footer { display: flex; min-height: 62px; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; border-top: 1px solid #e4e8eb; padding: 0 16px; background: #fafbfc; }
#pipeline-folder-pipelines-panel #folder-schedule-form > footer button { min-height: 34px; border: 1px solid #d2d8de; border-radius: 7px; padding: 0 12px; color: #58636d; background: #fff; font-size: .52rem; font-weight: 720; }
#pipeline-folder-pipelines-panel #folder-schedule-form > footer button[type="submit"] { border-color: #1767bd; color: #fff; background: #2876d2; }

@media (max-width: 720px) {
  #pipeline-folder-pipelines-panel #folder-schedule-form { margin-inline: 13px; }
  .folder-orchestration-step-builder > header { align-items: stretch; flex-direction: column; }
  .folder-orchestration-step-builder > header > div:last-child { align-items: stretch; }
  #pipeline-folder-pipelines-panel #folder-schedule-form .folder-orchestration-step-builder select { width: 100%; }
  #pipeline-folder-pipelines-panel #folder-chain-list > article { grid-template-columns: 29px minmax(0,1fr) auto; }
  #folder-chain-list > article > b { display: none; }
}

/* The workspace list and an open workspace share one compact navigation header;
   it and the labels below it stay put while rows scroll under them. */
.pipelines-list-page { padding-top: 0; }
.pipelines-list-page .pipeline-catalog-panel { margin-top: 0; overflow: visible; border-top: 0; }
.pipelines-list-page .pipeline-catalog-panel > header { position: sticky; top: 0; z-index: 12; min-height: 68px; padding-inline: 16px; background: #fff; }
.pipelines-list-page:not(.is-folder-open) .pipeline-catalog-panel > header { border-bottom: 1px solid #e5e8eb; }
.pipelines-list-page .pipeline-browser-path { min-height: 0; gap: 10px; margin: 0; font-size: .78rem; }
.pipelines-list-page .pipeline-browser-path button { color: #2869aa; font-weight: 400; }
.pipelines-list-page .pipeline-browser-path strong { color: #59636d; font-size: .78rem; font-weight: 650; }
.pipelines-list-page .pipeline-browser-path button[aria-current="page"] { color: #29313a; cursor: default; font-weight: 600; }
.pipelines-list-page #pipeline-folder-path-separator { color: #c0c4c9; }
.pipelines-list-page .pipeline-browser-heading > h2,
.pipelines-list-page.is-folder-open .pipeline-browser-heading > p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.pipelines-list-page .pipeline-browser-heading > p { overflow: hidden; margin-top: 3px; color: #7e858e; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
/* An open storage resource or MCP server trades the workspace blurb for its relation or endpoint. */
.pipelines-list-page.is-resource-open .pipeline-browser-heading > p { position: static; width: auto; height: auto; margin: 2px 0 0; clip: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .55rem; }
.pipelines-list-page .pipeline-catalog-table { overflow: visible; }
.pipelines-list-page .pipeline-catalog-table-head { position: sticky; top: 68px; z-index: 10; }
.pipelines-list-page.is-folder-open .pipeline-catalog-table-head { top: 108px; }
.pipelines-list-page .pipeline-folder-tabs { position: sticky; top: 68px; z-index: 11; min-height: 40px; }
.pipelines-list-page .pipeline-folder-tabs button { min-height: 39px; }

@media (max-width: 720px) {
  .pipelines-list-page .pipeline-catalog-panel > header { min-height: 68px; align-items: center; flex-direction: row; padding-block: 0; }
  .pipelines-list-page .pipeline-browser-header-actions { width: auto; }
}

/* The folder overview keeps its contained card; only an opened folder becomes
   the full-width working surface. */
.pipelines-list-page { width: 100%; }
.pipeline-catalog-panel { border: 1px solid #dce1e5; border-right: 0; border-left: 0; border-radius: 0; }
.pipeline-catalog-toolbar { display: none; }

@media (max-width: 720px) {
}

@media (max-width: 840px) {
  .storage-resource-details { grid-template-columns: 1fr 1fr; }
  .storage-config-layout { grid-template-columns: 1fr; }
  .storage-estimate-panel { border-top: 1px solid #e4e8eb; border-left: 0; }
}

@media (max-width: 620px) {
  .folder-storage-list { padding: 11px 12px 14px; }
  .storage-resource-card > header { align-items: flex-start; flex-direction: column; padding-block: 12px; }
  .storage-resource-details { grid-template-columns: 1fr; }
  .storage-resource-card > footer { align-items: flex-start; flex-direction: column; padding-block: 10px; }
  .storage-type-picker > div:last-child { width: auto; grid-template-columns: 1fr; }
  .storage-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .storage-dialog > form { max-height: calc(100dvh - 90px); }
  .storage-field-grid { grid-template-columns: 1fr; }
  .storage-dialog form > footer { align-items: flex-start; flex-direction: column; padding-block: 12px; }
  .storage-dialog form > footer > div { width: 100%; justify-content: flex-end; }
}

/* Documentation keeps the shared page header and adds prose typography under it. */
.docs-view { min-height: 0; grid-column: 1 / -1; grid-row: 3 / -1; overflow: auto; color: #30373f; background: #fff; }
.docs-heading { position: sticky; z-index: 12; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e5e8eb; padding: 0 16px; background: #fff; }
.docs-heading h2, .docs-heading p { display: block; margin: 0; }
.docs-heading h2 { color: #29313a; font-size: .78rem; font-weight: 600; }
.docs-heading p { overflow: hidden; margin-top: 3px; color: #7e858e; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.docs-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
.docs-contents { position: sticky; top: 68px; display: flex; height: calc(100dvh - 68px); flex-direction: column; overflow: auto; border-right: 1px solid #e5e8eb; padding: 16px 0 24px; background: #f8f9fa; }
.docs-toc-group { display: grid; margin-bottom: 8px; }
.docs-contents button { min-height: 31px; border: 0; border-left: 2px solid transparent; padding: 0 16px; color: #58636e; background: transparent; font-size: .61rem; font-weight: 500; text-align: left; }
.docs-contents .docs-toc-parent { min-height: 34px; color: #3f4953; font-weight: 650; }
.docs-contents .docs-toc-child { min-height: 28px; padding-left: 30px; color: #7a838c; font-size: .56rem; }
.docs-contents button:hover { color: #2869aa; }
.docs-contents button.is-active { border-left-color: #2876d2; color: #2869aa; background: #eef5fc; font-weight: 650; }
.docs-toc-group.has-active-child .docs-toc-parent { color: #2869aa; }
.docs-page { min-width: 0; padding: 0 32px 80px; }
.docs-article { width: min(1040px, 100%); margin: 0 auto; }
.docs-section { padding: 38px 0 8px; scroll-margin-top: 80px; }
.docs-section + .docs-section { border-top: 1px solid #e8eaed; }
.docs-section:focus, .docs-subsection:focus { outline: none; }
.docs-eyebrow { display: block; margin-bottom: 8px; color: #71808e; font-size: .52rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.docs-section h3 { max-width: 720px; margin: 0 0 18px; color: #29313a; font-size: 1.12rem; font-weight: 650; letter-spacing: -.015em; }
.docs-section h4 { margin: 0 0 10px; color: #3b444d; font-size: .76rem; font-weight: 650; }
.docs-section p { margin: 0 0 13px; color: #5c656f; font-size: .7rem; line-height: 1.72; }
.docs-section p b { color: #3b444d; font-weight: 620; }
.docs-section a { color: #2869aa; text-decoration: underline; text-underline-offset: 2px; }
.docs-section code { border-radius: 4px; padding: 1px 5px; color: #4e6578; background: #f1f4f7; font: .64rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.docs-subsection { padding-top: 30px; scroll-margin-top: 82px; }
.docs-subsection + .docs-subsection { margin-top: 7px; border-top: 1px solid #f0f1f3; }
.docs-definitions { margin: 0 0 15px; }
.docs-definitions > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; border-top: 1px solid #eceef1; padding: 10px 0; }
.docs-definitions dt { color: #3b444d; font-size: .68rem; font-weight: 620; }
.docs-definitions dd { margin: 0; color: #5c656f; font-size: .68rem; line-height: 1.6; }
.docs-definitions-compact > div { grid-template-columns: 125px minmax(0, 1fr); padding-block: 8px; }
.docs-note { border-left: 2px solid #9bbce0; padding: 9px 0 9px 13px; color: #6b747e !important; background: linear-gradient(90deg, #f6f9fc, transparent 72%); }
.docs-explainer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .74fr); align-items: start; gap: 38px; }
.docs-visual { min-width: 0; margin: 0; border: 1px solid #dfe4e8; border-radius: 9px; padding: 14px; color: #53606b; background: #f8fafb; box-shadow: 0 7px 24px rgba(42,55,67,.06); }
.docs-visual figcaption { margin-bottom: 12px; color: #77828c; font-size: .49rem; font-weight: 730; letter-spacing: .05em; text-transform: uppercase; }
.docs-layer-visual { display: grid; gap: 7px; }
.docs-layer-visual > div:not(.docs-mini-flow, .docs-visual-result) { display: flex; min-height: 35px; align-items: center; justify-content: space-between; border: 1px solid #e3e7ea; border-radius: 6px; padding: 0 10px; background: #fff; }
.docs-layer-visual > div > span { color: #8b949d; font-size: .47rem; }
.docs-layer-visual > div > b { color: #3f4b55; font-size: .56rem; }
.docs-mini-flow { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; color: #7790aa; background: #eef4fa; }
.docs-mini-flow i { border: 1px solid #ccdae7; border-radius: 5px; padding: 5px 6px; color: #41688e; background: #fff; font-size: .43rem; font-style: normal; }
.docs-mini-flow em { font-size: .54rem; font-style: normal; }
.docs-visual-result { display: flex; min-height: 39px; align-items: center; gap: 9px; padding: 2px 6px; }
.docs-visual-result > i { width: 8px; height: 8px; border-radius: 50%; background: #3f9b67; box-shadow: 0 0 0 3px #dff1e7; }
.docs-visual-result span, .docs-visual-result b, .docs-visual-result small { display: block; }
.docs-visual-result b { margin-bottom: 3px; color: #35664b; font-size: .54rem; }
.docs-visual-result small { color: #8a939c; font-size: .43rem; }
.docs-pipeline-visual { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; }
.docs-pipeline-visual figcaption { grid-column: 1 / -1; }
.docs-pipeline-visual > i { color: #8ba2b8; font-size: .72rem; font-style: normal; }
.docs-node { min-width: 0; min-height: 92px; border: 1px solid #d7e0e8; border-radius: 7px; padding: 9px; background: #fff; }
.docs-node > span { display: grid; width: 22px; height: 22px; margin-bottom: 13px; place-items: center; border-radius: 5px; color: #29659f; background: #e7f1fa; font-size: .43rem; font-weight: 750; }
.docs-node b, .docs-node small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-node b { margin-bottom: 4px; color: #3b4751; font-size: .51rem; }
.docs-node small { color: #8c959d; font-size: .41rem; }
.docs-node.transform > span { color: #6d599c; background: #eee9fa; }
.docs-node.destination > span { color: #377253; background: #e4f2e9; }
.docs-run-visual, .docs-chain-visual { display: grid; gap: 0; }
.docs-run-visual > div, .docs-chain-visual > div { position: relative; display: flex; min-height: 48px; align-items: center; gap: 10px; }
.docs-run-visual > div:not(:last-child)::after { position: absolute; top: 34px; bottom: -14px; left: 11px; width: 1px; background: #cbd9d0; content: ""; }
.docs-run-visual i, .docs-chain-visual i { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 50%; color: #317751; background: #e3f2e9; font-size: .48rem; font-style: normal; font-weight: 750; }
.docs-run-visual span, .docs-run-visual b, .docs-run-visual small, .docs-chain-visual span, .docs-chain-visual b, .docs-chain-visual small { display: block; }
.docs-run-visual b, .docs-chain-visual b { margin-bottom: 4px; color: #3d4852; font-size: .54rem; }
.docs-run-visual small, .docs-chain-visual small { color: #8a939c; font-size: .43rem; }
.docs-chain-visual > em { margin: -2px 0 -2px 34px; color: #93a09a; font-size: .4rem; font-style: normal; }
.docs-chain-visual i { color: #376a9b; background: #e6eff8; }
.docs-mcp-visual { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; align-items: center; gap: 7px; }.docs-mcp-visual figcaption { grid-column: 1 / -1; }.docs-mcp-visual > div { min-width: 0; border: 1px solid #d9e0e6; border-radius: 7px; padding: 9px; background: #fff; text-align: center; }.docs-mcp-visual > div > span { display: grid; width: 27px; height: 25px; margin: 0 auto 8px; place-items: center; border-radius: 6px; color: #327053; background: #e6f3eb; font-size: .42rem; font-weight: 800; }.docs-mcp-visual > div.is-server { border-color: #b6a4ce; }.docs-mcp-visual > div.is-server > span { color: #7454a1; background: #eee9f8; }.docs-mcp-visual b, .docs-mcp-visual small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.docs-mcp-visual b { margin-bottom: 4px; color: #3d4852; font-size: .48rem; }.docs-mcp-visual small { color: #8a939c; font-size: .39rem; }.docs-mcp-visual > i { color: #8a9ba8; font-size: .65rem; font-style: normal; }
.docs-table-visual { overflow: hidden; padding: 0; }
.docs-table-visual figcaption { overflow: hidden; margin: 0; padding: 12px 13px; border-bottom: 1px solid #e2e6e9; color: #56636f; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.docs-fake-table { display: grid; grid-template-columns: 46px minmax(100px, 1fr) 70px; }
.docs-fake-table > * { min-width: 0; min-height: 31px; overflow: hidden; border-bottom: 1px solid #e7eaed; padding: 9px 8px 0; text-overflow: ellipsis; white-space: nowrap; }
.docs-fake-table > span { color: #89939c; background: #f6f8f9; font-size: .4rem; font-weight: 750; letter-spacing: .04em; }
.docs-fake-table > b { color: #56616b; background: #fff; font-size: .47rem; font-weight: 500; }
.docs-fake-table > b.is-ready { color: #2f7952; }
.docs-table-visual > small { display: block; padding: 10px 13px; color: #8c959d; background: #fff; font-size: .42rem; }
.docs-steps { margin: 2px 0 17px; padding: 0; counter-reset: docs-step; list-style: none; }
.docs-steps li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; border-top: 1px solid #eceef1; padding: 10px 0; counter-increment: docs-step; }
.docs-steps b { color: #3b444d; font-size: .68rem; }
.docs-steps b::before { margin-right: 8px; color: #7d9bbb; content: "0" counter(docs-step); font-size: .46rem; }
.docs-steps span { color: #5c656f; font-size: .68rem; line-height: 1.6; }

@media (max-width: 900px) {
  .docs-body { grid-template-columns: 210px minmax(0, 1fr); }
  .docs-page { padding-inline: 22px; }
  .docs-explainer { grid-template-columns: 1fr; gap: 10px; }
  .docs-visual { width: min(520px, 100%); margin: 0 0 8px; }
}

@media (max-width: 680px) {
  .docs-body { display: block; }
  .docs-contents { position: sticky; z-index: 9; top: 68px; height: auto; max-height: 42dvh; border-right: 0; border-bottom: 1px solid #e5e8eb; padding-block: 8px; }
  .docs-page { padding-inline: 16px; }
  .docs-definitions > div, .docs-definitions-compact > div, .docs-steps li { grid-template-columns: 1fr; gap: 4px; }
}

/* Storage and orchestration are the same catalog table as pipelines: the panel
   header, the label row, and the row chrome all come from the pipeline rules,
   so only the column templates and per-column text styling live here. */
.pipeline-catalog-table.is-storage-table .pipeline-catalog-table-head,
.storage-catalog-row { min-width: 900px; grid-template-columns: minmax(210px, 1.6fr) 92px minmax(180px, 1.1fr) 108px 132px 132px 18px; }
.pipeline-catalog-table.is-orchestration-table .pipeline-catalog-table-head,
.folder-orchestration-row { min-width: 1040px; grid-template-columns: minmax(190px, 1.4fr) minmax(180px, 1.5fr) 58px 112px minmax(125px, .9fr) 138px 92px 18px; }
.pipeline-catalog-table.is-mcp-table .pipeline-catalog-table-head,
.workspace-mcp-row { min-width: 920px; grid-template-columns: minmax(210px, 1.45fr) 125px 68px minmax(180px, 1.2fr) 135px 90px 18px; }
#folder-storage-panel .pipeline-catalog-table, #folder-mcp-panel .pipeline-catalog-table { border-top: 0; }
.folder-mcp-panel { background: #fff; }
.mcp-server-browser[hidden], #mcp-builder-workspace[hidden] { display: none; }
.mcp-catalog-transport { width: fit-content; border: 1px solid transparent; border-radius: 5px; padding: 5px 8px; color: #fff; font-size: .52rem; font-weight: 400; line-height: 1.2; white-space: nowrap; }
.mcp-catalog-transport.is-streamable-http { border-color: rgba(114,174,235,.32); background: rgba(40,118,210,.2); }
.mcp-catalog-transport.is-sse { border-color: rgba(184,157,220,.32); background: rgba(116,84,161,.2); }
.mcp-catalog-transport.is-stdio { border-color: rgba(237,171,105,.32); background: rgba(184,105,34,.2); }
.mcp-catalog-endpoint { overflow: hidden; color: #76818b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.mcp-builder-actions { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.pipeline-browser-header-actions #mcp-add-connector { min-height: 30px; border: 1px solid rgba(73,145,79,.34); border-radius: 6px; padding: 0 12px; color: #256b3a; background: #e8f4ea; font-size: .48rem; font-weight: 720; }
.pipeline-browser-header-actions #mcp-add-connector:hover { border-color: rgba(73,145,79,.5); background: #dcefe0; }
.mcp-connector-menu { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; display: grid; width: 268px; max-height: 320px; overflow: auto; gap: 1px; border: 1px solid #d5dce2; border-radius: 9px; padding: 5px; background: #fff; box-shadow: 0 16px 40px rgba(35,45,55,.18); }
.mcp-connector-menu[hidden] { display: none; }
.mcp-connector-menu button { display: grid; width: 100%; gap: 3px; border: 0; border-radius: 6px; padding: 8px 9px; background: transparent; text-align: left; }
.mcp-connector-menu button:hover { background: #f2f6f3; }
.mcp-connector-menu strong { color: #38424c; font-size: .52rem; font-weight: 720; }
.mcp-connector-menu small { color: #8b939b; font-size: .43rem; }
.mcp-connector-menu button[data-connect-external] { border-top: 1px solid #e6eaee; border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 9px; }
.mcp-connector-menu p { margin: 0; padding: 9px; color: #8b939b; font-size: .45rem; }
.mcp-settings-view { display: grid; min-height: 520px; align-content: start; gap: 16px; padding: 18px 16px; background: #f7f8fa; }
.mcp-settings-view .mcp-server-settings { position: static; width: min(680px, 100%); }
.mcp-server-brain { width: min(680px, 100%); overflow: hidden; border: 1px solid #d5dce2; border-radius: 9px; background: #fff; box-shadow: 0 4px 15px rgba(38,50,61,.07); }
.mcp-server-brain > header { display: flex; min-height: 50px; align-items: center; gap: 9px; border-bottom: 1px solid #e4e8eb; padding: 0 12px; background: #fafbfc; }
.mcp-server-brain > header > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: #7454a1; background: #eee9f8; font-size: .61rem; }
.mcp-server-brain strong, .mcp-server-brain small { display: block; }.mcp-server-brain strong { margin-bottom: 4px; color: #3f4953; font-size: .56rem; }.mcp-server-brain small { color: #8b939b; font-size: .43rem; }
.mcp-server-prompt { display: block; padding: 11px 12px; color: #69747e; font-size: .43rem; font-weight: 730; }
.mcp-server-prompt textarea { display: block; width: 100%; max-height: 320px; resize: vertical; margin-top: 6px; border: 1px solid #d5dce1; border-radius: 7px; padding: 9px 10px; color: #3e4852; background: #fff; outline: none; font: .5rem/1.6 inherit; }
.mcp-server-prompt textarea:focus, .mcp-skill-row :is(input, textarea):focus { border-color: #8fa68f; }
.mcp-skill-editor { border-top: 1px solid #e5e9ec; padding: 11px 12px 13px; background: #fafbfc; }
.mcp-skill-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.mcp-skill-editor > header button { min-height: 28px; border: 1px solid rgba(73,145,79,.34); border-radius: 6px; padding: 0 10px; color: #256b3a; background: #e8f4ea; font-size: .45rem; font-weight: 720; }
#mcp-skill-list { display: grid; gap: 8px; }
.mcp-skill-row { display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 6px; border: 1px solid #dfe4e8; border-radius: 8px; padding: 8px; background: #fff; }
.mcp-skill-row :is(input, textarea) { display: block; width: 100%; border: 1px solid #d9dfe4; border-radius: 6px; padding: 7px 8px; color: #3e4852; background: #fff; outline: none; font: .48rem/1.55 inherit; }
.mcp-skill-row input { font-weight: 700; }
.mcp-skill-row textarea { grid-column: 1 / -1; max-height: 220px; resize: vertical; }
.mcp-skill-row button { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 5px; color: #9a6b65; background: transparent; font-size: .66rem; }
.mcp-skill-row button:hover { color: #a34840; background: #faecea; }
#mcp-skill-empty { margin: 0; color: #8b939b; font-size: .44rem; }
#mcp-skill-empty[hidden] { display: none; }
.mcp-storage-node, .mcp-server-node { cursor: grab; touch-action: none; }
.mcp-storage-node :is(button, select), .mcp-server-node :is(button, select) { cursor: pointer; }
.mcp-storage-node.is-dragging, .mcp-server-node.is-dragging { z-index: 6; cursor: grabbing; box-shadow: 0 12px 28px rgba(37,47,58,.22); }
.mcp-canvas-viewport { min-width: 0; min-height: 0; overflow: auto; background: #f7f8fa; }
.mcp-canvas { position: relative; width: 920px; min-width: 100%; min-height: 650px; overflow: hidden; background-color: #f7f8fa; background-image: radial-gradient(#d6d9de .75px, transparent .75px); background-size: 16px 16px; }
.mcp-server-settings { position: absolute; z-index: 4; top: 20px; left: 25px; width: 560px; overflow: hidden; border: 1px solid #d5dce2; border-radius: 9px; background: #fff; box-shadow: 0 4px 15px rgba(38,50,61,.07); }
.mcp-server-settings > header { display: flex; min-height: 50px; align-items: center; gap: 9px; border-bottom: 1px solid #e4e8eb; padding: 0 12px; background: #fafbfc; }
.mcp-server-settings > header > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: #7454a1; background: #eee9f8; font-size: .61rem; }
.mcp-server-settings strong, .mcp-server-settings small { display: block; }.mcp-server-settings strong { margin-bottom: 4px; color: #3f4953; font-size: .56rem; }.mcp-server-settings small { color: #8b939b; font-size: .43rem; }
.mcp-server-settings > div { display: grid; grid-template-columns: 1.1fr .75fr 1.25fr; gap: 8px; padding: 11px 12px; }
.mcp-server-settings label { color: #69747e; font-size: .43rem; font-weight: 730; }
.mcp-server-settings :is(input:not([type="checkbox"]), select) { display: block; width: 100%; height: 30px; margin-top: 5px; border: 1px solid #d5dce1; border-radius: 6px; padding: 0 8px; color: #3e4852; background: #fff; outline: none; font-size: .47rem; }
.mcp-server-settings input[readonly] { color: #6f7982; background: #f4f6f7; }
.mcp-server-settings > footer { display: flex; min-height: 36px; align-items: center; justify-content: space-between; border-top: 1px solid #e5e9ec; padding: 0 12px; color: #7e8891; background: #fafbfc; font-size: .43rem; }.mcp-server-settings > footer b { color: #5e4881; }.mcp-server-settings > footer label { display: flex; align-items: center; gap: 6px; color: #4c705a; }
.mcp-server-actions { display: flex; align-items: center; gap: 6px; }
.mcp-server-actions button { min-height: 25px; border: 1px solid #d2d9df; border-radius: 5px; padding: 0 8px; color: #52606b; background: #fff; font-size: .42rem; font-weight: 700; }
.mcp-server-actions button:hover:not(:disabled) { border-color: #a7b8aa; color: #2f6843; background: #f2f7f3; }
.mcp-server-actions button:disabled { opacity: .48; cursor: not-allowed; }
.mcp-canvas-edges { position: absolute; z-index: 1; top: 0; left: 0; overflow: visible; pointer-events: none; }.mcp-canvas-edges path { fill: none; stroke-width: 2; stroke-linecap: round; }.mcp-canvas-edges path.is-internal { stroke: #79a68e; }.mcp-canvas-edges .mcp-edge-arrow-head { fill: #8199a8; stroke: none; }
.mcp-storage-nodes { position: absolute; z-index: 2; inset: 0; }
.mcp-storage-node { position: absolute; width: 210px; height: 104px; border: 1px solid #c3ced7; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(37,47,58,.08); }
.mcp-storage-node.is-internal { border-color: #aacbbb; }
.mcp-storage-node > header { display: grid; height: 67px; grid-template-columns: 28px minmax(0,1fr) 21px; align-items: center; gap: 8px; border-bottom: 1px solid #e7eaed; padding: 0 8px; }
.mcp-storage-node > header > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: #317152; background: #e6f3eb; font-size: .5rem; }
.mcp-storage-node header strong, .mcp-storage-node header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mcp-storage-node header strong { margin-bottom: 5px; color: #34404a; font-size: .56rem; }.mcp-storage-node header small { color: #88919a; font: .4rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.mcp-storage-node header button { display: grid; width: 21px; height: 21px; place-items: center; border: 0; border-radius: 5px; color: #9a6b65; background: transparent; font-size: .66rem; }.mcp-storage-node header button:hover { color: #a34840; background: #faecea; }
.mcp-storage-node > footer { display: flex; height: 36px; align-items: center; justify-content: space-between; padding: 0 8px; color: #78838c; font-size: .4rem; }.mcp-storage-node > footer label { display: flex; align-items: center; gap: 5px; }.mcp-storage-node > footer select { height: 23px; border: 1px solid #d6dce1; border-radius: 5px; color: #596671; background: #fff; font-size: .4rem; }.mcp-storage-node > footer b { color: #87928c; font-weight: 700; text-transform: uppercase; }
.mcp-storage-port { position: absolute; z-index: 3; top: 46px; right: -6px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #6e9d84; box-shadow: 0 0 0 1px #6e9d84; }.mcp-storage-node.is-flipped .mcp-storage-port { right: auto; left: -6px; }
.mcp-server-node { position: absolute; z-index: 3; width: 240px; height: 118px; border: 1px solid #866aac; border-radius: 10px; background: #fff; box-shadow: 0 0 0 3px rgba(116,84,161,.09), 0 8px 22px rgba(37,47,58,.13); }
.mcp-server-ring { position: absolute; z-index: -1; inset: -15px; border: 1px dashed rgba(116,84,161,.25); border-radius: 18px; }
.mcp-server-node > header { display: flex; height: 44px; align-items: center; gap: 8px; border-bottom: 1px solid #e8e3ee; padding: 0 10px; background: #faf8fd; }.mcp-server-node > header > span { display: grid; width: 29px; height: 25px; place-items: center; border-radius: 6px; color: #7454a1; background: #eee9f8; font-size: .38rem; font-weight: 850; }.mcp-server-node header strong, .mcp-server-node header small { display: block; }.mcp-server-node header strong { margin-bottom: 3px; color: #40344f; font-size: .51rem; }.mcp-server-node header small { color: #91889c; font-size: .39rem; }
.mcp-server-node > div { height: 43px; padding: 8px 10px 0; }.mcp-server-node > div b, .mcp-server-node > div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mcp-server-node > div b { margin-bottom: 4px; color: #3c4650; font-size: .55rem; }.mcp-server-node > div span { color: #7f8992; font: .4rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.mcp-server-node > footer { display: flex; height: 30px; align-items: center; justify-content: space-between; border-top: 1px solid #ece9ef; padding: 0 10px; color: #808a93; font-size: .39rem; }.mcp-server-node > footer span { display: flex; align-items: center; gap: 5px; }.mcp-server-node > footer i { width: 6px; height: 6px; border-radius: 50%; background: #3e9a64; }.mcp-server-node > footer em { color: #846aa8; font-style: normal; font-weight: 700; }.mcp-server-node.is-disabled { opacity: .68; }.mcp-server-node.is-disabled > footer i { background: #a0a6ac; }
.mcp-canvas-empty { position: absolute; z-index: 2; top: 450px; left: 310px; width: 300px; border: 1px dashed #cbd3da; border-radius: 8px; padding: 15px; color: #8b949d; background: rgba(255,255,255,.72); text-align: center; }.mcp-canvas-empty[hidden] { display: none; }.mcp-canvas-empty strong, .mcp-canvas-empty span { display: block; }.mcp-canvas-empty strong { margin-bottom: 5px; color: #53606a; font-size: .55rem; }.mcp-canvas-empty span { font-size: .43rem; }
.mcp-builder-shell { display: grid; min-height: 670px; grid-template-columns: minmax(0, 1fr) var(--mcp-chat-width, min(390px, 37%)); }
.mcp-builder-shell.is-chat-resizing { cursor: col-resize; user-select: none; }
.mcp-chat-dock { position: relative; z-index: 8; display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; border-left: 1px solid #dfe3e7; background: #f7f8fa; }
.mcp-builder-shell.is-chat-resizing .pipeline-chat-resizer span { height: 50px; border-color: #8fa68f; background: #e5eee5; }

@media (max-width: 980px) {
  .mcp-builder-shell { grid-template-columns: minmax(0,1fr) 330px; }
  .mcp-chat-dock .pipeline-chat-resizer { display: none; }
}
@media (max-width: 760px) {
  .mcp-builder-shell { grid-template-columns: 1fr; grid-template-rows: 670px 390px; }
  .mcp-chat-dock { border-top: 1px solid #dfe3e7; border-left: 0; }
}
.storage-catalog-row > span, .folder-orchestration-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-catalog-relation, .folder-orchestration-cron { color: #7b848d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .6rem; }
.storage-catalog-kind { width: fit-content; border: 1px solid rgba(39,122,80,.32); border-radius: 5px; padding: 4px 7px; color: #fff; background: rgba(39,122,80,.2); font-size: .54rem; font-weight: 400; }
.storage-resource-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.pipeline-browser-header-actions .storage-resource-actions button { min-height: 30px; border: 1px solid #d2d8de; border-radius: 6px; padding: 0 10px; color: #58636e; background: #fff; font-size: .48rem; font-weight: 720; }
.pipeline-browser-header-actions .storage-resource-actions button:last-of-type { border-color: transparent; color: #9f5a53; background: transparent; }
#pipeline-folder-pipelines-panel #folder-schedule-form > footer #delete-folder-orchestration { margin-right: auto; border-color: transparent; color: #9f5a53; background: transparent; }

.storage-resource-workspace { min-height: 520px; background: #fff; }
.storage-table-view > header, .storage-sql-view > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e5e8eb; padding: 0 16px; }.storage-table-view > header strong, .storage-table-view > header span, .storage-sql-view > header strong, .storage-sql-view > header span { display: block; }.storage-table-view > header strong, .storage-sql-view > header strong { margin-bottom: 4px; color: #3d4852; font-size: .61rem; }.storage-table-view > header span, .storage-sql-view > header span { color: #89929b; font-size: .47rem; }.storage-sql-view > header code { color: #4e6578; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.storage-table-view > header button, .storage-sql-view > header button { min-height: 30px; border: 1px solid #cfd6dc; border-radius: 6px; padding: 0 10px; color: #5d6973; background: #fff; font-size: .47rem; font-weight: 720; }.storage-sql-view > header button { border-color: #1767bd; color: #fff; background: #2876d2; }
.storage-data-grid { max-width: 100%; overflow: auto; background: #fff; }
.storage-grid-table { width: 100%; min-width: 720px; border-collapse: collapse; color: #5f6973; font-size: .5rem; text-align: left; }.storage-grid-table th, .storage-grid-table td { max-width: 380px; height: 38px; overflow: hidden; border-right: 1px solid #e6e9ec; border-bottom: 1px solid #e6e9ec; padding: 0 11px; text-overflow: ellipsis; white-space: nowrap; }.storage-grid-table th { position: sticky; top: 0; z-index: 1; height: 34px; color: #7e8790; background: #f7f9fa; font-size: .45rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }.storage-grid-table td.is-null { color: #a0a7ae; font-style: italic; }
.storage-data-empty { display: grid; min-height: 250px; place-content: center; gap: 6px; color: #8a939b; text-align: center; }.storage-data-empty strong { color: #4e5963; font-size: .62rem; }.storage-data-empty span { font-size: .48rem; }
.storage-sql-view { padding-bottom: 20px; background: #f6f8fa; }.storage-sql-view > header { background: #fff; }.storage-sql-view textarea { display: block; width: calc(100% - 32px); min-height: 190px; resize: vertical; margin: 16px; border: 1px solid #ccd4da; border-radius: 8px; padding: 14px; color: #d5e2ef; background: #1f2933; outline: none; font: .57rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }.storage-sql-view textarea:focus { border-color: #4b8ac8; box-shadow: 0 0 0 2px rgba(40,118,210,.12); }
.storage-query-status { min-height: 31px; border-top: 1px solid #e1e5e8; border-bottom: 1px solid #e1e5e8; padding: 8px 16px; color: #66717b; background: #fff; font-size: .47rem; }.storage-query-status.is-error { color: #a34b43; background: #fff6f5; }

@media (max-width: 620px) {
  .storage-sql-view textarea { width: calc(100% - 24px); margin: 12px; }
}

/* Dense catalog and table proportions inspired by database editors. */
.pipeline-catalog-row { min-height: 38px; font-size: .69rem; }
.pipeline-catalog-name strong { font-size: .77rem; font-weight: 400; }
.pipeline-catalog-status { padding: 4px 7px; font-size: .54rem; }
.storage-grid-table { font-size: .57rem; }
.storage-grid-table td { height: 30px; font-weight: 400; }
.storage-grid-table th { height: 29px; font-size: .51rem; }
.pipeline-catalog-status { border-radius: 5px; font-size: .54rem; font-weight: 400; }
.pipeline-catalog-status.is-active { border-color: rgba(39,122,80,.32); color: #fff; background: rgba(39,122,80,.2); }
.pipeline-catalog-status.is-inactive { border-color: rgba(170,73,63,.32); color: #fff; background: rgba(170,73,63,.2); }
.pipeline-catalog-row-chevron { justify-self: end; color: rgba(105,117,129,.42); font-size: .94rem; font-weight: 300; line-height: 1; }
.pipeline-catalog-table-head { font-size: .53rem; }
.pipeline-folder-tabs button { font-size: .61rem; }
#pipeline-folder-pipelines-panel .pipeline-catalog-table { border-top: 0; }