/* Visualize toggle button — matches tag-filter look but excluded from filter logic */
.viz-btn {
    padding: 0.3rem 0.5rem;
    background: transparent;
    border: none;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1;
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.15s ease;
    color: #999;
    margin-left: auto;
    white-space: nowrap;
}
.viz-btn:hover  { color: var(--primary-color); }
.viz-btn.active { color: var(--primary-color); font-weight: 600; }

/* Constellation image caption — matches post figcaption style */
.constellation-caption {
    text-align: center;
    color: #777;
    font-size: 0.84rem;
    line-height: 1.45;
    font-style: italic;
    margin-top: 0.55rem;
    margin-bottom: 0;
}

/* Constellation tooltip */
.constellation-tooltip {
    position: absolute;
    z-index: 20;
    max-width: 240px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    outline: none;
    border-radius: 4px;
    isolation: isolate;
    padding: 0.75rem 1rem;
    font-family: Charter, 'Bitstream Charter', Cambria, Georgia, serif;
    font-size: 0.85rem;
    color: #4a4a4a;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    line-height: 1.4;
}

.constellation-tooltip::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 10px;
    background: rgba(250, 250, 250, 0.14);
    backdrop-filter: blur(8px) saturate(1.02);
    -webkit-backdrop-filter: blur(8px) saturate(1.02);
    -webkit-mask-image: radial-gradient(ellipse 125% 112% at 50% 50%,
        rgba(0, 0, 0, 0.82) 36%,
        rgba(0, 0, 0, 0.48) 62%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0.06) 90%,
        transparent 98%);
    mask-image: radial-gradient(ellipse 125% 112% at 50% 50%,
        rgba(0, 0, 0, 0.82) 36%,
        rgba(0, 0, 0, 0.48) 62%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0.06) 90%,
        transparent 98%);
    pointer-events: none;
    z-index: 0;
}

.constellation-tooltip > * {
    position: relative;
    z-index: 1;
}

/* Tag filter buttons */
.tag-filters {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem 0;
    flex-wrap: wrap;
}

.tag-filter {
    padding: 0.3rem 0.75rem;
    background: transparent;
    border: none;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #999;
    text-decoration: none;
}

.tag-filter:hover {
    color: var(--primary-color);
}

.tag-filter.active {
    color: #555;
    font-weight: 525;
}

#active-filter-status {
    font-size: 0.8rem;
    color: #bbb;
    min-height: 1.2em;
    margin-top: 0.25rem;
}

/* Post tags */
.post-tags {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-tags .tag {
    font-size: 0.8rem;
    padding: 0;
    background: transparent;
    border: none;
    color: #999;
    cursor: default;
    transition: color 0.2s ease;
    pointer-events: none;
}

.post-tags .tag::before {
    content: '#';
    color: #ccc;
    margin-right: 0.1rem;
    transition: color 0.2s ease;
}

.post-tags .tag.highlighted {
    color: var(--primary-color);
    font-weight: 500;
}

.post-tags .tag.highlighted::before {
    color: var(--primary-color);
}

/* No hover effects on tags */
.post-tags .tag:hover {
    background: transparent;
    color: inherit;
}

/* Empty state message */
.empty-state-message {
    padding: 2rem 0;
    text-align: center;
    color: #999;
    font-size: 0.9rem;
}

/* Blog index styles */
.blog-posts {
    margin-top: 2rem;
}

.blog-post-item {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
    gap: 1.5rem;
}

.blog-post-item .post-date {
    font-size: 0.9rem;
    color: #666;
    min-width: 110px;
    flex-shrink: 0;
    padding-top: 0.15rem;
    line-height: 1.5;
}

.blog-post-item .post-content {
    flex-grow: 1;
    min-width: 0;
}

.blog-post-item h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: normal;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1.4;
}

.blog-post-item h3 a {
    color: var(--primary-color, #4a4a4a);
    text-decoration: none;
}

.blog-post-item h3 a:hover {
    text-decoration: underline;
}

.blog-post-item .post-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

.post-date {
    color: #666;
    font-size: 0.875rem;
}

.blog-analysis-section {
    margin: 2rem 0;
}

.blog-analysis-section .toggle-analysis {
    display: inline;
}


/* Override main site header styling for blog pages */
body #header-placeholder header,
body header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #eee !important;
}

