.api-hub-page {
    color: #e6e6f0;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 28%),
        linear-gradient(180deg, #09090e, #0c0c18);
}

.api-hub {
    padding-bottom: 4rem;
}

.api-hub .container {
    width: min(var(--site-shell-width, 1440px), 100%);
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 3vw, 1.75rem);
    box-sizing: border-box;
}

.api-section {
    padding: 4rem 0;
}

.api-section--compact-top {
    padding-top: 1rem;
}

.api-kicker {
    margin: 0 0 0.75rem;
    color: #7dd3fc;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.api-section-heading {
    max-width: 54rem;
    margin-bottom: 2rem;
    padding-inline: 0.15rem;
}

.api-section-heading--tight {
    margin-bottom: 1.4rem;
}

.api-section-heading h2,
.api-hero h1,
.api-final-cta__panel h2 {
    margin: 0;
    color: #ffffff;
    line-height: 1.08;
}

.api-section-heading h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
}

.api-section-heading p,
.api-hero p,
.api-card p,
.api-mini-card p,
.api-method-card p,
.api-example-card p,
.api-task-card p,
.api-challenge-card p,
.api-path-card p,
.api-lesson-card p,
.api-hero-panel li,
.api-lab-helper li {
    color: #9090b0;
    line-height: 1.75;
}

.api-sticky-nav {
    position: sticky;
    top: 4.4rem;
    z-index: 30;
    padding: 0.85rem 0;
    backdrop-filter: blur(20px) saturate(160%);
    background: rgba(9, 9, 14, 0.90);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.api-sticky-nav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
}

.api-roadmap-grid,
.api-response-guide {
    display: grid;
    gap: 1rem;
}

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

.api-roadmap-card,
.api-response-guide__card {
    padding: 1.25rem;
    border-radius: 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 15, 26, 0.90);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.api-roadmap-card__step {
    display: inline-flex;
    margin-bottom: 0.9rem;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.18);
    color: #38bdf8;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.api-roadmap-card h3,
.api-response-guide__card h3 {
    margin: 0 0 0.55rem;
    color: #e6e6f0;
}

.api-roadmap-card p,
.api-response-guide__card p {
    margin: 0;
    color: #9090b0;
    line-height: 1.7;
}

.api-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    color: #9090b0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-decoration: none;
    transition: all 0.2s ease;
}

.api-nav-link:hover,
.api-nav-link.is-active {
    color: #0369a1;
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.18);
}

.api-hero {
    padding-top: 3rem;
}

.api-hero-grid,
.api-lab-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.95fr);
}

.api-hero-copy,
.api-hero-panel,
.api-card,
.api-method-card,
.api-example-card,
.api-task-card,
.api-challenge-card,
.api-path-card,
.api-lesson-card,
.api-lab-panel,
.api-lab-output,
.api-final-cta__panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 15, 26, 0.90);
    border-radius: 1.5rem;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.api-hero-copy,
.api-hero-panel,
.api-card,
.api-method-card,
.api-example-card,
.api-task-card,
.api-challenge-card,
.api-path-card,
.api-lesson-card,
.api-lab-panel,
.api-lab-output,
.api-final-cta__panel {
    padding: 1.3rem;
}

.api-hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.7rem);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.api-hero-copy,
.api-hero-panel {
    min-width: 0;
}

.api-lead {
    max-width: 42rem;
    font-size: 1.08rem;
    margin-top: 1rem;
}

.api-hero-actions,
.api-badges,
.api-lab-actions,
.api-lab-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.api-badges {
    margin-top: 1.4rem;
}

.api-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.8rem 1.15rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.api-btn:hover,
.api-copy-btn:hover,
.api-reveal-btn:hover,
.api-preset-btn:hover,
.api-lab-load-btn:hover {
    transform: translateY(-1px);
}

