.tool-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tool-card { position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 34px 36px 32px; overflow: hidden; border-radius: 20px; background: var(--tool-bg); color: var(--tool-fg); text-decoration: none; -webkit-user-drag: none; user-select: none; transition: background-color .15s; }
.tool-avatar-scene img, .tool-throw-scene img { -webkit-user-drag: none; }
.tool-card-avatars { --tool-bg: #e9ecdf; --tool-bg-hover: #e4e8d8; --tool-fg: #283b2a; }
.tool-card-tits { --tool-bg: #f0e6d7; --tool-bg-hover: #ece0ce; --tool-fg: #493b2b; }
html.dark .tool-card-avatars { --tool-bg: #1d231d; --tool-bg-hover: #222922; --tool-fg: #dbe5d3; }
html.dark .tool-card-tits { --tool-bg: #261f17; --tool-bg-hover: #2c241b; --tool-fg: #efdfc8; }
.tool-card:hover { background: var(--tool-bg-hover); }
.tool-card-copy { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; align-items: flex-start; max-width: 340px; }
.tool-card-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 9999px; background: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 700; }
html.dark .tool-card-tag { background: rgba(255, 255, 255, .08); }
.tool-card-title { margin: 18px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.3; }
.tool-card-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.7; opacity: .78; word-break: keep-all; }
.tool-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 24px; font-size: 15px; font-weight: 700; }
.tool-card-link .tool-icon { width: 16px; height: 16px; transition: transform .15s; }
.tool-card:hover .tool-card-link .tool-icon { transform: translateX(4px); }
.tool-avatar-scene { position: absolute; width: 205px; height: 148px; right: 4px; bottom: 19px; }
.tool-avatar { position: absolute; object-fit: contain; image-rendering: pixelated; z-index: 1; }
.tool-avatar-1 { left: 0; bottom: 7px; transform: rotate(-9deg); }
.tool-avatar-2 { left: 42px; bottom: 42px; width: 85px; height: 85px; }
.tool-avatar-3 { left: 105px; bottom: 6px; }
.tool-avatar-4 { left: 141px; bottom: 48px; width: 55px; height: 55px; }
.tool-card-avatars:hover .tool-avatar-2 { animation: tool-hop .55s cubic-bezier(.3, .7, .4, 1); }
@keyframes tool-hop { 40% { transform: translateY(-14px); } 70% { transform: translateY(-3px); } }
.tool-avatar-bubble { position: absolute; left: 61px; top: -14px; border: 1px solid #8e9c80; border-radius: 8px 8px 8px 0; background: #fffff9; padding: 7px 12px; font-size: 11px; color: #283b2a; transform: rotate(-8deg); }
.tool-avatar-ground { position: absolute; bottom: 6px; left: 5px; right: 0; border-bottom: 1px dashed #a1ad90; }
.tool-throw-scene { position: absolute; width: 190px; height: 170px; bottom: 20px; right: 12px; }
.tool-throw-scene > img { position: absolute; right: 5px; top: 22px; transform: rotate(24deg); filter: drop-shadow(6px 6px 0 #73582e15); transition: transform .35s cubic-bezier(.3, .7, .4, 1); }
.tool-card-tits:hover .tool-throw-scene > img { transform: rotate(52deg) translate(-4px, 2px); }
.tool-throw-path { position: absolute; width: 117px; height: 112px; left: 0; top: 51px; border: 1px dashed #b09d7c; border-bottom-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(38deg); }
.tool-throw-label { position: absolute; left: 25px; top: 15px; font-size: 13px; font-weight: 700; transform: rotate(-13deg); }
.tool-throw-impact { position: absolute; bottom: 3px; right: 42px; font-size: 44px; color: #ae7343; }

@media (max-width: 1100px) {
    .tool-avatar-scene, .tool-throw-scene { transform: scale(.78); transform-origin: right bottom; right: 0; }
    .tool-card { padding: 30px; }
    .tool-card-copy { max-width: 290px; }
}
@media (max-width: 800px) {
    .tool-cards { gap: 14px; }
    .tool-card { min-height: 390px; padding: 24px; }
    .tool-card-title { font-size: 25px; }
    .tool-card-link { margin-top: 0; }
    .tool-avatar-scene, .tool-throw-scene { transform: scale(.85); right: 15px; bottom: 7px; }
}
@media (max-width: 600px) {
    .tool-cards { grid-template-columns: 1fr; }
    .tool-card { min-height: 320px; }
    .tool-avatar-scene, .tool-throw-scene { transform: scale(.75); right: 0; bottom: 17px; }
}
@media (max-width: 360px) {
    .tool-avatar-scene, .tool-throw-scene { transform: scale(.6); right: -5px; }
    .tool-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .tool-card, .tool-card-link .tool-icon, .tool-throw-scene > img { transition: none; }
    .tool-card-avatars:hover .tool-avatar-2 { animation: none; }
    .tool-avatar-scene { visibility: hidden; }
}