/* Reduce footer spacing for blog posts */
.blog-post + .footer {
    margin: 2rem auto 1rem !important;
}

/* Lighter color for footer links */
.footer a,
footer a {
    color: #888;
    text-decoration: underline;
    transition: color 0.2s;
}

.footer a:hover,
footer a:hover {
    color: var(--primary-color);
}



.blog-post.hidden {
    display: none;
}

@media (max-width: 768px) {
    .blog-analysis-section .toggle-analysis {
        display: none;
    }

    .blog-analysis-section .analysis-section {
        display: none !important;
    }
}

.date {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 2rem;
}

.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    line-height: 1.65;
    color: var(--primary-color);
    background: var(--background-color);
}

.blog-post .intro {
    display: block;
    margin-bottom: 3rem;
    margin-top: 0;
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.blog-post .intro h1 {
    font-size: 2rem;
    color: var(--primary-color, #4a4a4a);
    margin: 0 0 0.5rem 0;
}

.blog-post .intro .post-tags {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.blog-post .intro .date {
    font-size: 0.9rem;
    color: #999;
    margin: 0;
}

.blog-post .intro .desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    margin: 0.5rem 0 0 0;
}

.blog-post h1 {
    font-size: 2rem;
    color: var(--primary-color, #4a4a4a);
}

.blog-post-date {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 2rem;
}

.blog-post h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-post a {
    color: var(--primary-color);
    text-decoration: underline;
}

.blog-post a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Code block styling */
.blog-post pre {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.blog-post pre code {
    background: transparent;
    padding: 0;
    border: none;
    font-size: inherit;
    color: #333;
}

.blog-post code {
    background: #f1f3f4;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.85em;
    color: #d73a49;
}

/* Blog post list styling - match main site style */
.blog-post ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 2rem;
}

.blog-post ul li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.blog-post ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #4a4a4a;
}

.blog-post ol {
    padding-left: 2rem;
    margin: 1rem 0;
}

.blog-post ol li {
    padding: 0.5rem 0;
    line-height: 1.65;
}

/* Ensure all text elements have proper fonts */
.blog-post p {
    line-height: 1.65;
    color: var(--primary-color);
}

.example-box {
    background-color: #f5f5f5;
    border-left: 3px solid #4a4a4a;
    border-radius: 0;
    padding: 1.5rem;
    margin: 2rem 0;
    color: #4a4a4a;
}

.example-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 2rem;
}

.example-box ul li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.example-box ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #4a4a4a;
}

.example-box ol {
    padding-left: 2rem;
    margin: 1rem 0;
}

.example-box ol li {
    padding: 0.5rem 0;
    line-height: 1.65;
}

.example-box-title {
    display: block;
    margin-bottom: 1rem;
    color: #4a4a4a;
    font-weight: 600;
    font-size: 1rem;
}

.example-box-prompt {
    margin: 10px 0;
}

.code {
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
}

.example-box-completion {
    margin: 10px 0;
}

.example-box-description {
    color: #666;
    font-size: 0.8em;
}

.blog-post figure.mdtx-figure {
    margin: 1.4rem auto;
    display: flex;
    justify-content: center;
}

.blog-post figure.mdtx-row-figure {
    margin: 1.4rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-post figure.mdtx-row-figure figcaption {
    margin-top: 0.55rem;
    max-width: 100%;
    text-align: center;
    color: #777;
    font-size: 0.84rem;
    line-height: 1.45;
    font-style: italic;
}

.blog-post .mdtx-image-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
    margin: 1.4rem 0;
}

.blog-post .mdtx-image-row figure.mdtx-figure {
    margin: 0;
    flex: 1;
}

