/* OnlineTools1.7: one visual card anatomy across every discovery surface. */
.otk-grid > .otk-card.otk-card-visual {
  display:flex; flex-direction:column; padding:20px; min-width:0;
  border-radius:16px; gap:0;
}
.otk-grid > .otk-card.otk-card-visual > .otk-card-art {
  display:grid; place-items:center; flex:0 0 auto; width:100%; aspect-ratio:16/9;
  min-height:0; height:auto; margin:0 0 16px; border-radius:11px; overflow:hidden;
}
.otk-grid > .otk-card.otk-card-visual > .otk-card-art svg {
  display:block; width:100%; height:100%; max-height:none;
  font-family:inherit; pointer-events:none;
}
.otk-grid > .otk-card.otk-card-visual > .otk-card-top {
  display:flex; flex:0 0 auto; align-items:center; justify-content:space-between;
  height:30px; margin:0 0 12px;
}
.otk-grid > .otk-card.otk-card-visual > .otk-card-top > .otk-icon {
  width:30px; min-width:30px; height:30px; border-radius:8px;
}
.otk-grid > .otk-card.otk-card-visual > .otk-card-top > .otk-icon svg {width:18px;height:18px}
.otk-grid > .otk-card.otk-card-visual > :is(h2,h3,h4) {
  flex:0 0 auto; margin:0 0 10px; padding:0; min-height:0; max-width:none;
  font-size:16px; line-height:1.45; font-weight:700; letter-spacing:-.2px;
  overflow-wrap:anywhere;
}
.otk-grid > .otk-card.otk-card-visual > p {
  flex:1 0 auto; margin:0 0 20px; padding:0; min-height:0;
  font-size:13px; line-height:1.75; color:var(--otk-muted,#52657f);
}
.otk-grid > .otk-card.otk-card-visual > .otk-card-foot {
  flex:0 0 auto; align-items:center; gap:10px; margin-top:0; padding-top:13px;
  font-size:10px; line-height:1.6;
}
.otk-grid > .otk-card.otk-card-visual > .otk-card-foot > span:last-child {white-space:nowrap}
.otk-grid > .otk-card.otk-card-visual:focus-visible {
  outline:3px solid #0053e2; outline-offset:3px; border-color:#0053e2;
}
@media(max-width:760px){
  .otk-grid > .otk-card.otk-card-visual {padding:17px;border-radius:14px}
  .otk-grid > .otk-card.otk-card-visual > .otk-card-art {margin-bottom:14px;border-radius:10px}
  .otk-grid > .otk-card.otk-card-visual > :is(h2,h3,h4) {font-size:16px}
  .otk-grid > .otk-card.otk-card-visual > p {font-size:13px;margin-bottom:18px}
}
@media(max-width:540px){
  .otk-related .otk-grid,.otk-reference-library .otk-grid {grid-template-columns:minmax(0,1fr)}
  .otk-related .otk-grid>.otk-card.otk-card-visual:last-child {display:flex}
  .otk-grid > .otk-card.otk-card-visual > .otk-card-foot {font-size:10px;flex-wrap:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .otk-grid > .otk-card.otk-card-visual {transition:none}
  .otk-grid > .otk-card.otk-card-visual:hover {transform:none}
}

/* dark-mode:start — generated by scripts/dark-mode.py from assets/tool-cards.css; do not edit by hand */
@media screen{
 html[data-theme="dark"] .otk-grid > .otk-card.otk-card-visual > p:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .otk-grid > .otk-card.otk-card-visual:focus-visible:not([data-otk-paper],[data-otk-paper] *){outline:3px solid #0053e2;border-color:#0053e2}
}
/* dark-mode:end */