.api-btn--primary {
    color: #0c2233;
    background: linear-gradient(135deg, #67e8f9, #38bdf8);
}

.api-btn--secondary {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(125, 211, 252, 0.24);
}

.api-btn--ghost {
    color: #9090b0;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}

.api-badge,
.api-step-pill,
.api-method-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-weight: 700;
}

.api-badge {
    padding: 0.45rem 0.85rem;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.14);
    border: 1px solid rgba(125, 211, 252, 0.18);
}

.api-panel-card {
    padding: 1rem;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.api-panel-card h2 {
    margin: 0 0 0.8rem;
    color: #0f172a;
    font-size: 1.1rem;
}

.api-panel-card ul,
.api-lab-helper ul {
    margin: 0;
    padding-left: 1.2rem;
}

.api-stat-grid,
.api-card-grid,
.api-method-grid,
.api-example-grid,
.api-path-grid,
.api-quiz-list {
    display: grid;
    gap: 1rem;
}

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

.api-card-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.api-card-grid--two,
.api-method-grid,
.api-example-grid,
.api-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.api-stat-card,
.api-metric-card {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.api-stat-card strong,
.api-metric-card strong {
    display: block;
    font-size: 1.45rem;
    color: #0f172a;
}

.api-stat-card span,
.api-metric-card span {
    display: block;
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.88rem;
}

.api-inline-link {
    display: inline-flex;
    margin-top: 0.8rem;
    color: #0369a1;
    text-decoration: none;
    font-weight: 700;
}

.api-lab-examples {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.api-lab-examples__heading {
    margin-bottom: 1rem;
}

.api-lab-examples__heading h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.2rem;
}

.api-lab-examples__heading p:last-child {
    margin: 0.55rem 0 0;
    color: #475569;
    line-height: 1.75;
}

.api-example-loader-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.58);
}

.api-example-loader-card__eyebrow {
    margin: 0 0 0.35rem;
    color: #7dd3fc;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.api-example-loader-card h3 {
    margin: 0 0 0.35rem;
    color: #0f172a;
    font-size: 1rem;
}

.api-example-loader-card p:last-child {
    margin: 0;
}

.api-lesson-stack {
    display: grid;
    gap: 1rem;
}

.api-lesson-card__meta,
.api-method-card__header,
.api-example-card__head,
.api-quiz-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.api-step-pill {
    padding: 0.42rem 0.8rem;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.16);
    color: #0369a1;
    font-size: 0.82rem;
}

.api-method-tag {
    padding: 0.38rem 0.7rem;
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.16);
    color: #0f766e;
    font-size: 0.8rem;
}

.api-lesson-card__body {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.9fr);
}

.api-flow {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.api-flow-step {
    position: relative;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.62);
}

.api-flow-step:not(:last-child)::after {
    content: "->";
    position: absolute;
    right: -0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #38bdf8;
    font-size: 1.2rem;
}

.api-table-wrap {
    overflow-x: auto;
}

.api-table {
    width: 100%;
    min-width: 52rem;
    border-collapse: collapse;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.api-table thead {
    background: rgba(14, 165, 233, 0.1);
}

.api-table th,
.api-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    text-align: left;
    vertical-align: top;
    color: #334155;
}

.api-code-block {
    overflow: hidden;
    margin-top: 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.92);
}

.api-code-block--response {
    margin-top: 1rem;
}

.api-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    color: #0369a1;
    font-size: 0.88rem;
    font-weight: 700;
}

.api-copy-btn,
.api-reveal-btn,
.api-preset-btn,
.api-lab-load-btn {
    appearance: none;
    cursor: pointer;
    border-radius: 999px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.api-copy-btn {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.86);
    color: #334155;
    padding: 0.45rem 0.8rem;
}

.api-reveal-btn,
.api-preset-btn,
.api-lab-load-btn {
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: rgba(14, 165, 233, 0.1);
    color: #0f172a;
    padding: 0.65rem 0.95rem;
}

