.blog-header { border-bottom-width: 1px; padding-bottom: 28px; }
.blog-header h1 { font-size: clamp(2.1rem, 5vw, 3.15rem); letter-spacing: -.025em; margin: 12px 0 20px; }
.title-second { display: block; font-size: .73em; letter-spacing: -.02em; margin-top: 8px; color: #37345d; line-height: 1.25; }
.dek { max-width: 730px; font-size: 1.06rem; line-height: 1.75; }
.blog-meta { margin-top: 20px; }
.header-insight { display: flex; align-items: center; gap: 25px; margin-top: 26px; padding: 19px 23px; background: linear-gradient(115deg, rgba(255,255,255,.82), rgba(238,248,245,.72)); border: 1px solid #dce5eb; border-radius: 12px; }
.insight-label { flex-shrink: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: #0f766e; }
.header-insight > div { min-width: 0; overflow-x: auto; padding: 8px 0; }
.header-insight .katex { font-size: 1.16em; }
.toc { padding: 22px 24px; background: #fafbfe; }
.toc > strong { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: #64748b; margin-bottom: 14px; }
.toc ol { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 24px; list-style: none; padding: 0; counter-reset: contents; }
.toc li { display: flex; align-items: baseline; gap: 10px; margin: 0; counter-increment: contents; font-size: .86rem; line-height: 1.5; }
.toc li::before { content: counter(contents, decimal-leading-zero); color: #818cf8; font-size: .69rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.toc a { color: #474467; padding: 4px 0; }
.toc a:hover { color: #4f46e5; text-decoration: underline; text-underline-offset: 4px; }
.blog-content h2 { letter-spacing: -.015em; }
.blog-content p { text-wrap: pretty; }
.formula-card { padding-top: 18px; padding-bottom: 14px; border-color: #e1e5f0; background: #f9fafe; }
.formula-card .katex { font-size: 1.08em; }
.formula-card .equation-label { color: #69758c; font-size: .77rem; margin-top: 5px; }
.plot-figure { background: white; padding: 17px; box-shadow: 0 3px 12px rgba(30,27,75,.025); }
.plot-figure picture { display: block; }
.plot-figure figcaption { padding: 15px 5px 2px; border-top: 1px solid #edf0f5; margin-top: 10px; line-height: 1.7; }
.bridge-figure { padding: 30px 24px 22px; background: #fff; border-color: #e3e6ee; }
.diagram-kicker { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #788196; }
.ratio-origin { text-align: center; }
.ratio-origin > strong { display: block; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.55rem; margin: 6px 0 12px; color: #37345d; }
.ratio-origin > div { display: inline-block; padding: 11px 23px; background: #f4f3fb; border-radius: 8px; max-width: 100%; overflow-x: auto; }
.ratio-origin .katex { font-size: 1.04em; }
.ratio-origin p { font-size: .8rem; color: #788196; margin: 9px 0 0; }
.ratio-fork { height: 33px; position: relative; margin: 0 0 14px; }
.ratio-fork::before { content: ''; position: absolute; top: 0; bottom: 16px; left: 50%; border-left: 1px solid #c9cedb; }
.ratio-fork::after { content: ''; position: absolute; top: 16px; bottom: 0; left: 24%; right: 24%; border: 1px solid #c9cedb; border-bottom: 0; border-radius: 8px 8px 0 0; }
.ratio-routes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.ratio-route { min-width: 0; padding: 22px 20px 8px; border-radius: 12px; --route-color: #6654bf; --route-border: #e4dff2; background: #f8f7fc; }
.ratio-route.movement-route { --route-color: #247c67; --route-border: #d5e7e0; background: #f2f8f5; }
.ratio-route .diagram-kicker { color: var(--route-color); }
.blog-content .ratio-route h3 { font-size: 1.03rem; line-height: 1.4; margin: 8px 0 0; color: #30354a; }
.route-sketch { display: block; width: 220px; max-width: 100%; height: 63px; margin: 16px auto 18px; }
.route-example { display: flex; gap: 11px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--route-border); color: #30354a; text-decoration: none; }
.route-example > span { flex-shrink: 0; font-size: .65rem; font-weight: 700; color: var(--route-color); }
.route-example strong { font-size: .88rem; font-weight: 700; color: var(--route-color); }
.route-example p { font-size: .76rem; line-height: 1.5; margin: 4px 0 0; color: #697386; }
.route-example:hover strong { color: var(--route-color); text-decoration: underline; text-underline-offset: 4px; }
.bridge-figure figcaption { margin-top: 21px; padding-top: 17px; border-top: 1px solid #edf0f5; font-size: .78rem; line-height: 1.7; }
.blog-content .opening-question { font-family: 'DM Serif Display', serif; font-size: 1.4rem; line-height: 1.5; margin: 28px 0; padding: 6px 0 6px 21px; border-left: 3px solid #a5b4fc; color: #4f46e5; }
.notation { font-size: .88rem; color: var(--text-secondary); }
.formula-card.hero-equation { background: linear-gradient(120deg, #eef2ff, #effaf7); border-color: #c7d2fe; }
.blog-content pre { overflow-x: auto; padding: 19px 21px; margin: 18px 0; background: #f8fafc; border: 1px solid var(--border-color); border-radius: 11px; line-height: 1.7; font-size: .82rem; }
.blog-content pre code { background: none; padding: 0; font-size: 1em; }
.figure-downloads { display: inline-flex; gap: 8px; margin-top: 11px; }
.plot-figure .figure-downloads a { display: inline; width: auto; }
.figure-downloads a { padding: 4px 10px; background: #f7f8fc; border: 1px solid #e2e7f1; border-radius: 6px; font-size: .73rem; text-decoration: none; }
.figure-downloads a:hover { color: #3730a3; border-color: #a5b4fc; }
.optional-derivation { background: #fafbfe; }
.optional-derivation summary { padding: 16px 18px; }
.animation-fold[open] { background: #fff; }
.animation-fold iframe { display: block; width: 100%; height: 680px; border: 0; }
.animation-fold iframe:not([src]) { display: none; }
@media (max-width: 700px) { .animation-fold iframe { height: 1150px; } }
.table-wrap { border: 1px solid #e5e7ef; border-radius: 10px; }
tbody tr:nth-child(even) { background: #fafbfe; }
.references { overflow-wrap: anywhere; }
.references p { margin: 0; padding: 15px 0; border-bottom: 1px solid #edf0f5; line-height: 1.7; font-size: .85rem; }
.references p:last-child { border: 0; }
.references a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
:target { scroll-margin-top: 24px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #818cf8; outline-offset: 4px; border-radius: 3px; }
@media (max-width: 700px) {
    .header-insight { flex-direction: column; align-items: flex-start; gap: 4px; padding: 15px 18px; }
    .header-insight > div { width: 100%; }
    .header-insight .katex { font-size: 1.04em; }
    .toc { padding: 19px; }
    .toc ol { grid-template-columns: 1fr; gap: 5px; }
    .blog-content { padding: 27px 18px; }
    .formula-card { padding: 10px 12px; }
    .plot-figure { padding: 10px; }
    .bridge-figure { padding: 23px 14px 16px; }
    .ratio-routes { grid-template-columns: 1fr; gap: 18px; }
    .ratio-fork { height: 23px; margin-bottom: 8px; }
    .ratio-fork::before { bottom: 0; }
    .ratio-fork::after { display: none; }
    .ratio-origin > div { padding: 10px 8px; }
    .ratio-origin .katex { font-size: .91em; }
    .ratio-route { padding: 20px 18px 5px; }
    .blog-content .opening-question { font-size: 1.2rem; }
    .blog-content pre { padding: 14px; font-size: .75rem; }
}
@media (max-width: 420px) {
    .container { padding-left: 12px; padding-right: 12px; }
    .ratio-origin > strong { font-size: 1.35rem; }
}
@media print {
    body { background: white; }
    .container { max-width: none; padding: 0; }
    .blog-content { padding: 0; border: 0; box-shadow: none; }
    .back-link, .series-nav, .toc, .next-post, .figure-downloads, .animation-fold { display: none; }
    figure, .formula-card { break-inside: avoid; }
    h2, h3 { break-after: avoid; }
}