:root {
        --ink: #050608;
        --muted: #6b7280;
        --muted-2: #9aa1ac;
        --line: #dfe3e8;
        --line-soft: #edf0f3;
        --paper: #ffffff;
        --paper-soft: #f7f8fa;
        --panel: #0c111b;
        --green: #dff8e9;
        --green-ink: #208551;
        --blue: #2f6fea;
        --radius: 8px;
        --shadow: 0 24px 70px rgba(10, 14, 24, 0.08);
        --nav-height: 76px;
        --home-section-title-size: clamp(38px, 3.4vw, 50px);
        --home-section-title-weight: 700;
        --home-section-title-line: 1.12;
        --home-section-title-margin: 0 0 14px;
        --home-section-copy-size: 18px;
        --home-section-copy-weight: 300;
        --home-section-copy-line: 1.55;
        --home-section-copy-width: 880px;
        --home-section-copy-margin: 0 auto 56px;
        --home-card-title-size: 22px;
        --home-card-title-weight: 700;
        --home-card-title-line: 1.25;
        --home-card-title-margin: 0 0 10px;
        --home-card-copy-size: 15px;
        --home-card-copy-weight: 400;
        --home-card-copy-line: 1.5;
        --home-card-copy-margin: 0 0 20px;
        --home-label-size: 14px;
        --home-label-weight: 800;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--nav-height) + 26px);
      }

      body {
        margin: 0;
        color: var(--ink);
        background: #fff;
        font-family: Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: 0;
      }

      a,
      button {
        color: inherit;
        font: inherit;
        text-decoration: none;
      }

      button {
        border: 0;
      }

      svg {
        display: block;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .site-shell {
        min-height: 100vh;
        padding-top: var(--nav-height);
        overflow-x: clip;
        background:
          linear-gradient(90deg, transparent 0 31px, rgba(5, 6, 8, 0.03) 31px 32px),
          linear-gradient(180deg, transparent 0 31px, rgba(5, 6, 8, 0.03) 31px 32px),
          #fff;
        background-size: 32px 32px;
      }

      .nav {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 80;
        background: rgba(255, 255, 255, 0.86);
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(18px);
      }

      .nav-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 24px;
        min-height: var(--nav-height);
        width: min(1180px, calc(100% - 64px));
        margin: 0 auto;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
      }

      .brand-cube {
        width: 32px;
        height: 32px;
      }

      .nav-links {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: #1d2129;
        font-size: 14px;
        font-weight: 500;
      }

      .nav-links a,
      .side-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 14px;
        border-radius: var(--radius);
      }

      .nav-links a:hover,
      .side-nav a:hover,
      .footer-links a:hover,
      .text-link:hover {
        color: var(--blue);
      }

      .nav-links a.active,
      .side-nav a.active {
        color: var(--ink);
        background: #ececec;
      }

      .side-nav a.disabled {
        color: rgba(75, 85, 99, 0.44);
        cursor: default;
      }

      .side-nav a.disabled:hover {
        color: rgba(75, 85, 99, 0.44);
        background: transparent;
      }

      .nav-action {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .language-switch {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(10, 14, 24, 0.04);
      }

      .language-switch button {
        min-width: 40px;
        min-height: 34px;
        padding: 0 10px;
        color: #6b7280;
        background: transparent;
        border-right: 1px solid var(--line);
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
      }

      .language-switch button:last-child {
        border-right: 0;
      }

      .language-switch button.active {
        color: var(--ink);
        background: #eceef1;
      }

      .view {
        display: none;
      }

      .view.active {
        display: block;
      }

      .section-inner {
        width: min(1180px, calc(100% - 64px));
        margin: 0 auto;
      }

      .hero {
        display: grid;
        min-height: calc(100svh - var(--nav-height) - 34px);
        padding: 52px 0 64px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.9);
      }

      .hero-content {
        align-self: center;
        max-width: 980px;
        margin: 0 auto;
        text-align: center;
      }

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

      .hero h1 {
        margin-bottom: 28px;
        font-size: clamp(58px, 7.5vw, 96px);
        line-height: 1;
        letter-spacing: 0;
      }

      .hero-primary {
        max-width: 760px;
        margin: 0 auto 22px;
        color: #6f7784;
        font-size: clamp(21px, 1.9vw, 24px);
        font-weight: 300;
        line-height: 1.34;
      }

      .hero-secondary {
        max-width: 720px;
        margin: 0 auto 46px;
        color: var(--muted-2);
        font-size: clamp(16px, 1.45vw, 18px);
        font-weight: 100;
        line-height: 1.56;
      }

      .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 210px));
        justify-content: center;
        gap: 16px;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 19px;
        border: 1px solid var(--ink);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
      }

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

      .button.primary {
        color: #fff;
        background: var(--ink);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
      }

      .button.secondary {
        color: var(--ink);
        background: #fff;
      }

      .catalogue {
        display: grid;
        align-items: center;
        min-height: calc(100svh - var(--nav-height));
        padding: 78px 0 86px;
        color: #f4f6f8;
        background: #030405;
        border-bottom: 1px solid #14161a;
      }

      .section-head {
        max-width: var(--home-section-copy-width);
        margin: 0 auto 48px;
        text-align: center;
      }

      .section-head h2 {
        margin: var(--home-section-title-margin);
        font-size: var(--home-section-title-size);
        font-weight: var(--home-section-title-weight);
        line-height: var(--home-section-title-line);
        letter-spacing: 0;
      }

      .section-copy {
        max-width: var(--home-section-copy-width);
        margin: var(--home-section-copy-margin);
        color: var(--muted);
        font-size: var(--home-section-copy-size);
        font-weight: var(--home-section-copy-weight);
        line-height: var(--home-section-copy-line);
      }

      .catalogue .section-copy {
        color: #858d9a;
      }

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

      .workbench-card {
        position: relative;
        display: grid;
        min-height: 452px;
        grid-template-rows: minmax(0, 1fr) auto;
        padding: 28px;
        overflow: hidden;
        text-align: left;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 92px),
          #090b0f;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
      }

      .workbench-card:hover,
      .workbench-card:focus-visible {
        outline: none;
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          0 26px 80px rgba(0, 0, 0, 0.42);
      }

      .card-visual {
        display: grid;
        place-items: center;
        color: rgba(238, 242, 248, 0.86);
      }

      .card-visual i {
        width: 112px;
        height: 112px;
        stroke-width: 1.2;
      }

      .workbench-card h3 {
        margin: var(--home-card-title-margin);
        color: #f3f5f8;
        font-size: var(--home-card-title-size);
        font-weight: var(--home-card-title-weight);
        line-height: var(--home-card-title-line);
      }

      .workbench-card p {
        max-width: 310px;
        margin: var(--home-card-copy-margin);
        color: #8b929d;
        font-size: var(--home-card-copy-size);
        font-weight: var(--home-card-copy-weight);
        line-height: var(--home-card-copy-line);
      }

      .status-pill {
        display: inline-flex;
        align-items: center;
        min-height: 29px;
        padding: 0 12px;
        color: #9ff0bd;
        background: rgba(54, 211, 126, 0.13);
        border: 1px solid rgba(115, 238, 167, 0.18);
        border-radius: 999px;
        font-size: var(--home-label-size);
        font-weight: var(--home-label-weight);
      }

      .status-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .status-pill.exclusive {
        color: #fff0c8;
        background: rgba(20, 8, 32, 0.72);
        border-color: rgba(255, 224, 156, 0.42);
        font-weight: 600;
        box-shadow: 0 0 18px rgba(255, 221, 150, 0.08);
      }

      .status-pill.soon {
        color: #a4abb6;
        background: rgba(148, 163, 184, 0.09);
        border-color: rgba(148, 163, 184, 0.18);
      }

      .card-arrow {
        color: #a4abb6;
        font-size: clamp(16px, 1vw, 20px);
        font-weight: 300;
        line-height: 1;
      }

      .install {
        padding: 132px 0 104px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, #fff, #fbfbfc);
      }

      .install-flow {
        max-width: 1180px;
        margin: 48px auto 0;
      }

      .install-flow-card {
        --flow-ink: #161a22;
        --flow-muted: #667085;
        --flow-line: rgba(16, 24, 40, 0.11);
        --flow-accent: #2f6fea;
        position: relative;
        isolation: isolate;
        min-height: 0;
        overflow: visible;
        padding: 0;
        color: var(--flow-ink);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .install-flow-card .puc-ambient,
      .install-flow-card .puc-backdrop-ui,
      .install-flow-card .puc-mask,
      .install-flow-card .puc-grain,
      .install-flow-card .flow-head,
      .install-flow-card .step-grid::before,
      .install-flow-card .step-note {
        display: none;
      }

      .install-flow-card .puc-main-card {
        position: relative;
        z-index: 2;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .install-flow-card .step-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        padding-top: 0;
      }

      .install-flow-card .flow-step {
        position: relative;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 24px;
        min-width: 0;
        min-height: 560px;
        padding: 28px;
        border: 1px solid rgba(15, 23, 42, 0.1);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
      }

      .install-flow-card .step-top {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 16px;
        align-items: start;
        min-width: 0;
      }

      .install-flow-card .step-index {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        color: #111827;
        background: #f4f5f7;
        border: 1px solid rgba(17, 24, 39, 0.12);
        border-radius: 50%;
        font-size: 15px;
        font-weight: 800;
      }

      .install-flow-card .flow-step h4 {
        margin: 0 0 6px;
        color: var(--flow-ink);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.22;
      }

      .install-flow-card .step-top p {
        max-width: 280px;
        margin: 0;
        color: var(--flow-muted);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
      }

      .install-flow-card .shot {
        align-self: stretch;
        overflow: hidden;
        min-width: 0;
        min-height: 330px;
        border: 1px solid var(--flow-line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
      }

      .install-flow-card .repo-shot {
        display: grid;
        align-content: center;
        gap: 18px;
        padding: 32px;
      }

      .install-flow-card .repo-title {
        color: rgba(22, 26, 34, 0.36);
        opacity: 0.32;
        filter: blur(0.55px);
        font-size: 17px;
        font-weight: 650;
        line-height: 1.3;
      }

      .install-flow-card .repo-label {
        color: rgba(22, 26, 34, 0.36);
        opacity: 0.32;
        filter: blur(0.55px);
        font-size: 16px;
        font-weight: 650;
      }

      .install-flow-card .repo-url {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        padding: 18px;
        color: #1d2430;
        background: #f3f5f8;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 14px;
        line-height: 1.45;
      }

      .install-flow-card .repo-url span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .install-flow-card .copy-mark {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        border: 2px solid #667085;
        border-radius: 3px;
        box-shadow: -5px 5px 0 -2px #f3f5f8, -5px 5px 0 0 #667085;
      }

      .install-flow-card .prompt-shot {
        display: grid;
        grid-template-rows: auto 1fr;
      }

      .install-flow-card .prompt-title {
        padding: 34px 24px 14px;
        color: rgba(22, 26, 34, 0.36);
        opacity: 0.32;
        filter: blur(0.55px);
        font-size: 17px;
        font-weight: 650;
        line-height: 1.3;
        text-align: center;
      }

      .install-flow-card .composer {
        align-self: end;
        margin: 24px;
        padding: 22px;
        border: 1px solid rgba(15, 23, 42, 0.16);
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.12);
      }

      .install-flow-card .composer-text {
        min-height: 106px;
        color: #111827;
        font-size: 12px;
        line-height: 1.52;
        white-space: pre-line;
      }

      .install-flow-card .composer-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
      }

      .install-flow-card .plus {
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        color: #111827;
        font-size: 25px;
        line-height: 1;
      }

      .install-flow-card .send {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        color: #fff;
        background: #050505;
        border-radius: 50%;
        font-size: 24px;
        font-weight: 800;
      }

      .install-flow-card .workspace-shot {
        display: grid;
        grid-template-columns: 112px 1fr;
        min-height: 330px;
      }

      .install-flow-card .workspace-side {
        padding: 26px 20px;
        border-right: 1px solid var(--flow-line);
        background: #f5f6f8;
      }

      .install-flow-card .traffic {
        display: flex;
        gap: 6px;
        margin-bottom: 14px;
      }

      .install-flow-card .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }

      .install-flow-card .dot.red { background: #ff5f57; }
      .install-flow-card .dot.yellow { background: #ffbd2e; }
      .install-flow-card .dot.green { background: #28c840; }

      .install-flow-card .side-line {
        height: 9px;
        margin-bottom: 10px;
        border-radius: 999px;
        background: rgba(102, 112, 133, 0.24);
      }

      .install-flow-card .side-line.short {
        width: 68%;
      }

      .install-flow-card .workspace-main {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-width: 0;
        padding: 15px;
        background: #fff;
      }

      .install-flow-card .task-title {
        overflow: hidden;
        color: rgba(22, 26, 34, 0.36);
        opacity: 0.32;
        filter: blur(0.55px);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.42;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .install-flow-card .task-list {
        display: grid;
        align-content: center;
        gap: 8px;
        color: rgba(22, 26, 34, 0.36);
        opacity: 0.32;
        filter: blur(0.55px);
      }

      .install-flow-card .task-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        align-items: start;
        color: rgba(22, 26, 34, 0.36);
        font-size: 12px;
        line-height: 1.45;
      }

      .install-flow-card .bullet {
        width: 4px;
        height: 4px;
        margin-top: 6px;
        border-radius: 50%;
        background: #98a2b3;
      }

      .install-flow-card .start-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 42px;
        padding: 0 10px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 16px;
        color: #111827;
        font-size: 12px;
      }

      .install-flow-card .mini-send {
        display: grid;
        width: 22px;
        height: 22px;
        place-items: center;
        color: #fff;
        background: #050505;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 800;
      }

      .codebox {
        overflow-x: auto;
        margin-top: 16px;
        padding: 18px 20px;
        color: #58f094;
        background: var(--panel);
        border: 1px solid #1e2530;
        border-radius: var(--radius);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 15px;
        line-height: 1.55;
      }

      .step-copy {
        margin-bottom: 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.72;
      }

      .community {
        padding: 132px 0 54px;
        background: var(--paper-soft);
      }

      .community-panel {
        width: 100%;
        padding: 54px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 20px 60px rgba(8, 11, 18, 0.05);
        text-align: center;
      }

      .community-cta {
        width: min(540px, 100%);
        min-height: 62px;
        margin: 34px auto;
        font-size: 18px;
      }

      .benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid var(--line);
      }

      .benefit {
        display: grid;
        gap: 6px;
        padding: 20px;
        border-right: 1px solid var(--line);
      }

      .benefit:last-child {
        border-right: 0;
      }

      .benefit span {
        color: var(--muted);
        font-size: 12px;
      }

      .doc-shell {
        display: grid;
        grid-template-columns: 220px minmax(0, 780px) 190px;
        gap: 56px;
        align-items: start;
        width: min(1360px, calc(100% - 72px));
        margin: 0 auto;
        padding: 66px 0 112px;
        background: transparent;
      }

      #docView {
        background: #fff;
      }

      .side-panel,
      .page-toc {
        position: sticky;
        top: calc(var(--nav-height) + 42px);
        max-height: calc(100vh - var(--nav-height) - 64px);
        overflow-y: auto;
        scrollbar-width: none;
      }

      .side-panel::-webkit-scrollbar,
      .page-toc::-webkit-scrollbar {
        display: none;
      }

      .side-nav {
        display: grid;
        gap: 10px;
      }

      .side-nav a {
        justify-content: flex-start;
        width: 100%;
        min-height: 42px;
        color: #4b5563;
        font-size: 16px;
        font-weight: 700;
      }

      .article {
        min-width: 0;
        max-width: 780px;
      }

      .article h1 {
        max-width: 720px;
        margin-bottom: 12px;
        font-size: clamp(34px, 3.2vw, 46px);
        line-height: 1.08;
        letter-spacing: 0;
      }

      .legal-hero h1 {
        font-size: clamp(28px, 2.2vw, 34px);
        line-height: 1.16;
      }

      .article-subtitle {
        margin-bottom: 34px;
        color: #636a75;
        font-size: 24px;
        line-height: 1.45;
      }

      .article p,
      .faq-answer,
      .step-item p,
      .case-card p {
        color: #303642;
        font-size: 18px;
        line-height: 1.82;
      }

      .intro-paras {
        display: grid;
        gap: 18px;
      }

      .overview-hero {
        max-width: 860px;
      }

      .article-section {
        padding-top: 48px;
        margin-top: 48px;
        border-top: 1px solid var(--line);
      }

      .overview-index {
        padding-top: 0;
        margin-top: 44px;
        border-top: 0;
      }

      .overview-index-label {
        margin: 0 0 14px;
        color: #8a929e;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
      }

      .overview-card-list {
        display: grid;
        gap: 16px;
      }

      .overview-entry-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 28px;
        align-items: center;
        min-height: 138px;
        padding: 26px 30px;
        color: var(--ink);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        transition: border-color 160ms ease, transform 160ms ease;
      }

      .overview-entry-card.is-pending {
        opacity: 0.52;
        cursor: default;
      }

      .overview-entry-card:hover {
        border-color: rgba(17, 24, 39, 0.28);
        transform: translateY(-1px);
      }

      .overview-entry-card.is-pending:hover {
        border-color: var(--line);
        transform: none;
      }

      .overview-entry-copy {
        display: grid;
        gap: 12px;
        min-width: 0;
      }

      .overview-entry-copy strong {
        font-size: clamp(24px, 2vw, 30px);
        line-height: 1.2;
      }

      .overview-entry-copy span {
        max-width: 720px;
        color: #4b5563;
        font-size: 16px;
        line-height: 1.7;
      }

      .overview-entry-status {
        display: grid;
        gap: 10px;
        min-width: 110px;
        color: #69707c;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
      }

      .overview-entry-status .status-live {
        color: var(--blue);
      }

      .overview-entry-status .status-pending {
        color: rgba(105, 112, 124, 0.62);
      }

      .overview-entry-status span {
        position: relative;
        padding-left: 14px;
      }

      .overview-entry-status span::before {
        position: absolute;
        top: 0.15em;
        bottom: 0.15em;
        left: 0;
        width: 2px;
        background: #111827;
        opacity: 0.22;
        content: "";
      }

      .pending-section {
        padding-top: 34px;
        margin-top: 48px;
      }

      .pending-section p {
        margin: 0;
        color: #9aa1ad;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 0;
      }

      .member-download-link {
        display: inline-block;
        margin-top: 26px;
        color: #050608;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        text-decoration: underline;
        text-underline-offset: 5px;
      }

      .member-download-link:hover {
        color: var(--blue);
      }

      .article h2 {
        margin-bottom: 22px;
        font-size: clamp(26px, 2.1vw, 32px);
        line-height: 1.18;
        letter-spacing: 0;
      }

      .step-list {
        display: grid;
        gap: 28px;
        margin-top: 24px;
      }

      .step-item {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
      }

      .step-index {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: #222832;
        background: #eeeeef;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 800;
      }

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

      .case-card {
        min-height: 156px;
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
      }

      .case-card .tag {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        margin-bottom: 18px;
        padding: 0 10px;
        color: var(--green-ink);
        background: var(--green);
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
      }

      .page-toc {
        display: grid;
        gap: 20px;
        padding-left: 18px;
        border-left: 1px solid var(--line);
      }

      .page-toc a {
        position: relative;
        color: var(--muted-2);
        font-size: 15px;
        line-height: 1.35;
      }

      .page-toc a.active {
        color: var(--ink);
      }

      .page-toc a.active::before {
        position: absolute;
        top: -4px;
        bottom: -4px;
        left: -20px;
        width: 2px;
        background: var(--ink);
        content: "";
      }

      .faq-list {
        display: grid;
        gap: 34px;
        border-top: 0;
      }

      .faq-item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0;
        border-bottom: 0;
      }

      .article .faq-question {
        margin: 0;
        color: var(--ink);
        font-size: 23px;
        font-weight: 800;
        line-height: 1.35;
      }

      .faq-answer {
        margin: 0;
      }

      .help-section {
        padding: 30px 0 0;
        margin-top: 56px;
        scroll-margin-top: calc(var(--nav-height) + 26px);
      }

      .help-panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        min-height: auto;
      }

      .help-panel p {
        max-width: 620px;
        margin: 0;
        color: #303642;
        font-size: 17px;
        line-height: 1.65;
      }

      .text-link {
        display: inline-flex;
        align-items: center;
        align-self: flex-end;
        gap: 10px;
        color: var(--ink);
        font-weight: 700;
      }

      .text-link svg {
        width: 18px;
        height: 18px;
      }

      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        min-height: 86px;
        color: var(--muted);
        font-size: 13px;
      }

      .article .footer {
        margin-top: 72px;
        border-top: 1px solid var(--line);
      }

      .footer-links {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .toast {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 120;
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: min(360px, calc(100vw - 48px));
        padding: 14px 16px;
        color: #fff;
        background: #10141d;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px);
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .toast.show {
        opacity: 1;
        transform: translateY(0);
      }

      .toast.center {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        justify-content: center;
        min-width: 108px;
        background: rgba(16, 20, 29, 0.86);
        transform: translate(-50%, calc(-50% + 12px));
      }

      .toast.center.show {
        transform: translate(-50%, -50%);
      }

      @media (max-width: 1180px) {
        .doc-shell {
          grid-template-columns: 220px minmax(0, 1fr);
          gap: 42px;
          width: min(100% - 48px, 980px);
        }

        .page-toc {
          display: none;
        }

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



      /* Synced old homepage and mobile docs behavior. */
      .view[hidden],
      .docs-backdrop[hidden],
      .mobile-doc-menu[hidden] {
        display: none !important;
      }

      .nav-action {
        display: inline-flex;
        align-items: center;
        gap: 12px;
      }

      .mobile-doc-menu {
        display: none;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        color: var(--ink);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        cursor: pointer;
      }

      .mobile-doc-menu svg {
        width: 18px;
        height: 18px;
      }

      #top,
      #catalogue,
      #install,
      #community {
        scroll-margin-top: 0;
      }

      .catalogue {
        --catalogue-gap: clamp(22px, 1.55vw, 32px);
        --catalogue-side: clamp(48px, 2.8vw, 72px);
        --catalogue-card-width: clamp(
          280px,
          calc((100vw - (var(--catalogue-side) * 2) - (var(--catalogue-gap) * 3)) / 4),
          460px
        );
        --catalogue-body-height: clamp(196px, 18vw, 226px);
        justify-items: stretch;
        padding: clamp(64px, 7svh, 92px) 0 clamp(68px, 8svh, 96px);
        overflow-x: clip;
        overflow-y: visible;
        min-width: 0;
        scroll-margin-top: var(--nav-height);
      }

      html[lang="zh-CN"] .catalogue {
        --catalogue-body-height: clamp(148px, 12vw, 156px);
      }

      .catalogue .section-inner {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding-inline: 0;
        overflow: visible;
      }

      .catalogue .section-head {
        width: min(calc(100% - 72px), 1020px);
        max-width: 1020px;
        margin: 0 auto 56px;
        text-align: center;
      }

      .catalogue h2 {
        display: block;
        width: 100%;
        max-width: 860px;
        margin-right: auto;
        margin-left: auto;
        overflow-wrap: break-word;
        text-wrap: balance;
        text-align: center;
      }

      .catalogue .section-copy {
        max-width: var(--home-section-copy-width);
        margin: 0 auto;
      }

      .catalogue-rail {
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        gap: var(--catalogue-gap);
        padding: 0 var(--catalogue-side) 8px;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        scroll-padding-left: var(--catalogue-side);
        scroll-snap-type: x proximity;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .catalogue-rail::-webkit-scrollbar {
        display: none;
      }

      .catalogue .workbench-card {
        display: grid;
        flex: 0 0 var(--catalogue-card-width);
        width: var(--catalogue-card-width);
        min-width: 0;
        height: auto;
        aspect-ratio: 1 / 1.72;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) var(--catalogue-body-height);
        padding: clamp(18px, 1.9vw, 24px);
        overflow: hidden;
        scroll-snap-align: start;
      }

      .catalogue .workbench-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: inherit;
        pointer-events: none;
        transition: border-color 160ms ease, box-shadow 160ms ease;
      }

      .catalogue .workbench-card:hover::before,
      .catalogue .workbench-card:focus-visible::before {
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      .catalogue .card-visual {
        display: grid;
        width: min(100%, 300px);
        aspect-ratio: 1;
        min-height: auto;
        margin: 0 auto;
        align-self: center;
        place-items: center;
      }

      .catalogue .card-visual svg {
        width: min(82%, 256px);
        height: auto;
      }

      .catalogue .card-body {
        align-self: stretch;
        display: grid;
        min-width: 0;
        height: var(--catalogue-body-height);
        min-height: 0;
        grid-template-rows: auto auto 1fr;
        align-content: start;
      }

      .catalogue .workbench-card h3,
      .catalogue .workbench-card p {
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .catalogue .status-row {
        align-self: end;
      }

      .codebox pre {
        margin: 0;
      }

      .codebox .comment {
        color: #8b929d;
      }

      .community {
        padding: 132px 0 54px;
      }

      .community-pass {
        margin: 44px auto 34px;
      }

      .puc-template-member-pass {
        --pass-stage: #f6f8fb;
        --pass-stage-strong: #ffffff;
        --pass-card: rgba(255, 255, 255, 0.98);
        --pass-card-soft: #f7f8fa;
        --pass-text: #06080d;
        --pass-muted: #707784;
        --pass-line: rgba(15, 23, 42, 0.1);
        --pass-line-strong: rgba(15, 23, 42, 0.14);
        --pass-shadow: 0 26px 80px rgba(15, 23, 42, 0.13);
        --pass-stage-bottom-fade: linear-gradient(
          180deg,
          rgba(246, 248, 251, 0) 0%,
          rgba(246, 248, 251, 0.18) 32%,
          rgba(246, 248, 251, 0.72) 74%,
          rgba(246, 248, 251, 0.98) 100%
        );
        position: relative;
        isolation: isolate;
        width: min(100%, 1120px);
        min-height: 500px;
        aspect-ratio: 1120 / 500;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: clamp(24px, 4.4vw, 44px) clamp(24px, 4.4vw, 44px) 0;
        color: var(--pass-text);
        text-align: left;
        background: linear-gradient(180deg, var(--pass-stage-strong) 0%, #fbfcfd 58%, var(--pass-stage) 100%);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 8px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

      .puc-template-member-pass::after {
        content: "";
        position: absolute;
        z-index: 4;
        right: 0;
        bottom: 0;
        left: 0;
        height: 68px;
        pointer-events: none;
        background: var(--pass-stage-bottom-fade);
        box-shadow: inset 0 -18px 28px rgba(15, 23, 42, 0.035);
      }

      .puc-template-member-pass .puc-ambient,
      .puc-template-member-pass .puc-backdrop-ui,
      .puc-template-member-pass .puc-mask,
      .puc-template-member-pass .puc-grain {
        display: none;
      }

      .puc-template-member-pass .puc-main-card {
        position: relative;
        z-index: 3;
        width: min(690px, 100%);
        overflow: hidden;
        border: 1px solid var(--pass-line-strong);
        border-bottom: 0;
        border-radius: 22px 22px 0 0;
        background: var(--pass-card);
        box-shadow: var(--pass-shadow);
      }

      .puc-template-member-pass .pass-content {
        padding: clamp(32px, 4vw, 44px) clamp(32px, 4vw, 44px) calc(clamp(32px, 4vw, 44px) + 16px);
      }

      .puc-template-member-pass .pass-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: start;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--pass-line);
      }

      .puc-template-member-pass h2 {
        margin: 0;
        color: var(--pass-text);
        font-size: var(--home-section-title-size);
        line-height: 1.1;
        font-weight: var(--home-section-title-weight);
        letter-spacing: 0;
      }

      .puc-template-member-pass .pass-kicker {
        margin-top: 12px;
        color: var(--pass-muted);
        font-size: 18px;
        line-height: 1.4;
      }

      .puc-template-member-pass .pass-badge {
        position: relative;
        width: 88px;
        height: 88px;
        overflow: hidden;
        display: grid;
        place-items: center;
        color: #fff;
        background: #0b1120;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 14px;
        box-shadow: inset 0 0 32px rgba(255, 255, 255, 0.13);
      }

      .puc-template-member-pass .pass-avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .puc-template-member-pass .pass-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 30px 0;
        border: 1px solid var(--pass-line);
        border-radius: 16px;
        background: var(--pass-card-soft);
      }

      .puc-template-member-pass .pass-stat {
        display: grid;
        min-width: 0;
        gap: 8px;
        padding: 18px 12px;
        text-align: center;
      }

      .puc-template-member-pass .pass-stat + .pass-stat {
        border-left: 1px solid var(--pass-line);
      }

      .puc-template-member-pass .pass-stat strong {
        color: var(--pass-text);
        font-size: 34px;
        line-height: 1;
        font-weight: 820;
      }

      .puc-template-member-pass .pass-stat span {
        color: var(--pass-muted);
        font-size: 14px;
        line-height: 1.2;
      }

      .puc-template-member-pass .pass-copy {
        max-width: 620px;
        margin: 0;
        color: var(--pass-text);
        font-size: var(--home-section-copy-size);
        line-height: var(--home-section-copy-line);
        font-weight: 500;
      }

      .docs-backdrop {
        display: none;
      }

      @media (max-width: 1180px) {
        .catalogue {
          --catalogue-gap: 16px;
          --catalogue-side: 24px;
          --catalogue-card-width: clamp(
            260px,
            calc((100vw - (var(--catalogue-side) * 2) - (var(--catalogue-gap) * 3)) / 4),
            336px
          );
          --catalogue-body-height: clamp(196px, 17vw, 204px);
          min-height: calc(100svh - var(--nav-height));
          padding: clamp(36px, 5svh, 58px) 0 clamp(44px, 6svh, 68px);
        }

        html[lang="zh-CN"] .catalogue {
          --catalogue-body-height: clamp(150px, 13.5vw, 160px);
        }

        .catalogue .section-head {
          width: min(calc(100% - 48px), 760px);
          max-width: 760px;
          margin-bottom: clamp(34px, 5svh, 48px);
        }

        .catalogue h2 {
          width: min(100%, 680px);
          max-width: 680px;
        }

        .catalogue .workbench-card {
          padding: clamp(17px, 1.9vw, 22px);
        }

        .catalogue .card-visual svg {
          width: min(78%, 230px);
        }

        .catalogue .workbench-card h3 {
          font-size: 20px;
        }

        .catalogue .workbench-card p {
          font-size: 14px;
        }
      }

      @media (max-width: 820px) {
        :root {
          --home-section-title-size: clamp(30px, 8vw, 38px);
          --home-section-copy-size: 16px;
          --home-section-copy-line: 1.55;
          --home-section-copy-margin: 0 auto 34px;
          --home-card-title-size: 20px;
          --home-card-copy-size: 14px;
          --home-card-copy-line: 1.5;
          --home-card-copy-margin: 0 0 20px;
        }

        .mobile-doc-menu:not([hidden]) {
          display: inline-flex;
        }

        body.docs-menu-open {
          overflow: hidden;
        }

        .docs-backdrop {
          position: fixed;
          inset: var(--nav-height) 0 0;
          z-index: 60;
          display: block;
          background: rgba(5, 6, 8, 0.28);
          opacity: 0;
          pointer-events: none;
          transition: opacity 160ms ease;
        }

        body.docs-menu-open .docs-backdrop {
          opacity: 1;
          pointer-events: auto;
        }

        .doc-shell {
          grid-template-columns: 1fr;
          gap: 28px;
          width: min(100% - 28px, 560px);
          padding: 28px 0 82px;
        }

        .side-panel {
          position: fixed;
          top: var(--nav-height);
          right: 0;
          bottom: 0;
          z-index: 70;
          width: min(82vw, 312px);
          max-height: none;
          padding: 18px;
          overflow-y: auto;
          background: #fff;
          border-left: 1px solid var(--line);
          box-shadow: -24px 0 70px rgba(10, 14, 24, 0.14);
          transform: translateX(104%);
          transition: transform 180ms ease;
        }

        body.docs-menu-open .side-panel {
          transform: translateX(0);
        }

        .side-nav {
          display: grid;
          gap: 8px;
          padding-bottom: 0;
          overflow-x: visible;
        }

        .side-nav a {
          width: 100%;
          min-height: 44px;
          padding: 0 14px;
          white-space: normal;
          font-size: 15px;
        }

        .catalogue {
          --catalogue-gap: 14px;
          --catalogue-side: clamp(16px, 4.2vw, 22px);
          --catalogue-card-width: clamp(
            272px,
            calc(100vw - (var(--catalogue-side) * 2) - 68px),
            304px
          );
          --catalogue-body-height: clamp(188px, 52vw, 204px);
          padding: 42px 0 58px;
        }

        html[lang="zh-CN"] .catalogue {
          --catalogue-body-height: clamp(142px, 37vw, 154px);
        }

        .catalogue .section-inner {
          width: 100%;
          padding-inline: 0;
        }

        .catalogue .section-head {
          width: min(calc(100vw - 44px), 540px);
          max-width: 540px;
          margin: 0 auto 34px;
        }

        .catalogue h2 {
          width: 100%;
          max-width: 100%;
        }

        .catalogue .section-copy {
          max-width: 540px;
        }

        .catalogue-rail {
          gap: var(--catalogue-gap);
          padding: 0 var(--catalogue-side) 10px;
          scroll-padding-left: var(--catalogue-side);
        }

        .catalogue .workbench-card {
          flex: 0 0 var(--catalogue-card-width);
          width: var(--catalogue-card-width);
          aspect-ratio: 1 / 1.48;
          min-height: 0;
          padding: 20px;
        }

        .catalogue .card-visual {
          width: min(76%, 252px);
        }

        .catalogue .card-visual svg {
          width: min(100%, 220px);
          height: auto;
        }

        .community-pass {
          margin: 34px auto 28px;
        }

        .puc-template-member-pass {
          width: min(100%, 420px);
          min-height: 0;
          aspect-ratio: auto;
          padding: 18px 18px 0;
        }

        .puc-template-member-pass .puc-main-card {
          border-radius: 18px 18px 0 0;
        }

        .puc-template-member-pass .pass-content {
          padding: 26px 20px 40px;
        }

        .puc-template-member-pass .pass-head {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        .puc-template-member-pass h2 {
          font-size: 30px;
        }

        .puc-template-member-pass .pass-kicker {
          font-size: 15px;
        }

        .puc-template-member-pass .pass-badge {
          width: 68px;
          height: 68px;
        }

        .puc-template-member-pass .pass-stats {
          margin: 22px 0;
        }

        .puc-template-member-pass .pass-stat {
          padding: 14px 8px;
        }

        .puc-template-member-pass .pass-stat strong {
          font-size: 26px;
        }

        .puc-template-member-pass .pass-stat span {
          font-size: 12px;
        }

        .puc-template-member-pass .pass-copy {
          font-size: 17px;
        }
      }

      @media (max-width: 820px) {
        :root {
          --nav-height: 68px;
        }

        .nav-inner,
        .section-inner {
          width: min(100% - 28px, 560px);
        }

        .nav-inner {
          grid-template-columns: 1fr auto;
          min-height: var(--nav-height);
        }

        .nav-links {
          display: none;
        }

        .brand {
          gap: 9px;
          font-size: 15px;
        }

        .brand-cube {
          width: 29px;
          height: 29px;
        }

        .language-switch {
          min-height: 32px;
        }

        .language-switch button {
          min-width: 38px;
          min-height: 32px;
          padding: 0 9px;
          font-size: 11px;
        }

        .hero {
          min-height: calc(100svh - var(--nav-height) - 28px);
          padding: 72px 0 66px;
        }

        .hero h1 {
          margin-bottom: 22px;
          font-size: 44px;
          line-height: 1.05;
        }

        .hero-primary {
          font-size: 20px;
        }

        .hero-actions {
          grid-template-columns: 1fr;
          width: min(260px, 100%);
          margin: 0 auto;
        }

        .hero-actions .button.secondary {
          display: none;
        }

        .catalogue,
        .install,
        .community {
          padding: 82px 0 76px;
        }

        .workbench-grid {
          display: flex;
          gap: 16px;
          margin: 0 -14px;
          padding: 0 14px 12px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
        }

        .workbench-grid::-webkit-scrollbar {
          display: none;
        }

        .workbench-card {
          flex: 0 0 312px;
          width: 312px;
          min-height: 420px;
          scroll-snap-align: start;
        }

        .install-flow {
          width: 100%;
          margin-top: 34px;
        }

        .install-flow-card,
        .install-flow-card .puc-main-card {
          min-height: 0;
          padding: 0;
        }

        .install-flow-card .step-grid {
          grid-template-columns: 1fr;
          gap: 18px;
          padding-top: 0;
        }

        .install-flow-card .flow-step {
          min-height: 0;
          grid-template-rows: auto auto;
          gap: 18px;
          padding: 22px;
        }

        .install-flow-card .shot {
          min-height: 260px;
        }

        .install-flow-card .repo-shot {
          gap: 16px;
          padding: 22px;
        }

        .install-flow-card .flow-step h4 {
          font-size: 18px;
          line-height: 1.22;
        }

        .install-flow-card .step-top p {
          max-width: none;
          font-size: 13px;
          font-weight: 400;
          line-height: 1.55;
        }

        .install-flow-card .prompt-title {
          padding: 26px 20px 8px;
          font-size: 17px;
        }

        .install-flow-card .composer {
          margin: 20px;
          padding: 18px;
        }

        .install-flow-card .composer-text {
          min-height: 88px;
          font-size: 14px;
        }

        .install-flow-card .workspace-shot {
          grid-template-columns: 86px 1fr;
        }

        .benefits,
        .case-grid,
        .faq-item {
          grid-template-columns: 1fr;
        }

        .benefit {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }

        .doc-shell {
          grid-template-columns: 1fr;
          gap: 28px;
          width: min(100% - 28px, 560px);
          padding: 28px 0 82px;
        }

        .side-panel {
          position: static;
          max-height: none;
        }

        .side-nav {
          display: flex;
          gap: 8px;
          padding-bottom: 4px;
          overflow-x: auto;
          scrollbar-width: none;
        }

        .side-nav::-webkit-scrollbar {
          display: none;
        }

        .side-nav a {
          flex: 0 0 auto;
          width: auto;
          white-space: nowrap;
        }

        .article h1 {
          font-size: 34px;
        }

        .legal-hero h1 {
          font-size: 28px;
        }

        .article-subtitle {
          margin-bottom: 28px;
          font-size: 19px;
        }

        .article p,
        .faq-answer,
        .step-item p {
          font-size: 16px;
        }

        .article-section {
          padding-top: 40px;
          margin-top: 40px;
        }

        .overview-index {
          padding-top: 0;
          margin-top: 34px;
        }

        .overview-entry-card {
          grid-template-columns: 1fr;
          gap: 18px;
          min-height: auto;
          padding: 22px;
        }

        .overview-entry-copy strong {
          font-size: 22px;
        }

        .overview-entry-copy span {
          font-size: 15px;
          line-height: 1.65;
        }

        .overview-entry-status {
          display: flex;
          gap: 18px;
          min-width: 0;
        }

        .step-item {
          grid-template-columns: 36px minmax(0, 1fr);
          gap: 16px;
        }

        .step-index {
          width: 32px;
          height: 32px;
        }

        .faq-item {
          gap: 10px;
          padding: 0;
        }

        .article .faq-question {
          font-size: 20px;
        }

        .help-panel {
          align-items: stretch;
          flex-direction: column;
          gap: 18px;
        }

        .text-link {
          align-self: flex-start;
        }

        .footer {
          flex-direction: column;
          align-items: flex-start;
          padding: 22px 0;
        }
      }

      @media (max-width: 820px) {
        .mobile-doc-menu:not([hidden]) {
          display: inline-flex;
        }

        body.docs-menu-open {
          overflow: hidden;
        }

        .docs-backdrop {
          position: fixed;
          inset: var(--nav-height) 0 0;
          z-index: 60;
          display: block;
          background: rgba(5, 6, 8, 0.28);
          opacity: 0;
          pointer-events: none;
          transition: opacity 160ms ease;
        }

        body.docs-menu-open .docs-backdrop {
          opacity: 1;
          pointer-events: auto;
        }

        .side-panel {
          position: fixed;
          top: var(--nav-height);
          right: 0;
          bottom: 0;
          z-index: 70;
          width: min(82vw, 312px);
          max-height: none;
          padding: 18px;
          overflow-y: auto;
          background: #fff;
          border-left: 1px solid var(--line);
          box-shadow: -24px 0 70px rgba(10, 14, 24, 0.14);
          transform: translateX(104%);
          transition: transform 180ms ease;
        }

        body.docs-menu-open .side-panel {
          transform: translateX(0);
        }

        .side-nav {
          display: grid;
          gap: 8px;
          padding-bottom: 0;
          overflow-x: visible;
          scrollbar-width: auto;
        }

        .side-nav a {
          width: 100%;
          min-height: 44px;
          padding: 0 14px;
          white-space: normal;
          font-size: 15px;
        }
      }

      /* Homepage parity with the original xusulabs.html. */
      #homeView .codebox {
        position: relative;
        overflow: hidden;
        margin: 0 0 14px;
        padding: 0;
        color: inherit;
        background: var(--panel);
        border: 1px solid #1e2530;
        border-radius: var(--radius);
        box-shadow: 0 18px 38px rgba(11, 16, 26, 0.14);
      }

      #homeView .codebox pre {
        margin: 0;
        padding: 25px 28px;
        overflow-x: auto;
        color: #61f29d;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 15px;
        line-height: 1.6;
        white-space: pre-wrap;
      }

      #homeView .codebox .comment {
        color: #99a2b3;
      }

      #homeView .community {
        padding: 132px 0 54px;
        background: var(--paper-soft);
      }

      #homeView .community-panel {
        width: 100%;
        padding: 54px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 20px 60px rgba(8, 11, 18, 0.05);
        text-align: center;
      }

      #homeView .community-panel > h2 {
        margin: var(--home-section-title-margin);
        font-size: var(--home-section-title-size);
        font-weight: var(--home-section-title-weight);
        line-height: var(--home-section-title-line);
        letter-spacing: 0;
      }

      #homeView .community-pass {
        margin: 44px auto 34px;
      }

      #homeView .community-cta {
        width: min(540px, 100%);
        min-height: 62px;
        margin: 0 auto 34px;
        font-size: 18px;
      }

      #homeView .benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid var(--line);
      }

      #homeView .benefit {
        display: grid;
        gap: 6px;
        padding: 20px;
        border-right: 1px solid var(--line);
      }

      #homeView .benefit:last-child {
        border-right: 0;
      }

      #homeView .benefit strong {
        font-size: var(--home-label-size);
        font-weight: var(--home-label-weight);
        line-height: 1.35;
      }

      #homeView .benefit span {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      @media (max-width: 820px) {
        #homeView .install,
        #homeView .community {
          padding: 108px 0 76px;
        }

        #homeView .catalogue {
          padding: 42px 0 58px;
        }

        #homeView .hero-actions {
          gap: 0;
        }

        #homeView .community-panel {
          padding: 24px 12px;
        }

        #homeView .community-pass {
          margin: 34px auto 28px;
        }

        #homeView .puc-template-member-pass {
          width: min(100%, 420px);
          min-height: 0;
          aspect-ratio: auto;
          padding: 8px 8px 0;
          border-radius: 8px;
        }

        #homeView .puc-template-member-pass::after {
          height: 48px;
          box-shadow: inset 0 -12px 22px rgba(15, 23, 42, 0.03);
        }

        #homeView .puc-template-member-pass .puc-main-card {
          width: 100%;
          margin: 0 auto;
          border-radius: 18px 18px 0 0;
        }

        #homeView .puc-template-member-pass .pass-content {
          padding: 24px 18px 42px;
        }

        #homeView .puc-template-member-pass .pass-head {
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 16px;
          padding-bottom: 24px;
        }

        #homeView .puc-template-member-pass h2 {
          font-size: 29px;
        }

        #homeView .puc-template-member-pass .pass-kicker {
          font-size: 15px;
        }

        #homeView .puc-template-member-pass .pass-badge {
          width: 66px;
          height: 66px;
          border-radius: 12px;
        }

        #homeView .puc-template-member-pass .pass-stats {
          margin: 24px 0;
        }

        #homeView .puc-template-member-pass .pass-stat {
          padding: 15px 8px;
        }

        #homeView .puc-template-member-pass .pass-stat strong {
          font-size: 24px;
        }

        #homeView .puc-template-member-pass .pass-stat span {
          font-size: 12px;
        }

        #homeView .puc-template-member-pass .pass-copy {
          font-size: 17px;
          line-height: 1.58;
        }

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

        #homeView .benefit {
          min-width: 0;
          padding: 18px 8px;
          text-align: center;
          border-right: 1px solid var(--line);
          border-bottom: 0;
        }

        #homeView .benefit:last-child {
          border-right: 0;
        }

        #homeView .benefit strong {
          font-size: 13px;
          line-height: 1.35;
        }

        #homeView .benefit span {
          font-size: 11px;
          line-height: 1.45;
        }

        #homeView .footer-links {
          flex-wrap: wrap;
        }
      }

      @media (max-width: 390px) {
        .install-flow-card,
        .install-flow-card .puc-main-card {
          min-height: 0;
          padding: 0;
        }

        .install-flow-card .flow-step {
          padding: 18px;
        }

        .install-flow-card .repo-title,
        .install-flow-card .prompt-title {
          font-size: 17px;
        }

        .install-flow-card .composer-text {
          min-height: 76px;
        }

        #homeView .puc-template-member-pass .pass-head {
          gap: 12px;
          padding-bottom: 20px;
        }

        #homeView .puc-template-member-pass .pass-badge {
          width: 56px;
          height: 56px;
          border-radius: 10px;
        }

        #homeView .puc-template-member-pass h2 {
          font-size: 25px;
        }

        #homeView .puc-template-member-pass .pass-kicker {
          font-size: 14px;
          margin-top: 8px;
        }

        #homeView .puc-template-member-pass .pass-stats {
          margin: 20px 0;
        }

        #homeView .puc-template-member-pass .pass-stat {
          padding: 13px 6px;
        }

        #homeView .puc-template-member-pass .pass-stat strong {
          font-size: 22px;
        }

        #homeView .puc-template-member-pass .pass-stat span {
          font-size: 11px;
        }
      }

      @media (min-width: 901px) {
        .install-flow {
          margin-top: 42px;
        }

        .install-flow-card .step-grid {
          gap: 18px;
        }

        .install-flow-card .flow-step {
          min-height: 380px;
          grid-template-rows: auto minmax(0, 1fr);
          gap: 16px;
          padding: 20px;
        }

        .install-flow-card .step-top {
          gap: 12px;
        }

        .install-flow-card .step-index {
          width: 34px;
          height: 34px;
          font-size: 15px;
        }

        .install-flow-card .flow-step h4 {
          margin-bottom: 6px;
          font-size: 18px;
          font-weight: 700;
          line-height: 1.22;
        }

        .install-flow-card .step-top p {
          max-width: 290px;
          font-size: 13px;
          font-weight: 400;
          line-height: 1.5;
        }

        .install-flow-card .shot {
          min-height: 238px;
        }

        .install-flow-card .repo-shot {
          gap: 14px;
          padding: 22px;
        }

        .install-flow-card .repo-title {
          font-size: 17px;
          line-height: 1.3;
        }

        .install-flow-card .repo-label {
          font-size: 13px;
        }

        .install-flow-card .repo-url {
          padding: 12px;
          font-size: 12px;
        }

        .install-flow-card .copy-mark {
          width: 18px;
          height: 18px;
        }

        .install-flow-card .prompt-title {
          padding: 24px 18px 4px;
          font-size: 17px;
          font-weight: 650;
        }

        .install-flow-card .composer {
          margin: 14px 18px 18px;
          padding: 16px;
          border-radius: 18px;
        }

        .install-flow-card .composer-text {
          min-height: 74px;
          font-size: 12px;
          line-height: 1.48;
        }

        .install-flow-card .plus {
          width: 22px;
          height: 22px;
          font-size: 22px;
        }

        .install-flow-card .send {
          width: 34px;
          height: 34px;
          font-size: 18px;
        }

        .install-flow-card .workspace-shot {
          grid-template-columns: 86px 1fr;
          min-height: 238px;
        }

        .install-flow-card .workspace-side {
          padding: 18px 14px;
        }

        .install-flow-card .traffic {
          margin-bottom: 14px;
        }

        .install-flow-card .side-line {
          height: 8px;
          margin-bottom: 9px;
        }

        .install-flow-card .workspace-main {
          padding: 18px;
        }

        .install-flow-card .task-title {
          font-size: 14px;
          line-height: 1.35;
        }

        .install-flow-card .task-list {
          gap: 7px;
        }

        .install-flow-card .task-row {
          font-size: 11px;
          line-height: 1.42;
        }

        .install-flow-card .start-input {
          min-height: 34px;
          font-size: 12px;
        }

        .install-flow-card .mini-send {
          width: 24px;
          height: 24px;
          font-size: 13px;
        }
      }