.blog-post .mdtx-figure-inner {
    max-width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.blog-post figure.mdtx-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

:root[data-theme="dark"] .blog-post figure.mdtx-figure img,
:root[data-theme="dark"] .blog-post .image-grid img {
    opacity: 0.9;
    transition: opacity 0.25s ease;
}

:root[data-theme="dark"] .blog-post figure.mdtx-figure img:hover,
:root[data-theme="dark"] .blog-post .image-grid img:hover {
    opacity: 1;
}

.blog-post figure.mdtx-figure figcaption {
    margin-top: 0.55rem;
    max-width: 100%;
    text-align: center;
    color: #777;
    font-size: 0.84rem;
    line-height: 1.45;
    font-style: italic;
}

.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.image-grid figure {
    margin: 0;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Reset mdtx-figure flex layout so images center correctly in grid cells */
.image-grid figure.mdtx-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.image-grid .mdtx-figure-inner {
    display: block;
    width: 100%;
}

.image-grid figure.mdtx-figure img,
.image-grid img {
    width: auto;
    height: 320px;
    border-radius: 6px;
    margin: 0 auto;
}

.image-grid figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}


/* Footnote styling */
.footnotes {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    font-size: 0.85rem;
    color: #666;
}

.footnotes hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 1rem 0;
}

.footnotes ol {
    padding-left: 1.5rem;
    margin: 0;
}

.footnotes li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.footnotes a:not(.footnote-backref) {
    color: #777;
    text-decoration: underline;
}

.footnotes a:not(.footnote-backref):hover {
    color: var(--primary-color);
}

.footnotes .footnote-backref {
    text-decoration: none;
    color: #999;
    font-size: 0.8em;
    margin-left: 0.3rem;
}

.footnotes .footnote-backref:hover {
    color: var(--primary-color);
}

/* Inline footnote references */
sup a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.8em;
}

sup a:hover {
    text-decoration: underline;
}

/* Sidenote (RHS footnotes for wide viewports) */
.footnote-sidenote {
    position: absolute;
    width: 220px;
    font-size: 0.8rem;
    color: #999;
    line-height: 1.45;
    transition: color 0.2s ease, transform 0.3s ease, opacity 0.3s ease, top 0.25s ease;
}

.footnote-sidenote .sidenote-number {
    font-size: 0.75rem;
    color: #bbb;
    margin-right: 0.15rem;
}

.footnote-sidenote a {
    color: #999;
    text-decoration: underline;
}

.footnote-sidenote a:hover {
    color: var(--primary-color);
}

.footnote-sidenote.highlighted {
    color: #666;
    transform: scale(1.03);
    transform-origin: top left;
}

.footnote-sidenote.highlighted .sidenote-number {
    color: #999;
}

@media (prefers-reduced-motion: reduce) {
    .footnote-sidenote.highlighted {
        transform: none;
    }
}

/* Footnote tooltip on hover */
.footnote-tooltip {
    position: fixed;
    max-width: 400px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #666;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.footnote-tooltip.visible {
    opacity: 1;
}

.footnote-tooltip a {
    color: #777;
    text-decoration: underline;
}

.footnote-tooltip a:hover {
    color: var(--primary-color);
}

/* Hover effect on footnote reference */
sup a {
    transition: background 0.2s ease;
    padding: 0 2px;
    margin: 0 -2px;
    border-radius: 3px;
}

sup a:hover {
    background: #faf9f6;
}

/* Reciprocal highlight when the corresponding footnote is hovered. */
sup a.footnote-reference-highlighted {
    font-weight: 600;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .footnotes {
        font-size: 0.8rem;
    }
}

/* Display math. KaTeX does not line-break display mode, so a wide equation
   would otherwise overflow the column and drag the whole page sideways.
   overflow-y is pinned to hidden because overflow-x:auto would otherwise
   promote it to auto and put scrollbars on tall fractions and big operators;
   the padding gives those back the few pixels they need (0.5em is the measured
   floor, 0.6em leaves headroom). Margin is cut by the same amount the padding
   adds, so the vertical rhythm around equations is unchanged. */
.blog-post .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

/* Tables */
.mdtx-table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
}

.mdtx-table {
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--primary-color);
    width: auto;
    min-width: 50%;
}

.mdtx-table caption {
    caption-side: bottom;
    text-align: center;
    color: #777;
    font-size: 0.84rem;
    font-style: italic;
    margin-top: 0.55rem;
    line-height: 1.4;
}

