:root {
  --ink: #24202b;
  --muted: #716b7b;
  --line: #e9e4ef;
  --canvas: #fbfaff;
  --surface: #ffffff;
  --purple: #7546f6;
  --purple-dark: #5330b5;
  --purple-soft: #f0ebff;
  --pink: #f54da6;
  --pink-soft: #fff0f8;
  --green: #147d62;
  --green-soft: #e8f8f1;
  --blue-soft: #eff7ff;
  --shadow: 0 16px 42px rgba(61, 35, 81, 0.09);
  --radius: 8px;
}

* { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 14px/1.48 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(117, 70, 246, 0.35); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 0 max(24px, calc((100% - 1280px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 17px; font-weight: 760; text-decoration: none; }
.brand small { padding-left: 9px; border-left: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 600; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 14px; }
.topbar-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #21a174; box-shadow: 0 0 0 4px #e8f8f0; }

.page-shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 76px; }
.intro { max-width: 880px; }
.eyebrow, .section-kicker { margin: 0 0 8px; color: var(--purple); font-size: 11px; font-weight: 780; letter-spacing: 0.75px; }
h1 { font-size: 42px; line-height: 1.08; letter-spacing: 0; }
h2 { font-size: 25px; line-height: 1.18; letter-spacing: 0; }
h3 { font-size: 16px; line-height: 1.25; }
.intro > p:last-of-type { max-width: 810px; margin-top: 14px; color: var(--muted); font-size: 16px; }

.intro-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 980px; margin-top: 26px; }
.intro-facts span { display: block; min-width: 0; padding-left: 13px; border-left: 2px solid #dacdff; color: var(--muted); font-size: 12px; line-height: 1.42; }
.intro-facts b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 12px; }

.section-tabs { display: flex; gap: 8px; margin-top: 34px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab { border: 1px solid transparent; border-radius: 6px; padding: 9px 14px; background: transparent; color: var(--muted); font-weight: 650; }
.tab:hover { border-color: #d8cbea; color: var(--purple-dark); }
.tab.is-active { background: var(--purple); color: #fff; box-shadow: 0 8px 16px rgba(117, 70, 246, 0.19); }

.architecture-view { display: none; padding-top: 28px; }
.architecture-view.is-visible { display: block; }
.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.view-note { max-width: 360px; color: var(--muted); font-size: 12px; text-align: right; }

.architecture-map { display: grid; gap: 7px; }
.arch-layer { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 13px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 7px 18px rgba(61, 35, 81, 0.035); }
.layer-heading { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 6px; background: #f7f4ff; }
.layer-heading > span { display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border-radius: 6px; background: #e8dfff; color: var(--purple-dark); font-size: 10px; font-weight: 800; }
.layer-heading b, .layer-heading small { display: block; }
.layer-heading b { color: #342543; font-size: 13px; line-height: 1.2; }
.layer-heading small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.source-layer .layer-heading { background: #fff3fa; }
.source-layer .layer-heading > span { background: #ffe0f0; color: #b13076; }
.integration-layer .layer-heading { background: var(--blue-soft); }
.integration-layer .layer-heading > span { background: #dceeff; color: #2d6c9e; }
.core-layer .layer-heading { background: #f3efff; }
.ai-layer .layer-heading { background: #382550; }
.ai-layer .layer-heading b, .ai-layer .layer-heading small { color: #fff; }
.ai-layer .layer-heading small { opacity: 0.76; }
.ai-layer .layer-heading > span { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; }
.output-layer .layer-heading { background: #ecfaf5; }
.output-layer .layer-heading > span { background: #d8f3e9; color: #147d62; }

.layer-nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.layer-nodes.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arch-module { min-width: 0; padding: 12px; border: 1px solid #ece5ef; border-radius: 7px; background: #fff; color: var(--ink); text-align: left; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }
.arch-module:hover, .arch-module.is-active { border-color: #ae90f4; box-shadow: 0 8px 16px rgba(75, 45, 102, 0.1); transform: translateY(-1px); }
.arch-module b, .arch-module span { display: block; }
.arch-module b { font-size: 12px; line-height: 1.25; }
.arch-module span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.arch-module.source { background: #fffdfd; }
.arch-module.integration { background: #fcfeff; }
.arch-module.core { background: #fdfcff; }
.arch-module.ai { border-color: #ded2fb; background: #faf8ff; }
.arch-module.output { background: #fcfffe; }
.layer-bridge { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 19px; color: #9579dd; }
.layer-bridge span { font-size: 17px; line-height: 1; }
.layer-bridge small { color: #927aa9; font-size: 10px; }

.module-popover { position: fixed; z-index: 30; width: min(430px, calc(100vw - 32px)); max-height: min(330px, calc(100vh - 32px)); overflow: auto; padding: 18px 42px 17px 18px; border: 1px solid rgba(221, 207, 255, 0.58); border-radius: 9px; background: #282032; color: #fff; box-shadow: 0 18px 40px rgba(38, 23, 54, 0.28); }
.module-popover[hidden] { display: none; }
.module-popover::before { content: ""; position: absolute; left: calc(var(--popover-arrow-x, 50%) - 8px); width: 16px; height: 16px; background: #282032; transform: rotate(45deg); }
.module-popover[data-placement="bottom"]::before { top: -8px; border-top: 1px solid rgba(221, 207, 255, 0.58); border-left: 1px solid rgba(221, 207, 255, 0.58); }
.module-popover[data-placement="top"]::before { bottom: -8px; border-right: 1px solid rgba(221, 207, 255, 0.58); border-bottom: 1px solid rgba(221, 207, 255, 0.58); }
.module-popover .section-kicker { margin: 0; color: #d9ccff; }
.module-popover h3 { margin-top: 5px; font-size: 16px; }
.module-popover > p { margin-top: 9px; color: #d8d0df; font-size: 12px; line-height: 1.5; }
.module-popover ul { display: grid; gap: 6px; margin: 13px 0 0; padding-left: 17px; color: #f1ebf7; font-size: 12px; line-height: 1.45; }
.module-popover-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 18px; line-height: 1; }
.module-popover-close:hover { background: rgba(255, 255, 255, 0.16); }

.architecture-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.architecture-rules article { display: flex; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.architecture-rules span { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 5px; background: var(--pink-soft); color: #bf3780; font-size: 9px; font-weight: 800; }
.architecture-rules b { display: block; font-size: 11px; }
.architecture-rules p { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }

.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.flow-card { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-align: left; transition: border-color 0.16s ease, box-shadow 0.16s ease; }
.flow-card:hover, .flow-card.is-active { border-color: #bda8fa; background: #faf8ff; box-shadow: 0 8px 20px rgba(77, 45, 102, 0.08); }
.flow-card strong { font-size: 13px; line-height: 1.25; }
.flow-card small { grid-column: 2; color: var(--muted); font-size: 10px; line-height: 1.35; }
.flow-number { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--purple-soft); color: var(--purple-dark); font-size: 10px; font-weight: 750; }
.flow-canvas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.flow-node { position: relative; min-height: 124px; padding: 14px; border: 1px solid #e8e2ed; border-radius: 7px; background: #fcfbfd; }
.flow-node b, .flow-node span { display: block; }
.flow-node b { color: #39264a; font-size: 12px; line-height: 1.25; }
.flow-node span { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.flow-node.is-source { border-color: #f0c9de; background: #fff9fc; }
.flow-node.is-integration { border-color: #cde4f5; background: #f8fcff; }
.flow-node.is-core { border-color: #d9cafa; background: #faf8ff; }
.flow-node.is-ai { border-color: #d3c4fc; background: #f7f3ff; }
.flow-node.is-output { border-color: #cceadd; background: #f8fdfa; }
.flow-arrow { position: absolute; top: calc(50% - 12px); right: -21px; z-index: 2; display: grid; place-items: center; width: 18px; height: 24px; color: #9a81dd; background: #fff; font-size: 20px; font-style: normal; line-height: 1; }
.flow-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.flow-summary article { padding: 14px 16px; border-radius: 7px; background: #f6f2ff; }
.flow-summary article:last-child { background: #fff4fa; }
.flow-summary span { display: block; color: var(--purple-dark); font-size: 9px; font-weight: 800; letter-spacing: 0.65px; }
.flow-summary article:last-child span { color: #bc3f80; }
.flow-summary p { margin-top: 6px; color: #4f4658; font-size: 12px; line-height: 1.45; }

.data-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 270px; gap: 14px; }
.domain-tabs { display: grid; gap: 5px; align-content: start; }
.domain-tab { border: 1px solid transparent; border-radius: 6px; padding: 11px 12px; background: transparent; color: #655e6c; text-align: left; font-size: 12px; font-weight: 650; }
.domain-tab:hover { background: #f6f2ff; }
.domain-tab.is-active { background: #eee7ff; color: var(--purple-dark); }
.entity-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.entity { position: relative; min-height: 104px; padding: 13px; border: 1px solid #e7e1ec; border-radius: 7px; background: #fcfbfd; }
.entity.is-primary { border-color: #b9a0f9; background: #f6f2ff; }
.entity b, .entity span { display: block; }
.entity b { color: #3e274f; font-size: 13px; }
.entity span { margin-top: 6px; color: #726b79; font-size: 11px; line-height: 1.35; }
.entity em { display: inline-block; margin-top: 10px; padding: 2px 5px; border-radius: 3px; background: #f0ecf4; color: #706778; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0.35px; }
.data-note { padding: 18px; border-radius: var(--radius); background: #282032; color: #fff; }
.data-note .section-kicker { margin: 0; color: #d9ccff; }
.data-note h3 { margin-top: 5px; font-size: 15px; }
.data-note p { margin-top: 10px; color: #d8d0df; font-size: 12px; line-height: 1.45; }
.domain-meta { display: grid; gap: 8px; margin: 18px 0 0; }
.domain-meta div { padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); }
.domain-meta dt { color: #bcb0c6; font-size: 9px; font-weight: 800; letter-spacing: 0.55px; }
.domain-meta dd { margin: 3px 0 0; color: #fff; font-size: 11px; }
.data-lifecycle { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.lifecycle-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.lifecycle-heading .section-kicker { margin: 0 0 4px; }
.lifecycle-heading h3 { font-size: 16px; }
.data-lifecycle ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.data-lifecycle li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; min-width: 0; }
.data-lifecycle li:not(:last-child)::after { content: "→"; position: absolute; top: 6px; right: -12px; z-index: 1; color: #a287e8; font-size: 14px; }
.data-lifecycle li > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 9px; font-weight: 800; }
.data-lifecycle b { display: block; font-size: 11px; }
.data-lifecycle li p { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.38; }
.freshness-rule { margin-top: 16px; padding: 10px 12px; border-left: 3px solid var(--pink); background: var(--pink-soft); color: #5b4455; font-size: 11px; line-height: 1.45; }

.security-pill { padding: 6px 9px; border-radius: 5px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; }
.security-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr); gap: 14px; }
.security-chain { display: flex; align-items: stretch; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.security-chain article { flex: 1; min-width: 0; padding: 13px; border: 1px solid #e7e0ee; border-radius: 7px; background: #fcfbfd; }
.security-chain article.secure { border-color: #a68af6; background: #f4efff; }
.security-chain article.external { border-color: #f1b3d5; background: #fff5fa; }
.security-chain article > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e9e1ff; color: #6037c8; font-size: 10px; font-weight: 800; }
.security-chain b { display: block; margin-top: 12px; font-size: 11px; line-height: 1.3; }
.security-chain p { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.38; }
.security-chain i { align-self: center; color: #9c80ee; font-size: 18px; font-style: normal; }
.security-rules { padding: 19px; border: 1px solid #e7ddfb; border-radius: var(--radius); background: #fbf9ff; }
.security-rules h3 { font-size: 15px; }
.security-rules ul { display: grid; gap: 10px; margin: 13px 0 0; padding: 0; list-style: none; }
.security-rules li { position: relative; padding-left: 17px; color: #5f5866; font-size: 11px; line-height: 1.45; }
.security-rules li::before { content: "✓"; position: absolute; left: 0; color: var(--pink); font-weight: 800; }
.protection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.protection-grid article { min-height: 118px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.protection-grid article:nth-child(1) { border-color: #f0c9df; background: #fff9fc; }
.protection-grid article:nth-child(2) { border-color: #d6c7fb; background: #faf8ff; }
.protection-grid article:nth-child(3) { border-color: #c8e9dc; background: #f8fdfb; }
.protection-label { color: var(--purple-dark); font-size: 9px; font-weight: 800; letter-spacing: 0.55px; }
.protection-grid article:nth-child(1) .protection-label { color: #bb3d7d; }
.protection-grid article:nth-child(3) .protection-label { color: #197d62; }
.protection-grid b { display: block; margin-top: 9px; color: #4b4055; font-size: 12px; line-height: 1.42; }

.operations-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr); gap: 14px; }
.runtime-stack { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.runtime-stack article { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 6px; background: #faf9fc; }
.runtime-stack span { align-self: start; padding-top: 2px; color: var(--purple-dark); font-size: 9px; font-weight: 800; letter-spacing: 0.6px; }
.runtime-stack b { display: block; font-size: 12px; }
.runtime-stack p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.42; }
.growth-path { padding: 20px; border-radius: var(--radius); background: #282032; color: #fff; }
.growth-path .section-kicker { color: #d9ccff; }
.growth-path ol { display: grid; gap: 13px; margin: 17px 0 0; padding: 0; list-style: none; counter-reset: steps; }
.growth-path li { position: relative; padding-left: 26px; color: #ded6e5; font-size: 12px; line-height: 1.45; }
.growth-path li::before { counter-increment: steps; content: counter(steps); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: var(--purple); font-size: 9px; font-weight: 800; }
.growth-path li b { color: #fff; }
.growth-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14); color: #cfc3da; font-size: 11px; line-height: 1.45; }

@media (max-width: 1080px) {
  .arch-layer { grid-template-columns: 184px minmax(0, 1fr); }
  .architecture-rules, .protection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-canvas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-node:nth-child(3n) .flow-arrow { display: none; }
  .security-layout, .operations-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .page-shell { width: min(100% - 32px, 720px); padding-top: 32px; }
  .topbar { padding: 0 16px; }
  .topbar-status, .brand small { display: none; }
  h1 { font-size: 32px; }
  .intro > p:last-of-type { font-size: 14px; }
  .intro-facts, .data-layout { grid-template-columns: 1fr; }
  .intro-facts { gap: 10px; }
  .view-heading { align-items: flex-start; flex-direction: column; }
  .view-note { max-width: none; text-align: left; }
  .arch-layer { grid-template-columns: 1fr; }
  .layer-nodes, .layer-nodes.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-canvas { grid-template-columns: 1fr; gap: 11px; }
  .flow-node { min-height: 0; }
  .flow-node .flow-arrow { top: auto; right: auto; bottom: -19px; left: calc(50% - 12px); transform: rotate(90deg); }
  .flow-node:nth-child(3n) .flow-arrow { display: grid; }
  .flow-summary { grid-template-columns: 1fr; }
  .data-layout { gap: 12px; }
  .domain-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .domain-tab { text-align: center; }
  .data-lifecycle ol { grid-template-columns: 1fr; gap: 13px; }
  .data-lifecycle li:not(:last-child)::after { top: auto; right: auto; bottom: -14px; left: 6px; transform: rotate(90deg); }
  .security-chain { display: grid; grid-template-columns: 1fr 20px 1fr; }
  .security-chain article:nth-of-type(3) { grid-column: 1; }
  .security-chain i { align-self: center; }
  .runtime-stack article { grid-template-columns: 108px minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .page-shell { width: min(100% - 28px, 560px); }
  .section-tabs { gap: 5px; overflow-x: auto; padding-bottom: 12px; }
  .tab { flex: 0 0 auto; padding: 8px 11px; white-space: nowrap; }
  h2 { font-size: 22px; }
  .layer-nodes, .layer-nodes.is-three, .architecture-rules, .protection-grid, .flow-grid, .entity-board { grid-template-columns: 1fr; }
  .architecture-rules article { min-height: 0; }
  .domain-tabs { grid-template-columns: 1fr 1fr; }
  .security-chain { grid-template-columns: 1fr; }
  .security-chain article:nth-of-type(3) { grid-column: auto; }
  .security-chain i { justify-self: center; transform: rotate(90deg); }
  .runtime-stack { padding: 11px; }
  .runtime-stack article { grid-template-columns: 1fr; gap: 4px; }
  .security-pill { white-space: normal; }
  .module-popover { width: calc(100vw - 28px); max-height: min(360px, calc(100vh - 28px)); }
}