@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root,
:root[data-theme="dark"] {
    --bg: #000000;
    --text: #f3f3f3;
    --text: #ffffff;
    --muted: #a3a3a3;
    --border: #2b2b2b98;
    --bg-elevated: rgba(255, 255, 255, 0.08);
    --bg-card: rgba(25, 25, 25, 0.2);
    --bg-card-hover: rgba(28, 28, 28, 0.8);
    --bg-code: #050505;
    --code-inline-bg: #050505;
    --code-inline-text: #f3f3f3;
    --code-text: #abb2bf;
    --bg-menu: #000000;
    --bg-modal: rgba(10, 10, 10, 0.35);
    --hover-bg: rgba(255, 255, 255, 0.08);
    --search-bg: rgba(50, 50, 50, 0.1);
    --search-panel-bg: rgba(10, 10, 10, 0.6);
    --code-group-bg: #0d0d0d;
    --code-group-panel-bg: #000000;
    --code-tab-active: #ffffff;
    --footer-border: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #000000;
    --btn-home-bg: #ffffff;
    --btn-home-text: #000000;
    --callout-note-bg: rgba(50, 50, 50, 0.1);
    --callout-info-bg: rgba(39, 39, 39, 0.08);
    --callout-warning-bg: rgba(180, 120, 0, 0.18);
    --callout-warning-text: #fde047;
    --body-radial-tint: rgba(0, 0, 0, 0.7);
    --skeleton-pulse-1: rgba(255, 255, 255, 0.05);
    --skeleton-pulse-2: rgba(255, 255, 255, 0.12);
    --spider-display: none;
    --cobweb-display: none;
    --spider-thread: rgba(255, 255, 255, 0.3);
    --snow-display: none;
    --leaf-display: none;
    --lights-display: none;

    --hl-comment: #5c6370;
    --hl-punct: #abb2bf;
    --hl-func: #61afef;
    --hl-keyword: #c678dd;
    --hl-string: #98c379;
    --hl-var: #e06c75;
    --hl-op: #56b6c2;
    --hl-num: #d19a66;
    --hl-param: #d19a66;
    --hl-class: #e5c07b;
    --hl-tag: #e06c75;
    --hl-deleted-color: #e06c75;
    --hl-deleted-bg: rgba(224, 108, 117, 0.15);
    --hl-inserted-color: #98c379;
    --hl-inserted-bg: rgba(152, 195, 121, 0.15);

    --sidebar-width: 150px;
    --toc-width: 240px;
    --header-height: 148px;
    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --ico-toc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h14'/%3E%3C/svg%3E");
    --ico-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --ico-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --ico-search-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    --ico-close-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
    --bg: #ffffff;
    --text: #0b0b0c;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg-elevated: rgba(0, 0, 0, 0.05);
    --bg-card: rgba(240, 240, 240, 0.85);
    --bg-card-hover: rgba(225, 225, 225, 0.95);
    --bg-code: #fafafa;
    --code-inline-bg: rgba(240, 240, 240, 0.8);
    --code-inline-text: #0b0b0c;
    --code-text: #24292e;
    --bg-menu: #ffffff;
    --bg-modal: rgba(240, 240, 240);
    --hover-bg: rgba(0, 0, 0, 0.05);
    --search-bg: rgba(0, 0, 0, 0.05);
    --search-panel-bg: rgba(255, 255, 255, 0.85);
    --code-group-bg: #f4f4f5;
    --code-group-panel-bg: #ffffff;
    --code-tab-active: #0b0b0c;
    --footer-border: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.05);
    --btn-primary-bg: #000000;
    --btn-primary-text: #ffffff;
    --btn-home-bg: #000000;
    --btn-home-text: #ffffff;
    --callout-note-bg: rgba(5, 5, 5, 0.06);
    --callout-info-bg: rgba(39, 39, 39, 0.06);
    --callout-warning-bg: #fefce8;
    --callout-warning-text: #854d0e;
    --body-radial-tint: rgba(255, 255, 255, 0.7);
    --skeleton-pulse-1: rgba(0, 0, 0, 0.05);
    --skeleton-pulse-2: rgba(0, 0, 0, 0.12);
    --spider-display: none;
    --cobweb-display: none;
    --spider-thread: rgba(0, 0, 0, 0.3);

    --hl-comment: #6a737d;
    --hl-punct: #24292e;
    --hl-func: #6f42c1;
    --hl-keyword: #d73a49;
    --hl-string: #22863a;
    --hl-var: #e36209;
    --hl-op: #d73a49;
    --hl-num: #005cc5;
    --hl-param: #b08800;
    --hl-class: #6f42c1;
    --hl-tag: #22863a;
    --hl-deleted-color: #b31d28;
    --hl-deleted-bg: #ffeef0;
    --hl-inserted-color: #22863a;
    --hl-inserted-bg: #f0fff4;
}