.mdtx-table th,
.mdtx-table td {
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: top;
}

.mdtx-table thead th {
    font-weight: 600;
    border-bottom: 1.5px solid #c0c0c0;
}

.mdtx-table tbody tr:last-child td {
    border-bottom: none;
}

.mdtx-table tr.mdtx-row-sep td {
    border-top: 1px solid #d0d0d0;
}

/* For theorem, lemma, etc. */
.env-box {
    margin: 1.5rem 0;
    padding: 0;
    border: none;
    background: transparent;
}

.env-box-title {
    margin-bottom: 0.5rem;
}

.env-box-title strong {
    font-weight: bold;
}

.env-box-title em {
    font-style: italic;
}

.env-box-title .env-title {
    font-weight: normal;
}

/* Proof box styling with subtle left border */
.proof-box {
    border-left: 2px solid #e0e0e0;
    padding-left: 1.5rem;
    margin-left: 0;
    position: relative;
    padding-bottom: 1.5rem;
}

.proof-box-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Make links in proof titles subtle */
.proof-box-title a {
    color: inherit;
    text-decoration: none !important;
    border-bottom: 1px dotted #ccc;
    transition: border-color 0.2s ease;
}

.proof-box-title a:hover {
    text-decoration: none !important;
    border-bottom: 1px dotted var(--primary-color);
}

.proof-box-content {
    margin-top: 0.5rem;
}

.qed-box {
    width: 0.7em;
    height: 0.7em;
    border: 1px solid var(--primary-color);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: absolute;
    bottom: 0.5rem;
    right: 0;
}

.qed-box:hover {
    background: rgba(74, 74, 74, 0.1);
}

/* Collapsed state */
.proof-box.collapsed {
    padding-bottom: 0;
}

.proof-box.collapsed .proof-box-title {
    justify-content: space-between;
    width: 100%;
}

.proof-box.collapsed .proof-box-content {
    display: none;
}

.proof-box.collapsed .qed-box {
    position: static;
    background: var(--primary-color);
    margin-left: auto;
}

