:root {
  --div-bg-from: #F8FAFC;
  --div-bg-via: #EEF4FF;
  --div-bg-to: #F8FAFC;
  --div-chapter-bg-from: #FFFFFF;
  --div-chapter-bg-via: #F8FAFC;
  --div-chapter-bg-to: #F1F5F9;
  --div-text: #0F172A;
  --div-text-2: #475569;
  --div-text-3: #64748B;
  --div-part-title: #1D4ED8;
  --div-primary: #2563EB;
  --div-secondary: #0F766E;
  --div-accent: #F97316;
  --div-cyan: #0891B2;
  --div-cyan-2: #06B6D4;
  --div-green: #10B981;
  --div-amber: #F59E0B;
  --div-grid-line: rgba(37, 99, 235, 0.06);
  --div-ring: #2563EB;
  --div-glow-a: rgba(59, 130, 246, 0.16);
  --div-glow-b: rgba(16, 185, 129, 0.1);
  --div-glow-c: rgba(245, 158, 11, 0.07);
  --div-eyebrow-bg: rgba(255, 255, 255, 0.5);
  --div-surface: rgba(255, 255, 255, 0.64);
  --div-stroke-white: #FFFFFF;
  --div-rule-grad: linear-gradient(90deg, #2563EB, #10B981 58%, #F59E0B);
  --div-node-shadow: rgba(37, 99, 235, 0.34);
}
.dark {
  --div-bg-from: #0F172A;
  --div-bg-via: #1E293B;
  --div-bg-to: #0F172A;
  --div-chapter-bg-from: #1E293B;
  --div-chapter-bg-via: #0F172A;
  --div-chapter-bg-to: #1E293B;
  --div-text: #F1F5F9;
  --div-text-2: #94A3B8;
  --div-text-3: #94A3B8;
  --div-part-title: #60A5FA;
  --div-primary: #60A5FA;
  --div-secondary: #2DD4BF;
  --div-accent: #FB923C;
  --div-cyan: #22D3EE;
  --div-cyan-2: #22D3EE;
  --div-green: #34D399;
  --div-amber: #FBBF24;
  --div-grid-line: rgba(96, 165, 250, 0.06);
  --div-ring: #3B82F6;
  --div-glow-a: rgba(59, 130, 246, 0.12);
  --div-glow-b: rgba(16, 185, 129, 0.08);
  --div-glow-c: rgba(245, 158, 11, 0.06);
  --div-eyebrow-bg: rgba(30, 41, 59, 0.5);
  --div-surface: rgba(30, 41, 59, 0.64);
  --div-stroke-white: #0F172A;
  --div-rule-grad: linear-gradient(90deg, #60A5FA, #34D399 58%, #FBBF24);
  --div-node-shadow: rgba(96, 165, 250, 0.28);
}
.divider-body .page {
  --primary: var(--div-primary);
  --secondary: var(--div-secondary);
  --accent: var(--div-accent);
  --theme: var(--div-primary);
  position: relative;
  isolation: isolate;
  contain: paint;
  width: 1240px;
  height: 1754px;
  overflow: hidden;
  color: var(--div-text);
  background: linear-gradient(150deg, var(--div-bg-from) 0%, var(--div-bg-via) 58%, var(--div-bg-to) 100%);
}
.divider-body .page.theme-technology { --theme: var(--div-secondary); }
.divider-body .page.theme-application { --theme: var(--div-accent); }
.divider-body .page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(var(--div-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--div-grid-line) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.56;
}
.divider-body .page::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 620px;
  height: 620px;
  right: 24px;
  top: 24px;
  border: 4px solid var(--div-ring);
  border-radius: 50%;
  opacity: 0.055;
}
.divider-body .chapter-page {
  background: linear-gradient(150deg, var(--div-chapter-bg-from) 0%, var(--div-chapter-bg-via) 58%, var(--div-chapter-bg-to) 100%);
}
.divider-body .chapter-page::before { opacity: 0.4; }
.divider-body .chapter-page::after { display: none; }
.divider-body .glow {
  position: absolute;
  z-index: -2;
  pointer-events: none;
}
.divider-body .glow-a {
  width: 650px;
  height: 650px;
  top: 0;
  right: 0;
  background: radial-gradient(circle at 100% 0%, var(--div-glow-a), transparent 70%);
}
.divider-body .glow-b {
  width: 560px;
  height: 560px;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 0% 100%, var(--div-glow-b), transparent 70%);
}
.divider-body .glow-c {
  width: 470px;
  height: 470px;
  top: 43%;
  right: 0;
  background: radial-gradient(circle at 100% 50%, var(--div-glow-c), transparent 70%);
}
.divider-body .chapter-page .glow { display: none; }
.divider-body .frame {
  position: absolute;
  z-index: 2;
  inset: 68px;
  border: 2px solid var(--div-ring);
  opacity: 0.14;
}
.divider-body .copy {
  position: absolute;
  z-index: 4;
  left: 106px;
  top: 178px;
  width: 720px;
}
.divider-body .part-page .copy { top: 790px; width: 860px; }
.divider-body .eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding: 10px 22px 10px 29px;
  border: 2px solid var(--theme);
  border-radius: 32px;
  color: var(--theme);
  background: var(--div-eyebrow-bg);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 9px;
}
.divider-body .section-label {
  margin: 0 0 12px;
  color: var(--theme);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 3px;
}
.divider-body .ordinal {
  position: absolute;
  z-index: -1;
  left: -14px;
  top: 36px;
  margin: 0;
  color: var(--div-primary);
  font-size: 240px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -18px;
  opacity: 0.07;
}
.divider-body .part-page .ordinal { top: -76px; opacity: 0.065; }
.divider-body h1 {
  max-width: 850px;
  margin: 0;
  color: var(--div-text);
  font-size: 62px;
  font-weight: 850;
  line-height: 1.28;
  letter-spacing: 1px;
}
.divider-body h1 span { display: block; }
.divider-body h1 .title-sub { margin-top: 8px; }
.divider-body .part-page h1 { color: var(--div-part-title); font-size: 66px; }
.divider-body .rule {
  width: 132px;
  height: 8px;
  margin: 34px 0 28px;
  border-radius: 8px;
  background: var(--div-rule-grad);
}
.divider-body .overview {
  max-width: 790px;
  margin: 0;
  color: var(--div-text-2);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.72;
  text-align: justify;
}
.divider-body .visual {
  position: absolute;
  z-index: 1;
  right: 70px;
  bottom: 88px;
  width: 560px;
  height: 760px;
  color: var(--div-primary);
}
.divider-body .part-page .visual { right: 72px; top: 86px; bottom: auto; width: 760px; height: 760px; }
.divider-body .diagram { width: 100%; height: 100%; overflow: visible; opacity: 0.62; }
.divider-body .diagram .line { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.divider-body .diagram .line-thin { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.divider-body .diagram .dash { stroke-dasharray: 13 15; }
.divider-body .diagram .surface { fill: var(--div-surface); stroke: currentColor; stroke-width: 4; }
.divider-body .diagram .soft { fill: currentColor; opacity: 0.08; stroke: currentColor; stroke-width: 4; }
.divider-body .diagram .solid { fill: var(--theme); stroke: var(--div-stroke-white); stroke-width: 4; }
.divider-body .diagram .accent { fill: var(--accent); stroke: var(--div-stroke-white); stroke-width: 4; }
.divider-body .part-page .diagram { opacity: 0.58; }
.divider-body .family-network {
  display: none;
  position: absolute;
  z-index: 1;
  left: 78px;
  bottom: 154px;
  width: 360px;
  height: 260px;
  overflow: visible;
  opacity: 0.18;
  pointer-events: none;
}
.divider-body .family-network .network-line {
  fill: none;
  stroke: var(--div-cyan);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.divider-body .family-network .network-dash {
  fill: none;
  stroke: var(--div-primary);
  stroke-width: 1.7;
  stroke-dasharray: 6 13;
  opacity: 0.42;
}
.divider-body .family-network .network-node {
  stroke: var(--div-stroke-white);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--div-node-shadow));
}
.divider-body .part-page .family-network {
  display: block;
  left: auto;
  right: 94px;
  bottom: 138px;
  width: 320px;
  height: 230px;
}
.divider-body .footer {
  position: absolute;
  z-index: 4;
  left: 106px;
  right: 106px;
  bottom: 82px;
  display: flex;
  justify-content: space-between;
  color: var(--div-text-3);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3px;
}