.system-atlas-view {
  --atlas-ink: #17223a;
  --atlas-muted: #667085;
  --atlas-line: #d8deeb;
  --atlas-panel: #fff;
  --atlas-indigo: #4c5bd4;
  min-height: 100%;
  padding: clamp(18px, 3vw, 34px);
  color: var(--atlas-ink);
  background: linear-gradient(155deg, #f2f4ff 0, #f7f9fc 38%, #eef8f7 100%);
}
.system-atlas-view button, .system-atlas-view input { font: inherit; }
.system-atlas-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.system-atlas-kicker { margin: 0 0 6px; color: var(--atlas-indigo); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.system-atlas-header h1 { margin: 0; max-width: 760px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; line-height: 1.02; }
.system-atlas-intro { max-width: 790px; margin: 11px 0 0; color: var(--atlas-muted); font-size: 15px; line-height: 1.5; }
.system-atlas-header-meta, .system-atlas-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.system-atlas-badge { display: inline-flex; min-height: 28px; align-items: center; padding: 3px 10px; border: 1px solid var(--atlas-line); border-radius: 999px; background: white; color: #46516a; font-size: 11px; font-weight: 750; text-transform: capitalize; }
.system-atlas-badge.is-live, .system-atlas-badge.is-fresh { border-color: #9bd7c1; background: #edfbf5; color: #176b4b; }
.system-atlas-badge.is-experimental, .system-atlas-badge.is-warning, .system-atlas-badge.is-stale { border-color: #f0ca80; background: #fff8e8; color: #81510a; }
.system-atlas-badge.is-deprecated, .system-atlas-badge.is-failed, .system-atlas-badge.is-conflicted { border-color: #efb1b4; background: #fff0f1; color: #9b2930; }
.system-atlas-update, .system-atlas-open-tool { min-height: 40px; border: 0; border-radius: 10px; padding: 0 15px; background: var(--atlas-indigo); color: white; font-weight: 750; cursor: pointer; }
.system-atlas-controls { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 14px; align-items: end; padding: 13px; border: 1px solid var(--atlas-line); border-radius: 16px; background: rgba(255, 255, 255, .93); box-shadow: 0 9px 28px rgba(28, 39, 67, .06); }
.system-atlas-search { display: grid; gap: 5px; color: #4a556d; font-size: 11px; font-weight: 750; }
.system-atlas-search input { width: 100%; min-height: 44px; border: 1px solid #c9d1e2; border-radius: 10px; padding: 9px 12px; background: white; color: var(--atlas-ink); }
.system-atlas-filter-group { display: grid; gap: 5px; }
.system-atlas-filter-label { color: #4a556d; font-size: 11px; font-weight: 750; }
.system-atlas-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.system-atlas-filter-chip, .system-atlas-reset { min-height: 40px; border: 1px solid #cfd6e5; border-radius: 999px; padding: 0 13px; background: white; color: #46516a; font-size: 12px; font-weight: 750; cursor: pointer; }
.system-atlas-filter-chip:hover, .system-atlas-filter-chip:focus-visible, .system-atlas-filter-chip.is-active { border-color: var(--atlas-indigo); background: #eef0ff; color: #303da8; outline: 0; }
.system-atlas-reset { border-radius: 10px; }
.system-atlas-more-filters { grid-column: 1 / -1; border-top: 1px solid #e5e8ef; padding-top: 9px; }
.system-atlas-more-filters summary { width: max-content; min-height: 32px; color: #46516a; cursor: pointer; font-size: 12px; font-weight: 750; }
.system-atlas-advanced-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 14px; padding-top: 8px; }
.system-atlas-notice { margin: 0 0 12px; padding: 10px 13px; border: 1px solid #efb1b4; border-radius: 12px; background: #fff0f1; color: #8b2930; }
.system-atlas-notice.is-warning { border-color: #f0ca80; background: #fff8e8; color: #754909; }
.system-atlas-explorer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 14px; margin-top: 14px; align-items: start; }
.system-atlas-map-pane, .system-atlas-detail { min-width: 0; border: 1px solid var(--atlas-line); border-radius: 18px; background: var(--atlas-panel); box-shadow: 0 14px 38px rgba(28, 39, 67, .08); }
.system-atlas-map-pane { padding: clamp(14px, 2vw, 22px); }
.system-atlas-landscape-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 13px; color: var(--atlas-muted); font-size: 13px; }
.system-atlas-landscape-heading strong { color: var(--atlas-ink); font-size: 16px; }
.system-atlas-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; font-weight: 700; }
.system-atlas-legend .is-live { color: #16835c; }
.system-atlas-legend .is-experimental { color: #a26a09; }
.system-atlas-legend .is-planned { color: #667085; }
.system-atlas-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 15px; padding: 11px 14px; border-radius: 12px; background: linear-gradient(90deg, #eef0ff, #eaf8f7); color: #35415a; font-size: 12px; font-weight: 800; text-align: center; }
.system-atlas-flow b { color: var(--atlas-indigo); font-size: 17px; }
.system-atlas-domain-grid { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 11px; }
.system-atlas-domain-card { --domain-color: #6874da; overflow: hidden; border: 1px solid #dfe3ed; border-top: 4px solid var(--domain-color); border-radius: 14px; background: #fbfcff; transition: border-color .15s ease, box-shadow .15s ease; }
.system-atlas-domain-card[data-atlas-domain="orchestration"] { --domain-color: #5364db; grid-column: 1 / -1; background: #f8f8ff; }
.system-atlas-domain-card[data-atlas-domain="agents"] { --domain-color: #7e54c7; }
.system-atlas-domain-card[data-atlas-domain="recipes"] { --domain-color: #3279b8; }
.system-atlas-domain-card[data-atlas-domain="skills"] { --domain-color: #168694; }
.system-atlas-domain-card[data-atlas-domain="integrations"] { --domain-color: #21835f; }
.system-atlas-domain-card[data-atlas-domain="governance"] { --domain-color: #b16a26; }
.system-atlas-domain-card[data-atlas-domain="infrastructure"] { --domain-color: #546176; }
.system-atlas-domain-card.is-active { border-color: var(--domain-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--domain-color) 20%, transparent); }
.system-atlas-domain-header { display: flex; width: 100%; min-height: 68px; align-items: center; justify-content: space-between; gap: 12px; border: 0; padding: 12px 13px 9px; background: transparent; color: inherit; text-align: left; }
.system-atlas-domain-header[data-atlas-item] { cursor: pointer; }
.system-atlas-domain-header span { display: grid; gap: 3px; }
.system-atlas-domain-header strong { font-size: 15px; }
.system-atlas-domain-header small { color: var(--atlas-muted); font-size: 11px; line-height: 1.35; }
.system-atlas-domain-count { display: grid; min-width: 28px; min-height: 28px; place-items: center; border-radius: 999px; padding: 4px 8px; background: #eef1f6; color: #4f5b72; font-size: 10px; white-space: nowrap; }
.system-atlas-capabilities { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 13px; }
.system-atlas-capability { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; border: 1px solid #d7dce7; border-radius: 9px; padding: 6px 9px; background: white; color: #344057; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.system-atlas-capability:hover, .system-atlas-capability:focus-visible { border-color: var(--domain-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--domain-color) 16%, transparent); outline: 0; }
.system-atlas-capability.is-selected { border-color: var(--domain-color); background: color-mix(in srgb, var(--domain-color) 10%, white); color: #17223a; }
.system-atlas-capability.is-connected:not(.is-selected) { border-style: dashed; border-color: var(--domain-color); }
.system-atlas-capability-dot { color: #8a94a8; font-size: 9px; }
.system-atlas-depth-count { margin-left: 2px; color: #687388; font-size: 9px; font-weight: 800; }
.system-atlas-capability.is-live .system-atlas-capability-dot { color: #1b9a6c; }
.system-atlas-capability.is-experimental .system-atlas-capability-dot { color: #d28a15; }
.system-atlas-capability.is-deprecated .system-atlas-capability-dot { color: #c24f59; }
.system-atlas-domain-links { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 8px 12px; border-top: 1px solid #e5e8ef; color: #687388; font-size: 10px; font-weight: 700; }
.system-atlas-zero { padding: 48px 20px; text-align: center; }
.system-atlas-zero h2 { margin-bottom: 7px; }
.system-atlas-zero button { min-height: 44px; }
.system-atlas-detail { position: sticky; top: 12px; max-height: calc(100vh - 48px); overflow: auto; padding: 21px; }
.system-atlas-detail h2 { margin: 6px 0 10px; font-size: 26px; letter-spacing: -.03em; }
.system-atlas-detail h3 { margin: 22px 0 8px; color: #35415a; font-size: 12px; letter-spacing: .045em; text-transform: uppercase; }
.system-atlas-detail p, .system-atlas-detail li { color: #4f5b72; font-size: 13px; line-height: 1.52; }
.system-atlas-detail-purpose { color: var(--atlas-ink) !important; font-size: 15px !important; }
.system-atlas-detail-overview { margin-top: 14px; padding: 1px 12px 4px; border-left: 3px solid #c8cdf5; background: #f8f8ff; }
.system-atlas-detail-overview h3 { margin-top: 13px; }
.system-atlas-journey { margin-top: 18px; padding: 14px; border: 1px solid #cbd3ee; border-radius: 14px; background: linear-gradient(155deg, #f7f8ff 0%, #f2f8fb 100%); }
.system-atlas-journey .system-atlas-journey-kicker { margin: 0 0 3px; color: #6674ba; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.system-atlas-journey h3 { margin: 0 0 7px; color: var(--atlas-ink); font-size: 16px; letter-spacing: -.015em; text-transform: none; }
.system-atlas-journey-summary { margin: 0 0 13px; }
.system-atlas-journey-track { display: grid; justify-items: stretch; }
.system-atlas-journey-stage, .system-atlas-journey-branch { width: 100%; border: 1px solid #d7dcef; border-radius: 11px; background: rgba(255, 255, 255, .9); color: inherit; text-align: left; cursor: pointer; }
.system-atlas-journey-stage { display: grid; gap: 3px; padding: 10px 11px; border-left-width: 4px; }
.system-atlas-journey-stage.is-human { border-left-color: #845ec2; }
.system-atlas-journey-stage.is-orchestrator { border-left-color: #3867d6; }
.system-atlas-journey-stage.is-manager, .system-atlas-journey-stage.is-reviewer { border-left-color: #168785; }
.system-atlas-journey-stage.is-specialist { border-left-color: #d27a21; }
.system-atlas-journey-stage.is-agentos, .system-atlas-journey-stage.is-runtime { border-left-color: #657084; }
.system-atlas-journey-stage:hover, .system-atlas-journey-stage:focus-visible, .system-atlas-journey-branch:hover, .system-atlas-journey-branch:focus-visible { border-color: #7786d5; background: #fff; outline: 2px solid rgba(103, 119, 207, .17); }
.system-atlas-journey-step { color: #68758e; font-size: 9px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.system-atlas-journey-stage strong, .system-atlas-journey-branch strong { color: var(--atlas-ink); font-size: 12px; }
.system-atlas-journey-stage small, .system-atlas-journey-branch small { color: #5e6a81; font-size: 10px; font-weight: 520; line-height: 1.42; }
.system-atlas-journey-arrow { display: grid; min-height: 38px; grid-template-columns: 18px 1fr; align-items: center; padding: 2px 11px; color: #6d7890; }
.system-atlas-journey-arrow b { color: #7281c7; font-size: 17px; text-align: center; }
.system-atlas-journey-arrow span { font-size: 9px; font-weight: 750; letter-spacing: .025em; }
.system-atlas-journey h4 { margin: 16px 0 7px; color: #46516a; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.system-atlas-journey-branches { display: grid; gap: 7px; }
.system-atlas-journey-branch { display: grid; gap: 3px; padding: 9px 10px; }
.system-atlas-journey-branch .system-atlas-badge { justify-self: start; }
.system-atlas-journey-branch.is-requests_changes { border-left: 3px solid #d27a21; }
.system-atlas-journey-branch.is-escalates { border-left: 3px solid #b54b63; }
.system-atlas-journey-branch.is-recovers { border-left: 3px solid #516bc0; }
.system-atlas-deep-dives { display: grid; gap: 8px; }
.system-atlas-deep-dive { overflow: hidden; border: 1px solid var(--atlas-line); border-radius: 11px; background: #fbfcff; }
.system-atlas-deep-dive summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; cursor: pointer; list-style-position: inside; }
.system-atlas-deep-dive summary > span:first-of-type { display: grid; flex: 1; gap: 3px; }
.system-atlas-deep-dive summary strong { color: var(--atlas-ink); font-size: 13px; }
.system-atlas-deep-dive summary small { color: var(--atlas-muted); font-size: 11px; font-weight: 500; line-height: 1.38; }
.system-atlas-deep-dive[open] { border-color: #b8c0ec; background: #fff; }
.system-atlas-deep-dive-body { padding: 0 12px 12px; }
.system-atlas-deep-dive-body h4 { margin: 14px 0 5px; color: #46516a; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.system-atlas-deep-dive-body ul { margin-top: 5px; padding-left: 19px; }
.system-atlas-deep-dive-sources { margin-top: 14px; color: #788397 !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px !important; overflow-wrap: anywhere; }
.system-atlas-detail-eyebrow { margin: 0 !important; color: #737e92 !important; font-size: 10px !important; font-weight: 800; letter-spacing: .09em; }
.system-atlas-detail-empty { max-width: 260px; }
.system-atlas-open-tool { width: 100%; margin-top: 12px; cursor: pointer; }
.system-atlas-impact { display: inline-flex; margin: 0; border-radius: 999px; padding: 5px 9px; background: #fff3e5; color: #955811 !important; font-size: 11px !important; font-weight: 800; text-transform: capitalize; }
.system-atlas-relationships { display: grid; gap: 7px; }
.system-atlas-relation { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--atlas-line); border-radius: 10px; background: #f8f9fc; color: inherit; text-align: left; cursor: pointer; }
.system-atlas-relation small { color: var(--atlas-muted); }
.system-atlas-limitations, .system-atlas-evidence { margin-top: 18px; padding-top: 11px; border-top: 1px solid var(--atlas-line); }
.system-atlas-limitations summary, .system-atlas-evidence summary { min-height: 44px; cursor: pointer; font-size: 12px; font-weight: 750; }
.system-atlas-detail-back { display: none; min-height: 44px; }
.system-atlas-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 1100px) {
  .system-atlas-controls { grid-template-columns: 1fr; }
  .system-atlas-explorer { grid-template-columns: minmax(0, 1fr) 300px; }
  .system-atlas-domain-grid { grid-template-columns: 1fr; }
  .system-atlas-domain-card[data-atlas-domain="orchestration"] { grid-column: auto; }
}
@media (max-width: 760px) {
  .system-atlas-view { padding: 16px 11px; }
  .system-atlas-header { display: block; }
  .system-atlas-header-meta { margin-top: 11px; }
  .system-atlas-filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .system-atlas-filter-chip { flex: 0 0 auto; }
  .system-atlas-advanced-filter-grid { grid-template-columns: 1fr; }
  .system-atlas-explorer { position: relative; display: block; }
  .system-atlas-landscape-heading { align-items: flex-start; }
  .system-atlas-legend { display: grid; gap: 2px; }
  .system-atlas-flow { grid-template-columns: 1fr; }
  .system-atlas-flow b { transform: rotate(90deg); }
  .system-atlas-detail { display: none; position: fixed; inset: 10px; z-index: 20; max-height: none; border-radius: 15px; box-shadow: 0 20px 80px rgba(21, 29, 52, .35); }
  .system-atlas-detail.is-open { display: block; }
  .system-atlas-detail-back { display: inline-flex; }
  .system-atlas-capability, .system-atlas-relation, .system-atlas-detail button, .system-atlas-controls button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .system-atlas-view *, .system-atlas-view *::before, .system-atlas-view *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}