:root[data-theme="midnight"] {
    --bg: #070913;
    --text: #e2e8f0;
    --text: #f8fafc;
    --muted: #7f8ea3;
    --border: #1a2234;
    --bg-elevated: rgba(30, 41, 59, 0.5);
    --bg-card: rgba(15, 23, 42, 0.55);
    --bg-card-hover: rgba(30, 41, 59, 0.7);
    --bg-code: #0b1120;
    --code-inline-bg: #0f172a;
    --code-inline-text: #38bdf8;
    --code-text: #cbd5e1;
    --bg-menu: #0b1120;
    --bg-modal: rgba(11, 17, 32, 0.75);
    --hover-bg: rgba(56, 189, 248, 0.08);
    --search-bg: rgba(30, 41, 59, 0.4);
    --search-panel-bg: rgba(11, 17, 32, 0.85);
    --code-group-bg: #0b1329;
    --code-group-panel-bg: #070913;
    --code-tab-active: #38bdf8;
    --footer-border: #1e293b;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --btn-primary-bg: #38bdf8;
    --btn-primary-text: #020617;
    --btn-home-bg: #38bdf8;
    --btn-home-text: #020617;
    --callout-note-bg: rgba(56, 189, 248, 0.1);
    --callout-info-bg: rgba(99, 102, 241, 0.12);
    --callout-warning-bg: rgba(245, 158, 11, 0.15);
    --callout-warning-text: #fbbf24;
    --body-radial-tint: rgba(7, 9, 19, 0.85);
    --skeleton-pulse-1: rgba(56, 189, 248, 0.05);
    --skeleton-pulse-2: rgba(56, 189, 248, 0.15);
    --spider-display: none;
    --cobweb-display: none;
    --spider-thread: rgba(56, 189, 248, 0.3);

    --hl-comment: #64748b;
    --hl-punct: #94a3b8;
    --hl-func: #38bdf8;
    --hl-keyword: #818cf8;
    --hl-string: #34d399;
    --hl-var: #f472b6;
    --hl-op: #38bdf8;
    --hl-num: #fbbf24;
    --hl-param: #cbd5e1;
    --hl-class: #67e8f9;
    --hl-tag: #818cf8;
    --hl-deleted-color: #f87171;
    --hl-deleted-bg: rgba(248, 113, 113, 0.15);
    --hl-inserted-color: #34d399;
    --hl-inserted-bg: rgba(52, 211, 153, 0.15);
}

