:root {
        color-scheme: light;
        --bg: #fbfcff;
        --surface: #ffffff;
        --surface-soft: #f5f7ff;
        --surface-blue: #eef2ff;
        --surface-rose: #fff1f5;
        --surface-purple: #f3efff;
        --ink: #18222c;
        --ink-soft: #3d4e5b;
        --muted: #68747d;
        --line: #cfd6ea;
        --line-strong: #aeb9e3;
        --card-edge: rgba(79, 99, 243, 0.12);
        --card-shadow: 0 0 0 1px rgba(79, 99, 243, 0.07), 0 1px 0 rgba(255, 255, 255, 0.86) inset, 0 12px 26px rgba(32, 42, 78, 0.045);
        --brand-blue: #4f63f3;
        --brand-purple: #8a63ff;
        --brand-rose: #df4f76;
        --brand-rose-soft: #ffdae5;
        --brand-gradient: linear-gradient(135deg, var(--brand-rose) 0%, var(--brand-purple) 42%, var(--brand-blue) 100%);
        --brand-gradient-soft: linear-gradient(135deg, rgba(223, 79, 118, 0.1), rgba(138, 99, 255, 0.12) 46%, rgba(79, 99, 243, 0.16));
        --brand-wash: radial-gradient(circle at 18% 14%, rgba(79, 99, 243, 0.16), transparent 18rem), radial-gradient(circle at 84% 18%, rgba(138, 99, 255, 0.1), transparent 16rem), radial-gradient(circle at 72% 82%, rgba(223, 79, 118, 0.08), transparent 14rem), linear-gradient(135deg, #ffffff 0%, #f7f8ff 62%, #f3f6ff 100%);
        --accent: var(--brand-blue);
        --accent-soft: #dfe4ff;
        --navy: var(--brand-blue);
        --navy-deep: var(--brand-purple);
        --green: var(--brand-purple);
        --orange: var(--brand-rose);
        --warm: var(--brand-rose-soft);
        --canvas: linear-gradient(180deg, #ffffff 0%, #fbfcff 46%, #f6f8ff 78%, #f3f6ff 100%);
        --page-gutter: 24px;
        --site-width: min(1320px, calc(100vw - var(--page-gutter) * 2));
        --reading-width: min(760px, calc(100vw - var(--page-gutter) * 2));
        --home-inline: var(--page-gutter);
        --header-height: 60px;
        --anchor-gap: 16px;
        --section-y: clamp(44px, 4.6vw, 88px);
        --section-y-compact: clamp(34px, 3.5vw, 64px);
        /* Type scale: display > page-title > section > subtitle > body-lg > body > caption > micro */
        --text-display: clamp(32px, 4.6vw, 54px);
        --text-page-title: clamp(30px, 3.2vw, 40px);
        --text-section: clamp(24px, 3.1vw, 38px);
        --text-subtitle: clamp(18px, 1.8vw, 22px);
        --text-body-lg: 16px;
        --text-body: 15px;
        --text-caption: 13px;
        --text-micro: 12px;
        --site-module-width: var(--site-width);
        --site-module-ratio: 100;
        --home-module-width: var(--site-width);
        --site-nav-width: var(--site-width);
        --hero-copy-inset: clamp(12px, 1.6vw, 36px);
        --ease: cubic-bezier(0.16, 1, 0.3, 1);
      }
      @media (min-width: 981px) {
        .nav-menu__inner {
          width: var(--site-width);
          max-width: 100%;
          margin-inline: auto;
          box-sizing: border-box;
        }
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        background: var(--canvas);
        color: var(--ink);
        font-family:
          "Noto Sans SC",
          "Source Han Sans SC",
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        font-size: 16px;
        line-height: 1.58;
        overflow-x: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }

      p,
      a,
      code,
      span,
      strong {
        overflow-wrap: anywhere;
      }

      a:focus-visible,
      summary:focus-visible {
        outline: 3px solid var(--orange);
        outline-offset: 3px;
      }

      html {
        scroll-padding-top: calc(var(--header-height) + var(--anchor-gap));
      }

      main :is(h1, h2, h3)[id] {
        scroll-margin-top: calc(var(--header-height) + var(--anchor-gap));
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 30;
        border-bottom: 1px solid var(--line);
        background: oklch(0.998 0.002 240 / 0.96);
        backdrop-filter: blur(14px);
      }

      /* Shared page column: header / sections / footer share one box */
      .site-header__inner,
      .page-main .section,
      .official-home .section,
      .footer__inner {
        width: var(--site-width);
        max-width: 100%;
        margin-inline: auto;
        box-sizing: border-box;
      }

      .site-header__inner {
        min-height: var(--header-height);
        padding-inline: 0;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 20px;
      }

      .brand {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 17px;
        font-weight: 860;
        letter-spacing: -0.012em;
      }

      .brand__mark {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex: none;
        background: var(--surface);
        border: 1px solid var(--line);
        box-shadow: inset 0 0 0 1px rgba(79, 99, 243, 0.08);
      }

      .brand__mark img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }

      .nav {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 18px;
        padding-inline-start: 24px;
        font-size: 13.5px;
        font-weight: 820;
      }

      .nav-item {
        display: inline-flex;
        align-items: center;
        padding-bottom: 14px;
        margin-bottom: -14px;
      }

      .nav-link,
      .nav a,
      .nav button.nav-link {
        min-height: 36px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0 14px;
        font: inherit;
        white-space: nowrap;
        cursor: pointer;
      }

      .nav-link:hover,
      .nav a:hover,
      .nav button.nav-link:hover {
        background: transparent;
        color: var(--accent);
      }

      .nav-link[aria-current="page"],
      .nav-item.is-active > .nav-link,
      .nav button.nav-link[aria-current="page"] {
        background: transparent;
        color: var(--accent);
        box-shadow: none;
      }

      .nav-chevron {
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        display: inline-block;
        margin-left: 2px;
        transform: translateY(-2px) rotate(45deg);
        opacity: 0.76;
        transition:
          transform 180ms var(--ease),
          opacity 180ms var(--ease);
      }

      .nav-item:hover .nav-chevron,
      .nav-item:focus-within .nav-chevron {
        transform: translateY(1px) rotate(225deg);
        opacity: 1;
      }

      .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: 29;
        width: auto;
        border: 1px solid var(--line);
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        background: oklch(0.998 0.002 240 / 0.98);
        backdrop-filter: blur(16px);
        padding: 18px 0 22px;
        display: block;
        box-shadow: 0 18px 36px oklch(0.18 0.04 255 / 0.08);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition:
          opacity 180ms var(--ease),
          transform 180ms var(--ease);
      }

      .nav-menu__inner {
        width: var(--site-width);
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
        display: grid;
        gap: 12px;
      }

      .nav-menu__title {
        color: var(--ink-soft);
        font-size: 13px;
        font-weight: 850;
        line-height: 1.2;
        padding: 0 2px 6px;
      }

      .nav-menu__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .nav-menu a {
        min-height: 74px;
        border-radius: 12px;
        display: grid;
        align-content: start;
        gap: 5px;
        padding: 12px 14px;
        color: var(--ink);
      }

      .nav-menu a:hover {
        background: var(--surface-blue);
      }

      .nav-menu strong {
        color: var(--ink);
        font-size: 14px;
        line-height: 1.2;
      }

      .nav-menu span {
        max-width: 24ch;
        color: var(--ink-soft);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
      }

      .nav-item:hover .nav-menu,
      .nav-item:focus-within .nav-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .hot-dot {
        margin-left: 4px;
        border-radius: 999px;
        background: var(--accent);
        color: var(--surface);
        padding: 2px 6px;
        font-size: 12px;
        font-weight: 900;
      }

      .nav-utilities {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
      }

      .lang-switch {
        height: 32px;
        min-width: 44px;
        padding: 0 12px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font: inherit;
        font-size: 12.5px;
        font-weight: 820;
        letter-spacing: 0.02em;
        cursor: pointer;
        white-space: nowrap;
        transition:
          border-color 180ms var(--ease),
          background 180ms var(--ease),
          color 180ms var(--ease);
      }

      .lang-switch:hover,
      .lang-switch:focus-visible {
        border-color: var(--line);
        background: var(--surface-blue);
        color: var(--accent);
        outline: none;
      }

      .mobile-nav__panel .lang-switch {
        width: 100%;
        height: 40px;
        margin-top: 4px;
        border: 1px solid var(--line);
        justify-content: flex-start;
        padding-inline: 14px;
      }

      .code-menu {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .code-menu__trigger .nav-chevron {
        width: 5px;
        height: 5px;
        margin-left: 0;
        flex-shrink: 0;
        transform: translateY(-1px) rotate(45deg);
      }

      .code-menu:hover .code-menu__trigger .nav-chevron,
      .code-menu:focus-within .code-menu__trigger .nav-chevron {
        transform: translateY(1px) rotate(225deg);
      }

      .code-menu__dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 30;
        padding-top: 6px;
        pointer-events: none;
      }

      .code-menu__panel {
        min-width: 132px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: oklch(0.998 0.002 240 / 0.98);
        backdrop-filter: blur(16px);
        padding: 6px;
        box-shadow: 0 18px 36px oklch(0.18 0.04 255 / 0.08);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition:
          opacity 180ms var(--ease),
          transform 180ms var(--ease);
      }

      .code-menu__panel a {
        display: block;
        padding: 10px 14px;
        border-radius: 8px;
        color: var(--ink);
        font-size: 13px;
        font-weight: 820;
        line-height: 1.2;
        white-space: nowrap;
      }

      .code-menu__panel a:hover {
        background: var(--surface-blue);
        color: var(--accent);
      }

      .code-menu:hover .code-menu__dropdown,
      .code-menu:focus-within .code-menu__dropdown {
        pointer-events: auto;
      }

      .code-menu:hover .code-menu__panel,
      .code-menu:focus-within .code-menu__panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .gitcode-link {
        width: 38px;
        min-width: 38px;
        height: 38px;
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        background: var(--surface);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: var(--brand-blue);
        text-decoration: none;
        box-shadow: inset 0 0 0 1px rgba(79, 99, 243, 0.04);
        transition:
          border-color 180ms var(--ease),
          background 180ms var(--ease),
          box-shadow 180ms var(--ease),
          transform 180ms var(--ease);
      }

      .gitcode-link:hover {
        border-color: var(--accent);
        background: var(--surface-blue);
        box-shadow: inset 0 0 0 1px rgba(79, 99, 243, 0.12);
        transform: translateY(-1px);
      }

      .gitcode-link.code-menu__trigger {
        width: auto;
        min-width: auto;
        height: 32px;
        border-color: transparent;
        background: transparent;
        color: var(--ink);
        box-shadow: none;
        padding: 0 10px;
        gap: 4px;
        border-radius: 8px;
        font: inherit;
        cursor: pointer;
        white-space: nowrap;
      }

      .gitcode-link.code-menu__trigger .gitcode-link__text {
        font-size: 12.5px;
        font-weight: 820;
      }

      .gitcode-link__mark {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: var(--brand-gradient);
        color: var(--surface);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
      }

      .gitcode-link__text {
        color: inherit;
        font-size: 14px;
        font-weight: 860;
        line-height: 1;
      }

      .mobile-nav {
        display: none;
        position: relative;
      }

      .mobile-nav summary {
        min-height: 36px;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        color: var(--ink);
        font-size: 13px;
        font-weight: 850;
        list-style: none;
        cursor: pointer;
      }

      .mobile-nav summary::-webkit-details-marker {
        display: none;
      }

      .mobile-nav__panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: min(300px, calc(100vw - 28px));
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        color: var(--ink);
        padding: 8px;
        display: grid;
        gap: 4px;
        box-shadow: 0 16px 28px oklch(0.18 0.05 255 / 0.14);
      }

      .mobile-nav__panel a {
        min-height: 42px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        color: var(--ink-soft);
        font-weight: 800;
      }

      .mobile-nav__panel a:hover {
        background: var(--surface-soft);
        color: var(--ink);
      }

      .section,
      .hero {
        width: 100%;
        max-width: none;
        margin: 0;
      }

      .page-main .section__head,
      .page-main .section > :not(.section__head),
      .official-home .section__head,
      .official-home .section > :not(.section__head) {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
      }

      .official-home .section__head--center,
      .page-main .section__head--center {
        max-width: 100%;
      }

      .section:has(#why) .section__head {
        width: 100%;
        max-width: var(--reading-width);
        margin-inline: auto;
      }

      .section:has(#why) .home-capability-showcase {
        width: 100%;
      }

      .page-main .section__head h2,
      .page-main .section__head--center h2,
      .page-main .section__head--split h2,
      .page-main .project-architecture-title,
      .official-home .section__head--center h2,
      .official-home .project-architecture-title {
        font-size: var(--text-section);
      }

      .page-main .section__head p,
      .page-main .section__head--center p,
      .official-home .section__head--center p {
        font-size: clamp(var(--text-caption), 1.35vw, var(--text-body-lg));
      }

      .page-main .project-architecture-figure,
      .official-home .project-architecture-figure {
        margin: 0;
      }

      .page-main .project-architecture-image {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
      }

      .page-main .project-scenario-image--flow,
      .page-main .slot-image,
      .page-main .mini-video__frame,
      .page-main .community-focus figure img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }

      @media (min-width: 520px) {
        .learning-flow {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (min-width: 960px) {
        .learning-flow {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }

      @media (min-width: 560px) {
        .arch-shell__top {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (min-width: 880px) {
        .scenario-showcase:not(.project-scenario-map) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .case-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (min-width: 1120px) {
        .scenario-showcase:not(.project-scenario-map) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .case-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .arch-shell__top {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      }

      .hero {
        position: relative;
        padding-top: clamp(58px, 6vw, 96px);
        padding-bottom: clamp(56px, 6.5vw, 102px);
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.04fr);
        gap: clamp(28px, 3vw, 42px);
        align-items: center;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 24px 0 auto;
        height: min(600px, 74vw);
        border-radius: 24px;
        background:
          linear-gradient(115deg, oklch(0.94 0.02 246 / 0.9), transparent 52%),
          linear-gradient(180deg, oklch(0.998 0.001 246 / 0.82), transparent);
        pointer-events: none;
        z-index: -1;
      }

      .badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 22px;
      }

      .badge {
        min-height: 30px;
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        background: oklch(0.998 0.001 246 / 0.82);
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 850;
      }

      h1 {
        max-width: 12ch;
        margin-bottom: 22px;
        font-size: clamp(42px, 5.3vw, 68px);
        line-height: 1.08;
        letter-spacing: -0.028em;
        overflow-wrap: normal;
        text-wrap: balance;
        word-break: keep-all;
      }

      .title-line {
        display: block;
      }

      .hero__copy {
        max-width: 64ch;
        margin-bottom: 0;
        color: var(--ink-soft);
        font-size: clamp(17px, 1.8vw, 19px);
        line-height: 1.84;
      }

      .hero__copy strong {
        color: var(--ink);
      }

      .button {
        min-height: 46px;
        border: 1px solid var(--ink);
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        color: var(--ink);
        font-weight: 850;
        transition:
          transform 180ms var(--ease),
          background 180ms var(--ease),
          color 180ms var(--ease);
      }

      .button:hover {
        transform: translateY(-1px);
      }

      .button--primary {
        border-color: transparent;
        background: linear-gradient(135deg, var(--navy), var(--accent));
        color: var(--surface);
      }

      .platform-visual {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        box-shadow: 0 12px 28px oklch(0.18 0.05 240 / 0.1);
        overflow: hidden;
      }

      .platform-visual--arch,
      .platform-visual--capability {
        background: var(--surface);
        min-height: 420px;
      }

      .platform-visual--capability {
        transform: translateX(18px);
      }

      .visual-head {
        min-height: 50px;
        background: linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 18px;
        font-size: 13px;
        font-weight: 900;
      }

      .visual-head span:first-child {
        color: var(--accent-soft);
      }

      .visual-head span:last-child {
        color: oklch(0.88 0.02 246);
      }

      .visual-body {
        padding: 18px;
        display: grid;
        gap: 12px;
      }

      .visual-body--arch {
        gap: 14px;
      }

      .visual-body--capability {
        gap: 14px;
        padding: 18px;
      }

      .score-panel {
        border-radius: 14px;
        background:
          radial-gradient(circle at 86% 16%, oklch(0.82 0.1 195 / 0.16), transparent 12rem),
          linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
        padding: 18px 18px 16px;
      }

      .score-panel__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .score-panel span {
        color: var(--accent-soft);
        font-size: 12px;
        font-weight: 900;
      }

      .score-panel em {
        color: oklch(0.9 0.02 246);
        font-style: normal;
        font-size: 12px;
        font-weight: 800;
      }

      .score-panel strong {
        display: block;
        margin: 0;
        font-size: clamp(50px, 5.8vw, 72px);
        line-height: 0.92;
        letter-spacing: -0.04em;
      }

      .score-panel__metric {
        display: grid;
        gap: 2px;
        margin: 12px 0 10px;
      }

      .score-panel__metric span {
        color: oklch(0.88 0.02 246);
        font-size: 12px;
        font-weight: 800;
      }

      .score-panel p {
        margin-bottom: 0;
        color: oklch(0.86 0.02 246);
        font-size: 13px;
      }

      .arch-mini-top {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .capability-strip {
        border: 1px solid var(--line);
        border-radius: 14px;
        background:
          linear-gradient(135deg, oklch(0.985 0.008 240), oklch(0.97 0.012 240)),
          var(--surface);
        padding: 18px;
        display: grid;
        gap: 12px;
        overflow: hidden;
        position: relative;
      }

      .capability-strip::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 34%;
        background: linear-gradient(90deg, oklch(0.9 0.03 240 / 0.74), transparent);
        pointer-events: none;
        animation: glide 7s var(--ease) infinite;
      }

      .capability-strip__meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 180px;
        gap: 16px;
        position: relative;
        z-index: 1;
      }

      .capability-strip__scene,
      .capability-strip__score {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        padding: 16px 18px;
        display: grid;
        gap: 4px;
      }

      .capability-strip__scene span,
      .capability-strip__score span {
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .capability-strip__scene strong {
        color: var(--ink);
        font-size: 18px;
        line-height: 1.28;
      }

      .capability-strip__scene p {
        margin-bottom: 0;
        color: var(--ink-soft);
        font-size: 12px;
      }

      .capability-strip__score {
        align-content: center;
        text-align: center;
        background: linear-gradient(135deg, var(--navy), var(--navy-deep));
      }

      .capability-strip__score span {
        color: var(--accent-soft);
      }

      .capability-strip__score strong {
        color: var(--surface);
        font-size: 36px;
        line-height: 1;
        letter-spacing: -0.03em;
      }

      .capability-strip__score em {
        color: oklch(0.86 0.02 246);
        font-style: normal;
        font-size: 11px;
        font-weight: 780;
      }

      .capability-strip__row {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        position: relative;
        z-index: 1;
      }

      .capability-chip {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        min-height: 96px;
        padding: 14px 12px 12px;
        display: grid;
        align-content: center;
        gap: 4px;
      }

      .capability-chip strong {
        color: var(--ink);
        font-size: 13px;
        line-height: 1.25;
      }

      .capability-chip span {
        color: var(--ink-soft);
        font-size: 11px;
        font-weight: 760;
      }

      .capability-chip--accent {
        border-color: oklch(0.72 0.1 195 / 0.42);
        background: linear-gradient(135deg, var(--navy), var(--accent));
      }

      .capability-chip--accent strong {
        color: var(--surface);
      }

      .capability-chip--accent span {
        color: var(--accent-soft);
      }

      .capability-strip__rail {
        position: relative;
        z-index: 1;
        height: 4px;
        border-radius: 999px;
        background: oklch(0.9 0.02 246);
        overflow: hidden;
      }

      .capability-strip__rail span {
        display: block;
        width: 34%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--navy-deep), var(--accent), var(--navy-deep));
        animation: rail 5.8s var(--ease) infinite;
      }

      .capability-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 2px;
        color: var(--ink-soft);
        font-size: 12px;
        font-weight: 760;
      }

      .capability-foot strong {
        color: var(--ink);
        font-size: 12px;
        font-weight: 820;
      }

      .arch-mini-pill {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-soft);
        color: var(--ink);
        min-height: 72px;
        display: grid;
        place-items: center;
        padding: 10px;
        text-align: center;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.25;
      }

      .arch-mini-pill--active {
        background: var(--surface-blue);
        color: var(--accent);
      }

      .arch-mini-core {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        padding: 12px;
      }

      .arch-mini-core__head {
        width: fit-content;
        margin: 0 auto 10px;
        color: var(--ink-soft);
        font-size: 13px;
        font-weight: 900;
      }

      .arch-mini-core__body {
        display: grid;
        gap: 12px;
      }

      .arch-mini-lane {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-soft);
        padding: 10px;
      }

      .arch-mini-lane__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }

      .arch-mini-block {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        min-height: 88px;
        padding: 10px;
        display: grid;
        align-content: center;
        gap: 4px;
        text-align: center;
      }

      .arch-mini-block--compact {
        background: var(--surface-soft);
      }

      .arch-mini-block--nl2sql {
        grid-column: 2 / span 1;
        background: var(--navy-deep);
        color: var(--surface);
        min-height: 92px;
      }

      .arch-mini-block strong {
        font-size: 13px;
        line-height: 1.25;
      }

      .arch-mini-block span,
      .arch-mini-block em {
        color: var(--ink-soft);
        font-size: 11px;
        font-style: normal;
      }

      .arch-mini-block--nl2sql span {
        color: var(--accent-soft);
        font-weight: 900;
      }

      .arch-mini-block--nl2sql strong {
        color: var(--surface);
        font-size: 20px;
      }

      .arch-mini-block--nl2sql em {
        color: oklch(0.86 0.02 246);
        font-weight: 800;
      }

      .arch-mini-flow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }

      .arch-mini-flow span {
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--ink-soft);
        min-height: 30px;
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 800;
      }

      .arch-mini-notes {
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
      }

      .arch-mini-note {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface-soft);
        display: grid;
        place-items: center;
        color: var(--ink);
        font-size: 12px;
        font-weight: 900;
        min-height: 56px;
        padding: 10px 12px;
        text-align: center;
      }

      .arch-mini-note--label {
        background: var(--navy-deep);
        color: var(--surface);
      }

      .arch-mini-focus {
        display: grid;
        justify-items: center;
        padding-top: 2px;
      }

      .arch-mini-focus .arch-mini-block {
        width: min(72%, 286px);
      }

      .arch-mini-bottom {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .arch-mini-base {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        padding: 10px;
        min-height: 64px;
        display: grid;
        place-items: center;
        text-align: center;
        color: var(--ink);
        font-size: 13px;
        font-weight: 900;
      }

      .arch-mini-base--wide {
        font-size: 12px;
        line-height: 1.35;
      }

      .flow-map {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .flow-node {
        border: 1px solid var(--line);
        border-radius: 12px;
        background:
          linear-gradient(180deg, oklch(0.998 0.001 246), oklch(0.976 0.008 246)),
          var(--surface);
        padding: 12px 12px 11px;
        min-height: 76px;
        display: grid;
        align-content: center;
        gap: 5px;
        color: var(--ink-soft);
        font-size: 12px;
        font-weight: 780;
        position: relative;
      }

      .flow-node--accent {
        border-color: oklch(0.72 0.1 220 / 0.55);
        background:
          linear-gradient(180deg, oklch(0.99 0.01 246), oklch(0.956 0.02 246)),
          var(--surface);
      }

      .flow-node strong {
        color: var(--ink);
        font-size: 14px;
      }

      .flow-node--accent strong {
        color: var(--accent);
      }

      .flow-ribbon {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding-top: 2px;
      }

      .flow-ribbon span {
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--navy-deep), var(--accent), var(--navy-deep));
        box-shadow: 0 0 0 1px oklch(0.84 0.08 220 / 0.18) inset;
      }

      .quick-panel {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background:
          linear-gradient(180deg, oklch(0.992 0.004 240), oklch(0.96 0.012 240)),
          oklch(0.986 0.006 240 / 0.72);
        padding-inline: 0;
      }

      .quick-panel__head {
        width: var(--site-width);
        max-width: 100%;
        margin-inline: auto;
        padding: 0 0 10px;
      }

      .quick-panel__inner {
        width: var(--site-width);
        max-width: 100%;
        margin-inline: auto;
        padding: 20px 0 32px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .quick-entry {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        min-height: 190px;
        padding: 18px;
        display: grid;
        align-content: space-between;
        gap: 16px;
        transition:
          transform 180ms var(--ease),
          border-color 180ms var(--ease),
          background 180ms var(--ease);
      }

      .quick-entry:hover {
        transform: translateY(-2px);
        border-color: var(--accent);
        background: var(--surface-blue);
      }

      .quick-entry__mark {
        width: fit-content;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-blue);
        color: var(--accent);
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 900;
      }

      .quick-entry strong {
        display: block;
        margin-bottom: 8px;
        color: var(--ink);
        font-size: 20px;
        line-height: 1.18;
      }

      .quick-entry span {
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.68;
      }

      .quick-entry em {
        width: fit-content;
        border-radius: 999px;
        background: var(--navy-deep);
        color: var(--surface);
        padding: 5px 9px;
        font-size: 12px;
        font-style: normal;
        font-weight: 900;
      }

      .section {
        padding-top: var(--section-y);
        padding-bottom: var(--section-y);
      }

      .section--compact {
        padding-top: var(--section-y-compact);
        padding-bottom: var(--section-y-compact);
      }

      .section--compact + .section {
        padding-top: clamp(36px, 5vw, 62px);
      }

      .home-overview {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
        gap: 14px;
        align-items: stretch;
      }

      .home-overview__panel {
        min-height: 360px;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: clamp(20px, 3vw, 30px);
        display: grid;
        align-content: space-between;
        gap: 26px;
        position: relative;
        overflow: hidden;
        transition:
          border-color 180ms var(--ease),
          transform 180ms var(--ease),
          background 180ms var(--ease);
      }

      .home-overview__panel:hover {
        transform: translateY(-3px);
        border-color: var(--accent);
      }

      .home-overview__panel--learn {
        background:
          linear-gradient(135deg, oklch(0.998 0.002 240), oklch(0.94 0.018 240)),
          var(--surface);
      }

      .home-overview__panel--arch {
        border-color: oklch(0.72 0.03 240);
        background:
          radial-gradient(circle at 82% 18%, oklch(0.62 0.12 195 / 0.18), transparent 16rem),
          linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
      }

      .home-overview__copy {
        max-width: 620px;
      }

      .home-overview__copy h2 {
        margin: 14px 0 12px;
        font-size: clamp(26px, 3.2vw, 38px);
        line-height: 1.1;
        letter-spacing: -0.025em;
        text-wrap: balance;
      }

      .home-overview__copy p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 15px;
        line-height: 1.78;
      }

      .home-overview__panel--arch .section-label {
        border-color: oklch(0.72 0.08 220 / 0.55);
        background: oklch(0.22 0.05 255);
        color: var(--accent-soft);
      }

      .home-overview__panel--arch .home-overview__copy p {
        color: oklch(0.9 0.018 246);
      }

      .home-overview__panel em {
        width: fit-content;
        min-height: 38px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        color: var(--accent);
        font-size: 13px;
        font-style: normal;
        font-weight: 900;
      }

      .home-overview__panel--arch em {
        border-color: oklch(0.7 0.06 225 / 0.55);
        color: var(--accent-soft);
      }

      .home-learning-track {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        position: relative;
      }

      .home-learning-track::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 8%;
        right: 8%;
        height: 2px;
        background: var(--line-strong);
      }

      .home-learning-track span {
        min-height: 88px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        padding: 12px;
        display: grid;
        place-items: center;
        color: var(--ink);
        font-size: 14px;
        font-weight: 850;
        text-align: center;
        position: relative;
        z-index: 1;
      }

      .home-learning-track span:first-child {
        border-color: var(--accent);
        background: var(--surface-blue);
      }

      .home-learning-result {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--navy-deep);
        color: var(--surface);
        padding: 16px;
        display: grid;
        gap: 5px;
      }

      .home-learning-result strong {
        color: var(--accent-soft);
        font-size: 14px;
      }

      .home-learning-result span {
        color: oklch(0.9 0.018 246);
        font-size: 14px;
        line-height: 1.66;
      }

      .home-arch-map {
        display: grid;
        gap: 10px;
      }

      .home-arch-map__top,
      .home-arch-map__base,
      .home-arch-map__core,
      .home-arch-map__grid span {
        border: 1px solid oklch(0.72 0.06 230 / 0.32);
        border-radius: 12px;
        background: oklch(0.23 0.05 255 / 0.92);
      }

      .home-arch-map__top,
      .home-arch-map__base {
        min-height: 42px;
        display: grid;
        place-items: center;
        color: oklch(0.86 0.02 246);
        font-size: 13px;
        font-weight: 820;
      }

      .home-arch-map__core {
        min-height: 88px;
        padding: 18px;
        display: grid;
        place-items: center;
        gap: 4px;
        text-align: center;
      }

      .home-arch-map__core strong {
        color: var(--surface);
        font-size: 26px;
        letter-spacing: -0.02em;
      }

      .home-arch-map__core span {
        color: oklch(0.83 0.026 246);
        font-size: 13px;
        font-weight: 780;
      }

      .home-arch-map__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .home-arch-map__grid span {
        min-height: 64px;
        padding: 10px;
        display: grid;
        place-items: center;
        color: oklch(0.89 0.018 246);
        font-size: 13px;
        font-weight: 850;
        text-align: center;
      }

      .home-arch-map__grid .is-active {
        border-color: oklch(0.8 0.09 220 / 0.62);
        background: oklch(0.84 0.08 220);
        color: var(--navy-deep);
      }

      .page-main {
        overflow-x: clip;
        padding-bottom: clamp(64px, 7vw, 104px);
      }

      .page-main .section {
        padding-left: 0;
        padding-right: 0;
      }

      .page-hero {
        /* Full-bleed hero media; copy stays on the site column */
        width: 100%;
        max-width: none;
        min-height: clamp(380px, 40svh, 440px);
        margin-inline: 0;
        padding-inline: 0;
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        align-items: center;
        justify-items: stretch;
        isolation: isolate;
        overflow: hidden;
        background: #ffffff;
      }

      .page-hero::before,
      .community-news-hero::before,
      .community-hero-panel::before,
      .learn-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("./atlas-generated/subpage-hero-bg.png") center / cover no-repeat;
        z-index: 0;
      }

      .page-hero::after,
      .community-news-hero::after,
      .community-hero-panel::after,
      .learn-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.46) 56%, rgba(255, 255, 255, 0.7)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.24) 42%, rgba(255, 255, 255, 0.08) 100%);
        z-index: 0;
      }

      .page-hero > .page-kicker,
      .page-hero > h1,
      .page-hero > p,
      .page-hero > .page-actions,
      .page-hero > .project-hero__summary,
      .page-hero > .docs-source-row {
        grid-column: 1;
        width: var(--site-width);
        max-width: 100%;
        margin-inline: auto;
        position: relative;
        z-index: 1;
      }

      .page-hero__copy,
      .community-hero-panel__copy {
        grid-column: 1;
        width: var(--site-width);
        min-width: 0;
        max-width: 100%;
        margin-inline: auto;
        position: relative;
        z-index: 1;
      }

      .page-hero__copy,
      .community-hero-panel__copy {
        display: grid;
        place-items: center;
        text-align: center;
        padding: clamp(48px, 5.5svh, 72px) 0;
        background: transparent;
        position: relative;
        z-index: 1;
      }

      .page-hero:has(> .page-kicker) {
        place-content: center;
        justify-items: stretch;
        text-align: center;
        padding-block: clamp(34px, 4.2vw, 56px);
      }

      .page-hero__copy::before,
      .page-hero__copy::after,
      .community-hero-panel__copy::before,
      .community-hero-panel__copy::after,
      .community-news-hero__copy::before,
      .community-news-hero__copy::after,
      .learn-hero::before,
      .learn-hero::after,
      .page-hero__visual::before,
      .page-hero__visual::after {
        pointer-events: none;
      }

      .page-hero__visual {
        display: none;
      }

      .page-kicker {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface);
        padding: 5px 12px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .page-hero h1 {
        max-width: 18ch;
        margin: 0;
        font-size: var(--text-page-title);
        line-height: 1.12;
        letter-spacing: -0.016em;
        text-wrap: balance;
        color: var(--ink);
      }

      .page-hero p {
        max-width: 44ch;
        margin: 0;
        color: var(--ink-soft);
        font-size: var(--text-body-lg);
        line-height: 1.76;
      }

      .docs-page .page-hero {
        min-height: clamp(360px, 38svh, 420px);
      }

      .docs-page .section {
        padding-top: clamp(34px, 4.4vw, 54px);
        padding-bottom: clamp(34px, 4.4vw, 54px);
      }

      .docs-page .page-hero + .section {
        padding-top: clamp(20px, 2.8vw, 34px);
      }

      .docs-page .section__head {
        margin-bottom: 22px;
      }

      .docs-page .page-hero h1,
      .docs-page .page-hero p,
      .docs-page .page-hero .docs-source-row,
      .docs-page .page-hero .page-actions {
        margin-left: auto;
        margin-right: auto;
      }

      .page-hero__copy .docs-source-row,
      .page-hero__copy .project-hero__summary {
        justify-content: center;
      }

      .page-hero + .section {
        padding-top: clamp(18px, 2.4vw, 28px);
      }

      .page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 30px;
      }

      .docs-grid,
      .interface-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px;
      }

      .docs-source-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
      }

      .docs-source-pill,
      .section-source {
        min-height: 36px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 850;
      }

      .section-source {
        width: fit-content;
        margin-top: 12px;
      }

      .docs-card,
      .interface-card,
      .docs-note {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        padding: 18px;
        display: grid;
        gap: 6px;
      }

      .docs-card:hover {
        border-color: var(--accent);
        background: var(--surface-blue);
      }

      .docs-card strong,
      .interface-card strong,
      .docs-note h3 {
        font-size: 16px;
        line-height: 1.2;
      }

      .docs-card span,
      .interface-card p,
      .docs-note p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 13px;
        line-height: 1.68;
      }

      .docs-band {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .docs-landing-page .section {
        padding-top: clamp(38px, 4.8vw, 68px);
        padding-bottom: clamp(38px, 4.8vw, 68px);
      }

      .docs-landing-hero {
        min-height: clamp(360px, 38svh, 440px);
      }

      .docs-landing-product-grid,
      .docs-landing-card-grid {
        display: grid;
        gap: clamp(14px, 1.8vw, 22px);
      }

      .docs-landing-product-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
      }

      .docs-landing-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .docs-landing-product,
      .docs-landing-card {
        border: 1px solid var(--line);
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 255, 0.88) 58%, rgba(255, 243, 247, 0.82)),
          var(--surface);
        box-shadow: var(--card-shadow);
        transition:
          border-color 180ms var(--ease),
          transform 180ms var(--ease),
          background 180ms var(--ease);
      }

      .docs-landing-product:hover,
      .docs-landing-card:hover {
        border-color: rgba(79, 99, 243, 0.42);
        background: var(--surface-blue);
        transform: translateY(-3px);
      }

      .docs-landing-product {
        min-height: clamp(220px, 18vw, 290px);
        padding: clamp(22px, 3vw, 34px);
        display: grid;
        align-content: space-between;
        gap: 22px;
      }

      .docs-landing-product span,
      .docs-landing-product em {
        width: fit-content;
        min-height: 34px;
        border: 1px solid rgba(207, 214, 234, 0.9);
        border-radius: 999px;
        background: #ffffff;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        color: var(--accent);
        font-size: 12px;
        font-style: normal;
        font-weight: 900;
      }

      .docs-landing-product strong {
        max-width: 16em;
        color: var(--ink);
        font-size: clamp(26px, 3vw, 42px);
        line-height: 1.08;
        letter-spacing: -0.018em;
      }

      .docs-landing-product p {
        max-width: 46em;
        margin: 0;
        color: var(--ink-soft);
        font-size: clamp(14px, 1.35vw, 16px);
        line-height: 1.76;
      }

      .docs-landing-card {
        min-height: 152px;
        padding: clamp(18px, 2vw, 24px);
        display: grid;
        align-content: start;
        gap: 8px;
      }

      .docs-landing-card strong {
        color: var(--ink);
        font-size: clamp(17px, 1.55vw, 22px);
        line-height: 1.2;
      }

      .docs-landing-card span {
        color: var(--ink-soft);
        font-size: 13px;
        line-height: 1.7;
      }

      .home-route {
        min-height: 154px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        padding: 18px;
        display: grid;
        align-content: space-between;
        transition:
          border-color 180ms var(--ease),
          transform 180ms var(--ease),
          background 180ms var(--ease);
      }

      .home-route:hover {
        border-color: var(--accent);
        background: var(--surface-blue);
        transform: translateY(-3px);
      }

      .home-route strong {
        display: block;
        margin-bottom: 6px;
        font-size: 17px;
      }

      .home-route span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 760;
      }

      .home-route em {
        color: var(--accent);
        font-size: 12px;
        font-style: normal;
        font-weight: 900;
      }

      .project-hero {
        padding-bottom: 0;
      }

      .project-hero h1 {
        max-width: 980px;
      }

      .project-hero__summary {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 28px;
      }

      .project-hero__summary span {
        min-height: 36px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        display: inline-flex;
        align-items: center;
        padding: 0 14px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .project-page .page-hero h1 {
        max-width: 14ch;
        margin-bottom: 18px;
        font-size: var(--text-page-title);
        line-height: 1.12;
        letter-spacing: -0.018em;
      }

      .project-page .section {
        padding-top: clamp(40px, 4.8vw, 64px);
        padding-bottom: clamp(40px, 4.8vw, 64px);
      }

      .project-page .section__head {
        max-width: min(1040px, 100%);
        margin-right: auto;
        margin-left: auto;
        margin-bottom: clamp(22px, 3vw, 34px);
        text-align: center;
      }

      .project-page .section__head--split {
        display: block;
        grid-template-columns: none;
      }

      .project-page .section__head h2 {
        margin-bottom: 0;
        line-height: 1.2;
        letter-spacing: -0.014em;
        text-wrap: pretty;
      }

      .project-architecture-title {
        position: relative;
        display: inline-block;
        max-width: 100%;
        padding-bottom: 14px;
        text-wrap: balance;
        background: linear-gradient(105deg, var(--ink) 0%, var(--ink) 30%, var(--brand-rose) 46%, var(--brand-purple) 58%, var(--brand-blue) 72%, var(--ink) 100%);
        background-size: 230% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }

      .project-architecture-title::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: min(220px, 68%);
        height: 3px;
        border-radius: 999px;
        background: var(--brand-gradient);
        box-shadow: 0 10px 28px rgba(138, 99, 255, 0.26);
        transform: translateX(-50%) scaleX(0.18);
        transform-origin: center;
      }

      .section:has(#architecture).is-visible #architecture,
      .home-architecture-section.is-visible #architecture {
        animation:
          projectTitleFloat 760ms var(--ease) both,
          projectTitleSheen 1150ms 180ms var(--ease) both;
      }

      .section:has(#architecture).is-visible #architecture::after,
      .home-architecture-section.is-visible #architecture::after {
        animation: projectTitleRule 780ms 180ms var(--ease) both;
      }

      @keyframes projectTitleFloat {
        from {
          filter: blur(5px);
          transform: translateY(16px);
        }

        to {
          filter: blur(0);
          transform: translateY(0);
        }
      }

      @keyframes projectTitleSheen {
        from {
          background-position: 0% 50%;
        }

        to {
          background-position: 100% 50%;
        }
      }

      @keyframes projectTitleRule {
        from {
          opacity: 0.2;
          transform: translateX(-50%) scaleX(0.18);
        }

        to {
          opacity: 1;
          transform: translateX(-50%) scaleX(1);
        }
      }

      .project-summary {
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.88);
        border-radius: 18px;
        padding: 22px;
        display: grid;
        gap: 16px;
      }

      .project-summary__lead {
        margin: 0;
        color: var(--ink-soft);
        font-size: 15px;
        line-height: 1.8;
        max-width: 72ch;
      }

      .project-summary__keywords {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .project-summary__keywords span {
        min-height: 34px;
        border: 1px solid var(--line-strong);
        background: var(--surface-blue);
        color: var(--accent);
        border-radius: 999px;
        align-items: center;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 860;
        display: inline-flex;
      }

      .project-definition article,
      .project-status article,
      .project-module-list article,
      .project-boundary > div {
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.88);
      }

      .project-definition article {
        border-radius: 18px;
        min-height: 240px;
        padding: 22px;
        display: grid;
        align-content: space-between;
        gap: 24px;
      }

      .project-definition h3,
      .project-module-list h3 {
        margin: 10px 0 10px;
        color: var(--ink);
        font-size: clamp(20px, 2.2vw, 28px);
        line-height: 1.12;
        letter-spacing: -0.01em;
      }

      .project-definition p,
      .project-boundary p,
      .project-status p,
      .project-module-list p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.72;
      }

      .project-boundary {
        display: grid;
        grid-template-columns: 1.08fr 0.96fr 0.96fr;
        gap: 12px;
        margin-top: 16px;
      }

      .project-boundary > div {
        border-radius: 14px;
        padding: 18px;
      }

      .project-boundary strong {
        display: block;
        margin-bottom: 8px;
        color: var(--ink);
        font-size: 15px;
      }

      .project-status {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .project-status article {
        border-radius: 16px;
        min-height: 210px;
        padding: 18px;
        display: grid;
        align-content: space-between;
        gap: 18px;
      }

      .project-status strong {
        display: block;
        color: var(--ink);
        font-size: 20px;
        line-height: 1.16;
      }

      .project-module-list {
        display: grid;
        gap: 12px;
      }

      .project-module-list article {
        border-radius: 16px;
        padding: 18px;
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) minmax(240px, 0.42fr);
        align-items: center;
        gap: 18px;
      }

      .project-module-list article > span {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--navy), var(--accent));
        display: grid;
        place-items: center;
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
      }

      .project-module-list h3 {
        margin-top: 0;
      }

      .project-module-list em {
        border-left: 1px solid var(--line);
        padding-left: 18px;
        color: var(--accent);
        font-size: 13px;
        font-style: normal;
        font-weight: 850;
        line-height: 1.56;
      }

      .project-scenario-map article {
        min-height: 0;
        padding: 16px;
        align-content: start;
        gap: 14px;
      }

      .project-scenario-image {
        width: 100%;
        aspect-ratio: 16 / 10;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #f7f9fc;
        display: block;
        object-fit: cover;
      }

      .project-scenario-image--flow {
        aspect-ratio: 16 / 9;
        object-fit: contain;
      }

      .project-architecture-figure {
        margin: 0;
      }

      .project-architecture-image {
        width: 100%;
        height: auto;
        display: block;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--card-shadow);
      }

      .project-architecture-figure figcaption {
        margin: 12px 0 0;
        max-width: 760px;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.72;
      }

      .home-architecture-figure {
        margin-right: auto;
        margin-left: auto;
      }

      .official-home .home-architecture-section > .home-architecture-figure {
        width: 100%;
        margin-inline: 0;
      }

      .home-architecture-section .section__head--center {
        margin-bottom: clamp(6px, 1vw, 12px);
        max-width: 100%;
      }

      .home-architecture-section .project-architecture-image {
        width: 100%;
        display: block;
      }

      #architecture {
        padding-bottom: 10px;
      }

      .home-architecture-section > .home-architecture-figure {
        margin-top: 0;
      }

      .home-architecture-section > .home-architecture-figure .project-architecture-image {
        border: none;
        box-shadow: none;
      }

      .learn-hero {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding:
          clamp(46px, 5.5vw, 76px)
          0
          clamp(34px, 4.5vw, 60px);
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        align-items: center;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: clamp(380px, 40svh, 440px);
      }

      .learn-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("./atlas-generated/subpage-hero-bg.png") center / cover no-repeat;
        z-index: 0;
      }

      .learn-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.42) 58%, rgba(255, 255, 255, 0.74)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.22) 38%, rgba(255, 255, 255, 0.08) 100%);
        z-index: 0;
      }

      .learn-hero > div {
        width: var(--site-width);
        max-width: none;
        margin-inline: auto;
        position: relative;
        z-index: 1;
      }

      .learn-hero h1 {
        max-width: 720px;
        margin: 18px 0 18px;
        font-size: clamp(30px, 3.4vw, 38px);
        line-height: 1.08;
        letter-spacing: -0.016em;
        text-wrap: balance;
      }

      .learn-hero p {
        max-width: 760px;
        margin: 0;
        color: var(--ink-soft);
        font-size: 16px;
        line-height: 1.72;
      }

      .learn-outcome {
        display: none;
      }

      .learn-outcome {
        border: 1px solid var(--line);
        border-radius: 18px;
        background:
          radial-gradient(circle at 80% 12%, oklch(0.78 0.1 195 / 0.14), transparent 12rem),
          linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
        padding: 24px;
        margin-top: 40px;
        display: grid;
        gap: 16px;
        box-shadow: 0 18px 34px oklch(0.18 0.05 255 / 0.14);
      }

      .learn-outcome strong {
        color: var(--accent-soft);
        font-size: 18px;
      }

      .learn-outcome ul {
        margin: 0;
        padding: 0;
        display: grid;
        gap: 12px;
        list-style: none;
      }

      .learn-outcome li {
        position: relative;
        padding-left: 18px;
        color: oklch(0.9 0.018 246);
        font-size: 14px;
        line-height: 1.7;
      }

      .learn-outcome li::before {
        content: "";
        position: absolute;
        top: 0.72em;
        left: 0;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--accent-soft);
      }

      .learning-flow {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(10px, 1.2vw, 14px);
      }

      .learning-step {
        position: relative;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        min-height: 0;
        padding: clamp(14px, 1.5vw, 18px);
        display: grid;
        align-content: space-between;
        gap: clamp(12px, 1.2vw, 18px);
      }

      .learning-step::after {
        content: "";
        position: absolute;
        top: 34px;
        right: -12px;
        width: 12px;
        height: 1px;
        background: var(--line-strong);
      }

      .learning-step:last-child::after {
        content: none;
      }

      .learning-step span {
        width: fit-content;
        border-radius: 999px;
        background: var(--surface-blue);
        color: var(--accent);
        padding: 5px 9px;
        font-size: 12px;
        font-weight: 900;
      }

      .learning-step h3 {
        margin-bottom: 8px;
        font-size: clamp(16px, 1.75vw, 22px);
        line-height: 1.2;
      }

      .learning-step p {
        margin: 0;
        color: var(--ink-soft);
        font-size: clamp(12px, 1.15vw, 14px);
        line-height: 1.76;
      }

      .learning-step--active {
        border-color: transparent;
        background: linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
      }

      .learning-step--active span {
        background: oklch(0.84 0.08 220);
        color: var(--navy-deep);
      }

      .learning-step--active p {
        color: oklch(0.9 0.02 246);
      }

      .learn-architecture {
        display: grid;
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
        gap: clamp(24px, 5vw, 54px);
        align-items: center;
      }

      .learn-architecture .section__head {
        margin-bottom: 0;
      }

      .learn-arch-board {
        border: 1px solid var(--line);
        border-radius: 16px;
        background:
          radial-gradient(circle at 78% 8%, oklch(0.65 0.12 195 / 0.16), transparent 16rem),
          linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
        padding: clamp(18px, 3vw, 28px);
        display: grid;
        gap: 12px;
      }

      .learn-arch-board__row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .learn-arch-board__row span,
      .learn-arch-board__base,
      .learn-arch-board__core {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: oklch(0.98 0.008 240 / 0.82);
      }

      .learn-arch-board__row span {
        min-height: 62px;
        padding: 10px;
        display: grid;
        place-items: center;
        color: oklch(0.89 0.018 246);
        font-size: 13px;
        font-weight: 850;
        text-align: center;
      }

      .learn-arch-board__row--top span {
        min-height: 48px;
        color: oklch(0.82 0.028 246);
      }

      .learn-arch-board__row .is-active {
        border-color: oklch(0.66 0.15 258 / 0.34);
        background: oklch(0.84 0.08 195);
        color: var(--navy-deep);
      }

      .learn-arch-board__core {
        min-height: 118px;
        padding: 22px;
        display: grid;
        place-items: center;
        gap: 6px;
        text-align: center;
      }

      .learn-arch-board__core strong {
        color: var(--surface);
        font-size: clamp(26px, 4vw, 38px);
        line-height: 1;
        letter-spacing: -0.025em;
      }

      .learn-arch-board__core span {
        max-width: 460px;
        color: oklch(0.88 0.02 240);
        font-size: 13px;
        font-weight: 780;
      }

      .learn-arch-board__base {
        min-height: 48px;
        display: grid;
        place-items: center;
        color: oklch(0.86 0.02 246);
        font-size: 13px;
        font-weight: 820;
        text-align: center;
      }

      .learn-split {
        display: grid;
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
        gap: clamp(24px, 5vw, 54px);
        align-items: start;
      }

      .learn-checklist {
        display: grid;
        gap: 12px;
      }

      .learn-checklist article {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        padding: 18px;
        display: grid;
        grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.2fr) auto;
        gap: 16px;
        align-items: center;
      }

      .learn-checklist strong {
        font-size: 18px;
      }

      .learn-checklist p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.68;
      }

      .learn-checklist a {
        min-height: 36px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        color: var(--accent);
        font-size: 13px;
        font-weight: 850;
        white-space: nowrap;
      }

      .learning-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .learning-card {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        min-height: 230px;
        padding: 20px;
        display: grid;
        align-content: space-between;
        gap: 22px;
        transition:
          border-color 180ms var(--ease),
          background 180ms var(--ease),
          transform 180ms var(--ease);
      }

      .learning-card:hover {
        border-color: var(--accent);
        background: var(--surface-blue);
        transform: translateY(-3px);
      }

      .learning-card span {
        width: fit-content;
        border-radius: 999px;
        background: var(--surface-blue);
        color: var(--accent);
        padding: 5px 9px;
        font-size: 12px;
        font-weight: 900;
      }

      .learning-card strong {
        display: block;
        margin: 16px 0 8px;
        font-size: 24px;
        line-height: 1.18;
      }

      .learning-card p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.74;
      }

      .section__head {
        max-width: 820px;
        margin-bottom: 34px;
      }

      .section__head h2 {
        margin-bottom: 12px;
        font-size: var(--text-section);
        line-height: 1.1;
        letter-spacing: -0.012em;
        text-wrap: balance;
      }

      .section__head p {
        margin-bottom: 0;
        color: var(--ink-soft);
        font-size: var(--text-body);
        line-height: 1.7;
      }

      .section__head--center {
        max-width: min(760px, 100%);
        margin-right: auto;
        margin-left: auto;
        margin-bottom: clamp(24px, 3.2vw, 36px);
        text-align: center;
      }

      .section__head--center h2 {
        margin-bottom: 0;
        font-size: clamp(28px, 2.9vw, 38px);
        line-height: 1.12;
        letter-spacing: -0.014em;
      }

      .quick-panel .quick-panel__head {
        width: var(--site-width);
        max-width: none;
        margin-inline: auto;
        margin-bottom: 34px;
      }

      .split-section {
        display: grid;
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: clamp(24px, 5vw, 54px);
        align-items: start;
      }

      .section-label {
        width: fit-content;
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        background: var(--surface);
        padding: 5px 9px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .scene-showcase {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        padding: clamp(18px, 3vw, 28px);
        display: grid;
        grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
        gap: clamp(18px, 4vw, 42px);
        align-items: stretch;
      }

      .scene-copy {
        display: grid;
        align-content: space-between;
        gap: 22px;
      }

      .scene-copy h2 {
        margin: 10px 0 12px;
        font-size: clamp(26px, 3.6vw, 36px);
        line-height: 1.1;
        letter-spacing: -0.018em;
      }

      .scene-copy p {
        margin: 0;
        color: var(--ink-soft);
      }

      .scene-tabs {
        display: grid;
        gap: 10px;
      }

      .scene-tab {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        color: var(--ink);
        padding: 12px 14px;
        display: grid;
        gap: 2px;
        text-align: left;
        font: inherit;
        cursor: pointer;
        transition:
          border-color 180ms var(--ease),
          background 180ms var(--ease),
          transform 180ms var(--ease);
      }

      .scene-tab:hover,
      .scene-tab.is-active {
        border-color: var(--accent);
        background: var(--surface-blue);
        transform: translateX(2px);
      }

      .scene-tab strong {
        font-size: 14px;
      }

      .scene-tab span {
        color: var(--muted);
        font-size: 11px;
        font-weight: 760;
      }

      .scene-tab:focus-visible {
        outline: 3px solid oklch(0.64 0.17 250 / 0.25);
        outline-offset: 3px;
      }

      .scene-stage {
        position: relative;
        min-height: 420px;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(135deg, var(--navy), var(--navy-deep));
        isolation: isolate;
      }

      .scene-panel {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateX(18px) scale(0.985);
        transition:
          opacity 420ms var(--ease),
          transform 520ms var(--ease);
        pointer-events: none;
        z-index: 1;
      }

      .scene-panel.is-active {
        opacity: 1;
        transform: translateX(0) scale(1);
        pointer-events: auto;
        z-index: 2;
      }

      .scene-art {
        height: 100%;
        min-height: 420px;
        padding: 22px;
        color: var(--surface);
        display: grid;
        align-content: space-between;
        gap: 18px;
        background:
          radial-gradient(circle at 72% 24%, oklch(0.64 0.11 195 / 0.18), transparent 18rem),
          linear-gradient(135deg, var(--navy), var(--navy-deep));
      }

      .scene-art--science {
        background:
          radial-gradient(circle at 28% 22%, oklch(0.7 0.12 155 / 0.16), transparent 17rem),
          linear-gradient(135deg, oklch(0.22 0.05 232), oklch(0.28 0.07 220));
      }

      .scene-art--agent {
        background:
          radial-gradient(circle at 76% 18%, oklch(0.74 0.1 82 / 0.14), transparent 16rem),
          linear-gradient(135deg, oklch(0.22 0.05 240), oklch(0.3 0.06 236));
      }

      .scene-art__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        font-weight: 900;
      }

      .scene-art__head span {
        color: var(--accent-soft);
        font-size: 13px;
      }

      .scene-screen {
        border: 1px solid oklch(0.82 0.03 240 / 0.28);
        border-radius: 16px;
        background: oklch(0.998 0.002 240 / 0.94);
        padding: 18px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .scene-window,
      .scene-result,
      .scene-graph {
        border: 1px solid oklch(0.82 0.03 240 / 0.22);
        border-radius: 12px;
        background: oklch(0.996 0.004 240 / 0.94);
        padding: 14px;
      }

      .scene-window {
        display: grid;
        gap: 9px;
      }

      .scene-line {
        height: 10px;
        border-radius: 999px;
        background:
          linear-gradient(90deg, transparent, oklch(0.92 0.06 195 / 0.18), transparent),
          oklch(0.92 0.025 240 / 0.22);
        background-size: 180% 100%, auto;
        animation: sceneSweep 3.6s ease-in-out infinite;
      }

      .scene-line:nth-child(2) {
        width: 72%;
      }

      .scene-line:nth-child(3) {
        width: 88%;
        background: oklch(0.68 0.14 258 / 0.5);
      }

      .scene-result strong {
        display: block;
        margin-bottom: 8px;
        font-size: clamp(34px, 5vw, 58px);
        line-height: 1;
      }

      .scene-bars {
        display: grid;
        gap: 8px;
      }

      .scene-bar {
        height: 12px;
        border-radius: 999px;
        background: oklch(0.68 0.14 258 / 0.58);
        transform-origin: left center;
        animation: sceneBar 3.4s ease-in-out infinite;
      }

      .scene-bar:nth-child(2) {
        width: 72%;
      }

      .scene-bar:nth-child(3) {
        width: 52%;
      }

      .scene-flow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .scene-chip {
        border: 1px solid oklch(0.82 0.03 240 / 0.22);
        border-radius: 10px;
        background: oklch(0.998 0.002 240 / 0.9);
        padding: 11px;
        color: var(--ink);
        font-size: 12px;
        font-weight: 820;
        text-align: center;
      }

      .scene-network {
        min-height: 178px;
        position: relative;
        border: 1px solid oklch(0.82 0.03 240 / 0.22);
        border-radius: 14px;
        background:
          linear-gradient(90deg, oklch(0.998 0.002 240 / 0.08) 1px, transparent 1px),
          linear-gradient(180deg, oklch(0.998 0.002 240 / 0.08) 1px, transparent 1px);
        background-size: 28px 28px;
      }

      .node-dot {
        position: absolute;
        width: 13px;
        height: 13px;
        border-radius: 999px;
        background: oklch(0.68 0.14 258);
        box-shadow: 0 0 0 8px oklch(0.68 0.14 258 / 0.14);
        animation: scenePulse 3.8s ease-in-out infinite;
      }

      .node-dot:nth-child(1) {
        left: 18%;
        top: 30%;
      }

      .node-dot:nth-child(2) {
        left: 50%;
        top: 18%;
        animation-delay: 0.4s;
      }

      .node-dot:nth-child(3) {
        left: 72%;
        top: 56%;
        animation-delay: 0.8s;
      }

      .node-dot:nth-child(4) {
        left: 34%;
        top: 68%;
        animation-delay: 1.2s;
      }

      .scene-demo-slot {
        border: 1px solid oklch(0.82 0.03 240 / 0.2);
        border-radius: 14px;
        background: oklch(0.998 0.002 240 / 0.1);
        padding: 13px 14px;
        display: flex;
        align-items: center;
        gap: 12px;
        width: fit-content;
        max-width: 100%;
      }

      .scene-demo-slot span {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: oklch(0.98 0.008 240 / 0.14);
        position: relative;
        flex: 0 0 auto;
      }

      .scene-demo-slot span::before {
        content: "";
        position: absolute;
        left: 13px;
        top: 10px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 10px solid oklch(0.86 0.08 195);
      }

      .scene-demo-slot strong {
        display: block;
        font-size: 13px;
        line-height: 1.25;
      }

      .scene-demo-slot em {
        color: oklch(0.54 0.03 238);
        font-size: 12px;
        font-style: normal;
      }

      .scene-preview {
        display: grid;
        gap: 14px;
      }

      .scene-preview__frame {
        min-height: 240px;
        border: 1px solid oklch(0.82 0.04 246 / 0.2);
        border-radius: 16px;
        background:
          linear-gradient(180deg, oklch(0.998 0.001 246 / 0.08), transparent 42%),
          linear-gradient(135deg, oklch(0.14 0.045 255), oklch(0.22 0.07 252));
        padding: 18px;
        display: grid;
        align-content: space-between;
        gap: 18px;
        overflow: hidden;
        position: relative;
      }

      .scene-preview__frame::after {
        content: "";
        position: absolute;
        inset: auto -10% -20% auto;
        width: 58%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle at center, oklch(0.84 0.09 220 / 0.14), transparent 70%);
        pointer-events: none;
      }

      .scene-preview__overlay {
        position: relative;
        z-index: 1;
        align-self: end;
        width: min(340px, 100%);
        border: 1px solid oklch(0.82 0.04 246 / 0.2);
        border-radius: 12px;
        background: oklch(0.06 0.02 255 / 0.58);
        padding: 12px 14px;
        display: grid;
        gap: 4px;
        color: var(--surface);
      }

      .scene-preview__overlay strong {
        font-size: 14px;
      }

      .scene-preview__overlay span {
        color: oklch(0.86 0.02 246);
        font-size: 12px;
      }

      .scene-preview__hud {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        gap: 14px;
        color: oklch(0.9 0.02 246);
        font-size: 13px;
        font-weight: 820;
      }

      .scene-preview__hud strong {
        color: var(--surface);
        font-size: 20px;
      }

      .scene-preview__stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
        position: relative;
        z-index: 1;
      }

      .scene-preview__stack .scene-window {
        min-height: 176px;
      }

      .scene-preview--science .scene-preview__frame {
        min-height: 240px;
      }

      .scene-preview--science .scene-network {
        min-height: 164px;
      }

      .scene-preview--agent .scene-preview__frame {
        min-height: 258px;
      }

      .scene-progress {
        position: absolute;
        right: 20px;
        bottom: 18px;
        left: 20px;
        height: 3px;
        border-radius: 999px;
        background: oklch(0.998 0.001 246 / 0.18);
        overflow: hidden;
        z-index: 4;
      }

      .scene-progress span {
        display: block;
        width: 33.333%;
        height: 100%;
        border-radius: inherit;
        background: oklch(0.84 0.09 220);
        transform: translateX(calc(var(--scene-index, 0) * 100%));
        transition: transform 420ms var(--ease);
      }

      @keyframes sceneSweep {
        0%,
        100% {
          background-position: 180% 0, 0 0;
        }

        50% {
          background-position: -80% 0, 0 0;
        }
      }

      @keyframes sceneBar {
        0%,
        100% {
          transform: scaleX(0.72);
        }

        50% {
          transform: scaleX(1);
        }
      }

      @keyframes scenePulse {
        0%,
        100% {
          transform: translateY(0);
          box-shadow: 0 0 0 8px oklch(0.86 0.08 220 / 0.14);
        }

        50% {
          transform: translateY(-6px);
          box-shadow: 0 0 0 14px oklch(0.86 0.08 220 / 0.08);
        }
      }

      .compare-stack {
        display: grid;
        gap: 14px;
      }

      .compare-card {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        overflow: hidden;
      }

      .compare-card__top {
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        font-weight: 900;
      }

      .compare-card__top span {
        color: var(--accent);
      }

      .compare-body {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
      }

      .compare-cell {
        padding: 16px;
        color: var(--ink-soft);
      }

      .compare-cell + .compare-cell {
        border-left: 1px solid var(--line);
      }

      .compare-cell strong {
        display: block;
        margin-bottom: 8px;
        color: var(--ink);
      }

      .capability-layout {
        display: grid;
        grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
        gap: 18px;
        align-items: stretch;
      }

      .capability-lead {
        border: 1px solid var(--line);
        border-radius: 16px;
        background:
          linear-gradient(135deg, var(--navy), oklch(0.25 0.08 252)),
          var(--navy);
        color: var(--surface);
        padding: 24px;
        display: grid;
        align-content: space-between;
        min-height: 420px;
      }

      .capability-lead h3 {
        margin-bottom: 12px;
        font-size: clamp(28px, 4vw, 44px);
        line-height: 1.08;
        letter-spacing: -0.025em;
      }

      .capability-lead p {
        color: oklch(0.87 0.02 246);
      }

      .capability-proof {
        border-top: 1px solid oklch(0.72 0.05 246 / 0.5);
        padding-top: 14px;
        color: oklch(0.87 0.02 246);
        font-size: 14px;
        font-weight: 760;
      }

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

      .capability-item {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        padding: 18px;
        min-height: 150px;
        display: grid;
        align-content: space-between;
        gap: 18px;
      }

      .capability-item h3 {
        margin-bottom: 8px;
        font-size: clamp(16px, 1.6vw, 18px);
        line-height: 1.24;
        letter-spacing: -0.012em;
      }

      .capability-item p {
        margin-bottom: 0;
        color: var(--ink-soft);
      }

      .capability-meta {
        border-top: 1px solid var(--line);
        padding-top: 10px;
        color: var(--muted);
        font-size: clamp(11px, 1.1vw, 13px);
        font-weight: 780;
      }

      .architecture {
        border: 1px solid var(--line);
        border-radius: 20px;
        background:
          linear-gradient(180deg, oklch(0.992 0.004 240), oklch(0.975 0.01 240));
        padding: clamp(16px, 3.4vw, 26px);
        display: grid;
        gap: 18px;
      }

      .arch-shell {
        display: grid;
        gap: 14px;
      }

      .arch-shell__top {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .arch-pill {
        border: 1px solid var(--line);
        border-radius: 14px;
        background:
          linear-gradient(180deg, oklch(0.978 0.007 240), oklch(0.95 0.01 240));
        color: var(--ink);
        min-height: 0;
        display: grid;
        place-items: center;
        padding: clamp(10px, 1.2vw, 14px);
        font-size: clamp(12px, 1.15vw, 14px);
        font-weight: 900;
        text-align: center;
      }

      .arch-pill--active {
        border-color: transparent;
        background: linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
        box-shadow: 0 12px 24px oklch(0.14 0.04 255 / 0.16);
      }

      .arch-core {
        border: 1px solid var(--line);
        border-radius: 20px;
        background:
          linear-gradient(180deg, oklch(0.99 0.004 240), oklch(0.968 0.01 240));
        padding: 16px;
        box-shadow: 0 10px 24px oklch(0.18 0.05 255 / 0.06);
      }

      .arch-core__head {
        width: fit-content;
        margin: 0 auto 14px;
        padding: 0 8px;
        color: var(--accent);
        font-size: 14px;
        font-weight: 900;
      }

      .arch-core__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 170px;
        gap: 14px;
      }

      .arch-lane {
        border: 1px solid var(--line);
        border-radius: 18px;
        background:
          linear-gradient(180deg, oklch(0.968 0.008 240), oklch(0.95 0.01 240));
        padding: 14px;
      }

      .arch-lane__title {
        border-radius: 12px;
        background: linear-gradient(135deg, var(--navy), var(--accent));
        color: var(--surface);
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 900;
        text-align: center;
        box-shadow: 0 8px 18px oklch(0.18 0.05 255 / 0.14);
      }

      .arch-lane__grid {
        margin-top: 14px;
        display: grid;
        grid-template-columns: 1.18fr 0.92fr 0.74fr;
        gap: 10px;
      }

      .arch-block {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: linear-gradient(180deg, var(--surface), oklch(0.988 0.004 240));
        min-height: 144px;
        padding: 15px;
        display: grid;
        align-content: center;
        gap: 7px;
        text-align: center;
      }

      .arch-block--tall {
        grid-row: span 2;
        min-height: 300px;
      }

      .arch-block--wide {
        grid-column: 2 / span 2;
        min-height: 72px;
        background: linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
      }

      .arch-block--foot {
        grid-column: 1 / span 3;
        min-height: 72px;
        background: linear-gradient(135deg, var(--navy-deep), var(--navy));
        color: var(--surface);
      }

      .arch-block strong {
        font-size: 16px;
        line-height: 1.28;
      }

      .arch-block span {
        color: var(--ink-soft);
        font-size: 13px;
      }

      .arch-block--wide span,
      .arch-block--foot span {
        color: oklch(0.92 0.02 240);
      }

      .arch-side {
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .arch-note {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: linear-gradient(180deg, var(--navy), var(--navy-deep));
        display: grid;
        place-items: center;
        color: var(--surface);
        font-size: 18px;
        font-weight: 900;
        box-shadow: 0 8px 18px oklch(0.18 0.05 255 / 0.12);
      }

      .architecture-mini-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }

      .architecture-mini-card {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: var(--surface);
        padding: 18px;
        max-width: 420px;
      }

      .architecture-mini-card span {
        color: var(--accent-soft);
        font-size: 13px;
        font-weight: 900;
      }

      .architecture-mini-card strong {
        display: block;
        margin: 10px 0 8px;
        font-size: 22px;
        line-height: 1.2;
      }

      .architecture-mini-card p {
        margin-bottom: 0;
        color: oklch(0.88 0.02 246);
      }

      .architecture-track {
        border-top: 1px solid var(--line);
        padding-top: 14px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
      }

      .architecture-step {
        position: relative;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: linear-gradient(180deg, oklch(0.986 0.006 240), oklch(0.964 0.01 240));
        padding: 14px;
        min-height: 120px;
        display: grid;
        align-content: start;
        gap: 6px;
      }

      .architecture-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -6px;
        width: 12px;
        height: 1px;
        background: var(--line-strong);
      }

      .architecture-step span {
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .architecture-step h3 {
        margin: 0;
        font-size: 17px;
        line-height: 1.24;
      }

      .architecture-step p {
        margin-bottom: 0;
        color: var(--ink-soft);
        font-size: 13px;
        line-height: 1.52;
      }

      .architecture-step::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        border-radius: 14px 14px 0 0;
        background: linear-gradient(90deg, var(--navy), var(--accent), var(--navy));
      }

      .adapter-row {
        border-top: 1px solid var(--line);
        padding-top: 18px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .adapter {
        border-radius: 10px;
        background: var(--surface-soft);
        padding: 12px;
        color: var(--ink-soft);
        font-size: 13px;
        font-weight: 760;
      }

      .case-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: clamp(10px, 1.2vw, 16px);
      }

      .case-card {
        border: 1px solid var(--line);
        border-top: 3px solid var(--accent);
        border-radius: 14px;
        background: var(--surface);
        padding: clamp(16px, 1.6vw, 20px);
        min-height: 0;
        display: grid;
        align-content: space-between;
        gap: clamp(14px, 1.5vw, 24px);
      }

      .case-card span {
        width: fit-content;
        border-radius: 6px;
        background: var(--surface-blue);
        color: var(--accent);
        padding: 5px 8px;
        font-size: 12px;
        font-weight: 900;
      }

      .case-card h3 {
        margin: 12px 0 8px;
        font-size: 22px;
        line-height: 1.22;
      }

      .case-card p {
        margin-bottom: 0;
        color: var(--ink-soft);
      }

      .case-card strong {
        color: var(--ink);
      }

      .demo-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.14fr) minmax(300px, 0.86fr);
        gap: 16px;
        align-items: stretch;
      }

      .demo-card,
      .demo-list-card {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        padding: 16px;
      }

      .video-slot {
        position: relative;
        margin: 0;
        border-radius: 12px;
        background:
          linear-gradient(135deg, oklch(0.18 0.05 255), oklch(0.26 0.08 252)),
          var(--navy);
        color: var(--surface);
        aspect-ratio: 16 / 9;
        overflow: hidden;
        display: grid;
        place-items: center;
      }

      .video-slot::after {
        content: "";
        position: absolute;
        inset: 0;
        height: 22%;
        background: linear-gradient(180deg, transparent, oklch(0.82 0.09 220 / 0.14), transparent);
        animation: scan 6.8s linear infinite;
        pointer-events: none;
      }

      .video-slot__content {
        position: relative;
        z-index: 1;
        width: min(420px, 84%);
        display: grid;
        justify-items: center;
        gap: 12px;
        text-align: center;
      }

      .slot-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .play-marker {
        width: 58px;
        height: 58px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: oklch(0.86 0.08 220);
      }

      .play-marker::before {
        content: "";
        width: 0;
        height: 0;
        margin-left: 4px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid var(--navy);
      }

      .video-slot strong {
        font-size: clamp(20px, 3vw, 30px);
        line-height: 1.16;
      }

      .video-slot span {
        color: oklch(0.86 0.02 246);
        font-size: 13px;
      }

      .demo-caption {
        margin: 14px 0 0;
        color: var(--ink-soft);
        font-size: 14px;
      }

      .demo-list-card {
        display: grid;
        gap: 12px;
      }

      .mini-video {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: oklch(0.982 0.006 246);
        padding: 12px;
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 12px;
        align-items: center;
      }

      .mini-video__frame {
        position: relative;
        aspect-ratio: 16 / 10;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--navy), oklch(0.28 0.08 252));
        display: block;
        width: 100%;
        object-fit: cover;
        overflow: hidden;
      }

      .mini-video__frame::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 0;
        height: 0;
        transform: translate(-35%, -50%);
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 11px solid oklch(0.86 0.08 220);
      }

      img.mini-video__frame::before {
        content: none;
      }

      .mini-video h3 {
        margin: 0 0 4px;
        font-size: 16px;
      }

      .mini-video p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 13px;
      }

      .quickstart {
        border: 1px solid var(--line);
        border-radius: 16px;
        background:
          linear-gradient(135deg, oklch(0.985 0.006 246), var(--surface)),
          var(--surface);
        padding: clamp(18px, 4vw, 30px);
        display: grid;
        grid-template-columns: minmax(0, 0.78fr) minmax(300px, 1.22fr);
        gap: 24px;
        align-items: center;
      }

      .quickstart h2 {
        margin-bottom: 12px;
        font-size: clamp(24px, 2.8vw, 30px);
        line-height: 1.08;
        letter-spacing: -0.016em;
      }

      .quickstart p {
        margin-bottom: 0;
        color: var(--ink-soft);
      }

      .code-window {
        border-radius: 12px;
        background: linear-gradient(135deg, var(--navy), var(--navy-deep));
        color: oklch(0.92 0.025 246);
        padding: 16px;
        overflow: auto;
        font-family:
          "Cascadia Mono",
          ui-monospace,
          SFMono-Regular,
          Menlo,
          Consolas,
          monospace;
        font-size: 12px;
        line-height: 1.7;
      }

      .code-window .green {
        color: oklch(0.84 0.09 220);
      }

      .code-window .orange {
        color: oklch(0.84 0.1 70);
      }

      .community-board {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        padding: clamp(22px, 4vw, 34px);
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(260px, 0.8fr);
        gap: clamp(24px, 5vw, 62px);
      }

      .community-column {
        display: grid;
        align-content: start;
        gap: 22px;
      }

      .community-title {
        color: var(--muted);
        font-size: 18px;
        font-weight: 900;
      }

      .community-item {
        border: 1px solid transparent;
        border-radius: 12px;
        padding: 12px 14px;
        display: grid;
        gap: 4px;
        transition:
          border-color 180ms var(--ease),
          background 180ms var(--ease),
          color 180ms var(--ease),
          transform 180ms var(--ease);
      }

      .community-item:hover {
        transform: translateX(2px);
        border-color: var(--line);
        background: var(--surface-soft);
        color: var(--accent);
      }

      .community-item h3 {
        margin: 0;
        color: var(--ink);
        font-size: 20px;
        line-height: 1.25;
        letter-spacing: -0.01em;
      }

      .community-item p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .community-item--muted {
        cursor: default;
      }

      .community-item--muted:hover {
        transform: none;
        border-color: transparent;
        background: transparent;
        color: inherit;
      }

      .community-quick {
        display: grid;
        gap: 10px;
      }

      .community-quick a,
      .community-quick div {
        border-radius: 8px;
        background: var(--surface-soft);
        padding: 14px 16px;
        color: var(--accent);
        font-size: 17px;
        font-weight: 850;
      }

      .community-quick div {
        color: var(--muted);
      }

      .community-note {
        border-top: 1px solid var(--line);
        margin-top: 2px;
        padding-top: 14px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.7;
      }

      .community-news-page {
        overflow-x: hidden;
      }

      .community-news-page .section {
        padding-top: clamp(34px, 4vw, 54px);
        padding-bottom: clamp(34px, 4vw, 54px);
      }

      .community-news-page .section--compact {
        padding-top: clamp(28px, 3.4vw, 44px);
        padding-bottom: clamp(28px, 3.4vw, 44px);
      }

      .community-news-page .page-hero + .section {
        padding-top: clamp(20px, 2.8vw, 34px);
      }

      .community-news-page .section__head {
        margin-bottom: clamp(18px, 2.4vw, 26px);
      }

      .community-news-page .section__head h2 {
        font-size: clamp(24px, 2.4vw, 30px);
        line-height: 1.12;
      }

      .community-news-hero {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        border: 0;
        border-radius: 0;
        grid-template-columns: 1fr;
        gap: 0;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: clamp(380px, 40svh, 440px);
        padding: 0;
        align-items: stretch;
        background: #ffffff;
        box-shadow: none;
      }

      .community-news-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("./atlas-generated/subpage-hero-bg.png") center / cover no-repeat;
        z-index: 0;
      }

      .community-news-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.46) 56%, rgba(255, 255, 255, 0.7)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.24) 42%, rgba(255, 255, 255, 0.08) 100%);
        z-index: 0;
      }

      .community-news-hero__copy {
        display: grid;
        min-height: 0;
        align-content: center;
        justify-items: start;
        text-align: left;
        gap: 18px;
        padding: 0;
        position: relative;
        z-index: 1;
      }

      .community-news-hero__copy::before {
        content: none;
      }

      .community-news-hero__copy::after {
        content: none;
      }

      .community-news-hero h1 {
        max-width: 18ch;
        margin: 18px 0 18px;
        font-size: var(--text-page-title);
        line-height: 1.12;
        letter-spacing: -0.016em;
      }

      .community-news-hero p {
        max-width: 560px;
        margin: 0;
        color: var(--ink-soft);
        font-size: clamp(var(--text-body-lg), 1.5vw, 18px);
        line-height: 1.72;
      }

      .community-news-eyebrow {
        width: fit-content;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface-blue);
        padding: 5px 12px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.02em;
      }

      .community-news-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 4px;
      }

      .community-hero-card {
        border: 1px solid rgba(198, 210, 218, 0.78);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.84);
        display: grid;
        min-width: 0;
        overflow: hidden;
        position: relative;
        z-index: 1;
        box-shadow: 0 18px 46px oklch(0.18 0.04 245 / 0.1);
      }

      .community-hero-card img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
        background: var(--surface-blue);
      }

      .community-hero-card__body {
        padding: clamp(18px, 2.8vw, 26px);
        display: grid;
        gap: 12px;
      }

      .community-hero-card__body strong {
        color: var(--ink);
        font-size: clamp(22px, 2.3vw, 30px);
        line-height: 1.12;
        letter-spacing: -0.02em;
      }

      .community-hero-card__body p {
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.72;
      }

      .community-hero-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .community-hero-links a {
        min-height: 40px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        color: var(--accent);
        font-size: 13px;
        font-weight: 900;
        text-align: center;
        white-space: nowrap;
      }

      .community-news-hero__chips,
      .community-news-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
      }

      .community-news-hero__chips span,
      .community-news-tags span,
      .community-news-meta span {
        width: fit-content;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface);
        padding: 4px 10px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .community-news-spotlight {
        align-self: center;
        margin-right: clamp(26px, 4vw, 64px);
        border: 1px solid rgba(198, 210, 218, 0.76);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.78);
        display: grid;
        overflow: hidden;
        position: relative;
        z-index: 1;
        box-shadow: 0 22px 58px oklch(0.18 0.04 245 / 0.12);
        backdrop-filter: blur(18px);
      }

      .community-news-spotlight img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
      }

      .community-news-spotlight__body {
        padding: clamp(18px, 3vw, 26px);
        display: grid;
        gap: 12px;
      }

      .community-news-spotlight__body span {
        width: fit-content;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface);
        padding: 4px 10px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .community-news-spotlight__body strong {
        color: var(--ink);
        font-size: clamp(22px, 2.8vw, 34px);
        line-height: 1.08;
        letter-spacing: -0.02em;
      }

      .community-news-spotlight__body p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.76;
      }

      .community-directory {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        overflow: hidden;
        box-shadow: var(--card-shadow);
      }

      .community-directory a {
        min-height: 92px;
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr) auto;
        gap: clamp(14px, 2.4vw, 28px);
        align-items: center;
        padding: clamp(16px, 2.6vw, 24px);
        color: inherit;
        transition:
          background 180ms var(--ease),
          transform 180ms var(--ease);
      }

      .community-directory a:first-child {
        border-top: 0;
      }

      .community-directory a:hover,
      .community-directory a:focus-visible {
        background: var(--surface-blue);
      }

      .community-directory strong {
        color: var(--ink);
        font-size: clamp(15px, 1.55vw, 21px);
        line-height: 1.16;
        letter-spacing: -0.012em;
      }

      .community-directory span {
        color: var(--ink-soft);
        font-size: clamp(12px, 1.25vw, 15px);
        line-height: 1.72;
      }

      .community-directory em {
        min-height: 38px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 13px;
        color: var(--accent);
        font-size: 13px;
        font-style: normal;
        font-weight: 900;
        white-space: nowrap;
      }

      .community-process {
        border-top: 1px solid var(--line);
      }

      .community-process article {
        display: grid;
        grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
        gap: clamp(14px, 2.6vw, 30px);
        border-bottom: 1px solid var(--line);
        padding: clamp(18px, 2.8vw, 28px) 0;
      }

      .community-process strong,
      .community-focus__list strong {
        color: var(--ink);
        font-size: clamp(15px, 1.55vw, 21px);
        line-height: 1.16;
        letter-spacing: -0.012em;
      }

      .community-process p {
        max-width: 68ch;
        margin: 0;
        color: var(--ink-soft);
        font-size: clamp(12px, 1.25vw, 15px);
        line-height: 1.78;
      }

      .community-focus {
        display: grid;
        grid-template-columns: minmax(300px, 0.84fr) minmax(0, 1fr);
        gap: clamp(18px, 3vw, 28px);
        align-items: stretch;
      }

      .community-focus figure {
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface-blue);
        overflow: hidden;
        box-shadow: var(--card-shadow);
      }

      .community-focus img {
        width: 100%;
        height: 100%;
        min-height: 360px;
        object-fit: cover;
        display: block;
      }

      .community-focus__list {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        overflow: hidden;
        box-shadow: var(--card-shadow);
      }

      .community-focus__list article {
        display: grid;
        gap: 8px;
        border-top: 1px solid var(--line);
        padding: clamp(18px, 2.6vw, 24px);
      }

      .community-focus__list article:first-child {
        border-top: 0;
      }

      .community-focus__list span {
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.76;
      }

      .community-link-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
      }

      .community-link-card {
        min-height: 220px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        padding: clamp(18px, 2.8vw, 24px);
        color: inherit;
        display: grid;
        align-content: space-between;
        gap: 18px;
        box-shadow: var(--card-shadow);
        transition:
          transform 220ms var(--ease),
          border-color 220ms var(--ease),
          box-shadow 220ms var(--ease);
      }

      .community-link-card:nth-child(1),
      .community-link-card:nth-child(2) {
        grid-column: span 3;
      }

      .community-link-card:nth-child(n + 3) {
        grid-column: span 2;
      }

      .community-link-card:hover,
      .community-link-card:focus-visible {
        transform: translateY(-3px);
        border-color: var(--line-strong);
        box-shadow: 0 18px 40px oklch(0.18 0.04 245 / 0.1);
      }

      .community-link-card--primary {
        background:
          radial-gradient(circle at 84% 14%, rgba(223, 79, 118, 0.12), transparent 14rem),
          radial-gradient(circle at 18% 16%, rgba(79, 99, 243, 0.14), transparent 14rem),
          linear-gradient(135deg, #ffffff 0%, #f5f7ff 58%, #fff2f6 100%);
      }

      .community-link-card h3 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(22px, 2.2vw, 30px);
        line-height: 1.08;
        letter-spacing: -0.02em;
      }

      .community-link-card p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.76;
      }

      .community-link-card span {
        width: fit-content;
        border-bottom: 2px solid currentColor;
        color: var(--accent);
        font-size: 13px;
        font-weight: 900;
      }

      .community-join-panel {
        border: 1px solid var(--line);
        border-radius: 22px;
        background:
          radial-gradient(circle at 88% 0%, rgba(223, 79, 118, 0.08), transparent 18rem),
          radial-gradient(circle at 8% 10%, rgba(79, 99, 243, 0.08), transparent 18rem),
          var(--surface);
        padding: clamp(18px, 3.4vw, 32px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
        gap: clamp(18px, 3vw, 30px);
        align-items: start;
        box-shadow: var(--card-shadow);
      }

      .community-join-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .community-join-steps article {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.76);
        padding: 18px;
        display: grid;
        gap: 10px;
      }

      .community-join-steps span,
      .community-topic-card span,
      .community-news-row span {
        width: fit-content;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface-blue);
        padding: 4px 10px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .community-join-steps h3,
      .community-topic-card h3,
      .community-news-row h3 {
        margin: 0;
        color: var(--ink);
        font-size: 20px;
        line-height: 1.18;
        letter-spacing: -0.01em;
      }

      .community-join-steps p,
      .community-topic-card p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.76;
      }

      .community-join-note {
        border: 1px solid var(--line-strong);
        border-radius: 18px;
        background: #ffffff;
        padding: 20px;
        display: grid;
        gap: 14px;
      }

      .community-join-note strong {
        color: var(--ink);
        font-size: 18px;
        line-height: 1.2;
      }

      .community-join-note ul {
        margin: 0;
        padding-left: 18px;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.82;
      }

      .community-topic-layout {
        display: grid;
        gap: 16px;
      }

      .community-topic-lead {
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--surface);
        display: grid;
        grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
        overflow: hidden;
        box-shadow: var(--card-shadow);
      }

      .community-topic-lead img {
        width: 100%;
        height: 100%;
        min-height: 280px;
        object-fit: cover;
        display: block;
        background: var(--surface-blue);
      }

      .community-topic-lead > div {
        padding: clamp(22px, 4vw, 36px);
        display: grid;
        align-content: center;
        justify-items: start;
        gap: 16px;
      }

      .community-topic-lead h3 {
        max-width: 16ch;
        margin: 0;
        color: var(--ink);
        font-size: clamp(28px, 3vw, 40px);
        line-height: 1.08;
        letter-spacing: -0.02em;
      }

      .community-topic-lead p {
        max-width: 58ch;
        margin: 0;
        color: var(--ink-soft);
        font-size: 15px;
        line-height: 1.78;
      }

      .community-topic-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .community-topic-card {
        min-height: 230px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        padding: 20px;
        display: grid;
        align-content: space-between;
        gap: 18px;
        box-shadow: var(--card-shadow);
      }

      .community-news-strip {
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--surface);
        overflow: hidden;
        box-shadow: var(--card-shadow);
      }

      .community-news-row {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr) auto;
        gap: clamp(14px, 2.6vw, 28px);
        align-items: center;
        padding: clamp(18px, 2.6vw, 24px);
        border-top: 1px solid var(--line);
      }

      .community-news-row:first-child {
        border-top: 0;
      }

      .community-news-row time {
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
      }

      .community-news-row > div {
        display: grid;
        gap: 8px;
      }

      .community-news-row a {
        min-height: 40px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        padding: 0 14px;
        color: var(--accent);
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
      }

      /* Community updates timeline (aligned with DataFoundry) */
      .updates-timeline-scroll {
        --updates-row-h: calc(28px + (300px * 9 / 16));
        --updates-row-gap: 28px;
        position: relative;
        max-height: calc(var(--updates-row-h) * 3 + var(--updates-row-gap) * 2);
        overflow-x: hidden;
        overflow-y: auto;
        /* Allow scroll chaining: when list hits top/bottom, page keeps scrolling */
        overscroll-behavior: auto;
        scrollbar-gutter: stable;
        outline: none;
      }

      .updates-timeline-scroll:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }

      .updates-timeline-scroll::after {
        content: "";
        position: sticky;
        bottom: 0;
        display: block;
        height: 2.75rem;
        margin-top: -2.75rem;
        pointer-events: none;
        background: linear-gradient(to top, var(--bg) 8%, transparent);
        z-index: 2;
      }

      @media (prefers-reduced-motion: reduce) {
        .updates-timeline-scroll::after {
          display: none;
        }
      }

      .updates-timeline {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0;
      }

      .updates-timeline__item {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: 20px 28px;
        align-items: stretch;
        padding-bottom: 28px;
      }

      .updates-timeline__item:last-child {
        padding-bottom: 0;
      }

      .updates-timeline__meta {
        display: grid;
        grid-template-columns: 14px 1fr;
        gap: 12px;
        align-items: start;
        align-self: stretch;
        padding-top: 6px;
      }

      .updates-timeline__rail {
        position: relative;
        display: flex;
        justify-content: center;
        width: 14px;
        align-self: stretch;
        min-height: 100%;
      }

      .updates-timeline__rail::before {
        content: "";
        position: absolute;
        top: 10px;
        bottom: -28px;
        left: 50%;
        width: 1px;
        background: var(--line);
        transform: translateX(-50%);
      }

      .updates-timeline__item:last-child .updates-timeline__rail::before {
        display: none;
      }

      .updates-timeline__dot {
        position: relative;
        z-index: 1;
        width: 10px;
        height: 10px;
        margin-top: 4px;
        border: 1.5px solid var(--ink-soft);
        border-radius: 999px;
        background: var(--surface);
        box-shadow: 0 0 0 3px var(--bg);
      }

      .updates-timeline__date {
        color: var(--muted);
        font-size: var(--text-caption);
        font-weight: 560;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
        line-height: 1.4;
        white-space: nowrap;
      }

      .updates-timeline__entry {
        display: grid;
        grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
        gap: 20px 24px;
        align-items: center;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        box-shadow: var(--card-shadow);
        transition:
          border-color 160ms var(--ease),
          background-color 160ms var(--ease);
      }

      .updates-timeline__entry:hover {
        border-color: var(--line-strong);
        background: var(--surface-soft);
      }

      .updates-timeline__entry:hover .updates-timeline__title {
        color: var(--ink);
      }

      .updates-timeline__entry:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }

      .updates-timeline__media {
        position: relative;
        aspect-ratio: 16 / 9;
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        background: var(--surface-soft);
      }

      .updates-timeline__media--dark {
        background: #111;
      }

      .updates-timeline__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .updates-timeline__media--dark img {
        object-fit: contain;
      }

      .updates-timeline__play {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 48px;
        height: 48px;
        border-radius: 999px;
        background: rgb(13 13 13 / 0.82);
        box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
      }

      .updates-timeline__play::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 52%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 0 8px 13px;
        border-color: transparent transparent transparent #fff;
        transform: translate(-50%, -50%);
      }

      .updates-timeline__body {
        display: grid;
        gap: 10px;
        align-content: start;
        min-width: 0;
      }

      .updates-timeline__type {
        justify-self: start;
        padding: 3px 9px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--ink-soft);
        font-size: var(--text-micro);
        font-weight: 640;
        line-height: 1.3;
      }

      .updates-timeline__title {
        margin: 0;
        font-size: 18px;
        font-weight: 640;
        letter-spacing: -0.02em;
        line-height: 1.4;
        color: var(--ink);
      }

      .community-entry-grid,
      .community-path-grid,
      .community-direction-grid {
        display: grid;
        gap: 16px;
      }

      .community-entry-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .community-entry-card,
      .community-path-card,
      .community-direction-card {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        padding: clamp(18px, 3vw, 26px);
        box-shadow: var(--card-shadow);
      }

      .community-entry-card {
        min-height: 210px;
        color: inherit;
        display: grid;
        align-content: space-between;
        gap: 18px;
        transition:
          transform 220ms var(--ease),
          border-color 220ms var(--ease),
          box-shadow 220ms var(--ease);
      }

      .community-entry-card:hover,
      .community-entry-card:focus-visible {
        transform: translateY(-3px);
        border-color: var(--line-strong);
        box-shadow: 0 18px 40px oklch(0.18 0.04 245 / 0.1);
      }

      .community-entry-card--primary {
        background:
          radial-gradient(circle at 84% 14%, rgba(223, 79, 118, 0.12), transparent 14rem),
          radial-gradient(circle at 18% 16%, rgba(79, 99, 243, 0.14), transparent 14rem),
          linear-gradient(135deg, #ffffff 0%, #f5f7ff 58%, #fff2f6 100%);
      }

      .community-entry-card span,
      .community-path-card span,
      .community-direction-card span {
        width: fit-content;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface-blue);
        padding: 4px 10px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .community-entry-card h3,
      .community-path-card h3,
      .community-direction-card h3 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(20px, 2vw, 26px);
        line-height: 1.12;
        letter-spacing: -0.01em;
      }

      .community-entry-card p,
      .community-path-card p,
      .community-direction-card p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.78;
      }

      .community-path-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        counter-reset: community-path;
      }

      .community-path-card {
        min-height: 230px;
        display: grid;
        align-content: space-between;
        gap: 18px;
      }

      .community-direction-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .community-direction-card {
        min-height: 240px;
        display: grid;
        align-content: space-between;
        gap: 18px;
      }

      .community-direction-card--wide {
        grid-column: span 3;
        grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1fr);
        align-items: center;
        min-height: 0;
        padding: 0;
        overflow: hidden;
      }

      .community-direction-card--wide img {
        width: 100%;
        height: 100%;
        min-height: 260px;
        object-fit: cover;
        display: block;
      }

      .community-direction-card--wide div {
        padding: clamp(22px, 4vw, 34px);
        display: grid;
        gap: 14px;
      }

      .community-news-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
        gap: 18px;
        align-items: start;
      }

      .community-news-lead {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--surface);
        overflow: hidden;
        box-shadow: var(--card-shadow);
      }

      .community-news-lead img {
        width: 100%;
        aspect-ratio: 16 / 8.8;
        object-fit: cover;
        display: block;
      }

      .community-news-lead__body {
        padding: 22px;
        display: grid;
        gap: 14px;
      }

      .community-news-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .community-news-meta span {
        background: var(--surface-blue);
      }

      .community-news-lead h3 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(26px, 3vw, 38px);
        line-height: 1.1;
        letter-spacing: -0.02em;
      }

      .community-news-lead p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 16px;
        line-height: 1.82;
      }

      .community-news-rail {
        display: grid;
        gap: 14px;
      }

      .community-news-rail__box {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        padding: 18px;
        display: grid;
        gap: 14px;
        box-shadow: var(--card-shadow);
      }

      .community-news-listing {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 14px;
      }

      .community-news-listing li {
        display: grid;
        gap: 6px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
      }

      .community-news-listing li:first-child {
        border-top: 0;
        padding-top: 0;
      }

      .community-news-listing span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
      }

      .community-news-listing strong {
        color: var(--ink);
        font-size: 16px;
        line-height: 1.25;
      }

      .community-news-listing p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 13px;
        line-height: 1.7;
      }

      .community-article-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .community-article-grid--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .community-article-card {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        overflow: hidden;
        box-shadow: var(--card-shadow);
        display: grid;
      }

      .community-article-card img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
      }

      .community-article-card__body {
        padding: 18px;
        display: grid;
        gap: 12px;
      }

      .community-article-card h3 {
        margin: 0;
        color: var(--ink);
        font-size: 20px;
        line-height: 1.18;
        letter-spacing: -0.01em;
      }

      .community-article-card p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.78;
      }

      .community-article-card a {
        width: fit-content;
        color: var(--accent);
        font-size: 13px;
        font-weight: 900;
      }

      .community-news-banner {
        border: 1px solid var(--line);
        border-radius: 18px;
        background:
          radial-gradient(circle at 80% 0%, rgba(223, 79, 118, 0.08), transparent 18rem),
          radial-gradient(circle at 12% 14%, rgba(79, 99, 243, 0.08), transparent 18rem),
          var(--surface);
        padding: clamp(20px, 4vw, 32px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: center;
        box-shadow: var(--card-shadow);
      }

      .community-news-banner h2 {
        margin: 10px 0 10px;
        color: var(--ink);
        font-size: clamp(24px, 3vw, 34px);
        line-height: 1.1;
        letter-spacing: -0.02em;
      }

      .community-news-banner p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 15px;
        line-height: 1.75;
      }

      .community-news-banner__actions {
        display: grid;
        gap: 10px;
        min-width: 220px;
      }

      @media (max-width: 980px) {
        .community-news-hero,
        .community-news-layout,
        .community-news-banner,
        .community-join-panel,
        .community-topic-lead,
        .community-direction-card--wide {
          grid-template-columns: 1fr;
        }

        .community-news-hero {
          padding: 0;
        }

        .community-news-spotlight {
          margin: 0 clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px);
        }

        .community-entry-grid,
        .community-path-grid,
        .community-link-grid,
        .community-topic-grid,
        .community-article-grid--compact {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .community-link-card,
        .community-link-card:nth-child(1),
        .community-link-card:nth-child(2),
        .community-link-card:nth-child(n + 3) {
          grid-column: auto;
        }

        .community-direction-grid {
          grid-template-columns: 1fr 1fr;
        }

        .community-direction-card--wide {
          grid-column: span 2;
        }

        .community-news-banner__actions {
          min-width: 0;
        }

        .updates-timeline__item {
          grid-template-columns: 6.5rem minmax(0, 1fr);
          gap: 16px 20px;
        }

        .updates-timeline-scroll {
          --updates-row-h: calc(24px + (240px * 9 / 16));
          --updates-row-gap: 20px;
        }

        .updates-timeline__entry {
          grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
          gap: 16px;
          padding: 12px;
        }

        .updates-timeline__title {
          font-size: 16px;
        }

        .community-news-row {
          grid-template-columns: 120px minmax(0, 1fr);
        }

        .community-directory a,
        .community-process article,
        .community-focus {
          grid-template-columns: 1fr;
        }

        .community-news-row a {
          grid-column: 2;
          width: fit-content;
        }
      }

      @media (max-width: 620px) {
        .community-news-hero {
          min-height: 0;
          border-radius: 0;
          gap: 0;
        }

        .community-news-hero__copy {
          padding: 0;
        }

        .community-news-hero h1 {
          max-width: 100%;
          font-size: var(--text-page-title);
        }

        .community-news-hero__actions,
        .community-news-hero__actions .button {
          width: 100%;
        }

        .community-news-spotlight {
          margin: 0 20px 24px;
          border-radius: 18px;
        }

        .community-entry-grid,
        .community-path-grid,
        .community-direction-grid,
        .community-link-grid,
        .community-join-steps,
        .community-topic-grid,
        .community-article-grid,
        .community-article-grid--compact {
          grid-template-columns: 1fr;
        }

        .community-hero-links {
          grid-template-columns: 1fr;
        }

        .community-link-card,
        .community-topic-card {
          min-height: 0;
        }

        .community-topic-lead img {
          min-height: 220px;
        }

        .community-news-row {
          grid-template-columns: 1fr;
        }

        .updates-timeline__item {
          grid-template-columns: 1fr;
          gap: 10px;
          padding-bottom: 24px;
          padding-left: 22px;
          position: relative;
        }

        .updates-timeline-scroll {
          --updates-row-h: calc(24px + min(72vw, 280px) * 9 / 16 + 4.75rem);
          --updates-row-gap: 24px;
          max-height: min(
            calc(var(--updates-row-h) * 3 + var(--updates-row-gap) * 2),
            70vh
          );
        }

        .updates-timeline__meta {
          grid-template-columns: 1fr;
          gap: 0;
          padding-top: 0;
        }

        .updates-timeline__rail {
          position: absolute;
          left: 0;
          top: 4px;
          bottom: 0;
          width: 14px;
          min-height: auto;
        }

        .updates-timeline__rail::before {
          top: 12px;
          bottom: 0;
        }

        .updates-timeline__entry {
          grid-template-columns: 1fr;
          gap: 12px;
          padding: 12px;
        }

        .updates-timeline__title {
          font-size: 16px;
        }

        .community-directory a {
          min-height: 0;
        }

        .community-directory em {
          width: fit-content;
        }

        .community-focus img {
          min-height: 240px;
        }

        .community-news-row a {
          grid-column: auto;
          width: fit-content;
        }

        .community-direction-card--wide {
          grid-column: auto;
        }

        .community-entry-card,
        .community-path-card,
        .community-direction-card {
          min-height: 0;
          border-radius: 16px;
        }
      }

      .about-page .page-hero {
        grid-template-columns: 1fr;
        min-height: clamp(360px, 38svh, 420px);
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }

      .about-page .page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("./atlas-generated/subpage-hero-bg.png") center / cover no-repeat;
        z-index: 0;
      }

      .about-page .page-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.46) 58%, rgba(255, 255, 255, 0.76)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.24) 42%, rgba(255, 255, 255, 0.08) 100%);
        z-index: 0;
      }

      .about-page .page-hero__copy {
        align-items: center;
        text-align: center;
        position: relative;
        z-index: 1;
      }

      .about-page .page-hero h1 {
        max-width: 16ch;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 16px;
      }

      .about-page .page-hero p {
        max-width: 40ch;
        margin-left: auto;
        margin-right: auto;
      }

      .about-page .page-hero__visual {
        display: none;
      }

      .about-brief-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(14px, 1.8vw, 22px);
        margin-top: clamp(20px, 3vw, 32px);
      }

      .about-brief-grid .surface-card {
        border: 1px solid var(--line);
        border-radius: 16px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 255, 0.88) 58%, rgba(255, 243, 247, 0.82)),
          var(--surface);
        box-shadow: var(--card-shadow);
        padding: clamp(18px, 2.4vw, 24px);
        display: grid;
        gap: 10px;
        align-content: start;
        min-width: 0;
      }

      .about-brief-grid .surface-card strong {
        display: block;
        color: var(--ink);
        font-size: clamp(16px, 1.4vw, 18px);
        line-height: 1.3;
      }

      .about-brief-grid .surface-card span {
        display: block;
        color: var(--ink-soft);
        font-size: clamp(13px, 1.2vw, 14px);
        line-height: 1.68;
      }

      .about-page #background .section__head h2 {
        text-wrap: pretty;
      }

      .about-head__term {
        white-space: nowrap;
      }

      .contact-band--about {
        grid-template-columns: minmax(0, 1.18fr) minmax(240px, 0.82fr);
        align-items: stretch;
        gap: clamp(20px, 3vw, 32px);
        padding: clamp(20px, 3.2vw, 28px);
      }

      .about-contact-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
        min-width: 0;
      }

      .contact-card--about {
        grid-column: 1 / -1;
        grid-template-columns: clamp(84px, 8vw, 104px) minmax(0, 1fr);
        gap: clamp(18px, 3vw, 28px);
        min-width: 0;
      }

      .contact-card--about .contact-card__mark {
        width: clamp(84px, 8vw, 104px);
        height: clamp(84px, 8vw, 104px);
        aspect-ratio: 1;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        padding: clamp(10px, 1.4vw, 14px);
        display: grid;
        place-items: center;
        flex: none;
        justify-self: start;
      }

      .contact-card--about .contact-card__mark img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }

      @media (min-width: 900px) {
        .about-contact-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      .about-contact-grid .contact-link {
        min-width: 0;
      }

      .about-contact-brand {
        display: grid;
        align-items: stretch;
        justify-items: center;
        align-self: stretch;
        min-width: 0;
      }

      .about-contact-brand__panel {
        width: 100%;
        max-width: 360px;
        height: 100%;
        align-content: center;
        border: 1px solid var(--line);
        border-radius: 16px;
        background:
          radial-gradient(circle at 82% 18%, rgba(138, 99, 255, 0.1), transparent 14rem),
          radial-gradient(circle at 18% 82%, rgba(79, 99, 243, 0.08), transparent 12rem),
          rgba(255, 255, 255, 0.84);
        padding: clamp(28px, 4vw, 40px);
        display: grid;
        justify-items: center;
        text-align: center;
        gap: 14px;
        box-shadow: var(--card-shadow);
        position: relative;
        overflow: hidden;
      }

      .about-contact-brand__qr {
        width: clamp(132px, 16vw, 168px);
      }

      .about-contact-brand__qr .qr-placeholder {
        width: 100%;
        border-radius: 16px;
        box-shadow:
          0 0 0 1px rgba(79, 99, 243, 0.08),
          0 18px 36px rgba(79, 99, 243, 0.1);
      }

      .about-contact-brand__panel strong {
        font-size: clamp(24px, 2.8vw, 32px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: var(--ink);
      }

      .about-contact-brand__panel p {
        margin: 0;
        max-width: 24ch;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.72;
      }

      .about-contact-brand__tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
      }

      .about-contact-brand__tags span {
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 255, 0.9));
        padding: 5px 12px;
        color: var(--brand-blue);
        font-size: 12px;
        font-weight: 850;
      }

      .about-cta {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        padding: clamp(22px, 4vw, 32px);
        box-shadow: var(--card-shadow);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
      }

      .about-cta h2 {
        margin-bottom: 10px;
        font-size: clamp(26px, 3vw, 40px);
        line-height: 1.08;
      }

      .about-cta p {
        max-width: 48ch;
        margin: 0;
        color: var(--ink-soft);
      }

      .community-page .page-hero {
        margin-bottom: 0;
      }

      .community-hero-panel {
        grid-template-columns: 1fr;
        gap: 0;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: clamp(380px, 40svh, 440px);
      }

      .community-hero-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("./atlas-generated/subpage-hero-bg.png") center / cover no-repeat;
        z-index: 0;
      }

      .community-hero-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.46) 58%, rgba(255, 255, 255, 0.76)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.24) 42%, rgba(255, 255, 255, 0.08) 100%);
        z-index: 0;
      }

      .community-hero-panel__copy {
        grid-column: 1;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      .community-hero-panel__copy::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("./atlas-generated/subpage-hero-bg.png") center / cover no-repeat;
        z-index: -2;
      }

      .community-hero-panel__copy::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.42) 58%, rgba(255, 255, 255, 0.74)),
          linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.22) 42%, rgba(255, 255, 255, 0.08) 100%);
        z-index: -1;
      }

      .community-hero-panel h1 {
        max-width: 14ch;
        letter-spacing: 0;
      }

      .community-brief {
        display: none;
      }

      .community-brief span,
      .community-update__meta span,
      .community-pulse-card span {
        width: fit-content;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface);
        padding: 4px 10px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
      }

      .community-brief strong {
        color: var(--ink);
        font-size: clamp(22px, 2.3vw, 30px);
        line-height: 1.12;
        letter-spacing: -0.012em;
      }

      .community-brief p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.72;
      }

      .community-brief a {
        width: fit-content;
        min-height: 40px;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        padding: 0 13px;
        color: var(--ink);
        font-size: 13px;
        font-weight: 900;
      }

      .community-update {
        border: 1px solid var(--line);
        border-radius: 18px;
        background:
          linear-gradient(135deg, #ffffff 0%, #f5f7ff 58%, #fff4f8 100%),
          var(--surface);
        padding: clamp(20px, 4vw, 34px);
        display: grid;
        grid-template-columns: 142px minmax(0, 1fr);
        gap: clamp(18px, 3.2vw, 34px);
        box-shadow: 0 16px 34px oklch(0.18 0.04 245 / 0.08);
      }

      .community-update__date {
        border-right: 1px solid var(--line);
        padding-right: 24px;
        display: grid;
        align-content: start;
        gap: 4px;
      }

      .community-update__date span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 900;
      }

      .community-update__date strong {
        color: var(--ink);
        font-size: clamp(34px, 3.5vw, 42px);
        line-height: 1;
        letter-spacing: 0;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
        font-variant-numeric: tabular-nums;
      }

      .community-update__body {
        display: grid;
        gap: 14px;
      }

      .community-update__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .community-update h3 {
        max-width: 760px;
        margin: 0;
        color: var(--ink);
        font-size: clamp(25px, 3vw, 36px);
        line-height: 1.12;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .community-update p {
        max-width: 820px;
        margin: 0;
        color: var(--ink-soft);
        font-size: 16px;
        line-height: 1.82;
      }

      .community-update__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 4px;
      }

      .community-pulse-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.95fr 0.95fr;
        gap: 14px;
      }

      .community-pulse-card {
        min-height: 230px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.78);
        padding: clamp(20px, 3vw, 26px);
        display: grid;
        align-content: space-between;
        gap: 18px;
      }

      .community-pulse-card--active {
        background:
          linear-gradient(135deg, rgba(79, 99, 243, 0.12), rgba(138, 99, 255, 0.1), rgba(223, 79, 118, 0.12)),
          var(--surface);
      }

      .community-pulse-card h3 {
        margin: auto 0 10px;
        color: var(--ink);
        font-size: clamp(22px, 2.8vw, 32px);
        line-height: 1.1;
        letter-spacing: 0;
      }

      .community-pulse-card p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.76;
      }

      .community-board--focused {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .contact-band {
        border: 1px solid var(--line);
        border-radius: 16px;
        background:
          linear-gradient(135deg, var(--navy), var(--navy-deep)),
          var(--navy);
        color: var(--surface);
        padding: clamp(22px, 4vw, 34px);
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
        gap: clamp(22px, 4vw, 44px);
        align-items: center;
      }

      .contact-band h2 {
        margin-bottom: 12px;
        font-size: clamp(30px, 4vw, 48px);
        line-height: 1.08;
        letter-spacing: -0.025em;
      }

      .contact-band p {
        max-width: 58ch;
        margin-bottom: 0;
        color: oklch(0.88 0.02 246);
      }

      .contact-list {
        display: grid;
        gap: 12px;
      }

      .contact-card {
        border: 1px solid oklch(0.82 0.03 240 / 0.46);
        border-radius: 12px;
        background: oklch(0.998 0.002 240 / 0.1);
        padding: 16px;
        display: grid;
        grid-template-columns: 132px 1fr;
        gap: 18px;
        align-items: center;
      }

      .qr-placeholder {
        width: 132px;
        aspect-ratio: 1;
        border: 1px solid oklch(0.82 0.03 240 / 0.72);
        border-radius: 10px;
        background:
          linear-gradient(90deg, oklch(0.998 0.001 246 / 0.12) 1px, transparent 1px),
          linear-gradient(180deg, oklch(0.998 0.001 246 / 0.12) 1px, transparent 1px),
          oklch(0.998 0.001 246 / 0.06);
        background-size: 12px 12px;
        display: grid;
        place-items: center;
        color: oklch(0.86 0.025 246);
        font-size: 13px;
        font-weight: 850;
        text-align: center;
      }

      img.qr-placeholder {
        display: block;
        object-fit: cover;
      }

      .contact-info {
        display: grid;
        gap: 10px;
      }

      .contact-info h3 {
        margin-bottom: 2px;
        color: var(--surface);
        font-size: 20px;
        letter-spacing: -0.015em;
      }

      .contact-row {
        border-top: 1px solid oklch(0.82 0.03 240 / 0.36);
        padding-top: 9px;
        display: grid;
        grid-template-columns: 82px 1fr;
        gap: 12px;
        color: oklch(0.84 0.025 246);
        font-size: 14px;
      }

      .contact-row strong {
        color: var(--surface);
      }

      .contact-link {
        border: 1px solid oklch(0.82 0.03 240 / 0.46);
        border-radius: 10px;
        background: oklch(0.998 0.002 240 / 0.1);
        padding: 14px 16px;
        display: grid;
        gap: 4px;
        transition:
          transform 180ms var(--ease),
          border-color 180ms var(--ease),
          background 180ms var(--ease);
      }

      .contact-link:hover {
        transform: translateY(-1px);
        border-color: var(--accent-soft);
        background: oklch(0.998 0.001 246 / 0.14);
      }

      .contact-link strong {
        color: var(--surface);
        font-size: 16px;
      }

      .contact-link span {
        color: oklch(0.84 0.025 246);
        font-size: 13px;
      }

      .footer {
        border-top: 1px solid rgba(207, 214, 234, 0.78);
        width: 100%;
        margin: 0;
        background: #f5f7fb;
        color: var(--ink-soft);
        font-size: 14px;
      }

      .footer__inner {
        padding-inline: 0;
        padding-top: clamp(36px, 4.5vw, 52px);
        padding-bottom: 0;
      }

      .footer__head {
        width: 100%;
        margin-inline: 0;
        display: grid;
        gap: 10px;
        padding-bottom: clamp(22px, 3vw, 30px);
        margin-bottom: clamp(22px, 3vw, 30px);
        border-bottom: 1px solid rgba(207, 214, 234, 0.62);
      }

      .footer__logo {
        min-height: 0;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--ink);
        font-size: clamp(18px, 2.2vw, 22px);
        font-weight: 900;
      }

      .footer__tagline {
        max-width: 56ch;
        margin: 0;
        color: var(--muted);
        font-size: clamp(13px, 1.4vw, 14px);
        line-height: 1.72;
      }

      .footer__body {
        width: 100%;
        margin-inline: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(28px, 4vw, 56px);
        align-items: start;
      }

      .footer__nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(108px, 1fr));
        gap: clamp(18px, 2.8vw, 36px);
      }

      .footer__group {
        display: grid;
        align-content: start;
        gap: 8px;
      }

      .footer__group h2,
      .footer__contact h2 {
        margin: 0 0 10px;
        color: var(--ink);
        font-size: clamp(14px, 1.5vw, 15px);
        font-weight: 850;
        line-height: 1.3;
        letter-spacing: 0;
      }

      .footer__group a {
        display: block;
        padding: 3px 0;
        color: var(--muted);
        font-size: clamp(13px, 1.35vw, 14px);
        line-height: 1.55;
        transition: color 180ms var(--ease);
      }

      .footer__group a:hover {
        color: var(--brand-blue);
        transform: none;
      }

      .footer__contact {
        display: grid;
        justify-items: center;
        gap: 10px;
        min-width: 148px;
        text-align: center;
      }

      .footer__contact img {
        width: 132px;
        aspect-ratio: 1;
        border: 1px solid rgba(207, 214, 234, 0.82);
        border-radius: 10px;
        background: #ffffff;
        object-fit: cover;
      }

      .footer__contact span {
        color: var(--muted);
        font-size: 13px;
      }

      .footer__beian {
        margin-top: clamp(26px, 3.6vw, 36px);
        padding: 14px 0 22px;
        border-top: 1px solid rgba(207, 214, 234, 0.62);
      }

      .footer__beian-copy {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        gap: 2px 10px;
        margin: 0;
        color: #5c6873;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.01em;
      }

      .footer__beian-link {
        color: #5c6873;
        transition: color 180ms var(--ease);
      }

      .footer__beian-link:hover {
        color: var(--brand-blue);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
      }

      .footer__beian-link:focus-visible {
        outline: 2px solid var(--brand-blue);
        outline-offset: 3px;
        border-radius: 3px;
      }

      .reveal {
        transform: translateY(18px);
        transition: transform 620ms var(--ease);
      }

      .reveal.is-visible {
        transform: translateY(0);
      }

      .official-home {
        overflow: hidden;
      }

      .official-home .section {
        padding-left: 0;
        padding-right: 0;
      }

      .official-hero {
        /* Full-bleed stage; copy/portals stay on the site column */
        width: 100%;
        max-width: none;
        min-height: clamp(520px, 72svh, 720px);
        margin-inline: 0;
        padding: 0;
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 0;
        align-items: stretch;
        background: #ffffff;
        overflow-x: clip;
        overflow-y: visible;
      }

      .official-hero + .section {
        padding-top: clamp(30px, 4vw, 52px);
      }

      .official-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.74) 34%, rgba(255, 255, 255, 0.2) 61%, rgba(255, 255, 255, 0.04) 100%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.28) 66%, rgba(255, 255, 255, 0.78) 100%);
        z-index: 1;
        pointer-events: none;
      }

      .official-hero__stage {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
        background: url("./hero-bg-home-official.png") 62% center / cover no-repeat;
      }

      .official-hero__svg {
        width: 100%;
        height: 100%;
        display: none;
      }

      .hero-flow {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.9;
        stroke-dasharray: 0 0;
      }

      .hero-flow--back {
        stroke: rgba(79, 99, 243, 0.36);
        stroke-width: 10;
      }

      .hero-flow--front {
        stroke: url(#heroStream);
        stroke-width: 12;
        filter: drop-shadow(0 10px 18px rgba(79, 99, 243, 0.12));
        stroke-dasharray: 28 20;
        animation: heroFlowDrift 16s linear infinite;
      }

      .hero-flow--low {
        stroke: rgba(223, 79, 118, 0.3);
        stroke-width: 8;
        stroke-dasharray: 18 18;
        animation: heroFlowDrift 20s linear infinite reverse;
      }

      .hero-bridge,
      .hero-spark {
        opacity: 0.96;
        transform-origin: center;
      }

      .hero-bridge {
        animation: heroFloat 11s var(--ease) infinite alternate;
      }

      .hero-bridge--left {
        animation-delay: -2s;
      }

      .hero-bridge--center {
        animation-delay: -4s;
      }

      .hero-bridge--right {
        animation-delay: -6s;
      }

      .hero-spark {
        animation: heroSpark 8s ease-in-out infinite alternate;
      }

      .hero-spark--bottom {
        animation-delay: -3s;
      }

      .official-hero__content {
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
        width: var(--site-width);
        max-width: 100%;
        margin-inline: auto;
        display: grid;
        justify-items: start;
        align-content: center;
        text-align: left;
        justify-self: center;
        align-self: center;
        position: relative;
        z-index: 2;
        padding:
          clamp(72px, 7vw, 104px)
          0
          clamp(72px, 8vw, 96px);
        margin-top: clamp(0px, 0.5vw, 8px);
        border: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        box-sizing: border-box;
      }

      .official-hero .news-strip,
      .official-hero .badge-row {
        display: none;
      }

      .news-strip {
        width: fit-content;
        max-width: 100%;
        min-height: 42px;
        margin-bottom: 18px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.78);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 5px 7px 5px 5px;
        color: var(--ink-soft);
        box-shadow: 0 12px 28px rgba(24, 34, 44, 0.06);
      }

      .news-strip span {
        min-height: 30px;
        border-radius: 999px;
        background: var(--accent);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 900;
      }

      .news-strip strong {
        color: var(--ink);
        font-size: 14px;
      }

      .news-strip em {
        color: var(--muted);
        font-size: 13px;
        font-style: normal;
        font-weight: 760;
      }

      .official-hero__visual {
        display: none;
      }
      .official-hero h1 {
        max-width: min(100%, 13em);
        margin: 0 0 18px;
        font-size: var(--text-display);
        line-height: 1.14;
        letter-spacing: -0.02em;
        text-wrap: balance;
        text-shadow: 0 16px 34px rgba(255, 255, 255, 0.72);
      }

      .hero__copy {
        max-width: 34ch;
        font-size: clamp(var(--text-body-lg), 1.3vw, 18px);
        line-height: 1.78;
        color: rgba(34, 47, 59, 0.92);
        text-shadow: 0 10px 24px rgba(255, 255, 255, 0.78);
      }

      .hero-signals {
        margin-top: 18px;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
      }

      .hero-signals span {
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid rgba(198, 210, 218, 0.88);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.74);
        color: var(--brand-blue);
        backdrop-filter: blur(8px);
        display: inline-flex;
        align-items: center;
        font-size: 13px;
        font-weight: 860;
        box-shadow: 0 8px 18px rgba(24, 34, 44, 0.04);
      }

      .hero-portals {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        width: 100%;
        max-width: none;
        min-height: 72px;
        margin-inline: 0;
        transform: none;
        /* Keep portal links on the site column; glass runs full-bleed behind */
        padding: 0 max(var(--page-gutter), calc((100% - var(--site-width)) / 2));
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        gap: 0;
        overflow: visible;
        box-sizing: border-box;
      }

      .hero-portals::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        border-top: 1px solid rgba(207, 214, 234, 0.38);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.22));
        -webkit-backdrop-filter: blur(30px) saturate(1.65);
        backdrop-filter: blur(30px) saturate(1.65);
        box-shadow:
          0 18px 44px rgba(24, 34, 44, 0.045),
          inset 0 1px 0 rgba(255, 255, 255, 0.58);
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent 0,
          rgba(0, 0, 0, 0.35) clamp(48px, 6vw, 96px),
          #000 clamp(120px, 14vw, 240px),
          #000 calc(100% - clamp(120px, 14vw, 240px)),
          rgba(0, 0, 0, 0.35) calc(100% - clamp(48px, 6vw, 96px)),
          transparent 100%
        );
        mask-image: linear-gradient(
          90deg,
          transparent 0,
          rgba(0, 0, 0, 0.35) clamp(48px, 6vw, 96px),
          #000 clamp(120px, 14vw, 240px),
          #000 calc(100% - clamp(120px, 14vw, 240px)),
          rgba(0, 0, 0, 0.35) calc(100% - clamp(48px, 6vw, 96px)),
          transparent 100%
        );
      }

      .hero-portals a {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 72px;
        padding: 14px 16px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 4px;
        color: var(--ink);
        text-align: center;
        position: relative;
        z-index: 1;
        transition:
          background 180ms var(--ease),
          color 180ms var(--ease);
      }

      .hero-portals a:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 18px;
        right: 0;
        bottom: 18px;
        width: 1px;
        background: rgba(207, 214, 234, 0.55);
      }

      .hero-portals strong {
        font-size: 15px;
        line-height: 1.25;
        font-weight: 860;
      }

      .hero-portals span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
        font-weight: 720;
      }

      .hero-portals a:hover {
        background: rgba(255, 255, 255, 0.48);
      }

      .hero-portals a:hover strong {
        color: var(--brand-blue);
      }

      .official-home .official-hero__content {
        width: var(--site-width);
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 0;
        padding-left: var(--hero-copy-inset);
        box-sizing: border-box;
      }

      @keyframes heroFloat {
        0% {
          transform: translate3d(0, 0, 0);
        }
        100% {
          transform: translate3d(0, -10px, 0);
        }
      }

      .official-hero__content .title-line {
        display: block;
        white-space: normal;
        text-wrap: balance;
      }

      @keyframes heroFlowDrift {
        from {
          stroke-dashoffset: 0;
        }
        to {
          stroke-dashoffset: -480;
        }
      }

      @keyframes heroColorDrift {
        0% {
          filter: saturate(1) brightness(1);
        }
        100% {
          filter: saturate(1.08) brightness(1.015);
        }
      }

      @keyframes heroPlaneDrift {
        0% {
          transform: translate3d(-1.5%, 1%, 0) rotate(-1deg) scale(1);
        }
        100% {
          transform: translate3d(2%, -1.5%, 0) rotate(1.2deg) scale(1.035);
        }
      }

      @keyframes heroBlockPulse {
        0% {
          transform: translate3d(0, 0, 0) scale(1);
          opacity: 0.9;
        }
        100% {
          transform: translate3d(-10px, 8px, 0) scale(1.045);
          opacity: 1;
        }
      }

      @keyframes heroGlowFloat {
        0% {
          transform: translate3d(0, 0, 0) scale(1);
          opacity: 0.58;
        }
        100% {
          transform: translate3d(-24px, 18px, 0) scale(1.08);
          opacity: 0.78;
        }
      }

      .prompt-card {
        border-top: 1px solid var(--line);
        background: #f7fafb;
        color: var(--ink-soft);
      }

      .prompt-card summary {
        min-height: 44px;
        cursor: pointer;
        padding: 11px 16px;
        color: var(--accent);
        font-size: 13px;
        font-weight: 900;
      }

      .prompt-card p {
        margin: 0;
        padding: 0 16px 16px;
        color: var(--ink-soft);
        font-size: 13px;
        line-height: 1.76;
      }

      .quick-panel--official {
        background: transparent;
        border-top: 0;
      }

      .official-links {
        padding-top: 0;
      }

      .section__head--split {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.64fr);
        align-items: end;
        gap: clamp(18px, 4vw, 52px);
      }

      .official-architecture {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
        gap: clamp(10px, 1.2vw, 14px);
        align-items: stretch;
      }

      .official-architecture--compact {
        margin-top: clamp(22px, 4vw, 36px);
        gap: clamp(10px, 1.2vw, 14px);
        grid-template-columns: 1fr;
      }

      @media (min-width: 560px) {
        .official-architecture--compact {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (min-width: 880px) {
        .official-architecture--compact {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      @media (min-width: 1100px) {
        .official-architecture--compact {
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
      }

      .arch-column {
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.86);
        min-height: 280px;
        padding: 20px;
        display: grid;
        align-content: space-between;
        gap: 18px;
      }

      .official-architecture--compact .arch-column {
        min-height: 0;
        padding: clamp(12px, 1.4vw, 18px);
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 0.9vw, 12px);
        align-items: stretch;
      }

      .official-architecture--compact .arch-column__image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 11;
        flex-shrink: 0;
        object-fit: contain;
        object-position: center;
      }

      .arch-column__image {
        width: 100%;
        aspect-ratio: 16 / 9;
        border: 1px solid var(--line);
        border-radius: 12px;
        display: block;
        object-fit: cover;
        object-position: center;
        background: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
      }

      .arch-column--core {
        background:
          linear-gradient(135deg, rgba(79, 99, 243, 0.1), rgba(138, 99, 255, 0.1), rgba(223, 79, 118, 0.07)),
          #ffffff;
        box-shadow: inset 0 0 0 1px rgba(79, 99, 243, 0.09);
      }

      .official-architecture--compact .arch-column--core {
        border-color: var(--line);
        background: rgba(255, 255, 255, 0.86);
        box-shadow: var(--card-shadow);
      }

      .arch-column--entry,
      .arch-column--output {
        background: linear-gradient(180deg, #ffffff, #f6f8ff);
      }

      .arch-column strong {
        color: var(--ink);
        font-size: clamp(20px, 2.2vw, 30px);
        line-height: 1.16;
      }

      .official-architecture--compact .arch-column strong {
        font-size: clamp(15px, 1.6vw, 22px);
        line-height: 1.22;
        letter-spacing: -0.012em;
      }

      .official-architecture--compact .arch-column span {
        font-size: clamp(12px, 1.05vw, 14px);
        line-height: 1.35;
      }

      .arch-column p {
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.72;
      }

      .official-architecture--compact .arch-column p {
        font-size: clamp(12px, 1.04vw, 14px);
        line-height: 1.58;
      }

      .home-capability-showcase {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(14px, 2vw, 24px);
        align-items: start;
      }

      @media (min-width: 680px) {
        .home-capability-showcase {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          align-items: stretch;
        }
      }

      @media (min-width: 960px) {
        .home-capability-showcase {
          grid-template-columns: minmax(0, 1.06fr) minmax(380px, 0.94fr);
        }
      }

      @media (max-width: 679px) {
        .home-capability-accordion {
          padding-left: clamp(14px, 3.5vw, 20px);
          border-top: 1px solid var(--line);
          padding-top: clamp(12px, 2vw, 18px);
        }

        .home-capability-panel__progress {
          left: calc(-1 * clamp(14px, 3.5vw, 20px) + 5px);
        }
      }

      .section:has(#why) .home-capability-showcase {
        gap: clamp(24px, 2.2vw, 34px);
      }

      .home-capability-visual {
        position: relative;
        min-height: 0;
        aspect-ratio: 16 / 9;
        border: 1px solid rgba(214, 220, 236, 0.9);
        border-radius: 20px;
        background: #ffffff;
        box-shadow: none;
        overflow: hidden;
        padding: clamp(12px, 1vw, 16px);
        display: grid;
        place-items: center;
      }

      @media (min-width: 680px) {
        .home-capability-visual {
          height: 100%;
          min-height: clamp(360px, 34vw, 500px);
          aspect-ratio: auto;
        }
      }

      .home-capability-visual__image {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
        filter: none;
      }

      .home-capability-accordion {
        align-self: stretch;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        padding-left: clamp(16px, 2.2vw, 28px);
        border-left: 0;
        display: grid;
      }

      .home-capability-panel {
        position: relative;
        border-bottom: 1px solid rgba(207, 214, 234, 0.78);
        padding: 0;
      }

      .home-capability-panel__progress {
        position: absolute;
        left: calc(-1 * clamp(16px, 2.2vw, 28px) + 6px);
        top: 0;
        bottom: 0;
        width: 3px;
        pointer-events: none;
      }

      .home-capability-panel__progress-track,
      .home-capability-panel__progress-fill {
        position: absolute;
        inset: 0;
        border-radius: 999px;
      }

      .home-capability-panel__progress-track {
        background: rgba(207, 214, 234, 0.72);
      }

      .home-capability-panel__progress-fill {
        background: linear-gradient(180deg, #6f84ff 0%, var(--brand-blue) 100%);
        transform-origin: top center;
        transform: scaleY(0);
      }

      .home-capability-panel.is-carousel-active .home-capability-panel__progress-fill {
        animation: home-capability-progress var(--capability-duration, 4200ms) linear forwards;
      }

      .home-capability-panel.is-carousel-active.is-carousel-paused .home-capability-panel__progress-fill {
        animation-play-state: paused;
      }

      @keyframes home-capability-progress {
        from {
          transform: scaleY(0);
        }

        to {
          transform: scaleY(1);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .home-capability-panel.is-carousel-active .home-capability-panel__progress-fill {
          animation: none;
          transform: scaleY(1);
        }
      }

      .home-capability-panel:first-child {
        border-top: 0;
      }

      .home-capability-panel summary {
        min-height: clamp(60px, 7vw, 74px);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: clamp(12px, 1.5vw, 18px);
        align-items: center;
        cursor: pointer;
        list-style: none;
        padding: clamp(14px, 1.8vw, 20px) clamp(14px, 2vw, 28px);
      }

      .home-capability-panel summary::-webkit-details-marker {
        display: none;
      }

      .home-capability-panel summary::after {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--ink-soft);
        border-bottom: 2px solid var(--ink-soft);
        transform: rotate(45deg);
        transition: transform 180ms var(--ease);
      }

      .home-capability-panel[open] summary::after {
        transform: rotate(225deg) translate(-2px, -2px);
      }

      .home-capability-panel summary span {
        color: var(--ink);
        font-size: clamp(18px, 1.25vw, 22px);
        font-weight: 900;
        letter-spacing: -0.012em;
      }

      .home-capability-panel summary strong {
        grid-column: 1;
        color: var(--ink-soft);
        font-size: clamp(13px, 0.85vw, 14px);
        font-weight: 700;
        line-height: 1.5;
      }

      .home-capability-panel__body {
        padding: 0 clamp(14px, 2vw, 28px) clamp(18px, 2.2vw, 28px);
      }

      .home-capability-panel__body ul {
        margin: 14px 0 0;
        padding: 0;
        display: grid;
        gap: 10px;
        list-style: none;
      }

      .home-capability-panel__body li,
      .home-capability-panel__body p {
        margin: 0;
        color: var(--ink-soft);
        font-size: clamp(13px, 0.85vw, 15px);
        line-height: 1.72;
      }

      .home-capability-panel__body p {
        max-width: 62ch;
      }

      .home-capability-panel__body li {
        position: relative;
        padding-left: 24px;
      }

      .home-capability-panel__body li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.62em;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--brand-blue);
        box-shadow: 0 0 0 4px rgba(79, 99, 243, 0.1);
      }

      .home-community-entry {
        border: 1px solid var(--line);
        border-radius: 22px;
        background:
          radial-gradient(circle at 88% 14%, rgba(223, 79, 118, 0.11), transparent 17rem),
          radial-gradient(circle at 16% 18%, rgba(79, 99, 243, 0.12), transparent 16rem),
          linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 247, 255, 0.84));
        box-shadow: var(--card-shadow);
        display: grid;
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
        gap: clamp(20px, 4vw, 54px);
        align-items: center;
        padding: clamp(22px, 4vw, 38px);
      }

      .home-community-entry__copy h2 {
        margin: 0 0 12px;
        color: var(--ink);
        font-size: clamp(28px, 3.6vw, 44px);
        line-height: 1.08;
        letter-spacing: -0.016em;
        text-wrap: balance;
      }

      .home-community-entry__copy p {
        max-width: 34em;
        margin: 0;
        color: var(--ink-soft);
        font-size: 15px;
        line-height: 1.78;
      }

      .home-community-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .home-community-actions a {
        min-height: 150px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.76);
        color: var(--ink);
        display: grid;
        align-content: start;
        gap: 8px;
        padding: 18px;
        transition:
          border-color 180ms var(--ease),
          background 180ms var(--ease),
          transform 180ms var(--ease);
      }

      .home-community-actions a:hover {
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.94);
        transform: translateY(-2px);
      }

      .home-community-actions span {
        width: fit-content;
        min-height: 28px;
        border-radius: 999px;
        background: var(--surface-blue);
        color: var(--brand-blue);
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 900;
      }

      .home-community-actions strong {
        color: var(--ink);
        font-size: 18px;
        line-height: 1.24;
      }

      .home-community-actions em {
        color: var(--ink-soft);
        font-style: normal;
        font-size: 13px;
        line-height: 1.58;
      }

      .architecture-flow {
        position: relative;
        margin-top: clamp(20px, 4vw, 36px);
        border: 1px solid var(--line);
        border-radius: 22px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 247, 255, 0.84), rgba(255, 242, 247, 0.78));
        overflow: hidden;
      }

      .architecture-flow svg {
        width: 100%;
        height: auto;
        display: block;
      }

      .architecture-flow__caption {
        position: absolute;
        left: 18px;
        bottom: 16px;
        padding: 7px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(198, 210, 218, 0.88);
        color: var(--ink-soft);
        font-size: 12px;
        font-weight: 760;
      }

      .hero-panel {
        animation: heroFloat 11s var(--ease) infinite alternate;
      }

      .hero-panel--left {
        animation-delay: -2s;
      }

      .hero-panel--center {
        animation-delay: -4s;
      }

      .hero-panel--right {
        animation-delay: -6s;
      }

      .hero-spark {
        animation: heroSpark 8s ease-in-out infinite alternate;
      }

      .hero-spark--bottom {
        animation-delay: -3s;
      }


      .reason-stack {
        display: grid;
        gap: 16px;
      }

      .reason-card {
        border: 1px solid var(--line);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.88);
        display: grid;
        grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1fr);
        gap: clamp(18px, 3vw, 36px);
        align-items: center;
        padding: clamp(18px, 3vw, 28px);
        position: relative;
      }

      .reason-card > div:first-child {
        transition:
          opacity 220ms var(--ease),
          transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
      }

      .reason-card--reverse {
        grid-template-columns: minmax(360px, 1fr) minmax(0, 0.78fr);
      }

      .reason-card--reverse > div:first-child {
        order: 2;
      }

      .reason-card span {
        color: var(--brand-blue);
        font-size: 12px;
        font-weight: 860;
        letter-spacing: 0;
      }

      .reason-card h3 {
        margin: 10px 0 10px;
        color: var(--ink);
        font-size: clamp(22px, 2.15vw, 30px);
        line-height: 1.14;
        letter-spacing: -0.012em;
      }

      .reason-card p {
        margin-bottom: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.76;
      }

      .media-placeholder {
        min-height: 260px;
        border: 1px solid var(--line-strong);
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(245, 247, 255, 0.78), rgba(255, 242, 247, 0.72)),
          linear-gradient(90deg, rgba(79, 99, 243, 0.05) 0 1px, transparent 1px 28px);
        overflow: hidden;
        display: grid;
        align-content: end;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
        cursor: zoom-in;
        outline: none;
        position: relative;
        transform-origin: center;
        transition:
          border-color 220ms var(--ease),
          box-shadow 220ms var(--ease),
          transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .asset-image {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        background: #ffffff;
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .reason-card:nth-child(odd) .media-placeholder {
        transform-origin: right center;
      }

      .reason-card--reverse .media-placeholder {
        transform-origin: left center;
      }

      .media-placeholder:hover,
      .media-placeholder:focus-visible {
        border-color: rgba(79, 99, 243, 0.42);
        box-shadow:
          0 18px 48px rgba(24, 34, 44, 0.18),
          0 0 0 1px rgba(79, 99, 243, 0.16),
          inset 0 0 0 1px rgba(255, 255, 255, 0.82);
        transform: scale(1.38);
        z-index: 8;
      }

      .media-placeholder:hover .asset-image,
      .media-placeholder:focus-visible .asset-image {
        transform: scale(1.03);
      }

      .reason-card:has(.media-placeholder:hover) > div:first-child,
      .reason-card:focus-within > div:first-child {
        opacity: 0.82;
        transform: translateX(clamp(-34px, -2.4vw, -18px));
      }

      .reason-card--reverse:has(.media-placeholder:hover) > div:first-child,
      .reason-card--reverse:focus-within > div:first-child {
        transform: translateX(clamp(18px, 2.4vw, 34px));
      }

      @media (prefers-reduced-motion: reduce) {
        .reason-card > div:first-child,
        .media-placeholder,
        .asset-image {
          transition: none;
        }
      }

      .asset-image--hero {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 12px 28px oklch(0.18 0.05 240 / 0.1);
      }

      .media-placeholder > strong {
        color: var(--ink);
        font-size: clamp(24px, 3vw, 36px);
        line-height: 1.08;
        padding: 24px 24px 0;
      }

      .media-placeholder > p {
        padding: 8px 24px 20px;
        color: var(--ink-soft);
        font-size: 14px;
      }

      .scenario-showcase {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: clamp(10px, 1.2vw, 14px);
      }

      .scenario-showcase article {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #ffffff;
        min-height: 0;
        padding: clamp(16px, 1.8vw, 22px);
        display: grid;
        align-content: space-between;
        gap: clamp(14px, 1.5vw, 24px);
      }

      .scenario-showcase h3 {
        margin: 12px 0 10px;
        color: var(--ink);
        font-size: clamp(18px, 2vw, 28px);
        line-height: 1.1;
        letter-spacing: -0.014em;
      }

      .scenario-showcase p {
        color: var(--ink-soft);
        font-size: clamp(12px, 1.15vw, 15px);
        line-height: 1.68;
      }

      .scenario-showcase a {
        width: fit-content;
        min-height: 38px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        padding: 0 14px;
        color: var(--accent);
        font-size: 13px;
        font-weight: 900;
      }

      .project-scenario-map {
        grid-template-columns: 1fr;
        gap: clamp(18px, 2.4vw, 28px);
      }

      .project-scenario-map article {
        min-height: 0;
        grid-template-columns: minmax(min(100%, 280px), 0.98fr) minmax(0, 1fr);
        align-items: center;
        align-content: center;
        column-gap: clamp(22px, 3vw, 54px);
        row-gap: 12px;
        padding: clamp(18px, 2vw, 30px);
      }

      .project-scenario-map article:nth-child(even) {
        grid-template-columns: minmax(0, 1fr) minmax(min(100%, 280px), 0.98fr);
      }

      .project-scenario-map .project-scenario-image {
        grid-column: 1;
        grid-row: 1 / span 4;
        aspect-ratio: 16 / 9;
        align-self: stretch;
      }

      .project-scenario-map article:nth-child(even) .project-scenario-image {
        grid-column: 2;
      }

      .project-scenario-map article > span {
        color: var(--ink);
        font-size: clamp(22px, 2.4vw, 30px);
        font-weight: 880;
        line-height: 1.14;
        letter-spacing: -0.016em;
      }

      .project-scenario-map h3 {
        margin: 0;
        color: var(--ink-soft);
        font-size: clamp(16px, 1.4vw, 19px);
        font-weight: 780;
        line-height: 1.36;
        letter-spacing: -0.004em;
      }

      .project-scenario-map p {
        max-width: 38em;
        margin: 0;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.72;
      }

      .project-scenario-map a {
        margin-top: 14px;
      }

      .project-scenario-map article > span,
      .project-scenario-map article > h3,
      .project-scenario-map article > p,
      .project-scenario-map article > a {
        grid-column: 2;
      }

      .project-scenario-map article:nth-child(even) > span,
      .project-scenario-map article:nth-child(even) > h3,
      .project-scenario-map article:nth-child(even) > p,
      .project-scenario-map article:nth-child(even) > a {
        grid-column: 1;
      }

      .asset-guidance {
        border: 1px solid var(--line);
        border-radius: 20px;
        background:
          linear-gradient(135deg, #ffffff, #f5f7ff 58%, #fff3f7),
          var(--surface);
        padding: clamp(22px, 4vw, 36px);
        display: grid;
        grid-template-columns: minmax(0, 0.74fr) minmax(420px, 1fr);
        gap: clamp(20px, 4vw, 56px);
      }

      .asset-guidance h2 {
        margin: 14px 0 12px;
        color: var(--ink);
        font-size: clamp(26px, 3.2vw, 40px);
        line-height: 1.06;
        letter-spacing: -0.016em;
      }

      .asset-guidance p {
        margin: 0;
        color: var(--ink-soft);
      }

      .asset-list {
        display: grid;
        gap: 10px;
      }

      .asset-list div {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.76);
        padding: 14px 16px;
        display: grid;
        gap: 3px;
      }

      .asset-list strong {
        color: var(--ink);
      }

      .asset-list span {
        color: var(--ink-soft);
        font-size: 13px;
      }

      @media (min-width: 981px) {
        .official-hero {
          min-height: clamp(620px, 42vw, 920px);
        }

        .official-hero__stage {
          inset: 0;
          width: 100%;
          transform: none;
          background-position: 62% center;
        }

        .official-hero::before {
          inset: 0;
          width: 100%;
          transform: none;
          background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 36%, rgba(255, 255, 255, 0.2) 58%, rgba(255, 255, 255, 0.02) 72%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.28) 66%, rgba(255, 255, 255, 0.78) 100%);
        }

        .official-hero__content {
          grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
          align-items: center;
          padding:
            clamp(72px, 7vw, 128px)
            0
            clamp(96px, 9vw, 140px);
        }

        .official-hero__content > * {
          grid-column: 1;
          max-width: 100%;
        }

        .official-hero h1 {
          max-width: min(100%, 13em);
          font-size: var(--text-display);
        }

      }

      @media (max-width: 1180px) {
        .official-hero {
          min-height: clamp(500px, 56vw, 660px);
        }

        .official-hero__stage {
          background-position: 66% center;
        }

        .official-architecture:not(.official-architecture--compact) {
          grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
        }

        .arch-column {
          grid-column: auto;
        }

        .arch-column--core {
          grid-column: auto;
        }
      }

      @media (max-width: 980px) {
        .section__head--split,
        .reason-card,
        .reason-card--reverse,
        .asset-guidance,
        .home-community-entry {
          grid-template-columns: 1fr;
        }

        .official-hero {
          min-height: clamp(500px, 64vw, 600px);
        }

        .official-hero__stage {
          background-position: 70% center;
        }

        .official-hero__content {
          padding: 72px var(--page-gutter) 86px;
          grid-template-columns: 1fr;
        }

        .architecture-flow {
          margin-top: 20px;
        }

        .reason-card--reverse > div:first-child {
          order: 0;
        }

        .reason-card:nth-child(odd) .media-placeholder,
        .reason-card--reverse .media-placeholder {
          transform-origin: center;
        }

        .media-placeholder:hover,
        .media-placeholder:focus-visible {
          transform: scale(1.12);
        }

        .reason-card:has(.media-placeholder:hover) > div:first-child,
        .reason-card:focus-within > div:first-child,
        .reason-card--reverse:has(.media-placeholder:hover) > div:first-child,
        .reason-card--reverse:focus-within > div:first-child {
          opacity: 0.9;
          transform: translateY(-8px);
        }

        .official-architecture:not(.official-architecture--compact),
        .scenario-showcase:not(.project-scenario-map) {
          grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
        }

        .project-scenario-map,
        .project-scenario-map article,
        .project-scenario-map article:nth-child(even) {
          grid-template-columns: 1fr;
        }

        .project-scenario-map .project-scenario-image,
        .project-scenario-map article:nth-child(even) .project-scenario-image,
        .project-scenario-map article > span,
        .project-scenario-map article > h3,
        .project-scenario-map article > p,
        .project-scenario-map article > a,
        .project-scenario-map article:nth-child(even) > span,
        .project-scenario-map article:nth-child(even) > h3,
        .project-scenario-map article:nth-child(even) > p,
        .project-scenario-map article:nth-child(even) > a {
          grid-column: 1;
        }

        .project-scenario-map .project-scenario-image {
          grid-row: auto;
        }

        .arch-column,
        .arch-column--core {
          grid-column: auto;
        }
      }

      @media (max-width: 620px) {
        .official-hero {
          width: 100%;
          max-width: none;
          margin-inline: 0;
          min-height: clamp(520px, 78svh, 640px);
          padding: 0;
          grid-template-columns: 1fr;
          grid-template-rows: minmax(0, 1fr) auto;
        }

        .official-hero::before {
          background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0.28) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.45) 58%, rgba(255, 255, 255, 0.84) 100%);
        }

        .official-hero__stage {
          background-position: 72% center;
        }

        .official-hero h1 {
          max-width: 100%;
          --text-display: clamp(30px, 8vw, 40px);
          font-size: var(--text-display);
          letter-spacing: -0.02em;
        }

        .official-hero__content {
          padding: 64px var(--page-gutter) 178px;
          grid-template-columns: 1fr;
        }

        .news-strip {
          width: 100%;
          align-items: flex-start;
          flex-direction: column;
          border-radius: 16px;
          padding: 8px;
        }

        .agent-loop__grid,
        .official-architecture,
        .scenario-showcase,
        .home-community-actions {
          grid-template-columns: 1fr;
        }

        .home-capability-panel summary {
          min-height: clamp(56px, 8vw, 68px);
          padding: clamp(12px, 1.6vw, 16px);
        }

        .home-capability-panel__body {
          padding: 0 clamp(12px, 1.8vw, 16px) clamp(16px, 2vw, 20px);
        }

        .showcase-frame__top {
          align-items: flex-start;
          flex-direction: column;
          padding: 14px 16px;
        }

        .arch-column,
        .reason-card,
        .scenario-showcase article {
          min-height: 0;
        }

        .asset-guidance {
          padding: 20px;
        }
      }

      .brand__mark,
      .button--primary,
      .hot-dot {
        background: var(--brand-gradient);
        color: #ffffff;
      }

      .site-header {
        background: rgba(255, 255, 255, 0.94);
      }

      .hero::before {
        background:
          radial-gradient(circle at 18% 10%, rgba(79, 99, 243, 0.11), transparent 18rem),
          radial-gradient(circle at 82% 16%, rgba(223, 79, 118, 0.11), transparent 18rem),
          linear-gradient(135deg, rgba(246, 248, 255, 0.86), rgba(255, 255, 255, 0.56) 58%);
      }

      .badge,
      .section-label,
      .docs-nav a,
      .tag-list span,
      .case-card span,
      .arch-mini-pill--active,
      .docs-card__label,
      .learning-card span,
      .community-quick a {
        background: var(--surface-blue);
        color: var(--accent);
      }

      .visual-head,
      .score-panel,
      .capability-strip__score,
      .capability-chip--accent,
      .quick-entry em,
      .arch-mini-block--nl2sql,
      .arch-mini-note--label,
      .arch-note,
      .architecture-mini-card,
      .flow-map__line,
      .learning-step--active,
      .learn-hero__panel,
      .learn-arch-board,
      .scene-art,
      .scene-art--science,
      .scene-art--agent,
      .video-slot,
      .code-window,
      .contact-band,
      .arch-pill--active,
      .arch-block--tall,
      .arch-block--wide,
      .arch-block--foot,
      .arch-side-card,
      .architecture-hero,
      .community-hero {
        border-color: var(--line);
        background:
          radial-gradient(circle at 86% 14%, rgba(223, 79, 118, 0.14), transparent 16rem),
          radial-gradient(circle at 18% 12%, rgba(79, 99, 243, 0.12), transparent 16rem),
          linear-gradient(135deg, #ffffff 0%, #f5f7ff 58%, #fff2f6 100%);
        color: var(--ink);
      }

      .visual-head {
        border-bottom: 1px solid var(--line);
      }

      .visual-head span:first-child,
      .visual-head span:last-child,
      .score-panel span,
      .score-panel em,
      .score-panel__metric span,
      .score-panel p,
      .capability-strip__score span,
      .capability-strip__score em,
      .capability-chip--accent span,
      .quick-entry em,
      .arch-mini-block--nl2sql span,
      .arch-mini-block--nl2sql em,
      .architecture-mini-card span,
      .architecture-mini-card p,
      .learn-hero__panel p,
      .learn-arch-board p,
      .scene-art__head span,
      .scene-preview__overlay span,
      .scene-preview__hud span,
      .video-slot span,
      .contact-band p,
      .contact-row,
      .contact-link span {
        color: var(--ink-soft);
      }

      .score-panel strong,
      .capability-strip__score strong,
      .capability-chip--accent strong,
      .quick-entry em,
      .arch-mini-block--nl2sql strong,
      .arch-note,
      .architecture-mini-card strong,
      .learning-step--active h3,
      .learning-step--active p,
      .scene-art__head strong,
      .scene-preview__overlay strong,
      .scene-preview__hud strong,
      .video-slot strong,
      .contact-band h2,
      .contact-info h3,
      .contact-row strong,
      .contact-link strong,
      .arch-block--wide span,
      .arch-block--foot span {
        color: var(--ink);
      }

      .home-overview__panel--arch {
        background:
          radial-gradient(circle at 82% 18%, rgba(138, 99, 255, 0.13), transparent 16rem),
          radial-gradient(circle at 18% 18%, rgba(223, 79, 118, 0.1), transparent 16rem),
          linear-gradient(135deg, #ffffff 0%, #f4f6ff 100%);
        color: var(--ink);
      }

      .home-overview__panel--arch .section-label {
        background: var(--surface-purple);
        color: var(--accent);
      }

      .home-overview__panel--arch .home-overview__copy p,
      .home-overview__panel--arch em {
        color: var(--ink-soft);
      }

      .home-arch-map__core,
      .home-arch-map__base,
      .learn-arch-board__core,
      .learn-arch-board__base,
      .arch-core,
      .arch-lane,
      .arch-block,
      .scene-chip,
      .qr-placeholder,
      .contact-card,
      .contact-link,
      .scene-demo-slot,
      .scene-preview__frame,
      .scene-window {
        border-color: var(--line);
        background: rgba(255, 255, 255, 0.78);
        color: var(--ink);
      }

      .home-arch-map__grid span.is-active,
      .learn-arch-board__row--top span,
      .learning-step--active span,
      .play-marker,
      .scene-progress span {
        background: var(--accent-soft);
        color: var(--ink);
      }

      .scene-preview__frame,
      .scene-preview--science .scene-preview__frame,
      .scene-preview--agent .scene-preview__frame,
      .mini-video__frame {
        background:
          linear-gradient(135deg, rgba(79, 99, 243, 0.13), rgba(138, 99, 255, 0.13), rgba(223, 79, 118, 0.09)),
          #ffffff;
      }

      .scene-preview__overlay,
      .scene-preview__hud {
        background: rgba(255, 255, 255, 0.88);
        color: var(--ink);
      }

      .scene-line,
      .node-dot {
        background: var(--accent);
      }

      .code-window {
        color: var(--ink);
      }

      .code-window .green {
        color: var(--accent);
      }

      .code-window .orange {
        color: var(--brand-rose);
      }

      .contact-card,
      .contact-link {
        background: rgba(255, 255, 255, 0.72);
      }

      .contact-row {
        border-top-color: var(--line);
      }

      .qr-placeholder {
        background:
          linear-gradient(90deg, rgba(79, 99, 243, 0.09) 1px, transparent 1px),
          linear-gradient(180deg, rgba(223, 79, 118, 0.07) 1px, transparent 1px),
          #ffffff;
        background-size: 12px 12px;
      }

      .architecture-step::before,
      .capability-strip__rail span,
      .flow-node--accent::before {
        background: linear-gradient(90deg, var(--brand-rose), var(--brand-purple), var(--brand-blue));
      }

      .capability-chip--accent {
        box-shadow: inset 0 0 0 1px rgba(79, 99, 243, 0.1);
      }

      /* Brand color unification: keep the site bright, with red-blue-purple as the official accent system. */
      .nav-link:hover,
      .nav a:hover,
      .nav button.nav-link:hover,
      .nav-link[aria-current="page"],
      .nav-item.is-active > .nav-link,
      .nav button.nav-link[aria-current="page"] {
        background: transparent;
        color: var(--brand-blue);
        box-shadow: none;
      }

      .gitcode-link.code-menu__trigger:hover,
      .gitcode-link.code-menu__trigger:focus-visible {
        background: transparent;
        border-color: transparent;
        color: var(--brand-blue);
        box-shadow: none;
        transform: none;
      }

      .gitcode-link:hover,
      .mobile-nav__panel a:hover,
      .mobile-nav__panel a[aria-current="page"] {
        background: var(--brand-gradient-soft);
        color: var(--brand-blue);
        box-shadow: inset 0 0 0 1px rgba(79, 99, 243, 0.16);
      }

      .hot-dot,
      .scene-line,
      .node-dot,
      .play-marker,
      .scene-progress span {
        background: var(--brand-gradient);
      }

      .mobile-nav__panel,
      .gitcode-link,
      .docs-source-pill,
      .section-source,
      .page-kicker,
      .section-label,
      .project-hero__summary span,
      .community-brief span,
      .community-update__meta span,
      .community-pulse-card span {
        border-color: var(--line-strong);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 255, 0.9));
        color: var(--brand-blue);
      }

      .nav-menu {
        border-color: var(--line);
        background: oklch(0.998 0.002 240 / 0.98);
        color: var(--ink);
      }

      .nav-menu a:hover {
        background: transparent;
        color: var(--brand-blue);
      }

      .button {
        border-color: var(--line-strong);
      }

      .button:hover,
      .community-brief a:hover {
        border-color: var(--brand-blue);
        background: var(--brand-gradient-soft);
        color: var(--brand-blue);
      }

      .button--primary:hover {
        color: #ffffff;
        filter: saturate(1.08) brightness(1.01);
      }

      .docs-card,
      .interface-card,
      .docs-note,
      .home-route,
      .learning-card,
      .scene-showcase,
      .community-board,
      .community-item,
      .community-pulse-card,
      .reason-card,
      .arch-column,
      .media-placeholder,
      .contact-card,
      .contact-link {
        border-color: var(--line);
        box-shadow: var(--card-shadow);
      }

      .arch-column__image,
      .arch-orbit i,
      .project-definition article,
      .project-status article,
      .project-module-list article,
      .project-boundary > div,
      .architecture-mini-card,
      .learn-outcome,
      .learning-step,
      .learn-checklist article,
      .scenario-card,
      .case-card,
      .adapter-card,
      .quick-entry,
      .prompt-card,
      .contact-band {
        border-color: var(--line);
        box-shadow: var(--card-shadow);
      }

      .community-pulse-card--active,
      .capability-chip--accent {
        border-color: var(--line-strong);
        box-shadow:
          0 0 0 1px var(--card-edge),
          0 18px 36px rgba(79, 99, 243, 0.08);
      }

      .docs-card:hover,
      .home-route:hover,
      .learning-card:hover,
      .community-item:hover,
      .contact-link:hover,
      .quick-entry:hover,
      .prompt-card:hover {
        border-color: var(--line-strong);
        background: var(--brand-gradient-soft);
        color: var(--brand-blue);
        box-shadow:
          0 0 0 1px rgba(79, 99, 243, 0.14),
          0 16px 30px rgba(79, 99, 243, 0.07);
      }

      .home-route em,
      .docs-source-pill,
      .section-source,
      .community-quick a,
      .arch-orbit i,
      .scenario-showcase a,
      .prompt-card summary {
        color: var(--brand-blue);
      }

      .home-route:nth-child(2n),
      .docs-card:nth-child(2n),
      .learning-card:nth-child(2n),
      .community-pulse-card:nth-child(2n) {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 239, 255, 0.56)),
          var(--surface);
      }

      .home-route:nth-child(3n),
      .docs-card:nth-child(3n),
      .learning-card:nth-child(3n),
      .community-pulse-card:nth-child(3n) {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 241, 245, 0.6)),
          var(--surface);
      }

      .contact-band,
      .architecture-hero,
      .community-hero,
      .learn-hero__panel,
      .learn-arch-board,
      .architecture-mini-card,
      .capability-chip--accent,
      .score-panel,
      .visual-head {
        background: var(--brand-wash);
      }

      .contact-band,
      .architecture-hero,
      .community-hero,
      .learn-hero__panel,
      .learn-arch-board {
        box-shadow: 0 18px 42px rgba(79, 99, 243, 0.08);
      }

      .visual-head {
        border-bottom-color: var(--line);
      }

      .architecture-step::before,
      .capability-strip__rail span,
      .flow-node--accent::before,
      .quick-entry em,
      .arch-mini-block--nl2sql,
      .arch-mini-note--label,
      .arch-pill--active {
        background: var(--brand-gradient);
      }

      .quick-entry em,
      .arch-mini-block--nl2sql,
      .arch-mini-block--nl2sql span,
      .arch-mini-block--nl2sql strong,
      .arch-mini-block--nl2sql em,
      .arch-mini-note--label,
      .arch-pill--active,
      .arch-pill--active span,
      .arch-pill--active strong {
        color: #ffffff;
      }

      .footer {
        border-top-color: var(--line-strong);
        background:
          radial-gradient(circle at 90% 0%, rgba(223, 79, 118, 0.09), transparent 18rem),
          linear-gradient(180deg, transparent, rgba(245, 247, 255, 0.72));
      }

      @keyframes scan {
        from {
          transform: translateY(-100%);
        }
        to {
          transform: translateY(520%);
        }
      }

      @keyframes glide {
        0%,
        100% {
          transform: translateX(-28%);
          opacity: 0.35;
        }
        50% {
          transform: translateX(128%);
          opacity: 0.08;
        }
      }

      @keyframes rail {
        0% {
          transform: translateX(-35%);
        }
        100% {
          transform: translateX(235%);
        }
      }

      @media (max-width: 1180px) {
        :root {
          --page-gutter: clamp(16px, 3vw, 32px);
        }

        .site-header__inner {
          gap: 14px;
        }

        .nav-menu__inner {
          width: var(--site-width);
        }

        .footer__body {
          grid-template-columns: 1fr;
          gap: 28px;
        }

        .footer__nav {
          grid-template-columns: repeat(2, minmax(140px, 1fr));
        }

        .footer__contact {
          justify-self: start;
          justify-items: start;
          text-align: left;
        }
      }

      @media (max-width: 980px) {
        .nav-menu {
          display: none;
        }

        .nav,
        .nav-utilities {
          display: none;
        }

        .site-header__inner {
          grid-template-columns: auto auto;
          justify-content: space-between;
        }

        .footer__nav {
          grid-template-columns: repeat(2, minmax(120px, 1fr));
        }

        .footer__contact {
          justify-self: start;
          justify-items: start;
          text-align: left;
        }

        .mobile-nav {
          display: block;
        }

        .hero,
        .learn-hero,
        .split-section,
        .home-overview,
        .learn-architecture,
        .scene-showcase,
        .project-definition,
        .project-boundary,
        .project-status,
        .capability-layout,
        .learn-split,
        .community-board,
        .demo-layout,
        .quickstart,
        .contact-band,
        .about-page .page-hero,
        .contact-band--about,
        .about-contact-grid {
          grid-template-columns: 1fr;
        }

        .about-contact-brand__panel {
          max-width: none;
          height: auto;
        }

        .quick-panel__inner,
        .learning-flow,
        .learning-cards,
        .architecture-track,
        .adapter-row,
        .case-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .project-module-list article {
          grid-template-columns: 56px minmax(0, 1fr);
        }

        .project-module-list em {
          grid-column: 2;
          border-left: 0;
          padding-left: 0;
        }

        .learn-checklist article {
          grid-template-columns: 1fr;
          align-items: start;
        }

        .learning-step:nth-child(2)::after {
          content: none;
        }

        .architecture-step:not(:last-child)::after {
          content: none;
        }

        .capability-lead {
          min-height: 260px;
        }

        .about-cta {
          display: grid;
        }

        .docs-landing-card-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .about-brief-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 620px) {
        :root {
          --page-gutter: 16px;
          --section-y: 48px;
          --section-y-compact: 38px;
        }

        .section,
        .hero,
        .page-main .section,
        .official-home .section,
        .site-header__inner,
        .footer__inner {
          width: var(--site-width);
          max-width: 100%;
          margin-inline: auto;
        }

        .page-hero,
        .learn-hero,
        .community-news-hero,
        .community-hero-panel,
        .official-hero {
          width: 100%;
          max-width: none;
          margin-inline: 0;
        }

        .site-header__inner {
          min-height: 62px;
        }

        .brand span:last-child {
          display: none;
        }

        h1 {
          max-width: 100%;
          font-size: clamp(33px, 10vw, 42px);
          line-height: 1.08;
          letter-spacing: -0.02em;
        }

        .hero {
          padding-top: 44px;
          padding-bottom: 54px;
        }

        h1 {
          max-width: 100%;
        }

        .platform-visual--capability {
          min-width: 0;
        }

        .hero {
          grid-template-columns: 1fr;
        }

        .platform-visual--capability {
          width: 100%;
          min-height: 0;
          transform: none;
        }

        .home-overview__panel {
          min-height: 0;
        }

        .home-learning-track,
        .home-arch-map__grid,
        .learn-arch-board__row,
        .docs-landing-card-grid {
          grid-template-columns: 1fr;
        }

        .home-learning-track::before {
          top: 8%;
          bottom: 8%;
          left: 50%;
          right: auto;
          width: 2px;
          height: auto;
        }

        .home-arch-map__core,
        .learn-arch-board__core {
          min-height: 96px;
        }

        .capability-strip__row {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .capability-strip__meta {
          grid-template-columns: 1fr;
        }

        .capability-foot {
          flex-direction: column;
          align-items: flex-start;
        }

        .badge-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }

        .badge-row .badge:nth-child(n + 3) {
          display: none;
        }

        .badge {
          justify-content: center;
          padding-right: 6px;
          padding-left: 6px;
          font-size: 11px;
          text-align: center;
        }

        .hero-signals {
          justify-content: center;
        }

        .hero__copy {
          max-width: 100%;
          font-size: 16px;
          line-height: 1.82;
        }

        .hero-portals {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .hero-portals a:nth-child(2n)::after {
          content: none;
        }

        .architecture-flow__caption {
          left: 14px;
          right: 14px;
          bottom: 12px;
          text-align: center;
        }

        .button {
          width: 100%;
        }

        .flow-map,
        .scene-screen,
        .project-definition,
        .project-boundary,
        .project-status,
        .quick-panel__inner,
        .compare-body,
        .architecture-track,
        .learning-flow,
        .learning-cards,
        .capability-grid,
        .adapter-row,
        .case-grid,
        .community-board {
          grid-template-columns: 1fr;
        }

        .footer__nav {
          grid-template-columns: 1fr;
        }

        .footer__tagline {
          max-width: none;
        }

        .footer__beian {
          padding: 12px 0 18px;
        }

        .footer__beian-copy {
          gap: 2px 8px;
          overflow-wrap: anywhere;
        }

        .project-hero__summary {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }

        .project-hero__summary span {
          justify-content: center;
          padding-right: 8px;
          padding-left: 8px;
          text-align: center;
        }

        .project-definition article,
        .project-status article,
        .project-scenario-map article {
          min-height: 0;
        }

        .project-module-list article {
          grid-template-columns: 1fr;
          align-items: start;
        }

        .project-module-list em {
          grid-column: auto;
        }

        .community-hero-panel,
        .community-update,
        .community-pulse-grid,
        .community-board--focused,
        .about-brief-grid,
        .about-contact-grid {
          grid-template-columns: 1fr;
        }

        .about-page .page-hero {
          min-height: clamp(280px, 36svh, 360px);
        }

        .community-hero-panel h1 {
          max-width: 100%;
        }

        .community-brief,
        .community-update,
        .community-pulse-card {
          border-radius: 14px;
        }

        .community-update__date {
          border-right: 0;
          border-bottom: 1px solid var(--line);
          padding-right: 0;
          padding-bottom: 16px;
        }

        .community-update__actions .button {
          width: 100%;
        }

        .learn-hero {
          padding-top: 36px;
          padding-bottom: 44px;
        }

        .learn-hero h1 {
          font-size: clamp(33px, 10vw, 42px);
          line-height: 1.08;
          letter-spacing: -0.02em;
        }

        .learn-outcome,
        .learning-step,
        .learning-card,
        .learn-checklist article {
          min-width: 0;
          max-width: 100%;
        }

        .learning-step {
          min-height: 0;
        }

        .learning-step::after {
          content: none;
        }

        .arch-shell__top,
        .arch-core__body,
        .arch-lane__grid {
          grid-template-columns: 1fr;
        }

        .arch-block--tall,
        .arch-block--wide,
        .arch-block--foot {
          grid-column: auto;
          grid-row: auto;
          min-height: 0;
        }

        .arch-side {
          grid-template-rows: repeat(2, minmax(110px, auto));
        }

        .architecture-track {
          gap: 10px;
        }

        .architecture-step:not(:last-child)::after {
          content: none;
        }

        .scene-stage,
        .scene-art {
          min-height: 620px;
        }

        .scene-flow {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .scene-art__head,
        .scene-demo-slot {
          align-items: flex-start;
        }

        .compare-cell + .compare-cell {
          border-top: 1px solid var(--line);
          border-left: 0;
        }

        .score-panel,
        .visual-body,
        .platform-visual,
        .quickstart,
        .contact-band,
        .code-window {
          min-width: 0;
          max-width: 100%;
        }

        .score-panel strong {
          font-size: clamp(50px, 16vw, 66px);
        }

        .mini-video,
        .contact-card,
        .contact-row {
          grid-template-columns: 1fr;
        }

        .contact-card--about {
          grid-template-columns: 1fr;
        }

        .qr-placeholder {
          width: min(100%, 180px);
        }

        .footer__contact img {
          width: 144px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
        }

        .reveal {
          transform: none !important;
        }
      }