.feature-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
    .feature-item { display: flex; gap: 16px; padding: 16px; background: var(--color-background); border-radius: 12px; align-items: flex-start; }
    .feature-icon { font-size: var(--font-size-5xl, 28px); flex-shrink: 0; }
    .feature-content h4 { margin: 0 0 var(--spacing-sm) 0; font-size: var(--font-size-sm, 14px); color: var(--color-secondary); }
    .feature-content p { margin: 0; font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); }

    .architecture-diagram {
        display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm);
        margin: 24px 0; padding: 24px; background: var(--color-background); border-radius: 12px;
    }
    .arch-row { width: 100%; max-width: 500px; display: flex; justify-content: center; gap: 12px; }
    .arch-row-split { display: flex; gap: 12px; }
    .arch-box {
        flex: 1; padding: 14px 18px; border-radius: var(--border-radius-sm); text-align: center; border: 2px solid; min-width: 0;
    }
    .arch-box strong { display: block; font-size: var(--font-size-sm, 14px); margin-bottom: 4px; }
    .arch-box small { font-size: var(--font-size-xxs, 11px); opacity: 0.9; }
    .arch-box.quaternary { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%); border-color: var(--color-secondary-hover); color: var(--color-white, var(--color-hero-text, #fff)); }
    .arch-box.secondary { background: linear-gradient(135deg, var(--color-info) 0%, var(--color-primary-hover) 100%); border-color: var(--color-primary-hover); color: var(--color-white, var(--color-hero-text, #fff)); }
    .arch-box.tertiary { background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark, var(--color-orange-hover, #ea6a0d)) 100%); border-color: var(--color-warning-dark, var(--color-orange-hover, #ea6a0d)); color: var(--color-white, var(--color-hero-text, #fff)); }
    .arch-box.warning-box { background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning) 100%); border-color: var(--color-warning); color: var(--color-white, var(--color-hero-text, #fff)); }
    .arch-box.error-box { background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error) 100%); border-color: var(--color-error); color: var(--color-white, var(--color-hero-text, #fff)); }
    .arch-arrow { font-size: var(--font-size-3xl, 24px); color: var(--color-text-muted); font-weight: var(--font-weight-bold, 700); }
    .arch-arrow-split { display: flex; gap: 120px; font-size: var(--font-size-3xl, 24px); color: var(--color-text-muted); font-weight: var(--font-weight-bold, 700); }
    .arch-arrow-right { font-size: var(--font-size-3xl, 24px); color: var(--color-text-muted); font-weight: var(--font-weight-bold, 700); margin-left: 80px; }

    .steps-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
    .step-item { display: flex; gap: 16px; padding: 16px; background: var(--color-background); border-radius: 12px; align-items: flex-start; }
    .step-number {
        width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
        background: var(--color-primary); color: var(--color-white, var(--color-hero-text, #fff)); font-weight: var(--font-weight-bold, 700); font-size: var(--font-size-base, 16px);
        display: flex; align-items: center; justify-content: center;
    }
    .step-content h4 { margin: 0 0 4px 0; font-size: var(--font-size-sm, 14px); color: var(--color-secondary); }
    .step-content p { margin: 0; font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); }

    .statuses-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
    .status-item { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--border-radius-sm); background: var(--color-background); }
    .library-status-cell { display: inline-block; min-width: 100px; text-align: center; }
    .status-item p { margin: 0; font-size: var(--font-size-sm, 14px); color: var(--color-text); }

    .visibility-table { width: 100%; border-collapse: collapse; margin: 20px 0; background: var(--color-card-background); border-radius: var(--border-radius-sm); overflow: hidden; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1)); }
    .visibility-table th, .visibility-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); }
    .visibility-table th { background: var(--color-background); font-weight: var(--font-weight-semibold, 600); font-size: var(--font-size-xs, 12px); }
    .visibility-table td { font-size: var(--font-size-sm, 14px); }

    .note-block { border-radius: var(--border-radius-sm); padding: 16px; margin: 20px 0; font-size: var(--font-size-sm, 14px); border: 1px solid; }
    .note-block.warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning-dark); }
    .note-block.info { background: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info-dark); }

    .code-block { background: var(--color-background); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-sm); padding: 16px; font-family: monospace; font-size: var(--font-size-xs, 12px); overflow-x: auto; white-space: pre; margin: 16px 0; }

    @media (max-width: 575px) {
        .feature-item, .step-item { flex-direction: column; text-align: center; }
        .status-item { flex-direction: column; text-align: center; }
        .arch-row-split { flex-direction: column; }
        .arch-arrow-split { gap: 40px; }
    }