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