class CustomToc extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    font-family: 'JetBrains Mono', monospace;
                }
                .toc-title {
                    font-size: 0.75rem;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: #888888;
                    font-weight: 700;
                    margin-bottom: 1rem;
                }
                .toc-list {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }
                .toc-item {
                    margin-bottom: 0.5rem;
                }
                .toc-link {
                    display: block;
                    font-size: 0.8125rem; /* 13px */
                    color: #888888;
                    text-decoration: none;
                    border-left: 2px solid transparent;
                    padding-left: 1rem;
                    transition: all 0.2s ease;
                    line-height: 1.5;
                }
                .toc-link:hover {
                    color: #e5e5e5;
                }
                .toc-link.toc-item-active {
                    color: #ff6600;
                    border-left-color: #ff6600;
                    font-weight: 500;
                }
            </style>
            <div class="toc-title">On This Page</div>
            <ul class="toc-list">
                <li class="toc-item">
                    <a href="#intro" class="toc-link">Introduction</a>
                </li>
                <li class="toc-item">
                    <a href="#architecture" class="toc-link">Architecture</a>
                </li>
                <li class="toc-item">
                    <a href="#troubleshooting" class="toc-link">Rocky Linux 9</a>
                </li>
            </ul>
        `;
    }
}
customElements.define('custom-toc', CustomToc);