:root {
  color-scheme: dark;
  --bg: #070a12;
  --panel: #0d1423;
  --panel-2: #101b31;
  --line: #21365d;
  --text: #eaf2ff;
  --muted: #91a2c2;
  --cyan: #65ffe6;
  --violet: #a88bff;
  --amber: #ffd166;
  --danger: #ff6b8a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 82% -10%, #1b2f66 0, transparent 34%), radial-gradient(circle at 10% 30%, #111d3d 0, transparent 28%), var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
.shell { max-width: 1240px; margin: auto; padding: 24px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0 34px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .04em; }
.brand-mark { width: 28px; height: 28px; border: 1px solid var(--cyan); border-radius: 8px; box-shadow: 0 0 20px #65ffe655; background: linear-gradient(135deg, #65ffe633, #a88bff44); }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a { color: var(--muted); padding: 9px 12px; border-radius: 10px; font-size: 14px; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: #152340; }
.eyebrow { color: var(--cyan); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
h1 { font-size: clamp(42px, 7vw, 84px); line-height: .96; letter-spacing: -.06em; max-width: 820px; margin: 16px 0 22px; }
h2 { letter-spacing: -.03em; margin: 0 0 12px; }
h3 { margin: 8px 0; }
p { color: var(--muted); line-height: 1.65; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: 28px; align-items: center; padding: 46px 0 54px; }
.hero-copy p { max-width: 650px; font-size: 17px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; padding: 11px 15px; background: #111c33; color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; }
.button.primary { color: #06121a; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 24px #65ffe633; }
.button[disabled] { cursor: not-allowed; opacity: .55; }
.graph-panel, .panel, .card { background: linear-gradient(145deg, #111c31dd, #0b1221ee); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 60px #00000033; }
.graph-panel { padding: 14px; min-height: 330px; position: relative; overflow: hidden; }
.graph-panel canvas { width: 100%; height: 300px; display: block; }
.graph-label { position: absolute; top: 20px; left: 22px; color: var(--muted); font-size: 12px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0 56px; }
.metric { padding: 18px; background: #0b1220aa; border: 1px solid #1a2a4b; border-radius: 14px; }
.metric strong { display: block; color: var(--cyan); font-size: 26px; letter-spacing: -.04em; }
.metric span { color: var(--muted); font-size: 12px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 32px 0 18px; }
.section-head p { margin: 0; max-width: 650px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { padding: 20px; min-height: 210px; }
.card:hover { border-color: #3a5d94; transform: translateY(-2px); transition: transform .2s ease, border-color .2s ease; }
.card-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.card p { font-size: 14px; }
.tag, .status { display: inline-flex; align-items: center; width: fit-content; border: 1px solid #2d4776; color: #b8caf1; border-radius: 999px; padding: 5px 9px; font-size: 11px; }
.status.draft, .status.pending { color: var(--amber); border-color: #80682c; }
.status.approved, .status.active { color: var(--cyan); border-color: #287c72; }
.status.revoked, .status.rejected { color: var(--danger); border-color: #82344c; }
.detail { margin-top: 18px; padding-top: 14px; border-top: 1px solid #1a2a4b; }
.detail summary { color: var(--cyan); cursor: pointer; font-size: 13px; }
.two-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.panel { padding: 22px; }
.panel + .panel { margin-top: 18px; }
.list { display: grid; gap: 9px; margin-top: 14px; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px; background: #0a1220; border: 1px solid #172744; border-radius: 10px; color: var(--muted); font-size: 13px; }
.list-row strong { color: var(--text); }
.notice { padding: 14px 16px; border: 1px solid #60502a; border-radius: 12px; background: #241d0d88; color: #ead59b; font-size: 13px; line-height: 1.5; }
.notice.info { border-color: #2a5470; background: #0d223388; color: #b5dcf1; }
.footer { padding: 54px 0 20px; color: #7183a3; font-size: 12px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.empty { padding: 30px; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; }
.error { max-width: 600px; margin: 80px auto; padding: 24px; }
@media (max-width: 900px) { .hero, .two-col { grid-template-columns: 1fr; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .shell { padding: 18px; } .nav { align-items: start; flex-direction: column; } .nav-links { justify-content: start; } .metrics, .grid { grid-template-columns: 1fr; } h1 { font-size: 54px; } }

/* Studio surface: public flexing page and the first admin viewport. */
.public-nav { padding-bottom: 28px; }
.login-link { border: 1px solid #2b4775; border-radius: 999px; padding: 9px 14px; color: var(--text); font-size: 13px; font-weight: 750; }
.login-link:hover, .login-link.ready { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 20px #65ffe622; }
.admin-nav { padding-bottom: 18px; }
.logout-link { color: #ff9bb0 !important; }
.flex-hero { min-height: 72vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(36px, 8vw, 130px); align-items: center; padding: clamp(52px, 10vh, 120px) 0 80px; }
.flex-hero h1 { max-width: 720px; font-size: clamp(56px, 9vw, 122px); }
.flex-hero h1 span { color: var(--cyan); text-shadow: 0 0 32px #65ffe644; }
.hero-lede { max-width: 570px; font-size: clamp(17px, 2vw, 21px) !important; }
.text-link { color: var(--cyan); font-size: 14px; font-weight: 750; padding: 12px 0; }
.presentation-stack { display: grid; gap: 12px; }
.presentation-stack article { padding: 22px 24px; border-left: 1px solid #2d5b86; background: linear-gradient(110deg, #0d192bcc, #0b122188); }
.presentation-stack article:nth-child(2) { border-left-color: var(--violet); margin-left: 28px; }
.presentation-stack article:nth-child(3) { border-left-color: var(--amber); margin-left: 56px; }
.presentation-stack article > span { color: var(--muted); font-size: 10px; letter-spacing: .14em; font-weight: 800; }
.presentation-stack h2 { margin: 10px 0 4px; font-size: 22px; }
.presentation-stack p { margin: 0; font-size: 13px; }
.home-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--line); }
.home-proof div { display: flex; align-items: baseline; gap: 12px; padding: 24px 0; background: var(--bg); }
.home-proof strong { color: var(--cyan); font-size: 32px; }
.home-proof span { color: var(--muted); font-size: 12px; }
.home-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 120px 0 80px; }
.home-bottom h2 { font-size: clamp(28px, 4vw, 52px); }
.home-bottom p { max-width: 520px; align-self: end; }
.page-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 70px 0 54px; }
.page-intro h1 { margin-bottom: 14px; }
.page-intro > div:first-child { max-width: 760px; }
.catalog-stats { display: grid; grid-template-columns: auto auto; gap: 4px 14px; min-width: 160px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #0b1220aa; }
.catalog-stats strong { color: var(--cyan); font-size: 26px; }
.catalog-stats span { color: var(--muted); font-size: 12px; align-self: center; }
.industry-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 46px 0 20px; }
.industry-strip span { color: #b9c8e6; border: 1px solid #20375e; border-radius: 999px; padding: 7px 10px; font-size: 12px; }
.dashboard-graph { min-height: 99vh; margin-inline: calc(50% - 50vw); padding: 52px max(24px, calc((100vw - 3200px) / 2)) 34px; border-top: 1px solid #182d50; border-bottom: 1px solid #182d50; background: radial-gradient(circle at 50% 50%, #10294a66 0, transparent 45%), #060a13aa; }
.dashboard-graph-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.dashboard-graph-head h1 { margin: 12px 0 12px; font-size: clamp(36px, 5vw, 68px); }
.dashboard-graph-head p { max-width: 540px; margin: 0; font-size: 14px; }
.graph-signal { display: flex; gap: 9px; align-items: center; border: 1px solid #214769; border-radius: 999px; color: #b9c8e6; padding: 9px 12px; font-size: 12px; white-space: nowrap; }
.signal-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.graph-stage { position: relative; min-height: calc(99vh - 250px); margin-top: 20px; border: 1px solid #192f52; border-radius: 22px; overflow: hidden; background-image: linear-gradient(#1a325022 1px, transparent 1px), linear-gradient(90deg, #1a325022 1px, transparent 1px); background-size: 48px 48px; }
.graph-stage canvas { width: 100%; height: calc(99vh - 270px); min-height: 420px; display: block; }
.graph-watermark { position: absolute; top: 20px; left: 24px; color: #6882ac; font-size: 10px; letter-spacing: .16em; line-height: 1.8; }
.graph-watermark span { color: var(--cyan); letter-spacing: .08em; }
.analytics-section { padding: 100px 0 30px; min-height: 100vh; }
.analytics-section .section-head { margin-top: 0; }
.analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.analytics-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; min-height: 195px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #111c31dd, #0b1221ee); }
.analytics-card:hover { border-color: var(--cyan); transform: translateY(-2px); transition: transform .2s ease, border-color .2s ease; }
.analytics-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #2c6682; border-radius: 12px; color: var(--cyan); font-size: 12px; font-weight: 850; }
.analytics-card h3 { margin: 14px 0 2px; }
.analytics-card p { margin: 0; font-size: 13px; }
.external-arrow { position: absolute; top: 20px; right: 20px; color: var(--cyan); }
.admin-lower { margin-top: 26px; }
.footer { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.6fr); gap: 50px; align-items: start; padding: 82px 0 26px; border-top: 1px solid #172948; }
.footer-brand strong { color: var(--text); font-size: 18px; letter-spacing: .03em; }
.footer-brand p { max-width: 300px; font-size: 12px; }
.footer-brand > span { color: #607293; font-size: 11px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.footer-links > div { display: grid; align-content: start; gap: 8px; }
.footer-links a { color: var(--muted); font-size: 12px; }
.footer-links a:hover { color: var(--cyan); }
.footer-label { color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 44px)); padding: 14px 16px; border: 1px solid #2d6684; border-radius: 12px; background: #0a1627f2; color: #c8e8f3; box-shadow: 0 12px 36px #0008; font-size: 13px; line-height: 1.45; }
.toast.warning { border-color: #80682c; color: #ead59b; }
.full-graph-console { --graph-cyan: var(--cyan); position: relative; }
.full-graph-console:fullscreen { width: 100%; height: 100%; padding: 18px; overflow: auto; background: radial-gradient(circle at 50% 25%, #172950 0, #070a12 62%); }
.full-graph-console:fullscreen .full-graph-layout { min-height: calc(100vh - 240px); }
.full-graph-console:fullscreen .full-graph-stage, .full-graph-console:fullscreen .studio-full-graph-svg, .full-graph-console:fullscreen .full-graph-inspector { height: calc(100vh - 240px); min-height: calc(100vh - 240px); }
.full-graph-toolbar { display: grid; gap: 14px; padding: 16px; border: 1px solid #1f3a62; border-radius: 18px; background: #091424dd; box-shadow: inset 0 1px #65ffe60d; }
.full-graph-control-row { display: flex; gap: 12px; align-items: end; }
.full-graph-search { position: relative; display: grid; flex: 1; gap: 7px; max-width: 620px; }
.full-graph-search label, .full-graph-filters label { color: #a7b9da; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.full-graph-search input, .full-graph-filters select { width: 100%; border: 1px solid #294a78; border-radius: 9px; background: #0b172a; color: var(--text); padding: 10px 34px 10px 11px; font: inherit; font-size: 13px; }
.full-graph-search button { position: absolute; right: 7px; bottom: 6px; width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: #9bb3d8; font-size: 18px; cursor: pointer; }
.full-graph-camera-controls { display: inline-flex; flex: none; gap: 4px; align-items: center; padding: 3px; border: 1px solid #294a78; border-radius: 10px; background: #0b172a; }
.full-graph-camera-controls button { min-width: 32px; height: 32px; border: 0; border-radius: 7px; background: transparent; color: var(--cyan); cursor: pointer; font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.full-graph-camera-controls button:nth-child(2) { min-width: 52px; color: #d9e7ff; font-size: 11px; }
.full-graph-camera-controls button:hover:not(:disabled), .full-graph-camera-controls button:focus-visible { outline: none; background: #163052; box-shadow: inset 0 0 0 1px #65ffe65c; }
.full-graph-camera-controls button:disabled { color: #4b6287; cursor: default; }
.full-graph-fullscreen { width: 40px; height: 40px; border: 1px solid #294a78; border-radius: 10px; background: #0b172a; color: var(--cyan); cursor: pointer; font-size: 16px; }
.full-graph-fullscreen:hover, .full-graph-fullscreen:focus-visible { border-color: var(--cyan); outline: none; box-shadow: 0 0 18px #65ffe62c; }
.full-graph-search input:focus, .full-graph-filters select:focus { outline: 2px solid #65ffe688; outline-offset: 1px; border-color: var(--cyan); }
.full-graph-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; align-items: end; }
.full-graph-filters label { display: grid; min-width: 0; gap: 6px; }
.full-graph-filters .full-graph-filter.is-advanced { display: none; }
.full-graph-console[data-filters-expanded="true"] .full-graph-filter.is-advanced,
.full-graph-filters .full-graph-filter.is-advanced.is-active { display: grid; }
.full-graph-more { border-style: dashed; color: #a7b9da; }
.full-graph-active-filters { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.full-graph-active-filters[hidden] { display: none; }
.full-graph-active-filters > span { flex: none; color: #6f85aa; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.full-graph-active-filters button { display: inline-flex; min-height: 30px; flex: none; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #295675; border-radius: 999px; background: #0a1d2b; color: #d9e7ff; cursor: pointer; font-size: 11px; }
.full-graph-active-filters button span { color: #7891b6; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.full-graph-active-filters button b { color: var(--cyan); font-size: 15px; }
.button.compact { padding: 9px 12px; min-height: 38px; }
.full-graph-breadcrumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 16px 2px 8px; color: #6f85aa; font-size: 12px; }
.breadcrumb { border: 0; background: transparent; color: var(--cyan); padding: 0; cursor: pointer; font: inherit; }
.breadcrumb.current { color: var(--text); }
.full-graph-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: #8399bd; font-size: 11px; padding: 0 2px 14px; }
.full-graph-meta strong { color: #d9e7ff; font-weight: 700; }
.graph-reconnect { width: fit-content; margin: 0 0 12px; border-color: #ffd16688; color: #ffe2a0; }
.graph-reconnect[hidden] { display: none; }
.full-graph-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 480px); gap: 14px; align-items: start; }
.full-graph-stage { height: clamp(600px, 68vh, 1400px); min-height: 560px; border: 1px solid #1a3964; border-radius: 20px; overflow: hidden; background-color: #07101d; background-image: radial-gradient(circle at 50% 48%, #324b9b19, transparent 45%), linear-gradient(#1a325022 1px, transparent 1px), linear-gradient(90deg, #1a325022 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; box-shadow: inset 0 0 80px #02050da6, 0 18px 50px #0004; }
.studio-full-graph-svg { width: 100%; height: 100%; min-height: 560px; display: block; cursor: grab; touch-action: pan-y; }
.studio-full-graph-svg.is-panning { cursor: grabbing; user-select: none; }
.graph-edge { fill: none; stroke: #5272a3; stroke-width: 1.1; stroke-linecap: round; opacity: .58; transition: stroke .24s ease, opacity .24s ease, stroke-width .24s ease; }
.graph-edge[data-relation="contains"] { stroke-dasharray: 3 8; }
.graph-edge[data-relation="implements"], .graph-edge[data-relation="assigned_to"] { stroke: #65ffe659; }
.graph-edge[data-relation="verified_by"] { stroke: #a88bff66; stroke-dasharray: 2 6; }
.graph-edge[data-relation="learned_from"] { stroke: #ff6fae70; }
.graph-edge[data-relation="orchestrates"], .graph-edge[data-relation="depends_on"] { stroke: #ff86507a; }
.graph-edge[data-relation="blocked_by"] { stroke: #ffd1669e; stroke-dasharray: 3 5; }
.graph-edge.is-active { stroke: var(--cyan); stroke-width: 2; opacity: 1; filter: drop-shadow(0 0 4px #65ffe6b8); }
.graph-edge.is-dimmed { opacity: .08; }
.studio-full-graph-node { cursor: pointer; outline: none; transform-box: view-box; transform-origin: 0 0; transition: transform .52s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, filter .2s ease; }
.studio-graph-node-body { fill: color-mix(in srgb, var(--node-accent) 30%, #071323); stroke: color-mix(in srgb, var(--node-accent) 78%, white); stroke-width: 1; transition: fill .2s ease, stroke-width .2s ease; }
.studio-graph-node-halo { fill: var(--node-accent); opacity: .08; transition: opacity .2s ease, r .2s ease; }
.studio-graph-core-ring { fill: none; stroke: #ecfeff; stroke-width: 1; opacity: .7; }
.studio-graph-core-mark { fill: #ecfeff; font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-anchor: middle; }
.studio-graph-node-label { fill: #dce8ffcc; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .015em; text-anchor: middle; paint-order: stroke; stroke: #02060fde; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.studio-full-graph-node-skill .studio-graph-node-label, .studio-full-graph-node-output .studio-graph-node-label, .studio-full-graph-node-memory .studio-graph-node-label { font-size: 7.4px; fill: #c7d7efb8; }
.studio-full-graph-node-workflow-step .studio-graph-node-label { font-size: 7px; }
.studio-full-graph-node-core .studio-graph-node-body { fill: #14314e; stroke: #ecfeff; stroke-width: 1.6; }
.studio-full-graph-node-output .studio-graph-node-body { fill: #38245c; stroke: #cbb4ff; }
.studio-full-graph-node-memory .studio-graph-node-body { fill: #4c2036; stroke: #ff8ec0; }
.studio-full-graph-node-workflow .studio-graph-node-body, .studio-full-graph-node-workflow-step .studio-graph-node-body { fill: #47271f; stroke: #ff9c72; }
.studio-full-graph-node-human .studio-graph-node-body { fill: #58431b; stroke: #ffd28b; }
.studio-graph-gate-mark { fill: #ffd166; stroke: #fff1bd; stroke-width: 1; }
.studio-full-graph-node.is-hovered, .studio-full-graph-node.is-selected, .studio-full-graph-node:focus-visible { filter: url(#studio-graph-glow); }
.studio-full-graph-node.is-hovered .studio-graph-node-halo, .studio-full-graph-node.is-selected .studio-graph-node-halo, .studio-full-graph-node:focus-visible .studio-graph-node-halo { opacity: .24; }
.studio-full-graph-node.is-selected .studio-graph-node-body, .studio-full-graph-node:focus-visible .studio-graph-node-body { stroke-width: 2; }
.studio-full-graph-node.is-dimmed { opacity: .18; }
.graph-loading { min-height: 560px; display: grid; place-items: center; align-content: center; gap: 12px; color: #a7b9da; font-size: 13px; }
.graph-error { color: #ffb4c4; }
.full-graph-inspector { height: clamp(600px, 68vh, 1400px); min-height: 560px; margin: 0; overflow: auto; }
.full-graph-inspector h2 { overflow-wrap: anywhere; }
.inspector-description { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.inspector-meta { display: grid; gap: 9px; margin: 20px 0; }
.inspector-meta div { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid #172b4a; }
.inspector-meta dt { color: #7288ac; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.inspector-meta dd { margin: 0; color: #dae7ff; font-size: 12px; overflow-wrap: anywhere; }
.inspector-digest { display: grid; gap: 5px; margin: 16px 0; }
.inspector-digest span { color: #7288ac; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.inspector-digest code { color: #72efb4; font-size: 10px; overflow-wrap: anywhere; }
.inspector-relations, .inspector-directory { display: grid; gap: 8px; }
.inspector-relations > .eyebrow, .inspector-directory > .eyebrow { margin-top: 12px; }
.inspector-relations button, .inspector-directory button { display: grid; gap: 3px; border: 1px solid #203b64; border-radius: 9px; padding: 9px 10px; background: #0a1526; color: var(--text); text-align: left; cursor: pointer; }
.inspector-relations button:hover, .inspector-directory button:hover, .inspector-directory button[aria-current="true"] { border-color: var(--cyan); }
.inspector-relations button span { color: #7c94bb; font-size: 10px; text-transform: uppercase; }
.inspector-relations button strong { font-size: 12px; overflow-wrap: anywhere; }
.inspector-directory { margin-top: 10px; }
.inspector-directory button { grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; }
.inspector-directory button i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.inspector-directory button span { display: grid; gap: 2px; min-width: 0; }
.inspector-directory button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.inspector-directory button small { color: #7188ad; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.inspector-directory button b { color: var(--cyan); font-weight: 500; }
.full-graph-actions { display: flex; gap: 12px; align-items: center; min-height: 54px; padding-top: 12px; color: #8298bb; font-size: 12px; }
.full-graph-actions [hidden] { display: none !important; }
.graph-error { color: #ff9eb4; }
@media (max-width: 900px) { .flex-hero, .home-bottom { grid-template-columns: 1fr; } .presentation-stack { max-width: 680px; } .analytics-grid { grid-template-columns: 1fr; } .dashboard-graph-head, .page-intro { align-items: start; flex-direction: column; } .graph-signal { align-self: start; } }
@media (max-width: 900px) { .full-graph-layout { grid-template-columns: 1fr; } .full-graph-filters { grid-template-columns: repeat(3, minmax(120px, 1fr)); } .full-graph-inspector { height: auto; min-height: 0; max-height: none; } }
@media (max-width: 620px) { .home-proof { grid-template-columns: 1fr; } .home-proof div { padding: 16px 0; } .presentation-stack article:nth-child(2), .presentation-stack article:nth-child(3) { margin-left: 0; } .footer, .footer-links { grid-template-columns: 1fr; } .dashboard-graph { padding: 34px 14px 28px; } .graph-stage canvas { min-height: 520px; } .flex-hero h1 { font-size: 62px; } .full-graph-toolbar { padding: 12px; } .full-graph-control-row { align-items: stretch; flex-wrap: wrap; } .full-graph-search { max-width: none; flex-basis: 100%; } .full-graph-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .full-graph-search input, .full-graph-filters select { min-width: 0; padding-right: 24px; } .studio-full-graph-svg, .full-graph-stage { height: clamp(390px, 125vw, 520px); min-height: 390px; } .full-graph-meta { gap: 8px 12px; } .full-graph-active-filters { margin-inline: -2px; } }
@media (max-width: 380px) { .full-graph-filters { grid-template-columns: 1fr; } .dashboard-graph { padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .studio-full-graph-node, .graph-edge { transition: none; } }

/* ---- n8n package catalogue ------------------------------------------------ */
.pkg-controls { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.pkg-search, .pkg-select {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px;
}
.pkg-search { flex: 1 1 320px; }
.pkg-search::placeholder { color: var(--muted); }
.pkg-search:focus-visible, .pkg-select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; }
.chip-label {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-right: 3px;
}
.chip-row .chip-label:not(:first-child) { margin-left: 14px; }
.chip {
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--cyan); }
.chip.on { background: #152340; color: var(--cyan); border-color: var(--cyan); }
.chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pkg-count {
  font-size: 12.5px; color: var(--muted); margin: 16px 0 12px;
  font-variant-numeric: tabular-nums;
}
.pkg-grid { align-items: start; }
.pkg-card h3 { font-size: 17px; margin: 6px 0 6px; letter-spacing: -.01em; }
.pkg-card p { font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }
.tag.arch-cron { border-color: #2b4a7d; color: #8fb6ff; }
.tag.arch-webhook { border-color: #4a3a7d; color: var(--violet); }
.pkg-needs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }
.need {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: #101b31; border: 1px solid var(--line); color: var(--muted);
}
.need.twin { border-color: #6b5a2a; color: var(--amber); }
.pkg-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 11px;
}
.rungs { display: flex; gap: 4px; }
.rung {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 6px;
  border-radius: 4px; border: 1px solid var(--line); color: var(--muted); cursor: default;
}
.rung.ok { color: var(--cyan); border-color: #1f5f6b; background: #0d2429; }
.rung.gap { color: var(--amber); border-color: #5a4a1e; }
.rung.na { opacity: .4; }
.pkg-meta { font-size: 11px; color: var(--faint, var(--muted)); font-variant-numeric: tabular-nums; }
.empty {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 26px; color: var(--muted); text-align: center; grid-column: 1 / -1;
}
.pkg-note { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; max-width: 74ch; border-left: 2px solid var(--amber); padding-left: 12px; }
.automation-packages { margin-top: 56px; scroll-margin-top: 24px; }
.automation-packages > .section-head { align-items: end; }
.automation-packages > .section-head p { max-width: 66ch; color: var(--muted); line-height: 1.55; }
.guide-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }

/* ---- preview modal -------------------------------------------------------- */
.pkg-card { cursor: pointer; transition: border-color .15s ease; }
.pkg-card:hover, .pkg-card:focus-visible { border-color: var(--cyan); outline: none; }
.modal-host { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3, 6, 14, .78); backdrop-filter: blur(3px); }
.modal {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px; max-width: 620px; width: 100%;
  max-height: 88vh; overflow-y: auto; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.modal h2 { font-size: 24px; letter-spacing: -.02em; margin: 6px 0 10px; }
.modal-problem { font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.modal-x {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.modal-x:hover { color: var(--text); background: #152340; }
.modal-x:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.modal-demo { margin: 0 0 12px; }
.phone {
  background: #0a1120; border: 1px solid var(--line); border-radius: 18px; padding: 14px; max-width: 380px;
}
.phone-bar {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: 9px; margin-bottom: 12px; font-weight: 700;
}
.bubble {
  background: #17325c; color: var(--text); border-radius: 14px 14px 14px 4px;
  padding: 12px 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.phone-foot { font-size: 10.5px; color: var(--muted); margin-top: 10px; letter-spacing: .04em; }
.mailcard { background: #0a1120; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.mail-subject { font-weight: 700; font-size: 14.5px; margin-bottom: 10px; }
.mail-body { font-size: 13.5px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.evidence {
  font-size: 12px; padding: 9px 12px; border-radius: 8px; margin: 0 0 18px;
  border: 1px solid var(--line); color: var(--muted);
}
.evidence.ok { border-color: #1f5f6b; color: var(--cyan); background: #0d2429; }
.evidence.gap { border-color: #5a4a1e; color: var(--amber); }
.modal-facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.modal-facts > div { display: flex; justify-content: space-between; gap: 14px; background: var(--panel-2); padding: 9px 13px; font-size: 12.5px; }
.modal-facts span { color: var(--muted); }
.modal-facts strong { font-weight: 600; text-align: right; }
.modal-facts .mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; letter-spacing: .02em; }
.modal-note { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; border-left: 2px solid var(--amber); padding-left: 11px; }

/* ---- data contract in the modal ------------------------------------------- */
.contract { margin: 18px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.contract summary {
  cursor: pointer; padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--text);
  list-style: none;
}
.contract summary::-webkit-details-marker { display: none; }
.contract summary::before { content: "▸ "; color: var(--cyan); }
.contract[open] summary::before { content: "▾ "; }
.contract summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.contract-shape { font-size: 12px; color: var(--muted); margin: 0 14px 8px; }
.contract-rules { margin: 0 14px 12px; padding-left: 16px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.contract-rules li { margin-bottom: 5px; }
.contract .twrap { margin: 0 14px 14px; border-radius: 6px; }
.contract-table { font-size: 11.5px; }
.contract-table td, .contract-table th { padding: 6px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.contract-table tr.grp th {
  background: #101b31; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); font-weight: 700;
}
.contract-table .mono { font-family: ui-monospace, Consolas, monospace; }
.contract-table .dim { color: var(--muted); }
.gate {
  font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--amber);
  border: 1px solid #5a4a1e; border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap;
}

/* ---- per-package how-it-works and installation guide --------------------- */
.guide { margin: 18px 0 0; border: 1px solid #1f5f6b; border-radius: 10px; background: #0d2429; }
.guide summary {
  cursor: pointer; padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--text);
  list-style: none;
}
.guide summary::-webkit-details-marker { display: none; }
.guide summary::before { content: "▸ "; color: var(--cyan); }
.guide[open] summary::before { content: "▾ "; }
.guide summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.guide-flow { margin: 0 14px 14px; font-size: 11.5px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.guide-flow strong { color: var(--text); }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 14px 16px; }
.guide-grid > div { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.guide-grid h4 { margin: 0 0 7px; font-size: 10.5px; color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; }
.guide-grid ul, .guide-grid ol { margin: 0; padding-left: 17px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.guide-grid li { margin-bottom: 5px; }
.guide-grid .dim { margin: 0; color: var(--muted); font-size: 11.5px; }
.guide > .text-link { display: inline-block; margin: 0 14px 15px; }
@media (max-width: 620px) { .guide-grid { grid-template-columns: 1fr; } .automation-packages > .section-head { align-items: start; } }

/* ---- prepare-for-a-client form -------------------------------------------- */
.modal-actions { margin: 18px 0 0; }
.fld { display: block; margin: 0 0 13px; }
.fld > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.fld > span.mono { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--cyan); }
.fld input {
  width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 13px;
}
.fld input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.fld em { display: block; font-size: 11px; color: var(--faint, var(--muted)); font-style: normal; margin-top: 4px; }
.fld-group { border: 1px solid var(--line); border-radius: 10px; padding: 13px; margin: 0 0 14px; background: var(--panel-2); }
.fld-head {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
  font-weight: 700; margin-bottom: 11px;
}
.notice.info {
  font-size: 12px; line-height: 1.55; color: var(--muted); background: var(--accent-w, #17282c);
  border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 14px;
}
.steps { margin: 14px 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.steps strong { color: var(--text); font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; }
.button.primary {
  background: #17325c; color: var(--text); border: 1px solid var(--cyan); border-radius: 9px;
  padding: 10px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-block; text-decoration: none;
}
.button.primary:hover { background: #1d3f72; }
.button.primary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.form-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.button {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 15px; font: inherit; font-size: 13px; cursor: pointer;
}
.button:hover { color: var(--text); border-color: var(--cyan); }
.button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fld em.mono { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--faint, var(--muted)); opacity: .75; }
.fld-note { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }

/* ---- per-client editor ---------------------------------------------------- */
.editor summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text); list-style: none;
  margin: -13px -13px 13px; padding: 13px;
}
.editor summary::-webkit-details-marker { display: none; }
.editor summary::before { content: "▸ "; color: var(--cyan); }
.editor[open] summary::before { content: "▾ "; }
.editor summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.fld .row { display: flex; gap: 8px; align-items: center; }
.fld select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 13px;
}
.fld textarea {
  width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 13px; line-height: 1.55;
  resize: vertical;
}
.fld textarea:focus-visible, .fld select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.fld-note code, .fld span code {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--cyan);
  background: #101b31; border-radius: 4px; padding: 1px 5px;
}

/* ---- catalogue, rebuilt around the task ----------------------------------- */
.page-intro.compact { padding: 8px 0 26px; }
.page-intro.compact h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.05; margin: 10px 0 12px; max-width: 22ch; }
.page-intro.compact p { max-width: 68ch; font-size: 14px; }

.picker { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 16px; }
.picker label { display: block; }
.picker span {
  display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); font-weight: 700; margin-bottom: 7px;
}
.picker select, .picker input {
  width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 11px; padding: 14px 16px; font: inherit; font-size: 15px;
}
.picker select { cursor: pointer; }
.picker select:focus-visible, .picker input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 720px) { .picker { grid-template-columns: 1fr; } }

.refine { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 0 0 6px; }
.start-hint {
  font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 16px;
  border-left: 2px solid var(--cyan); padding-left: 12px; max-width: 70ch;
}
.job-group { margin: 0 0 30px; }
.job-head {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px;
}
.job-head span {
  font-size: 11px; color: var(--cyan); background: #101b31; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; letter-spacing: 0;
}

.pkg-problem { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 0 0 12px; }
.pkg-id { font-size: 11.5px; color: var(--muted); margin-bottom: 14px; line-height: 1.6; }
.pkg-name { color: var(--text); font-weight: 600; }
.pkg-sep { opacity: .4; margin: 0 5px; }
.twinish { color: var(--amber); }
.verified { font-size: 11px; color: var(--cyan); cursor: default; }
.pkg-open { font-size: 11.5px; color: var(--muted); }
.pkg-card:hover .pkg-open, .pkg-card:focus-visible .pkg-open { color: var(--cyan); }