<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Concept Diagram</title>
<style>
  :root {
    --text-primary: #1a1a18;
    --text-secondary: #5f5e5a;
    --text-tertiary: #88877f;
    --bg-primary: #ffffff;
    --bg-secondary: #f6f5f0;
    --bg-tertiary: #eeedeb;
    --border: rgba(0,0,0,0.15);
    --border-hover: rgba(0,0,0,0.3);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --text-primary: #e8e6de;
      --text-secondary: #b4b2a9;
      --text-tertiary: #888780;
      --bg-primary: #1a1a18;
      --bg-secondary: #2c2c2a;
      --bg-tertiary: #3d3d3a;
      --border: rgba(255,255,255,0.15);
      --border-hover: rgba(255,255,255,0.3);
    }
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg-tertiary);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 40px 20px;
  }
  .card {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 32px;
    max-width: 780px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  h1 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  .subtitle {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 24px;
  }
  svg { width: 100%; height: auto; }

  /* === SVG Design System Classes === */

  /* Text classes */
  .t  { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); }
  .ts { font-family: system-ui, -apple-system, sans-serif; font-size: 12px; fill: var(--text-secondary); }
  .th { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); font-weight: 500; }

  /* Neutral box */
  .box { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.5px; }

  /* Arrow */
  .arr { stroke: var(--text-secondary); stroke-width: 1.5px; fill: none; }

  /* Leader line */
  .leader { stroke: var(--text-tertiary); stroke-width: 0.5px; stroke-dasharray: 4 3; fill: none; }

  /* Clickable node */
  .node { cursor: pointer; transition: opacity 0.15s; }
  .node:hover { opacity: 0.82; }

  /* === Color Ramp Classes (light mode) === */
  .c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #EEEDFE; stroke: #534AB7; }
  .c-purple > .th, .c-purple > text.th { fill: #3C3489; }
  .c-purple > .ts, .c-purple > text.ts { fill: #534AB7; }
  .c-purple > .t,  .c-purple > text.t  { fill: #3C3489; }

  .c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #E1F5EE; stroke: #0F6E56; }
  .c-teal > .th, .c-teal > text.th { fill: #085041; }
  .c-teal > .ts, .c-teal > text.ts { fill: #0F6E56; }
  .c-teal > .t,  .c-teal > text.t  { fill: #085041; }

  .c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #FAECE7; stroke: #993C1D; }
  .c-coral > .th, .c-coral > text.th { fill: #712B13; }
  .c-coral > .ts, .c-coral > text.ts { fill: #993C1D; }
  .c-coral > .t,  .c-coral > text.t  { fill: #712B13; }

  .c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #FBEAF0; stroke: #993556; }
  .c-pink > .th, .c-pink > text.th { fill: #72243E; }
  .c-pink > .ts, .c-pink > text.ts { fill: #993556; }
  .c-pink > .t,  .c-pink > text.t  { fill: #72243E; }

  .c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #F1EFE8; stroke: #5F5E5A; }
  .c-gray > .th, .c-gray > text.th { fill: #444441; }
  .c-gray > .ts, .c-gray > text.ts { fill: #5F5E5A; }
  .c-gray > .t,  .c-gray > text.t  { fill: #444441; }

  .c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #E6F1FB; stroke: #185FA5; }
  .c-blue > .th, .c-blue > text.th { fill: #0C447C; }
  .c-blue > .ts, .c-blue > text.ts { fill: #185FA5; }
  .c-blue > .t,  .c-blue > text.t  { fill: #0C447C; }

  .c-green > rect, .c-green > circle, .c-green > ellipse { fill: #EAF3DE; stroke: #3B6D11; }
  .c-green > .th, .c-green > text.th { fill: #27500A; }
  .c-green > .ts, .c-green > text.ts { fill: #3B6D11; }
  .c-green > .t,  .c-green > text.t  { fill: #27500A; }

  .c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #FAEEDA; stroke: #854F0B; }
  .c-amber > .th, .c-amber > text.th { fill: #633806; }
  .c-amber > .ts, .c-amber > text.ts { fill: #854F0B; }
  .c-amber > .t,  .c-amber > text.t  { fill: #633806; }

  .c-red > rect, .c-red > circle, .c-red > ellipse { fill: #FCEBEB; stroke: #A32D2D; }
  .c-red > .th, .c-red > text.th { fill: #791F1F; }
  .c-red > .ts, .c-red > text.ts { fill: #A32D2D; }
  .c-red > .t,  .c-red > text.t  { fill: #791F1F; }

  /* === Dark mode overrides === */
  @media (prefers-color-scheme: dark) {
    .c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #3C3489; stroke: #AFA9EC; }
    .c-purple > .th, .c-purple > text.th { fill: #CECBF6; }
    .c-purple > .ts, .c-purple > text.ts { fill: #AFA9EC; }

    .c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #085041; stroke: #5DCAA5; }
    .c-teal > .th, .c-teal > text.th { fill: #9FE1CB; }
    .c-teal > .ts, .c-teal > text.ts { fill: #5DCAA5; }

    .c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #712B13; stroke: #F0997B; }
    .c-coral > .th, .c-coral > text.th { fill: #F5C4B3; }
    .c-coral > .ts, .c-coral > text.ts { fill: #F0997B; }

    .c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #72243E; stroke: #ED93B1; }
    .c-pink > .th, .c-pink > text.th { fill: #F4C0D1; }
    .c-pink > .ts, .c-pink > text.ts { fill: #ED93B1; }

    .c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #444441; stroke: #B4B2A9; }
    .c-gray > .th, .c-gray > text.th { fill: #D3D1C7; }
    .c-gray > .ts, .c-gray > text.ts { fill: #B4B2A9; }

    .c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #0C447C; stroke: #85B7EB; }
    .c-blue > .th, .c-blue > text.th { fill: #B5D4F4; }
    .c-blue > .ts, .c-blue > text.ts { fill: #85B7EB; }

    .c-green > rect, .c-green > circle, .c-green > ellipse { fill: #27500A; stroke: #97C459; }
    .c-green > .th, .c-green > text.th { fill: #C0DD97; }
    .c-green > .ts, .c-green > text.ts { fill: #97C459; }

    .c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #633806; stroke: #EF9F27; }
    .c-amber > .th, .c-amber > text.th { fill: #FAC775; }
    .c-amber > .ts, .c-amber > text.ts { fill: #EF9F27; }

    .c-red > rect, .c-red > circle, .c-red > ellipse { fill: #791F1F; stroke: #F09595; }
    .c-red > .th, .c-red > text.th { fill: #F7C1C1; }
    .c-red > .ts, .c-red > text.ts { fill: #F09595; }
  }
</style>
</head>
<body>
<div class="card">
  <h1><!-- DIAGRAM TITLE HERE --></h1>
  <p class="subtitle"><!-- OPTIONAL SUBTITLE HERE --></p>
  <!-- PASTE SVG HERE -->
</div>
</body>
</html>
