:root { color-scheme: light; } body { background-color: #f9fafb; color: #111827; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .pill { border-radius: 9999px; border: 1px solid #e2e8f0; padding: 0.2rem 0.85rem; background: #f8fafc; } /* Buttons vs. pills: badges, tags, and filter chips throughout this UI are deliberately fully-rounded (rounded-full) to read as passive labels. Actual clickable actions (View store page, Watch now, Details, Open) used to share that exact same pill shape, which made real buttons and inert badges indistinguishable at a glance. Giving buttons a distinct rounded-corner shape (not a full pill) plus a visible fill/border/shadow fixes that -- the shape itself now signals "this does something." */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border-radius: 0.65rem; padding: 0.5rem 1.05rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } .btn-primary { background: #2563eb; color: #fff; box-shadow: 0 10px 15px -10px rgba(37, 99, 235, 0.8); } .btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); } .btn-secondary { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; box-shadow: 0 8px 18px -12px rgba(79, 70, 229, 0.8); } .btn-secondary:hover { background: #e0e7ff; border-color: #a5b4fc; transform: translateY(-1px); } /* .btn-ghost ("Details") was the biggest offender -- transparent fill and a barely-there border meant it nearly disappeared against a white card. A real (if subtle) fill, a darker border, and a shadow give it enough presence to read as a button rather than empty space. */ .btn-ghost { background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .btn-ghost:hover { background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); } .card-details { border-radius: 0.9rem; border: 1px solid #e2e8f0; background: #f8fafc; padding: 1rem; } .help-dotted { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: #94a3b8; text-underline-offset: 0.18rem; } .skill-chip { transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .skill-chip:hover { background: #ccfbf1; border-color: #14b8a6; color: #042f2e; } /* ---- Readability pass ---- Tailwind's Play CDN (loaded via