/* =========================================================
   Single post: hero, cover, table of contents, article typography, footer
   Body text is Georgia (system font); headings and UI are Inter.
   ========================================================= */

/* ---------- Hero ---------- */

.article-hero {
    padding: 48px 0 40px;
}

.article-hero__inner {
    max-width: 860px;
    margin-inline: auto;
    padding-inline: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

.article-hero__lead {
    max-width: 680px;
    color: var(--c-text-muted);
    text-wrap: pretty;
}

.breadcrumbs a[rel~="category"] {
    color: var(--c-text);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.article-meta a {
    color: var(--c-text);
    text-decoration: none;
}

.article-meta a:hover {
    color: var(--c-brand);
}

.article-meta__author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.article-meta__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-surface);
}

.copyright-checker-widget .btn svg path {
    stroke: currentColor;
}

/* ---------- Cover ---------- */

.article-cover {
    max-width: 1060px;
    margin: 0 auto;
    padding-inline: 10px;
}

.article-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    /* Covers share the page colour: a hairline keeps their edge visible */
    outline: 1px solid var(--c-line);
    outline-offset: -1px;
}

/* ---------- Body: TOC + content (markup from inc/toc.php) ---------- */

.article-body {
    max-width: 1060px;
    margin: 56px auto 0;
    padding-inline: 10px;
}

.post-wrapper {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}

.post-layout .post-content {
    margin-inline: auto;
}

/* A quiet TOC: a hairline rail and muted links. It guides, it does not compete with the text. */
.post-toc {
    position: sticky;
    top: 140px;
    max-height: calc(100vh - 170px);
    overflow: auto;
    scrollbar-width: none;
}

.post-toc::-webkit-scrollbar {
    display: none;
}

.toc__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    list-style: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    cursor: default;
}

.toc__title::-webkit-details-marker {
    display: none;
}

.toc__count,
.toc__progress {
    display: none;
}

.toc__list,
.toc__list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.toc__list {
    border-left: 1px solid var(--c-line);
}

.toc__list a {
    display: block;
    margin-left: -1px;
    padding: 5px 0 5px 14px;
    border-left: 1px solid transparent;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--ease), border-color var(--ease);
}

.toc__list ul a {
    padding-left: 26px;
}

.toc__list a:hover {
    color: var(--c-text);
}

.toc__list a.is-active {
    border-left-color: var(--c-brand);
    color: var(--c-text);
}

/* Sub-sections appear only under the section being read */
.toc__list ul {
    display: none;
}

.toc__list li:has(a.is-active) > ul {
    display: block;
}

/* ---------- Article typography ----------
   Text: Charter on macOS / iOS, Sitka or Cambria on Windows, the system serif elsewhere (nothing to
   download). Headings: Inter semibold. */

.post-content {
    max-width: 680px;
    font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
    font-size: var(--fs-prose);
    line-height: 1.65;
    letter-spacing: 0;
    color: var(--c-text);
    font-kerning: normal;
    overflow-wrap: break-word;
    hanging-punctuation: first;
}

.post-content > :first-child {
    margin-top: 0;
}

.post-content p,
.post-content ul,
.post-content ol {
    margin: 0 0 1.15em;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-variation-settings: normal;
    font-feature-settings: "cv11" 1;
    color: var(--c-text);
    text-wrap: balance;
    scroll-margin-top: 140px;
}

/* Many posts wrap heading text in <strong>; "bolder" than 600 would render at 900 */
.post-content :is(h2, h3, h4) :is(strong, b) {
    font-weight: inherit;
}

.post-content h2 {
    margin: 2.1em 0 0.6em;
    font-size: var(--fs-h2);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.post-content h3 {
    margin: 1.7em 0 0.5em;
    font-size: var(--fs-h3);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.post-content h4 {
    margin: 1.5em 0 0.4em;
    font-size: var(--fs-lg);
    line-height: 1.4;
}

.post-content h2 + h3 {
    margin-top: 0.8em;
}

.post-content a {
    color: var(--c-brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--c-brand) 40%, transparent);
    text-underline-offset: 0.18em;
    transition: text-decoration-color var(--ease);
}

.post-content a:hover {
    text-decoration-color: currentColor;
}

.post-content strong,
.post-content b {
    font-weight: 700;
    color: var(--c-text);
}

.post-content ul,
.post-content ol {
    padding-left: 1.4em;
}

.post-content li {
    margin: 0.45em 0;
    padding-left: 0.2em;
}

.post-content li::marker {
    color: var(--c-text-muted);
}

.post-content li > ul,
.post-content li > ol {
    margin: 0.4em 0 0;
}

.post-content blockquote {
    margin: 2em 0;
    padding: 20px 24px;
    border-left: 2px solid var(--c-brand);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--c-surface);
}