:root[data-theme="nord"] {
    --bg: #2e3440;
    --text: #eceff4;
    --text: #88c0d0;
    --muted: #d8dee9;
    --border: #3b4252;
    --bg-elevated: rgba(67, 76, 94, 0.5);
    --bg-card: rgba(59, 66, 82, 0.5);
    --bg-card-hover: rgba(67, 76, 94, 0.7);
    --bg-code: #242933;
    --code-inline-bg: #3b4252;
    --code-inline-text: #eceff4;
    --code-text: #d8dee9;
    --bg-menu: #2e3440;
    --bg-modal: rgba(46, 52, 64, 0.8);
    --hover-bg: rgba(136, 192, 208, 0.1);
    --search-bg: rgba(59, 66, 82, 0.5);
    --search-panel-bg: rgba(46, 52, 64, 0.9);
    --code-group-bg: #3b4252;
    --code-group-panel-bg: #2e3440;
    --code-tab-active: #88c0d0;
    --footer-border: #3b4252;
    --border-subtle: rgba(255, 255, 255, 0.05);
    --btn-primary-bg: #88c0d0;
    --btn-primary-text: #2e3440;
    --btn-home-bg: #88c0d0;
    --btn-home-text: #2e3440;
    --callout-note-bg: rgba(129, 161, 193, 0.15);
    --callout-info-bg: rgba(136, 192, 208, 0.15);
    --callout-warning-bg: rgba(235, 203, 139, 0.15);
    --callout-warning-text: #ebcb8b;
    --body-radial-tint: rgba(46, 52, 64, 0.8);
    --skeleton-pulse-1: rgba(216, 222, 233, 0.05);
    --skeleton-pulse-2: rgba(216, 222, 233, 0.12);
    --spider-display: none;
    --cobweb-display: none;
    --spider-thread: rgba(236, 239, 244, 0.3);

    --hl-comment: #616e88;
    --hl-punct: #d8dee9;
    --hl-func: #88c0d0;
    --hl-keyword: #81a1c1;
    --hl-string: #a3be8c;
    --hl-var: #d08770;
    --hl-op: #81a1c1;
    --hl-num: #b48ead;
    --hl-param: #d8dee9;
    --hl-class: #8fbcbb;
    --hl-tag: #81a1c1;
    --hl-deleted-color: #bf616a;
    --hl-deleted-bg: rgba(191, 97, 106, 0.15);
    --hl-inserted-color: #a3be8c;
    --hl-inserted-bg: rgba(163, 190, 140, 0.15);
}

:root[data-theme="dracula"] {
    --bg: #282a36;
    --text: #f8f8f2;
    --text: #bd93f9;
    --muted: #6272a4;
    --border: #44475a;
    --bg-elevated: rgba(68, 71, 90, 0.5);
    --bg-card: rgba(68, 71, 90, 0.4);
    --bg-card-hover: rgba(68, 71, 90, 0.7);
    --bg-code: #1e1f29;
    --code-inline-bg: #44475a;
    --code-inline-text: #ff79c6;
    --code-text: #f8f8f2;
    --bg-menu: #282a36;
    --bg-modal: rgba(40, 42, 54, 0.85);
    --hover-bg: rgba(189, 147, 249, 0.12);
    --search-bg: rgba(68, 71, 90, 0.5);
    --search-panel-bg: rgba(40, 42, 54, 0.9);
    --code-group-bg: #44475a;
    --code-group-panel-bg: #282a36;
    --code-tab-active: #ff79c6;
    --footer-border: #44475a;
    --border-subtle: rgba(255, 255, 255, 0.07);
    --btn-primary-bg: #bd93f9;
    --btn-primary-text: #282a36;
    --btn-home-bg: #bd93f9;
    --btn-home-text: #282a36;
    --callout-note-bg: rgba(189, 147, 249, 0.15);
    --callout-info-bg: rgba(139, 233, 253, 0.15);
    --callout-warning-bg: rgba(241, 250, 140, 0.15);
    --callout-warning-text: #f1fa8c;
    --body-radial-tint: rgba(40, 42, 54, 0.85);
    --skeleton-pulse-1: rgba(98, 114, 164, 0.08);
    --skeleton-pulse-2: rgba(98, 114, 164, 0.2);
    --spider-display: none;
    --cobweb-display: none;
    --spider-thread: rgba(189, 147, 249, 0.3);

    --hl-comment: #6272a4;
    --hl-punct: #f8f8f2;
    --hl-func: #50fa7b;
    --hl-keyword: #ff79c6;
    --hl-string: #f1fa8c;
    --hl-var: #ffb86c;
    --hl-op: #ff79c6;
    --hl-num: #bd93f9;
    --hl-param: #ffb86c;
    --hl-class: #8be9fd;
    --hl-tag: #ff79c6;
    --hl-deleted-color: #ff5555;
    --hl-deleted-bg: rgba(255, 85, 85, 0.15);
    --hl-inserted-color: #50fa7b;
    --hl-inserted-bg: rgba(80, 250, 123, 0.15);
}

