Engine Breakdown Panel
Decorative row-list graphic — glyph, progress bar and sparkline per row. Restyle via --lk-* CSS variables.
Install
npx shadcn@latest add https://visual-blocks.akiho.dev/r/panel-engine-breakdown.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 640 360" role="img" aria-label="Panel rows graphic — decorative" class="lk-block" data-lk="panel-engine-breakdown" data-lk-contract="1">
<title>Panel rows graphic</title>
<desc>Decorative panel-rows graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="panel-engine-breakdown"] {
--_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="panel-engine-breakdown"] text,
[data-lk="panel-engine-breakdown"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="panel-engine-breakdown"] */
[data-lk="panel-engine-breakdown"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="panel-engine-breakdown"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="panel-engine-breakdown"] .hair { stroke: var(--_hair); stroke-width: 1; }
[data-lk="panel-engine-breakdown"] .tick { fill: var(--_accent); }
[data-lk="panel-engine-breakdown"] .glyph { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; }
[data-lk="panel-engine-breakdown"] .track { fill: var(--_g); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] rect.lift { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] polyline.lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .bar1 { fill: var(--_accent); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] .bar2 { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] .bar3 { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] .bar4 { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] .spark1 { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .spark2 { fill: none; stroke: color-mix(in oklab, var(--_accent) 78%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .spark3 { fill: none; stroke: color-mix(in oklab, var(--_accent) 58%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .spark4 { fill: none; stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .halo { fill: var(--_faint); }
[data-lk="panel-engine-breakdown"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
[data-lk="panel-engine-breakdown"] .dot2 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 78%, transparent); stroke-width: 1.5; }
[data-lk="panel-engine-breakdown"] .dot3 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 58%, transparent); stroke-width: 1.5; }
[data-lk="panel-engine-breakdown"] .dot4 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; }
/* Hover motion (opt-out): 2 stages, top→down stagger per row. (1) each row's
progress bar grows scaleX(0)->1 from the left (its lift bloom + tip marker
travel with it as one bar) while that row's sparkline reveals left to right
via a clip-path sweep (its lift trace + tip marker revealed together as one
line), bar and sparkline moving in lockstep; rows start in top→down sequence.
(2) once a row's bar+sparkline finish growing, that row's glyph dot pops.
Off for reduced-motion visitors; set the motion token to 0 to force off. */
[data-lk="panel-engine-breakdown"] .grow { transform-box: fill-box; transform-origin: left; }
[data-lk="panel-engine-breakdown"] .beat { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="panel-engine-breakdown"]:hover .grow { animation: lk-panel-engine-breakdown-grow calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="panel-engine-breakdown"]:hover .sweep { animation: lk-panel-engine-breakdown-sweep calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="panel-engine-breakdown"]:hover .row2 { animation-delay: calc(var(--lk-motion, 1) * .08s); }
[data-lk="panel-engine-breakdown"]:hover .row3 { animation-delay: calc(var(--lk-motion, 1) * .16s); }
[data-lk="panel-engine-breakdown"]:hover .row4 { animation-delay: calc(var(--lk-motion, 1) * .24s); }
[data-lk="panel-engine-breakdown"]:hover .beat { animation: lk-panel-engine-breakdown-pop calc(var(--lk-motion, 1) * .4s) ease-out both; }
[data-lk="panel-engine-breakdown"]:hover .beat.row1 { animation-delay: calc(var(--lk-motion, 1) * .55s); }
[data-lk="panel-engine-breakdown"]:hover .beat.row2 { animation-delay: calc(var(--lk-motion, 1) * .63s); }
[data-lk="panel-engine-breakdown"]:hover .beat.row3 { animation-delay: calc(var(--lk-motion, 1) * .71s); }
[data-lk="panel-engine-breakdown"]:hover .beat.row4 { animation-delay: calc(var(--lk-motion, 1) * .79s); }
}
@keyframes lk-panel-engine-breakdown-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lk-panel-engine-breakdown-sweep { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }
@keyframes lk-panel-engine-breakdown-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
</style>
<rect class="card" x=".5" y=".5" width="639" height="359" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- réseau crosses: dead corners beyond the content margin, on the grid token (silenced when lk-grid is transparent) -->
<path class="grid" d="M628 14h6M631 11v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<path class="grid" d="M9 346h6M12 343v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<!-- leader edge tick: marks the row 1 band -->
<rect class="tick" x=".5" y="30" width="3" height="75" fill="#4BE0C3"/>
<!-- row 1 (leader): glyph + full-accent bar with luminance-lift bloom + 7-point sparkline, punched tip dots -->
<circle class="glyph" cx="31" cy="67.5" r="11" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot beat row1" cx="31" cy="67.5" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<rect class="track" x="76" y="64.5" width="330" height="6" rx="3" fill="#1C262C"/>
<g class="grow row1">
<rect class="lift" x="75" y="63.5" width="287.9" height="8" rx="3" fill="#2E8274" opacity=".25"/>
<rect class="bar1" x="76" y="64.5" width="285.9" height="6" rx="3" fill="#4BE0C3"/>
<circle class="halo" cx="361.9" cy="67.5" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="361.9" cy="67.5" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="sweep row1">
<polyline class="lift" points="440,76.5 470,72 500,78.7 530,67.5 560,63 590,65.3 620,56.3" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
<polyline class="spark1" points="440,76.5 470,72 500,78.7 530,67.5 560,63 590,65.3 620,56.3" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="halo" cx="620" cy="56.3" r="4" fill="#4BE0C31F"/>
<circle class="dot" cx="620" cy="56.3" r="1.8" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<line class="hair" x1="20" y1="105" x2="620" y2="105" stroke="#1A2128" stroke-width="1"/>
<!-- row 2: glyph + stepped-opacity bar + sparkline -->
<circle class="glyph" cx="31" cy="142.5" r="11" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot2 beat row2" cx="31" cy="142.5" r="2.2" fill="#0E141B" stroke="#4BE0C3C8" stroke-width="1.5"/>
<rect class="track" x="76" y="139.5" width="330" height="6" rx="3" fill="#1C262C"/>
<g class="grow row2">
<rect class="bar2" x="76" y="139.5" width="232.8" height="6" rx="3" fill="#4BE0C3C8"/>
</g>
<g class="sweep row2">
<polyline class="spark2" points="440,148.1 470,153.7 500,142.5 530,148.1 560,136.9 590,142.5 620,131.3" fill="none" stroke="#4BE0C3C8" stroke-width="1.5"/>
<circle class="dot2" cx="620" cy="131.3" r="1.8" fill="#0E141B" stroke="#4BE0C3C8" stroke-width="1.5"/>
</g>
<line class="hair" x1="20" y1="180" x2="620" y2="180" stroke="#1A2128" stroke-width="1"/>
<!-- row 3: glyph + stepped-opacity bar + sparkline -->
<circle class="glyph" cx="31" cy="217.5" r="11" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot3 beat row3" cx="31" cy="217.5" r="2.2" fill="#0E141B" stroke="#4BE0C394" stroke-width="1.5"/>
<rect class="track" x="76" y="214.5" width="330" height="6" rx="3" fill="#1C262C"/>
<g class="grow row3">
<rect class="bar3" x="76" y="214.5" width="168.1" height="6" rx="3" fill="#4BE0C394"/>
</g>
<g class="sweep row3">
<polyline class="spark3" points="440,213.7 470,206.3 500,213.7 530,221.3 560,216.8 590,225.8 620,228.7" fill="none" stroke="#4BE0C394" stroke-width="1.5"/>
<circle class="dot3" cx="620" cy="228.7" r="1.8" fill="#0E141B" stroke="#4BE0C394" stroke-width="1.5"/>
</g>
<line class="hair" x1="20" y1="255" x2="620" y2="255" stroke="#1A2128" stroke-width="1"/>
<!-- row 4: glyph + stepped-opacity bar + sparkline -->
<circle class="glyph" cx="31" cy="292.5" r="11" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot4 beat row4" cx="31" cy="292.5" r="2.2" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<rect class="track" x="76" y="289.5" width="330" height="6" rx="3" fill="#1C262C"/>
<g class="grow row4">
<rect class="bar4" x="76" y="289.5" width="117.3" height="6" rx="3" fill="#4BE0C366"/>
</g>
<g class="sweep row4">
<polyline class="spark4" points="440,281.3 470,287.2 500,284.2 530,293.1 560,296 590,298.9 620,303.7" fill="none" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot4" cx="620" cy="303.7" r="1.8" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
</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 640 360\" role=\"img\" aria-label=\"Panel rows graphic — decorative\" class=\"lk-block\" data-lk=\"panel-engine-breakdown\" data-lk-contract=\"1\">\n <title>Panel rows graphic</title>\n <desc>Decorative panel-rows 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=\"panel-engine-breakdown\"] {\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=\"panel-engine-breakdown\"] text,\n [data-lk=\"panel-engine-breakdown\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"panel-engine-breakdown\"] */\n [data-lk=\"panel-engine-breakdown\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"panel-engine-breakdown\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"panel-engine-breakdown\"] .hair { stroke: var(--_hair); stroke-width: 1; }\n [data-lk=\"panel-engine-breakdown\"] .tick { fill: var(--_accent); }\n [data-lk=\"panel-engine-breakdown\"] .glyph { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; }\n [data-lk=\"panel-engine-breakdown\"] .track { fill: var(--_g); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] rect.lift { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] polyline.lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .bar1 { fill: var(--_accent); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] .bar2 { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] .bar3 { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] .bar4 { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] .spark1 { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .spark2 { fill: none; stroke: color-mix(in oklab, var(--_accent) 78%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .spark3 { fill: none; stroke: color-mix(in oklab, var(--_accent) 58%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .spark4 { fill: none; stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .halo { fill: var(--_faint); }\n [data-lk=\"panel-engine-breakdown\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n [data-lk=\"panel-engine-breakdown\"] .dot2 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 78%, transparent); stroke-width: 1.5; }\n [data-lk=\"panel-engine-breakdown\"] .dot3 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 58%, transparent); stroke-width: 1.5; }\n [data-lk=\"panel-engine-breakdown\"] .dot4 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; }\n\n /* Hover motion (opt-out): 2 stages, top→down stagger per row. (1) each row's\n progress bar grows scaleX(0)->1 from the left (its lift bloom + tip marker\n travel with it as one bar) while that row's sparkline reveals left to right\n via a clip-path sweep (its lift trace + tip marker revealed together as one\n line), bar and sparkline moving in lockstep; rows start in top→down sequence.\n (2) once a row's bar+sparkline finish growing, that row's glyph dot pops.\n Off for reduced-motion visitors; set the motion token to 0 to force off. */\n [data-lk=\"panel-engine-breakdown\"] .grow { transform-box: fill-box; transform-origin: left; }\n [data-lk=\"panel-engine-breakdown\"] .beat { transform-box: fill-box; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"panel-engine-breakdown\"]:hover .grow { animation: lk-panel-engine-breakdown-grow calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"panel-engine-breakdown\"]:hover .sweep { animation: lk-panel-engine-breakdown-sweep calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"panel-engine-breakdown\"]:hover .row2 { animation-delay: calc(var(--lk-motion, 1) * .08s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .row3 { animation-delay: calc(var(--lk-motion, 1) * .16s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .row4 { animation-delay: calc(var(--lk-motion, 1) * .24s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat { animation: lk-panel-engine-breakdown-pop calc(var(--lk-motion, 1) * .4s) ease-out both; }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat.row1 { animation-delay: calc(var(--lk-motion, 1) * .55s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat.row2 { animation-delay: calc(var(--lk-motion, 1) * .63s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat.row3 { animation-delay: calc(var(--lk-motion, 1) * .71s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat.row4 { animation-delay: calc(var(--lk-motion, 1) * .79s); }\n }\n @keyframes lk-panel-engine-breakdown-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n @keyframes lk-panel-engine-breakdown-sweep { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }\n @keyframes lk-panel-engine-breakdown-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"639\" height=\"359\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- réseau crosses: dead corners beyond the content margin, on the grid token (silenced when lk-grid is transparent) -->\n <path class=\"grid\" d=\"M628 14h6M631 11v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <path class=\"grid\" d=\"M9 346h6M12 343v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n\n <!-- leader edge tick: marks the row 1 band -->\n <rect class=\"tick\" x=\".5\" y=\"30\" width=\"3\" height=\"75\" fill=\"#4BE0C3\"/>\n\n <!-- row 1 (leader): glyph + full-accent bar with luminance-lift bloom + 7-point sparkline, punched tip dots -->\n <circle class=\"glyph\" cx=\"31\" cy=\"67.5\" r=\"11\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot beat row1\" cx=\"31\" cy=\"67.5\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"76\" y=\"64.5\" width=\"330\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <g class=\"grow row1\">\n <rect class=\"lift\" x=\"75\" y=\"63.5\" width=\"287.9\" height=\"8\" rx=\"3\" fill=\"#2E8274\" opacity=\".25\"/>\n <rect class=\"bar1\" x=\"76\" y=\"64.5\" width=\"285.9\" height=\"6\" rx=\"3\" fill=\"#4BE0C3\"/>\n <circle class=\"halo\" cx=\"361.9\" cy=\"67.5\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"361.9\" cy=\"67.5\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"sweep row1\">\n <polyline class=\"lift\" points=\"440,76.5 470,72 500,78.7 530,67.5 560,63 590,65.3 620,56.3\" fill=\"none\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\"/>\n <polyline class=\"spark1\" points=\"440,76.5 470,72 500,78.7 530,67.5 560,63 590,65.3 620,56.3\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"halo\" cx=\"620\" cy=\"56.3\" r=\"4\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"620\" cy=\"56.3\" r=\"1.8\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <line class=\"hair\" x1=\"20\" y1=\"105\" x2=\"620\" y2=\"105\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- row 2: glyph + stepped-opacity bar + sparkline -->\n <circle class=\"glyph\" cx=\"31\" cy=\"142.5\" r=\"11\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot2 beat row2\" cx=\"31\" cy=\"142.5\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3C8\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"76\" y=\"139.5\" width=\"330\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <g class=\"grow row2\">\n <rect class=\"bar2\" x=\"76\" y=\"139.5\" width=\"232.8\" height=\"6\" rx=\"3\" fill=\"#4BE0C3C8\"/>\n </g>\n <g class=\"sweep row2\">\n <polyline class=\"spark2\" points=\"440,148.1 470,153.7 500,142.5 530,148.1 560,136.9 590,142.5 620,131.3\" fill=\"none\" stroke=\"#4BE0C3C8\" stroke-width=\"1.5\"/>\n <circle class=\"dot2\" cx=\"620\" cy=\"131.3\" r=\"1.8\" fill=\"#0E141B\" stroke=\"#4BE0C3C8\" stroke-width=\"1.5\"/>\n </g>\n <line class=\"hair\" x1=\"20\" y1=\"180\" x2=\"620\" y2=\"180\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- row 3: glyph + stepped-opacity bar + sparkline -->\n <circle class=\"glyph\" cx=\"31\" cy=\"217.5\" r=\"11\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot3 beat row3\" cx=\"31\" cy=\"217.5\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C394\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"76\" y=\"214.5\" width=\"330\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <g class=\"grow row3\">\n <rect class=\"bar3\" x=\"76\" y=\"214.5\" width=\"168.1\" height=\"6\" rx=\"3\" fill=\"#4BE0C394\"/>\n </g>\n <g class=\"sweep row3\">\n <polyline class=\"spark3\" points=\"440,213.7 470,206.3 500,213.7 530,221.3 560,216.8 590,225.8 620,228.7\" fill=\"none\" stroke=\"#4BE0C394\" stroke-width=\"1.5\"/>\n <circle class=\"dot3\" cx=\"620\" cy=\"228.7\" r=\"1.8\" fill=\"#0E141B\" stroke=\"#4BE0C394\" stroke-width=\"1.5\"/>\n </g>\n <line class=\"hair\" x1=\"20\" y1=\"255\" x2=\"620\" y2=\"255\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- row 4: glyph + stepped-opacity bar + sparkline -->\n <circle class=\"glyph\" cx=\"31\" cy=\"292.5\" r=\"11\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot4 beat row4\" cx=\"31\" cy=\"292.5\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"76\" y=\"289.5\" width=\"330\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <g class=\"grow row4\">\n <rect class=\"bar4\" x=\"76\" y=\"289.5\" width=\"117.3\" height=\"6\" rx=\"3\" fill=\"#4BE0C366\"/>\n </g>\n <g class=\"sweep row4\">\n <polyline class=\"spark4\" points=\"440,281.3 470,287.2 500,284.2 530,293.1 560,296 590,298.9 620,303.7\" fill=\"none\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot4\" cx=\"620\" cy=\"303.7\" r=\"1.8\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n </g>\n</svg>\n";
export function EngineBreakdownPanel(props: HTMLAttributes<HTMLDivElement>) {
return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
}
export default EngineBreakdownPanel;
<!-- 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 640 360\" role=\"img\" aria-label=\"Panel rows graphic — decorative\" class=\"lk-block\" data-lk=\"panel-engine-breakdown\" data-lk-contract=\"1\">\n <title>Panel rows graphic</title>\n <desc>Decorative panel-rows 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=\"panel-engine-breakdown\"] {\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=\"panel-engine-breakdown\"] text,\n [data-lk=\"panel-engine-breakdown\"] tspan { fill: var(--_i); }\n\n\n /* Layer 3: block-specific — every selector MUST start with [data-lk=\"panel-engine-breakdown\"] */\n [data-lk=\"panel-engine-breakdown\"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }\n [data-lk=\"panel-engine-breakdown\"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }\n [data-lk=\"panel-engine-breakdown\"] .hair { stroke: var(--_hair); stroke-width: 1; }\n [data-lk=\"panel-engine-breakdown\"] .tick { fill: var(--_accent); }\n [data-lk=\"panel-engine-breakdown\"] .glyph { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; }\n [data-lk=\"panel-engine-breakdown\"] .track { fill: var(--_g); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] rect.lift { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] polyline.lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .bar1 { fill: var(--_accent); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] .bar2 { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] .bar3 { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] .bar4 { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .25); }\n [data-lk=\"panel-engine-breakdown\"] .spark1 { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .spark2 { fill: none; stroke: color-mix(in oklab, var(--_accent) 78%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .spark3 { fill: none; stroke: color-mix(in oklab, var(--_accent) 58%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .spark4 { fill: none; stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }\n [data-lk=\"panel-engine-breakdown\"] .halo { fill: var(--_faint); }\n [data-lk=\"panel-engine-breakdown\"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }\n [data-lk=\"panel-engine-breakdown\"] .dot2 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 78%, transparent); stroke-width: 1.5; }\n [data-lk=\"panel-engine-breakdown\"] .dot3 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 58%, transparent); stroke-width: 1.5; }\n [data-lk=\"panel-engine-breakdown\"] .dot4 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; }\n\n /* Hover motion (opt-out): 2 stages, top→down stagger per row. (1) each row's\n progress bar grows scaleX(0)->1 from the left (its lift bloom + tip marker\n travel with it as one bar) while that row's sparkline reveals left to right\n via a clip-path sweep (its lift trace + tip marker revealed together as one\n line), bar and sparkline moving in lockstep; rows start in top→down sequence.\n (2) once a row's bar+sparkline finish growing, that row's glyph dot pops.\n Off for reduced-motion visitors; set the motion token to 0 to force off. */\n [data-lk=\"panel-engine-breakdown\"] .grow { transform-box: fill-box; transform-origin: left; }\n [data-lk=\"panel-engine-breakdown\"] .beat { transform-box: fill-box; }\n @media (prefers-reduced-motion: no-preference) {\n [data-lk=\"panel-engine-breakdown\"]:hover .grow { animation: lk-panel-engine-breakdown-grow calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"panel-engine-breakdown\"]:hover .sweep { animation: lk-panel-engine-breakdown-sweep calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }\n [data-lk=\"panel-engine-breakdown\"]:hover .row2 { animation-delay: calc(var(--lk-motion, 1) * .08s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .row3 { animation-delay: calc(var(--lk-motion, 1) * .16s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .row4 { animation-delay: calc(var(--lk-motion, 1) * .24s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat { animation: lk-panel-engine-breakdown-pop calc(var(--lk-motion, 1) * .4s) ease-out both; }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat.row1 { animation-delay: calc(var(--lk-motion, 1) * .55s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat.row2 { animation-delay: calc(var(--lk-motion, 1) * .63s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat.row3 { animation-delay: calc(var(--lk-motion, 1) * .71s); }\n [data-lk=\"panel-engine-breakdown\"]:hover .beat.row4 { animation-delay: calc(var(--lk-motion, 1) * .79s); }\n }\n @keyframes lk-panel-engine-breakdown-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n @keyframes lk-panel-engine-breakdown-sweep { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }\n @keyframes lk-panel-engine-breakdown-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }\n </style>\n <rect class=\"card\" x=\".5\" y=\".5\" width=\"639\" height=\"359\" rx=\"12\" fill=\"#0E141B\" stroke=\"#1A2128\"/>\n\n <!-- réseau crosses: dead corners beyond the content margin, on the grid token (silenced when lk-grid is transparent) -->\n <path class=\"grid\" d=\"M628 14h6M631 11v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n <path class=\"grid\" d=\"M9 346h6M12 343v6\" fill=\"none\" stroke=\"#1C262C\" stroke-width=\"1\"/>\n\n <!-- leader edge tick: marks the row 1 band -->\n <rect class=\"tick\" x=\".5\" y=\"30\" width=\"3\" height=\"75\" fill=\"#4BE0C3\"/>\n\n <!-- row 1 (leader): glyph + full-accent bar with luminance-lift bloom + 7-point sparkline, punched tip dots -->\n <circle class=\"glyph\" cx=\"31\" cy=\"67.5\" r=\"11\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot beat row1\" cx=\"31\" cy=\"67.5\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"76\" y=\"64.5\" width=\"330\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <g class=\"grow row1\">\n <rect class=\"lift\" x=\"75\" y=\"63.5\" width=\"287.9\" height=\"8\" rx=\"3\" fill=\"#2E8274\" opacity=\".25\"/>\n <rect class=\"bar1\" x=\"76\" y=\"64.5\" width=\"285.9\" height=\"6\" rx=\"3\" fill=\"#4BE0C3\"/>\n <circle class=\"halo\" cx=\"361.9\" cy=\"67.5\" r=\"5\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"361.9\" cy=\"67.5\" r=\"2.4\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <g class=\"sweep row1\">\n <polyline class=\"lift\" points=\"440,76.5 470,72 500,78.7 530,67.5 560,63 590,65.3 620,56.3\" fill=\"none\" stroke=\"#2E8274\" stroke-width=\"3.5\" opacity=\".25\"/>\n <polyline class=\"spark1\" points=\"440,76.5 470,72 500,78.7 530,67.5 560,63 590,65.3 620,56.3\" fill=\"none\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n <circle class=\"halo\" cx=\"620\" cy=\"56.3\" r=\"4\" fill=\"#4BE0C31F\"/>\n <circle class=\"dot\" cx=\"620\" cy=\"56.3\" r=\"1.8\" fill=\"#0E141B\" stroke=\"#4BE0C3\" stroke-width=\"1.5\"/>\n </g>\n <line class=\"hair\" x1=\"20\" y1=\"105\" x2=\"620\" y2=\"105\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- row 2: glyph + stepped-opacity bar + sparkline -->\n <circle class=\"glyph\" cx=\"31\" cy=\"142.5\" r=\"11\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot2 beat row2\" cx=\"31\" cy=\"142.5\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C3C8\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"76\" y=\"139.5\" width=\"330\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <g class=\"grow row2\">\n <rect class=\"bar2\" x=\"76\" y=\"139.5\" width=\"232.8\" height=\"6\" rx=\"3\" fill=\"#4BE0C3C8\"/>\n </g>\n <g class=\"sweep row2\">\n <polyline class=\"spark2\" points=\"440,148.1 470,153.7 500,142.5 530,148.1 560,136.9 590,142.5 620,131.3\" fill=\"none\" stroke=\"#4BE0C3C8\" stroke-width=\"1.5\"/>\n <circle class=\"dot2\" cx=\"620\" cy=\"131.3\" r=\"1.8\" fill=\"#0E141B\" stroke=\"#4BE0C3C8\" stroke-width=\"1.5\"/>\n </g>\n <line class=\"hair\" x1=\"20\" y1=\"180\" x2=\"620\" y2=\"180\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- row 3: glyph + stepped-opacity bar + sparkline -->\n <circle class=\"glyph\" cx=\"31\" cy=\"217.5\" r=\"11\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot3 beat row3\" cx=\"31\" cy=\"217.5\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C394\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"76\" y=\"214.5\" width=\"330\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <g class=\"grow row3\">\n <rect class=\"bar3\" x=\"76\" y=\"214.5\" width=\"168.1\" height=\"6\" rx=\"3\" fill=\"#4BE0C394\"/>\n </g>\n <g class=\"sweep row3\">\n <polyline class=\"spark3\" points=\"440,213.7 470,206.3 500,213.7 530,221.3 560,216.8 590,225.8 620,228.7\" fill=\"none\" stroke=\"#4BE0C394\" stroke-width=\"1.5\"/>\n <circle class=\"dot3\" cx=\"620\" cy=\"228.7\" r=\"1.8\" fill=\"#0E141B\" stroke=\"#4BE0C394\" stroke-width=\"1.5\"/>\n </g>\n <line class=\"hair\" x1=\"20\" y1=\"255\" x2=\"620\" y2=\"255\" stroke=\"#1A2128\" stroke-width=\"1\"/>\n\n <!-- row 4: glyph + stepped-opacity bar + sparkline -->\n <circle class=\"glyph\" cx=\"31\" cy=\"292.5\" r=\"11\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot4 beat row4\" cx=\"31\" cy=\"292.5\" r=\"2.2\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <rect class=\"track\" x=\"76\" y=\"289.5\" width=\"330\" height=\"6\" rx=\"3\" fill=\"#1C262C\"/>\n <g class=\"grow row4\">\n <rect class=\"bar4\" x=\"76\" y=\"289.5\" width=\"117.3\" height=\"6\" rx=\"3\" fill=\"#4BE0C366\"/>\n </g>\n <g class=\"sweep row4\">\n <polyline class=\"spark4\" points=\"440,281.3 470,287.2 500,284.2 530,293.1 560,296 590,298.9 620,303.7\" fill=\"none\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\n <circle class=\"dot4\" cx=\"620\" cy=\"303.7\" r=\"1.8\" fill=\"#0E141B\" stroke=\"#4BE0C366\" stroke-width=\"1.5\"/>\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 640 360" role="img" aria-label="Panel rows graphic — decorative" class="lk-block" data-lk="panel-engine-breakdown" data-lk-contract="1">
<title>Panel rows graphic</title>
<desc>Decorative panel-rows graphic. Illustrative shape only; any implied data is fictional.</desc>
<style>
/* lk-contract v1 — synced from blocks/_contract/header.css */
[data-lk="panel-engine-breakdown"] {
--_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="panel-engine-breakdown"] text,
[data-lk="panel-engine-breakdown"] tspan { fill: var(--_i); }
/* Layer 3: block-specific — every selector MUST start with [data-lk="panel-engine-breakdown"] */
[data-lk="panel-engine-breakdown"] .card { fill: var(--_surf); stroke: var(--_hair); rx: var(--_radius); }
[data-lk="panel-engine-breakdown"] .grid { fill: none; stroke: var(--_g); stroke-width: 1; }
[data-lk="panel-engine-breakdown"] .hair { stroke: var(--_hair); stroke-width: 1; }
[data-lk="panel-engine-breakdown"] .tick { fill: var(--_accent); }
[data-lk="panel-engine-breakdown"] .glyph { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; }
[data-lk="panel-engine-breakdown"] .track { fill: var(--_g); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] rect.lift { fill: var(--_glow); opacity: .25; rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] polyline.lift { fill: none; stroke: var(--_glow); stroke-width: 3.5; opacity: .25; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .bar1 { fill: var(--_accent); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] .bar2 { fill: color-mix(in oklab, var(--_accent) 78%, transparent); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] .bar3 { fill: color-mix(in oklab, var(--_accent) 58%, transparent); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] .bar4 { fill: color-mix(in oklab, var(--_accent) 40%, transparent); rx: calc(var(--_radius) * .25); }
[data-lk="panel-engine-breakdown"] .spark1 { fill: none; stroke: var(--_accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .spark2 { fill: none; stroke: color-mix(in oklab, var(--_accent) 78%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .spark3 { fill: none; stroke: color-mix(in oklab, var(--_accent) 58%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .spark4 { fill: none; stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
[data-lk="panel-engine-breakdown"] .halo { fill: var(--_faint); }
[data-lk="panel-engine-breakdown"] .dot { fill: var(--_surf); stroke: var(--_accent); stroke-width: 1.5; }
[data-lk="panel-engine-breakdown"] .dot2 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 78%, transparent); stroke-width: 1.5; }
[data-lk="panel-engine-breakdown"] .dot3 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 58%, transparent); stroke-width: 1.5; }
[data-lk="panel-engine-breakdown"] .dot4 { fill: var(--_surf); stroke: color-mix(in oklab, var(--_accent) 40%, transparent); stroke-width: 1.5; }
/* Hover motion (opt-out): 2 stages, top→down stagger per row. (1) each row's
progress bar grows scaleX(0)->1 from the left (its lift bloom + tip marker
travel with it as one bar) while that row's sparkline reveals left to right
via a clip-path sweep (its lift trace + tip marker revealed together as one
line), bar and sparkline moving in lockstep; rows start in top→down sequence.
(2) once a row's bar+sparkline finish growing, that row's glyph dot pops.
Off for reduced-motion visitors; set the motion token to 0 to force off. */
[data-lk="panel-engine-breakdown"] .grow { transform-box: fill-box; transform-origin: left; }
[data-lk="panel-engine-breakdown"] .beat { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
[data-lk="panel-engine-breakdown"]:hover .grow { animation: lk-panel-engine-breakdown-grow calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="panel-engine-breakdown"]:hover .sweep { animation: lk-panel-engine-breakdown-sweep calc(var(--lk-motion, 1) * .55s) cubic-bezier(.22,.61,.36,1) both; }
[data-lk="panel-engine-breakdown"]:hover .row2 { animation-delay: calc(var(--lk-motion, 1) * .08s); }
[data-lk="panel-engine-breakdown"]:hover .row3 { animation-delay: calc(var(--lk-motion, 1) * .16s); }
[data-lk="panel-engine-breakdown"]:hover .row4 { animation-delay: calc(var(--lk-motion, 1) * .24s); }
[data-lk="panel-engine-breakdown"]:hover .beat { animation: lk-panel-engine-breakdown-pop calc(var(--lk-motion, 1) * .4s) ease-out both; }
[data-lk="panel-engine-breakdown"]:hover .beat.row1 { animation-delay: calc(var(--lk-motion, 1) * .55s); }
[data-lk="panel-engine-breakdown"]:hover .beat.row2 { animation-delay: calc(var(--lk-motion, 1) * .63s); }
[data-lk="panel-engine-breakdown"]:hover .beat.row3 { animation-delay: calc(var(--lk-motion, 1) * .71s); }
[data-lk="panel-engine-breakdown"]:hover .beat.row4 { animation-delay: calc(var(--lk-motion, 1) * .79s); }
}
@keyframes lk-panel-engine-breakdown-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lk-panel-engine-breakdown-sweep { from { clip-path: inset(0 100% 0 0) fill-box; } to { clip-path: inset(0 0 0 0) fill-box; } }
@keyframes lk-panel-engine-breakdown-pop { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 55% { transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
</style>
<rect class="card" x=".5" y=".5" width="639" height="359" rx="12" fill="#0E141B" stroke="#1A2128"/>
<!-- réseau crosses: dead corners beyond the content margin, on the grid token (silenced when lk-grid is transparent) -->
<path class="grid" d="M628 14h6M631 11v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<path class="grid" d="M9 346h6M12 343v6" fill="none" stroke="#1C262C" stroke-width="1"/>
<!-- leader edge tick: marks the row 1 band -->
<rect class="tick" x=".5" y="30" width="3" height="75" fill="#4BE0C3"/>
<!-- row 1 (leader): glyph + full-accent bar with luminance-lift bloom + 7-point sparkline, punched tip dots -->
<circle class="glyph" cx="31" cy="67.5" r="11" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot beat row1" cx="31" cy="67.5" r="2.2" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
<rect class="track" x="76" y="64.5" width="330" height="6" rx="3" fill="#1C262C"/>
<g class="grow row1">
<rect class="lift" x="75" y="63.5" width="287.9" height="8" rx="3" fill="#2E8274" opacity=".25"/>
<rect class="bar1" x="76" y="64.5" width="285.9" height="6" rx="3" fill="#4BE0C3"/>
<circle class="halo" cx="361.9" cy="67.5" r="5" fill="#4BE0C31F"/>
<circle class="dot" cx="361.9" cy="67.5" r="2.4" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<g class="sweep row1">
<polyline class="lift" points="440,76.5 470,72 500,78.7 530,67.5 560,63 590,65.3 620,56.3" fill="none" stroke="#2E8274" stroke-width="3.5" opacity=".25"/>
<polyline class="spark1" points="440,76.5 470,72 500,78.7 530,67.5 560,63 590,65.3 620,56.3" fill="none" stroke="#4BE0C3" stroke-width="1.5"/>
<circle class="halo" cx="620" cy="56.3" r="4" fill="#4BE0C31F"/>
<circle class="dot" cx="620" cy="56.3" r="1.8" fill="#0E141B" stroke="#4BE0C3" stroke-width="1.5"/>
</g>
<line class="hair" x1="20" y1="105" x2="620" y2="105" stroke="#1A2128" stroke-width="1"/>
<!-- row 2: glyph + stepped-opacity bar + sparkline -->
<circle class="glyph" cx="31" cy="142.5" r="11" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot2 beat row2" cx="31" cy="142.5" r="2.2" fill="#0E141B" stroke="#4BE0C3C8" stroke-width="1.5"/>
<rect class="track" x="76" y="139.5" width="330" height="6" rx="3" fill="#1C262C"/>
<g class="grow row2">
<rect class="bar2" x="76" y="139.5" width="232.8" height="6" rx="3" fill="#4BE0C3C8"/>
</g>
<g class="sweep row2">
<polyline class="spark2" points="440,148.1 470,153.7 500,142.5 530,148.1 560,136.9 590,142.5 620,131.3" fill="none" stroke="#4BE0C3C8" stroke-width="1.5"/>
<circle class="dot2" cx="620" cy="131.3" r="1.8" fill="#0E141B" stroke="#4BE0C3C8" stroke-width="1.5"/>
</g>
<line class="hair" x1="20" y1="180" x2="620" y2="180" stroke="#1A2128" stroke-width="1"/>
<!-- row 3: glyph + stepped-opacity bar + sparkline -->
<circle class="glyph" cx="31" cy="217.5" r="11" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot3 beat row3" cx="31" cy="217.5" r="2.2" fill="#0E141B" stroke="#4BE0C394" stroke-width="1.5"/>
<rect class="track" x="76" y="214.5" width="330" height="6" rx="3" fill="#1C262C"/>
<g class="grow row3">
<rect class="bar3" x="76" y="214.5" width="168.1" height="6" rx="3" fill="#4BE0C394"/>
</g>
<g class="sweep row3">
<polyline class="spark3" points="440,213.7 470,206.3 500,213.7 530,221.3 560,216.8 590,225.8 620,228.7" fill="none" stroke="#4BE0C394" stroke-width="1.5"/>
<circle class="dot3" cx="620" cy="228.7" r="1.8" fill="#0E141B" stroke="#4BE0C394" stroke-width="1.5"/>
</g>
<line class="hair" x1="20" y1="255" x2="620" y2="255" stroke="#1A2128" stroke-width="1"/>
<!-- row 4: glyph + stepped-opacity bar + sparkline -->
<circle class="glyph" cx="31" cy="292.5" r="11" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot4 beat row4" cx="31" cy="292.5" r="2.2" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
<rect class="track" x="76" y="289.5" width="330" height="6" rx="3" fill="#1C262C"/>
<g class="grow row4">
<rect class="bar4" x="76" y="289.5" width="117.3" height="6" rx="3" fill="#4BE0C366"/>
</g>
<g class="sweep row4">
<polyline class="spark4" points="440,281.3 470,287.2 500,284.2 530,293.1 560,296 590,298.9 620,303.7" fill="none" stroke="#4BE0C366" stroke-width="1.5"/>
<circle class="dot4" cx="620" cy="303.7" r="1.8" fill="#0E141B" stroke="#4BE0C366" stroke-width="1.5"/>
</g>
</svg>
</div>