/* The app uses the same one-column card, spacing, typography and hover color as Skills. */
.app-card{cursor:pointer;scroll-margin-top:104px}
.app-card .skill-card-body{max-width:54%}
.app-card h3{white-space:nowrap}
.app-card .skill-card-body p{line-height:1.72}
.duo-card-visual{position:absolute;z-index:2;right:18px;top:98px;width:46%;max-width:230px;aspect-ratio:970/780;overflow:hidden;border-radius:14px;box-shadow:0 10px 22px rgba(0,0,0,.06);pointer-events:none;transition:transform .45s var(--ease)}
/* Frame only the product area of the approved 1080 x 1920 cover; no image content is regenerated. */
.duo-card-visual img{position:absolute;display:block;left:-5.15464%;top:-67.94872%;width:111.34021%;max-width:none;height:auto}
.app-card:is(:hover,:focus-visible) .duo-card-visual{transform:translateY(-4px) rotate(-2deg)}
.app-card:is(:hover,:focus-visible) .skill-card-body p{opacity:1;color:rgba(255,255,255,.9)}
.app-card:is(:hover,:focus-visible) .skill-card-head>span:first-child,
.app-card:is(:hover,:focus-visible) h3,
.app-card:is(:hover,:focus-visible) .skill-card-footer{color:#fff}
@media(max-width:640px){.product-toolbar .filters{display:grid;grid-template-columns:1fr 1fr;overflow:visible;gap:8px}.product-toolbar .filter{padding:10px 12px}.duo-card-visual{right:14px;top:146px}}
@media(hover:none),(pointer:coarse){.app-card:not(:focus-visible) .skill-card-body p{color:#555}.app-card:not(:focus-visible) .skill-card-head>span:first-child,.app-card:not(:focus-visible) h3,.app-card:not(:focus-visible) .skill-card-footer{color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.duo-card-visual{transition:none}.app-card:is(:hover,:focus-visible) .duo-card-visual{transform:none}}