:root[data-theme="forest"] {
    --bg: #0d1612;
    --text: #e2ede5;
    --text: #86efac;
    --muted: #739481;
    --border: #1a2f24;
    --bg-elevated: rgba(34, 76, 56, 0.35);
    --bg-card: rgba(20, 42, 31, 0.45);
    --bg-card-hover: rgba(28, 59, 44, 0.65);
    --bg-code: #080f0c;
    --code-inline-bg: #142a1f;
    --code-inline-text: #86efac;
    --code-text: #d1fae5;
    --bg-menu: #0d1612;
    --bg-modal: rgba(13, 22, 18, 0.85);
    --hover-bg: rgba(134, 239, 172, 0.08);
    --search-bg: rgba(26, 47, 36, 0.6);
    --search-panel-bg: rgba(13, 22, 18, 0.9);
    --code-group-bg: #15271e;
    --code-group-panel-bg: #0d1612;
    --code-tab-active: #86efac;
    --footer-border: #1a2f24;
    --border-subtle: rgba(255, 255, 255, 0.05);
    --btn-primary-bg: #4ade80;
    --btn-primary-text: #052e16;
    --btn-home-bg: #4ade80;
    --btn-home-text: #052e16;
    --callout-note-bg: rgba(74, 222, 128, 0.12);
    --callout-info-bg: rgba(45, 212, 191, 0.12);
    --callout-warning-bg: rgba(250, 204, 21, 0.15);
    --callout-warning-text: #fde047;
    --body-radial-tint: rgba(13, 22, 18, 0.85);
    --skeleton-pulse-1: rgba(134, 239, 172, 0.05);
    --skeleton-pulse-2: rgba(134, 239, 172, 0.12);
    --spider-display: none;
    --cobweb-display: none;
    --spider-thread: rgba(134, 239, 172, 0.3);

    --hl-comment: #527561;
    --hl-punct: #d1fae5;
    --hl-func: #4ade80;
    --hl-keyword: #2dd4bf;
    --hl-string: #a7f3d0;
    --hl-var: #fcd34d;
    --hl-op: #34d399;
    --hl-num: #fbbf24;
    --hl-param: #e2ede5;
    --hl-class: #6ee7b7;
    --hl-tag: #2dd4bf;
    --hl-deleted-color: #f87171;
    --hl-deleted-bg: rgba(248, 113, 113, 0.15);
    --hl-inserted-color: #4ade80;
    --hl-inserted-bg: rgba(74, 222, 128, 0.15);
}

:root[data-theme="sunset"] {
    --bg: #180d18;
    --text: #fce7f3;
    --text: #fb7185;
    --muted: #a77c98;
    --border: #3b1d36;
    --bg-elevated: rgba(80, 30, 70, 0.35);
    --bg-card: rgba(50, 20, 45, 0.5);
    --bg-card-hover: rgba(75, 30, 68, 0.65);
    --bg-code: #120712;
    --code-inline-bg: #3b1d36;
    --code-inline-text: #fda4af;
    --code-text: #fbcfe8;
    --bg-menu: #180d18;
    --bg-modal: rgba(24, 13, 24, 0.85);
    --hover-bg: rgba(251, 113, 133, 0.1);
    --search-bg: rgba(59, 29, 54, 0.5);
    --search-panel-bg: rgba(24, 13, 24, 0.9);
    --code-group-bg: #2d1329;
    --code-group-panel-bg: #180d18;
    --code-tab-active: #fb7185;
    --footer-border: #3b1d36;
    --border-subtle: rgba(255, 255, 255, 0.05);
    --btn-primary-bg: #f43f5e;
    --btn-primary-text: #ffffff;
    --btn-home-bg: #f43f5e;
    --btn-home-text: #ffffff;
    --callout-note-bg: rgba(251, 113, 133, 0.15);
    --callout-info-bg: rgba(192, 132, 252, 0.15);
    --callout-warning-bg: rgba(251, 146, 60, 0.15);
    --callout-warning-text: #fdba74;
    --body-radial-tint: rgba(24, 13, 24, 0.85);
    --skeleton-pulse-1: rgba(251, 113, 133, 0.05);
    --skeleton-pulse-2: rgba(251, 113, 133, 0.15);
    --spider-display: none;
    --cobweb-display: none;
    --spider-thread: rgba(251, 113, 133, 0.3);

    --hl-comment: #835b77;
    --hl-punct: #fbcfe8;
    --hl-func: #fb7185;
    --hl-keyword: #c084fc;
    --hl-string: #f472b6;
    --hl-var: #fb923c;
    --hl-op: #f43f5e;
    --hl-num: #facc15;
    --hl-param: #fce7f3;
    --hl-class: #e879f9;
    --hl-tag: #c084fc;
    --hl-deleted-color: #f87171;
    --hl-deleted-bg: rgba(248, 113, 113, 0.15);
    --hl-inserted-color: #4ade80;
    --hl-inserted-bg: rgba(74, 222, 128, 0.15);
}

