:root {
                --color-assistant: #ffffff;
                --color-light-blue: #cfddfc;
                --color-dark-blue: #e5effd;
                --color-primary: #e9eef6;
                --color-secondary: #f7f8fa;
                --color-third: #ffffff;
                --color-fourth: #f8fafd;
                --color-fifth: #e9eef6;
                --color-comment: #f6f9fd;
                --color-border-color: #d6dae2;
                --color-border-hover: #c3c9d3;
                --color-accent: #16161f;
                --color-accent-hover: #394456;
                --color-accent-text: #ffffff;
                --color-accent2: #0041f3;
                --color-accent2-hover: #0039d4;
                --color-accent2-text: #ffffff;
                --color-accent4: #eeedfd;
                --color-accent4-text: #5748c7;
                --color-note-text: #717176;
                --color-text: #100f16;
                --color-textHilight: #07060c;
                --color-blur: #f8fafdad;
                --color-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
                --scroll-background: #f1f4f8;
                --scroll-thumb: #d5dce7;
                --color-href: #0084ff;
                --color-href-hover: #0084ff;
                --color-href-visited: #6e6efa;
                --color-href-active: #8c8cff;
                --color-selected: rgba(0, 123, 255, 0.158);
                --color-editor: #ffffff;
                --color-editor-header: #f8fafd;
                --color-editor-tabs: #f8fafd;
                --color-file-explorer: #f8fafd;
                --color-file-hover: #f3f5f8;
                --color-file-active: #e9eef6;
                --color-window-header: #f8fafd;
                --color-window-header-hover: #e0e6f0;
                --spacing-xsm: 0.2rem;
                --spacing-sm: 0.425rem;
                --spacing-md: 0.85rem;
                --spacing-lg: 2rem;
                --border-radius: 11px;
                --border-radius-input: 1.25rem;
                --border-radius-button: 8px;
                --border-radius-round: 30px;
                --font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                --font-size-xsm: 0.75rem;
                --font-size-sm: 0.85em;
                --font-size-md: 1em;
                --font-size-lg: 1.1em;
                --font-size-xlg: 1.3em;
                --font-size-console: 13px;
                --divider-margin: -2px;
                --divider-width: 5px;
                --window-border-radius: 0;
                --window-border-color: var(--color-border-color);
                --search-result-hilight-background: #fc650054;
                --color-preview-background: var(--color-third);
                --color-error: #e64348;
                --color-info: #5683e4;
                --color-warn: #bb992a;
                --color-debug: #a658f0;
                --color-success: #39b56b;
                --editor-background: #ffffff;
                --editor-foreground: #000000;
                --token-keyword: #0000FF;
                --token-keyword-declaration: #0000FF;
                --token-keyword-flow: #0000FF;
                --token-identifier-js: #001080;
                --token-objectName: #001080;
                --token-functionName: #795E26;
                --token-type: #267F99;
                --token-type-identifier-js: #267F99;
                --token-string: #A31515;
                --token-string-escape: #A31515;
                --token-number: #098658;
                --token-regexp: #811F3F;
                --token-comment: #008000;
                --token-invalid: #F44747;
                --token-delimiter: #000000;
                --editorBracketHighlight-foreground1: #0451A5;
                --editorBracketHighlight-foreground2: #881798;
                --editorBracketHighlight-foreground3: #AA0D91;
                --editorBracketHighlight-foreground4: #0451A5;
                --editorBracketHighlight-foreground5: #881798;
                --editorBracketHighlight-foreground6: #AA0D91;
                --token-tag-css: #800000;
                --token-tag: #800000;
                --token-attribute-name-css: #E50000;
                --token-attribute-name: #E50000;
                --token-attribute-value: #0000FF;
                --token-tag-html: #800000;
                --token-delimiter-html: #000000;
                --token-attribute-value-html: #0000FF
            }

            .dark {
                /* Base editor palette */
                --editor-background: #1E1E1E;
                --editor-foreground: #d4d4d4;

                /* Core tokens (match light theme variable NAMES) */
                --token-keyword: #569cd6;
                --token-keyword-flow: #c586c0;
                --token-keyword-declaration: #569cd6;

                --token-identifier-js: #9cdcfe;
                --token-objectName: #4fc1ff;
                --token-functionName: #dcdcaa;

                --token-type: #4ec9b0;
                --token-type-identifier-js: #4ec9b0;

                --token-string: #ce9178;
                --token-string-escape: #d7ba7d;

                --token-number: #b5cea8;
                --token-regexp: #b46695;

                --token-comment: #6a9955;
                --token-invalid: #f44747;
                --token-delimiter: #dcdcdc;

                /* Bracket highlight (names expected by your CSS) */
                --editorBracketHighlight-foreground1: #FFD700;
                --editorBracketHighlight-foreground2: #b46695;
                --editorBracketHighlight-foreground3: #569CD6;
                --editorBracketHighlight-foreground4: #FFD700;
                --editorBracketHighlight-foreground5: #b46695;
                --editorBracketHighlight-foreground6: #569CD6;

                /* CSS-specific tokens your rules reference */
                --token-tag-css: #d7ba7d;
                /* selector color */
                --token-attribute-name-css: #9cdcfe;
                --token-attribute-value: #ce9178;
                /* generic attr value */
                --token-number: #b5cea8;
                /* (already set above) */
                /* function color fallback path uses --token-string or --token-tag-css */

                /* HTML-specific tokens your rules reference */
                --token-tag-html: #569cd6;
                --token-attribute-name: #9cdcfe;
                --token-attribute-value-html: #ce9178;
                --token-delimiter-html: #808080;

                /* Keep anything else you use (site colors, etc.) in your existing .dark */
            }

            .dark .accent-theme {
                --bg-accent: #0f0f0f;
                --bg-accent-alt: #0e0f0f;

                --bg-primary: #0d0e0f;
                --bg-secondary: #232429;
                --bg-tertiary: #16171a;
                --bg-elevated: #1b1e22;
                --color-blur: #121416ad;


                --text-primary: #f2f3f5;
                --text-secondary: #d0d4db;
                --text-tertiary: #94aab4;
                --text-inverse: #ffffff;

                --border-primary: #2c3033;
                --border-secondary: #353a3d;
                --border-hover: #424d57;

                --accent-primary: #0c0c0c;
                --accent-primary-hover: #000000;
                --accent-secondary: #0f6fff;
                --accent-secondary-hover: #005fec;

            }

            .light .accent-theme {
                --bg-accent: #0e0f0f;
                --bg-accent-alt: #20262c;

                --bg-primary: #121416;
                --bg-secondary: #2d2f36;
                --bg-tertiary: #1a1c20;
                --bg-elevated: #1d2025;
                --color-blur: #121416ad;


                --text-primary: #f2f3f5;
                --text-secondary: #f2f3f5;
                --text-tertiary: #94aab4;
                --text-inverse: #191a1b;

                --border-primary: #2c3033;
                --border-secondary: #353a3d;
                --border-hover: #424d57;

                --accent-primary: #ffffff;
                --accent-primary-hover: #e9eaec;
                --accent-secondary: #0f6fff;
                --accent-secondary-hover: #005fec;

            }

            /* ==========================================================================
     Token Styles — Core Language Elements
     ========================================================================== */

            /* Keywords (e.g. if, else, return) */
            .keyword {
                color: var(--token-keyword) !important;
            }

            .keyword\.declaration {
                color: var(--token-keyword-declaration, var(--editor-keyword)) !important;
            }

            .keyword\.flow {
                color: var(--token-keyword-flow, var(--editor-keyword)) !important;
            }

            /* Identifiers (variable & function names) */
            .identifier {
                color: var(--token-identifier-js, var(--editor-foreground)) !important;
            }

            /* Object property names (e.g. myObject.prop) */
            .objectName {
                color: var(--token-objectName) !important;
            }

            /* Function names (e.g. doSomething()) */
            .functionName {
                color: var(--token-functionName) !important;
            }

            /* Types (e.g. int, String, MyClass) */
            .type {
                color: var(--token-type) !important;
            }

            .type\.identifier {
                color: var(--token-type-identifier-js, var(--token-type)) !important;
            }

            /* Strings and escapes */
            .string {
                color: var(--token-string) !important;
            }

            .string\.escape,
            .string\.escape\.invalid {
                color: var(--token-string) !important;
            }

            /* Numbers (integer, float, hex, octal, binary) */
            .number,
            .number\.float,
            .number\.hex,
            .number\.octal,
            .number\.binary {
                color: var(--token-number) !important;
            }

            /* Regular expressions */
            .regexp,
            .regexp\.escape,
            .regexp\.escape\.control,
            .regexp\.escape\.other {
                /* HLJS maps regex to objectName */
                color: var(--token-regexp, var(--token-keyword-flow, var(--token-objectName)));
            }

            /* Comments (single-line, block, doc) */
            .comment,
            .comment\.doc {
                color: var(--token-comment) !important;
                /* font-style: italic; */
            }

            /* Invalid or error text */
            .invalid {
                /* no matching var provided—fallback to soft red */
                color: #f44747 !important;
            }

            /* Delimiters (commas, semicolons, etc.) */
            .delimiter {
                color: var(--token-delimiter) !important;
            }

            /* Bracket pairs (all levels unified) */
            /* .delimiter\.bracket,
.delimiter\.bracket\.level1,
.delimiter\.bracket\.level2,
.delimiter\.bracket\.level3,
.delimiter\.bracket\.level4,
.delimiter\.bracket\.level5,
.delimiter\.bracket\.level6 {
    color: var(--token-delimiter) !important;
} */
            /* Bracket pairs at different nesting levels */
            .delimiter\.bracket {
                color: var(--editorBracketHighlight-foreground1);
            }

            .delimiter\.bracket\.level1 {
                color: var(--editorBracketHighlight-foreground1);
            }

            .delimiter\.bracket\.level2 {
                color: var(--editorBracketHighlight-foreground2);
            }

            .delimiter\.bracket\.level3 {
                color: var(--editorBracketHighlight-foreground3);
            }

            .delimiter\.bracket\.level4 {
                color: var(--editorBracketHighlight-foreground4);
            }

            .delimiter\.bracket\.level5 {
                color: var(--editorBracketHighlight-foreground5);
            }

            .delimiter\.bracket\.level6 {
                color: var(--editorBracketHighlight-foreground6);
            }

            /* 
.delimiter\.bracket\.level1 {
    color: #FFD700;
}

.delimiter\.bracket\.level2 {
    color: #b46695;
}

.delimiter\.bracket\.level3 {
    color: #569CD6;
}

.delimiter\.bracket\.level4 {
    color: #FFD700;
}

.delimiter\.bracket\.level5 {
    color: #b46695;
}

.delimiter\.bracket\.level6 {
    color: #569CD6;
} */


            /* ==========================================================================
     Token Styles — CSS‑Specific Overrides
     (Each token also receives a “css-…” class)
     ========================================================================== */

            /* At‑rules (@media, @keyframes…) */
            .css-keyword\.at-rule {
                color: var(--token-keyword-flow, var(--token-keyword)) !important;
            }

            /* Selectors (element, class, ID, pseudo) */
            .css-selector {
                /* use --token-tag-css if it’s defined, otherwise fall back to --token-tag */
                color: var(--token-tag-css, var(--token-tag)) !important;
            }


            /* Property names (e.g. color, margin-top) */
            .css-attribute\.name {
                color: var(--token-attribute-name-css, var(--token-attribute-name)) !important;
            }

            /* Numeric values & units, hex colours */
            .css-number {
                color: var(--token-number) !important;
            }

            .css-number\.hex {
                color: var(--token-string) !important;
            }

            /* Identifiers in values (e.g. system-ui, flex) */
            .css-identifier {
                color: var(--token-attribute-value-css, var(--token-string)) !important;
            }

            /* Functions (e.g. rgb(), url(), calc()) */
            .css-function {
                color: var(--token-string, var(--token-tag-css)) !important;
            }

            .constant\.numeric,
            .css-constant\.numeric {
                color: var(--token-number) !important;
            }

            /* Parentheses in functions */
            .css-delimiter\.parenthesis {
                color: var(--token-delimiter) !important;
            }

            /* Pseudo‑classes/elements :hover ::before … */
            .css-keyword {
                color: var(--token-keyword) !important;
            }

            .keyword\.pseudo-class,
            .css-keyword\.pseudo-class {
                color: var(--token-tag-css, var(--token-tag)) !important;
            }

            .keyword\.pseudo-element {
                color: var(--token-tag-css, var(--token-tag)) !important;
            }

            .token.css-keyword.at-rule.keyframes,
            .token.keyword.at-rule.keyframes {
                color: var(--token-keyword-flow, var(--token-keyword)) !important;
            }

            /* ==========================================================================
     Token Styles — HTML‑Specific Overrides
     (Each token also receives an “html-…” class)
     ========================================================================== */

            /* Doctype, XML declarations */
            .html-metatag\.content {
                color: var(--token-metatag-content-html, var(--token-attribute-name)) !important;
            }

            .html-foreground {

                color: var(--editor-foreground) !important;

            }

            /* Tags (<div>, </body>, <my-component> …) */
            .html-metatag {
                color: var(--token-metatag-html, var(--token-tag-html)) !important;
            }

            .html-tag {
                color: var(--token-tag-html) !important;
            }

            /* Attribute names: class, id, data‑x‑foo … */
            .html-attribute\.name {
                color: var(--token-attribute-name-html, var(--token-attribute-name)) !important;
            }

            /* Attribute values:  "container", 'main' … */
            .html-attribute\.value {
                color: var(--token-attribute-value-html, var(--token-attribute-value)) !important;
            }

            /* Punctuation:  <  >  /  =  */
            .html-delimiter {
                color: var(--token-delimiter-html, var(--token-delimiter)) !important;
            }

            /* HTML comments <!-- ... --> */
            .html-comment,
            .html-comment\.content {
                color: var(--token-comment) !important;
            }

            /* ==========================================================================
   Token Styles — Python-Specific Overrides
   (Each token also receives a “py-…” class)
   ========================================================================== */
            pre code[class*="language-py"] {
                color: var(--editor-foreground);
            }

            .py-keyword {
                color: var(--token-keyword) !important;
            }

            .py-keyword\.flow,
            .py-keyword\.declaration,
            .py-keyword\.operator,
            .py-keyword\.self,
            .py-constant\.language {
                color: var(--token-keyword-flow, var(--token-keyword)) !important;
            }

            .py-comment {
                color: var(--token-comment) !important;
            }

            .py-string {
                color: var(--token-string) !important;
            }

            .py-string.escape {
                color: var(--token-string-escape, var(--token-string)) !important;
            }

            .py-number {
                color: var(--token-number) !important;
            }

            .py-tag {
                color: var(--token-tag) !important;
            }

            .py-delimiter {
                color: var(--token-delimiter) !important;
            }

            .py-type.identifier {
                color: var(--token-type-identifier-js, var(--token-type)) !important;
            }

            .py-functionName {
                color: var(--token-functionName) !important;
            }

            .py-identifier {
                color: var(--token-identifier-js, var(--editor-foreground)) !important;
            }

            .py-delimiter.bracket.level1,
            .py-delimiter.bracket.level2,
            .py-delimiter.bracket.level3,
            .py-delimiter.bracket.level4,
            .py-delimiter.bracket.level5,
            .py-delimiter.bracket.level6 {
                color: var(--editorBracketHighlight-foreground1) !important;
            }

            .py-invalid {
                color: #f44747 !important;
            }


            /* ==========================================================================
   Token Styles — Markdown Inline HTML Syntax
   ========================================================================== */
            .tag.md-tag,
            .delimiter.md-delimiter {
                color: var(--token-tag-html) !important;
            }

            .attribute\.name.md-attribute\.name {
                color: var(--token-attribute-name) !important;
            }

            .attribute\.value.md-attribute\.value,
            .variable.md-variable {
                color: var(--token-attribute-value, var(--token-string)) !important;
            }

            .delimiter.md-attribute\.name,
            .delimiter.md-attribute\.value,
            .delimiter.md-tag {
                color: var(--token-delimiter-html, var(--token-delimiter)) !important;
            }

            /* ==========================================================================
   Token Styles — JSON
   ========================================================================== */
            .string\.key {
                color: var(--token-identifier-js, var(--editor-foreground)) !important;
            }

            .string\.value {
                color: var(--token-string);
            }

            .json-keyword\.constant {
                color: var(--token-keyword) !important;
            }

            .code-block-container code {
                display: block;
                white-space: pre-wrap;
                word-break: break-word;
                height: 100%;
                padding: 20px;
                padding-top: 0px;
                background-color: var(--bg-secondary);
                position: relative;
                border-radius: var(--border-radius);
            }


            .code-block-container {
                margin: 1rem 0;
                border: 1px solid var(--border-primary);
                border-radius: var(--border-radius);
                background-color: var(--bg-secondary);
                padding: var(--spacing-sm) var(--spacing-md);
                position: relative;
            }

            .code-block-header {
                position: sticky;
                top: 0;
                z-index: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.15rem 0.15rem;
                border-radius: var(--border-radius);

            }


            .code-block-lang {
                font-size: 0.85rem;
                font-weight: 400;
                color: var(--text-tertiary);
                border-radius: var(--border-radius-button);
                background-color: var(#ffffff00);
                backdrop-filter: blur(14px);
                padding: 0.5rem 0.75rem;
            }

            .code-block-buttons {
                display: flex;
                flex-direction: row;
                gap: 0.75rem;
                padding: 0.5rem 0.75rem;
                background-color: var(#ffffff00);
                backdrop-filter: blur(14px);
                border-radius: var(--border-radius-button);
                top: 0.75rem;
                z-index: 10;
            }






            /* ==========================================
   DOCS CONTENT — TYPOGRAPHY & LAYOUT
   modern, clean, minimal (shadcn-style vibes)
========================================== */

            /* Headings */
            .docs-content h1,
            .docs-content h2,
            .docs-content h3,
            .docs-content h4,
            .docs-content h5,
            .docs-content h6 {
                font-family: "Google Sans", sans-serif;
                color: var(--text-primary);
                line-height: 1.2;
                font-weight: 500;
                margin: 0;
            }

            /* Vertical rhythm for headings */
            .docs-content h1 {
                font-size: 2.4rem;
                letter-spacing: -0.03em;
                margin-top: 2.5rem;
                margin-bottom: 1.25rem;
            }

            .docs-content h2 {
                font-size: 1.9rem;
                letter-spacing: -0.02em;
                margin-top: 2.25rem;
                margin-bottom: 1rem;
            }

            .docs-content h3 {
                font-size: 1.5rem;
                margin-top: 2rem;
                margin-bottom: 0.85rem;
            }

            .docs-content h4 {
                font-size: 1.25rem;
                margin-top: 1.75rem;
                margin-bottom: 0.75rem;
            }

            .docs-content h5 {
                font-size: 1.05rem;
                text-transform: none;
                letter-spacing: 0.02em;
                margin-top: 1.5rem;
                margin-bottom: 0.5rem;
            }

            .docs-content h6 {
                font-size: 0.9rem;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--text-tertiary);
                margin-top: 1.5rem;
                margin-bottom: 0.35rem;
            }

            /* Reduce top margin for very first heading on page */
            .docs-content>h1:first-child,
            .docs-content>h2:first-child {
                margin-top: 0.5rem;
            }

            /* Paragraphs */
            .docs-content p {
                margin: 0 0 1rem;
                color: var(--text-secondary);
                font-size: var(--font-size-base);
                line-height: 1.8;
            }

            /* Tighten paragraph after big headings */
            .docs-content h1+p,
            .docs-content h2+p {
                margin-top: 0.25rem;
            }

            /* Lists */
            .docs-content ul,
            .docs-content ol {
                margin: 0 0 1.1rem;
                padding-left: 1.4rem;
                color: var(--text-secondary);
                font-size: var(--font-size-base);
            }

            .docs-content li {
                margin-bottom: 0.3rem;
            }

            .docs-content li::marker {
                color: var(--text-tertiary);
            }

            /* Nested lists a bit tighter */
            .docs-content li>ul,
            .docs-content li>ol {
                margin-top: 0.3rem;
                margin-bottom: 0.3rem;
            }

            /* Links */
            .docs-content a:not(.cl-btn) {
                color: var(--accent-secondary);
                text-decoration: none;
                text-underline-offset: 2px;
                transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
            }

            .docs-content a:hover:not(.cl-btn) {
                /* color: var(--accent-secondary-hover);
            text-decoration: underline; */
            }

            /* Inline code */
            .docs-content code {
                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', source-code-pro, monospace;
                background: var(--bg-secondary);
                padding: 0.15rem 0.35rem;
                border-radius: 4px;
                font-size: 0.85em;
                color: var(--accent-primary);
                border: 1px solid rgba(0, 0, 0, 0.04);
            }

            .docs-content pre code {
                border: none;
            }

            /* Preformatted blocks
   (Your JS wraps these in .code-block-container, so keep this minimal) */
            .docs-content pre {
                background: transparent;
                padding: 0;
                border-radius: 0;
                overflow: visible;
                margin-bottom: var(--spacing-md);
                font-size: var(--font-size-base);
                line-height: 1.5;
            }

            .docs-content pre code {
                background: none;
                padding: 0;
                color: inherit;
            }

            /* Blockquotes */
            .docs-content blockquote {
                margin: 1.25rem 0;
                padding: 0.85rem 1rem;
                border-left: 3px solid var(--border-hover);
                background: var(--bg-secondary);
                color: var(--text-secondary);
                font-style: normal;
                border-radius: 0.5rem;
            }

            /* Images */
            .docs-content img {
                max-width: 100%;
                height: auto;
                display: block;
                border-radius: var(--radius-md);
                margin: 1.5rem 0;
                border: 1px solid var(--border-primary);
            }

            /* Horizontal rule */
            hr {
                border: none;
                height: 1px;
                background-color: var(--border-primary);
                margin: 2.5rem 0;
            }

            /* ==========================================
   UNIVERSAL DOCS TABLE (WRAPPER-BASED STYLE)
   clean, modern, rounded, responsive
========================================== */

            .docs-content .table-wrapper {
                width: 100%;
                overflow-x: auto;
                border-radius: 8px;
                margin: 1.75rem 0;
                border: 1px solid var(--border-primary);
                background: var(--bg-primary);
            }

            /* TABLE BASE */
            .docs-content table {
                width: 100%;
                border-collapse: collapse;
                min-width: 600px;
                font-size: 0.9rem;
                background: var(--bg-primary);
                border: none;
            }

            /* CELLS */
            .docs-content th,
            .docs-content td {
                padding: 0.75rem 1rem;
                border-bottom: 1px solid var(--border-primary);
                white-space: normal;
                color: var(--text-primary);
                vertical-align: top;
            }

            /* HEADER */
            .docs-content th {
                font-weight: 600;
                font-size: 0.78rem;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                background: var(--bg-secondary);
                color: var(--text-secondary);
            }

            /* LAST ROW (clean bottom edge) */
            .docs-content tr:last-child td,
            .docs-content tr:last-child th {
                border-bottom: none;
            }

            /* Emphasis row */
            .docs-content tr.table-emphasis>td,
            .docs-content tr.table-emphasis>th {
                background: var(--bg-tertiary);
                font-weight: 500;
            }

            /* Alignment helpers */
            .docs-content .text-center {
                text-align: center;
            }

            .docs-content .text-right {
                text-align: right;
            }

            /* Optional compact mode */
            .docs-content table.compact td,
            .docs-content table.compact th {
                padding: 0.5rem 0.75rem;
            }

            /* Responsive table tweaks */
            @media (max-width: 700px) {

                .docs-content th,
                .docs-content td {
                    padding: 0.6rem 0.75rem;
                }

                .docs-content table {
                    min-width: 480px;
                }
            }

            /* ==========================================
   DARK MODE ADJUSTMENTS
========================================== */
            .docs-content code {
                color: var(--token-attribute-name-html, var(--token-attribute-name));

            }

            .dark .docs-content code {
                background: var(--bg-secondary);
                color: var(--token-attribute-name-html, var(--token-attribute-name));
                border-color: rgba(255, 255, 255, 0.06);
            }

            .dark .docs-content blockquote {
                background: var(--bg-secondary);
                border-left-color: var(--border-secondary);
            }

            .dark .docs-content .table-wrapper {
                background: var(--bg-primary);
                border-color: var(--border-secondary);
            }

            .dark .docs-content th {
                background: var(--bg-tertiary);
            }

            /* ==========================================
   LAYOUT / RESPONSIVE (nav + docs)
========================================== */

            @media (max-width: 1550px) {

                .toc-nav,
                .docs-nav {
                    width: 240px;
                    min-width: 180px;
                }

                .docs-content {
                    max-width: 100%;
                }
            }

            /* Hide right-hand TOC on smaller desktops */
            @media (max-width: 1275px) {
                .toc-nav {
                    display: none;
                }

                .docs-nav {
                    width: 240px;
                    min-width: 180px;
                }
            }

            /* Stack layout on mobile */
            @media (max-width: 768px) {
                .app {
                    flex-direction: column;
                }

                .docs-nav {
                    width: 100%;
                    height: auto;
                    border-right: none;
                    border-bottom: 1px solid var(--border-primary);
                    overflow-y: visible;
                    z-index: 10;
                }

                .tree {
                    display: none;
                }

                .url-input {
                    margin: 0;
                }

                .status {
                    display: none;
                }

                .docs-content-wrapper {
                    padding: var(--spacing-md);
                }

                .toc-nav {
                    width: 100%;
                    border-left: none;
                    border-top: 1px solid var(--border-primary);
                }

                .docs-dropdown {
                    left: 0;
                    right: 0;
                    top: calc(100%);
                }
            }


















            /* Page-scoped docs styles for "What is Codevre" */
            .docs-content .doc-kicker {
                font-size: 0.8rem;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--text-tertiary);
                margin: 0 0 0.5rem;
            }

            .docs-content .page-intro {
                max-width: 640px;
            }

            .docs-content .page-intro p {
                margin-bottom: 0.75rem;
            }

            .docs-content .quick-start {
                margin: 1.75rem 0 2.25rem;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
                color: var(--text-secondary);
                font-size: var(--font-size-base);
            }

            .docs-content .quick-start strong {
                font-weight: 500;
                color: var(--text-primary);
            }

            .docs-content .quick-start a {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                padding: 0.4rem 0.9rem;
                border-radius: 999px;
                border: 1px solid var(--border-primary);
                background: var(--bg-primary);
                font-size: 0.9rem;
                text-decoration: none;
                color: var(--text-secondary);
                white-space: nowrap;
                transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
            }

            .docs-content .quick-start a:hover {
                background: var(--bg-tertiary);
                border-color: var(--border-hover);
                color: var(--text-primary);
            }

            .docs-content .section-head {
                margin-bottom: 0.5rem;
            }

            .docs-content .section-description {
                margin-bottom: 1.25rem;
                max-width: 640px;
            }

            .docs-content .problem-list {
                list-style: none;
                padding-left: 0;
                margin: 0 0 1.25rem;
            }

            .docs-content .problem-list li {
                margin-bottom: 0.75rem;
            }

            .docs-content .problem-list strong {
                color: var(--text-primary);
            }

            .docs-content .pill-list {
                list-style: none;
                padding-left: 0;
                margin: 0;
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .docs-content .pill-list li {
                margin: 0;
                padding: 0.25rem 0.7rem;
                border-radius: 999px;
                border: 1px solid var(--border-primary);
                background: var(--bg-secondary);
                font-size: 0.85rem;
                color: var(--text-secondary);
                white-space: nowrap;
            }

            .docs-content .doc-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1rem;
                margin-top: 1.25rem;
                margin-bottom: 0.5rem;
            }

            .docs-content .doc-card {
                border-radius: 8px;
                border: 1px solid var(--border-primary);
                background: var(--bg-secondary);
                padding: 1rem;
                display: flex;
                flex-direction: column;
                gap: 0.4rem;
            }

            .docs-content .doc-card h3 {
                margin: 0;
                font-size: 1.05rem;
            }

            .docs-content .doc-card p {
                margin: 0;
                font-size: 0.92rem;
            }

            .docs-content .doc-callout {
                margin: 1.75rem 0;
                padding: 0.9rem 1rem;
                border-radius: 8px;
                border: 1px solid var(--border-primary);
                background: var(--bg-secondary);
                font-size: 0.95rem;
            }

            .docs-content .doc-callout strong {
                color: var(--text-primary);
            }

            .docs-content .doc-callout p {
                margin: 0.25rem 0 0;
            }

            .docs-content .comparison-note {
                margin-top: 0.5rem;
                font-size: 0.85rem;
                color: var(--text-tertiary);
            }

            @media (max-width: 768px) {
                .docs-content .doc-grid {
                    grid-template-columns: minmax(0, 1fr);
                }

                .docs-content .quick-start {
                    align-items: flex-start;
                }
            }






























            :root {
                --guide-max: 1200px;
                --guide-pad: clamp(16px, 4vw, 24px);
                --guide-radius: 0.75rem;
                --guide-radius-sm: 4px;
            }

            .guide-hero {
                background: linear-gradient(to left,
                        var(--bg-tertiary) 0%,
                        /* light cyan-blue top */
                        var(--bg-tertiary) 80%,
                        /* subtle transition zone */
                        var(--bg-secondary) 120%
                        /* warm peach bottom */
                    );
                padding: clamp(40px, 8vw, 80px) 0;
                margin-bottom: 2rem;
                border-bottom: 1px solid var(--border-primary);
            }

            .guide-inner-hero {
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
                padding-inline: var(--guide-pad);
            }

            .code-block-container {
                /* max-width: 920px;
                margin: 2rem auto; */
            }

            /* Base */
            .page {
                background: transparent;
            }

            .guide {
                padding: clamp(22px, 4.8vw, 48px) 0;
                padding-top: 0;
            }

            .guide-inner {
                width: 100%;
                max-width: var(--guide-max);
                margin: 0 auto;
                padding-inline: var(--guide-pad);
            }

            /* Top chrome */
            .guide-top {
                /* padding-top: clamp(16px, 5vw, 26px); */
            }

            .guide-breadcrumbs {
                display: flex;
                align-items: center;
                gap: 0.55rem;
                flex-wrap: wrap;
                color: var(--text-tertiary);
                font-size: var(--font-size-sm);
                margin: 0 0 0.9rem;
            }

            .guide-breadcrumbs a {
                color: var(--text-secondary);
                text-decoration: none;
                font-weight: 500;
                transition: color var(--transition-fast);
            }

            .guide-breadcrumbs a:hover {
                color: var(--accent-secondary);
            }

            .guide-sep {
                width: 5px;
                height: 5px;
                border-radius: 999px;
                background: var(--text-tertiary);
                opacity: 0.55;
            }

            /* Title + meta */
            .guide-title {
                font-family: "Google Sans", sans-serif;
                color: var(--text-primary);
                font-weight: 500;
                line-height: 1.12;
                letter-spacing: -0.03em;
                font-size: clamp(34px, 5.2vw, 52px);
                margin: 0 0 0.65rem;
            }

            .guide-lede {
                margin: 0 0 1.1rem;
                color: var(--text-secondary);
                font-size: clamp(1rem, 2.1vw, 1.12rem);
                line-height: 1.75;
            }

            .guide-meta {
                display: flex;
                gap: 0.55rem;
                flex-wrap: wrap;
                align-items: center;
                margin: 0.25rem 0 0;
            }

            .guide-pill {
                display: inline-flex;
                align-items: center;
                gap: 0.45rem;
                padding: 0.28rem 0.72rem;
                border-radius: 999px;
                border: 1px solid var(--border-primary);
                background: var(--bg-secondary);
                color: var(--text-secondary);
                font-size: 0.85rem;
                font-weight: 500;
            }

            .guide-pill i {
                font-size: 1rem;
                color: var(--text-secondary);
            }

            /* Primary action card */
            .quick-start {
                margin: 1.2rem 0 1.1rem;

                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
                font-size: 0.95rem;
            }

            .quick-start strong {
                font-weight: 500;
                color: var(--text-primary);
            }

            .quick-start .qs-actions {
                display: flex;
                gap: 0.75rem;
                flex-wrap: wrap;
                justify-content: flex-end;
            }

            @media (max-width: 720px) {
                .quick-start .qs-actions {
                    justify-content: flex-start;
                }
            }

            /* Embed */
            .demo-embed {
                margin: 0.9rem 0 1.4rem;
                border-radius: var(--guide-radius);
                overflow: hidden;
                border: 1px solid var(--border-primary);
                background: var(--bg-primary);
            }

            .demo-embed iframe {
                width: 100%;
                aspect-ratio: 16/9;
                border: 0;
                display: block;
            }

            /* Content typography (docs-like) */
            .docs-content {
                padding-top: 0.25rem;
            }

            .docs-content h1,
            .docs-content h2,
            .docs-content h3,
            .docs-content h4,
            .docs-content h5,
            .docs-content h6 {
                font-family: "Google Sans", sans-serif;
                color: var(--text-primary);
                line-height: 1.2;
                font-weight: 500;
                margin: 0;
            }

            .docs-content h2 {
                font-size: 1.9rem;
                letter-spacing: -0.02em;
                margin-top: 2.1rem;
                margin-bottom: 0.85rem;
            }

            .docs-content h3 {
                font-size: 1.45rem;
                margin-top: 1.7rem;
                margin-bottom: 0.75rem;
            }

            .docs-content p {
                margin: 0 0 1rem;
                color: var(--text-secondary);
                font-size: var(--font-size-base);
                line-height: 1.85;
                max-width: 78ch;
            }

            .docs-content h2+p,
            .docs-content h3+p {
                margin-top: 0.2rem;
            }

            .docs-content ul,
            .docs-content ol {
                margin: 0 0 1.1rem;
                padding-left: 1.4rem;
                color: var(--text-secondary);
                font-size: var(--font-size-base);
            }

            .docs-content li {
                margin-bottom: 0.35rem;
            }

            .docs-content li::marker {
                color: var(--text-tertiary);
            }

            .docs-content a:not(.cl-btn) {
                color: var(--accent-secondary);
                text-decoration: none;
                text-underline-offset: 2px;
                transition: color var(--transition-fast);
            }

            .docs-content a:hover:not(.cl-btn) {
                color: var(--accent-secondary);
            }

            /* Inline code */
            .docs-content code {
                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', ui-monospace, monospace;
                background: var(--bg-secondary);
                padding: 0.15rem 0.35rem;
                border-radius: 6px;
                font-size: 0.85em;
                color: var(--accent-primary);
                border: 1px solid rgba(0, 0, 0, 0.04);
            }

            /* Anchor link (your docs pattern) */
            .docs-content .anchor-link {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-left: 0.4rem;
                width: 1.6rem;
                height: 1.6rem;
                border-radius: 8px;
                opacity: 0;
                transform: translateY(1px);
                transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;
                color: var(--text-secondary);
                cursor: pointer;
                margin-left: 1rem;
                display: none;
            }

            .docs-content .anchor-link i[class^="ti"] {
                font-size: 1em;
                line-height: 1;
            }

            .docs-content h2:hover .anchor-link,
            .docs-content h3:hover .anchor-link,
            .docs-content .anchor-link:focus-visible {
                opacity: 1;
                transform: translateY(0);
            }

            .docs-content .anchor-link:hover {
                background: var(--bg-secondary);
                color: var(--text-primary);
            }

            .docs-content .anchor-link.copied {
                color: var(--accent-secondary);
            }

            /* Notes / callouts */
            .note {
                margin: 1.25rem 0 1.35rem;
                padding: 0.95rem 1rem;
                border-radius: var(--guide-radius);
                border: 1px solid var(--border-primary);
                background: var(--bg-secondary);
                display: grid;
                grid-template-columns: 22px 1fr;
                gap: 0.75rem;
            }

            .note i {
                color: var(--accent-secondary);
                font-size: 1.15rem;
                margin-top: 0.1rem;
            }

            .note p {
                margin: 0;
                line-height: 1.75;
            }


            /* Divider */
            .hr {
                border: none;
                height: 1px;
                background: var(--border-primary);
                margin: 2.25rem 0;
            }

            /* CTA */
            .guide-cta {
                padding-top: clamp(40px, 8vw, 80px);
                padding-bottom: clamp(40px, 8vw, 80px);
            }

            .guide-cta-box {
                max-width: var(--guide-max);
                margin: 0 auto;
                padding: clamp(26px, 5.8vw, 48px) clamp(18px, 4vw, 36px);
                border-radius: 16px;
                text-align: center;
            }

            .guide-cta-title {
                font-family: "Google Sans", sans-serif;
                font-size: clamp(28px, 4.6vw, 44px);
                font-weight: 500;
                margin: 0 0 0.7rem;
                color: var(--text-primary);
                letter-spacing: -0.02em;
            }

            .guide-cta-subtitle {
                color: var(--text-secondary);
                font-size: clamp(1rem, 2.1vw, 1.12rem);
                margin: 0 0 1.35rem;
                line-height: 1.75;
            }

            /* Buttons (same token names you already use) */
            .cl-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                padding: 0.58rem 1.1rem;
                border-radius: 999px;
                font-size: 0.95rem;
                font-weight: 500;
                border: 1px solid transparent;
                text-decoration: none;
                cursor: pointer;
                transition: background var(--transition-fast), border-color var(--transition-fast),
                    transform var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
                white-space: nowrap;
                user-select: none;
            }

            .cl-btn i {
                font-size: 1.1rem;
            }

            .cl-btn-primary {
                background: var(--accent-primary);
                color: var(--text-inverse);
                border-color: var(--accent-primary);
                outline: 2px solid var(--border-primary);
                outline-offset: 2px;
            }

            .cl-btn-primary:hover {
                background: var(--accent-secondary);
                border-color: var(--accent-secondary);
                color: #fff;
            }

            .cl-btn-secondary {
                background: var(--bg-primary);
                color: var(--text-primary);
                border-color: var(--border-primary);
                outline: 2px solid var(--border-primary);
                outline-offset: 2px;
            }

            .cl-btn-secondary:hover {
                background: var(--bg-tertiary);
                border-color: var(--border-hover);
            }

            .cl-btn-ghost {
                background: transparent;
                color: var(--text-primary);
                border-color: var(--border-primary);
            }

            .cl-btn-ghost:hover {
                background: var(--bg-tertiary);
                border-color: var(--border-hover);
            }

            /* Reduced motion */
            @media (prefers-reduced-motion: reduce) {

                .cl-btn,
                .code-btn {
                    transition: none !important;
                }

                .cl-btn:hover,
                .code-btn:hover {
                    transform: none !important;
                }
            }

            .quick-start-center {
                display: flex;
                justify-content: center;
            }

            .qs-actions {
                display: flex;
                gap: 0.75rem;
            }

            .spacer {
                margin: 6rem 0;
            }

            .half-spacer {
                margin: 3rem 0;
            }

            .cta-section {
                max-width: 900px;
                margin: 0 auto;
                padding: clamp(32px, 7vw, 56px) clamp(24px, 4vw, 40px);
                border-radius: 16px;
                text-align: center;
                /* border: 1px solid var(--border-primary);
  background: var(--bg-secondary); */
            }

            .cta-section-title {
                font-family: "Google Sans", sans-serif;
                font-size: clamp(24px, 3.4vw, 32px);
                font-weight: 500;
                margin: 0 0 0.75rem;
                color: var(--text-primary);
            }

            .cta-section-subtitle {
                color: var(--text-secondary);
                font-size: 1rem;
                margin: 0 0 1.75rem;
                line-height: 1.6;
            }

            .cta-group {
                display: flex;
                flex-wrap: wrap;
                gap: 0.75rem;
                margin-top: 1.25rem;
                justify-content: center;
            }