:root[data-theme="dark"] {
    /* Code pre and inline styling */
    .blog-post pre {
        background: #1c1c1e !important;
        border-color: #323235 !important;
    }
    .blog-post pre code {
        color: var(--primary-color) !important;
    }
    .blog-post code {
        background: #2c2c2e !important;
        color: #ff7b72 !important; /* Elegant warm coral inline code highlight */
    }

    /* Muted blog layout dates and backlink actions */
    .blog-post-date {
        color: #86868b !important;
    }
    
    /* Dynamic tooltips (footnotes) */
    .footnote-tooltip {
        background: #1c1c1e !important;
        border-color: #323235 !important;
        color: #a8a8ad !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }

    .footnotes a:not(.footnote-backref),
    .footnote-tooltip a {
        color: #86868b !important;
    }

    .footnotes a:not(.footnote-backref):hover,
    .footnote-tooltip a:hover {
        color: #b2b2b7 !important;
    }

    /* Keep inline footnote-reference hover feedback compatible with dark mode. */
    sup a:hover {
        background: rgba(226, 226, 229, 0.12) !important;
    }
    
    .footnote-sidenote .sidenote-number {
        color: #555559 !important;
    }
    .footnote-sidenote a {
        color: #86868b !important;
    }
    .footnote-sidenote a:hover {
        color: var(--primary-color) !important;
    }
    .footnote-sidenote.highlighted {
        color: var(--primary-color) !important;
    }
    .footnote-sidenote.highlighted .sidenote-number {
        color: #98989d !important;
    }
    
    /* Mathematical proofs & environment layouts */
    .proof-box {
        border-left-color: #323235 !important;
    }
    .proof-box-title a {
        border-bottom-color: #555559 !important;
    }
    .qed-box {
        border-color: var(--primary-color) !important;
    }
    .qed-box:hover {
        background: rgba(226, 226, 229, 0.1) !important;
    }

    /* Tag filters & list indices */
    .tag-filter {
        color: #86868b !important;
    }
    .tag-filter:hover {
        color: var(--primary-color) !important;
    }
    .tag-filter.active {
        color: var(--primary-color) !important;
    }
    #active-filter-status {
        color: #555559 !important;
    }
    
    .blog-post-item {
        border-color: #323235 !important;
    }
    .blog-post-item .post-date {
        color: #86868b !important;
    }
    
    .post-tags .tag {
        color: #86868b !important;
    }
    .post-tags .tag::before {
        color: #48484a !important;
    }
    .post-tags .tag.highlighted {
        color: var(--primary-color) !important;
    }
    .post-tags .tag.highlighted::before {
        color: var(--primary-color) !important;
    }

    /* Visual buttons (TOC / Graph controls) */
    .viz-btn {
        color: #86868b !important;
    }
    .viz-btn:hover {
        color: var(--primary-color) !important;
    }
    .viz-btn.active {
        color: var(--primary-color) !important;
    }

    /* Interactive Graph Constellation HUD */
    .constellation-tooltip {
        color: var(--primary-color) !important;
    }
    .constellation-tooltip::before {
        background: rgba(21, 21, 22, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    }

    /* Interactive Graph Constellation & Drift SVGs Overrides */
    #constellation-container {
        border-bottom-color: #323235 !important;
    }
    #constellation-container svg rect[fill="#fafafa"] {
        fill: var(--background-color) !important;
    }
    #constellation-container svg circle[stroke="#fafafa"] {
        stroke: var(--background-color) !important;
    }
    #constellation-container svg text[stroke="#fafafa"] {
        stroke: var(--background-color) !important;
    }
    #constellation-container svg text[fill="white"] {
        fill: var(--background-color) !important;
    }
    #constellation-container svg text[fill="#666"] {
        fill: var(--primary-color) !important;
    }

    /* KaTeX Math block overrides */
    .katex-display, 
    .katex {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* Example box block overrides */
    .example-box {
        background-color: #1c1c1e !important;
        border-left-color: var(--primary-color) !important;
        color: var(--primary-color) !important;
    }
    .example-box-title {
        color: var(--primary-color) !important;
    }
    .example-box-description {
        color: #86868b !important;
    }
    .example-box ul li::before {
        color: var(--primary-color) !important;
    }
}

/* Minimal Static Abstract Styling */
.abstract-text {
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.65;
    color: #555;
    margin: 1.8rem 0 2.2rem 0;
    padding: 0 0 0 1.2rem;
    border-left: 2px solid var(--border-color);
}

[data-theme="dark"] .abstract-text {
    color: #aaa;
}

/* TLDR Split-Row Top Navigation Bar */
.tldr-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.8rem;
    margin-top: 0.5rem;
}

