:root {
      --bg: #fafafa;
      --text: #0a0a0a;
      --primary: #2563eb;
      --border: #e4e4e7;
      --catTitleWeight: 600;
    }

    body {
      font-family: Inter, ui-sans-serif, system-ui;
      background: var(--bg);
      color: var(--text);
    }

    .btn { transition: transform 0.05s ease, box-shadow 0.15s ease; }
    .btn:active { transform: translateY(1px); }

    .theme-border { border-color: var(--border); }

    .theme-card {
      background: #ffffff;
      border-radius: 1.25rem;
      border: 1px solid rgba(148, 163, 184, 0.55);
      box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.06),
        0 1px 0 rgba(148, 163, 184, 0.25);
      overflow: hidden;
      position: relative;
      transition:
        transform 0.18s ease,
        box-shadow 0.22s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
    }
    .theme-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      border: 1px solid rgba(255, 255, 255, 0.6);
      mix-blend-mode: soft-light;
    }

    .theme-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(37, 99, 235, 0.35);
      border-color: rgba(37, 99, 235, 0.55);
      background-color: #f9fafb;
    }

    .theme-cta { background: var(--primary); border-color: var(--primary); color: #fff; }
    .theme-cta:hover { filter: brightness(0.95); }

    .theme-cta-outline { background: #fff; border-color: var(--border); color: var(--text); }
    .theme-cta-outline:hover { background: #f6f6f6; }

    .theme-title { color: var(--text); }
    .theme-muted { color: color-mix(in oklab, var(--text), #ffffff 60%); }

    .theme-card-img-wrap {
      aspect-ratio: 4 / 3;
      padding: 14px 18px;
      box-sizing: border-box;
      background: #f7f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .theme-card-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: 55% 50%;
      background: transparent;
      border-bottom: 0;
    }

    .theme-card .text-sm.font-semibold {
      font-size: 0.9rem;
      letter-spacing: 0.01em;
      color: #020617;
      font-weight: var(--catTitleWeight) !important;
    }
    .theme-card:hover .text-sm.font-semibold { color: var(--primary); }

    .icon-btn {
      width: 38px; height: 38px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 0.75rem;
    }

    .card-grid {
      display: grid;
      gap: .75rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (min-width: 1024px) {
      .card-grid {
        grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr));
      }
    }

    #midText ul { display: inline-block; text-align: left; }

    #pageTitle { letter-spacing: -0.02em; }

    .title-style-a {
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--text) 92%, #ffffff 8%),
        color-mix(in srgb, var(--primary) 80%, #000000 20%),
        color-mix(in srgb, var(--text) 92%, #ffffff 8%)
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 1px 0 rgba(255,255,255,0.75);
    }

    .title-style-b {
      color: var(--text);
      text-shadow:
        -1px -1px 0 rgba(255,255,255,0.85),
         1px -1px 0 rgba(255,255,255,0.85),
        -1px  1px 0 rgba(255,255,255,0.85),
         1px  1px 0 rgba(255,255,255,0.85),
         0 10px 24px rgba(2, 6, 23, 0.20);
    }

    .title-glow {
      filter: drop-shadow(0 10px 22px rgba(37,99,235,0.18));
    }