@property --grid-hot{syntax:"<length-percentage>";inherits:true;initial-value:52%}#tools-index{flex-direction:column;align-items:center;gap:clamp(40px,5vw,64px);padding:64px clamp(12px,3vw,56px);display:flex}#tools-index .tools-featured{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:32px;width:100%;display:grid}#tools-index .tool-card{background:#27292f;border-radius:8px;flex-direction:column;transition:background .2s;display:flex;position:relative;overflow:hidden}#tools-index .tool-card.dev-only:before{content:"dev";z-index:2;text-transform:uppercase;letter-spacing:1px;color:#f5f6f7;pointer-events:none;background:#0000008c;border-radius:4px;padding:5px 7px;font-size:10px;line-height:1;position:absolute;top:12px;left:12px}#tools-index .tool-card:hover{background:#2e3138}#tools-index .tool-card:hover .tool-photo{--grid-hot:92%}#tools-index .tool-card:hover .tool-graphic{color:#f5f6f7}#tools-index .tool-card:hover .tool-graphic .g-rest{opacity:0}#tools-index .tool-card:hover .tool-graphic .g-hover,#tools-index .tool-card:hover .tool-graphic .g-extra{opacity:1}#tools-index .tool-card:hover .tool-graphic .g-fill path{fill:currentColor}#tools-index .tool-photo{--grid-hot:52%;background:radial-gradient(ellipse var(--grid-hot) calc(var(--grid-hot) * 2) at 84% 30%, #8da4b64d, transparent 78%), linear-gradient(69.1deg, #242c32 63.82%, #6d8698 152.24%);border-radius:8px 8px 0 0;justify-content:center;align-items:center;height:clamp(190px,22vw,260px);padding:24px;transition:--grid-hot .55s;display:flex;position:relative;overflow:hidden}#tools-index .tool-photo:after{content:"";-webkit-mask:radial-gradient(ellipse var(--grid-hot) calc(var(--grid-hot) * 2) at 84% 30%, #000 0%, transparent 100%);-webkit-mask:radial-gradient(ellipse var(--grid-hot) calc(var(--grid-hot) * 2) at 84% 30%, #000 0%, transparent 100%);mask:radial-gradient(ellipse var(--grid-hot) calc(var(--grid-hot) * 2) at 84% 30%, #000 0%, transparent 100%);pointer-events:none;background-image:linear-gradient(90deg,#ffffff38 1px,#0000 1px),linear-gradient(#ffffff38 1px,#0000 1px);background-position:50%;background-size:64px 64px;transition:--grid-hot .55s;position:absolute;inset:0}#tools-index .tool-graphic{z-index:1;color:#f5f6f780;transition:color .25s;display:flex;position:relative}#tools-index .tool-graphic svg{width:auto;max-width:100%;height:clamp(150px,17vw,212px);display:block}#tools-index .tool-graphic .g-rest,#tools-index .tool-graphic .g-hover,#tools-index .tool-graphic .g-extra{transition:opacity .3s}#tools-index .tool-graphic .g-hover,#tools-index .tool-graphic .g-extra{opacity:0}#tools-index .tool-graphic .g-fill path{fill:#0000;stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke;transition:fill .3s}#tools-index .tool-graphic .g-line path{fill:none;stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke}#tools-index .tool-body{flex-direction:column;flex:1;gap:32px;padding:24px;display:flex}#tools-index .tool-head{flex-direction:column;gap:8px;display:flex}#tools-index .tool-tag{letter-spacing:.04em;color:#f5f6f7b8;text-transform:uppercase;font-size:16px;font-weight:500}#tools-index .tool-label{letter-spacing:-.01em;color:#f5f6f7e0;font-family:Saira,Saira Fallback,sans-serif;font-size:28px;font-weight:500;line-height:125%}#tools-index .tool-desc{color:#f5f6f7;white-space:pre-line;font-size:16px;line-height:150%}#tools-index .tool-features-block{flex-direction:column;gap:12px;display:flex}#tools-index .tool-features-title{letter-spacing:.02em;color:#f5f6f7b8;text-transform:uppercase;font-size:14px;font-weight:500}#tools-index .tool-features{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}#tools-index .tool-features li{color:#f5f6f7e0;padding-left:22px;font-size:16px;line-height:150%;position:relative}#tools-index .tool-features li:before{content:"";background:#f5f6f766;border-radius:50%;width:6px;height:6px;position:absolute;top:.62em;left:4px}#tools-index .tool-cta{width:100%;margin-top:auto}