:root{
      --emoji-size: 2.6rem;           /* desktop */
      --emoji-size-sm: 2.2rem;        /* phones */
      --card: #fff;
      --border: #e6eaf0;
      --text: #0f172a;
      --muted: #64748b;
      --primary: #7c3aed;
      --speed: 0.35;                  /* pixels per frame (~60fps). Tweak for faster/slower */
    }

    .tools-wrap { max-width:1100px; margin:0 auto; padding:12px; }
    .tools-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
    .tools-title { font-size:1.25rem; font-weight:700; display:flex; align-items:center; gap:10px; }

    /* ── Carousel ───────────────────────────────────────────────────────── */
    .carousel { position: relative; overflow: hidden; border-radius: 12px; }
    .track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc(25% - 9px); /* 4 visible on wide screens */
      gap: 12px;
      overflow-x: auto;                   /* we drive scrollLeft; hide scrollbar */
      padding: 2px 2px 16px;
      scrollbar-width: none;
    }
    .track::-webkit-scrollbar { display: none; }
    .slide { display:flex; min-height:120px; }
    .tool-card {
      background:var(--card); border:1px solid var(--border); border-radius:12px;
      padding:14px; display:flex; flex-direction:column; gap:10px; box-shadow:0 1px 2px rgba(16,24,40,0.03);
      width:100%;
    }
    .tool-emoji { font-size: var(--emoji-size); line-height:1; }
    .tool-name { font-weight:700; font-size:1rem; color:var(--text); }
    .tool-desc { font-size:0.92rem; color:var(--muted); line-height:1.3; }
    .tool-actions { margin-top:auto; display:flex; gap:8px; justify-content:flex-end; }
    .tool-btn { background:var(--primary); color:#fff; border:none; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }

    /* Dots (centered) */
    .dots { display:flex; gap:6px; align-items:center; justify-content:center; margin-top:10px; }
    .dot { width:8px; height:8px; border-radius:999px; background:#d9dee6; border:none; }
    .dot[aria-current="true"] { background:var(--primary); width:18px; }

    /* Responsive */
    @media (max-width:1000px){ .track{ grid-auto-columns: calc(33.333% - 8px); } }
    @media (max-width:740px) { .track{ grid-auto-columns: calc(50% - 8px); } }
    @media (max-width:520px){
      .track   { grid-auto-columns: 100%; }
      .tools-header{ align-items:flex-start; flex-direction:column; gap:6px; }
      .tool-emoji{ font-size: var(--emoji-size-sm); }
    }