.api-lab-load-btn {
    width: fit-content;
    margin-top: 0.85rem;
}

.api-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1.2;
}

.api-status-badge--ready {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.18);
}

.api-status-badge--loading {
    color: #b45309;
    background: rgba(245, 158, 11, 0.18);
}

.api-status-badge--success {
    color: #15803d;
    background: rgba(34, 197, 94, 0.18);
}

.api-status-badge--error {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.18);
}

.api-code-block pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
}

.api-code-block code,
.api-table code,
.api-task-card code,
.api-lab-helper code {
    color: #7c3aed;
    white-space: pre-wrap;
    word-break: break-word;
}

.api-code-block pre code {
    color: #334155;
}

.api-form-row {
    display: grid;
    gap: 1rem;
}

.api-form-row--inline {
    grid-template-columns: 12rem minmax(0, 1fr);
}

.api-form-grow {
    min-width: 0;
}

.api-lab-form label {
    display: block;
    margin-bottom: 1rem;
}

.api-lab-form span {
    display: block;
    margin-bottom: 0.5rem;
    color: #334155;
    font-weight: 700;
}

.api-lab-form input,
.api-lab-form select,
.api-lab-form textarea {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    padding: 0.9rem 1rem;
    outline: none;
}

.api-lab-form textarea {
    min-height: 7rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.api-lab-helper {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.api-response-guide {
    margin-top: 1rem;
}

.api-task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.api-reveal-panel {
    margin-top: 1rem;
}

.api-quiz-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.api-quiz-card {
    padding: 1.25rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.8);
}

.api-quiz-options {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.api-quiz-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.9);
    cursor: pointer;
    color: #334155;
}

.api-quiz-feedback {
    margin: 0.9rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(14, 165, 233, 0.08);
    color: #334155;
}

.api-card h3,
.api-method-card h3,
.api-example-card h3,
.api-task-card h3,
.api-challenge-card h3,
.api-path-card h3,
.api-lesson-card h3,
.api-lab-helper h3,
.api-flow-step h3,
.api-example-loader-card h3,
.api-quiz-card h3 {
    color: #0f172a;
}

.api-flow-step p,
.api-example-loader-card p,
.api-quiz-option span {
    color: #475569;
}

.api-quiz-card.is-correct {
    border-color: rgba(74, 222, 128, 0.35);
}

.api-quiz-card.is-wrong {
    border-color: rgba(248, 113, 113, 0.32);
}

.api-final-cta__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 1199px) {
    .api-card-grid--four,
    .api-card-grid--three,
    .api-card-grid--two,
    .api-roadmap-grid,
    .api-method-grid,
    .api-example-grid,
    .api-path-grid,
    .api-quiz-summary,
    .api-hero-grid,
    .api-lab-layout,
    .api-lesson-card__body,
    .api-flow {
        grid-template-columns: 1fr;
    }

    .api-flow-step:not(:last-child)::after {
        content: "v";
        right: auto;
        top: auto;
        bottom: -1rem;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .api-section {
        padding: 3rem 0;
    }

    .api-section--compact-top {
        padding-top: 0.5rem;
    }

    .api-hub .container {
        padding-inline: 1.1rem;
    }

    .api-sticky-nav {
        top: 4rem;
    }

    .api-form-row--inline,
    .api-stat-grid {
        grid-template-columns: 1fr;
    }

    .api-hero-copy,
    .api-hero-panel,
    .api-card,
    .api-method-card,
    .api-example-card,
    .api-task-card,
    .api-challenge-card,
    .api-path-card,
    .api-lesson-card,
    .api-lab-panel,
    .api-lab-output,
    .api-final-cta__panel,
    .api-quiz-card {
        padding: 1rem;
        border-radius: 1.2rem;
    }

    .api-hero h1 {
        font-size: 2.4rem;
    }

    .api-example-loader-card {
        align-items: flex-start;
        flex-direction: column;
    }
}