:root[data-theme="cyberpunk"] {
    --bg: #050508;
    --text: #00ffcc;
    --text: #ffe600;
    --muted: #5e7a75;
    --border: #1a2a26;
    --bg-elevated: rgba(0, 255, 204, 0.08);
    --bg-card: rgba(10, 20, 20, 0.7);
    --bg-card-hover: rgba(20, 40, 35, 0.85);
    --bg-code: #020204;
    --code-inline-bg: rgba(0, 255, 204, 0.12);
    --code-inline-text: #ffe600;
    --code-text: #00ffcc;
    --bg-menu: #08080f;
    --bg-modal: rgba(5, 5, 8, 0.9);
    --hover-bg: rgba(0, 255, 204, 0.1);
    --search-bg: rgba(0, 255, 204, 0.08);
    --search-panel-bg: rgba(8, 8, 15, 0.95);
    --code-group-bg: #0e121a;
    --code-group-panel-bg: #050508;
    --code-tab-active: #ffe600;
    --footer-border: #1a2a26;
    --border-subtle: rgba(0, 255, 204, 0.15);
    --btn-primary-bg: #ffe600;
    --btn-primary-text: #000000;
    --btn-home-bg: #00ffcc;
    --btn-home-text: #000000;
    --callout-note-bg: rgba(0, 255, 204, 0.12);
    --callout-info-bg: rgba(255, 0, 128, 0.15);
    --callout-warning-bg: rgba(255, 230, 0, 0.15);
    --callout-warning-text: #ffe600;
    --body-radial-tint: rgba(5, 5, 8, 0.9);
    --skeleton-pulse-1: rgba(0, 255, 204, 0.05);
    --skeleton-pulse-2: rgba(255, 230, 0, 0.12);
    --spider-display: none;
    --cobweb-display: none;
    --spider-thread: rgba(0, 255, 204, 0.3);

    --hl-comment: #3f5e58;
    --hl-punct: #00ffcc;
    --hl-func: #ffe600;
    --hl-keyword: #ff007f;
    --hl-string: #00f0ff;
    --hl-var: #ff5500;
    --hl-op: #ff007f;
    --hl-num: #00ffcc;
    --hl-param: #ffffff;
    --hl-class: #ffe600;
    --hl-tag: #ff007f;
    --hl-deleted-color: #ff0055;
    --hl-deleted-bg: rgba(255, 0, 85, 0.2);
    --hl-inserted-color: #00ffcc;
    --hl-inserted-bg: rgba(0, 255, 204, 0.2);
}

body.banner-dismissed {
    --header-height: 109px;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    min-height: 100%;
    min-height: -webkit-fill-available;
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    ;
    line-height: 1.65;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at center, transparent 35%, var(--body-radial-tint) 100%);
}

.video-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

a {
    color: inherit;
    text-decoration: none;
}