.tldr-nav-back,
.tldr-nav-paper {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

.tldr-nav-back:hover,
.tldr-nav-paper:hover {
    text-decoration: underline;
}

[data-theme="dark"] .tldr-nav-row {
    border-bottom-color: #323235;
}

/* Walkthrough-specific layout and styles (TLDR) */
.tldr-post .intro {
    border-bottom: none !important;
    margin-bottom: 2rem !important;
    padding-bottom: 0 !important;
}

.tldr-post .intro h1 {
    font-size: 1.85rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.tldr-post .intro .date {
    color: #777 !important;
    margin-top: 0.5rem !important;
    font-size: 0.9rem !important;
}

.tldr-post .intro .desc {
    font-size: 1.02rem !important;
    color: #555 !important;
    font-style: italic !important;
    margin-top: 0.6rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 1rem !important;
}

.tldr-post .abstract-text {
    font-size: 0.95rem;
    background: #f6f6f7;
    padding: 1.1rem 1.4rem;
    border-left: 3px solid var(--primary-color);
    border-radius: 4px;
    margin: 2.2rem 0;
    color: #333;
    font-style: normal;
}

/* Dark mode overrides */
:root[data-theme="dark"] .tldr-post .intro .date {
    color: #888 !important;
}

:root[data-theme="dark"] .tldr-post .intro .desc {
    color: #98989d !important;
}

:root[data-theme="dark"] .tldr-post .abstract-text {
    background: #1c1c1e;
    color: #ceced2;
}

/* Invert white-background figures; hue-rotate restores original hues,
   and invert(0.92) maps white to ~#141414 to match the page background. */
:root[data-theme="dark"] .tldr-post figure.mdtx-figure img,
:root[data-theme="dark"] .tldr-post .image-grid img {
    filter: invert(0.92) hue-rotate(180deg);
    opacity: 1;
}

/* Citations */
:root {
    --ref-highlight-bg: rgba(74, 74, 74, 0.12);
}
:root[data-theme="dark"] {
    --ref-highlight-bg: rgba(206, 206, 210, 0.15);
}

.citation-ref {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    transition: all 0.15s ease;
}
.citation-ref:hover {
    text-decoration: underline;
}

.references a:not(.ref-backref) {
    color: #777;
    text-decoration: underline;
}
.references a:not(.ref-backref):hover {
    color: var(--primary-color);
}

.references {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}
.references h2 {
    margin-bottom: 1.2rem;
}
.references ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.blog-post .references li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    transition: background-color 0.5s ease;
    padding: 0.25rem 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 4px;
}
.blog-post .references li::before {
    content: none;
}
.references .ref-key {
    font-weight: normal;
    flex-shrink: 0;
    width: 6.2rem;
    color: #333;
}
.references .ref-text {
    flex-grow: 1;
}
.references .ref-backref {
    text-decoration: none;
    color: #999;
    font-size: 0.85em;
    margin-left: 0.35rem;
    transition: color 0.15s ease;
}
.references .ref-backref:hover {
    color: var(--primary-color);
}
.ref-highlight {
    animation: ref-flash 2s ease-out forwards;
}
.citation-ref.ref-highlight {
    border-radius: 3px;
    padding: 0 4px;
    margin: 0 -4px;
}

@keyframes ref-flash {
    0% { background-color: var(--ref-highlight-bg); }
    100% { background-color: transparent; }
}


/* Tooltips */
.citation-tooltip {
    position: fixed;
    max-width: 360px;
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #555;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    font-family: Charter, 'Bitstream Charter', Cambria, Georgia, serif;
}
.citation-tooltip.visible {
    opacity: 1;
}
.citation-tooltip .tooltip-title {
    font-weight: bold;
    color: #222;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}
.citation-tooltip .tooltip-authors {
    font-style: italic;
    color: #666;
    margin-bottom: 0.15rem;
}
.citation-tooltip .tooltip-year {
    color: #888;
}

/* Dark mode overrides for citations and tooltips */
:root[data-theme="dark"] .citation-ref {
    color: var(--primary-color);
}
:root[data-theme="dark"] .references {
    border-top-color: #333;
}
:root[data-theme="dark"] .references .ref-key {
    color: #ceced2;
}
:root[data-theme="dark"] .references a:not(.ref-backref) {
    color: #86868b;
}
:root[data-theme="dark"] .references a:not(.ref-backref):hover {
    color: #b2b2b7;
}
:root[data-theme="dark"] .references .ref-backref {
    color: #888;
}
:root[data-theme="dark"] .references .ref-backref:hover {
    color: var(--primary-color);
}

:root[data-theme="dark"] .citation-tooltip {
    background: #1c1c1e;
    border-color: #2c2c2e;
    color: #a0a0a5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .citation-tooltip .tooltip-title {
    color: #f5f5f7;
}
:root[data-theme="dark"] .citation-tooltip .tooltip-authors {
    color: #ceced2;
}

.blog-post .main-results {
    border-left: 3px solid var(--primary-color);
    padding: 0.75rem 1rem 0.75rem 1.1rem;
    margin: 1.4rem 0;
    background: var(--code-bg, #f7f7f7);
    border-radius: 0 4px 4px 0;
}
.blog-post .main-results strong {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.92rem;
}
.blog-post .main-results ul {
    margin: 0;
    padding-left: 1.2rem;
}
.blog-post .main-results li {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.25rem;
}
:root[data-theme="dark"] .blog-post .main-results {
    background: rgba(255,255,255,0.05);
}

a.tldr-paper-link {
    font-style: normal;
    color: #999;
    text-decoration: none;
    margin-left: auto;
    flex-shrink: 0;
}
a.tldr-paper-link:hover {
    color: var(--primary-color);
}

/* ---------------------------------------------------------------------------
   Heading permalinks
   IDs are minted by the compiler, so these links survive with or without JS.
   --------------------------------------------------------------------------- */

.blog-post h2[id],
.blog-post h3[id],
.blog-post h4[id] {
    scroll-margin-top: 1.5rem;
}

.blog-post .heading-anchor {
    margin-left: 0.4em;
    font-size: 0.72em;
    font-weight: 400;
    color: var(--primary-color);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.blog-post h2:hover .heading-anchor,
.blog-post h3:hover .heading-anchor,
.blog-post h4:hover .heading-anchor,
.blog-post .heading-anchor:focus-visible {
    opacity: 0.4;
}

.blog-post .heading-anchor:hover {
    opacity: 0.9;
}

/* ---------------------------------------------------------------------------
   Table of contents
   A labelled outline pinned in the left gutter. Its right edge tracks the text
   column rather than the window, so it stays beside the prose instead of
   drifting into the corner on a wide screen, and it gives up width as the
   gutter narrows before dropping out entirely.
   --------------------------------------------------------------------------- */

#toc {
    position: fixed;
    top: 7.5rem;
    right: calc(50% + 400px + 32px);
    width: clamp(160px, calc(50% - 400px - 48px), 230px);
    z-index: 900;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 11rem);
    font-size: 0.9rem;
    line-height: 1.45;
}

#toc[data-mode="hidden"] {
    display: none;
}

#toc .toc-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0 0 0.5rem;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: left;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.18s ease, border-color 0.18s ease;
}

