:root {
    --ink-color: #142321;
    --muted-color: #51635f;
    --surface-color: #ffffff;
    --page-color: #f6f7f4;
    --border-color: #d8dfda;
    --accent-color: #007f78;
    --accent-dark-color: #005f5a;
    --coral-color: #dc5d4d;
}

html, body {
    margin: 0;
    background: var(--page-color);
    color: var(--ink-color);
    font-family: Inter, Aptos, "Segoe UI", sans-serif;
    line-height: 1.55;
}

* {
    box-sizing: border-box;
}

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

h1, h2, h3 {
    line-height: 1.12;
}

h1 {
    font-size: clamp(3.25rem, 7vw, 6.75rem);
    margin-bottom: 1rem;
}

h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

h3 {
    font-size: 1.15rem;
}

a {
    color: var(--accent-dark-color);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1000;
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border: 1px solid #b83a2f;
    border-radius: 0.25rem;
    background: #fff7f5;
    box-shadow: 0 0.5rem 1.5rem rgba(20, 35, 33, 0.18);
    color: #702218;
}

#blazor-error-ui .reload {
    margin-left: 0.75rem;
    font-weight: 700;
}

#blazor-error-ui .dismiss {
    float: right;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.hero {
    min-height: min(43rem, calc(100vh - 4.5rem));
    display: flex;
    align-items: center;
    padding: 5rem max(1.5rem, calc((100% - 72rem) / 2));
    color: #f7fbf9;
    background-color: #090c0c;
    background-image: linear-gradient(90deg, rgba(9, 12, 12, 0.98) 0%, rgba(9, 12, 12, 0.88) 38%, rgba(9, 12, 12, 0.12) 100%), url("../images/mathematics-workspace.png");
    background-position: center;
    background-size: cover;
}

.hero-content {
    max-width: 42rem;
}

.hero-summary {
    max-width: 37rem;
    margin-bottom: 2rem;
    color: #d5e0db;
    font-size: 1.25rem;
}

.eyebrow {
    margin-bottom: 0.75rem;
    color: var(--coral-color);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero .eyebrow {
    color: #f28a78;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.action-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-weight: 700;
    text-decoration: none;
}

.primary-action {
    background: var(--accent-color);
    color: #ffffff;
}

.primary-action:hover {
    background: var(--accent-dark-color);
    color: #ffffff;
}

.secondary-action {
    border-color: #9bb1a8;
    color: #ffffff;
}

.secondary-action:hover {
    border-color: #ffffff;
    color: #ffffff;
}

.capability-band,
.product-band,
.community-band,
.documentation-header,
.documentation-grid,
.documentation-callout {
    width: min(100% - 3rem, 72rem);
    margin: 0 auto;
}

.capability-band {
    padding: 6rem 0;
}

.section-heading {
    max-width: 42rem;
    margin-bottom: 2.5rem;
}

.capability-grid,
.documentation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.capability-grid article,
.documentation-grid article {
    padding-top: 1rem;
    border-top: 3px solid var(--accent-color);
}

.capability-grid p,
.documentation-grid li,
.documentation-header p,
.community-band p,
.product-band p,
.documentation-callout p {
    color: var(--muted-color);
}

.product-band {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    gap: 3rem;
    padding: 3.5rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

.product-facts {
    margin: 0;
    border-left: 1px solid var(--border-color);
}

.product-facts div {
    padding: 0.9rem 0 0.9rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.product-facts dt {
    color: var(--muted-color);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.product-facts dd {
    margin: 0.2rem 0 0;
    font-weight: 650;
}

.community-band {
    max-width: 48rem;
    padding: 6rem 0;
}

.documentation-header {
    max-width: 50rem;
    padding: 5rem 0 3rem;
}

.documentation-header h1 {
    font-size: clamp(2.75rem, 5vw, 4.5rem);
}

.documentation-grid {
    padding-bottom: 4rem;
}

.package-list,
.sample-grid,
.release-list,
.guide-grid {
    width: min(100% - 3rem, 72rem);
    margin: 0 auto;
    padding-bottom: 4rem;
}

.package-list {
    display: grid;
    gap: 1rem;
}

.package-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.75fr);
    gap: 2rem;
    align-items: end;
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
}

pre {
    margin: 0;
    overflow-x: auto;
    padding: 1rem;
    background: #142321;
    color: #f2f8f5;
    font-size: 0.875rem;
}

.sample-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.guide-grid article {
    min-height: 14rem;
    padding: 1.5rem 0;
    border-top: 3px solid var(--accent-color);
}

.domain-guide-list,
.guide-content {
    width: min(100% - 3rem, 72rem);
    margin: 0 auto;
}

.domain-guide-list {
    padding-bottom: 4rem;
}

.guide-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 700;
}

.guide-content {
    display: grid;
    gap: 2.5rem;
    padding-bottom: 5rem;
}

.guide-content article {
    max-width: 52rem;
}

.guide-content p {
    color: var(--muted-color);
}

.sample-grid article {
    min-height: 15rem;
    padding: 1.5rem 0;
    border-top: 3px solid var(--coral-color);
}

.release-list article {
    display: grid;
    grid-template-columns: minmax(13rem, 0.45fr) minmax(0, 1fr);
    gap: 2rem;
    padding: 2rem 0 3rem;
    border-top: 3px solid var(--accent-color);
}

.release-heading p:last-child {
    color: var(--muted-color);
}

.release-list ul {
    padding-left: 1.25rem;
}

.release-list li + li {
    margin-top: 0.6rem;
}

.sample-grid code,
.package-list code {
    overflow-wrap: anywhere;
}

.documentation-grid ul {
    padding-left: 1.25rem;
}

.documentation-grid li + li {
    margin-top: 0.6rem;
}

.documentation-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 6rem;
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.documentation-callout h2 {
    font-size: 1.65rem;
}

.api-summary,
.api-table-wrapper,
.api-controls,
.api-loading {
    width: min(100% - 3rem, 72rem);
    margin: 0 auto;
}

.api-type-detail {
    width: min(100% - 3rem, 72rem);
    margin: 0 auto 4rem;
    padding-top: 2rem;
    border-top: 3px solid var(--coral-color);
}

.api-type-detail > p:not(.eyebrow),
.api-member-list article > p:not(.eyebrow),
.api-member-list dd {
    color: var(--muted-color);
}

.api-member-list {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}

.api-member-list article {
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-color);
}