.post-content blockquote::before {
    content: none;
}

.post-content blockquote > :last-child {
    margin-bottom: 0;
}

.post-content blockquote :is(h2, h3, h4):first-child {
    margin-top: 0;
}

.post-content blockquote p {
    font-size: 1em;
}

.post-content figure,
.post-content .wp-block-image,
.post-content .wp-caption {
    width: auto !important;
    margin: 2em 0;
    padding: 0;
    background: none;
    border-radius: 0;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    outline: 1px solid var(--c-line);
    outline-offset: -1px;
}

/* Generated illustration (light/dark pair) inside the text: full column width */
.post-content .post-illustration img {
    display: block;
    width: 100%;
}

.post-content figcaption,
.post-content .wp-caption-text {
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--c-text-muted);
    text-align: center;
}

.post-content iframe {
    width: 100%;
    border: 0;
    border-radius: var(--r-md);
}

.post-content hr {
    width: 40%;
    margin: 2.6em auto;
    border: 0;
    border-top: 1px solid var(--c-line);
}

.post-content code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--c-overlay);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.82em;
    color: var(--c-text);
}

.post-content pre {
    overflow: auto;
    padding: 16px 20px;
    border-radius: var(--r-md);
    background: var(--c-surface);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.post-content pre code {
    padding: 0;
    background: none;
}

.post-content .wp-block-table {
    margin: 2em 0;
    overflow-x: auto;
}

.post-content table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--c-text);
}

.post-content th,
.post-content td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    text-align: left;
    vertical-align: top;
}

.post-content thead th {
    border-bottom: 1px solid var(--c-line-strong);
    font-weight: var(--fw-semibold);
}

/* Some posts carry inline light-theme styles (dark text, dark header row, light borders, uppercase
   labels). The theme wins over them, so tables read the same in both themes. Cell accent colours
   (brand / muted spans and cells) are kept. */
.post-content table[style] {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-sm) !important;
    color: var(--c-text) !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.post-content thead tr[style],
.post-content th[style] {
    background: none !important;
}

.post-content th[style] {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-sm) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--c-text) !important;
}

.post-content td[style] {
    border-color: var(--c-line) !important;
}

/* Inline light callout boxes become Surface cards on the dark theme, and their dark inline text
   colours give way to the theme text colour */
[data-theme="dark"] .post-content :is(div, section, aside, blockquote)[style*="background"] {
    background: var(--c-surface) !important;
    border-color: var(--c-line) !important;
}

[data-theme="dark"] .post-content :is(div, section, aside, blockquote)[style*="background"] :is(p, li, span, strong, em, h2, h3, h4)[style*="color"] {
    color: var(--c-text) !important;
}

/* ---------- Key facts (autopost/publish.mjs) ---------- */

/* Short, quotable statements before the text: a quiet Surface card, hairlines between the facts
   and a bolt before each one. The markup is baked into post content, so the look lives here. */
.post-content .key-facts {
    margin: 0 0 2em;
    padding: 18px 24px 6px;
    border-radius: var(--r-md);
    background: var(--c-surface);
    font-family: var(--font-sans);
}

.post-content .key-facts__title {
    padding-bottom: 12px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}

.post-content .key-facts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-content .key-facts li {
    position: relative;
    margin: 0;
    padding: 12px 0 12px 28px;
    border-top: 1px solid var(--c-line);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--c-text);
}

/* Lucide "zap", filled, centred on the first line */
.post-content .key-facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(12px + (var(--lh-normal) * 1em - 16px) / 2);
    width: 16px;
    height: 16px;
    background: var(--c-icon);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Tool link card (inc/tools.php) ---------- */

.post-content .tool-promo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 2em;
    padding: 16px 20px;
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: inset 0 0 0 1px var(--c-line);
    font-family: var(--font-sans);
    color: var(--c-text);
    text-decoration: none;
    transition: box-shadow var(--ease), background-color var(--ease);
}

.post-content .tool-promo:hover {
    background: var(--c-surface-hover);
    box-shadow: inset 0 0 0 1px var(--c-line-strong);
}

.post-content .tool-promo__icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--c-bg) url("../../images/icons/calculator.svg") center / 22px no-repeat;
}

.post-content .tool-promo__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--c-text-muted);
}

.post-content .tool-promo__text strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}

.post-content .tool-promo__arrow {
    margin-left: auto;
    font-size: var(--fs-lg);
    color: var(--c-icon);
}

/* ---------- Product CTA (inc/products.php) ---------- */

/* The Mubert Home promo: a Surface plate with an inner brand glow, a vaporwave floor rushing
   towards the viewer under a glowing horizon, and centred copy on top */