#toc .toc-toggle:hover {
    opacity: 1;
    border-bottom-color: #ddd;
    border-bottom-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

#toc .toc-toggle:focus-visible {
    outline: 1px solid var(--primary-color);
    outline-offset: 3px;
}

#toc .toc-toggle-state::after {
    content: '(hide)';
    font-weight: 400;
    font-size: 0.78rem;
    opacity: 0.65;
}

#toc.collapsed .toc-toggle {
    border-bottom-color: transparent;
}

#toc.collapsed .toc-toggle-state::after {
    content: '(show)';
}

#toc.collapsed .toc-list {
    display: none;
}

#toc .toc-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-left: 2px solid #e4e4e4;
    border-left-color: color-mix(in srgb, var(--primary-color) 16%, transparent);
}

#toc .toc-list::-webkit-scrollbar {
    display: none;
}

/* A faded edge stands in for the scrollbar: it says the outline continues
   without putting a second piece of chrome in the margin. */
#toc .toc-list.fade-top {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
    mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
}

#toc .toc-list.fade-bottom {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 1.5rem);
    mask-image: linear-gradient(to top, transparent 0, #000 1.5rem);
}

#toc .toc-list.fade-top.fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}

#toc .toc-item {
    margin: 0;
    padding: 0;
    line-height: 1.45;
}

/* Titles wrap rather than truncate: a section is easier to find by its whole
   name than by the first twenty-odd characters of it. */
#toc .toc-link {
    display: block;
    margin-left: -2px;
    padding: 0.4rem 0 0.4rem 0.85rem;
    border-left: 2px solid transparent;
    color: var(--primary-color);
    text-decoration: none;
    opacity: 0.55;
    overflow-wrap: break-word;
    transition: opacity 0.18s ease, border-color 0.18s ease;
}

#toc .toc-h3 .toc-link {
    padding-left: 1.6rem;
    font-size: 0.84rem;
    opacity: 0.38;
}

#toc .toc-link:hover {
    opacity: 1;
}

#toc .toc-link:focus-visible {
    outline: 1px solid var(--primary-color);
    outline-offset: -1px;
}

#toc .toc-item.in-section > .toc-link {
    opacity: 0.75;
    border-left-color: currentColor;
}

#toc .toc-item.active > .toc-link {
    opacity: 1;
    font-weight: 500;
    border-left-color: currentColor;
}

@media print {
    #toc,
    .blog-post .heading-anchor {
        display: none;
    }
}