.api-member-list article.selected-member {
    padding-right: 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--coral-color);
    background: #fff7f5;
}

.api-member-list h3 {
    overflow-wrap: anywhere;
}

.api-member-list h4 {
    margin: 1.5rem 0 0.25rem;
    font-size: 0.9rem;
}

.api-member-list dl {
    display: grid;
    grid-template-columns: minmax(10rem, auto) minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0;
}

.api-member-list dd {
    margin: 0;
}

.api-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 4rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.api-summary div {
    display: grid;
    gap: 0.25rem;
    padding: 1.5rem;
    border-right: 1px solid var(--border-color);
}

.api-summary div:last-child {
    border-right: 0;
}

.api-summary strong {
    color: var(--accent-dark-color);
    font-size: 2rem;
}

.api-summary span {
    color: var(--muted-color);
}

.api-table-wrapper {
    overflow-x: auto;
    padding-bottom: 4rem;
}

.api-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.api-controls label,
.api-controls span {
    color: var(--muted-color);
    font-weight: 650;
}

.api-controls select {
    min-height: 2.5rem;
    padding: 0.4rem 2rem 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background: var(--surface-color);
    color: var(--ink-color);
    font: inherit;
}

.api-controls input {
    min-height: 2.5rem;
    min-width: 15rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background: var(--surface-color);
    color: var(--ink-color);
    font: inherit;
}

.api-loading {
    padding: 2rem 0 4rem;
    color: var(--muted-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-color);
}

th,
td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

th {
    color: var(--muted-color);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .hero {
        min-height: 38rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
        background-image: linear-gradient(90deg, rgba(9, 12, 12, 0.96) 0%, rgba(9, 12, 12, 0.8) 100%), url("../images/mathematics-workspace.png");
        background-position: 64% center;
    }

    .capability-grid,
    .documentation-grid,
    .product-band,
    .sample-grid,
    .guide-grid,
    .package-list article,
    .release-list article {
        grid-template-columns: 1fr;
    }

    .product-band {
        gap: 1.5rem;
        padding: 2rem;
    }

    .product-facts {
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    .product-facts div {
        padding-left: 0;
    }

    .documentation-callout {
        align-items: flex-start;
        flex-direction: column;
    }

    .api-summary {
        grid-template-columns: 1fr;
    }

    .api-summary div {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .api-summary div:last-child {
        border-bottom: 0;
    }

    .api-controls {
        align-items: flex-start;
        flex-direction: column;
    }

    .api-controls input {
        width: 100%;
    }

    .api-member-list dl {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}