/* Design Engineering: eng cards + fanning tool chips. */
.engGrid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:8px;padding:0;display:grid}
.engCard{min-width:0;padding:var(--space-3) var(--space-3) 0;border-radius:var(--radius-lg);background:var(--color-surface);color:inherit;text-align:left;cursor:pointer;font:inherit;border:0;flex-direction:column;margin:0;transition:background-color .2s;display:flex;overflow:hidden}
.engCard:hover{background:#2a2a2a}
.engCard:focus-visible{outline:1px solid var(--color-text);outline-offset:2px}
.engCardMedia{aspect-ratio:16/10;border-radius:var(--radius-md);background:#202020;transition:transform .45s cubic-bezier(.22,1,.36,1);display:block;position:relative;overflow:hidden;transform:scale(.998)}
@media (hover:hover) and (pointer:fine) {
.engCard:hover .engCardMedia{transform:scale(1.01)}
}
@media (prefers-reduced-motion:reduce) {
.engCardMedia{transition:none}
}
.engCardMedia img,.engCardMedia video{object-fit:cover;pointer-events:none;border-radius:inherit;width:100%;height:100%;position:absolute;inset:0}
.engCardClip{position:absolute;inset:0}
.engCardClip>img{z-index:1}
.engCardMediaSite>.engCardClip{align-self:flex-end;width:80%;max-height:92%;position:relative;inset:auto}
.engCardMediaSite>.engCardClip video,.engCardMediaSite>.engCardClip img{align-self:auto;width:100%;max-height:92%}
.engCardMediaSite>.engCardClip img{z-index:1;height:100%;position:absolute;inset:0}
.engCardBar{align-items:center;gap:8px;padding:14px 0;display:flex}
.engCardName{min-width:0;font-family:var(--font-body);color:var(--text);flex:1;font-size:14px;font-weight:400;line-height:1}
.engCardTitleRow{flex:1;align-items:center;gap:6px;min-width:0;display:flex}
.engCardTitleRow:has(.engCardTools) .engCardName{flex:0 auto;line-height:1.3}
.engCardBar:has(.engCardTools){flex-wrap:wrap}
.engCardTool img[src$=rive\.png],.engCardTool img[src$=threejs\.webp],.engCardTool img[src$=storybook\.png],.engModalToolIcon[src$=rive\.png],.engModalToolIcon[src$=threejs\.webp],.engModalToolIcon[src$=storybook\.png]{box-sizing:border-box;background:#fff;padding:2px}
.engCardTool img[src$=shadcn\.png],.engModalToolIcon[src$=shadcn\.png]{box-sizing:border-box;border:2px solid #fff}
:is(.engCardTool:has(img[src$=cursor-2\.png]),.engCardTool:has(img[src$=rive\.jpeg])){width:17px;height:17px;top:-.5px;left:-.5px}
.engCardTool:has(img[src$=sketchfab\.png]){background:#1aaad9}
.engCardTool:has(img[src$=vercel\.png]){box-shadow:none}
.engCardTool:has(img[src$=vercel\.png]):after{content:none}
.engCardTool img[src$=vercel\.png]{filter:invert()drop-shadow(0 2px 2px #00000047)}
@media (hover:hover) and (pointer:fine) {
.engCard:hover .engCardTool{transform:translateX(calc(4px + var(--tool-index) * 20px));box-shadow:0 2px 3px #00000047,0 5px 9px #0000003d,0 0 7px #ffffff14}
}
.engCard:focus-visible .engCardTool{transform:translateX(calc(4px + var(--tool-index) * 20px));box-shadow:0 2px 3px #00000047,0 5px 9px #0000003d,0 0 7px #ffffff14}
.engCardKind{font-family:var(--font-label), ui-sans-serif, system-ui, sans-serif;letter-spacing:var(--tracking-label);text-transform:uppercase;color:#a9a9a9;font-size:12px;font-weight:500;line-height:20px}
@media (max-width:1100px) {
.engGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px) {
.engGrid{grid-template-columns:1fr}
}