@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Kalam:wght@400;700&display=swap");

:root {
    --font-display: "Kalam", "Comic Sans MS", "Segoe Print", cursive;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --type-heading-line: 1.22;
    --type-hero-line: 1.42;
    --type-body-line: 1.72;
    --type-ui-line: 1.2;
}

html {
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
td,
th,
input,
textarea,
select {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: var(--type-body-line);
    letter-spacing: 0;
}

p,
li,
dd,
dt,
.lead,
.note,
.blog-intro,
.article-card p,
.certificate-details,
.about-utility-copy,
.about-utility-note,
.proof-header-copy,
.portfolio-intro,
.lab-sim-copy,
.ask-yangming-subtitle,
.ask-yangming-empty,
.ask-yangming-bubble {
    font-family: var(--font-body);
    line-height: var(--type-body-line);
    letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title h2,
.blog-section-title h2,
.header-section h1,
.seo-hero h1,
.hero h1,
.blog-title,
.article-hero h1,
.about-card-title,
.article-card h3,
.article-card h3 a,
.certificate-name,
.favorite-quote,
.quote-shell blockquote,
.maturity-level h3,
.phase h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--type-heading-line);
    letter-spacing: 0;
}

.header .content h1 {
    font-family: var(--font-display);
    font-size: 3.18rem;
    font-weight: 900;
    line-height: var(--type-hero-line);
    letter-spacing: 0;
}

.hero-welcome {
    font-family: var(--font-display);
    font-size: 2.48rem;
    font-weight: 900;
    line-height: var(--type-hero-line);
    letter-spacing: 0;
}

.hero-copy .big-text,
.typing-line {
    font-family: var(--font-display);
    font-size: 1.46rem;
    font-weight: 900;
    line-height: var(--type-hero-line);
    letter-spacing: 0;
}

.hero-intro,
.hero-intro p,
.typing-block {
    font-family: var(--font-display);
    font-size: 1.42rem !important;
    font-weight: 900;
    line-height: var(--type-hero-line);
    letter-spacing: 0;
}

main > h1,
.seo-hero h1,
.hero h1,
.header-section h1 {
    font-size: 2.75rem;
    line-height: 1.08;
}

h2,
.section-title h2,
.blog-section-title h2,
main > h2,
.hero h2 {
    font-size: 1.85rem;
    line-height: 1.16;
}

h3,
.article-card h3,
.blog-section-content h3 a {
    font-size: 1.32rem;
    line-height: 1.2;
}

nav,
nav a,
.nav-tabs .nav-link,
.nav-menu a,
.btn,
button,
input,
textarea,
select,
.dropdown-item,
.blog-topic-btn,
.share-btn,
.tag,
.kicker,
.eyebrow,
.about-card-badge,
.proof-cluster-label,
.runtime-state,
.article-kicker,
.generated-article-toc-kicker,
.generated-article-toc-count,
.ask-yangming-launcher,
.ask-yangming-eyebrow,
.ask-yangming-chip,
.ask-yangming-submit {
    font-family: var(--font-body);
    line-height: var(--type-ui-line);
    letter-spacing: 0;
}

#myTab.nav-tabs .nav-link {
    font-family: var(--font-display);
    font-size: 1.34rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
}

.tag,
.kicker,
.eyebrow,
.about-card-badge,
.proof-cluster-label,
.runtime-state,
.article-kicker,
.generated-article-toc-kicker,
.ask-yangming-eyebrow {
    text-transform: uppercase;
    font-weight: 800;
}

code,
pre,
kbd,
samp,
pre *,
code *,
.code-block,
.code-block *,
.about-code,
.about-code *,
.runtime-output,
.runtime-output *,
.runtime-file,
.runtime-topbar,
.terminal,
.terminal *,
.copy-code-button {
    font-family: var(--font-mono);
    letter-spacing: 0;
}

pre,
pre code,
.code-block pre,
.about-code,
.about-code-line,
.runtime-output,
.runtime-output-line {
    line-height: 1.82;
}

.about-code,
.about-code * {
    font-family: var(--font-mono);
    font-size: 1.26rem;
    font-weight: 600;
}

.runtime-output,
.runtime-file,
.runtime-state {
    font-family: var(--font-mono);
}

.runtime-output-line {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    line-height: 1.82;
}

.runtime-file {
    font-size: 1.12rem;
}

.runtime-state {
    font-size: 0.9rem;
}

.btn,
button,
.blog-topic-btn,
.site-language-switcher.site-language-cta,
.ask-yangming-launcher {
    font-weight: 700;
}

.blog-section-content p,
.article-prose-surface p,
.article-prose-surface li,
.seo-page p,
.section-page p,
main p,
main li {
    font-size: 1.04rem;
    line-height: 1.78;
}

.site-language-switcher,
.site-language-switcher select {
    font-family: var(--font-body);
}

@media (max-width: 768px) {
    .header .content h1 {
        font-size: 2.42rem;
        line-height: var(--type-hero-line);
    }

    .hero-welcome {
        font-size: 1.88rem;
        line-height: var(--type-hero-line);
    }

    main > h1,
    .seo-hero h1,
    .hero h1,
    .header-section h1 {
        font-size: 2.18rem;
        line-height: 1.16;
    }

    .hero-copy .big-text,
    .typing-line,
    .hero-intro,
    .hero-intro p,
    .typing-block {
        font-size: 1.16rem !important;
        line-height: var(--type-hero-line);
    }

    .about-code,
    .about-code * {
        font-size: 1.08rem;
        line-height: 1.78;
    }

    .runtime-output-line {
        font-size: 1.04rem;
        line-height: 1.74;
    }

    #myTab.nav-tabs .nav-link {
        font-size: 1.14rem;
    }

    h2,
    .section-title h2,
    .blog-section-title h2,
    main > h2,
    .hero h2 {
        font-size: 1.55rem;
    }

    h3,
    .article-card h3,
    .blog-section-content h3 a {
        font-size: 1.16rem;
    }

    .blog-section-content p,
    .article-prose-surface p,
    .article-prose-surface li,
    .seo-page p,
    .section-page p,
    main p,
    main li {
        font-size: 1rem;
        line-height: 1.72;
    }
}