/* Original white dot-lattice cover, paired with the warm Claude cover. */
.ai-evals-art { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 100%; min-height: 0; color: #f5f5f5; background: radial-gradient(ellipse at 43% 49%, #1c1d20, #101114 52%, #090a0c); }
.ai-evals-art::before { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#ffffff1c .7px, transparent .7px); background-size: 12px 12px; mask-image: radial-gradient(ellipse, #000, transparent 80%); content: ''; }
.ai-evals-art__canvas, .ai-evals-art__labels { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ai-evals-art__labels { pointer-events: none; }
.ai-evals-art__label { fill: #b9bcc4; font: 10px "IBM Plex Mono", monospace; letter-spacing: 1.4px; text-anchor: middle; }
.ai-evals-art__trace-label { fill: #777b85; font: 8px "IBM Plex Mono", monospace; letter-spacing: .9px; }
.writing-section .writing-visual--ai-evals { display: block; padding: 0; background: #101114; }
.note-card__media--ai-evals::after { background: linear-gradient(to top, #0004, transparent 25%); }
.note-hero-art--ai-evals { max-width: 900px; margin: 52px auto 0; }
.note-hero-art--ai-evals > .ai-evals-art { aspect-ratio: 16 / 9; border: 1px solid var(--hairline); border-radius: 16px; }
@media (max-width: 600px) { .note-hero-art--ai-evals { margin-top: 34px; } }