.product-cta {
    --c-glow: var(--c-brand);
    --cell: 44px;
    --horizon: 46%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 300px;
    padding: 56px 24px;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--c-glow) 28%, transparent),
        inset 0 0 40px color-mix(in srgb, var(--c-glow) 18%, transparent),
        inset 0 -60px 90px -30px color-mix(in srgb, var(--c-glow) 35%, transparent);
    font-family: var(--font-sans);
    text-align: center;
}

.product-cta[data-product="api"],
.product-cta[data-product="fuse"] {
    --c-glow: var(--c-brand-2);
}

.post-content .product-cta {
    margin: 2.2em 0;
}

.product-cta > :not(.vw) {
    position: relative;
    margin: 0;
}

.product-cta .vw {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Sunset glow on the horizon, and a pool of plate colour behind the copy */
.product-cta .vw::before,
.product-cta .vw::after {
    content: "";
    position: absolute;
    inset: 0;
}

.product-cta .vw::before {
    background:
        radial-gradient(ellipse 38% 34% at 50% var(--horizon), color-mix(in srgb, var(--c-glow) 42%, transparent), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% var(--horizon), color-mix(in srgb, var(--c-glow) 14%, transparent), transparent 75%);
}

.product-cta .vw::after {
    background: radial-gradient(ellipse 40% 46% at 50% 50%, color-mix(in srgb, var(--c-surface) 72%, transparent), transparent 75%);
}

.product-cta .vw-floor {
    position: absolute;
    top: var(--horizon);
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    perspective: 260px;
    perspective-origin: 50% 0%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
}

.product-cta .vw-horizon {
    position: absolute;
    top: var(--horizon);
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-glow) 30%, var(--c-glow) 70%, transparent);
    box-shadow: 0 0 12px 1px var(--c-glow), 0 0 40px 4px color-mix(in srgb, var(--c-glow) 50%, transparent);
    opacity: 0.85;
}

.product-cta .vw-plane {
    position: absolute;
    right: -200%;
    bottom: calc(var(--cell) * -1);
    left: -200%;
    height: 5000px;
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(to right, var(--c-glow) 2px, transparent 2px),
        linear-gradient(to bottom, var(--c-glow) 2px, transparent 2px);
    background-size: var(--cell) var(--cell);
    background-position: center bottom;
    opacity: 0.8;
    transform: rotateX(82deg);
}

@media (prefers-reduced-motion: no-preference) {
    .product-cta .vw-plane {
        animation: vw-run 0.8s linear infinite;
        will-change: transform;
    }
}

@keyframes vw-run {
    to {
        transform: rotateX(82deg) translateY(var(--cell));
    }
}

.product-cta .vw-horizon,
.product-cta .vw::before {
    transition: opacity 0.6s ease, filter 0.6s ease;
}

.product-cta:hover .vw-horizon {
    opacity: 1;
    filter: brightness(1.3);
}

.product-cta:hover .vw::before {
    filter: saturate(1.3) brightness(1.15);
}

/* Product and use case, so the reader knows what and for whom before the pitch */
.product-cta__pill {
    gap: 6px;
    background: color-mix(in srgb, var(--c-surface) 80%, transparent);
    backdrop-filter: blur(6px);
    color: var(--c-text-muted);
}

.product-cta__pill strong {
    font-weight: var(--fw-semibold);
    color: var(--c-text);
}

.product-cta__title {
    max-width: 560px;
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: -0.02em;
    color: var(--c-text);
    text-shadow: 0 0 32px color-mix(in srgb, var(--c-glow) 45%, transparent);
    text-wrap: balance;
}

.product-cta__text {
    max-width: 480px;
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--c-text-muted);
    text-wrap: pretty;
}

/* Post content colours links; the button keeps its own colours */
.product-cta .product-cta__button,
.product-cta .product-cta__button:hover {
    margin-top: 8px;
    color: #fff;
    text-decoration: none;
}

.product-cta--compact {
    min-height: 240px;
    padding: 44px 24px;
}

.product-cta--compact .product-cta__title {
    font-size: var(--fs-h3);
}

@media (max-width: 640px) {
    .product-cta {
        min-height: 240px;
        padding: 40px 16px;
    }
}

/* ---------- Author card ---------- */

/* Two sizes only: 16px for the name and bio, 14px for everything else */
.author-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.author-card p {
    margin: 0;
}

.author-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-card__photo {
    flex-shrink: 0;
}

.author-card__photo img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-bg);
}

.author-card__name {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}

.author-card__name a {
    color: var(--c-text);
    text-decoration: none;
}

.author-card__name a:hover {
    color: var(--c-brand);
}

.author-card__role {
    color: var(--c-text-muted);
}

.author-card__bio {
    font-size: var(--fs-md);
    color: var(--c-text);
    text-wrap: pretty;
}

.author-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.author-card__links a {
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--ease);
}

.author-card__links a:hover,
.author-card__links .author-card__all {
    color: var(--c-brand);
}

