.evan-page {
      --ev-bg: linear-gradient(180deg, #f6fbff 0%, #eef5fb 46%, #f8fafc 100%);
      --ev-bg-2: #ffffff;
      --ev-panel: rgba(255, 255, 255, 0.82);
      --ev-panel-2: rgba(241, 245, 249, 0.92);
      --ev-line: rgba(37, 99, 235, 0.14);
      --ev-line-2: rgba(14, 116, 144, 0.24);
      --ev-ink: #0f172a;
      --ev-ink-dim: #475569;
      --ev-ink-mute: #64748b;
      --ev-accent: #0ea5e9;
      --ev-accent-2: #10b981;
      --ev-warn: #f59e0b;
      --ev-danger: #ef4444;
      --ev-hv: #b45309;
      min-height: 100vh;
      padding: clamp(18px, 3vw, 34px) 12px 48px;
      background:
        radial-gradient(700px 280px at 0% 0%, rgba(14, 165, 233, 0.12), transparent 62%),
        radial-gradient(760px 300px at 100% 0%, rgba(16, 185, 129, 0.10), transparent 60%),
        var(--ev-bg);
    }
    [data-theme="dark"] .evan-page {
      --ev-bg: linear-gradient(180deg, #07111d 0%, #081423 45%, #091728 100%);
      --ev-bg-2: #0a1628;
      --ev-panel: rgba(10, 21, 37, 0.86);
      --ev-panel-2: rgba(14, 27, 46, 0.96);
      --ev-line: rgba(74, 222, 255, 0.12);
      --ev-line-2: rgba(74, 222, 255, 0.26);
      --ev-ink: #d7e6fb;
      --ev-ink-dim: #89a4cc;
      --ev-ink-mute: #5f7da8;
      --ev-accent: #5ad7ff;
      --ev-accent-2: #8affc1;
      --ev-warn: #ffb454;
      --ev-danger: #ff5a6e;
      --ev-hv: #ffcc00;
    }
    .evan-shell {
      max-width: 1360px;
      margin: 0 auto;
      color: var(--ev-ink);
      font-family: Inter, system-ui, sans-serif;
    }
    .evan-shell * { box-sizing: border-box; }
    .evan-mono { font-family: "JetBrains Mono", monospace; letter-spacing: .03em; }
    .evan-hero {
      position: relative;
      overflow: hidden;
      border-radius: 32px;
      padding: clamp(20px, 3vw, 34px);
      background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.10), rgba(16, 185, 129, 0.08)),
        var(--ev-panel);
      border: 1px solid var(--ev-line);
      box-shadow: 0 20px 60px rgba(15, 23, 42, 0.10);
      backdrop-filter: blur(10px);
    }
    [data-theme="dark"] .evan-hero {
      box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
    }
    .evan-hero::before,
    .evan-hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      filter: blur(12px);
      pointer-events: none;
    }
    .evan-hero::before {
      width: 240px;
      height: 240px;
      right: -60px;
      top: -70px;
      background: rgba(14, 165, 233, 0.12);
    }
    .evan-hero::after {
      width: 180px;
      height: 180px;
      left: -40px;
      bottom: -70px;
      background: rgba(16, 185, 129, 0.10);
    }
    .evan-hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(300px, .95fr);
      gap: 18px;
      align-items: stretch;
    }
    .evan-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--ev-line-2);
      background: rgba(255, 255, 255, 0.42);
      color: var(--ev-accent);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .18em;
      margin-bottom: 14px;
    }
    [data-theme="dark"] .evan-badge {
      background: rgba(9, 20, 36, 0.72);
    }
    .evan-title {
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.5rem);
      line-height: 1.02;
      font-weight: 800;
      letter-spacing: -.04em;
    }
    .evan-title span {
      display: block;
      background: linear-gradient(135deg, var(--ev-accent), var(--ev-accent-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .evan-lead {
      margin: 14px 0 0;
      max-width: 720px;
      color: var(--ev-ink-dim);
      font-size: clamp(.98rem, 1.8vw, 1.08rem);
      line-height: 1.75;
    }
    .evan-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }
    .evan-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--ev-line);
      background: rgba(255, 255, 255, 0.56);
      color: var(--ev-ink-dim);
      font-size: 12px;
      font-weight: 600;
    }
    [data-theme="dark"] .evan-pill {
      background: rgba(9, 20, 36, 0.86);
    }
    .evan-sidecards {
      display: grid;
      gap: 14px;
    }
    .evan-card {
      border-radius: 24px;
      border: 1px solid var(--ev-line);
      background: var(--ev-panel-2);
      padding: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .evan-card h3,
    .evan-card h4 {
      margin: 0 0 10px;
      color: var(--ev-ink);
    }
    .evan-card h3 {
      font-size: 1rem;
      font-weight: 700;
    }
    .evan-card h4 {
      font-size: .74rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ev-ink-mute);
      font-family: "JetBrains Mono", monospace;
    }
    .evan-card p {
      margin: 0;
      color: var(--ev-ink-dim);
      font-size: .92rem;
      line-height: 1.7;
    }
    .evan-stat-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .evan-stat {
      border-radius: 18px;
      border: 1px solid var(--ev-line);
      padding: 12px;
      background: rgba(255,255,255,.48);
    }
    [data-theme="dark"] .evan-stat {
      background: rgba(8, 17, 31, 0.82);
    }
    .evan-stat span {
      display: block;
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ev-ink-mute);
      margin-bottom: 6px;
      font-family: "JetBrains Mono", monospace;
    }
    .evan-stat strong {
      display: block;
      font-size: 1rem;
      color: var(--ev-ink);
    }
    .evan-mini-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }
    .evan-mini-item {
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(255,255,255,.45);
      border: 1px solid var(--ev-line);
      color: var(--ev-ink-dim);
      font-size: .86rem;
      line-height: 1.6;
    }
    [data-theme="dark"] .evan-mini-item {
      background: rgba(8, 17, 31, 0.82);
    }
    .evan-hv {
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 16px;
      border: 1px solid rgba(245, 158, 11, 0.28);
      background: repeating-linear-gradient(
        45deg,
        rgba(245, 158, 11, 0.10) 0 12px,
        rgba(180, 83, 9, 0.08) 12px 24px
      );
      color: var(--ev-hv);
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700;
    }
    .evan-hv-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 12px currentColor;
      animation: evanPulse 1.8s infinite;
    }
    @keyframes evanPulse { 50% { opacity: .35; } }
    .evan-grid-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .25;
      background-image:
        linear-gradient(rgba(14,165,233,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,.08) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(ellipse at center, black 42%, transparent 85%);
    }
    .evan-layout {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: 0;
      border-radius: 28px;
      margin-top: 20px;
      overflow: hidden;
      border: 1px solid var(--ev-line);
      background: var(--ev-panel);
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
    }
    .evan-stage {
      position: relative;
      padding: 26px;
      background:
        radial-gradient(900px 420px at 20% -10%, rgba(14,165,233,.08), transparent 60%),
        var(--ev-bg-2);
    }
    .evan-side-panel {
      border-left: 1px solid var(--ev-line);
      background: var(--ev-panel-2);
      padding: 24px;
      overflow-y: auto;
      max-height: calc(100vh - 120px);
      position: sticky;
      top: 92px;
    }
    .evan-stage-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 14px;
      gap: 16px;
      flex-wrap: wrap;
    }
    .evan-stage-title {
      font-size: 12px;
      letter-spacing: .25em;
      color: var(--ev-ink-dim);
      text-transform: uppercase;
      font-family: "JetBrains Mono", monospace;
    }
    .evan-stage-meta {
      font-size: 11px;
      color: var(--ev-ink-mute);
      line-height: 1.8;
      font-family: "JetBrains Mono", monospace;
    }
    .evan-car-wrap {
      position: relative;
      border: 1px solid var(--ev-line);
      background:
        radial-gradient(circle at top, rgba(14,165,233,.05), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(241,245,249,.95));
      border-radius: 22px;
      overflow: hidden;
    }
    [data-theme="dark"] .evan-car-wrap {
      background:
        radial-gradient(circle at top, rgba(90,215,255,.08), transparent 34%),
        linear-gradient(180deg, #0b1628, #09111f);
    }
    .evan-car-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(14,165,233,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,.05) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .evan-car-corners { position: absolute; inset: 12px; pointer-events: none; }
    .evan-car-corners span {
      position: absolute;
      width: 16px;
      height: 16px;
      border: 1px solid var(--ev-accent);
      opacity: .7;
    }
    .evan-car-corners span:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
    .evan-car-corners span:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
    .evan-car-corners span:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
    .evan-car-corners span:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }
    .evan-svg-host { display: block; width: 100%; height: auto; }
    .hotspot { cursor: pointer; transition: all .2s ease; }
    .hotspot .hs-fill { fill: rgba(14,165,233,.05); stroke: rgba(14,165,233,.45); stroke-width: 1; stroke-dasharray: 3 2; }
    .hotspot:hover .hs-fill, .hotspot.active .hs-fill {
      fill: rgba(14,165,233,.18);
      stroke: var(--ev-accent);
      stroke-width: 1.5;
      stroke-dasharray: none;
    }
    .hotspot.active .hs-fill { filter: drop-shadow(0 0 6px rgba(14,165,233,.32)); }
    .hotspot:hover .hs-pin, .hotspot.active .hs-pin { stroke: var(--ev-accent-2); }
    .hotspot:hover .hs-pin-inner, .hotspot.active .hs-pin-inner { fill: var(--ev-accent-2); }
    .hotspot:hover .hs-leader, .hotspot.active .hs-leader { stroke: var(--ev-accent); stroke-dasharray: none; }
    .hs-label {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      fill: var(--ev-ink);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .hotspot:hover .hs-label, .hotspot.active .hs-label { fill: var(--ev-accent); }
    .hs-id {
      font-family: "JetBrains Mono", monospace;
      font-size: 9px;
      fill: var(--ev-accent);
      letter-spacing: .15em;
    }
    .flow-path {
      fill: none;
      stroke: var(--ev-accent);
      stroke-width: 1.5;
      stroke-linecap: round;
      opacity: 0;
      transition: opacity .3s;
    }
    .flow-path.on { opacity: .65; }
    .flow-path.reverse { stroke: var(--ev-accent-2); }
    .flow-dot {
      fill: var(--ev-accent);
      r: 3;
      filter: drop-shadow(0 0 6px var(--ev-accent));
    }
    .evan-modebar {
      margin-top: 14px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 14px;
      border: 1px solid var(--ev-line);
      border-radius: 18px;
      background: var(--ev-panel-2);
    }
    .evan-modebar .label {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      color: var(--ev-ink-dim);
      letter-spacing: .2em;
      text-transform: uppercase;
      align-self: center;
      margin-right: 6px;
    }
    .mode {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      border-radius: 12px;
      cursor: pointer;
      border: 1px solid var(--ev-line-2);
      background: transparent;
      color: var(--ev-ink-dim);
      font-size: 12px;
      letter-spacing: .06em;
      font-family: "JetBrains Mono", monospace;
      transition: all .15s;
    }
    .mode:hover { color: var(--ev-ink); border-color: var(--ev-accent); }
    .mode.on {
      background: rgba(14,165,233,.10);
      color: var(--ev-accent);
      border-color: var(--ev-accent);
    }
    .mode .swatch {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
    }
    .evan-readout {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .kpi {
      padding: 14px;
      border: 1px solid var(--ev-line);
      border-radius: 18px;
      background: var(--ev-panel-2);
    }
    .kpi .k {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      color: var(--ev-ink-mute);
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .kpi .v {
      font-size: 20px;
      font-weight: 700;
      margin-top: 4px;
      display: flex;
      align-items: baseline;
      gap: 4px;
      color: var(--ev-ink);
    }
    .kpi .u {
      font-size: 11px;
      color: var(--ev-ink-dim);
      font-family: "JetBrains Mono", monospace;
    }
    .sp-empty {
      color: var(--ev-ink-dim);
      font-size: 13px;
      line-height: 1.7;
      border: 1px dashed var(--ev-line-2);
      border-radius: 18px;
      padding: 20px;
      background: rgba(255,255,255,.34);
    }
    [data-theme="dark"] .sp-empty {
      background: rgba(8,17,31,.4);
    }
    .sp-empty b { color: var(--ev-ink); }
    .sp-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    .sp-tag {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      color: var(--ev-accent);
      letter-spacing: .2em;
    }
    .sp-title {
      font-size: 24px;
      margin: 4px 0 2px;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--ev-ink);
    }
    .sp-sub {
      font-size: 12px;
      color: var(--ev-ink-dim);
      font-family: "JetBrains Mono", monospace;
      letter-spacing: .05em;
    }
    .sp-section { margin-top: 18px; }
    .sp-section h4 {
      margin: 0 0 8px;
      font-size: 10px;
      letter-spacing: .25em;
      color: var(--ev-ink-mute);
      text-transform: uppercase;
      font-weight: 700;
      font-family: "JetBrains Mono", monospace;
    }
    .sp-section p {
      margin: 0;
      font-size: 13px;
      line-height: 1.7;
      color: var(--ev-ink);
    }
    .specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--ev-line);
      border: 1px solid var(--ev-line);
      border-radius: 14px;
      overflow: hidden;
    }
    .spec {
      background: var(--ev-panel);
      padding: 10px 12px;
    }
    .spec .sk {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      color: var(--ev-ink-mute);
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .spec .sv {
      font-size: 14px;
      font-weight: 600;
      margin-top: 3px;
      color: var(--ev-ink);
    }
    .mini-anim {
      height: 140px;
      border: 1px solid var(--ev-line);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(241,245,249,.9), rgba(255,255,255,.92));
      position: relative;
      overflow: hidden;
    }
    [data-theme="dark"] .mini-anim {
      background: #0a1628;
    }
    .sp-close {
      background: transparent;
      border: 1px solid var(--ev-line-2);
      color: var(--ev-ink-dim);
      width: 30px;
      height: 30px;
      border-radius: 8px;
      cursor: pointer;
      font-family: "JetBrains Mono", monospace;
    }
    .sp-close:hover { border-color: var(--ev-danger); color: var(--ev-danger); }
    .evan-compare,
    .evan-complist {
      margin-top: 18px;
      padding: 24px;
      border: 1px solid var(--ev-line);
      border-radius: 28px;
      background: var(--ev-panel);
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }
    .evan-compare h2 {
      margin: 0 0 8px;
      font-size: 22px;
      letter-spacing: -.02em;
    }
    .evan-compare .lead {
      color: var(--ev-ink-dim);
      font-size: 13px;
      margin-bottom: 22px;
      line-height: 1.75;
    }
    .ctable {
      display: grid;
      grid-template-columns: 180px 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--ev-line);
    }
    .ctable > div {
      padding: 12px 14px;
      border-bottom: 1px solid var(--ev-line);
      font-size: 13px;
      color: var(--ev-ink-dim);
    }
    .ctable .h {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--ev-ink-mute);
      text-transform: uppercase;
    }
    .ctable .ice { color: var(--ev-warn); }
    .ctable .ev { color: var(--ev-accent); }
    .ctable .hh {
      background: var(--ev-panel-2);
      font-weight: 700;
    }
    .evan-complist h3 {
      margin: 0 0 14px;
      font-size: 13px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ev-ink-dim);
      font-family: "JetBrains Mono", monospace;
    }
    .cgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
    }
    .ccard {
      padding: 14px;
      border: 1px solid var(--ev-line);
      border-radius: 16px;
      background: var(--ev-panel-2);
      cursor: pointer;
      transition: all .15s;
    }
    .ccard:hover {
      border-color: var(--ev-accent);
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(14,165,233,.10);
    }
    .ccard .cid {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      color: var(--ev-accent);
      letter-spacing: .15em;
    }
    .ccard .cname {
      font-size: 14px;
      font-weight: 700;
      margin-top: 5px;
      color: var(--ev-ink);
    }
    .ccard .cdesc {
      font-size: 11px;
      color: var(--ev-ink-dim);
      margin-top: 5px;
      font-family: "JetBrains Mono", monospace;
    }
    @media (max-width: 1100px) {
      .evan-hero-grid,
      .evan-layout {
        grid-template-columns: 1fr;
      }
      .evan-side-panel {
        position: static;
        max-height: none;
        border-left: none;
        border-top: 1px solid var(--ev-line);
      }
    }
    @media (max-width: 720px) {
      .evan-page { padding-inline: 8px; }
      .evan-hero,
      .evan-stage,
      .evan-compare,
      .evan-complist { padding: 18px; }
      .evan-readout { grid-template-columns: repeat(2, 1fr); }
      .specs,
      .ctable { grid-template-columns: 1fr; }
      .ctable .hh:nth-child(2),
      .ctable .hh:nth-child(3) { display: none; }
    }