/* ── CSS Variables ─────────────────────────────────────────────── */
        :root {
            color-scheme: light;
            --bg: var(--md-bg, #0d1117);
            --panel: var(--md-kbd-bg, #161b22);
            --stroke: var(--md-border, #30363d);
            --fg: var(--md-fg, #e6edf3);
            --fg-muted: var(--md-muted, #8b949e);
            --link: var(--md-link, #58a6ff);
            --err-bg: rgba(239, 68, 68, .08);
            --err-border: #fecaca;
            --err-fg: var(--md-danger, #d1242f);
            --scroll-track: transparent;
            --scroll-thumb: rgba(148, 163, 184, .35);
            --badge-bg: var(--md-code-bg, rgba(255, 255, 255, .06));
            --badge-fg: var(--md-muted, #8b949e);
            --scroll-thumb: rgba(100, 116, 139, .4);
            --skeleton: rgba(0, 0, 0, .04);
            --skeleton-shine: rgba(0, 0, 0, .07);
        }

        /* ── Reset & base ──────────────────────────────────────────────── */
        *,
        *::before,
        *::after {
            box-sizing: border-box
        }

        html {
            scrollbar-width: thin;
            scrollbar-color: var(--scroll-thumb) var(--scroll-track);
        }

        html,
        body {
            height: 100%;
            margin: 0;
            background: var(--bg);
            color: var(--fg);
            font-family: "Noto Serif", "Noto Serif CJK SC", "Noto Serif SC", Georgia, "Times New Roman", serif;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        .btn {
            background: transparent;
            border: 1px solid var(--stroke);
            color: var(--fg-muted);
            padding: .35rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: .82rem;
            font-weight: 500;
            transition: border-color .15s, background .15s, color .15s;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
        }

        .btn:hover {
            background: rgba(127, 127, 127, .1);
            color: var(--fg);
        }

        /* ── Loading skeleton ─────────────────────────────────────────── */
        .skeleton {
            padding: 2rem;
            max-width: 900px;
            margin: 0 auto;
        }

        .skeleton-line {
            height: 14px;
            border-radius: 6px;
            background: var(--skeleton);
            margin-bottom: 12px;
            position: relative;
            overflow: hidden;
        }

        .skeleton-line::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
            animation: shimmer 1.5s infinite;
        }

        .skeleton-line:nth-child(1) {
            width: 45%;
            height: 28px;
            margin-bottom: 20px;
        }

        .skeleton-line:nth-child(2) {
            width: 90%
        }

        .skeleton-line:nth-child(3) {
            width: 75%
        }

        .skeleton-line:nth-child(4) {
            width: 85%
        }

        .skeleton-line:nth-child(5) {
            width: 60%
        }

        .skeleton-line:nth-child(6) {
            width: 0;
            height: 8px
        }

        .skeleton-line:nth-child(7) {
            width: 35%;
            height: 22px;
            margin-bottom: 16px
        }

        .skeleton-line:nth-child(8) {
            width: 80%
        }

        .skeleton-line:nth-child(9) {
            width: 70%
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-100%)
            }

            100% {
                transform: translateX(100%)
            }
        }

        /* Non-scrolling wrapper around fenced code: keeps the language label
           pinned while the <pre> scrolls horizontally. */
        #content .code-wrap {
            position: relative;
            margin: 1.25rem 0;
        }

        #content .code-wrap pre {
            margin: 0;
            border-radius: 5px;
        }

        /* ── Language label on code blocks ───────────────────────────── */
        #content .code-wrap .code-lang {
            position: absolute;
            top: 0;
            right: .75rem;
            padding: 0 .35rem;
            font-size: .68rem;
            font-family: "Fira Code", monospace;
            color: var(--fg-muted);
            background: var(--md-bg);
            letter-spacing: .035em;
            font-weight: 500;
            line-height: 1.6;
            transform: translateY(-50%);
            z-index: 2;
        }

        /* ── Mermaid diagrams ──────────────────────────────────────────── */
        /* Collapsible heading sections */
        #content section.heading-section {
            margin: 0;
        }

        #content section.heading-section.is-collapsed > .heading-content {
            display: none;
        }

        #content .heading-collapsed-indicator {
            display: none;
            position: absolute;
            left: 0;
            bottom: .08rem;
            color: var(--fg-muted);
            font-family: var(--md-font-sans);
            font-size: .72rem;
            font-weight: 400;
            line-height: 1;
            opacity: .45;
        }

        #content section.heading-section.is-collapsed.has-heading-content
            > .heading-summary > .heading-collapsed-indicator {
            display: block;
        }

        #content .heading-summary {
            display: block;
            position: relative;
            padding-block: 1px;
            margin-block: -1px;
            list-style: none;
            cursor: pointer;
        }

        #content .heading-summary > :is(h1, h2, h3, h4, h5, h6)::before {
            content: '';
            position: absolute;
            left: -.9rem;
            top: 50%;
            width: .32rem;
            height: .32rem;
            border-right: 1.25px solid var(--fg-muted);
            border-bottom: 1.25px solid var(--fg-muted);
            opacity: 0;
            pointer-events: none;
            transform: translateY(-50%) rotate(-45deg);
            transition: transform .16s ease, border-color .16s ease, opacity .16s ease;
        }

        #content section.heading-section:not(.is-collapsed) > .heading-summary > :is(h1, h2, h3, h4, h5, h6)::before {
            transform: translateY(-50%) rotate(45deg);
        }

        #content .heading-summary:hover > :is(h1, h2, h3, h4, h5, h6)::before {
            border-color: var(--fg);
            opacity: .55;
        }

        #content .heading-summary:focus-visible > :is(h1, h2, h3, h4, h5, h6)::before {
            opacity: .55;
        }

        #content section.heading-section.is-collapsed
            section.heading-section > .heading-summary {
            pointer-events: none;
            cursor: default;
        }

        #content section.heading-section.is-collapsed
            section.heading-section > .heading-summary
            > :is(h1, h2, h3, h4, h5, h6)::before {
            opacity: 0;
        }

        #content .heading-summary > :is(h1, h2, h3, h4, h5, h6) {
            display: block;
            position: relative;
        }

        #content .heading-summary > :is(h1, h2) {
            padding-bottom: .3em;
            border-bottom: 1px solid var(--md-border-muted);
        }

        @media (prefers-reduced-motion: reduce) {
            #content .heading-summary > :is(h1, h2, h3, h4, h5, h6)::before {
                transition: none;
            }
        }

        .mermaid-block {
            position: relative;
            margin: 1em 0;
            border: 1px solid var(--stroke);
            border-radius: 10px;
            background: var(--panel);
            overflow: hidden;
            min-height: 60px;
        }

        .mermaid-block .mermaid-svg-wrap {
            padding: 1rem;
            display: flex;
            justify-content: center;
            overflow: auto;
        }

        .mermaid-block .mermaid-svg-wrap svg {
            max-width: 100%;
            height: auto;
        }

        .mermaid-block .mermaid-expand-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 2;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--panel);
            border: 1px solid var(--stroke);
            border-radius: 6px;
            cursor: pointer;
            opacity: 0;
            transition: opacity .2s;
            color: var(--fg-muted);
        }

        .mermaid-block:hover .mermaid-expand-btn {
            opacity: 1
        }

        .mermaid-block .mermaid-expand-btn:hover {
            color: var(--fg);
            background: rgba(127, 127, 127, .1);
        }

        .mermaid-block .mermaid-error {
            padding: .6rem 1rem;
            font-size: .85rem;
            color: var(--err-fg);
            background: var(--err-bg);
            border: 1px solid var(--err-border);
            border-radius: 6px;
            margin: .5rem;
        }

        /* Hide Mermaid's built-in error artifacts (NOT .messageText — used for sequence diagram labels) */
        .mermaid-block :where(.error, .error-icon, .error-text, .errorText) {
            display: none !important
        }

        /* ── Fullscreen overlay (mermaid zoom/pan) ─────────────────────── */
        #overlay {
            width: 100vw;
            height: 100vh;
            max-width: none;
            max-height: none;
            margin: 0;
            padding: 0;
            border: 0;
            background: var(--bg);
            color: var(--fg);
        }

        #overlay[open] {
            display: flex;
            flex-direction: column;
        }

        #overlay::backdrop {
            background: var(--bg);
        }

        #overlay-actions {
            position: absolute;
            z-index: 1;
            top: 1rem;
            right: 1rem;
            display: flex;
            flex-direction: column;
            gap: .4rem;
        }

        #overlay-actions .btn {
            width: 2.5rem;
            height: 2.5rem;
            padding: 0;
            background: var(--panel);
            box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
        }

        #overlay-panzoom {
            flex: 1;
            overflow: hidden;
        }

        #overlay-panzoom-inner {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #overlay-panzoom-inner svg {
            display: block
        }

        /* ── Misc ──────────────────────────────────────────────────────── */
        @media (max-width: 768px) {
            #content {
                padding: 1rem 1rem 3rem
            }
        }
        @media print {
            .mermaid-block .mermaid-svg-wrap svg {
                max-height: 95vh !important;
            }
        }