.et-body {
  --et-accent: #8a92f6;
  --et-accent-soft: #c3c8ff;
  --et-ink: #07070e;
  --et-ok: #55d98a;
  --et-warn: #f7bd62;
  --ao-line: color-mix(in srgb, var(--line, #2a2440) 76%, #8a92f6 24%);
  background-image:
    radial-gradient(circle at 86% 1%, rgba(138, 146, 246, .13), transparent 32rem),
    radial-gradient(circle at 4% 26%, rgba(138, 146, 246, .05), transparent 28rem);
}
.et-body .app-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--ao-line);
  background: color-mix(in srgb, var(--et-ink) 88%, transparent);
  backdrop-filter: blur(16px);
}
.et-body .bx-x { color: var(--et-accent-soft); }
.et-body .ao-action-primary { color: var(--et-accent-soft); border-color: color-mix(in srgb, var(--et-accent) 62%, transparent); }
.et-body .ao-action-primary:hover,
.et-body .ao-action-primary:focus-visible { background: color-mix(in srgb, var(--et-accent) 14%, transparent); color: #eef0ff; }
.et-body .lang-opt { width: 100%; border: 0; background: transparent; text-align: start; }


.et-src { margin-top: 10px; font-size: 11px; color: var(--muted, #8b86a3); overflow-wrap: anywhere; }
.et-src[data-ours="1"]::before { content: "● "; color: var(--et-ok); }
.et-src[data-ours="0"]::before { content: "● "; color: var(--et-warn); }


.et-spark { display: block; width: 100%; height: 64px; margin-top: 12px; }
.et-spark-line { fill: none; stroke: var(--et-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.et-spark-area { fill: color-mix(in srgb, var(--et-accent) 14%, transparent); stroke: none; }
.et-spark-range { margin: 4px 0 0; color: var(--muted, #8b86a3); font: 500 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }


.et-bars { gap: 12px; margin-top: 14px; }
.et-bars .ao-power-row > div { min-width: 0; }
.et-bars .ao-power-row span:first-child { min-width: 0; overflow-wrap: anywhere; }
.et-bars .ao-power-track i { background: var(--et-accent); }

.et-body .ao-table tr.et-ours td { background: color-mix(in srgb, var(--et-accent) 12%, transparent); }
.et-body .ao-table code { overflow-wrap: anywhere; }
.et-whales a { color: inherit; text-decoration: none; }
.et-whales a:hover code, .et-whales a:focus-visible code { color: var(--et-accent-soft); }


.et-body .ao-stats .ao-stat-big { grid-column: span 2; }
.et-body .ao-note a { color: var(--et-accent-soft); }

@media (max-width: 640px) {
  .et-body .ao-pulse-rail dd { font-size: 18px; }
}