/* Shared gallery header and introduction across all three categories. */
.container { width: 100%; max-width: 1320px; }
.site-header { margin-bottom: 32px; padding-bottom: 20px; }
.hero-intro { display: flex; flex-direction: column; gap: 8px; }
.hero-title { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; color: #f8fafc; line-height: 1.3; }
.hero-desc { font-size: .95rem; color: #94a3b8; line-height: 1.6; }
@media (max-width: 900px) {
  .site-header { margin-bottom: 24px; }
  .hero-title { font-size: 1.35rem; }
  .hero-desc { font-size: .85rem; }
}
/* Category links are normal page navigation and work without JavaScript. */
.gallery-intro { display: block; margin-bottom: 24px; }
.gallery-intro .hero-intro { margin-bottom: 20px; }
.category-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; margin-bottom: 20px; border: 1px solid #879bb72b; border-radius: 14px; background: #0d101c80; }
.category-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: #aab8ce; font-size: 16px; font-weight: 700; text-decoration: none; border: 1px solid transparent; transition: background .15s, color .15s; }
.category-nav a:hover { color: #f8fafc; background: #ffffff08; }
.category-nav a[aria-current="page"] { color: #f8fafc; border-color: #a5b4fc66; background: #6366f126; box-shadow: inset 0 -3px #a5b4fc; }
.category-nav a:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }
.playground-cards { --category-card-height: 210px; grid-auto-rows: var(--category-card-height); }
.playground-cards .playground-card { height: var(--category-card-height); min-height: var(--category-card-height); }
.tool-cards.tabs-nav { display: grid; border-bottom: 0; padding: 0; gap: 16px; margin: 0 0 28px; }
.tool-cards .tab-btn { width: 100%; text-align: left; font: inherit; white-space: normal; cursor: pointer; }
.tool-cards .tab-btn.active { background: #1b2038; border-color: #a5b4fc; color: #f8fafc; }
.tool-card-title { display: block; font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.tool-card-description { display: block; color: #94a3b8; font-size: 13.5px; line-height: 1.65; }
.tool-cards .card-cta { color: #a5b4fc; }
@media (max-width: 640px) {
  .category-nav { gap: 3px; padding: 4px; border-radius: 13px; }
  .category-nav a { min-height: 44px; padding: 8px 2px; font-size: 14px; border-radius: 9px; white-space: nowrap; }
  .playground-cards { --category-card-height: 216px; }
}
@media (prefers-reduced-motion: reduce) { .category-nav a { transition: none; } }

/* Keep both rows visible on typical laptop screens; smaller screens scroll naturally. */
@media (min-width: 1025px) and (max-height: 900px) {
  body.category-page { padding-bottom: 24px; }
  .container > .site-header { margin-bottom: 20px; padding-bottom: 16px; }
  .gallery-intro .hero-intro { margin-bottom: 16px; }
  .gallery-intro { margin-bottom: 20px; }
  .gallery-intro .category-nav { margin-bottom: 0; }
  .gallery-intro + .playground-cards { margin-bottom: 24px; }
  .playground-cards { --category-card-height: 192px; }
  .gallery-intro ~ footer { padding-top: 16px; }
}
@media (min-width: 1025px) and (max-height: 750px) {
  body.category-page { padding-top: 12px; padding-bottom: 16px; }
  .container > .site-header { margin-bottom: 12px; }
  .gallery-intro .hero-intro { margin-bottom: 12px; }
  .gallery-intro + .playground-cards { margin-bottom: 12px; }
  .gallery-intro ~ footer { padding-top: 8px; }
}