:root {
      --bg: #f4f7fb;
      --bg-accent: #e9eff8;
      --surface: #ffffff;
      --surface-soft: #f8fbff;
      --text: #122035;
      --muted: #4a5f78;
      --primary: #155eef;
      --primary-soft: #eaf1ff;
      --border: #d6e0ee;
      --code-bg: #0f1b2d;
      --code-text: #edf4ff;
      --ok: #087443;
      --shadow: 0 12px 34px rgba(15, 29, 50, 0.08);
      --radius: 18px;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
      background:
        radial-gradient(1000px 420px at 15% -10%, #dde9ff, transparent 65%),
        radial-gradient(900px 360px at 85% -5%, #d8f1f4, transparent 60%),
        linear-gradient(180deg, var(--bg-accent) 0%, var(--bg) 24%, var(--bg) 100%);
      color: var(--text);
      line-height: 1.55;
    }

    .container {
      max-width: 1180px;
      margin: 0 auto;
      padding: 24px;
    }

    a { color: var(--primary); text-decoration: none; }
    a:hover { text-decoration: underline; }

    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      background: #eef3fb;
      color: #203a59;
      border: 1px solid #d9e5f4;
      padding: 2px 6px;
      border-radius: 8px;
      word-break: break-all;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .brand-title {
      font-weight: 800;
      letter-spacing: 0.2px;
      font-size: 19px;
    }

    .brand-sub {
      color: var(--muted);
      font-size: 14px;
      margin-top: 2px;
    }

    .lang {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 6px;
      border-radius: 999px;
      box-shadow: var(--shadow);
    }

    .lang button {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    .lang button.active {
      background: var(--primary-soft);
      color: var(--primary);
    }

    .view-nav {
      margin-top: 18px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .view-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      padding: 10px 14px;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 700;
      box-shadow: var(--shadow);
    }

    .view-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #ffffff;
    }

    .view { display: none; }
    .view.active { display: block; }

    .hero {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 18px;
      margin-top: 18px;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #c8d9f4;
      background: #eef5ff;
      color: #194175;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
    }

    h1 {
      margin: 14px 0 10px;
      font-size: 34px;
      line-height: 1.16;
    }

    p {
      margin: 0 0 12px;
      color: var(--muted);
      text-align: justify;
      text-justify: inter-word;
      hyphens: auto;
    }

    .section-title {
      margin: 0 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .section-title h2 {
      margin: 0;
      font-size: 20px;
    }

    .badge {
      border: 1px solid var(--border);
      background: #f4f8ff;
      color: #325070;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
    }

    .logo {
      display: block;
      width: 100%;
      max-width: 370px;
      height: auto;
      margin: 0 auto 12px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 8px;
    }

    .list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .list li {
      border: 1px solid var(--border);
      background: var(--surface-soft);
      border-radius: 12px;
      padding: 12px;
    }

    .list .label {
      font-weight: 700;
      margin-bottom: 6px;
      color: #1f3552;
    }

    .meta-grid {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .meta-item {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-soft);
      padding: 10px;
    }

    .meta-item strong {
      display: block;
      color: #1f3552;
      margin-bottom: 4px;
      font-size: 14px;
    }

    .meta-item span {
      display: block;
      color: var(--muted);
      font-size: 13px;
    }

    .home-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .updates {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
    }

    .updates li { margin-bottom: 8px; }

    .partner-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 10px;
    }

.partner {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(145deg, #f6f9ff 0%, #eef5ff 100%);
  padding: 12px;
}

.partner img {
  width: 124px;
  height: auto;
  border-radius: 12px;
  border: 1px solid #c7d7ee;
  background: linear-gradient(150deg, #deebff 0%, #edf5ff 55%, #f7fbff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
}

    .partner .meta strong { display: block; color: #1f3552; }
    .partner .meta span { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }

    .funding-row {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

.funding {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
}

.funding img {
  max-height: 42px;
  width: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #3a5f86;
  background: linear-gradient(155deg, #24476f 0%, #1a3658 55%, #122b49 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  padding: 8px 10px;
}
    .funding .text { color: var(--muted); font-size: 14px; }

    .catalog-top {
      margin-top: 18px;
    }

    .catalog-layout {
      margin-top: 14px;
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 16px;
    }

    .catalog-select {
      width: 100%;
      border: 1px solid #b4c8e3;
      background: #f8fbff;
      color: #123252;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 15px;
      font-weight: 600;
    }

    .catalog-label {
      display: block;
      margin-bottom: 8px;
      color: #29496a;
      font-weight: 700;
      font-size: 14px;
    }

    pre {
      margin: 0;
      white-space: pre-wrap;
      background: var(--code-bg);
      color: var(--code-text);
      border: 1px solid #233147;
      border-radius: 12px;
      padding: 14px;
      overflow: auto;
      min-height: 260px;
      max-height: 640px;
    }

    pre code {
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0;
      word-break: normal;
    }

    .catalog-files {
      max-height: 360px;
      overflow: auto;
    }

    .footer {
      margin-top: 22px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
    }

    @media (max-width: 980px) {
      .hero,
      .home-grid,
      .funding-row,
      .catalog-layout,
      .partner-grid,
      .meta-grid {
        grid-template-columns: 1fr;
      }

      h1 { font-size: 29px; }
      p { text-align: left; hyphens: none; }
      .container { padding: 16px; }
    }