.article-body .ts-article-card {
    --ts-ink: #272522;
    --ts-muted: #60594f;
    --ts-rust: #ad3815;
    --ts-paper: #f8f5ef;
    --ts-line: #d8cfc0;
    margin: 36px 0;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--ts-line);
    border-radius: 12px;
    background: var(--ts-paper);
    color: var(--ts-ink);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.article-body .ts-article-card p {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ts-ink);
}

.article-body .ts-article-card .ts-article-title {
    display: block;
    margin: 0 0 24px;
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.article-body .ts-article-card .ts-article-note {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ts-muted);
}

.ts-article-card small { font-size: 16px; font-weight: 500; }
.ts-article-card strong { color: var(--ts-ink); }
.ts-article-bars { display: grid; gap: 22px; }
.ts-article-bar-row { display: grid; grid-template-columns: 1fr auto; gap: 9px 16px; align-items: baseline; }
.ts-article-bar-row > strong { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.ts-article-track { grid-column: 1 / -1; display: flex; height: 18px; border-radius: 3px; overflow: hidden; background: #eae3d8; }
.ts-article-plan-bar { width: 100%; background: #b4a997; }
.ts-article-worked-bar { width: 37.5%; background: var(--ts-rust); }
.ts-article-unresolved-bar { width: 62.5%; background: repeating-linear-gradient(135deg, transparent 0 6px, #c1b6a5 6px 7px); }
.ts-article-unresolved { display: flex; align-items: baseline; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--ts-line); }
.ts-article-unresolved > strong { flex-shrink: 0; font-size: 28px; }
.ts-article-unresolved > span { color: var(--ts-muted); }

.article-body .ts-article-film { padding: 0; overflow: hidden; background: #ebe4d8; }
.ts-article-film-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 24px 28px 20px; }
.article-body .ts-article-film-heading .ts-article-title { margin: 0; font-size: 22px; }
.ts-article-meta { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.6; color: var(--ts-muted); }
.ts-article-film-heading .ts-article-meta { flex-shrink: 0; }
.ts-article-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #24221f; }
.article-body .ts-article-card .ts-article-poster { width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; }
.article-body .ts-article-film > .ts-article-note { margin: 0; padding: 20px 28px 24px; }
.article-body .ts-article-film .ts-article-video-error { margin: 0 28px 24px; padding: 14px 16px; border-left: 3px solid var(--ts-rust); background: var(--ts-paper); font-size: 14px; }

.article-body .ts-article-demo { border-top: 3px solid var(--ts-rust); background: #f0e9de; }
.article-body .ts-article-demo .ts-article-eyebrow { margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-rust); }
.ts-article-record { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; padding: 24px; border: 1px solid var(--ts-line); border-radius: 8px; background: var(--ts-paper); }
.ts-article-record > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ts-article-record > div > span:first-child { color: var(--ts-muted); font-size: 13px; }
.ts-article-record strong { font-family: 'JetBrains Mono', monospace; font-size: clamp(34px, 4vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.ts-article-record .ts-article-status { padding: 4px 8px; border: 1px solid var(--ts-line); border-radius: 4px; font-size: 12px; line-height: 1.45; background: #eae3d8; }
.ts-article-value { padding-left: 20px; border-left: 1px solid var(--ts-line); }
.ts-article-delta strong { transition: color 160ms ease; }
.ts-article-demo-corrected .ts-article-delta strong { color: var(--ts-rust); }
.ts-article-demo-corrected .ts-article-status { border-color: #b4a38b; background: #e2d9c9; }
.ts-article-report { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 18px 24px; border: 1px solid var(--ts-line); border-radius: 8px; background: var(--ts-paper); }
.ts-article-report > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; font-size: 14px; }
.ts-article-report strong { flex-shrink: 0; font: 500 34px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.ts-article-report .ts-article-status { display: block; font-size: 12px; color: var(--ts-muted); }
.ts-article-report-stale .ts-article-report { border-color: var(--ts-rust); border-left-width: 3px; }
.ts-article-report-stale .ts-article-report .ts-article-status { color: var(--ts-rust); }
.article-body .ts-article-demo .ts-article-result { margin: 20px 0; min-height: 3.2em; }
.ts-article-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.article-body .ts-article-card [hidden] { display: none; }
.ts-article-button { min-height: 48px; padding: 11px 20px; border: 1px solid var(--ts-rust); border-radius: 6px; background: var(--ts-rust); color: #fff; font: 600 14px/1.5 'Inter', sans-serif; cursor: pointer; touch-action: manipulation; transition: background-color 160ms ease; }
.ts-article-button-reset { border-color: #a69a88; background: transparent; color: var(--ts-ink); }
.ts-article-button:hover { background: #8e2a0d; }
.ts-article-button-reset:hover { background: #e0d6c6; }
.ts-article-button:disabled { border-color: #b8ac99; background: #ddd4c5; color: #655c50; cursor: not-allowed; }
.ts-article-button:focus-visible, .ts-article-video:focus-visible { outline: 3px solid var(--ts-rust); outline-offset: 4px; }
.ts-article-history { margin-top: 22px; padding: 16px 20px; border-left: 2px solid #a79a86; background: #e8dfd1; }
.article-body .ts-article-history p { margin-top: 6px; font-size: 14px; }

.article-body .ts-article-process { background: transparent; border-right: 0; border-left: 0; border-radius: 0; padding-right: 0; padding-left: 0; }
.article-body .ts-article-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 0; margin: 0; list-style: none; }
.article-body .ts-article-card .ts-article-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--ts-muted); }
.article-body .ts-article-card .ts-article-steps li::before { content: none; }
.ts-article-step-number { display: flex; align-items: center; height: 34px; font: 500 14px/1 'JetBrains Mono', monospace; color: var(--ts-rust); }
.ts-article-steps li:not(:last-child) .ts-article-step-number::after { content: ''; flex: 1; height: 1px; margin-left: 12px; background: var(--ts-line); }
.ts-article-steps strong { font-size: 16px; font-weight: 600; }

@media (max-width: 600px) {
    .article-body .ts-article-card { margin: 28px 0; padding: 20px; }
    .article-body .ts-article-film { padding: 0; }
    .ts-article-film-heading { flex-direction: column; gap: 8px; padding: 20px; }
    .article-body .ts-article-film > .ts-article-note { padding: 18px 20px 20px; }
    .article-body .ts-article-film .ts-article-video-error { margin: 0 20px 20px; }
    .ts-article-record { grid-template-columns: 1fr 1fr; gap: 20px 12px; padding: 18px; }
    .ts-article-record .ts-article-person { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ts-line); }
    .ts-article-person strong { font-size: 25px; }
    .ts-article-person .ts-article-status { flex-basis: 100%; width: fit-content; }
    .ts-article-value { padding-left: 0; border-left: 0; }
    .ts-article-record .ts-article-delta { padding-left: 12px; border-left: 1px solid var(--ts-line); }
    .ts-article-actions { flex-direction: column; }
    .ts-article-history { padding: 14px; }
    .article-body .ts-article-process { padding-right: 0; padding-left: 0; }
    .article-body .ts-article-steps { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .ts-article-button, .ts-article-delta strong { transition: none; }
}