/* ---------- Article footer: author card + tags ---------- */

/* The same columns as .post-wrapper and the same width as .post-content,
   so the card and the tags start exactly where the text starts */
.article-footer {
    max-width: 1060px;
    margin: 56px auto 0;
    padding-inline: 10px;
    display: grid;
    grid-template-columns: 200px minmax(0, 680px);
    column-gap: 72px;
    row-gap: 24px;
}

.article-footer > * {
    grid-column: 2;
}

/* Posts without headings have no TOC: one centred column */
.article:not(:has(.post-toc)) .article-footer {
    grid-template-columns: minmax(0, 680px);
    justify-content: center;
}

.article:not(:has(.post-toc)) .article-footer > * {
    grid-column: 1;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.article-tags .tag {
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--c-overlay);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.2;
    transition: color var(--ease), background-color var(--ease);
}

.article-tags .tag:hover {
    color: var(--c-text);
    background: var(--c-surface-hover);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .article-footer,
    .article:not(:has(.post-toc)) .article-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-footer > *,
    .article:not(:has(.post-toc)) .article-footer > * {
        grid-column: 1;
    }

    .post-wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .post-toc {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .toc__box {
        padding: 14px 16px;
        border-radius: var(--r-md);
        background: var(--c-surface);
    }

    .toc__title {
        margin: 0;
        color: var(--c-text);
        cursor: pointer;
    }

    .toc__box[open] .toc__title {
        margin-bottom: 12px;
    }

    .toc__title::after {
        content: "";
        width: 8px;
        height: 8px;
        margin-left: 4px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform var(--ease);
    }

    .toc__box[open] .toc__title::after {
        transform: translateY(2px) rotate(-135deg);
    }

    .toc__count {
        display: inline;
        margin-left: auto;
        font-weight: var(--fw-regular);
        color: var(--c-text-muted);
    }

    .toc__list ul {
        display: block;
    }

    .post-content {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .article-hero {
        padding: 24px 0 28px;
    }

    .article-body {
        margin-top: 32px;
    }

    .post-content {
        line-height: 1.6;
    }

    .author-card {
        padding: 20px;
    }

}

/* ---------- Developer block (template-parts/dev-block.php) ---------- */

/* Code colours, readable on both themes */
:root,
[data-theme="light"] {
    --code-cmd: #555dff;
    --code-flag: #0f8a72;
    --code-str: #1f8a3b;
    --code-num: #c2570c;
}

[data-theme="dark"] {
    --code-cmd: #9e9eff;
    --code-flag: #5fd4b5;
    --code-str: #7ee08f;
    --code-num: #f5b14c;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --code-cmd: #9e9eff;
        --code-flag: #5fd4b5;
        --code-str: #7ee08f;
        --code-num: #f5b14c;
    }
}

/* Its own section under the author card, as wide as the related posts below it */
.dev-section {
    max-width: var(--page-max);
    margin: 72px auto 0;
    padding-inline: 10px;
    box-sizing: border-box;
}

.dev-section__title {
    margin-bottom: 20px;
}

.dev-block {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--gap);
}

.dev-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 32px;
    border-radius: var(--r-lg);
    background: var(--c-surface);
}

.dev-card--api {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.dev-card__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--c-text);
}

.dev-card__lead {
    margin: 10px 0 28px;
    font-size: var(--fs-md);
    color: var(--c-text-muted);
}

.dev-card__button {
    align-self: flex-start;
    margin-top: 28px;
    color: #fff;
}

.dev-code {
    min-width: 0;
    border-radius: var(--r-md);
    background: var(--c-bg);
    box-shadow: inset 0 0 0 1px var(--c-line);
}

.dev-card--api .dev-code {
    flex: 1;
}

.dev-code__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 16px;
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.dev-code__dots {
    display: inline-flex;
    gap: 6px;
}

.dev-code__dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-line-strong);
}

.dev-code__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    font: inherit;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color var(--ease), background-color var(--ease);
}

.dev-code__copy:hover {
    background: var(--c-overlay);
    color: var(--c-text);
}

.dev-code__body {
    margin: 0;
    padding: 18px 16px;
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--c-text);
    white-space: pre;
    background: none;
}

.dev-code__body .tok-dim { color: var(--c-text-muted); }
.dev-code__body .tok-cmd { color: var(--code-cmd); }
.dev-code__body .tok-flag { color: var(--code-flag); }
.dev-code__body .tok-str { color: var(--code-str); }
.dev-code__body .tok-num { color: var(--code-num); }

@media (max-width: 860px) {
    .dev-section {
        margin-top: 48px;
    }

    .dev-block {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-card--api {
        grid-column: auto;
        grid-row: auto;
    }

    .dev-card {
        padding: 22px;
    }
}