AEO Visibility Console Hero
Decorative dashboard-mockup hero graphic — browser frame, area chart, radar and bars. Restyle via --lk-* CSS variables.
Install
npx shadcn@latest add https://visual-blocks.akiho.dev/r/visibility-console-hero.jsonnpx skills add akifo/landerkitBlocks work with zero setup thanks to baked defaults. Set --lk-accent(and optionally --lk-bg / --lk-radius /--lk-font / --lk-grid) on :rootor any wrapper to restyle.
Source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" role="img" aria-label="Dashboard mockup graphic — decorative" class="lk-block" data-lk="visibility-console-hero" data-lk-contract="1">
<title>Dashboard mockup graphic</title>
<desc>Decorative dashboard graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="visibility-console-hero"] {
--_accent: var(--lk-accent, #4BE0C3);
--_bg: var(--lk-bg, #0A0F14);
--_radius: var(--lk-radius, 12px);
--_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);
--_i2: color-mix(in oklab, var(--_i) 62%, transparent);
--_i3: color-mix(in oklab, var(--_i) 42%, transparent);
--_hair: color-mix(in oklab, var(--_i) 8%, transparent);
--_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));
--_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));
--_soft: color-mix(in oklab, var(--_accent) 24%, transparent);
--_faint: color-mix(in oklab, var(--_accent) 12%, transparent);
--_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));
color: var(--_accent);
font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);
}
/* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */
[data-lk="visibility-console-hero"] text,
[data-lk="visibility-console-hero"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="visibility-console-hero"] */
[data-lk="visibility-console-hero"] .bed{fill:var(--_bg)}
[data-lk="visibility-console-hero"] .dots{fill:var(--_g)}
[data-lk="visibility-console-hero"] .grid{fill:none;stroke:var(--_g)}
[data-lk="visibility-console-hero"] .cgrid{fill:none;stroke:var(--_g);stroke-dasharray:1.5 3}
[data-lk="visibility-console-hero"] .hair{fill:none;stroke:var(--_hair)}
[data-lk="visibility-console-hero"] .card{fill:var(--_surf);stroke:var(--_hair);rx:var(--_radius)}
[data-lk="visibility-console-hero"] .glowa{fill:color-mix(in oklab,var(--_accent) 5%,transparent)}
[data-lk="visibility-console-hero"] .glowb{fill:color-mix(in oklab,var(--_accent) 9%,transparent)}
[data-lk="visibility-console-hero"] .glowc{fill:var(--_faint)}
[data-lk="visibility-console-hero"] .rail{fill:none;stroke:var(--_i3);rx:calc(var(--_radius) * .5)}
[data-lk="visibility-console-hero"] .active{fill:var(--_faint);stroke:var(--_accent);stroke-width:1.5;rx:calc(var(--_radius) * .5)}
[data-lk="visibility-console-hero"] .wdot{fill:var(--_i3)}
[data-lk="visibility-console-hero"] .pill{fill:var(--_surf);stroke:var(--_hair);rx:calc(var(--_radius) * .58)}
[data-lk="visibility-console-hero"] .track{fill:var(--_g);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .tick{fill:var(--_accent)}
[data-lk="visibility-console-hero"] .bloom{fill:var(--_glow);opacity:.25;rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar1{fill:var(--_accent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar2{fill:color-mix(in oklab,var(--_accent) 78%,transparent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar3{fill:color-mix(in oklab,var(--_accent) 58%,transparent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar4{fill:color-mix(in oklab,var(--_accent) 40%,transparent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar5{fill:color-mix(in oklab,var(--_accent) 26%,transparent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .afar{fill:var(--_soft)}
[data-lk="visibility-console-hero"] .lift{fill:none;stroke:var(--_glow);stroke-width:3.5;opacity:.25;stroke-linecap:round;stroke-linejoin:round}
[data-lk="visibility-console-hero"] .line{fill:none;stroke:var(--_accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[data-lk="visibility-console-hero"] .cmp{fill:none;stroke:var(--_i3);stroke-dasharray:4 3;stroke-linejoin:round}
[data-lk="visibility-console-hero"] .you{fill:var(--_soft);stroke:var(--_accent);stroke-width:1.5;stroke-linejoin:round}
[data-lk="visibility-console-hero"] .cursor{fill:none;stroke:var(--_i3);stroke-dasharray:4 3}
[data-lk="visibility-console-hero"] .halo{fill:var(--_faint)}
[data-lk="visibility-console-hero"] .dot{fill:var(--_surf);stroke:var(--_accent);stroke-width:1.5}
[data-lk="visibility-console-hero"] .skn{fill:var(--_i2)}
[data-lk="visibility-console-hero"] .sk{fill:var(--_i3)}
/* Hover motion (opt-out): 2 stages. (1) the whole dashboard content fades in and
rises slightly as one move. (2) the chart trace reveals left to right via a clip
sweep while the KPI value tiles grow scaleX from the left, lightly staggered.
Off for reduced-motion visitors; set the motion token to 0 to force off. */
[data-lk="visibility-console-hero"] .kpi { transform-box: fill-box; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="visibility-console-hero"]:hover .stage { animation: lk-visibility-console-hero-rise calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="visibility-console-hero"]:hover .series { animation: lk-visibility-console-hero-reveal calc(var(--lk-motion, 1) * .5s) cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--lk-motion, 1) * .55s); }
[data-lk="visibility-console-hero"]:hover .kpi { animation: lk-visibility-console-hero-grow calc(var(--lk-motion, 1) * .45s) cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--lk-motion, 1) * .55s); }
[data-lk="visibility-console-hero"]:hover .k2 { animation-delay: calc(var(--lk-motion, 1) * .6s); }
[data-lk="visibility-console-hero"]:hover .k3 { animation-delay: calc(var(--lk-motion, 1) * .65s); }
[data-lk="visibility-console-hero"]:hover .k4 { animation-delay: calc(var(--lk-motion, 1) * .7s); }
}
@keyframes lk-visibility-console-hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lk-visibility-console-hero-reveal { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }
@keyframes lk-visibility-console-hero-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
</style>
<rect class="bed" width="1200" height="675" fill="#0A0F14"/>
<!-- backdrop grid + réseau (grid token) -->
<path class="dots" d="M20 20h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2z" fill="#1C262C"/>
<path class="grid" d="M37 28h6M40 25v6M1157 28h6M1160 25v6M37 648h6M40 645v6M1157 648h6M1160 645v6" fill="none"/>
<!-- soft glow: stacked flat ellipses, no blur -->
<ellipse class="glowa" cx="1132" cy="42" rx="232" ry="166" fill="#4BE0C30D"/>
<ellipse class="glowb" cx="1132" cy="42" rx="150" ry="106" fill="#4BE0C317"/>
<ellipse class="glowc" cx="1132" cy="42" rx="88" ry="60" fill="#4BE0C31F"/>
<!-- window frame + chrome -->
<g class="stage">
<rect class="card" x="88" y="52" width="1024" height="560" rx="12" fill="#0E141B" stroke="#1A2128"/>
<circle class="wdot" cx="116" cy="72" r="5" fill="#E6EDEE6B"/>
<circle class="wdot" cx="136" cy="72" r="5" fill="#E6EDEE6B"/>
<circle class="wdot" cx="156" cy="72" r="5" fill="#E6EDEE6B"/>
<rect class="pill" x="500" y="61" width="200" height="22" rx="7" fill="#0E141B" stroke="#1A2128"/>
<rect class="sk" x="540" y="68" width="120" height="8" rx="4" fill="#E6EDEE6B"/>
<line class="hair" x1="88" y1="92" x2="1112" y2="92" stroke="#1A2128"/>
<!-- icon rail (2nd active) -->
<line class="hair" x1="150" y1="92" x2="150" y2="612" stroke="#1A2128"/>
<rect class="rail" x="106" y="115" width="26" height="26" rx="6" fill="none" stroke="#E6EDEE6B"/>
<rect class="active" x="106" y="167" width="26" height="26" rx="6" fill="#4BE0C31F" stroke="#4BE0C3" stroke-width="1.5"/>
<rect class="rail" x="106" y="219" width="26" height="26" rx="6" fill="none" stroke="#E6EDEE6B"/>
<rect class="rail" x="106" y="271" width="26" height="26" rx="6" fill="none" stroke="#E6EDEE6B"/>
<rect class="rail" x="106" y="323" width="26" height="26" rx="6" fill="none" stroke="#E6EDEE6B"/>
<!-- header: title and subtitle placeholders + date control outline -->
<rect class="skn" x="176" y="110" width="236" height="18" rx="5" fill="#E6EDEE9E"/>
<rect class="sk" x="176" y="135" width="150" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="pill" x="912" y="112" width="176" height="28" rx="7" fill="#0E141B" stroke="#1A2128"/>
<rect class="sk" x="930" y="122" width="96" height="8" rx="4" fill="#E6EDEE6B"/>
<path class="sk" d="M1050 124h12l-6 6z" fill="#E6EDEE6B"/>
<line class="hair" x1="176" y1="150" x2="1088" y2="150" stroke="#1A2128"/>
<!-- KPI strip: four metric tiles as label, value and delta placeholders -->
<line class="hair" x1="404" y1="170" x2="404" y2="250" stroke="#1A2128"/>
<line class="hair" x1="632" y1="170" x2="632" y2="250" stroke="#1A2128"/>
<line class="hair" x1="860" y1="170" x2="860" y2="250" stroke="#1A2128"/>
<g class="kpi k1">
<rect class="sk" x="188" y="178" width="96" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="skn" x="188" y="196" width="52" height="22" rx="4" fill="#E6EDEE9E"/>
<rect class="sk" x="188" y="232" width="56" height="7" rx="3.5" fill="#E6EDEE6B"/>
</g>
<g class="kpi k2">
<rect class="sk" x="416" y="178" width="72" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="skn" x="416" y="196" width="96" height="22" rx="4" fill="#E6EDEE9E"/>
<rect class="sk" x="416" y="232" width="56" height="7" rx="3.5" fill="#E6EDEE6B"/>
</g>
<g class="kpi k3">
<rect class="sk" x="644" y="178" width="104" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="skn" x="644" y="196" width="84" height="22" rx="4" fill="#E6EDEE9E"/>
<rect class="sk" x="644" y="232" width="48" height="7" rx="3.5" fill="#E6EDEE6B"/>
</g>
<g class="kpi k4">
<rect class="sk" x="872" y="178" width="100" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="skn" x="872" y="196" width="50" height="22" rx="4" fill="#E6EDEE9E"/>
<rect class="sk" x="872" y="232" width="44" height="7" rx="3.5" fill="#E6EDEE6B"/>
</g>
<line class="hair" x1="176" y1="262" x2="1088" y2="262" stroke="#1A2128"/>
<!-- area chart: section label + gridlines + trace with end marker -->
<rect class="sk" x="176" y="288" width="116" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="sk" x="636" y="289" width="64" height="7" rx="3.5" fill="#E6EDEE6B"/>
<line class="cgrid" x1="196" y1="340" x2="684" y2="340" stroke="#1C262C" stroke-dasharray="1.5 3"/>
<line class="cgrid" x1="196" y1="374" x2="684" y2="374" stroke="#1C262C" stroke-dasharray="1.5 3"/>
<line class="cgrid" x1="196" y1="408" x2="684" y2="408" stroke="#1C262C" stroke-dasharray="1.5 3"/>
<line class="hair" x1="196" y1="442" x2="684" y2="442" stroke="#1A2128"/>
<path class="grid" d="M227 329h6M230 326v6" fill="none"/>
<g class="series">
<path class="afar" d="M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5 L676 442 L200 442 Z" fill="#4BE0C33D"/>
<path class="lift" d="M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
<path class="line" d="M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
<line class="cursor" x1="676" y1="322" x2="676" y2="442" stroke="#E6EDEE6B" stroke-dasharray="4 3"/>
<circle class="halo" cx="676" cy="367.5" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="676" cy="367.5" r="2.6" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<!-- topic radar: primary shape vs dashed comparison -->
<line class="hair" x1="724" y1="288" x2="724" y2="466" stroke="#1A2128"/>
<rect class="sk" x="834" y="288" width="132" height="8" rx="4" fill="#E6EDEE6B"/>
<polygon class="grid" points="900,310 964.1,347 964.1,421 900,458 835.9,421 835.9,347" fill="none"/>
<polygon class="grid" points="900,347 932,365.5 932,402.5 900,421 868,402.5 868,365.5" fill="none"/>
<path class="grid" d="M900 384L900 310M900 384L964.1 347M900 384L964.1 421M900 384L900 458M900 384L835.9 421M900 384L835.9 347" fill="none"/>
<polygon class="cmp" points="900,338.9 944.9,358.1 933.3,403.2 900,419.5 863.5,405.1 857.7,359.6" fill="none" stroke="#E6EDEE6B" stroke-dasharray="4 3"/>
<polygon class="lift" points="900,326.3 941,360.3 945.5,410.3 900,424.7 847.4,414.3 861.5,361.8" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
<polygon class="you" points="900,326.3 941,360.3 945.5,410.3 900,424.7 847.4,414.3 861.5,361.8" fill="#4BE0C33D" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="900" cy="326.3" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="941" cy="360.3" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="945.5" cy="410.3" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="900" cy="424.7" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="847.4" cy="414.3" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="861.5" cy="361.8" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<!-- brand ranking: stepped bars with leader tick + tip marker -->
<line class="hair" x1="176" y1="482" x2="1088" y2="482" stroke="#1A2128"/>
<rect class="sk" x="176" y="493" width="124" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="sk" x="976" y="494" width="64" height="7" rx="3.5" fill="#E6EDEE6B"/>
<rect class="tick" x="168" y="507" width="3" height="12" fill="#4BE0C3"/>
<circle class="wdot" cx="190" cy="512" r="4" fill="#E6EDEE6B"/>
<circle class="wdot" cx="190" cy="532" r="4" fill="#E6EDEE6B"/>
<circle class="wdot" cx="190" cy="552" r="4" fill="#E6EDEE6B"/>
<circle class="wdot" cx="190" cy="572" r="4" fill="#E6EDEE6B"/>
<circle class="wdot" cx="190" cy="592" r="4" fill="#E6EDEE6B"/>
<rect class="track" x="210" y="509" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bloom" x="209" y="508" width="711.7" height="8" rx="3" fill="#2E8274" opacity=".25"/>
<rect class="bar1" x="210" y="509" width="709.7" height="6" rx="3" fill="#4BE0C3"/>
<circle class="halo" cx="919.7" cy="512" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="919.7" cy="512" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<rect class="track" x="210" y="529" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bar2" x="210" y="529" width="572.7" height="6" rx="3" fill="#4BE0C3C8"/>
<rect class="track" x="210" y="549" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bar3" x="210" y="549" width="392.2" height="6" rx="3" fill="#4BE0C394"/>
<rect class="track" x="210" y="569" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bar4" x="210" y="569" width="222" height="6" rx="3" fill="#4BE0C366"/>
<rect class="track" x="210" y="589" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bar5" x="210" y="589" width="124.5" height="6" rx="3" fill="#4BE0C342"/>
</g>
</svg>
/* GENERATED FROM blocks/ (catalog.json + *.svg + _contract/) — DO NOT EDIT. Run `pnpm generate`. */
import type { HTMLAttributes } from 'react';
const svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 675\" role=\"img\" aria-label=\"Dashboard mockup graphic — decorative\" class=\"lk-block\" data-lk=\"visibility-console-hero\" data-lk-contract=\"1\">\n <title>Dashboard mockup graphic</title>\n <desc>Decorative dashboard graphic. Illustrative shape only; any implied data is fictional.</desc>\n <style>\n /* lk-contract v1 — synced from blocks/_contract/header.css */\n [data-lk=\"visibility-console-hero\"] {\n --_accent: var(--lk-accent, #4BE0C3);\n --_bg: var(--lk-bg, #0A0F14);\n --_radius: var(--lk-radius, 12px);\n --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);\n --_i2: color-mix(in oklab, var(--_i) 62%, transparent);\n --_i3: color-mix(in oklab, var(--_i) 42%, transparent);\n --_hair: color-mix(in oklab, var(--_i) 8%, transparent);\n --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));\n --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));\n --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);\n --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);\n --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));\n color: var(--_accent);\n font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);\n }\n /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */\n [data-lk=\"visibility-console-hero\"] text,\n [data-lk=\"visibility-console-hero\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"visibility-console-hero\"] */\n [data-lk=\"visibility-console-hero\"] .bed{fill:var(--_bg)}\n [data-lk=\"visibility-console-hero\"] .dots{fill:var(--_g)}\n [data-lk=\"visibility-console-hero\"] .grid{fill:none;stroke:var(--_g)}\n [data-lk=\"visibility-console-hero\"] .cgrid{fill:none;stroke:var(--_g);stroke-dasharray:1.5 3}\n [data-lk=\"visibility-console-hero\"] .hair{fill:none;stroke:var(--_hair)}\n [data-lk=\"visibility-console-hero\"] .card{fill:var(--_surf);stroke:var(--_hair);rx:var(--_radius)}\n [data-lk=\"visibility-console-hero\"] .glowa{fill:color-mix(in oklab,var(--_accent) 5%,transparent)}\n [data-lk=\"visibility-console-hero\"] .glowb{fill:color-mix(in oklab,var(--_accent) 9%,transparent)}\n [data-lk=\"visibility-console-hero\"] .glowc{fill:var(--_faint)}\n [data-lk=\"visibility-console-hero\"] .rail{fill:none;stroke:var(--_i3);rx:calc(var(--_radius) * .5)}\n [data-lk=\"visibility-console-hero\"] .active{fill:var(--_faint);stroke:var(--_accent);stroke-width:1.5;rx:calc(var(--_radius) * .5)}\n [data-lk=\"visibility-console-hero\"] .wdot{fill:var(--_i3)}\n [data-lk=\"visibility-console-hero\"] .pill{fill:var(--_surf);stroke:var(--_hair);rx:calc(var(--_radius) * .58)}\n [data-lk=\"visibility-console-hero\"] .track{fill:var(--_g);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .tick{fill:var(--_accent)}\n [data-lk=\"visibility-console-hero\"] .bloom{fill:var(--_glow);opacity:.25;rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar1{fill:var(--_accent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar2{fill:color-mix(in oklab,var(--_accent) 78%,transparent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar3{fill:color-mix(in oklab,var(--_accent) 58%,transparent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar4{fill:color-mix(in oklab,var(--_accent) 40%,transparent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar5{fill:color-mix(in oklab,var(--_accent) 26%,transparent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .afar{fill:var(--_soft)}\n [data-lk=\"visibility-console-hero\"] .lift{fill:none;stroke:var(--_glow);stroke-width:3.5;opacity:.25;stroke-linecap:round;stroke-linejoin:round}\n [data-lk=\"visibility-console-hero\"] .line{fill:none;stroke:var(--_accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}\n [data-lk=\"visibility-console-hero\"] .cmp{fill:none;stroke:var(--_i3);stroke-dasharray:4 3;stroke-linejoin:round}\n [data-lk=\"visibility-console-hero\"] .you{fill:var(--_soft);stroke:var(--_accent);stroke-width:1.5;stroke-linejoin:round}\n [data-lk=\"visibility-console-hero\"] .cursor{fill:none;stroke:var(--_i3);stroke-dasharray:4 3}\n [data-lk=\"visibility-console-hero\"] .halo{fill:var(--_faint)}\n [data-lk=\"visibility-console-hero\"] .dot{fill:var(--_surf);stroke:var(--_accent);stroke-width:1.5}\n [data-lk=\"visibility-console-hero\"] .skn{fill:var(--_i2)}\n [data-lk=\"visibility-console-hero\"] .sk{fill:var(--_i3)}\n\n /* Hover motion (opt-out): 2 stages. (1) the whole dashboard content fades in and\n rises slightly as one move. (2) the chart trace reveals left to right via a clip\n sweep while the KPI value tiles grow scaleX from the left, lightly staggered.\n Off for reduced-motion visitors; set the motion token to 0 to force off. */\n [data-lk=\"visibility-console-hero\"] .kpi { transform-box: fill-box; transform-origin: left; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"visibility-console-hero\"]:hover .stage { animation: lk-visibility-console-hero-rise calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"visibility-console-hero\"]:hover .series { animation: lk-visibility-console-hero-reveal calc(var(--lk-motion, 1) * .5s) cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--lk-motion, 1) * .55s); }\n [data-lk=\"visibility-console-hero\"]:hover .kpi { animation: lk-visibility-console-hero-grow calc(var(--lk-motion, 1) * .45s) cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--lk-motion, 1) * .55s); }\n [data-lk=\"visibility-console-hero\"]:hover .k2 { animation-delay: calc(var(--lk-motion, 1) * .6s); }\n [data-lk=\"visibility-console-hero\"]:hover .k3 { animation-delay: calc(var(--lk-motion, 1) * .65s); }\n [data-lk=\"visibility-console-hero\"]:hover .k4 { animation-delay: calc(var(--lk-motion, 1) * .7s); }\n }\n @keyframes lk-visibility-console-hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes lk-visibility-console-hero-reveal { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }\n @keyframes lk-visibility-console-hero-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n </style>\n\n <rect class=\"bed\" width=\"1200\" height=\"675\" fill=\"#0A0F14\"/>\n\n <!-- backdrop grid + réseau (grid token) -->\n <path class=\"dots\" d=\"M20 20h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2z\" fill=\"#1C262C\"/>\n <path class=\"grid\" d=\"M37 28h6M40 25v6M1157 28h6M1160 25v6M37 648h6M40 645v6M1157 648h6M1160 645v6\" fill=\"none\"/>\n\n <!-- soft glow: stacked flat ellipses, no blur -->\n <ellipse class=\"glowa\" cx=\"1132\" cy=\"42\" rx=\"232\" ry=\"166\" fill=\"#4BE0C30D\"/>\n <ellipse class=\"glowb\" cx=\"1132\" cy=\"42\" rx=\"150\" ry=\"106\" fill=\"#4BE0C317\"/>\n <ellipse class=\"glowc\" cx=\"1132\" cy=\"42\" rx=\"88\" ry=\"60\" fill=\"#4BE0C31F\"/>\n\n <!-- window frame + chrome -->\n <g class=\"stage\">\n <rect class=\"card\" x=\"88\" y=\"52\" width=\"1024\" height=\"560\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n <circle class=\"wdot\" cx=\"116\" cy=\"72\" r=\"5\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"136\" cy=\"72\" r=\"5\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"156\" cy=\"72\" r=\"5\" fill=\"#E6EDEE6B\"/>\n <rect class=\"pill\" x=\"500\" y=\"61\" width=\"200\" height=\"22\" rx=\"7\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n <rect class=\"sk\" x=\"540\" y=\"68\" width=\"120\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <line class=\"hair\" x1=\"88\" y1=\"92\" x2=\"1112\" y2=\"92\" stroke=\"#1A2128\"/>\n\n <!-- icon rail (2nd active) -->\n <line class=\"hair\" x1=\"150\" y1=\"92\" x2=\"150\" y2=\"612\" stroke=\"#1A2128\"/>\n <rect class=\"rail\" x=\"106\" y=\"115\" width=\"26\" height=\"26\" rx=\"6\" fill=\"none\" stroke=\"#E6EDEE6B\"/>\n <rect class=\"active\" x=\"106\" y=\"167\" width=\"26\" height=\"26\" rx=\"6\" fill=\"#4BE0C31F\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <rect class=\"rail\" x=\"106\" y=\"219\" width=\"26\" height=\"26\" rx=\"6\" fill=\"none\" stroke=\"#E6EDEE6B\"/>\n <rect class=\"rail\" x=\"106\" y=\"271\" width=\"26\" height=\"26\" rx=\"6\" fill=\"none\" stroke=\"#E6EDEE6B\"/>\n <rect class=\"rail\" x=\"106\" y=\"323\" width=\"26\" height=\"26\" rx=\"6\" fill=\"none\" stroke=\"#E6EDEE6B\"/>\n\n <!-- header: title and subtitle placeholders + date control outline -->\n <rect class=\"skn\" x=\"176\" y=\"110\" width=\"236\" height=\"18\" rx=\"5\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"176\" y=\"135\" width=\"150\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"pill\" x=\"912\" y=\"112\" width=\"176\" height=\"28\" rx=\"7\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n <rect class=\"sk\" x=\"930\" y=\"122\" width=\"96\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <path class=\"sk\" d=\"M1050 124h12l-6 6z\" fill=\"#E6EDEE6B\"/>\n <line class=\"hair\" x1=\"176\" y1=\"150\" x2=\"1088\" y2=\"150\" stroke=\"#1A2128\"/>\n\n <!-- KPI strip: four metric tiles as label, value and delta placeholders -->\n <line class=\"hair\" x1=\"404\" y1=\"170\" x2=\"404\" y2=\"250\" stroke=\"#1A2128\"/>\n <line class=\"hair\" x1=\"632\" y1=\"170\" x2=\"632\" y2=\"250\" stroke=\"#1A2128\"/>\n <line class=\"hair\" x1=\"860\" y1=\"170\" x2=\"860\" y2=\"250\" stroke=\"#1A2128\"/>\n <g class=\"kpi k1\">\n <rect class=\"sk\" x=\"188\" y=\"178\" width=\"96\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"skn\" x=\"188\" y=\"196\" width=\"52\" height=\"22\" rx=\"4\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"188\" y=\"232\" width=\"56\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n </g>\n <g class=\"kpi k2\">\n <rect class=\"sk\" x=\"416\" y=\"178\" width=\"72\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"skn\" x=\"416\" y=\"196\" width=\"96\" height=\"22\" rx=\"4\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"416\" y=\"232\" width=\"56\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n </g>\n <g class=\"kpi k3\">\n <rect class=\"sk\" x=\"644\" y=\"178\" width=\"104\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"skn\" x=\"644\" y=\"196\" width=\"84\" height=\"22\" rx=\"4\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"644\" y=\"232\" width=\"48\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n </g>\n <g class=\"kpi k4\">\n <rect class=\"sk\" x=\"872\" y=\"178\" width=\"100\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"skn\" x=\"872\" y=\"196\" width=\"50\" height=\"22\" rx=\"4\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"872\" y=\"232\" width=\"44\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n </g>\n <line class=\"hair\" x1=\"176\" y1=\"262\" x2=\"1088\" y2=\"262\" stroke=\"#1A2128\"/>\n\n <!-- area chart: section label + gridlines + trace with end marker -->\n <rect class=\"sk\" x=\"176\" y=\"288\" width=\"116\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"sk\" x=\"636\" y=\"289\" width=\"64\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n <line class=\"cgrid\" x1=\"196\" y1=\"340\" x2=\"684\" y2=\"340\" stroke=\"#1C262C\" stroke-dasharray=\"1.5 3\"/>\n <line class=\"cgrid\" x1=\"196\" y1=\"374\" x2=\"684\" y2=\"374\" stroke=\"#1C262C\" stroke-dasharray=\"1.5 3\"/>\n <line class=\"cgrid\" x1=\"196\" y1=\"408\" x2=\"684\" y2=\"408\" stroke=\"#1C262C\" stroke-dasharray=\"1.5 3\"/>\n <line class=\"hair\" x1=\"196\" y1=\"442\" x2=\"684\" y2=\"442\" stroke=\"#1A2128\"/>\n <path class=\"grid\" d=\"M227 329h6M230 326v6\" fill=\"none\"/>\n <g class=\"series\">\n <path class=\"afar\" d=\"M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5 L676 442 L200 442 Z\" fill=\"#4BE0C33D\"/>\n <path class=\"lift\" d=\"M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5\" fill=\"none\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\"/>\n <path class=\"line\" d=\"M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <line class=\"cursor\" x1=\"676\" y1=\"322\" x2=\"676\" y2=\"442\" stroke=\"#E6EDEE6B\" stroke-dasharray=\"4 3\"/>\n <circle class=\"halo\" cx=\"676\" cy=\"367.5\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"676\" cy=\"367.5\" r=\"2.6\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n\n <!-- topic radar: primary shape vs dashed comparison -->\n <line class=\"hair\" x1=\"724\" y1=\"288\" x2=\"724\" y2=\"466\" stroke=\"#1A2128\"/>\n <rect class=\"sk\" x=\"834\" y=\"288\" width=\"132\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <polygon class=\"grid\" points=\"900,310 964.1,347 964.1,421 900,458 835.9,421 835.9,347\" fill=\"none\"/>\n <polygon class=\"grid\" points=\"900,347 932,365.5 932,402.5 900,421 868,402.5 868,365.5\" fill=\"none\"/>\n <path class=\"grid\" d=\"M900 384L900 310M900 384L964.1 347M900 384L964.1 421M900 384L900 458M900 384L835.9 421M900 384L835.9 347\" fill=\"none\"/>\n <polygon class=\"cmp\" points=\"900,338.9 944.9,358.1 933.3,403.2 900,419.5 863.5,405.1 857.7,359.6\" fill=\"none\" stroke=\"#E6EDEE6B\" stroke-dasharray=\"4 3\"/>\n <polygon class=\"lift\" points=\"900,326.3 941,360.3 945.5,410.3 900,424.7 847.4,414.3 861.5,361.8\" fill=\"none\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\"/>\n <polygon class=\"you\" points=\"900,326.3 941,360.3 945.5,410.3 900,424.7 847.4,414.3 861.5,361.8\" fill=\"#4BE0C33D\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"900\" cy=\"326.3\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"941\" cy=\"360.3\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"945.5\" cy=\"410.3\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"900\" cy=\"424.7\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"847.4\" cy=\"414.3\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"861.5\" cy=\"361.8\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n\n <!-- brand ranking: stepped bars with leader tick + tip marker -->\n <line class=\"hair\" x1=\"176\" y1=\"482\" x2=\"1088\" y2=\"482\" stroke=\"#1A2128\"/>\n <rect class=\"sk\" x=\"176\" y=\"493\" width=\"124\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"sk\" x=\"976\" y=\"494\" width=\"64\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n <rect class=\"tick\" x=\"168\" y=\"507\" width=\"3\" height=\"12\" fill=\"#4BE0C3\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"512\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"532\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"552\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"572\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"592\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"track\" x=\"210\" y=\"509\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bloom\" x=\"209\" y=\"508\" width=\"711.7\" height=\"8\" rx=\"3\" fill=\"#2E8274\" opacity=\".25\"/>\n <rect class=\"bar1\" x=\"210\" y=\"509\" width=\"709.7\" height=\"6\" rx=\"3\" fill=\"#4BE0C3\"/>\n <circle class=\"halo\" cx=\"919.7\" cy=\"512\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"919.7\" cy=\"512\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"210\" y=\"529\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bar2\" x=\"210\" y=\"529\" width=\"572.7\" height=\"6\" rx=\"3\" fill=\"#4BE0C3C8\"/>\n <rect class=\"track\" x=\"210\" y=\"549\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bar3\" x=\"210\" y=\"549\" width=\"392.2\" height=\"6\" rx=\"3\" fill=\"#4BE0C394\"/>\n <rect class=\"track\" x=\"210\" y=\"569\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bar4\" x=\"210\" y=\"569\" width=\"222\" height=\"6\" rx=\"3\" fill=\"#4BE0C366\"/>\n <rect class=\"track\" x=\"210\" y=\"589\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bar5\" x=\"210\" y=\"589\" width=\"124.5\" height=\"6\" rx=\"3\" fill=\"#4BE0C342\"/>\n </g>\n</svg>\n";
export function AEOVisibilityConsoleHero(props: HTMLAttributes<HTMLDivElement>) {
return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
}
export default AEOVisibilityConsoleHero;
<!-- GENERATED FROM blocks/ (catalog.json + *.svg + _contract/) — DO NOT EDIT. Run `pnpm generate`. -->
<template>
<div v-html="svg" />
</template>
<script setup lang="ts">
const svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 675\" role=\"img\" aria-label=\"Dashboard mockup graphic — decorative\" class=\"lk-block\" data-lk=\"visibility-console-hero\" data-lk-contract=\"1\">\n <title>Dashboard mockup graphic</title>\n <desc>Decorative dashboard graphic. Illustrative shape only; any implied data is fictional.</desc>\n <style>\n /* lk-contract v1 — synced from blocks/_contract/header.css */\n [data-lk=\"visibility-console-hero\"] {\n --_accent: var(--lk-accent, #4BE0C3);\n --_bg: var(--lk-bg, #0A0F14);\n --_radius: var(--lk-radius, 12px);\n --_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);\n --_i2: color-mix(in oklab, var(--_i) 62%, transparent);\n --_i3: color-mix(in oklab, var(--_i) 42%, transparent);\n --_hair: color-mix(in oklab, var(--_i) 8%, transparent);\n --_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));\n --_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));\n --_soft: color-mix(in oklab, var(--_accent) 24%, transparent);\n --_faint: color-mix(in oklab, var(--_accent) 12%, transparent);\n --_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));\n color: var(--_accent);\n font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);\n }\n /* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */\n [data-lk=\"visibility-console-hero\"] text,\n [data-lk=\"visibility-console-hero\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"visibility-console-hero\"] */\n [data-lk=\"visibility-console-hero\"] .bed{fill:var(--_bg)}\n [data-lk=\"visibility-console-hero\"] .dots{fill:var(--_g)}\n [data-lk=\"visibility-console-hero\"] .grid{fill:none;stroke:var(--_g)}\n [data-lk=\"visibility-console-hero\"] .cgrid{fill:none;stroke:var(--_g);stroke-dasharray:1.5 3}\n [data-lk=\"visibility-console-hero\"] .hair{fill:none;stroke:var(--_hair)}\n [data-lk=\"visibility-console-hero\"] .card{fill:var(--_surf);stroke:var(--_hair);rx:var(--_radius)}\n [data-lk=\"visibility-console-hero\"] .glowa{fill:color-mix(in oklab,var(--_accent) 5%,transparent)}\n [data-lk=\"visibility-console-hero\"] .glowb{fill:color-mix(in oklab,var(--_accent) 9%,transparent)}\n [data-lk=\"visibility-console-hero\"] .glowc{fill:var(--_faint)}\n [data-lk=\"visibility-console-hero\"] .rail{fill:none;stroke:var(--_i3);rx:calc(var(--_radius) * .5)}\n [data-lk=\"visibility-console-hero\"] .active{fill:var(--_faint);stroke:var(--_accent);stroke-width:1.5;rx:calc(var(--_radius) * .5)}\n [data-lk=\"visibility-console-hero\"] .wdot{fill:var(--_i3)}\n [data-lk=\"visibility-console-hero\"] .pill{fill:var(--_surf);stroke:var(--_hair);rx:calc(var(--_radius) * .58)}\n [data-lk=\"visibility-console-hero\"] .track{fill:var(--_g);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .tick{fill:var(--_accent)}\n [data-lk=\"visibility-console-hero\"] .bloom{fill:var(--_glow);opacity:.25;rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar1{fill:var(--_accent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar2{fill:color-mix(in oklab,var(--_accent) 78%,transparent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar3{fill:color-mix(in oklab,var(--_accent) 58%,transparent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar4{fill:color-mix(in oklab,var(--_accent) 40%,transparent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .bar5{fill:color-mix(in oklab,var(--_accent) 26%,transparent);rx:calc(var(--_radius) * .25)}\n [data-lk=\"visibility-console-hero\"] .afar{fill:var(--_soft)}\n [data-lk=\"visibility-console-hero\"] .lift{fill:none;stroke:var(--_glow);stroke-width:3.5;opacity:.25;stroke-linecap:round;stroke-linejoin:round}\n [data-lk=\"visibility-console-hero\"] .line{fill:none;stroke:var(--_accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}\n [data-lk=\"visibility-console-hero\"] .cmp{fill:none;stroke:var(--_i3);stroke-dasharray:4 3;stroke-linejoin:round}\n [data-lk=\"visibility-console-hero\"] .you{fill:var(--_soft);stroke:var(--_accent);stroke-width:1.5;stroke-linejoin:round}\n [data-lk=\"visibility-console-hero\"] .cursor{fill:none;stroke:var(--_i3);stroke-dasharray:4 3}\n [data-lk=\"visibility-console-hero\"] .halo{fill:var(--_faint)}\n [data-lk=\"visibility-console-hero\"] .dot{fill:var(--_surf);stroke:var(--_accent);stroke-width:1.5}\n [data-lk=\"visibility-console-hero\"] .skn{fill:var(--_i2)}\n [data-lk=\"visibility-console-hero\"] .sk{fill:var(--_i3)}\n\n /* Hover motion (opt-out): 2 stages. (1) the whole dashboard content fades in and\n rises slightly as one move. (2) the chart trace reveals left to right via a clip\n sweep while the KPI value tiles grow scaleX from the left, lightly staggered.\n Off for reduced-motion visitors; set the motion token to 0 to force off. */\n [data-lk=\"visibility-console-hero\"] .kpi { transform-box: fill-box; transform-origin: left; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"visibility-console-hero\"]:hover .stage { animation: lk-visibility-console-hero-rise calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"visibility-console-hero\"]:hover .series { animation: lk-visibility-console-hero-reveal calc(var(--lk-motion, 1) * .5s) cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--lk-motion, 1) * .55s); }\n [data-lk=\"visibility-console-hero\"]:hover .kpi { animation: lk-visibility-console-hero-grow calc(var(--lk-motion, 1) * .45s) cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--lk-motion, 1) * .55s); }\n [data-lk=\"visibility-console-hero\"]:hover .k2 { animation-delay: calc(var(--lk-motion, 1) * .6s); }\n [data-lk=\"visibility-console-hero\"]:hover .k3 { animation-delay: calc(var(--lk-motion, 1) * .65s); }\n [data-lk=\"visibility-console-hero\"]:hover .k4 { animation-delay: calc(var(--lk-motion, 1) * .7s); }\n }\n @keyframes lk-visibility-console-hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes lk-visibility-console-hero-reveal { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }\n @keyframes lk-visibility-console-hero-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n </style>\n\n <rect class=\"bed\" width=\"1200\" height=\"675\" fill=\"#0A0F14\"/>\n\n <!-- backdrop grid + réseau (grid token) -->\n <path class=\"dots\" d=\"M20 20h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2z\" fill=\"#1C262C\"/>\n <path class=\"grid\" d=\"M37 28h6M40 25v6M1157 28h6M1160 25v6M37 648h6M40 645v6M1157 648h6M1160 645v6\" fill=\"none\"/>\n\n <!-- soft glow: stacked flat ellipses, no blur -->\n <ellipse class=\"glowa\" cx=\"1132\" cy=\"42\" rx=\"232\" ry=\"166\" fill=\"#4BE0C30D\"/>\n <ellipse class=\"glowb\" cx=\"1132\" cy=\"42\" rx=\"150\" ry=\"106\" fill=\"#4BE0C317\"/>\n <ellipse class=\"glowc\" cx=\"1132\" cy=\"42\" rx=\"88\" ry=\"60\" fill=\"#4BE0C31F\"/>\n\n <!-- window frame + chrome -->\n <g class=\"stage\">\n <rect class=\"card\" x=\"88\" y=\"52\" width=\"1024\" height=\"560\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n <circle class=\"wdot\" cx=\"116\" cy=\"72\" r=\"5\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"136\" cy=\"72\" r=\"5\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"156\" cy=\"72\" r=\"5\" fill=\"#E6EDEE6B\"/>\n <rect class=\"pill\" x=\"500\" y=\"61\" width=\"200\" height=\"22\" rx=\"7\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n <rect class=\"sk\" x=\"540\" y=\"68\" width=\"120\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <line class=\"hair\" x1=\"88\" y1=\"92\" x2=\"1112\" y2=\"92\" stroke=\"#1A2128\"/>\n\n <!-- icon rail (2nd active) -->\n <line class=\"hair\" x1=\"150\" y1=\"92\" x2=\"150\" y2=\"612\" stroke=\"#1A2128\"/>\n <rect class=\"rail\" x=\"106\" y=\"115\" width=\"26\" height=\"26\" rx=\"6\" fill=\"none\" stroke=\"#E6EDEE6B\"/>\n <rect class=\"active\" x=\"106\" y=\"167\" width=\"26\" height=\"26\" rx=\"6\" fill=\"#4BE0C31F\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <rect class=\"rail\" x=\"106\" y=\"219\" width=\"26\" height=\"26\" rx=\"6\" fill=\"none\" stroke=\"#E6EDEE6B\"/>\n <rect class=\"rail\" x=\"106\" y=\"271\" width=\"26\" height=\"26\" rx=\"6\" fill=\"none\" stroke=\"#E6EDEE6B\"/>\n <rect class=\"rail\" x=\"106\" y=\"323\" width=\"26\" height=\"26\" rx=\"6\" fill=\"none\" stroke=\"#E6EDEE6B\"/>\n\n <!-- header: title and subtitle placeholders + date control outline -->\n <rect class=\"skn\" x=\"176\" y=\"110\" width=\"236\" height=\"18\" rx=\"5\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"176\" y=\"135\" width=\"150\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"pill\" x=\"912\" y=\"112\" width=\"176\" height=\"28\" rx=\"7\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n <rect class=\"sk\" x=\"930\" y=\"122\" width=\"96\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <path class=\"sk\" d=\"M1050 124h12l-6 6z\" fill=\"#E6EDEE6B\"/>\n <line class=\"hair\" x1=\"176\" y1=\"150\" x2=\"1088\" y2=\"150\" stroke=\"#1A2128\"/>\n\n <!-- KPI strip: four metric tiles as label, value and delta placeholders -->\n <line class=\"hair\" x1=\"404\" y1=\"170\" x2=\"404\" y2=\"250\" stroke=\"#1A2128\"/>\n <line class=\"hair\" x1=\"632\" y1=\"170\" x2=\"632\" y2=\"250\" stroke=\"#1A2128\"/>\n <line class=\"hair\" x1=\"860\" y1=\"170\" x2=\"860\" y2=\"250\" stroke=\"#1A2128\"/>\n <g class=\"kpi k1\">\n <rect class=\"sk\" x=\"188\" y=\"178\" width=\"96\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"skn\" x=\"188\" y=\"196\" width=\"52\" height=\"22\" rx=\"4\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"188\" y=\"232\" width=\"56\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n </g>\n <g class=\"kpi k2\">\n <rect class=\"sk\" x=\"416\" y=\"178\" width=\"72\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"skn\" x=\"416\" y=\"196\" width=\"96\" height=\"22\" rx=\"4\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"416\" y=\"232\" width=\"56\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n </g>\n <g class=\"kpi k3\">\n <rect class=\"sk\" x=\"644\" y=\"178\" width=\"104\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"skn\" x=\"644\" y=\"196\" width=\"84\" height=\"22\" rx=\"4\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"644\" y=\"232\" width=\"48\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n </g>\n <g class=\"kpi k4\">\n <rect class=\"sk\" x=\"872\" y=\"178\" width=\"100\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"skn\" x=\"872\" y=\"196\" width=\"50\" height=\"22\" rx=\"4\" fill=\"#E6EDEE9E\"/>\n <rect class=\"sk\" x=\"872\" y=\"232\" width=\"44\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n </g>\n <line class=\"hair\" x1=\"176\" y1=\"262\" x2=\"1088\" y2=\"262\" stroke=\"#1A2128\"/>\n\n <!-- area chart: section label + gridlines + trace with end marker -->\n <rect class=\"sk\" x=\"176\" y=\"288\" width=\"116\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"sk\" x=\"636\" y=\"289\" width=\"64\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n <line class=\"cgrid\" x1=\"196\" y1=\"340\" x2=\"684\" y2=\"340\" stroke=\"#1C262C\" stroke-dasharray=\"1.5 3\"/>\n <line class=\"cgrid\" x1=\"196\" y1=\"374\" x2=\"684\" y2=\"374\" stroke=\"#1C262C\" stroke-dasharray=\"1.5 3\"/>\n <line class=\"cgrid\" x1=\"196\" y1=\"408\" x2=\"684\" y2=\"408\" stroke=\"#1C262C\" stroke-dasharray=\"1.5 3\"/>\n <line class=\"hair\" x1=\"196\" y1=\"442\" x2=\"684\" y2=\"442\" stroke=\"#1A2128\"/>\n <path class=\"grid\" d=\"M227 329h6M230 326v6\" fill=\"none\"/>\n <g class=\"series\">\n <path class=\"afar\" d=\"M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5 L676 442 L200 442 Z\" fill=\"#4BE0C33D\"/>\n <path class=\"lift\" d=\"M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5\" fill=\"none\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\"/>\n <path class=\"line\" d=\"M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <line class=\"cursor\" x1=\"676\" y1=\"322\" x2=\"676\" y2=\"442\" stroke=\"#E6EDEE6B\" stroke-dasharray=\"4 3\"/>\n <circle class=\"halo\" cx=\"676\" cy=\"367.5\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"676\" cy=\"367.5\" r=\"2.6\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n\n <!-- topic radar: primary shape vs dashed comparison -->\n <line class=\"hair\" x1=\"724\" y1=\"288\" x2=\"724\" y2=\"466\" stroke=\"#1A2128\"/>\n <rect class=\"sk\" x=\"834\" y=\"288\" width=\"132\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <polygon class=\"grid\" points=\"900,310 964.1,347 964.1,421 900,458 835.9,421 835.9,347\" fill=\"none\"/>\n <polygon class=\"grid\" points=\"900,347 932,365.5 932,402.5 900,421 868,402.5 868,365.5\" fill=\"none\"/>\n <path class=\"grid\" d=\"M900 384L900 310M900 384L964.1 347M900 384L964.1 421M900 384L900 458M900 384L835.9 421M900 384L835.9 347\" fill=\"none\"/>\n <polygon class=\"cmp\" points=\"900,338.9 944.9,358.1 933.3,403.2 900,419.5 863.5,405.1 857.7,359.6\" fill=\"none\" stroke=\"#E6EDEE6B\" stroke-dasharray=\"4 3\"/>\n <polygon class=\"lift\" points=\"900,326.3 941,360.3 945.5,410.3 900,424.7 847.4,414.3 861.5,361.8\" fill=\"none\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\"/>\n <polygon class=\"you\" points=\"900,326.3 941,360.3 945.5,410.3 900,424.7 847.4,414.3 861.5,361.8\" fill=\"#4BE0C33D\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"900\" cy=\"326.3\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"941\" cy=\"360.3\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"945.5\" cy=\"410.3\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"900\" cy=\"424.7\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"847.4\" cy=\"414.3\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"dot\" cx=\"861.5\" cy=\"361.8\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n\n <!-- brand ranking: stepped bars with leader tick + tip marker -->\n <line class=\"hair\" x1=\"176\" y1=\"482\" x2=\"1088\" y2=\"482\" stroke=\"#1A2128\"/>\n <rect class=\"sk\" x=\"176\" y=\"493\" width=\"124\" height=\"8\" rx=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"sk\" x=\"976\" y=\"494\" width=\"64\" height=\"7\" rx=\"3.5\" fill=\"#E6EDEE6B\"/>\n <rect class=\"tick\" x=\"168\" y=\"507\" width=\"3\" height=\"12\" fill=\"#4BE0C3\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"512\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"532\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"552\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"572\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <circle class=\"wdot\" cx=\"190\" cy=\"592\" r=\"4\" fill=\"#E6EDEE6B\"/>\n <rect class=\"track\" x=\"210\" y=\"509\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bloom\" x=\"209\" y=\"508\" width=\"711.7\" height=\"8\" rx=\"3\" fill=\"#2E8274\" opacity=\".25\"/>\n <rect class=\"bar1\" x=\"210\" y=\"509\" width=\"709.7\" height=\"6\" rx=\"3\" fill=\"#4BE0C3\"/>\n <circle class=\"halo\" cx=\"919.7\" cy=\"512\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"919.7\" cy=\"512\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"210\" y=\"529\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bar2\" x=\"210\" y=\"529\" width=\"572.7\" height=\"6\" rx=\"3\" fill=\"#4BE0C3C8\"/>\n <rect class=\"track\" x=\"210\" y=\"549\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bar3\" x=\"210\" y=\"549\" width=\"392.2\" height=\"6\" rx=\"3\" fill=\"#4BE0C394\"/>\n <rect class=\"track\" x=\"210\" y=\"569\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bar4\" x=\"210\" y=\"569\" width=\"222\" height=\"6\" rx=\"3\" fill=\"#4BE0C366\"/>\n <rect class=\"track\" x=\"210\" y=\"589\" width=\"830\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <rect class=\"bar5\" x=\"210\" y=\"589\" width=\"124.5\" height=\"6\" rx=\"3\" fill=\"#4BE0C342\"/>\n </g>\n</svg>\n";
</script>
<div style="--lk-accent: #4BE0C3; --lk-bg: #0A0F14;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" role="img" aria-label="Dashboard mockup graphic — decorative" class="lk-block" data-lk="visibility-console-hero" data-lk-contract="1">
<title>Dashboard mockup graphic</title>
<desc>Decorative dashboard graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="visibility-console-hero"] {
--_accent: var(--lk-accent, #4BE0C3);
--_bg: var(--lk-bg, #0A0F14);
--_radius: var(--lk-radius, 12px);
--_i: oklch(from var(--_bg) clamp(0.14, (0.68 - l) * 999, 0.93) min(c, 0.03) h);
--_i2: color-mix(in oklab, var(--_i) 62%, transparent);
--_i3: color-mix(in oklab, var(--_i) 42%, transparent);
--_hair: color-mix(in oklab, var(--_i) 8%, transparent);
--_g: var(--lk-grid, color-mix(in oklab, var(--_i) 9%, transparent));
--_surf: color-mix(in oklab, var(--_accent) 3%, var(--_bg));
--_soft: color-mix(in oklab, var(--_accent) 24%, transparent);
--_faint: color-mix(in oklab, var(--_accent) 12%, transparent);
--_glow: color-mix(in oklab, var(--_accent) 55%, var(--_bg));
color: var(--_accent);
font-family: var(--lk-font, 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,sans-serif);
}
/* base ink: text flips with the bg via --_i; dim/semantic classes override (see CONVENTIONS.md) */
[data-lk="visibility-console-hero"] text,
[data-lk="visibility-console-hero"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="visibility-console-hero"] */
[data-lk="visibility-console-hero"] .bed{fill:var(--_bg)}
[data-lk="visibility-console-hero"] .dots{fill:var(--_g)}
[data-lk="visibility-console-hero"] .grid{fill:none;stroke:var(--_g)}
[data-lk="visibility-console-hero"] .cgrid{fill:none;stroke:var(--_g);stroke-dasharray:1.5 3}
[data-lk="visibility-console-hero"] .hair{fill:none;stroke:var(--_hair)}
[data-lk="visibility-console-hero"] .card{fill:var(--_surf);stroke:var(--_hair);rx:var(--_radius)}
[data-lk="visibility-console-hero"] .glowa{fill:color-mix(in oklab,var(--_accent) 5%,transparent)}
[data-lk="visibility-console-hero"] .glowb{fill:color-mix(in oklab,var(--_accent) 9%,transparent)}
[data-lk="visibility-console-hero"] .glowc{fill:var(--_faint)}
[data-lk="visibility-console-hero"] .rail{fill:none;stroke:var(--_i3);rx:calc(var(--_radius) * .5)}
[data-lk="visibility-console-hero"] .active{fill:var(--_faint);stroke:var(--_accent);stroke-width:1.5;rx:calc(var(--_radius) * .5)}
[data-lk="visibility-console-hero"] .wdot{fill:var(--_i3)}
[data-lk="visibility-console-hero"] .pill{fill:var(--_surf);stroke:var(--_hair);rx:calc(var(--_radius) * .58)}
[data-lk="visibility-console-hero"] .track{fill:var(--_g);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .tick{fill:var(--_accent)}
[data-lk="visibility-console-hero"] .bloom{fill:var(--_glow);opacity:.25;rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar1{fill:var(--_accent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar2{fill:color-mix(in oklab,var(--_accent) 78%,transparent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar3{fill:color-mix(in oklab,var(--_accent) 58%,transparent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar4{fill:color-mix(in oklab,var(--_accent) 40%,transparent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .bar5{fill:color-mix(in oklab,var(--_accent) 26%,transparent);rx:calc(var(--_radius) * .25)}
[data-lk="visibility-console-hero"] .afar{fill:var(--_soft)}
[data-lk="visibility-console-hero"] .lift{fill:none;stroke:var(--_glow);stroke-width:3.5;opacity:.25;stroke-linecap:round;stroke-linejoin:round}
[data-lk="visibility-console-hero"] .line{fill:none;stroke:var(--_accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[data-lk="visibility-console-hero"] .cmp{fill:none;stroke:var(--_i3);stroke-dasharray:4 3;stroke-linejoin:round}
[data-lk="visibility-console-hero"] .you{fill:var(--_soft);stroke:var(--_accent);stroke-width:1.5;stroke-linejoin:round}
[data-lk="visibility-console-hero"] .cursor{fill:none;stroke:var(--_i3);stroke-dasharray:4 3}
[data-lk="visibility-console-hero"] .halo{fill:var(--_faint)}
[data-lk="visibility-console-hero"] .dot{fill:var(--_surf);stroke:var(--_accent);stroke-width:1.5}
[data-lk="visibility-console-hero"] .skn{fill:var(--_i2)}
[data-lk="visibility-console-hero"] .sk{fill:var(--_i3)}
/* Hover motion (opt-out): 2 stages. (1) the whole dashboard content fades in and
rises slightly as one move. (2) the chart trace reveals left to right via a clip
sweep while the KPI value tiles grow scaleX from the left, lightly staggered.
Off for reduced-motion visitors; set the motion token to 0 to force off. */
[data-lk="visibility-console-hero"] .kpi { transform-box: fill-box; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="visibility-console-hero"]:hover .stage { animation: lk-visibility-console-hero-rise calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="visibility-console-hero"]:hover .series { animation: lk-visibility-console-hero-reveal calc(var(--lk-motion, 1) * .5s) cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--lk-motion, 1) * .55s); }
[data-lk="visibility-console-hero"]:hover .kpi { animation: lk-visibility-console-hero-grow calc(var(--lk-motion, 1) * .45s) cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--lk-motion, 1) * .55s); }
[data-lk="visibility-console-hero"]:hover .k2 { animation-delay: calc(var(--lk-motion, 1) * .6s); }
[data-lk="visibility-console-hero"]:hover .k3 { animation-delay: calc(var(--lk-motion, 1) * .65s); }
[data-lk="visibility-console-hero"]:hover .k4 { animation-delay: calc(var(--lk-motion, 1) * .7s); }
}
@keyframes lk-visibility-console-hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lk-visibility-console-hero-reveal { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }
@keyframes lk-visibility-console-hero-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
</style>
<rect class="bed" width="1200" height="675" fill="#0A0F14"/>
<!-- backdrop grid + réseau (grid token) -->
<path class="dots" d="M20 20h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm1080 0h2v2h-2zm40 0h2v2h-2zm-1160 40h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2zm40 0h2v2h-2z" fill="#1C262C"/>
<path class="grid" d="M37 28h6M40 25v6M1157 28h6M1160 25v6M37 648h6M40 645v6M1157 648h6M1160 645v6" fill="none"/>
<!-- soft glow: stacked flat ellipses, no blur -->
<ellipse class="glowa" cx="1132" cy="42" rx="232" ry="166" fill="#4BE0C30D"/>
<ellipse class="glowb" cx="1132" cy="42" rx="150" ry="106" fill="#4BE0C317"/>
<ellipse class="glowc" cx="1132" cy="42" rx="88" ry="60" fill="#4BE0C31F"/>
<!-- window frame + chrome -->
<g class="stage">
<rect class="card" x="88" y="52" width="1024" height="560" rx="12" fill="#0E141B" stroke="#1A2128"/>
<circle class="wdot" cx="116" cy="72" r="5" fill="#E6EDEE6B"/>
<circle class="wdot" cx="136" cy="72" r="5" fill="#E6EDEE6B"/>
<circle class="wdot" cx="156" cy="72" r="5" fill="#E6EDEE6B"/>
<rect class="pill" x="500" y="61" width="200" height="22" rx="7" fill="#0E141B" stroke="#1A2128"/>
<rect class="sk" x="540" y="68" width="120" height="8" rx="4" fill="#E6EDEE6B"/>
<line class="hair" x1="88" y1="92" x2="1112" y2="92" stroke="#1A2128"/>
<!-- icon rail (2nd active) -->
<line class="hair" x1="150" y1="92" x2="150" y2="612" stroke="#1A2128"/>
<rect class="rail" x="106" y="115" width="26" height="26" rx="6" fill="none" stroke="#E6EDEE6B"/>
<rect class="active" x="106" y="167" width="26" height="26" rx="6" fill="#4BE0C31F" stroke="#4BE0C3" stroke-width="1.5"/>
<rect class="rail" x="106" y="219" width="26" height="26" rx="6" fill="none" stroke="#E6EDEE6B"/>
<rect class="rail" x="106" y="271" width="26" height="26" rx="6" fill="none" stroke="#E6EDEE6B"/>
<rect class="rail" x="106" y="323" width="26" height="26" rx="6" fill="none" stroke="#E6EDEE6B"/>
<!-- header: title and subtitle placeholders + date control outline -->
<rect class="skn" x="176" y="110" width="236" height="18" rx="5" fill="#E6EDEE9E"/>
<rect class="sk" x="176" y="135" width="150" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="pill" x="912" y="112" width="176" height="28" rx="7" fill="#0E141B" stroke="#1A2128"/>
<rect class="sk" x="930" y="122" width="96" height="8" rx="4" fill="#E6EDEE6B"/>
<path class="sk" d="M1050 124h12l-6 6z" fill="#E6EDEE6B"/>
<line class="hair" x1="176" y1="150" x2="1088" y2="150" stroke="#1A2128"/>
<!-- KPI strip: four metric tiles as label, value and delta placeholders -->
<line class="hair" x1="404" y1="170" x2="404" y2="250" stroke="#1A2128"/>
<line class="hair" x1="632" y1="170" x2="632" y2="250" stroke="#1A2128"/>
<line class="hair" x1="860" y1="170" x2="860" y2="250" stroke="#1A2128"/>
<g class="kpi k1">
<rect class="sk" x="188" y="178" width="96" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="skn" x="188" y="196" width="52" height="22" rx="4" fill="#E6EDEE9E"/>
<rect class="sk" x="188" y="232" width="56" height="7" rx="3.5" fill="#E6EDEE6B"/>
</g>
<g class="kpi k2">
<rect class="sk" x="416" y="178" width="72" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="skn" x="416" y="196" width="96" height="22" rx="4" fill="#E6EDEE9E"/>
<rect class="sk" x="416" y="232" width="56" height="7" rx="3.5" fill="#E6EDEE6B"/>
</g>
<g class="kpi k3">
<rect class="sk" x="644" y="178" width="104" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="skn" x="644" y="196" width="84" height="22" rx="4" fill="#E6EDEE9E"/>
<rect class="sk" x="644" y="232" width="48" height="7" rx="3.5" fill="#E6EDEE6B"/>
</g>
<g class="kpi k4">
<rect class="sk" x="872" y="178" width="100" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="skn" x="872" y="196" width="50" height="22" rx="4" fill="#E6EDEE9E"/>
<rect class="sk" x="872" y="232" width="44" height="7" rx="3.5" fill="#E6EDEE6B"/>
</g>
<line class="hair" x1="176" y1="262" x2="1088" y2="262" stroke="#1A2128"/>
<!-- area chart: section label + gridlines + trace with end marker -->
<rect class="sk" x="176" y="288" width="116" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="sk" x="636" y="289" width="64" height="7" rx="3.5" fill="#E6EDEE6B"/>
<line class="cgrid" x1="196" y1="340" x2="684" y2="340" stroke="#1C262C" stroke-dasharray="1.5 3"/>
<line class="cgrid" x1="196" y1="374" x2="684" y2="374" stroke="#1C262C" stroke-dasharray="1.5 3"/>
<line class="cgrid" x1="196" y1="408" x2="684" y2="408" stroke="#1C262C" stroke-dasharray="1.5 3"/>
<line class="hair" x1="196" y1="442" x2="684" y2="442" stroke="#1A2128"/>
<path class="grid" d="M227 329h6M230 326v6" fill="none"/>
<g class="series">
<path class="afar" d="M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5 L676 442 L200 442 Z" fill="#4BE0C33D"/>
<path class="lift" d="M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
<path class="line" d="M200 393.7 C213.2 392.9 252.9 389.4 279.3 389 C305.8 388.5 332.2 392.1 358.7 390.8 C385.1 389.6 411.6 384.1 438 381.5 C464.4 378.9 490.9 376.2 517.3 375.4 C543.8 374.6 570.2 378 596.7 376.7 C623.1 375.4 662.8 369.1 676 367.5" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
<line class="cursor" x1="676" y1="322" x2="676" y2="442" stroke="#E6EDEE6B" stroke-dasharray="4 3"/>
<circle class="halo" cx="676" cy="367.5" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="676" cy="367.5" r="2.6" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<!-- topic radar: primary shape vs dashed comparison -->
<line class="hair" x1="724" y1="288" x2="724" y2="466" stroke="#1A2128"/>
<rect class="sk" x="834" y="288" width="132" height="8" rx="4" fill="#E6EDEE6B"/>
<polygon class="grid" points="900,310 964.1,347 964.1,421 900,458 835.9,421 835.9,347" fill="none"/>
<polygon class="grid" points="900,347 932,365.5 932,402.5 900,421 868,402.5 868,365.5" fill="none"/>
<path class="grid" d="M900 384L900 310M900 384L964.1 347M900 384L964.1 421M900 384L900 458M900 384L835.9 421M900 384L835.9 347" fill="none"/>
<polygon class="cmp" points="900,338.9 944.9,358.1 933.3,403.2 900,419.5 863.5,405.1 857.7,359.6" fill="none" stroke="#E6EDEE6B" stroke-dasharray="4 3"/>
<polygon class="lift" points="900,326.3 941,360.3 945.5,410.3 900,424.7 847.4,414.3 861.5,361.8" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
<polygon class="you" points="900,326.3 941,360.3 945.5,410.3 900,424.7 847.4,414.3 861.5,361.8" fill="#4BE0C33D" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="900" cy="326.3" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="941" cy="360.3" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="945.5" cy="410.3" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="900" cy="424.7" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="847.4" cy="414.3" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="dot" cx="861.5" cy="361.8" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<!-- brand ranking: stepped bars with leader tick + tip marker -->
<line class="hair" x1="176" y1="482" x2="1088" y2="482" stroke="#1A2128"/>
<rect class="sk" x="176" y="493" width="124" height="8" rx="4" fill="#E6EDEE6B"/>
<rect class="sk" x="976" y="494" width="64" height="7" rx="3.5" fill="#E6EDEE6B"/>
<rect class="tick" x="168" y="507" width="3" height="12" fill="#4BE0C3"/>
<circle class="wdot" cx="190" cy="512" r="4" fill="#E6EDEE6B"/>
<circle class="wdot" cx="190" cy="532" r="4" fill="#E6EDEE6B"/>
<circle class="wdot" cx="190" cy="552" r="4" fill="#E6EDEE6B"/>
<circle class="wdot" cx="190" cy="572" r="4" fill="#E6EDEE6B"/>
<circle class="wdot" cx="190" cy="592" r="4" fill="#E6EDEE6B"/>
<rect class="track" x="210" y="509" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bloom" x="209" y="508" width="711.7" height="8" rx="3" fill="#2E8274" opacity=".25"/>
<rect class="bar1" x="210" y="509" width="709.7" height="6" rx="3" fill="#4BE0C3"/>
<circle class="halo" cx="919.7" cy="512" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="919.7" cy="512" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<rect class="track" x="210" y="529" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bar2" x="210" y="529" width="572.7" height="6" rx="3" fill="#4BE0C3C8"/>
<rect class="track" x="210" y="549" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bar3" x="210" y="549" width="392.2" height="6" rx="3" fill="#4BE0C394"/>
<rect class="track" x="210" y="569" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bar4" x="210" y="569" width="222" height="6" rx="3" fill="#4BE0C366"/>
<rect class="track" x="210" y="589" width="830" height="6" rx="3" fill="#1C262C"/>
<rect class="bar5" x="210" y="589" width="124.5" height="6" rx="3" fill="#4BE0C342"/>
</g>
</svg>
</div>