:root {
      --bg: #f2f6fb;
      --surface: #ffffff;
      --surface-2: #eef4ff;
      --ink: #0d1a2b;
      --muted: #58687e;
      --line: #d9e4f3;
      --brand: #0f766e;
      --accent: #f59e0b;
      --blue: #2563eb;
      --danger: #b42318;
      --ok: #0f766e;
      --shadow: 0 14px 40px rgba(22, 34, 51, 0.1);
      --radius-xl: 24px;
      --radius-lg: 16px;
      --radius-md: 12px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Sora', sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 0% 0%, #e7fff8 0, transparent 32%),
        radial-gradient(circle at 100% 0%, #e7efff 0, transparent 36%),
        linear-gradient(180deg, #f8fbff 0, var(--bg) 100%);
      min-height: 100vh;
    }

    .shell {
      max-width: 1240px;
      margin: 0 auto;
      padding: 24px 18px 44px;
    }

    .hero {
      position: relative;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, #ffffff 0%, #f5fbff 45%, #edf8ff 100%);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow);
      padding: 28px;
      min-height: 260px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 20px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #e6fffa;
      color: #0f766e;
      border: 1px solid #a7f3d0;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .eyebrow-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #0f766e;
      animation: pulse 1.8s infinite;
    }

    .hero h1 {
      font-size: clamp(1.9rem, 3.2vw, 3.1rem);
      line-height: 1.08;
      margin: 0;
      letter-spacing: -0.02em;
      max-width: 11ch;
    }

    .hero p {
      margin: 14px 0 0;
      color: var(--muted);
      line-height: 1.6;
      max-width: 58ch;
      font-size: 14px;
    }

    .hero-actions {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .btn {
      text-decoration: none;
      color: var(--ink);
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      padding: 9px 14px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      border-color: #c3d8f7;
      box-shadow: 0 8px 18px rgba(32, 78, 160, .12);
    }

    .hero-svg-wrap {
      position: relative;
      height: 210px;
      border-radius: 18px;
      background: linear-gradient(160deg, #f0f9ff 0%, #ecfeff 40%, #f0fdf4 100%);
      border: 1px solid #d4e8f7;
      overflow: hidden;
    }

    .hero-svg-wrap svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .path-main {
      stroke-dasharray: 420;
      stroke-dashoffset: 420;
      animation: draw 2.8s ease forwards;
    }

    .path-alt {
      stroke-dasharray: 360;
      stroke-dashoffset: 360;
      animation: draw 3.6s .2s ease forwards;
    }

    .float-a {
      transform-origin: center;
      animation: driftA 7s ease-in-out infinite;
    }

    .float-b {
      transform-origin: center;
      animation: driftB 5.4s ease-in-out infinite;
    }

    .main {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      align-items: start;
    }

    .arch-board {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(170deg, #ffffff 0%, #f7fbff 100%);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .arch-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .arch-head h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.01em;
    }

    .arch-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .arch-card {
      border: 1px solid #d5e2f3;
      border-radius: 12px;
      background: #fff;
      padding: 10px;
    }

    .arch-k {
      margin: 0 0 6px;
      font-size: 10px;
      color: #475569;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-family: 'IBM Plex Mono', monospace;
    }

    .arch-v {
      margin: 0;
      font-size: 13px;
      color: #1f2a38;
      line-height: 1.45;
    }

    .chip-wrap {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .chip {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      border: 1px solid #d1e3fa;
      background: #eff6ff;
      color: #1d4ed8;
      border-radius: 999px;
      padding: 4px 8px;
      font-weight: 700;
    }

    .executive {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(165deg, #ffffff 0%, #f3f8ff 100%);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-top: 8px;
    }

    .kpi {
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: #fff;
      padding: 9px;
    }

    .kpi .label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-weight: 800;
      color: #475569;
      font-family: 'IBM Plex Mono', monospace;
      margin-bottom: 6px;
    }

    .kpi .value {
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .alerts {
      margin-top: 10px;
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: #fff;
      padding: 9px;
    }

    .alerts-list {
      display: grid;
      gap: 6px;
      max-height: 165px;
      overflow: auto;
      padding-right: 2px;
    }

    .alert-item {
      border: 1px solid #dbe7f8;
      border-radius: 9px;
      padding: 7px;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      color: #334155;
      background: #f8fbff;
    }

    .alert-break {
      border-color: #fecaca;
      background: #fff1f2;
      color: #9f1239;
    }

    .noc {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(160deg, #ffffff 0%, #f4fbff 100%);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .gate {
      margin-top: 8px;
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: #fff;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .gate-pill {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid;
      border-radius: 999px;
      padding: 6px 10px;
      white-space: nowrap;
    }

    .gate-go {
      color: #166534;
      background: #dcfce7;
      border-color: #86efac;
    }

    .gate-nogo {
      color: #991b1b;
      background: #fee2e2;
      border-color: #fecaca;
    }

    .checks-grid {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }

    .check {
      border: 1px solid #d8e4f4;
      border-radius: 11px;
      background: #fff;
      padding: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      line-height: 1.45;
    }

    .check.ok {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }

    .check.fail {
      border-color: #fecaca;
      background: #fff1f2;
      color: #9f1239;
    }

    .war-room {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(160deg, #ffffff 0%, #f6f9ff 100%);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .war-decision {
      margin-top: 8px;
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: #fff;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }

    .war-grid {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .war-list {
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: #fff;
      padding: 9px;
    }

    .war-items {
      display: grid;
      gap: 6px;
      max-height: 170px;
      overflow: auto;
      padding-right: 2px;
    }

    .war-item {
      border: 1px solid #dbe7f8;
      border-radius: 9px;
      padding: 7px;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      color: #334155;
      background: #f8fbff;
    }

    .war-blocker {
      border-color: #fecaca;
      background: #fff1f2;
      color: #9f1239;
    }

    .timeline {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(160deg, #ffffff 0%, #f5fbff 100%);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .timeline-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .timeline-list {
      margin-top: 10px;
      display: grid;
      gap: 7px;
      max-height: 220px;
      overflow: auto;
      padding-right: 2px;
    }

    .timeline-item {
      border: 1px solid #dbe7f8;
      border-radius: 10px;
      background: #fff;
      padding: 8px;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      color: #334155;
      line-height: 1.45;
    }

    .timeline-select {
      border: 1px solid #d3e1f0;
      background: #fff;
      color: #1f2a38;
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      min-width: 230px;
    }

    .timeline-input {
      border: 1px solid #d3e1f0;
      background: #fff;
      color: #1f2a38;
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      min-width: 170px;
    }

    .playback-board {
      margin-top: 10px;
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: linear-gradient(160deg, #ffffff 0%, #f2f8ff 100%);
      padding: 9px;
    }

    .playback-controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 8px;
    }

    .playback-slider {
      width: min(420px, 100%);
      accent-color: #0f766e;
    }

    .playback-metric-grid {
      margin-top: 8px;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 7px;
    }

    .playback-metric {
      border: 1px solid #dbe7f8;
      border-radius: 9px;
      background: #fff;
      padding: 7px;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      color: #334155;
      line-height: 1.4;
    }

    .playback-sparkline {
      margin-top: 8px;
      border: 1px solid #dbe7f8;
      border-radius: 9px;
      background: #fff;
      padding: 6px;
    }

    .playback-sparkline svg {
      width: 100%;
      height: 84px;
      display: block;
    }

    .diff-board {
      margin-top: 10px;
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: #fff;
      padding: 9px;
    }

    .diff-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 7px;
    }

    .diff-item {
      border: 1px solid #dbe7f8;
      border-radius: 9px;
      background: #f8fbff;
      padding: 7px;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      color: #334155;
      line-height: 1.4;
    }

    .delta-up {
      color: #166534;
    }

    .delta-down {
      color: #9f1239;
    }

    .replay-board {
      margin-top: 10px;
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: #fff;
      padding: 9px;
    }

    .replay-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .replay-list {
      border: 1px solid #dbe7f8;
      border-radius: 9px;
      background: #f8fbff;
      padding: 7px;
      max-height: 170px;
      overflow: auto;
    }

    .replay-item {
      border-bottom: 1px dashed #cddcf1;
      padding: 5px 0;
      font-size: 11px;
      font-family: 'IBM Plex Mono', monospace;
      color: #334155;
    }

    .replay-item:last-child {
      border-bottom: 0;
    }

    .topology {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .topology-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 10px;
      align-items: stretch;
    }

    .topology-canvas {
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: linear-gradient(170deg, #f8fbff 0%, #eef7ff 100%);
      overflow: hidden;
    }

    .topology-canvas svg {
      width: 100%;
      height: 100%;
      min-height: 250px;
      display: block;
    }

    .flow-panel {
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      background: #fff;
      padding: 10px;
    }

    .flow-list {
      display: grid;
      gap: 7px;
      max-height: 270px;
      overflow: auto;
      padding-right: 2px;
    }

    .flow-item {
      border: 1px solid #dbe7f8;
      border-radius: 10px;
      background: #f8fbff;
      padding: 8px;
      cursor: pointer;
      transition: border-color .2s ease, transform .2s ease;
    }

    .flow-item:hover {
      border-color: #93c5fd;
      transform: translateY(-1px);
    }

    .flow-item.active {
      border-color: #22c55e;
      background: #f0fdf4;
    }

    .flow-item h4 {
      margin: 0 0 4px;
      font-size: 13px;
    }

    .flow-item p {
      margin: 0;
      font-size: 11px;
      color: #64748b;
      font-family: 'IBM Plex Mono', monospace;
    }

    .flow-badge {
      display: inline-block;
      margin-top: 5px;
      font-size: 10px;
      font-weight: 700;
      font-family: 'IBM Plex Mono', monospace;
      border-radius: 999px;
      border: 1px solid;
      padding: 3px 7px;
    }

    .flow-ok {
      color: #166534;
      background: #dcfce7;
      border-color: #86efac;
    }

    .flow-miss {
      color: #991b1b;
      background: #fee2e2;
      border-color: #fecaca;
    }

    .node {
      filter: drop-shadow(0 6px 10px rgba(16, 34, 58, 0.1));
    }

    .node.active rect {
      stroke: #22c55e;
      stroke-width: 2.2;
    }

    .edge {
      stroke-dasharray: 8;
      animation: stream 2.2s linear infinite;
    }

    .domains {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .domains-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .domain-card {
      border: 1px solid #d8e4f4;
      border-radius: 12px;
      padding: 10px;
      background: #fff;
    }

    .domain-card h3 {
      margin: 0;
      font-size: 14px;
      letter-spacing: -0.01em;
    }

    .domain-meta {
      margin-top: 7px;
      display: grid;
      gap: 4px;
      font-size: 11px;
      color: #475569;
      font-family: 'IBM Plex Mono', monospace;
    }

    .crit {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      border: 1px solid;
      border-radius: 999px;
      padding: 3px 7px;
      font-family: 'IBM Plex Mono', monospace;
      margin-top: 6px;
    }

    .crit-high {
      color: #991b1b;
      background: #fee2e2;
      border-color: #fecaca;
    }

    .crit-medium {
      color: #92400e;
      background: #fef3c7;
      border-color: #fcd34d;
    }

    .crit-low {
      color: #166534;
      background: #dcfce7;
      border-color: #86efac;
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

    .panel-body {
      padding: 16px;
    }

    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .stat {
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: linear-gradient(160deg, #fff 0%, #f8fbff 100%);
      padding: 12px;
    }

    .stat .label {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 8px;
      font-weight: 700;
    }

    .stat .value {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .module-switch {
      margin-top: 12px;
      display: flex;
      gap: 8px;
      background: #edf3fb;
      border-radius: 999px;
      padding: 5px;
      border: 1px solid #d5e3f3;
    }

    .module-btn {
      flex: 1;
      border: 0;
      background: transparent;
      color: #334155;
      border-radius: 999px;
      padding: 9px 8px;
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
      transition: background .2s ease, color .2s ease;
    }

    .module-btn.active {
      background: #fff;
      color: #0b3b66;
      box-shadow: 0 4px 14px rgba(44, 86, 160, .14);
    }

    .controls {
      margin-top: 12px;
      display: grid;
      gap: 8px;
    }

    .input,
    .select {
      width: 100%;
      border: 1px solid #d3e1f0;
      border-radius: 10px;
      background: #fff;
      padding: 10px 11px;
      font-family: inherit;
      font-size: 13px;
      color: #1f2a38;
    }

    .input:focus,
    .select:focus {
      outline: 2px solid #bfdbfe;
      border-color: #93c5fd;
    }

    .legend {
      margin-top: 12px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      text-align: center;
      font-family: 'IBM Plex Mono', monospace;
    }

    .m-get {
      color: #0369a1;
      background: #e0f2fe;
      border-color: #bae6fd;
    }

    .m-post {
      color: #0f766e;
      background: #d1fae5;
      border-color: #a7f3d0;
    }

    .m-put,
    .m-patch {
      color: #b45309;
      background: #fef3c7;
      border-color: #fcd34d;
    }

    .m-delete {
      color: #b42318;
      background: #fee4e2;
      border-color: #fecdca;
    }

    .content {
      padding: 16px;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }

    .section-head h2 {
      margin: 0;
      font-size: 19px;
      letter-spacing: -0.01em;
    }

    .status {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      border-radius: 999px;
      padding: 6px 10px;
      background: #ecfdf3;
      border: 1px solid #bbf7d0;
      color: #166534;
      white-space: nowrap;
    }

    .endpoint-list {
      display: grid;
      gap: 10px;
    }

    .endpoint {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(175deg, #fff 0%, #fbfdff 100%);
      overflow: hidden;
      transition: box-shadow .24s ease, transform .24s ease, border-color .24s ease;
    }

    .endpoint:hover {
      border-color: #c4daf5;
      box-shadow: 0 8px 22px rgba(29, 78, 216, .08);
      transform: translateY(-1px);
    }

    .endpoint-top {
      padding: 12px 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
    }

    .endpoint-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .endpoint-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .method {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      border-radius: 999px;
      padding: 4px 8px;
      border: 1px solid;
    }

    .endpoint-path {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .endpoint-summary {
      color: var(--muted);
      font-size: 12px;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 420px;
    }

    .qscore {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      border-radius: 999px;
      border: 1px solid;
      padding: 4px 7px;
      white-space: nowrap;
    }

    .q-high {
      color: #166534;
      background: #dcfce7;
      border-color: #86efac;
    }

    .q-mid {
      color: #92400e;
      background: #fef3c7;
      border-color: #fcd34d;
    }

    .q-low {
      color: #991b1b;
      background: #fee2e2;
      border-color: #fecaca;
    }

    .changelog {
      margin-top: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: linear-gradient(160deg, #ffffff 0%, #f7fbff 100%);
      padding: 10px;
    }

    .ch-title {
      margin: 0 0 8px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #334155;
      font-weight: 800;
    }

    .ch-counters {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 8px;
    }

    .ch-counter {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 6px;
      text-align: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.35;
      background: #fff;
    }

    .ch-counter strong {
      display: block;
      font-size: 14px;
    }

    .ch-added strong {
      color: #166534;
    }

    .ch-removed strong {
      color: #991b1b;
    }

    .ch-changed strong {
      color: #1d4ed8;
    }

    .ch-meta {
      font-size: 11px;
      color: #64748b;
      margin-bottom: 8px;
    }

    .server-meta {
      font-size: 11px;
      color: #475569;
      margin-bottom: 8px;
      border: 1px dashed #cbdcf1;
      border-radius: 9px;
      padding: 6px;
      background: #f8fbff;
      font-family: 'IBM Plex Mono', monospace;
    }

    .ch-list {
      display: grid;
      gap: 5px;
      max-height: 160px;
      overflow: auto;
      padding-right: 2px;
    }

    .ch-item {
      font-size: 11px;
      color: #1f2a38;
      border: 1px dashed #d1e0f1;
      border-radius: 9px;
      padding: 6px;
      background: #fcfeff;
      font-family: 'IBM Plex Mono', monospace;
    }

    .risk {
      margin-top: 8px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .risk-item {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 6px;
      text-align: center;
      font-family: 'IBM Plex Mono', monospace;
      background: #fff;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.35;
    }

    .risk-item strong {
      display: block;
      font-size: 14px;
    }

    .risk-breaking strong {
      color: #991b1b;
    }

    .risk-safe strong {
      color: #166534;
    }

    .semver {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 8px;
      background: #fff;
    }

    .semver-title {
      margin: 0 0 6px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #334155;
      font-weight: 800;
    }

    .semver-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      border: 1px solid;
      border-radius: 999px;
      padding: 4px 9px;
      margin-bottom: 6px;
    }

    .semver-major {
      color: #991b1b;
      background: #fee2e2;
      border-color: #fecaca;
    }

    .semver-minor {
      color: #0f766e;
      background: #dcfce7;
      border-color: #86efac;
    }

    .semver-patch {
      color: #1d4ed8;
      background: #dbeafe;
      border-color: #93c5fd;
    }

    .semver-note {
      font-size: 11px;
      color: #64748b;
      line-height: 1.4;
    }

    .semver-actions {
      margin-top: 8px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .mini-btn {
      border: 1px solid #cfe0f4;
      background: #fff;
      color: #1f2a38;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'IBM Plex Mono', monospace;
    }

    .mini-btn:hover {
      border-color: #93c5fd;
      background: #f8fbff;
    }

    .endpoint-body {
      border-top: 1px solid #e8eff7;
      display: none;
      padding: 12px 13px;
      background: #f9fcff;
    }

    .endpoint.open .endpoint-body {
      display: block;
      animation: reveal .2s ease;
    }

    .row {
      display: grid;
      gap: 7px;
      margin-bottom: 10px;
    }

    .row:last-child {
      margin-bottom: 0;
    }

    .k {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: #334155;
      font-weight: 700;
    }

    .v {
      font-size: 12px;
      color: #243243;
      line-height: 1.5;
    }

    .code {
      font-family: 'IBM Plex Mono', monospace;
      background: #0f172a;
      color: #dbeafe;
      border-radius: 10px;
      padding: 10px;
      overflow-x: auto;
      font-size: 11px;
      line-height: 1.6;
      border: 1px solid #1e293b;
      max-height: 280px;
    }

    .empty {
      border: 1px dashed #bfd2ea;
      border-radius: 14px;
      padding: 20px;
      text-align: center;
      background: #f5f9ff;
      color: var(--muted);
      font-size: 13px;
    }

    .loading {
      display: grid;
      place-items: center;
      min-height: 220px;
      color: var(--muted);
      font-weight: 600;
    }

    .spinner {
      width: 34px;
      height: 34px;
      border: 3px solid #dbe7f7;
      border-top-color: #0f766e;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }

    @keyframes draw {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes driftA {
      0%,
      100% {
        transform: translateY(0) translateX(0);
      }

      50% {
        transform: translateY(-8px) translateX(5px);
      }
    }

    @keyframes driftB {
      0%,
      100% {
        transform: translateY(0) translateX(0);
      }

      50% {
        transform: translateY(7px) translateX(-4px);
      }
    }

    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: .55;
        transform: scale(0.72);
      }
    }

    @keyframes reveal {
      from {
        opacity: 0;
        transform: translateY(-2px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes stream {
      to {
        stroke-dashoffset: -16;
      }
    }

    @media (max-width: 1040px) {
      .main {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        grid-template-columns: 1fr;
      }

      .arch-grid {
        grid-template-columns: 1fr;
      }

      .topology-grid {
        grid-template-columns: 1fr;
      }

      .domains-grid {
        grid-template-columns: 1fr;
      }

      .kpi-grid {
        grid-template-columns: 1fr 1fr;
      }

      .checks-grid {
        grid-template-columns: 1fr 1fr;
      }

      .war-grid {
        grid-template-columns: 1fr;
      }

      .diff-grid {
        grid-template-columns: 1fr 1fr;
      }

      .replay-grid {
        grid-template-columns: 1fr;
      }

      .playback-metric-grid {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    @media (max-width: 720px) {
      .hero {
        padding: 18px;
      }

      .hero-svg-wrap {
        height: 190px;
      }

      .endpoint-top {
        flex-direction: column;
        align-items: flex-start;
      }

      .endpoint-summary {
        max-width: 100%;
        white-space: normal;
      }

      .endpoint-meta {
        width: 100%;
        justify-content: space-between;
      }

      .section-head {
        flex-direction: column;
        align-items: flex-start;
      }

      .playback-metric-grid {
        grid-template-columns: 1fr 1fr;
      }
    }