/* Small, flat illustrated marks: a quiet plate, a strong pictogram, two ink colors. */
.home-page .tool-card .tc-icon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--icon-edge, #e3ded4);
  border-radius: 7px;
  background: var(--icon-paper, #f5f2ec);
}
.home-page .tool-card .tc-icon::before {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 18px;
  height: 18px;
  background: var(--icon-wash, #e7e2d9);
  content: "";
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.home-page .tool-card .tc-icon::after {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: -1;
  width: 5px;
  height: 5px;
  background: var(--icon-accent, #a84f2d);
  content: "";
}
.home-page .tool-card:hover .tc-icon { border-color: var(--icon-edge, #d6c9b9); background: var(--icon-paper, #f5f2ec); }
.home-page .tool-card .tc-icon .tool-icon-svg {
  display: block;
  width: 40px;
  height: 40px;
  overflow: visible;
}
.home-page .tool-card .tc-icon .tool-icon-svg g { stroke-width: 2.05; }
.home-page .tool-card[data-cat="dev"] { --icon-paper:#f0f4f6; --icon-wash:#cadce7; --icon-edge:#d5e0e5; --icon-accent:#c47739; }
.home-page .tool-card[data-cat="encode"] { --icon-paper:#f5f1e8; --icon-wash:#e4d6b6; --icon-edge:#e5dcc9; --icon-accent:#bf6d3f; }
.home-page .tool-card[data-cat="text"] { --icon-paper:#eef4ef; --icon-wash:#cee0d1; --icon-edge:#d8e3d7; --icon-accent:#b86b42; }
.home-page .tool-card[data-cat="image"] { --icon-paper:#f3eff4; --icon-wash:#dfd0e3; --icon-edge:#e4dce6; --icon-accent:#c47a43; }
.home-page .tool-card[data-cat="file"] { --icon-paper:#f5f0ea; --icon-wash:#e9d9c5; --icon-edge:#e7ddd1; --icon-accent:#b65c36; }
.home-page .tool-card[data-cat="3d"] { --icon-paper:#edf2f1; --icon-wash:#cadbd8; --icon-edge:#d6e1df; --icon-accent:#b77137; }
.home-page .tool-card[data-cat="engineering"] { --icon-paper:#f2f1e9; --icon-wash:#dbddc4; --icon-edge:#dfe0d0; --icon-accent:#ad633d; }
.home-page .tool-card[data-cat="office"] { --icon-paper:#eef2f5; --icon-wash:#d0dbe7; --icon-edge:#dce3ea; --icon-accent:#b76b3d; }
.home-page .tool-card[data-cat="life"] { --icon-paper:#f5efed; --icon-wash:#e6d0c9; --icon-edge:#e9dcd8; --icon-accent:#bd6b3b; }
.home-page .tool-card[data-cat="miniprogram"] { --icon-paper:#eef4ef; --icon-wash:#cee0d1; --icon-edge:#d8e3d7; --icon-accent:#b86b42; }

.tool-ui .tool-title-icon,
.tool-ui .tool-crumb-icon {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e2ddd3;
  border-radius: 6px;
  background: #f3f0e9;
}
.tool-ui .tool-title-icon .tool-icon-svg { width: 100%; height: 100%; }
.tool-ui .tool-crumb-icon .tool-icon-svg { width: 100%; height: 100%; }
.article-site .site-logo .site-symbol { border-radius: 3px; }
.home-page .site-logo .site-symbol,
.home-page .footer-logo .site-symbol { display: block; width: 31px; height: 31px; flex: none; }
.tool-ui .tool-brand-mark { border-radius: 0; background: transparent; }
.tool-ui .tool-brand-mark .site-symbol { display: block; width: 31px; height: 31px; }
.tool-ui .tool-footer-brand .tool-brand-mark { width: 25px; height: 25px; }
.tool-ui .tool-footer-brand .tool-brand-mark .site-symbol { width: 25px; height: 25px; }

@media (max-width:760px) {
  .home-page .tool-card .tc-icon { width: 36px; height: 36px; }
  .home-page .tool-card .tc-icon .tool-icon-svg { width: 35px; height: 35px; }
}