.tools-directory {
    --tools-ink: #3b322b;
    --tools-muted: #85776b;
    --tools-hand: "Huninn", "Yomogi", sans-serif;
    color: var(--tools-ink);
}
html[lang="zh-Hans"] .tools-directory { --tools-hand: "ZCOOL KuaiLe", "Huninn", sans-serif; }
html[lang="ja"] .tools-directory { --tools-hand: "Yomogi", "Huninn", sans-serif; }
html[lang="ko"] .tools-directory { --tools-hand: "Gaegu", sans-serif; }
.tools-directory-hero {
    overflow: hidden;
    border-bottom: 1px solid #e9e1d4;
    background: radial-gradient(ellipse at 12% 25%, #e8efd5, transparent 37%), radial-gradient(ellipse at 88% 15%, #ffe6ec, transparent 38%), #fffcf5;
}
.tools-directory-hero-inner { position: relative; max-width: 1100px; margin: auto; padding: 32px 24px 24px; text-align: center; }
.tools-directory-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #a86d80; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.tools-directory-hero h1 { margin: 12px 0 9px; font: 700 clamp(32px, 4vw, 48px)/1.25 var(--tools-hand); letter-spacing: -.025em; }
.tools-directory-hero p { max-width: 670px; margin: auto; font-size: 14px; line-height: 1.85; color: var(--tools-muted); }
.tools-hero-doodle { position: absolute; top: 67px; font: 54px var(--tools-hand); pointer-events: none; }
.tools-hero-doodle-left { left: 7%; color: #e8bdc8; transform: rotate(-14deg); }
.tools-hero-doodle-right { right: 7%; color: #b8ce96; transform: rotate(12deg); }
.tools-hero-friends { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.tools-hero-friends img { width: 43px; height: 43px; object-fit: cover; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px #65443113; }
.tools-hero-friends img:first-child { transform: rotate(-10deg); }
.tools-hero-friends img:last-child { transform: rotate(10deg); }
.tools-directory-stage { padding: 32px 24px 43px; background: radial-gradient(#bca68c24 .8px, transparent .8px) 0 0 / 16px 16px, #f8f5ec; }
.tools-directory-wrap { max-width: 1120px; margin: auto; }
.tools-collection-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.tools-collection-heading h2 { font: 700 23px/1.5 var(--tools-hand); }
.tools-collection-heading > span { color: #998a7c; font-size: 12px; }
.tools-collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.tool-discovery-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 2px solid var(--tools-ink); border-radius: 25px; background: #fffdf9; box-shadow: 5px 6px 0 #5e483714; color: inherit; transition: transform .22s, box-shadow .22s; }
.tool-discovery-card-profile { --tool-accent: #b95e7d; --tool-soft: #fce5ed; --tool-tag: #fcf0f4; }
.tool-discovery-card-personality { --tool-accent: #5c8195; --tool-soft: #dfedf7; --tool-tag: #eff6fa; }
.tool-discovery-card-tier { --tool-accent: #778b4b; --tool-soft: #e8efd4; --tool-tag: #f2f6e9; }
.tool-discovery-card-puzzle { --tool-accent: #ae8135; --tool-soft: #f9eabf; --tool-tag: #fff7e3; }
.tool-discovery-card-birthday { --tool-accent: #8b6ca6; --tool-soft: #ece4f6; --tool-tag: #f5effb; grid-column: 1 / -1; flex-direction: row; }
.tool-discovery-card:focus-visible { outline: 3px solid var(--tool-accent); outline-offset: 5px; }
.tool-discovery-art { position: relative; height: 244px; overflow: hidden; isolation: isolate; border-bottom: 1px solid #3b322b1c; background-color: var(--tool-soft); }
.tool-discovery-art::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .65; background-image: radial-gradient(#fff 1.5px, transparent 1.5px); background-size: 19px 19px; }
.tool-art-label { position: absolute; z-index: 4; top: 15px; left: 18px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 36px); padding: 5px 10px; border: 1px solid #3b322b18; border-radius: 20px; background: #fffdf9de; color: var(--tool-accent); font-size: 10px; font-weight: 700; }
.tool-art-sparkle { position: absolute; color: var(--tool-accent); font: 43px var(--tools-hand); opacity: .5; }
.tool-art-sparkle-one { top: 48px; right: 26px; transform: rotate(12deg); }
.tool-art-sparkle-two { bottom: 12px; left: 25px; transform: rotate(-17deg); }
.tool-art-sticker { position: absolute; z-index: 3; right: 20px; bottom: 15px; max-width: 75%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--tools-ink); border-radius: 9px; background: #fffdf9; box-shadow: 2px 3px 0 #3b322b16; color: var(--tool-accent); font: 700 13px/1.3 var(--tools-hand); transform: rotate(-5deg); }
.tool-art-sticker i { font-size: 11px; }
.tool-profile-back, .tool-profile-front { position: absolute; width: 55%; height: auto; border-radius: 14px; box-shadow: 0 8px 14px #74405121; transition: transform .28s; }
.tool-profile-back { top: 45px; left: 37px; transform: rotate(-11deg); }
.tool-profile-front { top: 56px; right: 39px; transform: rotate(8deg); }
.tool-quiz-question { position: absolute; z-index: 2; top: 36px; left: 50%; max-width: 70%; padding: 9px 20px; border: 1.5px solid var(--tools-ink); border-radius: 18px 18px 18px 3px; background: #fffdf9; font: 700 21px/1.35 var(--tools-hand); text-align: center; white-space: nowrap; transform: translateX(-50%) rotate(-4deg); box-shadow: 3px 4px 0 #3b322b0c; }
.tool-quiz-friends { position: absolute; top: 103px; right: 45px; left: 45px; display: flex; justify-content: center; align-items: center; gap: 19px; }
.tool-quiz-friend { position: relative; display: block; width: 92px; height: 92px; padding: 7px; border: 2px solid var(--tools-ink); border-radius: 22px; background: #fffdf9; box-shadow: 3px 5px 0 #3b322b12; transition: transform .25s; }
.tool-quiz-friend img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.tool-quiz-friend > span { position: absolute; right: -8px; bottom: -10px; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--tools-ink); border-radius: 50%; color: #6d5e4f; font: 700 21px var(--tools-hand); }
.tool-quiz-friend-one { transform: rotate(-10deg); }
.tool-quiz-friend-one > span { background: #f8d1dd; }
.tool-quiz-friend-two { transform: translateY(7px); }
.tool-quiz-friend-two > span { background: #d7eaf8; }
.tool-quiz-friend-three { transform: rotate(10deg); }
.tool-quiz-friend-three > span { background: #fff0bd; }
.tool-art-personality .tool-art-sticker { right: 16px; bottom: 13px; font-size: 12px; transform: rotate(4deg); }
.tool-tier-preview { position: absolute; top: 12px; left: 50%; width: auto; height: calc(100% - 24px); max-width: calc(100% - 36px); object-fit: contain; border-radius: 12px; box-shadow: 6px 7px 0 #52693418; transform: translateX(-50%) rotate(-4deg); transition: transform .25s; }
.tool-art-tier .tool-art-sparkle-one { top: 65px; right: 37px; }
.tool-puzzle-preview { position: absolute; top: 26px; left: 50%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 194px; height: 194px; padding: 7px; border: 2px solid var(--tools-ink); border-radius: 14px; background: #fffdf9; box-shadow: 6px 7px 0 #a6833c20; transform: translateX(-50%) rotate(8deg); transition: transform .25s; }
.tool-puzzle-preview > span { border: 1px solid #d8c28c; border-radius: 4px; background: #fff8df url('/static/images/character/chiikawa.png') no-repeat; background-size: 300% 300%; }
.tool-puzzle-preview > span:nth-child(1) { background-position: 0 0; }
.tool-puzzle-preview > span:nth-child(2) { background-position: 50% 0; }
.tool-puzzle-preview > span:nth-child(3) { background-position: 100% 0; }
.tool-puzzle-preview > span:nth-child(4) { background-position: 0 50%; }
.tool-puzzle-preview > span:nth-child(5) { background-position: 50% 50%; }
.tool-puzzle-preview > span:nth-child(6) { background-position: 100% 50%; }
.tool-puzzle-preview > span:nth-child(7) { background-position: 0 100%; }
.tool-puzzle-preview > span:nth-child(8) { background-position: 50% 100%; }
.tool-puzzle-preview > span:nth-child(9) { background-position: 100% 100%; transform: translate(16px, 12px) rotate(12deg); box-shadow: 2px 4px 3px #80633c21; transition: transform .25s; }
.tool-puzzle-piece { position: absolute; bottom: 28px; left: 15%; font-size: 52px; color: #c4a05b; transform: rotate(-19deg); opacity: .65; }
.tool-art-puzzle .tool-art-sparkle-two { bottom: 55px; left: auto; right: 27px; }
.tool-art-birthday { flex: 0 0 42%; height: auto; min-height: 244px; border-right: 1px solid #3b322b1c; border-bottom: 0; }
.tool-birthday-calendar { position: absolute; top: 32px; left: 50%; width: 224px; overflow: hidden; border: 2px solid var(--tools-ink); border-radius: 13px; background: #fffdf9; box-shadow: 5px 6px 0 #7d5e9820; transform: translateX(-50%) rotate(-6deg); transition: transform .25s; }
.tool-birthday-calendar-title { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 45px; padding: 7px 12px; border-bottom: 1px solid #3b322b1c; background: #d9c8ed; color: #684e7f; font: 700 17px/1.4 var(--tools-hand); }
.tool-birthday-calendar-title i { font-size: 15px; }
.tool-birthday-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 12px; text-align: center; }
.tool-birthday-calendar-days > span { display: grid; place-items: center; min-height: 28px; border-radius: 6px; color: #a293ac; font-size: 11px; }
.tool-birthday-calendar-days > .is-birthday { background: #f8d7e3; color: #b96d8b; font-size: 24px; line-height: 1; }
.tool-birthday-friend { position: absolute; z-index: 2; bottom: 21px; width: 76px; height: 76px; padding: 4px; border: 2px solid #fffdf9; border-radius: 50%; background: #fffdf9; object-fit: cover; box-shadow: 2px 4px 0 #7d5e9820; }
.tool-birthday-friend-one { left: 28px; transform: rotate(-10deg); }
.tool-birthday-friend-two { right: 30px; bottom: 40px; transform: rotate(10deg); }
.tool-art-birthday .tool-art-sparkle-one { top: 40px; right: 28px; }
.tool-art-birthday .tool-art-sparkle-two { bottom: 106px; left: 25px; font-size: 32px; }
.tool-discovery-content { display: flex; flex-direction: column; flex: 1; padding: 24px 27px 17px; }
.tool-discovery-title { display: flex; align-items: center; gap: 10px; }
.tool-icon { flex-shrink: 0; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: var(--tool-soft); color: var(--tool-accent); font-size: 14px; }
.tool-discovery-title h3 { font: 700 25px/1.4 var(--tools-hand); text-wrap: balance; transition: color .2s; }
.tool-discovery-content > p { min-height: 48px; margin-top: 10px; color: var(--tools-muted); font-size: 13px; line-height: 1.85; }
.tool-discovery-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 19px; }
.tool-discovery-tags li { padding: 4px 9px; border: 1px solid #3b322b0c; border-radius: 7px; background: var(--tool-tag); color: var(--tool-accent); font-size: 10px; line-height: 1.5; }
.tool-discovery-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 13px; border-top: 1px dashed #ded4c8; color: var(--tool-accent); font-size: 13px; font-weight: 700; }
.tool-discovery-arrow { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--tool-soft); transition: background .2s, color .2s, transform .2s; }
.tools-directory-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 33px; color: #a18d7e; font-size: 12px; line-height: 1.8; text-align: center; }
.tools-directory-note i { color: #d18ba3; }
@media (hover: hover) {
    .tool-discovery-card:hover { transform: translateY(-6px); box-shadow: 7px 11px 0 #5e48371a; }
    .tool-discovery-card:hover h3 { color: var(--tool-accent); }
    .tool-discovery-card:hover .tool-discovery-arrow { background: var(--tool-accent); color: #fff; transform: translateX(3px); }
    .tool-discovery-card:hover .tool-profile-front { transform: translateY(-5px) rotate(4deg); }
    .tool-discovery-card:hover .tool-profile-back { transform: translateX(-5px) rotate(-14deg); }
    .tool-discovery-card:hover .tool-quiz-friend-one { transform: translateY(-4px) rotate(-14deg); }
    .tool-discovery-card:hover .tool-quiz-friend-three { transform: translateY(-4px) rotate(14deg); }
    .tool-discovery-card:hover .tool-tier-preview { transform: translateX(-50%) rotate(-1deg); }
    .tool-discovery-card:hover .tool-puzzle-preview { transform: translateX(-50%) rotate(3deg); }
    .tool-discovery-card:hover .tool-puzzle-preview > span:nth-child(9) { transform: none; }
    .tool-discovery-card:hover .tool-birthday-calendar { transform: translateX(-50%) rotate(-1deg); }
}
@media (max-width: 900px) {
    .tools-collection-grid { gap: 21px; }
    .tool-discovery-art { height: 222px; }
    .tool-discovery-content { padding: 20px 20px 16px; }
    .tool-discovery-title h3 { font-size: 23px; }
    .tool-profile-back { top: 54px; left: 20px; width: 62%; }
    .tool-profile-front { top: 70px; right: 21px; width: 62%; }
    .tool-quiz-question { top: 43px; font-size: 18px; }
    .tool-quiz-friends { top: 105px; right: 20px; left: 20px; gap: 12px; }
    .tool-quiz-friend { width: 77px; height: 77px; padding: 5px; }
    .tool-puzzle-preview { top: 24px; width: 179px; height: 179px; }
    .tool-puzzle-piece { left: 9%; font-size: 42px; }
    .tool-birthday-calendar { width: 204px; }
    .tool-birthday-friend { width: 62px; height: 62px; }
    .tool-birthday-friend-one { left: 13px; }
    .tool-birthday-friend-two { right: 12px; }
}
@media (max-width: 640px) {
    .tools-directory-hero-inner { padding: 26px 20px 21px; }
    .tools-directory-eyebrow { font-size: 10px; }
    .tools-directory-hero h1 { margin-top: 12px; font-size: 32px; }
    .tools-directory-hero p { max-width: 390px; font-size: 12px; }
    .tools-hero-doodle { display: none; }
    .tools-hero-friends { margin-top: 16px; }
    .tools-hero-friends img { width: 38px; height: 38px; }
    .tools-directory-stage { padding: 23px 16px 31px; }
    .tools-collection-heading { gap: 10px; margin-bottom: 17px; }
    .tools-collection-heading h2 { font-size: 22px; }
    .tools-collection-heading > span { font-size: 10px; text-align: right; }
    .tools-collection-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .tool-discovery-card { border-radius: 22px; }
    .tool-discovery-card-birthday { flex-direction: column; }
    .tool-discovery-art { height: 221px; }
    .tool-art-birthday { flex-basis: auto; min-height: 0; border-right: 0; border-bottom: 1px solid #3b322b1c; }
    .tool-discovery-content { padding: 19px 21px 15px; }
    .tool-discovery-title h3 { font-size: 24px; }
    .tool-discovery-content > p { min-height: 0; font-size: 12px; }
    .tool-discovery-tags { margin-top: 13px; margin-bottom: 16px; }
    .tool-profile-back { top: 43px; left: 25px; width: 60%; }
    .tool-profile-front { top: 62px; right: 26px; width: 60%; }
    .tool-art-sticker { right: 14px; bottom: 12px; font-size: 12px; }
    .tools-directory-note { font-size: 11px; margin-top: 27px; }
}
@media (prefers-reduced-motion: reduce) { .tools-directory *, .tools-directory *::before { transition: none !important; } }