/* Free tools hub (tool/index.html) — builds on css/home.css (#hm scope, hm-* components). */

:is(#hm,#hm2) .th-hero{padding:130px 0 56px}
:is(#hm,#hm2) .th-hero::after{top:60%;height:420px}
:is(#hm,#hm2) .th-hero h1{font-size:clamp(2.5rem,6vw,4.6rem) !important}
:is(#hm,#hm2) .th-crumbs{display:flex;justify-content:center;gap:8px;font:500 .74rem var(--hm-mono);color:var(--hm-faint);margin-bottom:22px}
:is(#hm,#hm2) .th-crumbs a{color:var(--hm-muted)}
:is(#hm,#hm2) .th-crumbs a:hover{color:var(--hm-green)}
:is(#hm,#hm2) .th-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* search */
:is(#hm,#hm2) .th-search{position:relative;display:flex;align-items:center;gap:12px;max-width:620px;margin:0 auto 22px;height:58px;padding:0 14px 0 18px;background:#fff;border:1px solid var(--hm-line);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 40px -24px rgba(0,0,0,.2);transition:border-color .2s,box-shadow .2s}
:is(#hm,#hm2) .th-search:focus-within{border-color:var(--hm-green);box-shadow:0 0 0 4px rgba(22,163,74,.12),0 20px 40px -24px rgba(0,0,0,.2)}
:is(#hm,#hm2) .th-search svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--hm-faint);stroke-width:2;stroke-linecap:round}
:is(#hm,#hm2) .th-search input{all:unset;flex:1;min-width:0;font-size:1rem;color:var(--hm-ink)}
:is(#hm,#hm2) .th-search input::placeholder{color:var(--hm-faint)}
:is(#hm,#hm2) .th-search input::-webkit-search-cancel-button{cursor:pointer}
:is(#hm,#hm2) .th-search kbd{font:500 .72rem var(--hm-mono);color:var(--hm-muted);border:1px solid var(--hm-line);border-bottom-width:2px;border-radius:6px;padding:2px 7px;background:var(--hm-bg)}

/* sticky category chips */
:is(#hm,#hm2) .th-lib{padding-bottom:96px;background:#fff}
:is(#hm,#hm2) .th-bar{position:sticky;top:84px;z-index:20;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line)}
:is(#hm,#hm2) .th-chips{display:flex;gap:6px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
:is(#hm,#hm2) .th-chips::-webkit-scrollbar{display:none}
:is(#hm,#hm2) .th-chip{all:unset;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--hm-line);background:#fff;font-size:.82rem;font-weight:500;color:var(--hm-muted);white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
:is(#hm,#hm2) .th-chip span{font:500 .68rem var(--hm-mono);color:var(--hm-faint)}
:is(#hm,#hm2) .th-chip:hover{border-color:#d4d4d8;color:var(--hm-ink)}
:is(#hm,#hm2) .th-chip[aria-pressed="true"]{background:var(--hm-ink);border-color:var(--hm-ink);color:#fff}
:is(#hm,#hm2) .th-chip[aria-pressed="true"] span{color:#86efac}
:is(#hm,#hm2) .th-chip:focus-visible{outline:2px solid var(--hm-green);outline-offset:2px}
:is(#hm,#hm2) .th-status{min-height:20px;margin:18px 0 0;font:500 .74rem var(--hm-mono);color:var(--hm-faint)}

/* groups + tool grid */
:is(#hm,#hm2) .th-group{margin-top:40px;scroll-margin-top:170px}
:is(#hm,#hm2) .th-group[hidden]{display:none}
:is(#hm,#hm2) .th-group-h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
:is(#hm,#hm2) .th-group-h .hm-mono{font-size:.72rem;color:var(--hm-green)}
:is(#hm,#hm2) .th-group-h h2{font-size:1.35rem;font-weight:600;letter-spacing:-.025em;color:var(--hm-ink)}
:is(#hm,#hm2) .th-count{margin-left:auto;font:500 .7rem var(--hm-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--hm-faint)}
:is(#hm,#hm2) .th-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--hm-line);border-radius:14px;overflow:hidden}
:is(#hm,#hm2) .th-tool{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 20px 18px;background:#fff;min-height:168px;transition:background .2s;min-width:0;box-shadow:0 0 0 1px var(--hm-line)}
:is(#hm,#hm2) .th-tool[hidden]{display:none}
:is(#hm,#hm2) .th-tool::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--hm-green);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
:is(#hm,#hm2) .th-tool:hover{background:#fcfdfc}
:is(#hm,#hm2) .th-tool:hover::before{transform:scaleX(1)}
:is(#hm,#hm2) .th-tool:focus-visible{outline:2px solid var(--hm-green);outline-offset:-2px}
:is(#hm,#hm2) .th-tool-cat{font:500 .64rem var(--hm-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--hm-faint)}
:is(#hm,#hm2) .th-tool h3{font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--hm-ink)}
:is(#hm,#hm2) .th-tool p{font-size:.84rem;line-height:1.5;color:var(--hm-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:is(#hm,#hm2) .th-tool-go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--hm-green)}
:is(#hm,#hm2) .th-tool-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}
:is(#hm,#hm2) .th-tool:hover .th-tool-go svg{transform:translateX(3px)}
:is(#hm,#hm2) .th-empty{margin-top:40px;padding:48px 24px;border:1px dashed var(--hm-line);border-radius:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
:is(#hm,#hm2) .th-empty[hidden]{display:none}
:is(#hm,#hm2) .th-empty b{font-size:1.05rem;color:var(--hm-ink)}
:is(#hm,#hm2) .th-empty span{font-size:.9rem;color:var(--hm-muted);margin-bottom:10px}

/* why */
:is(#hm,#hm2) .th-why{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;background:#fff;border:1px solid var(--hm-line);border-radius:16px}
:is(#hm,#hm2) .th-why>div{padding:28px;border-right:1px solid var(--hm-line)}
:is(#hm,#hm2) .th-why>div:last-child{border-right:0}
:is(#hm,#hm2) .th-why .hm-mono{font-size:.7rem;color:var(--hm-green)}
:is(#hm,#hm2) .th-why h3{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--hm-ink);margin:10px 0 6px}
:is(#hm,#hm2) .th-why p{font-size:.9rem;line-height:1.6;color:var(--hm-muted)}
:is(#hm,#hm2) .th-why-note{max-width:720px;margin:24px auto 0;text-align:center;font-size:.9rem;line-height:1.65;color:var(--hm-muted)}
:is(#hm,#hm2) .th-why-note code{font:500 .8rem var(--hm-mono);background:#fff;border:1px solid var(--hm-line);border-radius:5px;padding:1px 6px}

@media (max-width:1100px){:is(#hm,#hm2) .th-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  :is(#hm,#hm2) .th-grid{grid-template-columns:1fr 1fr}
  :is(#hm,#hm2) .th-why{grid-template-columns:1fr}
  :is(#hm,#hm2) .th-why>div{border-right:0;border-bottom:1px solid var(--hm-line)}
  :is(#hm,#hm2) .th-why>div:last-child{border-bottom:0}
}
@media (max-width:560px){
  :is(#hm,#hm2) .th-hero{padding:112px 0 40px}
  :is(#hm,#hm2) .th-grid{grid-template-columns:1fr}
  :is(#hm,#hm2) .th-tool{min-height:0}
  :is(#hm,#hm2) .th-search{height:52px}
  :is(#hm,#hm2) .th-search kbd{display:none}
}