/* ==UserStyle==
@name         ChatGPT Skin Studio
@namespace    local.chatgpt.skin
@version      40.0.14
@description  Optional editable CSS for Skin Studio. The complete userscript already includes it.
@homepageURL  https://terry1238832.github.io/chatgpt-skin-studio/
@updateURL    https://terry1238832.github.io/chatgpt-skin-studio/downloads/chatgpt-skin-studio.user.css
==/UserStyle== */
@-moz-document url-prefix("https://chatgpt.com/") {
/* ChatGPT Apple Glass v40.0.8 — included in the complete v24.0.8 userscript.
 * Optional companion CSS: apply to domain chatgpt.com.
 * Disable older Skin Studio Stylus styles when using the complete userscript.
 */

/* Variables */
:root {
  --cg-studio-version: 40.0.8;
  --cg-chat-width: 1080px;
  --cg-bg-0: #080a10;
  --cg-scene-bg: #080a10;
  --cg-accent: #b5c4dc;
  --cg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --cg-mono: "SFMono-Regular", "SF Mono", "Cascadia Code", Consolas, monospace;
  --cg-text: #e3e6ec;
  --cg-muted: #a1a8b5;
  --cg-faint: #7f8898;
  --cg-panel: rgba(28, 32, 40, .88);
  --cg-panel-strong: #1b1f27;
  --cg-border: rgba(215, 224, 242, .095);
  --cg-hover: rgba(220, 228, 244, .055);
  --cg-user-bubble: rgba(39, 44, 54, .83);
  --cg-code-bg: #141922;
  --cg-inline-bg: rgba(210, 222, 245, .07);
  --cg-sidebar-lower: #10141b;
  --cg-sidebar-glass: rgba(28, 33, 43, .95);
  --cg-glass-highlight: rgba(255,255,255,.055);
  --cg-reading-veil: rgba(8,10,16,.43);
  --cg-small-blur: 10px;
  --cg-radius: 24px;
  --cg-menu-radius: 16px;
  --cg-shadow: 0 8px 26px rgba(0,0,0,.16), inset 0 1px 0 var(--cg-glass-highlight);
}
html[data-cg-mode="light"] {
  --cg-text: #26323e;
  --cg-muted: #63717e;
  --cg-faint: #79858f;
  --cg-panel: rgba(251,250,247,.9);
  --cg-panel-strong: #f5f4f0;
  --cg-border: rgba(50,65,83,.13);
  --cg-hover: rgba(65,82,101,.065);
  --cg-user-bubble: rgba(242,240,234,.88);
  --cg-code-bg: #eaeef0;
  --cg-inline-bg: rgba(62,81,100,.07);
  --cg-sidebar-lower: #eceeea;
  --cg-sidebar-glass: rgba(250,250,247,.96);
  --cg-glass-highlight: rgba(255,255,255,.7);
  --cg-reading-veil: rgba(246,247,243,.36);
  --cg-shadow: 0 8px 25px rgba(35,48,60,.07), inset 0 1px 0 var(--cg-glass-highlight);
}

/* Background — curated canvas scenes or the scoped original wallpaper engine. */
html { background: var(--cg-scene-bg) !important; }
body { background: transparent !important; color: var(--cg-text); font-family: var(--cg-font) !important; }
:is(#main, main, #thread, .composer-parent, [data-testid="conversation"], [data-testid^="conversation-turn-"]) { background: transparent !important; }
html[data-cg-theme] {
  --main-surface-primary: transparent !important;
  --main-surface-secondary: var(--cg-panel-strong) !important;
  --main-surface-tertiary: var(--cg-hover) !important;
  --bg-primary: transparent !important;
  --bg-elevated-primary: var(--cg-panel-strong) !important;
  --bg-elevated-secondary: var(--cg-code-bg) !important;
  --text-primary: var(--cg-text) !important;
  --text-secondary: var(--cg-muted) !important;
  --text-tertiary: var(--cg-faint) !important;
  --border-light: var(--cg-border) !important;
  --border-medium: var(--cg-border) !important;
  --message-surface: var(--cg-user-bubble) !important;
}
::selection { background: color-mix(in srgb, var(--cg-accent) 28%, transparent); }

/* Sidebar — retain the existing single top material, down to More. */
#stage-slideover-sidebar {
  background: var(--cg-sidebar-lower) !important;
  border-inline-end: 1px solid var(--cg-border) !important;
  box-shadow: none !important;
  --sidebar-surface-primary: transparent !important;
  --sidebar-surface-secondary: var(--cg-hover) !important;
}
#cg-sidebar-glass-panel {
  position: absolute; inset: 0 0 auto; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--cg-glass-highlight), transparent 55%), var(--cg-sidebar-glass);
  border-bottom: 1px solid var(--cg-border);
  box-shadow: inset 0 1px 0 var(--cg-glass-highlight);
}
#stage-slideover-sidebar > .relative.flex.h-full.flex-col { position: relative; z-index: 1; }
#stage-slideover-sidebar :is(.bg-token-sidebar-surface-primary, [class*="bg-(--sidebar-surface-primary)"]) { background: transparent !important; }
#stage-slideover-sidebar nav > .relative.h-0,
#stage-slideover-sidebar nav > .relative.h-0 [data-edge="true"] { background: transparent !important; box-shadow: none !important; }
#stage-slideover-sidebar nav > [class*="sidebar-section-first-margin-top"] > [aria-hidden="true"].pointer-events-none.absolute { background: transparent !important; box-shadow: none !important; }
#stage-slideover-sidebar [data-sidebar-item="true"] { --menu-item-highlighted: var(--cg-hover) !important; }
#sidebar-header :is(a,button) { background-color: transparent !important; box-shadow: none !important; }
#sidebar-header :is(a,button):hover { background-color: var(--cg-hover) !important; }

/* Header — keep the original transparent header and single action island. */
#page-header { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
#page-header .translucent-surface:empty { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#conversation-header-actions {
  background: var(--cg-panel) !important; border: 1px solid var(--cg-border) !important;
  border-radius: 13px !important; box-shadow: var(--cg-shadow) !important;
  -webkit-backdrop-filter: blur(var(--cg-small-blur)) saturate(125%);
  backdrop-filter: blur(var(--cg-small-blur)) saturate(125%);
}
#conversation-header-actions button { background-color: transparent !important; box-shadow: none !important; }

/* Composer — preserve mount area, controls and native positioning. */
:is(#thread-bottom-container, #thread-bottom) { background: transparent !important; box-shadow: none !important; }
#thread-bottom-container::before, #thread-bottom-container::after,
#thread-bottom::before, #thread-bottom::after { content: none !important; }
:is(#thread-bottom-container, #thread-bottom) [class*="bg-token-"]:has(#prompt-textarea):not(#composer-background):not(form) { background: transparent !important; box-shadow: none !important; }
form:has(#composer-background) { background: transparent !important; }
:is(#composer-background, #thread-bottom form:has(:is(textarea,[contenteditable="true"])):not(:has(#composer-background))) {
  background: linear-gradient(var(--cg-glass-highlight), transparent 60%), var(--cg-panel) !important;
  border: 1px solid var(--cg-border) !important; border-radius: var(--cg-radius) !important;
  box-shadow: var(--cg-shadow) !important;
  -webkit-backdrop-filter: blur(var(--cg-small-blur)) saturate(125%);
  backdrop-filter: blur(var(--cg-small-blur)) saturate(125%);
}
:is(#composer-background, #thread-bottom form):focus-within { border-color: color-mix(in srgb, var(--cg-accent) 45%, transparent) !important; }
#thread-bottom :is(textarea,[contenteditable="true"]), #prompt-textarea { background: transparent !important; color: var(--cg-text) !important; caret-color: var(--cg-accent); }

/* Messages */
:is(#thread, #thread-bottom-container, main [class*="--thread-content-max-width"]) { --thread-content-max-width: var(--cg-chat-width) !important; }
[data-message-author-role] { font-size: 16px; line-height: 1.75; color: var(--cg-text); }
[data-message-author-role="assistant"] { background: transparent !important; border: 0 !important; box-shadow: none !important; }
[data-message-author-role="assistant"] :is(.markdown,.prose) { color: var(--cg-text); max-width: none; }
:is([data-user-message-bubble="true"], [data-message-author-role="user"] .user-message-bubble, [data-message-author-role="user"] .bg-token-message-surface) {
  background: var(--cg-user-bubble) !important; border: 1px solid var(--cg-border) !important;
  border-radius: 21px !important; box-shadow: inset 0 1px 0 var(--cg-glass-highlight);
}

/* Code — keep the site's copy/run controls and existing card boundary. */
.markdown pre { background: transparent !important; box-shadow: none !important; }
.markdown pre > .rounded-md, .markdown :is(.bg-token-bg-elevated-secondary, [data-testid="code-block"]) { background: var(--cg-code-bg) !important; border-color: var(--cg-border) !important; }
.markdown pre code { background: transparent !important; border: 0 !important; font-family: var(--cg-mono) !important; font-size: 14px !important; line-height: 1.65 !important; }
.markdown code:not(pre code) { background: var(--cg-inline-bg) !important; border: 1px solid var(--cg-border); border-radius: 6px; padding: .12em .35em; font-family: var(--cg-mono); font-size: .88em; overflow-wrap: anywhere; }
.markdown code:not(pre code)::before, .markdown code:not(pre code)::after { content: none !important; }

/* Markdown */
.markdown :is(h1,h2,h3,h4) { color: var(--cg-text); letter-spacing: -.02em; line-height: 1.4; }
.markdown a { color: var(--cg-accent); text-underline-offset: .2em; }
.markdown blockquote { background: var(--cg-hover); border-color: var(--cg-accent); border-radius: 0 12px 12px 0; }
.markdown img { border-radius: 16px; box-shadow: 0 4px 18px #00000012; }
.markdown :is(th,td,hr) { border-color: var(--cg-border) !important; }
.markdown th { background: var(--cg-hover); }

/* Popup — the gallery owns its own modal style. */
:is([role="dialog"],[role="alertdialog"],[role="menu"],[role="listbox"]):not(#cg-skin-menu):not(#cg-skin-menu *) {
  background: var(--cg-panel-strong) !important; color: var(--cg-text);
  border: 1px solid var(--cg-border) !important; border-radius: var(--cg-menu-radius) !important;
  box-shadow: var(--cg-shadow); --main-surface-primary: var(--cg-panel-strong) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--cg-muted) 32%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--cg-muted) 50%, transparent); }

/* Animation / accessibility / small screens */
@media (max-width: 900px) { :root { --cg-chat-width: 100%; } }
html[data-cg-quality="eco"], html[data-cg-quality="still"] { --cg-small-blur: 0px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-transparency: reduce) {
  :root { --cg-small-blur: 0px; --cg-panel: #1b1f27; --cg-user-bubble: #272c36; }
  html[data-cg-mode="light"] { --cg-panel: #f5f4f0; --cg-user-bubble: #eeeee8; }
}

/* Original v27 palettes, wallpaper layers and keyframes.
 * Scoped to the original library; original timing and artwork are preserved. */
:root[data-cg-library="legacy"] {
    --cg-bg-0: #080a0d;
    --cg-bg-1: #0a0c11;
    --cg-panel: rgba(31, 34, 41, 0.82);
    --cg-panel-strong: rgba(24, 27, 33, 0.92);
    --cg-border: rgba(255, 255, 255, 0.075);
    --cg-hover: rgba(255, 255, 255, 0.055);
    --cg-chat-width: 1080px;
}

@media (max-width: 1200px) {
:root[data-cg-library="legacy"] {
        --cg-chat-width: 880px;
    }
}

@media (max-width: 900px) {
:root[data-cg-library="legacy"] {
        --cg-chat-width: 100%;
    }
}

:root[data-cg-library="legacy"] {
    --cg-page-a: #0a0c11;
    --cg-page-b: #080a0d;

    --cg-glow-a: rgba(66,111,195,.10);
    --cg-glow-b: rgba(137,76,178,.075);
    --cg-glow-c: rgba(42,129,112,.04);

    --cg-sidebar-glass: rgba(24,27,33,.965);
    --cg-sidebar-lower: #080a0d;

    --cg-header-chip: rgba(28,31,38,.92);

    --cg-composer-a: rgba(52,55,62,.92);
    --cg-composer-b: rgba(34,37,43,.90);

    --cg-user-bubble: rgba(43,45,51,.72);

    --cg-text-primary: #f4f4f5;
    --cg-text-secondary: #c7c9cf;
    --cg-text-tertiary: #9397a1;

    --cg-border: rgba(255,255,255,.085);
    --cg-hover: rgba(255,255,255,.060);
    --cg-glass-highlight: rgba(255,255,255,.055);

    --cg-code-bg: rgba(25,27,32,.94);

    --cg-switcher-bg: rgba(24,27,33,.94);
    --cg-switcher-text: #f4f4f5;

    /* Decorative background layers; transparent by default. */
    --cg-pattern-a: linear-gradient(transparent, transparent);
    --cg-pattern-b: linear-gradient(transparent, transparent);
    --cg-pattern-c: linear-gradient(transparent, transparent);
    --cg-pattern-size-a: auto;
    --cg-pattern-size-b: auto;
    --cg-pattern-size-c: auto;
    --cg-pattern-position-a: 0 0;
    --cg-pattern-position-b: 0 0;
    --cg-pattern-position-c: 0 0;
}

html[data-cg-library="legacy"][data-cg-theme="graphite"] {
    color-scheme: dark !important;
}

html[data-cg-library="legacy"][data-cg-theme="midnight"] {
    color-scheme: dark !important;

    --cg-page-a: #07111f;
    --cg-page-b: #050a12;

    --cg-glow-a: rgba(54,111,214,.16);
    --cg-glow-b: rgba(77,74,188,.10);
    --cg-glow-c: rgba(32,122,150,.055);

    --cg-sidebar-glass: rgba(15,25,39,.965);
    --cg-sidebar-lower: #060c14;

    --cg-header-chip: rgba(18,31,48,.93);
    --cg-composer-a: rgba(33,48,68,.94);
    --cg-composer-b: rgba(20,31,47,.92);
    --cg-user-bubble: rgba(29,61,103,.76);

    --cg-border: rgba(157,190,255,.10);
    --cg-hover: rgba(145,184,255,.080);
}

html[data-cg-library="legacy"][data-cg-theme="aurora"] {
    color-scheme: dark !important;

    --cg-page-a: #0b1014;
    --cg-page-b: #07100f;

    --cg-glow-a: rgba(49,126,120,.12);
    --cg-glow-b: rgba(134,83,155,.11);
    --cg-glow-c: rgba(42,142,110,.08);

    --cg-sidebar-glass: rgba(20,31,31,.965);
    --cg-sidebar-lower: #07100f;

    --cg-header-chip: rgba(24,37,37,.93);
    --cg-composer-a: rgba(39,54,52,.93);
    --cg-composer-b: rgba(24,37,36,.92);
    --cg-user-bubble: rgba(37,75,67,.74);

    --cg-border: rgba(161,220,208,.095);
    --cg-hover: rgba(154,218,207,.070);
}

html[data-cg-library="legacy"][data-cg-theme="oled"] {
    color-scheme: dark !important;

    --cg-page-a: #000000;
    --cg-page-b: #000000;

    --cg-glow-a: rgba(65,87,130,.035);
    --cg-glow-b: rgba(104,66,120,.030);
    --cg-glow-c: rgba(55,110,95,.022);

    --cg-sidebar-glass: rgba(10,10,11,.985);
    --cg-sidebar-lower: #000000;

    --cg-header-chip: rgba(18,18,20,.96);
    --cg-composer-a: rgba(33,33,36,.96);
    --cg-composer-b: rgba(20,20,22,.96);
    --cg-user-bubble: rgba(31,31,34,.90);
}

html[data-cg-library="legacy"][data-cg-theme="frost"] {
    color-scheme: light !important;

    --cg-page-a: #f1f5f9;
    --cg-page-b: #e5ebf2;

    --cg-glow-a: rgba(92,143,210,.16);
    --cg-glow-b: rgba(150,124,200,.11);
    --cg-glow-c: rgba(95,177,160,.08);

    --cg-sidebar-glass: rgba(239,244,249,.975);
    --cg-sidebar-lower: #e7edf3;

    --cg-header-chip: rgba(250,252,254,.95);
    --cg-composer-a: rgba(252,253,254,.97);
    --cg-composer-b: rgba(236,241,246,.96);
    --cg-user-bubble: rgba(216,227,240,.94);

    --cg-text-primary: #18212b;
    --cg-text-secondary: #4f5d6d;
    --cg-text-tertiary: #778596;

    --cg-border: rgba(35,49,65,.12);
    --cg-hover: rgba(50,78,108,.075);
    --cg-glass-highlight: rgba(255,255,255,.75);

    --cg-code-bg: rgba(232,237,243,.97);

    --cg-switcher-bg: rgba(250,252,254,.97);
    --cg-switcher-text: #18212b;
}

html[data-cg-library="legacy"][data-cg-theme="ivory"] {
    color-scheme: light !important;

    --cg-page-a: #f7f2ea;
    --cg-page-b: #eee7dd;

    --cg-glow-a: rgba(187,143,93,.13);
    --cg-glow-b: rgba(170,128,155,.09);
    --cg-glow-c: rgba(141,159,112,.07);

    --cg-sidebar-glass: rgba(247,242,234,.975);
    --cg-sidebar-lower: #eee7dd;

    --cg-header-chip: rgba(253,249,243,.96);
    --cg-composer-a: rgba(254,251,247,.97);
    --cg-composer-b: rgba(241,234,225,.96);
    --cg-user-bubble: rgba(230,219,204,.94);

    --cg-text-primary: #28231d;
    --cg-text-secondary: #665d53;
    --cg-text-tertiary: #8d8276;

    --cg-border: rgba(66,54,41,.12);
    --cg-hover: rgba(91,72,52,.070);
    --cg-glass-highlight: rgba(255,255,255,.70);

    --cg-code-bg: rgba(236,230,222,.97);

    --cg-switcher-bg: rgba(253,249,243,.97);
    --cg-switcher-text: #28231d;
}

html[data-cg-library="legacy"][data-cg-theme="prism"] {
    color-scheme: dark !important;

    --cg-page-a: #090817;
    --cg-page-b: #050611;

    --cg-glow-a: rgba(0, 224, 255, .22);
    --cg-glow-b: rgba(164, 88, 255, .22);
    --cg-glow-c: rgba(255, 65, 166, .16);

    --cg-sidebar-glass: rgba(20, 18, 40, .965);
    --cg-sidebar-lower: #080714;

    --cg-header-chip: rgba(30, 24, 54, .93);
    --cg-composer-a: rgba(45, 35, 73, .94);
    --cg-composer-b: rgba(25, 20, 46, .92);

    --cg-user-bubble: rgba(63, 39, 103, .80);

    --cg-border: rgba(178, 153, 255, .18);
    --cg-hover: rgba(167, 126, 255, .11);
    --cg-glass-highlight: rgba(117, 229, 255, .10);
}

html[data-cg-library="legacy"][data-cg-theme="sunset"] {
    color-scheme: dark !important;

    --cg-page-a: #190b13;
    --cg-page-b: #0b0810;

    --cg-glow-a: rgba(255, 111, 74, .22);
    --cg-glow-b: rgba(255, 72, 123, .18);
    --cg-glow-c: rgba(129, 86, 255, .16);

    --cg-sidebar-glass: rgba(42, 20, 28, .965);
    --cg-sidebar-lower: #10080d;

    --cg-header-chip: rgba(54, 27, 34, .93);
    --cg-composer-a: rgba(74, 36, 45, .94);
    --cg-composer-b: rgba(43, 23, 31, .92);

    --cg-user-bubble: rgba(112, 50, 52, .80);

    --cg-border: rgba(255, 171, 146, .17);
    --cg-hover: rgba(255, 145, 117, .10);
    --cg-glass-highlight: rgba(255, 192, 145, .10);
}

html[data-cg-library="legacy"][data-cg-theme="ocean"] {
    color-scheme: dark !important;

    --cg-page-a: #04131f;
    --cg-page-b: #03101a;

    --cg-glow-a: rgba(0, 179, 255, .22);
    --cg-glow-b: rgba(0, 105, 255, .16);
    --cg-glow-c: rgba(0, 229, 190, .12);

    --cg-sidebar-glass: rgba(8, 31, 45, .968);
    --cg-sidebar-lower: #031019;

    --cg-header-chip: rgba(10, 42, 59, .94);
    --cg-composer-a: rgba(18, 58, 77, .94);
    --cg-composer-b: rgba(9, 36, 51, .92);

    --cg-user-bubble: rgba(17, 83, 111, .82);

    --cg-border: rgba(111, 214, 255, .17);
    --cg-hover: rgba(86, 196, 242, .11);
    --cg-glass-highlight: rgba(116, 224, 255, .11);
}

html[data-cg-library="legacy"][data-cg-theme="emerald"] {
    color-scheme: dark !important;

    --cg-page-a: #061410;
    --cg-page-b: #040b09;

    --cg-glow-a: rgba(0, 208, 144, .18);
    --cg-glow-b: rgba(51, 179, 123, .13);
    --cg-glow-c: rgba(131, 255, 197, .12);

    --cg-sidebar-glass: rgba(12, 36, 29, .968);
    --cg-sidebar-lower: #040d0a;

    --cg-header-chip: rgba(16, 47, 38, .94);
    --cg-composer-a: rgba(22, 63, 49, .94);
    --cg-composer-b: rgba(13, 40, 32, .92);

    --cg-user-bubble: rgba(23, 82, 62, .80);

    --cg-border: rgba(132, 238, 196, .16);
    --cg-hover: rgba(95, 225, 175, .10);
    --cg-glass-highlight: rgba(158, 255, 216, .10);
}

html[data-cg-library="legacy"][data-cg-theme="violet"] {
    color-scheme: dark !important;

    --cg-page-a: #12091d;
    --cg-page-b: #09060f;

    --cg-glow-a: rgba(152, 88, 255, .22);
    --cg-glow-b: rgba(222, 81, 255, .18);
    --cg-glow-c: rgba(89, 92, 255, .13);

    --cg-sidebar-glass: rgba(34, 20, 47, .968);
    --cg-sidebar-lower: #0c0712;

    --cg-header-chip: rgba(47, 28, 63, .94);
    --cg-composer-a: rgba(63, 39, 82, .94);
    --cg-composer-b: rgba(37, 24, 50, .92);

    --cg-user-bubble: rgba(84, 49, 115, .81);

    --cg-border: rgba(211, 159, 255, .17);
    --cg-hover: rgba(194, 139, 255, .10);
    --cg-glass-highlight: rgba(228, 192, 255, .10);
}

html[data-cg-library="legacy"][data-cg-theme="cherry"] {
    color-scheme: dark !important;

    --cg-page-a: #180912;
    --cg-page-b: #0a0609;

    --cg-glow-a: rgba(255, 66, 114, .22);
    --cg-glow-b: rgba(212, 43, 112, .17);
    --cg-glow-c: rgba(255, 134, 171, .11);

    --cg-sidebar-glass: rgba(43, 17, 28, .968);
    --cg-sidebar-lower: #0e070b;

    --cg-header-chip: rgba(56, 22, 35, .94);
    --cg-composer-a: rgba(75, 30, 47, .94);
    --cg-composer-b: rgba(44, 20, 31, .92);

    --cg-user-bubble: rgba(106, 38, 60, .82);

    --cg-border: rgba(255, 157, 185, .17);
    --cg-hover: rgba(255, 125, 165, .10);
    --cg-glass-highlight: rgba(255, 189, 208, .10);
}

html[data-cg-library="legacy"][data-cg-theme="sakura"] {
    color-scheme: light !important;

    --cg-page-a: #fff2f7;
    --cg-page-b: #f8e3ed;

    --cg-glow-a: rgba(255, 126, 175, .20);
    --cg-glow-b: rgba(199, 129, 255, .12);
    --cg-glow-c: rgba(255, 182, 205, .15);

    --cg-sidebar-glass: rgba(255, 241, 247, .978);
    --cg-sidebar-lower: #f8e6ee;

    --cg-header-chip: rgba(255, 248, 251, .97);
    --cg-composer-a: rgba(255, 251, 253, .98);
    --cg-composer-b: rgba(247, 231, 239, .97);

    --cg-user-bubble: rgba(245, 205, 221, .94);

    --cg-text-primary: #3b2530;
    --cg-text-secondary: #735463;
    --cg-text-tertiary: #9b7588;

    --cg-border: rgba(103, 59, 80, .12);
    --cg-hover: rgba(168, 74, 119, .075);
    --cg-glass-highlight: rgba(255, 255, 255, .82);

    --cg-code-bg: rgba(248, 230, 238, .97);

    --cg-switcher-bg: rgba(255, 249, 252, .98);
    --cg-switcher-text: #3b2530;
}

html[data-cg-library="legacy"][data-cg-theme="rosegold"] {
    color-scheme: light !important;

    --cg-page-a: #fbf0ec;
    --cg-page-b: #efe1dc;

    --cg-glow-a: rgba(213, 145, 127, .18);
    --cg-glow-b: rgba(196, 145, 170, .12);
    --cg-glow-c: rgba(230, 184, 151, .10);

    --cg-sidebar-glass: rgba(248, 239, 235, .978);
    --cg-sidebar-lower: #efe3de;

    --cg-header-chip: rgba(253, 247, 244, .97);
    --cg-composer-a: rgba(255, 250, 247, .98);
    --cg-composer-b: rgba(242, 231, 225, .97);

    --cg-user-bubble: rgba(232, 207, 198, .94);

    --cg-text-primary: #352824;
    --cg-text-secondary: #6d574f;
    --cg-text-tertiary: #927b72;

    --cg-border: rgba(83, 60, 52, .12);
    --cg-hover: rgba(139, 95, 80, .07);
    --cg-glass-highlight: rgba(255, 255, 255, .80);

    --cg-code-bg: rgba(239, 227, 222, .97);

    --cg-switcher-bg: rgba(253, 248, 245, .98);
    --cg-switcher-text: #352824;
}

html[data-cg-library="legacy"][data-cg-theme="citrus"] {
    color-scheme: light !important;

    --cg-page-a: #fff7e8;
    --cg-page-b: #f6ead0;

    --cg-glow-a: rgba(255, 163, 61, .22);
    --cg-glow-b: rgba(255, 205, 74, .16);
    --cg-glow-c: rgba(255, 117, 68, .10);

    --cg-sidebar-glass: rgba(255, 247, 229, .978);
    --cg-sidebar-lower: #f3e7cc;

    --cg-header-chip: rgba(255, 251, 242, .97);
    --cg-composer-a: rgba(255, 252, 246, .98);
    --cg-composer-b: rgba(246, 235, 211, .97);

    --cg-user-bubble: rgba(242, 219, 170, .94);

    --cg-text-primary: #392d19;
    --cg-text-secondary: #6c5a36;
    --cg-text-tertiary: #927f56;

    --cg-border: rgba(85, 65, 26, .12);
    --cg-hover: rgba(164, 115, 28, .07);
    --cg-glass-highlight: rgba(255, 255, 255, .82);

    --cg-code-bg: rgba(242, 230, 204, .97);

    --cg-switcher-bg: rgba(255, 251, 242, .98);
    --cg-switcher-text: #392d19;
}

html[data-cg-library="legacy"][data-cg-theme="starfield"] {
    color-scheme: dark !important;

    --cg-page-a: #050814;
    --cg-page-b: #02040b;

    --cg-glow-a: rgba(68, 117, 255, .17);
    --cg-glow-b: rgba(156, 96, 255, .16);
    --cg-glow-c: rgba(69, 210, 255, .08);

    --cg-sidebar-glass: rgba(11, 15, 31, .97);
    --cg-sidebar-lower: #040713;

    --cg-header-chip: rgba(15, 20, 40, .94);
    --cg-composer-a: rgba(25, 31, 55, .94);
    --cg-composer-b: rgba(13, 18, 38, .93);

    --cg-user-bubble: rgba(33, 48, 92, .82);

    --cg-border: rgba(155, 183, 255, .16);
    --cg-hover: rgba(150, 180, 255, .10);

    --cg-pattern-a:
        radial-gradient(circle, rgba(255,255,255,.78) 0 1px, transparent 1.35px);
    --cg-pattern-b:
        radial-gradient(circle, rgba(123,176,255,.58) 0 1px, transparent 1.25px);
    --cg-pattern-c:
        radial-gradient(circle, rgba(208,158,255,.42) 0 1px, transparent 1.2px);

    --cg-pattern-size-a: 83px 83px;
    --cg-pattern-size-b: 137px 137px;
    --cg-pattern-size-c: 211px 211px;

    --cg-pattern-position-a: 7px 11px;
    --cg-pattern-position-b: 31px 57px;
    --cg-pattern-position-c: 93px 17px;
}

html[data-cg-library="legacy"][data-cg-theme="neongrid"] {
    color-scheme: dark !important;

    --cg-page-a: #071016;
    --cg-page-b: #03070b;

    --cg-glow-a: rgba(0, 231, 255, .18);
    --cg-glow-b: rgba(176, 71, 255, .16);
    --cg-glow-c: rgba(0, 255, 196, .10);

    --cg-sidebar-glass: rgba(9, 25, 30, .97);
    --cg-sidebar-lower: #03090b;

    --cg-header-chip: rgba(11, 34, 40, .94);
    --cg-composer-a: rgba(19, 48, 54, .94);
    --cg-composer-b: rgba(10, 31, 36, .93);

    --cg-user-bubble: rgba(17, 72, 80, .82);

    --cg-border: rgba(111, 235, 255, .17);
    --cg-hover: rgba(78, 226, 245, .10);

    --cg-pattern-a:
        linear-gradient(rgba(87,224,255,.065) 1px, transparent 1px);
    --cg-pattern-b:
        linear-gradient(90deg, rgba(87,224,255,.065) 1px, transparent 1px);
    --cg-pattern-c:
        linear-gradient(135deg, transparent 49.4%, rgba(183,98,255,.035) 49.7% 50.3%, transparent 50.6%);

    --cg-pattern-size-a: 42px 42px;
    --cg-pattern-size-b: 42px 42px;
    --cg-pattern-size-c: 84px 84px;
}

html[data-cg-library="legacy"][data-cg-theme="sakuranight"] {
    color-scheme: dark !important;

    --cg-page-a: #170b18;
    --cg-page-b: #09060d;

    --cg-glow-a: rgba(255, 111, 170, .18);
    --cg-glow-b: rgba(183, 103, 255, .14);
    --cg-glow-c: rgba(255, 175, 203, .09);

    --cg-sidebar-glass: rgba(42, 20, 40, .97);
    --cg-sidebar-lower: #100911;

    --cg-header-chip: rgba(54, 25, 51, .94);
    --cg-composer-a: rgba(73, 34, 65, .94);
    --cg-composer-b: rgba(42, 22, 40, .93);

    --cg-user-bubble: rgba(102, 42, 77, .82);

    --cg-border: rgba(255, 164, 207, .16);
    --cg-hover: rgba(255, 137, 196, .10);

    --cg-pattern-a:
        radial-gradient(ellipse at 30% 35%, rgba(255,183,210,.16) 0 8%, transparent 9%);
    --cg-pattern-b:
        radial-gradient(ellipse at 72% 62%, rgba(255,133,187,.10) 0 7%, transparent 8%);
    --cg-pattern-c:
        radial-gradient(ellipse at 50% 50%, rgba(222,159,255,.08) 0 6%, transparent 7%);

    --cg-pattern-size-a: 160px 120px;
    --cg-pattern-size-b: 230px 170px;
    --cg-pattern-size-c: 310px 230px;

    --cg-pattern-position-a: 12px 8px;
    --cg-pattern-position-b: 61px 29px;
    --cg-pattern-position-c: 113px 71px;
}

html[data-cg-library="legacy"][data-cg-theme="deco"] {
    color-scheme: dark !important;

    --cg-page-a: #13110d;
    --cg-page-b: #070706;

    --cg-glow-a: rgba(216, 174, 82, .13);
    --cg-glow-b: rgba(177, 127, 68, .08);
    --cg-glow-c: rgba(235, 205, 119, .06);

    --cg-sidebar-glass: rgba(32, 29, 23, .97);
    --cg-sidebar-lower: #0c0b09;

    --cg-header-chip: rgba(42, 38, 30, .94);
    --cg-composer-a: rgba(56, 50, 39, .94);
    --cg-composer-b: rgba(34, 30, 24, .93);

    --cg-user-bubble: rgba(78, 65, 43, .82);

    --cg-border: rgba(228, 194, 115, .16);
    --cg-hover: rgba(226, 190, 104, .09);

    --cg-pattern-a:
        linear-gradient(30deg, transparent 46%, rgba(231,195,113,.055) 47% 48%, transparent 49%);
    --cg-pattern-b:
        linear-gradient(-30deg, transparent 46%, rgba(231,195,113,.055) 47% 48%, transparent 49%);
    --cg-pattern-c:
        radial-gradient(circle at center, transparent 0 18px, rgba(231,195,113,.045) 19px 20px, transparent 21px);

    --cg-pattern-size-a: 80px 46px;
    --cg-pattern-size-b: 80px 46px;
    --cg-pattern-size-c: 80px 80px;
}

html[data-cg-library="legacy"][data-cg-theme="blueprint"] {
    color-scheme: light !important;

    --cg-page-a: #eef6fb;
    --cg-page-b: #dfeaf2;

    --cg-glow-a: rgba(64, 140, 205, .15);
    --cg-glow-b: rgba(116, 152, 213, .09);
    --cg-glow-c: rgba(67, 183, 190, .08);

    --cg-sidebar-glass: rgba(235, 245, 250, .98);
    --cg-sidebar-lower: #e2edf4;

    --cg-header-chip: rgba(248, 252, 254, .97);
    --cg-composer-a: rgba(251, 253, 254, .98);
    --cg-composer-b: rgba(231, 240, 246, .97);

    --cg-user-bubble: rgba(204, 225, 239, .94);

    --cg-text-primary: #183044;
    --cg-text-secondary: #4d677a;
    --cg-text-tertiary: #7790a2;

    --cg-border: rgba(37, 82, 112, .12);
    --cg-hover: rgba(50, 108, 145, .07);
    --cg-glass-highlight: rgba(255,255,255,.86);

    --cg-code-bg: rgba(226, 237, 244, .98);

    --cg-switcher-bg: rgba(248, 252, 254, .98);
    --cg-switcher-text: #183044;

    --cg-pattern-a:
        linear-gradient(rgba(56,118,158,.075) 1px, transparent 1px);
    --cg-pattern-b:
        linear-gradient(90deg, rgba(56,118,158,.075) 1px, transparent 1px);
    --cg-pattern-c:
        radial-gradient(circle, rgba(56,118,158,.12) 0 1px, transparent 1.3px);

    --cg-pattern-size-a: 32px 32px;
    --cg-pattern-size-b: 32px 32px;
    --cg-pattern-size-c: 128px 128px;
}

html[data-cg-library="legacy"][data-cg-theme="washi"] {
    color-scheme: light !important;

    --cg-page-a: #f6f0e4;
    --cg-page-b: #eee5d5;

    --cg-glow-a: rgba(179, 151, 103, .12);
    --cg-glow-b: rgba(158, 132, 116, .07);
    --cg-glow-c: rgba(152, 163, 121, .07);

    --cg-sidebar-glass: rgba(246, 240, 228, .98);
    --cg-sidebar-lower: #eee6d7;

    --cg-header-chip: rgba(252, 248, 239, .97);
    --cg-composer-a: rgba(254, 251, 244, .98);
    --cg-composer-b: rgba(240, 233, 220, .97);

    --cg-user-bubble: rgba(230, 215, 190, .94);

    --cg-text-primary: #322d25;
    --cg-text-secondary: #6d6254;
    --cg-text-tertiary: #918573;

    --cg-border: rgba(76, 65, 49, .11);
    --cg-hover: rgba(116, 93, 58, .065);
    --cg-glass-highlight: rgba(255,255,255,.78);

    --cg-code-bg: rgba(238, 230, 215, .98);

    --cg-switcher-bg: rgba(252, 248, 239, .98);
    --cg-switcher-text: #322d25;

    --cg-pattern-a:
        repeating-linear-gradient(7deg, rgba(90,75,52,.028) 0 1px, transparent 1px 7px);
    --cg-pattern-b:
        repeating-linear-gradient(97deg, rgba(90,75,52,.018) 0 1px, transparent 1px 11px);
    --cg-pattern-c:
        radial-gradient(circle, rgba(120,100,70,.040) 0 1px, transparent 1.2px);

    --cg-pattern-size-a: 100% 100%;
    --cg-pattern-size-b: 100% 100%;
    --cg-pattern-size-c: 18px 18px;
}

html[data-cg-library="legacy"][data-cg-theme="candy"] {
    color-scheme: light !important;

    --cg-page-a: #fff4fb;
    --cg-page-b: #eef4ff;

    --cg-glow-a: rgba(255, 118, 188, .17);
    --cg-glow-b: rgba(117, 149, 255, .14);
    --cg-glow-c: rgba(99, 214, 203, .10);

    --cg-sidebar-glass: rgba(251, 244, 252, .98);
    --cg-sidebar-lower: #eef2fa;

    --cg-header-chip: rgba(255, 250, 254, .97);
    --cg-composer-a: rgba(255, 251, 254, .98);
    --cg-composer-b: rgba(238, 241, 250, .97);

    --cg-user-bubble: rgba(235, 213, 238, .94);

    --cg-text-primary: #30263a;
    --cg-text-secondary: #675873;
    --cg-text-tertiary: #8b7d98;

    --cg-border: rgba(71, 57, 91, .11);
    --cg-hover: rgba(122, 91, 153, .07);
    --cg-glass-highlight: rgba(255,255,255,.84);

    --cg-code-bg: rgba(239, 233, 246, .98);

    --cg-switcher-bg: rgba(255, 250, 254, .98);
    --cg-switcher-text: #30263a;

    --cg-pattern-a:
        radial-gradient(circle at 30% 30%, rgba(255,137,196,.12) 0 14px, transparent 15px);
    --cg-pattern-b:
        radial-gradient(circle at 70% 60%, rgba(112,149,255,.10) 0 18px, transparent 19px);
    --cg-pattern-c:
        radial-gradient(circle at 48% 52%, rgba(88,205,193,.085) 0 10px, transparent 11px);

    --cg-pattern-size-a: 170px 150px;
    --cg-pattern-size-b: 230px 190px;
    --cg-pattern-size-c: 130px 120px;

    --cg-pattern-position-a: 0 0;
    --cg-pattern-position-b: 47px 33px;
    --cg-pattern-position-c: 91px 17px;
}

html[data-cg-library="legacy"][data-cg-theme="prismtiles"] {
    color-scheme: dark !important;

    --cg-page-a: #0c0b18;
    --cg-page-b: #070711;

    --cg-glow-a: rgba(52, 204, 255, .19);
    --cg-glow-b: rgba(184, 83, 255, .19);
    --cg-glow-c: rgba(255, 84, 177, .11);

    --cg-sidebar-glass: rgba(24, 21, 40, .97);
    --cg-sidebar-lower: #090812;

    --cg-header-chip: rgba(34, 29, 54, .94);
    --cg-composer-a: rgba(48, 40, 72, .94);
    --cg-composer-b: rgba(28, 24, 47, .93);

    --cg-user-bubble: rgba(68, 45, 108, .82);

    --cg-border: rgba(186, 157, 255, .17);
    --cg-hover: rgba(172, 133, 255, .10);

    --cg-pattern-a:
        linear-gradient(45deg, rgba(70,214,255,.055) 25%, transparent 25% 75%, rgba(70,214,255,.055) 75%);
    --cg-pattern-b:
        linear-gradient(-45deg, rgba(210,91,255,.045) 25%, transparent 25% 75%, rgba(210,91,255,.045) 75%);
    --cg-pattern-c:
        linear-gradient(135deg, transparent 47%, rgba(255,102,190,.035) 48% 52%, transparent 53%);

    --cg-pattern-size-a: 72px 72px;
    --cg-pattern-size-b: 72px 72px;
    --cg-pattern-size-c: 144px 144px;
}

html[data-cg-library="legacy"][data-cg-theme] body {
    color: var(--cg-text-primary) !important;

    background-image:
        var(--cg-pattern-a),
        var(--cg-pattern-b),
        var(--cg-pattern-c),
        radial-gradient(
            ellipse at 18% -8%,
            var(--cg-glow-a) 0%,
            transparent 64%
        ),
        radial-gradient(
            ellipse at 91% -5%,
            var(--cg-glow-b) 0%,
            transparent 66%
        ),
        radial-gradient(
            ellipse at 48% 108%,
            var(--cg-glow-c) 0%,
            transparent 64%
        ),
        linear-gradient(
            180deg,
            var(--cg-page-a) 0%,
            var(--cg-page-b) 100%
        ) !important;

    background-size:
        var(--cg-pattern-size-a),
        var(--cg-pattern-size-b),
        var(--cg-pattern-size-c),
        auto,
        auto,
        auto,
        auto !important;

    background-position:
        var(--cg-pattern-position-a),
        var(--cg-pattern-position-b),
        var(--cg-pattern-position-c),
        center,
        center,
        center,
        center !important;

    background-attachment:
        fixed !important;
}

html[data-cg-library="legacy"][data-cg-mode="light"] body {
    color:
        var(--cg-text-primary) !important;
}

html[data-cg-library="legacy"][data-cg-theme] body {
    background-attachment:
        scroll !important;
}

html[data-cg-library="legacy"][data-cg-animated="true"] body {
    position:
        relative;

    isolation:
        isolate;

    background-image:
        radial-gradient(
            ellipse at 18% -8%,
            var(--cg-glow-a) 0%,
            transparent 64%
        ),
        radial-gradient(
            ellipse at 91% -5%,
            var(--cg-glow-b) 0%,
            transparent 66%
        ),
        radial-gradient(
            ellipse at 48% 108%,
            var(--cg-glow-c) 0%,
            transparent 64%
        ),
        linear-gradient(
            180deg,
            var(--cg-page-a) 0%,
            var(--cg-page-b) 100%
        ) !important;

    background-size:
        auto,
        auto,
        auto,
        auto !important;

    background-position:
        center,
        center,
        center,
        center !important;

    animation:
        none !important;
}

html[data-cg-library="legacy"][data-cg-animated="true"] body::before,
html[data-cg-library="legacy"][data-cg-animated="true"] body::after {
    content: "";

    position:
        fixed;

    inset:
        -18vmax;

    pointer-events:
        none;

    z-index:
        -1;

    backface-visibility:
        hidden;

    transform-origin:
        center;

    will-change:
        transform,
        opacity;
}

html[data-cg-library="legacy"][data-cg-animated="true"] body::before {
    background-image:
        radial-gradient(
            circle at 30% 38%,
            var(--cg-glow-a) 0%,
            transparent 34%
        ),
        radial-gradient(
            circle at 72% 54%,
            var(--cg-glow-b) 0%,
            transparent 37%
        ),
        var(--cg-pattern-a),
        var(--cg-pattern-b);

    background-size:
        70% 70%,
        72% 72%,
        var(--cg-pattern-size-a),
        var(--cg-pattern-size-b);

    background-repeat:
        no-repeat,
        no-repeat,
        repeat,
        repeat;

    opacity:
        .82;

    transform:
        translate3d(-2.5%, -1.5%, 0)
        scale(1.10);

    animation:
        cgWallpaperLayerA
        var(--cg-wallpaper-duration, 18s)
        ease-in-out
        infinite
        alternate;
}

html[data-cg-library="legacy"][data-cg-animated="true"] body::after {
    background-image:
        radial-gradient(
            circle at 56% 42%,
            var(--cg-glow-c) 0%,
            transparent 35%
        ),
        var(--cg-pattern-c);

    background-size:
        72% 72%,
        var(--cg-pattern-size-c);

    background-repeat:
        no-repeat,
        repeat;

    opacity:
        .68;

    transform:
        translate3d(2%, 1%, 0)
        scale(1.08);

    animation:
        cgWallpaperLayerB
        calc(var(--cg-wallpaper-duration, 18s) * 1.28)
        ease-in-out
        infinite
        alternate-reverse;
}

@keyframes cgWallpaperLayerA {
    0% {
        transform:
            translate3d(-3.5%, -2%, 0)
            scale(1.10);
    }

    50% {
        transform:
            translate3d(2.5%, 1.8%, 0)
            scale(1.14);
    }

    100% {
        transform:
            translate3d(4.5%, -1%, 0)
            scale(1.11);
    }
}

@keyframes cgWallpaperLayerB {
    0% {
        transform:
            translate3d(3%, 2.5%, 0)
            scale(1.08);
    }

    50% {
        transform:
            translate3d(-2%, -2%, 0)
            scale(1.12);
    }

    100% {
        transform:
            translate3d(-4%, 1%, 0)
            scale(1.09);
    }
}

@media (prefers-reduced-motion: reduce) {
html[data-cg-library="legacy"]:not([data-cg-motion-override="true"])[data-cg-animated="true"] body::before,
html[data-cg-library="legacy"]:not([data-cg-motion-override="true"])[data-cg-animated="true"] body::after {
        animation:
            none !important;

        will-change:
            auto;
    }
}

html[data-cg-library="legacy"][data-cg-theme="holographic"] {
    color-scheme: dark !important;

    --cg-page-a: #070817;
    --cg-page-b: #03040b;

    --cg-glow-a: rgba(0, 229, 255, .26);
    --cg-glow-b: rgba(184, 76, 255, .24);
    --cg-glow-c: rgba(255, 63, 177, .18);

    --cg-sidebar-glass: rgba(18, 17, 38, .97);
    --cg-sidebar-lower: #060611;

    --cg-header-chip: rgba(31, 26, 57, .94);
    --cg-composer-a: rgba(48, 39, 79, .94);
    --cg-composer-b: rgba(26, 22, 48, .93);
    --cg-user-bubble: rgba(67, 42, 115, .84);

    --cg-border: rgba(161, 212, 255, .19);
    --cg-hover: rgba(170, 142, 255, .12);
    --cg-glass-highlight: rgba(143, 240, 255, .12);

    --cg-pattern-a:
        conic-gradient(
            from 40deg at 50% 50%,
            rgba(0, 234, 255, .15),
            rgba(160, 80, 255, .12),
            rgba(255, 70, 181, .12),
            rgba(0, 234, 255, .15)
        );

    --cg-pattern-b:
        repeating-linear-gradient(
            118deg,
            transparent 0 28px,
            rgba(135, 229, 255, .040) 29px 30px,
            transparent 31px 58px
        );

    --cg-pattern-c:
        radial-gradient(
            ellipse at 50% 50%,
            rgba(255,255,255,.050) 0%,
            transparent 52%
        );

    --cg-pattern-size-a: 155% 155%;
    --cg-pattern-size-b: 135px 135px;
    --cg-pattern-size-c: 90% 90%;

    --cg-wallpaper-duration: 18s;
}

html[data-cg-library="legacy"][data-cg-theme="nebulaflow"] {
    color-scheme: dark !important;

    --cg-page-a: #080617;
    --cg-page-b: #02030a;

    --cg-glow-a: rgba(74, 104, 255, .23);
    --cg-glow-b: rgba(221, 72, 255, .22);
    --cg-glow-c: rgba(0, 202, 255, .14);

    --cg-sidebar-glass: rgba(18, 16, 38, .97);
    --cg-sidebar-lower: #06050f;

    --cg-header-chip: rgba(31, 27, 58, .94);
    --cg-composer-a: rgba(48, 39, 82, .94);
    --cg-composer-b: rgba(27, 23, 50, .93);
    --cg-user-bubble: rgba(58, 49, 117, .82);

    --cg-border: rgba(186, 168, 255, .18);
    --cg-hover: rgba(177, 146, 255, .11);

    --cg-pattern-a:
        radial-gradient(
            ellipse at 25% 45%,
            rgba(71, 119, 255, .20) 0%,
            rgba(71,119,255,.04) 35%,
            transparent 62%
        );

    --cg-pattern-b:
        radial-gradient(
            ellipse at 75% 35%,
            rgba(232, 75, 255, .17) 0%,
            rgba(232,75,255,.035) 38%,
            transparent 66%
        );

    --cg-pattern-c:
        radial-gradient(
            circle,
            rgba(255,255,255,.52) 0 1px,
            transparent 1.3px
        );

    --cg-pattern-size-a: 130% 130%;
    --cg-pattern-size-b: 145% 145%;
    --cg-pattern-size-c: 121px 121px;

    --cg-wallpaper-duration: 24s;
}

html[data-cg-library="legacy"][data-cg-theme="laserwave"] {
    color-scheme: dark !important;

    --cg-page-a: #061014;
    --cg-page-b: #030508;

    --cg-glow-a: rgba(0, 255, 235, .21);
    --cg-glow-b: rgba(255, 37, 181, .20);
    --cg-glow-c: rgba(113, 63, 255, .14);

    --cg-sidebar-glass: rgba(9, 28, 32, .97);
    --cg-sidebar-lower: #03090b;

    --cg-header-chip: rgba(13, 40, 45, .94);
    --cg-composer-a: rgba(21, 56, 61, .94);
    --cg-composer-b: rgba(11, 35, 40, .93);
    --cg-user-bubble: rgba(19, 78, 86, .83);

    --cg-border: rgba(108, 244, 238, .18);
    --cg-hover: rgba(89, 235, 226, .11);

    --cg-pattern-a:
        repeating-linear-gradient(
            122deg,
            transparent 0 42px,
            rgba(0, 247, 238, .070) 43px 45px,
            transparent 46px 86px
        );

    --cg-pattern-b:
        repeating-linear-gradient(
            58deg,
            transparent 0 61px,
            rgba(255, 72, 195, .055) 62px 64px,
            transparent 65px 124px
        );

    --cg-pattern-c:
        conic-gradient(
            from 210deg at 60% 50%,
            transparent,
            rgba(119, 79, 255, .070),
            transparent 38%
        );

    --cg-pattern-size-a: 150% 150%;
    --cg-pattern-size-b: 145% 145%;
    --cg-pattern-size-c: 155% 155%;

    --cg-wallpaper-duration: 16s;
}

html[data-cg-library="legacy"][data-cg-theme="liquidrainbow"] {
    color-scheme: dark !important;

    --cg-page-a: #0d0913;
    --cg-page-b: #050409;

    --cg-glow-a: rgba(255, 77, 126, .18);
    --cg-glow-b: rgba(98, 101, 255, .18);
    --cg-glow-c: rgba(0, 221, 186, .15);

    --cg-sidebar-glass: rgba(28, 20, 36, .97);
    --cg-sidebar-lower: #0a0710;

    --cg-header-chip: rgba(42, 30, 51, .94);
    --cg-composer-a: rgba(59, 42, 70, .94);
    --cg-composer-b: rgba(35, 25, 43, .93);
    --cg-user-bubble: rgba(80, 46, 91, .82);

    --cg-border: rgba(237, 172, 255, .17);
    --cg-hover: rgba(221, 145, 255, .10);

    --cg-pattern-a:
        conic-gradient(
            from 20deg at 35% 45%,
            rgba(255, 63, 122, .17),
            rgba(255, 170, 58, .12),
            rgba(58, 231, 187, .14),
            rgba(76, 118, 255, .17),
            rgba(181, 76, 255, .17),
            rgba(255, 63, 122, .17)
        );

    --cg-pattern-b:
        radial-gradient(
            ellipse at 65% 55%,
            rgba(255,255,255,.055),
            transparent 54%
        );

    --cg-pattern-c:
        radial-gradient(
            ellipse at 40% 35%,
            rgba(255,255,255,.032),
            transparent 48%
        );

    --cg-pattern-size-a: 160% 160%;
    --cg-pattern-size-b: 115% 115%;
    --cg-pattern-size-c: 90% 90%;

    --cg-wallpaper-duration: 20s;
}

html[data-cg-library="legacy"][data-cg-theme="solarflare"] {
    color-scheme: dark !important;

    --cg-page-a: #190a08;
    --cg-page-b: #090404;

    --cg-glow-a: rgba(255, 126, 41, .26);
    --cg-glow-b: rgba(255, 42, 92, .20);
    --cg-glow-c: rgba(148, 67, 255, .13);

    --cg-sidebar-glass: rgba(43, 20, 18, .97);
    --cg-sidebar-lower: #100706;

    --cg-header-chip: rgba(57, 28, 25, .94);
    --cg-composer-a: rgba(78, 39, 34, .94);
    --cg-composer-b: rgba(46, 24, 22, .93);
    --cg-user-bubble: rgba(112, 49, 43, .83);

    --cg-border: rgba(255, 181, 125, .18);
    --cg-hover: rgba(255, 149, 105, .11);

    --cg-pattern-a:
        radial-gradient(
            ellipse at 25% 55%,
            rgba(255, 151, 43, .20) 0%,
            transparent 55%
        );

    --cg-pattern-b:
        conic-gradient(
            from 260deg at 70% 45%,
            rgba(255, 49, 104, .14),
            rgba(148, 67, 255, .10),
            transparent 45%,
            rgba(255, 49, 104, .14)
        );

    --cg-pattern-c:
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 191, 118, .035) 0 1px,
            transparent 2px 17px
        );

    --cg-pattern-size-a: 130% 130%;
    --cg-pattern-size-b: 145% 145%;
    --cg-pattern-size-c: 110% 110%;

    --cg-wallpaper-duration: 17s;
}

html[data-cg-library="legacy"][data-cg-theme="mermaidpulse"] {
    color-scheme: dark !important;

    --cg-page-a: #051517;
    --cg-page-b: #03090b;

    --cg-glow-a: rgba(0, 238, 207, .20);
    --cg-glow-b: rgba(80, 103, 255, .16);
    --cg-glow-c: rgba(160, 75, 255, .14);

    --cg-sidebar-glass: rgba(9, 34, 36, .97);
    --cg-sidebar-lower: #031012;

    --cg-header-chip: rgba(13, 46, 49, .94);
    --cg-composer-a: rgba(20, 63, 65, .94);
    --cg-composer-b: rgba(10, 39, 42, .93);
    --cg-user-bubble: rgba(18, 87, 87, .82);

    --cg-border: rgba(129, 242, 224, .17);
    --cg-hover: rgba(101, 230, 212, .10);

    --cg-pattern-a:
        radial-gradient(
            ellipse at 30% 45%,
            rgba(0, 241, 204, .16),
            transparent 54%
        );

    --cg-pattern-b:
        radial-gradient(
            ellipse at 72% 52%,
            rgba(96, 111, 255, .15),
            transparent 56%
        );

    --cg-pattern-c:
        conic-gradient(
            from 160deg at 52% 42%,
            transparent,
            rgba(183, 83, 255, .10),
            transparent 44%
        );

    --cg-pattern-size-a: 135% 135%;
    --cg-pattern-size-b: 145% 145%;
    --cg-pattern-size-c: 150% 150%;

    --cg-wallpaper-duration: 22s;
}

html[data-cg-library="legacy"][data-cg-theme="dreamwave"] {
    color-scheme: light !important;

    --cg-page-a: #fff5fb;
    --cg-page-b: #eaf3ff;

    --cg-glow-a: rgba(255, 113, 190, .19);
    --cg-glow-b: rgba(115, 135, 255, .16);
    --cg-glow-c: rgba(75, 215, 203, .11);

    --cg-sidebar-glass: rgba(248, 243, 252, .98);
    --cg-sidebar-lower: #edf2fa;

    --cg-header-chip: rgba(255, 251, 254, .97);
    --cg-composer-a: rgba(255, 252, 254, .98);
    --cg-composer-b: rgba(237, 241, 250, .97);
    --cg-user-bubble: rgba(235, 212, 239, .94);

    --cg-text-primary: #30253b;
    --cg-text-secondary: #695975;
    --cg-text-tertiary: #8c7c99;

    --cg-border: rgba(78, 60, 101, .11);
    --cg-hover: rgba(123, 92, 155, .07);
    --cg-glass-highlight: rgba(255,255,255,.86);

    --cg-code-bg: rgba(240, 234, 247, .98);

    --cg-switcher-bg: rgba(255, 251, 254, .98);
    --cg-switcher-text: #30253b;

    --cg-pattern-a:
        conic-gradient(
            from 20deg at 40% 45%,
            rgba(255, 145, 205, .16),
            rgba(255, 216, 132, .10),
            rgba(111, 222, 211, .12),
            rgba(135, 155, 255, .15),
            rgba(213, 146, 255, .14),
            rgba(255, 145, 205, .16)
        );

    --cg-pattern-b:
        radial-gradient(
            ellipse at 70% 40%,
            rgba(255,255,255,.60),
            transparent 52%
        );

    --cg-pattern-c:
        radial-gradient(
            ellipse at 35% 65%,
            rgba(255,255,255,.34),
            transparent 48%
        );

    --cg-pattern-size-a: 160% 160%;
    --cg-pattern-size-b: 110% 110%;
    --cg-pattern-size-c: 95% 95%;

    --cg-wallpaper-duration: 24s;
}

html[data-cg-library="legacy"][data-cg-theme="chromaticsilk"] {
    color-scheme: light !important;

    --cg-page-a: #f8f7ff;
    --cg-page-b: #eef7f6;

    --cg-glow-a: rgba(115, 149, 255, .15);
    --cg-glow-b: rgba(255, 119, 188, .14);
    --cg-glow-c: rgba(76, 207, 184, .11);

    --cg-sidebar-glass: rgba(246, 247, 252, .98);
    --cg-sidebar-lower: #edf2f3;

    --cg-header-chip: rgba(252, 252, 255, .97);
    --cg-composer-a: rgba(253, 253, 255, .98);
    --cg-composer-b: rgba(237, 241, 243, .97);
    --cg-user-bubble: rgba(224, 222, 242, .94);

    --cg-text-primary: #282b38;
    --cg-text-secondary: #595f70;
    --cg-text-tertiary: #808696;

    --cg-border: rgba(50, 55, 76, .11);
    --cg-hover: rgba(85, 91, 128, .07);
    --cg-glass-highlight: rgba(255,255,255,.90);

    --cg-code-bg: rgba(237, 238, 246, .98);

    --cg-switcher-bg: rgba(252, 252, 255, .98);
    --cg-switcher-text: #282b38;

    --cg-pattern-a:
        conic-gradient(
            from 0deg at 50% 50%,
            rgba(102, 150, 255, .14),
            rgba(196, 129, 255, .12),
            rgba(255, 133, 183, .13),
            rgba(255, 205, 126, .10),
            rgba(80, 210, 188, .12),
            rgba(102, 150, 255, .14)
        );

    --cg-pattern-b:
        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,.25) 0 1px,
            transparent 2px 26px
        );

    --cg-pattern-c:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.58),
            transparent 55%
        );

    --cg-pattern-size-a: 170% 170%;
    --cg-pattern-size-b: 110px 110px;
    --cg-pattern-size-c: 100% 100%;

    --cg-wallpaper-duration: 26s;
}

@keyframes cgWildVortexA {
    0%   { transform: translate3d(-7%, -5%, 0) scale(1.18) rotate(-7deg); }
    35%  { transform: translate3d(5%, 4%, 0) scale(1.28) rotate(8deg); }
    70%  { transform: translate3d(-2%, 8%, 0) scale(1.22) rotate(-4deg); }
    100% { transform: translate3d(8%, -3%, 0) scale(1.30) rotate(11deg); }
}

@keyframes cgWildVortexB {
    0%   { transform: translate3d(7%, 5%, 0) scale(1.16) rotate(9deg); opacity: .62; }
    50%  { transform: translate3d(-7%, -4%, 0) scale(1.26) rotate(-10deg); opacity: .80; }
    100% { transform: translate3d(3%, 7%, 0) scale(1.21) rotate(6deg); opacity: .68; }
}

@keyframes cgWildSweepA {
    0%   { transform: translate3d(-14%, 0, 0) scale(1.20) rotate(-10deg); }
    45%  { transform: translate3d(10%, -5%, 0) scale(1.30) rotate(7deg); }
    100% { transform: translate3d(-3%, 8%, 0) scale(1.24) rotate(-5deg); }
}

@keyframes cgWildSweepB {
    0%   { transform: translate3d(10%, -9%, 0) scale(1.15) rotate(12deg); opacity: .55; }
    50%  { transform: translate3d(-11%, 6%, 0) scale(1.26) rotate(-8deg); opacity: .78; }
    100% { transform: translate3d(6%, 2%, 0) scale(1.20) rotate(5deg); opacity: .64; }
}

@keyframes cgWildPulseA {
    0%   { transform: translate3d(-4%, -4%, 0) scale(1.12) rotate(-3deg); opacity: .70; }
    30%  { transform: translate3d(5%, 2%, 0) scale(1.34) rotate(6deg); opacity: .92; }
    65%  { transform: translate3d(-2%, 7%, 0) scale(1.20) rotate(-5deg); opacity: .78; }
    100% { transform: translate3d(7%, -2%, 0) scale(1.31) rotate(8deg); opacity: .88; }
}

@keyframes cgWildPulseB {
    0%   { transform: translate3d(6%, 6%, 0) scale(1.10) rotate(6deg); opacity: .54; }
    50%  { transform: translate3d(-8%, -5%, 0) scale(1.29) rotate(-9deg); opacity: .82; }
    100% { transform: translate3d(4%, 4%, 0) scale(1.18) rotate(4deg); opacity: .60; }
}

html[data-cg-library="legacy"][data-cg-theme="plasmastorm"] body::before,
html[data-cg-library="legacy"][data-cg-theme="cybercarnival"] body::before,
html[data-cg-library="legacy"][data-cg-theme="kaleidoflux"] body::before {
    animation-name: cgWildVortexA !important;
}

html[data-cg-library="legacy"][data-cg-theme="plasmastorm"] body::after,
html[data-cg-library="legacy"][data-cg-theme="cybercarnival"] body::after,
html[data-cg-library="legacy"][data-cg-theme="kaleidoflux"] body::after {
    animation-name: cgWildVortexB !important;
}

html[data-cg-library="legacy"][data-cg-theme="hyperdrive"] body::before,
html[data-cg-library="legacy"][data-cg-theme="aurorarush"] body::before,
html[data-cg-library="legacy"][data-cg-theme="acidwave"] body::before {
    animation-name: cgWildSweepA !important;
}

html[data-cg-library="legacy"][data-cg-theme="hyperdrive"] body::after,
html[data-cg-library="legacy"][data-cg-theme="aurorarush"] body::after,
html[data-cg-library="legacy"][data-cg-theme="acidwave"] body::after {
    animation-name: cgWildSweepB !important;
}

html[data-cg-library="legacy"][data-cg-theme="magmapulse"] body::before,
html[data-cg-library="legacy"][data-cg-theme="electricbloom"] body::before {
    animation-name: cgWildPulseA !important;
}

html[data-cg-library="legacy"][data-cg-theme="magmapulse"] body::after,
html[data-cg-library="legacy"][data-cg-theme="electricbloom"] body::after {
    animation-name: cgWildPulseB !important;
}

html[data-cg-library="legacy"][data-cg-theme="plasmastorm"] {
    color-scheme: dark !important;
    --cg-page-a:#06040d; --cg-page-b:#020205;
    --cg-glow-a:rgba(0,255,241,.30); --cg-glow-b:rgba(255,0,182,.27); --cg-glow-c:rgba(118,54,255,.20);
    --cg-sidebar-glass:rgba(21,13,31,.97); --cg-sidebar-lower:#07040b;
    --cg-header-chip:rgba(35,20,47,.94); --cg-composer-a:rgba(55,29,70,.94); --cg-composer-b:rgba(30,17,42,.93);
    --cg-user-bubble:rgba(82,36,97,.84); --cg-border:rgba(213,140,255,.22); --cg-hover:rgba(198,104,255,.14);
    --cg-pattern-a:conic-gradient(from 30deg at 50% 50%,rgba(0,255,241,.30),rgba(84,72,255,.18),rgba(255,0,182,.28),rgba(255,91,66,.14),rgba(0,255,241,.30));
    --cg-pattern-b:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.055) 0 1px,transparent 2px 22px);
    --cg-pattern-c:conic-gradient(from 220deg at 45% 58%,transparent,rgba(170,87,255,.16),transparent 34%);
    --cg-pattern-size-a:145% 145%; --cg-pattern-size-b:120% 120%; --cg-pattern-size-c:150% 150%;
    --cg-wallpaper-duration:10s;
}

html[data-cg-library="legacy"][data-cg-theme="cybercarnival"] {
    color-scheme: dark !important;
    --cg-page-a:#071016; --cg-page-b:#030508;
    --cg-glow-a:rgba(0,239,255,.28); --cg-glow-b:rgba(255,45,182,.26); --cg-glow-c:rgba(255,226,64,.20);
    --cg-sidebar-glass:rgba(9,28,34,.97); --cg-sidebar-lower:#030a0d;
    --cg-header-chip:rgba(13,43,50,.94); --cg-composer-a:rgba(20,61,67,.94); --cg-composer-b:rgba(10,37,42,.93);
    --cg-user-bubble:rgba(20,88,92,.84); --cg-border:rgba(107,242,255,.20); --cg-hover:rgba(84,229,243,.13);
    --cg-pattern-a:conic-gradient(from 90deg at 50% 50%,rgba(0,239,255,.24),rgba(255,226,64,.16),rgba(255,45,182,.23),rgba(114,61,255,.17),rgba(0,239,255,.24));
    --cg-pattern-b:repeating-linear-gradient(128deg,transparent 0 34px,rgba(255,255,255,.050) 35px 37px,transparent 38px 72px);
    --cg-pattern-c:radial-gradient(circle,rgba(255,230,92,.10) 0 2px,transparent 3px);
    --cg-pattern-size-a:150% 150%; --cg-pattern-size-b:130px 130px; --cg-pattern-size-c:58px 58px;
    --cg-wallpaper-duration:9s;
}

html[data-cg-library="legacy"][data-cg-theme="hyperdrive"] {
    color-scheme: dark !important;
    --cg-page-a:#020711; --cg-page-b:#010207;
    --cg-glow-a:rgba(31,122,255,.28); --cg-glow-b:rgba(102,73,255,.23); --cg-glow-c:rgba(0,236,255,.16);
    --cg-sidebar-glass:rgba(8,18,35,.97); --cg-sidebar-lower:#020611;
    --cg-header-chip:rgba(11,29,50,.94); --cg-composer-a:rgba(17,43,69,.94); --cg-composer-b:rgba(9,26,45,.93);
    --cg-user-bubble:rgba(19,62,101,.84); --cg-border:rgba(126,181,255,.21); --cg-hover:rgba(100,165,255,.13);
    --cg-pattern-a:repeating-linear-gradient(108deg,transparent 0 22px,rgba(116,184,255,.12) 23px 25px,transparent 26px 52px);
    --cg-pattern-b:repeating-linear-gradient(108deg,transparent 0 53px,rgba(0,238,255,.070) 54px 57px,transparent 58px 104px);
    --cg-pattern-c:linear-gradient(108deg,transparent 25%,rgba(131,84,255,.14) 48%,transparent 72%);
    --cg-pattern-size-a:160% 160%; --cg-pattern-size-b:170% 170%; --cg-pattern-size-c:145% 145%;
    --cg-wallpaper-duration:7.5s;
}

html[data-cg-library="legacy"][data-cg-theme="aurorarush"] {
    color-scheme: dark !important;
    --cg-page-a:#04100f; --cg-page-b:#020706;
    --cg-glow-a:rgba(0,255,179,.28); --cg-glow-b:rgba(72,125,255,.23); --cg-glow-c:rgba(191,66,255,.18);
    --cg-sidebar-glass:rgba(8,31,27,.97); --cg-sidebar-lower:#030b09;
    --cg-header-chip:rgba(12,45,39,.94); --cg-composer-a:rgba(19,63,54,.94); --cg-composer-b:rgba(10,39,34,.93);
    --cg-user-bubble:rgba(17,88,72,.84); --cg-border:rgba(121,246,211,.20); --cg-hover:rgba(90,231,193,.13);
    --cg-pattern-a:linear-gradient(115deg,transparent 0 15%,rgba(0,255,179,.23) 30%,transparent 48%,rgba(92,121,255,.18) 66%,transparent 82%);
    --cg-pattern-b:linear-gradient(80deg,transparent 0 25%,rgba(198,72,255,.14) 45%,transparent 65%);
    --cg-pattern-c:radial-gradient(ellipse at center,rgba(255,255,255,.055),transparent 58%);
    --cg-pattern-size-a:155% 155%; --cg-pattern-size-b:150% 150%; --cg-pattern-size-c:95% 95%;
    --cg-wallpaper-duration:8.5s;
}

html[data-cg-library="legacy"][data-cg-theme="magmapulse"] {
    color-scheme: dark !important;
    --cg-page-a:#1b0703; --cg-page-b:#080201;
    --cg-glow-a:rgba(255,113,16,.32); --cg-glow-b:rgba(255,31,54,.24); --cg-glow-c:rgba(255,181,45,.18);
    --cg-sidebar-glass:rgba(45,17,11,.97); --cg-sidebar-lower:#110603;
    --cg-header-chip:rgba(60,24,16,.94); --cg-composer-a:rgba(82,34,23,.94); --cg-composer-b:rgba(49,21,15,.93);
    --cg-user-bubble:rgba(118,46,29,.84); --cg-border:rgba(255,170,103,.22); --cg-hover:rgba(255,140,79,.14);
    --cg-pattern-a:radial-gradient(ellipse at 40% 45%,rgba(255,110,0,.30),transparent 52%);
    --cg-pattern-b:conic-gradient(from 180deg at 60% 50%,rgba(255,20,55,.19),rgba(255,195,41,.16),transparent 48%,rgba(255,20,55,.19));
    --cg-pattern-c:repeating-radial-gradient(circle,rgba(255,211,99,.050) 0 2px,transparent 3px 19px);
    --cg-pattern-size-a:135% 135%; --cg-pattern-size-b:145% 145%; --cg-pattern-size-c:110% 110%;
    --cg-wallpaper-duration:8s;
}

html[data-cg-library="legacy"][data-cg-theme="electricbloom"] {
    color-scheme: dark !important;
    --cg-page-a:#130712; --cg-page-b:#060307;
    --cg-glow-a:rgba(255,53,184,.27); --cg-glow-b:rgba(107,84,255,.23); --cg-glow-c:rgba(0,238,211,.16);
    --cg-sidebar-glass:rgba(38,16,35,.97); --cg-sidebar-lower:#0c050b;
    --cg-header-chip:rgba(51,22,47,.94); --cg-composer-a:rgba(70,30,63,.94); --cg-composer-b:rgba(41,19,38,.93);
    --cg-user-bubble:rgba(102,39,86,.84); --cg-border:rgba(255,145,221,.21); --cg-hover:rgba(244,116,207,.13);
    --cg-pattern-a:conic-gradient(from 0deg at 50% 50%,transparent 0 8%,rgba(255,61,191,.24) 10% 18%,transparent 20% 30%,rgba(104,92,255,.22) 32% 40%,transparent 42% 52%,rgba(0,237,211,.18) 54% 62%,transparent 64% 74%,rgba(255,177,72,.14) 76% 84%,transparent 86%);
    --cg-pattern-b:radial-gradient(circle at center,rgba(255,255,255,.08) 0 2%,transparent 3% 100%);
    --cg-pattern-c:radial-gradient(circle,rgba(255,135,221,.080) 0 3px,transparent 4px);
    --cg-pattern-size-a:125% 125%; --cg-pattern-size-b:95% 95%; --cg-pattern-size-c:72px 72px;
    --cg-wallpaper-duration:8.5s;
}

html[data-cg-library="legacy"][data-cg-theme="acidwave"] {
    color-scheme: dark !important;
    --cg-page-a:#091007; --cg-page-b:#030502;
    --cg-glow-a:rgba(179,255,28,.27); --cg-glow-b:rgba(0,224,255,.22); --cg-glow-c:rgba(160,62,255,.17);
    --cg-sidebar-glass:rgba(20,31,13,.97); --cg-sidebar-lower:#060a04;
    --cg-header-chip:rgba(29,45,18,.94); --cg-composer-a:rgba(41,62,26,.94); --cg-composer-b:rgba(25,38,17,.93);
    --cg-user-bubble:rgba(55,86,31,.84); --cg-border:rgba(200,255,119,.20); --cg-hover:rgba(184,245,93,.13);
    --cg-pattern-a:repeating-linear-gradient(120deg,transparent 0 31px,rgba(186,255,29,.13) 32px 37px,transparent 38px 70px);
    --cg-pattern-b:repeating-linear-gradient(63deg,transparent 0 54px,rgba(0,224,255,.080) 55px 59px,transparent 60px 108px);
    --cg-pattern-c:conic-gradient(from 30deg,rgba(160,62,255,.13),transparent 32%,rgba(186,255,29,.10),transparent 70%);
    --cg-pattern-size-a:150% 150%; --cg-pattern-size-b:155% 155%; --cg-pattern-size-c:145% 145%;
    --cg-wallpaper-duration:7.5s;
}

html[data-cg-library="legacy"][data-cg-theme="kaleidoflux"] {
    color-scheme: dark !important;
    --cg-page-a:#100715; --cg-page-b:#050307;
    --cg-glow-a:rgba(255,71,137,.24); --cg-glow-b:rgba(77,122,255,.22); --cg-glow-c:rgba(0,228,193,.18);
    --cg-sidebar-glass:rgba(31,17,39,.97); --cg-sidebar-lower:#0a050d;
    --cg-header-chip:rgba(43,24,52,.94); --cg-composer-a:rgba(61,34,73,.94); --cg-composer-b:rgba(36,21,44,.93);
    --cg-user-bubble:rgba(86,43,101,.84); --cg-border:rgba(220,155,255,.20); --cg-hover:rgba(205,127,255,.13);
    --cg-pattern-a:conic-gradient(from 0deg at 50% 50%,rgba(255,71,137,.20),rgba(255,183,55,.15),rgba(0,228,193,.18),rgba(77,122,255,.20),rgba(181,65,255,.20),rgba(255,71,137,.20));
    --cg-pattern-b:conic-gradient(from 45deg at 50% 50%,transparent 0 12%,rgba(255,255,255,.045) 13% 15%,transparent 16% 30%,rgba(255,255,255,.035) 31% 33%,transparent 34% 100%);
    --cg-pattern-c:repeating-radial-gradient(circle,rgba(255,255,255,.04) 0 1px,transparent 2px 24px);
    --cg-pattern-size-a:135% 135%; --cg-pattern-size-b:120% 120%; --cg-pattern-size-c:115% 115%;
    --cg-wallpaper-duration:9s;
}

@keyframes cgArtRotateA {
    0% {
        transform: translate3d(-3%, -3%, 0) scale(1.13) rotate(-4deg);
    }
    50% {
        transform: translate3d(3%, 2%, 0) scale(1.19) rotate(5deg);
    }
    100% {
        transform: translate3d(-1%, 5%, 0) scale(1.15) rotate(10deg);
    }
}

@keyframes cgArtRotateB {
    0% {
        transform: translate3d(4%, 3%, 0) scale(1.10) rotate(6deg);
        opacity: .58;
    }
    50% {
        transform: translate3d(-4%, -2%, 0) scale(1.16) rotate(-5deg);
        opacity: .76;
    }
    100% {
        transform: translate3d(2%, -4%, 0) scale(1.12) rotate(-10deg);
        opacity: .64;
    }
}

@keyframes cgArtDriftA {
    0% {
        transform: translate3d(-8%, -2%, 0) scale(1.12);
    }
    50% {
        transform: translate3d(2%, 5%, 0) scale(1.16);
    }
    100% {
        transform: translate3d(8%, -3%, 0) scale(1.13);
    }
}

@keyframes cgArtDriftB {
    0% {
        transform: translate3d(7%, 4%, 0) scale(1.09);
        opacity: .55;
    }
    50% {
        transform: translate3d(-6%, -3%, 0) scale(1.14);
        opacity: .73;
    }
    100% {
        transform: translate3d(3%, 5%, 0) scale(1.10);
        opacity: .61;
    }
}

@keyframes cgArtOrbitA {
    0% {
        transform: translate3d(-2%, -3%, 0) scale(1.12) rotate(0deg);
    }
    50% {
        transform: translate3d(3%, 2%, 0) scale(1.18) rotate(8deg);
    }
    100% {
        transform: translate3d(-1%, 4%, 0) scale(1.13) rotate(16deg);
    }
}

@keyframes cgArtOrbitB {
    0% {
        transform: translate3d(3%, 2%, 0) scale(1.08) rotate(0deg);
        opacity: .52;
    }
    50% {
        transform: translate3d(-3%, -2%, 0) scale(1.13) rotate(-10deg);
        opacity: .70;
    }
    100% {
        transform: translate3d(2%, -3%, 0) scale(1.09) rotate(-20deg);
        opacity: .60;
    }
}

html[data-cg-library="legacy"][data-cg-theme="cathedralglass"] body::before,
html[data-cg-library="legacy"][data-cg-theme="celestialorrery"] body::before,
html[data-cg-library="legacy"][data-cg-theme="baroquegold"] body::before {
    animation-name: cgArtRotateA !important;
}

html[data-cg-library="legacy"][data-cg-theme="cathedralglass"] body::after,
html[data-cg-library="legacy"][data-cg-theme="celestialorrery"] body::after,
html[data-cg-library="legacy"][data-cg-theme="baroquegold"] body::after {
    animation-name: cgArtRotateB !important;
}

html[data-cg-library="legacy"][data-cg-theme="seigaiha"] body::before,
html[data-cg-library="legacy"][data-cg-theme="zellige"] body::before,
html[data-cg-library="legacy"][data-cg-theme="opalscales"] body::before {
    animation-name: cgArtDriftA !important;
}

html[data-cg-library="legacy"][data-cg-theme="seigaiha"] body::after,
html[data-cg-library="legacy"][data-cg-theme="zellige"] body::after,
html[data-cg-library="legacy"][data-cg-theme="opalscales"] body::after {
    animation-name: cgArtDriftB !important;
}

html[data-cg-library="legacy"][data-cg-theme="circuitbloom"] body::before,
html[data-cg-library="legacy"][data-cg-theme="neonlabyrinth"] body::before {
    animation-name: cgArtOrbitA !important;
}

html[data-cg-library="legacy"][data-cg-theme="circuitbloom"] body::after,
html[data-cg-library="legacy"][data-cg-theme="neonlabyrinth"] body::after {
    animation-name: cgArtOrbitB !important;
}

html[data-cg-library="legacy"][data-cg-theme="cathedralglass"] {
    color-scheme: dark !important;

    --cg-page-a: #080817;
    --cg-page-b: #03040b;

    --cg-glow-a: rgba(35, 188, 255, .20);
    --cg-glow-b: rgba(219, 66, 255, .19);
    --cg-glow-c: rgba(255, 104, 54, .13);

    --cg-sidebar-glass: rgba(18, 17, 37, .97);
    --cg-sidebar-lower: #060611;
    --cg-header-chip: rgba(31, 26, 55, .94);
    --cg-composer-a: rgba(48, 39, 77, .94);
    --cg-composer-b: rgba(27, 23, 47, .93);
    --cg-user-bubble: rgba(66, 42, 104, .84);

    --cg-border: rgba(184, 172, 255, .18);
    --cg-hover: rgba(171, 147, 255, .11);

    --cg-wallpaper-duration: 26s;
}

html[data-cg-library="legacy"][data-cg-theme="cathedralglass"] body::before {
    background-image:
        radial-gradient(circle at 50% 50%,
            transparent 0 7%,
            rgba(4,5,10,.92) 7.5% 8.5%,
            transparent 9% 15%,
            rgba(4,5,10,.88) 15.5% 16.5%,
            transparent 17% 26%,
            rgba(4,5,10,.84) 26.5% 27.5%,
            transparent 28%),
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(0,211,255,.26) 0deg 7deg,
            rgba(7,8,17,.88) 7.3deg 8.6deg,
            rgba(180,70,255,.24) 8.9deg 15deg,
            rgba(7,8,17,.88) 15.3deg 16.6deg,
            rgba(255,83,150,.22) 16.9deg 23deg,
            rgba(7,8,17,.88) 23.3deg 24.6deg,
            rgba(255,178,66,.18) 24.9deg 30deg),
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.075) 0 1px,
            transparent 2px 24px),
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.13) 0 2%,
            transparent 2.5% 100%),
        radial-gradient(circle at 25% 30%, rgba(0,205,255,.16), transparent 34%),
        radial-gradient(circle at 75% 65%, rgba(232,70,255,.14), transparent 36%);

    background-size:
        78vmin 78vmin,
        78vmin 78vmin,
        78vmin 78vmin,
        78vmin 78vmin,
        72% 72%,
        76% 76%;

    background-position:
        center,
        center,
        center,
        center,
        10% 5%,
        90% 85%;

    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="cathedralglass"] body::after {
    background-image:
        repeating-conic-gradient(from 15deg at 50% 50%,
            transparent 0deg 13deg,
            rgba(190,220,255,.08) 13.4deg 14deg,
            transparent 14.4deg 28deg),
        radial-gradient(circle at 50% 50%,
            transparent 0 34%,
            rgba(255,255,255,.08) 34.5% 35%,
            transparent 35.5% 46%,
            rgba(255,255,255,.05) 46.5% 47%,
            transparent 47.5%);

    background-size: 86vmin 86vmin, 86vmin 86vmin;
    background-position: center, center;
    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="seigaiha"] {
    color-scheme: dark !important;

    --cg-page-a: #07121a;
    --cg-page-b: #03080d;
    --cg-glow-a: rgba(0, 187, 224, .16);
    --cg-glow-b: rgba(60, 105, 205, .13);
    --cg-glow-c: rgba(95, 222, 199, .09);

    --cg-sidebar-glass: rgba(10, 29, 39, .97);
    --cg-sidebar-lower: #040c11;
    --cg-header-chip: rgba(14, 41, 53, .94);
    --cg-composer-a: rgba(21, 57, 70, .94);
    --cg-composer-b: rgba(12, 35, 46, .93);
    --cg-user-bubble: rgba(20, 78, 91, .84);

    --cg-border: rgba(126, 211, 231, .17);
    --cg-hover: rgba(99, 198, 219, .10);
    --cg-wallpaper-duration: 30s;
}

html[data-cg-library="legacy"][data-cg-theme="seigaiha"] body::before {
    background-image:
        radial-gradient(circle at 50% 100%,
            transparent 0 18px,
            rgba(111,220,236,.11) 19px 20px,
            transparent 21px 28px,
            rgba(111,220,236,.085) 29px 30px,
            transparent 31px 38px,
            rgba(111,220,236,.060) 39px 40px,
            transparent 41px),
        radial-gradient(circle at 0% 100%,
            transparent 0 18px,
            rgba(91,170,231,.085) 19px 20px,
            transparent 21px 28px,
            rgba(91,170,231,.055) 29px 30px,
            transparent 31px),
        radial-gradient(circle at 100% 100%,
            transparent 0 18px,
            rgba(75,214,190,.080) 19px 20px,
            transparent 21px 28px,
            rgba(75,214,190,.050) 29px 30px,
            transparent 31px),
        linear-gradient(180deg,
            rgba(5,22,31,.12),
            rgba(3,9,14,.02));

    background-size:
        88px 44px,
        88px 44px,
        88px 44px,
        100% 100%;

    background-position:
        0 0,
        44px 22px,
        0 22px,
        0 0;

    background-repeat: repeat, repeat, repeat, no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="seigaiha"] body::after {
    background-image:
        radial-gradient(circle at 50% 100%,
            transparent 0 10px,
            rgba(255,255,255,.038) 11px 12px,
            transparent 13px 22px,
            rgba(255,255,255,.024) 23px 24px,
            transparent 25px),
        linear-gradient(135deg, rgba(255,255,255,.020), transparent 45%);

    background-size: 44px 22px, 100% 100%;
    background-position: 22px 11px, 0 0;
    background-repeat: repeat, no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="zellige"] {
    color-scheme: dark !important;

    --cg-page-a: #0b1013;
    --cg-page-b: #050708;
    --cg-glow-a: rgba(15, 203, 175, .16);
    --cg-glow-b: rgba(40, 116, 194, .13);
    --cg-glow-c: rgba(223, 165, 67, .09);

    --cg-sidebar-glass: rgba(18, 31, 34, .97);
    --cg-sidebar-lower: #070c0e;
    --cg-header-chip: rgba(25, 43, 45, .94);
    --cg-composer-a: rgba(35, 58, 60, .94);
    --cg-composer-b: rgba(22, 37, 40, .93);
    --cg-user-bubble: rgba(37, 78, 75, .84);

    --cg-border: rgba(136, 221, 201, .17);
    --cg-hover: rgba(107, 207, 184, .10);
    --cg-wallpaper-duration: 32s;
}

html[data-cg-library="legacy"][data-cg-theme="zellige"] body::before {
    background-image:
        conic-gradient(from 22.5deg at 50% 50%,
            rgba(24,184,161,.15) 0deg 45deg,
            rgba(5,12,14,.78) 45deg 50deg,
            rgba(42,111,191,.13) 50deg 90deg,
            rgba(5,12,14,.78) 90deg 95deg,
            rgba(217,157,61,.12) 95deg 135deg,
            rgba(5,12,14,.78) 135deg 140deg,
            rgba(24,184,161,.15) 140deg 180deg,
            rgba(5,12,14,.78) 180deg 185deg,
            rgba(42,111,191,.13) 185deg 225deg,
            rgba(5,12,14,.78) 225deg 230deg,
            rgba(217,157,61,.12) 230deg 270deg,
            rgba(5,12,14,.78) 270deg 275deg,
            rgba(24,184,161,.15) 275deg 315deg,
            rgba(5,12,14,.78) 315deg 320deg,
            rgba(42,111,191,.13) 320deg 360deg),
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.08) 0 3px,
            transparent 4px 100%),
        conic-gradient(from 45deg at 25% 25%,
            transparent 0 12.5%,
            rgba(255,255,255,.045) 12.8% 14%,
            transparent 14.3% 100%),
        conic-gradient(from 45deg at 75% 75%,
            transparent 0 12.5%,
            rgba(255,255,255,.035) 12.8% 14%,
            transparent 14.3% 100%);

    background-size:
        96px 96px,
        96px 96px,
        96px 96px,
        96px 96px;

    background-position:
        0 0,
        0 0,
        0 0,
        48px 48px;

    background-repeat: repeat;
}

html[data-cg-library="legacy"][data-cg-theme="zellige"] body::after {
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0 31px,
            rgba(255,255,255,.020) 32px,
            transparent 33px 64px),
        repeating-linear-gradient(-45deg,
            transparent 0 31px,
            rgba(255,255,255,.016) 32px,
            transparent 33px 64px);

    background-size: 96px 96px, 96px 96px;
    background-position: 0 0, 0 0;
    background-repeat: repeat;
}

html[data-cg-library="legacy"][data-cg-theme="circuitbloom"] {
    color-scheme: dark !important;

    --cg-page-a: #05100d;
    --cg-page-b: #020806;
    --cg-glow-a: rgba(0, 232, 161, .17);
    --cg-glow-b: rgba(42, 142, 255, .13);
    --cg-glow-c: rgba(116, 255, 210, .10);

    --cg-sidebar-glass: rgba(8, 29, 23, .97);
    --cg-sidebar-lower: #030b08;
    --cg-header-chip: rgba(12, 42, 34, .94);
    --cg-composer-a: rgba(18, 58, 47, .94);
    --cg-composer-b: rgba(10, 36, 29, .93);
    --cg-user-bubble: rgba(17, 82, 63, .84);

    --cg-border: rgba(113, 237, 198, .18);
    --cg-hover: rgba(84, 222, 177, .11);
    --cg-wallpaper-duration: 27s;
}

html[data-cg-library="legacy"][data-cg-theme="circuitbloom"] body::before {
    background-image:
        linear-gradient(90deg,
            transparent 0 12px,
            rgba(39,221,162,.085) 12px 14px,
            transparent 14px 50px),
        linear-gradient(0deg,
            transparent 0 18px,
            rgba(39,221,162,.070) 18px 20px,
            transparent 20px 64px),
        linear-gradient(90deg,
            transparent 0 38px,
            rgba(71,153,255,.060) 38px 40px,
            transparent 40px 72px),
        linear-gradient(0deg,
            transparent 0 42px,
            rgba(71,153,255,.050) 42px 44px,
            transparent 44px 80px),
        radial-gradient(circle at 13px 19px,
            rgba(118,255,207,.20) 0 3px,
            rgba(7,20,16,.95) 4px 5px,
            transparent 6px),
        radial-gradient(circle at 40px 43px,
            rgba(101,170,255,.17) 0 2px,
            rgba(7,20,16,.95) 3px 4px,
            transparent 5px),
        conic-gradient(from 45deg at 50% 50%,
            transparent 0 12%,
            rgba(116,255,208,.045) 13% 14%,
            transparent 15% 37%,
            rgba(116,255,208,.035) 38% 39%,
            transparent 40% 100%);

    background-size:
        64px 64px,
        64px 64px,
        80px 80px,
        80px 80px,
        64px 64px,
        80px 80px,
        160px 160px;

    background-position:
        0 0,
        0 0,
        19px 11px,
        19px 11px,
        0 0,
        19px 11px,
        0 0;

    background-repeat: repeat;
}

html[data-cg-library="legacy"][data-cg-theme="circuitbloom"] body::after {
    background-image:
        radial-gradient(circle at 25% 30%,
            rgba(0,238,166,.13) 0 2%,
            transparent 18%),
        radial-gradient(circle at 75% 65%,
            rgba(58,139,255,.11) 0 2%,
            transparent 20%),
        repeating-linear-gradient(135deg,
            transparent 0 47px,
            rgba(255,255,255,.018) 48px,
            transparent 49px 96px);

    background-size: 100% 100%, 100% 100%, 136px 136px;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
}

html[data-cg-library="legacy"][data-cg-theme="celestialorrery"] {
    color-scheme: dark !important;

    --cg-page-a: #080b16;
    --cg-page-b: #03050b;
    --cg-glow-a: rgba(65, 117, 255, .16);
    --cg-glow-b: rgba(163, 102, 255, .13);
    --cg-glow-c: rgba(225, 188, 98, .09);

    --cg-sidebar-glass: rgba(16, 20, 37, .97);
    --cg-sidebar-lower: #050711;
    --cg-header-chip: rgba(24, 30, 52, .94);
    --cg-composer-a: rgba(35, 43, 71, .94);
    --cg-composer-b: rgba(21, 27, 46, .93);
    --cg-user-bubble: rgba(44, 56, 100, .84);

    --cg-border: rgba(166, 183, 239, .17);
    --cg-hover: rgba(145, 164, 224, .10);
    --cg-wallpaper-duration: 34s;
}

html[data-cg-library="legacy"][data-cg-theme="celestialorrery"] body::before {
    background-image:
        repeating-radial-gradient(circle at 50% 50%,
            transparent 0 34px,
            rgba(219,193,120,.075) 35px 36px,
            transparent 37px 58px,
            rgba(115,151,255,.060) 59px 60px,
            transparent 61px 86px),
        repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg 13deg,
            rgba(217,192,123,.055) 13.5deg 14deg,
            transparent 14.5deg 29deg),
        radial-gradient(circle at 63% 31%,
            rgba(245,214,130,.26) 0 4px,
            rgba(245,214,130,.08) 5px 12px,
            transparent 13px),
        radial-gradient(circle at 34% 70%,
            rgba(104,151,255,.24) 0 3px,
            rgba(104,151,255,.07) 4px 10px,
            transparent 11px),
        radial-gradient(circle at 79% 64%,
            rgba(189,119,255,.22) 0 2px,
            rgba(189,119,255,.06) 3px 9px,
            transparent 10px),
        radial-gradient(circle at 50% 50%,
            transparent 0 18%,
            rgba(255,255,255,.040) 18.5% 19%,
            transparent 19.5% 37%,
            rgba(255,255,255,.028) 37.5% 38%,
            transparent 38.5%);

    background-size:
        82vmin 82vmin,
        82vmin 82vmin,
        82vmin 82vmin,
        82vmin 82vmin,
        82vmin 82vmin,
        82vmin 82vmin;

    background-position: center;
    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="celestialorrery"] body::after {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgba(121,162,255,.38) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgba(225,187,107,.32) 0 1px, transparent 1.3px);

    background-size: 97px 97px, 157px 157px, 223px 223px;
    background-position: 11px 17px, 53px 29px, 101px 73px;
    background-repeat: repeat;
}

html[data-cg-library="legacy"][data-cg-theme="baroquegold"] {
    color-scheme: dark !important;

    --cg-page-a: #12100b;
    --cg-page-b: #060604;
    --cg-glow-a: rgba(218, 174, 76, .14);
    --cg-glow-b: rgba(153, 93, 54, .09);
    --cg-glow-c: rgba(239, 205, 121, .07);

    --cg-sidebar-glass: rgba(31, 28, 21, .97);
    --cg-sidebar-lower: #0b0a07;
    --cg-header-chip: rgba(42, 37, 28, .94);
    --cg-composer-a: rgba(58, 51, 38, .94);
    --cg-composer-b: rgba(35, 31, 24, .93);
    --cg-user-bubble: rgba(79, 65, 43, .84);

    --cg-border: rgba(228, 195, 119, .18);
    --cg-hover: rgba(216, 180, 98, .10);
    --cg-wallpaper-duration: 38s;
}

html[data-cg-library="legacy"][data-cg-theme="baroquegold"] body::before {
    background-image:
        repeating-conic-gradient(from 0deg at 50% 100%,
            rgba(222,185,99,.10) 0deg 6deg,
            transparent 6.5deg 14deg,
            rgba(222,185,99,.055) 14.5deg 17deg,
            transparent 17.5deg 28deg),
        radial-gradient(ellipse at 50% 100%,
            transparent 0 30px,
            rgba(222,185,99,.075) 31px 32px,
            transparent 33px 46px,
            rgba(222,185,99,.050) 47px 48px,
            transparent 49px),
        radial-gradient(ellipse at 0% 100%,
            transparent 0 26px,
            rgba(186,143,70,.050) 27px 28px,
            transparent 29px),
        radial-gradient(ellipse at 100% 100%,
            transparent 0 26px,
            rgba(186,143,70,.050) 27px 28px,
            transparent 29px);

    background-size: 160px 100px, 160px 100px, 160px 100px, 160px 100px;
    background-position: 0 0, 0 0, 80px 50px, 80px 50px;
    background-repeat: repeat;
}

html[data-cg-library="legacy"][data-cg-theme="baroquegold"] body::after {
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0 55px,
            rgba(240,211,142,.022) 56px,
            transparent 57px 112px),
        repeating-linear-gradient(-45deg,
            transparent 0 55px,
            rgba(240,211,142,.018) 56px,
            transparent 57px 112px),
        radial-gradient(circle at 50% 50%, rgba(255,226,158,.08), transparent 48%);

    background-size: 112px 112px, 112px 112px, 100% 100%;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="opalscales"] {
    color-scheme: dark !important;

    --cg-page-a: #0a0c16;
    --cg-page-b: #04050a;
    --cg-glow-a: rgba(77, 190, 255, .16);
    --cg-glow-b: rgba(220, 91, 255, .15);
    --cg-glow-c: rgba(74, 235, 182, .11);

    --cg-sidebar-glass: rgba(19, 22, 38, .97);
    --cg-sidebar-lower: #070812;
    --cg-header-chip: rgba(29, 33, 55, .94);
    --cg-composer-a: rgba(43, 48, 75, .94);
    --cg-composer-b: rgba(26, 30, 48, .93);
    --cg-user-bubble: rgba(59, 63, 103, .84);

    --cg-border: rgba(178, 194, 244, .18);
    --cg-hover: rgba(158, 177, 232, .11);
    --cg-wallpaper-duration: 29s;
}

html[data-cg-library="legacy"][data-cg-theme="opalscales"] body::before {
    background-image:
        radial-gradient(circle at 50% 0%,
            transparent 0 31px,
            rgba(89,199,255,.12) 32px 33px,
            rgba(95,125,255,.055) 34px 41px,
            transparent 42px),
        radial-gradient(circle at 0% 0%,
            transparent 0 31px,
            rgba(224,101,255,.10) 32px 33px,
            rgba(255,126,187,.045) 34px 41px,
            transparent 42px),
        radial-gradient(circle at 100% 0%,
            transparent 0 31px,
            rgba(77,235,184,.10) 32px 33px,
            rgba(109,255,217,.042) 34px 41px,
            transparent 42px),
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.025),
            transparent 62%);

    background-size: 84px 84px, 84px 84px, 84px 84px, 100% 100%;
    background-position: 0 42px, 42px 0, 42px 42px, 0 0;
    background-repeat: repeat, repeat, repeat, no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="opalscales"] body::after {
    background-image:
        linear-gradient(120deg,
            transparent 0 28%,
            rgba(255,255,255,.045) 34%,
            transparent 40% 100%),
        linear-gradient(60deg,
            transparent 0 58%,
            rgba(165,119,255,.035) 64%,
            transparent 70% 100%);

    background-size: 240px 240px, 310px 310px;
    background-position: 0 0, 80px 40px;
    background-repeat: repeat;
}

html[data-cg-library="legacy"][data-cg-theme="neonlabyrinth"] {
    color-scheme: dark !important;

    --cg-page-a: #080a10;
    --cg-page-b: #030407;
    --cg-glow-a: rgba(0, 214, 255, .15);
    --cg-glow-b: rgba(162, 78, 255, .14);
    --cg-glow-c: rgba(255, 80, 166, .10);

    --cg-sidebar-glass: rgba(17, 20, 31, .97);
    --cg-sidebar-lower: #06070c;
    --cg-header-chip: rgba(26, 30, 45, .94);
    --cg-composer-a: rgba(39, 44, 62, .94);
    --cg-composer-b: rgba(24, 28, 40, .93);
    --cg-user-bubble: rgba(52, 56, 82, .84);

    --cg-border: rgba(161, 187, 235, .18);
    --cg-hover: rgba(143, 165, 220, .11);
    --cg-wallpaper-duration: 31s;
}

html[data-cg-library="legacy"][data-cg-theme="neonlabyrinth"] body::before {
    background-image:
        conic-gradient(from 0deg at 25% 25%,
            rgba(0,214,255,.10) 0 25%,
            transparent 25% 50%,
            rgba(162,78,255,.09) 50% 75%,
            transparent 75% 100%),
        conic-gradient(from 180deg at 75% 75%,
            rgba(255,80,166,.08) 0 25%,
            transparent 25% 50%,
            rgba(0,214,255,.07) 50% 75%,
            transparent 75% 100%),
        linear-gradient(90deg,
            transparent 0 16px,
            rgba(255,255,255,.028) 16px 18px,
            transparent 18px 46px),
        linear-gradient(0deg,
            transparent 0 16px,
            rgba(255,255,255,.024) 16px 18px,
            transparent 18px 46px);

    background-size: 92px 92px, 92px 92px, 46px 46px, 46px 46px;
    background-position: 0 0, 46px 46px, 0 0, 0 0;
    background-repeat: repeat;
}

html[data-cg-library="legacy"][data-cg-theme="neonlabyrinth"] body::after {
    background-image:
        repeating-conic-gradient(from 45deg at 50% 50%,
            transparent 0deg 43deg,
            rgba(127,180,255,.035) 44deg 46deg,
            transparent 47deg 89deg),
        radial-gradient(circle at 50% 50%,
            transparent 0 25%,
            rgba(255,255,255,.028) 25.5% 26%,
            transparent 26.5% 50%);

    background-size: 184px 184px, 184px 184px;
    background-position: 0 0, 0 0;
    background-repeat: repeat;
}

@keyframes cgIllustrationDriftA {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1.10) rotate(-2deg);
    }
    50% {
        transform: translate3d(3%, 2%, 0) scale(1.15) rotate(3deg);
    }
    100% {
        transform: translate3d(-1%, 4%, 0) scale(1.11) rotate(6deg);
    }
}

@keyframes cgIllustrationDriftB {
    0% {
        transform: translate3d(3%, 2%, 0) scale(1.08) rotate(4deg);
        opacity: .56;
    }
    50% {
        transform: translate3d(-3%, -2%, 0) scale(1.13) rotate(-3deg);
        opacity: .76;
    }
    100% {
        transform: translate3d(2%, -4%, 0) scale(1.09) rotate(-7deg);
        opacity: .63;
    }
}

@keyframes cgMatrixRainA {
    0% {
        transform: translate3d(0, -8%, 0) scale(1.08);
        opacity: .62;
    }
    50% {
        transform: translate3d(0, 2%, 0) scale(1.11);
        opacity: .85;
    }
    100% {
        transform: translate3d(0, 10%, 0) scale(1.09);
        opacity: .68;
    }
}

@keyframes cgMatrixRainB {
    0% {
        transform: translate3d(0, 8%, 0) scale(1.05);
        opacity: .45;
    }
    50% {
        transform: translate3d(0, -3%, 0) scale(1.10);
        opacity: .74;
    }
    100% {
        transform: translate3d(0, -10%, 0) scale(1.06);
        opacity: .52;
    }
}

@keyframes cgWaveSwellA {
    0% {
        transform: translate3d(-7%, 0, 0) scale(1.11) rotate(-2deg);
    }
    50% {
        transform: translate3d(2%, -2%, 0) scale(1.17) rotate(2deg);
    }
    100% {
        transform: translate3d(8%, 1%, 0) scale(1.12) rotate(-1deg);
    }
}

@keyframes cgWaveSwellB {
    0% {
        transform: translate3d(6%, 2%, 0) scale(1.08);
        opacity: .56;
    }
    50% {
        transform: translate3d(-4%, -2%, 0) scale(1.14);
        opacity: .74;
    }
    100% {
        transform: translate3d(2%, 3%, 0) scale(1.09);
        opacity: .62;
    }
}

html[data-cg-library="legacy"][data-cg-theme="cybercity"] body::before,
html[data-cg-library="legacy"][data-cg-theme="gearworks"] body::before,
html[data-cg-library="legacy"][data-cg-theme="rosekaleido"] body::before,
html[data-cg-library="legacy"][data-cg-theme="starviewport"] body::before,
html[data-cg-library="legacy"][data-cg-theme="glassripples"] body::before {
    animation-name: cgIllustrationDriftA !important;
}

html[data-cg-library="legacy"][data-cg-theme="cybercity"] body::after,
html[data-cg-library="legacy"][data-cg-theme="gearworks"] body::after,
html[data-cg-library="legacy"][data-cg-theme="rosekaleido"] body::after,
html[data-cg-library="legacy"][data-cg-theme="starviewport"] body::after,
html[data-cg-library="legacy"][data-cg-theme="glassripples"] body::after {
    animation-name: cgIllustrationDriftB !important;
}

html[data-cg-library="legacy"][data-cg-theme="ukiyowave"] body::before {
    animation-name: cgWaveSwellA !important;
}

html[data-cg-library="legacy"][data-cg-theme="ukiyowave"] body::after {
    animation-name: cgWaveSwellB !important;
}

html[data-cg-library="legacy"][data-cg-theme="matrixrain"] body::before {
    animation-name: cgMatrixRainA !important;
}

html[data-cg-library="legacy"][data-cg-theme="matrixrain"] body::after {
    animation-name: cgMatrixRainB !important;
}

html[data-cg-library="legacy"][data-cg-theme="cybercity"] {
    color-scheme: dark !important;

    --cg-page-a: #080b16;
    --cg-page-b: #02030a;
    --cg-glow-a: rgba(41, 171, 255, .17);
    --cg-glow-b: rgba(219, 54, 255, .16);
    --cg-glow-c: rgba(255, 91, 166, .11);

    --cg-sidebar-glass: rgba(16, 20, 38, .97);
    --cg-sidebar-lower: #050711;
    --cg-header-chip: rgba(26, 31, 55, .94);
    --cg-composer-a: rgba(39, 45, 76, .94);
    --cg-composer-b: rgba(23, 27, 47, .93);
    --cg-user-bubble: rgba(52, 58, 101, .84);

    --cg-border: rgba(170, 191, 255, .18);
    --cg-hover: rgba(145, 170, 255, .11);
    --cg-wallpaper-duration: 24s;
}

html[data-cg-library="legacy"][data-cg-theme="cybercity"] body::before {
    background-image:
        radial-gradient(ellipse at 50% 108%, rgba(0,225,255,.12), transparent 42%),
        radial-gradient(circle at 18% 28%, rgba(77,130,255,.18), transparent 24%),
        radial-gradient(circle at 80% 22%, rgba(221,66,255,.16), transparent 20%),
        linear-gradient(to top,
            rgba(8,16,36,.96) 0 22%,
            rgba(8,16,36,.78) 22% 40%,
            transparent 40%),
        linear-gradient(90deg,
            transparent 0 2%, rgba(17,28,56,.95) 2% 6%, transparent 6% 9%, rgba(17,28,56,.94) 9% 16%,
            transparent 16% 18%, rgba(18,31,62,.97) 18% 24%, transparent 24% 28%, rgba(13,22,48,.95) 28% 35%,
            transparent 35% 38%, rgba(19,34,70,.96) 38% 46%, transparent 46% 49%, rgba(14,24,54,.96) 49% 58%,
            transparent 58% 60%, rgba(18,31,60,.95) 60% 66%, transparent 66% 70%, rgba(11,20,42,.96) 70% 78%,
            transparent 78% 81%, rgba(20,37,73,.96) 81% 88%, transparent 88% 92%, rgba(14,25,49,.95) 92% 98%, transparent 98%),
        repeating-linear-gradient(90deg,
            transparent 0 3px, rgba(255,196,86,.05) 3px 4px, transparent 4px 10px),
        repeating-linear-gradient(0deg,
            transparent 0 7px, rgba(98,220,255,.05) 7px 8px, transparent 8px 14px);

    background-size:
        100% 100%,
        60% 60%,
        55% 55%,
        100% 100%,
        100% 100%,
        18% 18%,
        22% 20%;

    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        0 100%,
        0 74%,
        0 70%;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat-x,
        repeat-x;
}

html[data-cg-library="legacy"][data-cg-theme="cybercity"] body::after {
    background-image:
        linear-gradient(to top,
            rgba(0,0,0,.58) 0 16%,
            transparent 16%),
        linear-gradient(90deg,
            transparent 0 4%, rgba(7,14,30,.96) 4% 11%, transparent 11% 13%, rgba(8,16,32,.95) 13% 19%,
            transparent 19% 22%, rgba(8,14,30,.95) 22% 30%, transparent 30% 33%, rgba(10,17,35,.96) 33% 40%,
            transparent 40% 43%, rgba(8,14,29,.95) 43% 51%, transparent 51% 55%, rgba(9,16,31,.95) 55% 64%,
            transparent 64% 67%, rgba(9,15,31,.95) 67% 74%, transparent 74% 77%, rgba(10,16,34,.95) 77% 85%,
            transparent 85% 89%, rgba(8,13,27,.95) 89% 96%, transparent 96%),
        repeating-linear-gradient(0deg,
            transparent 0 10px, rgba(255,104,190,.035) 10px 11px, transparent 11px 18px),
        linear-gradient(180deg,
            rgba(255,255,255,.04),
            transparent 48%);

    background-size:
        100% 100%,
        100% 100%,
        16% 22%,
        100% 100%;

    background-position:
        0 0,
        0 100%,
        0 79%,
        0 0;

    background-repeat:
        no-repeat,
        no-repeat,
        repeat-x,
        no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="ukiyowave"] {
    color-scheme: dark !important;

    --cg-page-a: #0a1321;
    --cg-page-b: #03070c;
    --cg-glow-a: rgba(78, 169, 255, .15);
    --cg-glow-b: rgba(232, 232, 255, .10);
    --cg-glow-c: rgba(72, 209, 194, .08);

    --cg-sidebar-glass: rgba(12, 25, 41, .97);
    --cg-sidebar-lower: #040b13;
    --cg-header-chip: rgba(18, 37, 58, .94);
    --cg-composer-a: rgba(27, 52, 77, .94);
    --cg-composer-b: rgba(15, 32, 50, .93);
    --cg-user-bubble: rgba(28, 69, 97, .84);

    --cg-border: rgba(156, 201, 238, .18);
    --cg-hover: rgba(132, 187, 229, .11);
    --cg-wallpaper-duration: 22s;
}

html[data-cg-library="legacy"][data-cg-theme="ukiyowave"] body::before {
    background-image:
        radial-gradient(circle at 76% 22%, rgba(248,242,213,.18) 0 5%, transparent 5.6%),
        radial-gradient(circle at 76% 22%, rgba(248,242,213,.04) 0 11%, transparent 11.4%),
        radial-gradient(circle at 18% 108%,
            transparent 0 8%,
            rgba(204,234,255,.13) 8.3% 8.8%,
            transparent 9.1% 16%,
            rgba(204,234,255,.11) 16.3% 16.8%,
            transparent 17.1% 24%,
            rgba(204,234,255,.09) 24.3% 24.8%,
            transparent 25.1%),
        radial-gradient(circle at 38% 108%,
            transparent 0 10%,
            rgba(168,214,255,.13) 10.3% 10.8%,
            transparent 11.1% 18%,
            rgba(168,214,255,.10) 18.3% 18.8%,
            transparent 19.1% 27%,
            rgba(168,214,255,.08) 27.3% 27.8%,
            transparent 28.1%),
        radial-gradient(circle at 62% 108%,
            transparent 0 9%,
            rgba(210,240,255,.13) 9.3% 9.8%,
            transparent 10.1% 17%,
            rgba(210,240,255,.10) 17.3% 17.8%,
            transparent 18.1% 25%,
            rgba(210,240,255,.08) 25.3% 25.8%,
            transparent 26.1%),
        radial-gradient(circle at 82% 108%,
            transparent 0 11%,
            rgba(190,228,255,.12) 11.3% 11.8%,
            transparent 12.1% 19%,
            rgba(190,228,255,.09) 19.3% 19.8%,
            transparent 20.1%),
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 55%);

    background-size:
        100% 100%,
        100% 100%,
        38% 32%,
        42% 34%,
        42% 34%,
        34% 28%,
        100% 100%;

    background-position:
        0 0,
        0 0,
        -2% 100%,
        18% 100%,
        46% 100%,
        74% 100%,
        0 0;

    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="ukiyowave"] body::after {
    background-image:
        conic-gradient(from 180deg at 21% 77%,
            transparent 0deg 26deg,
            rgba(255,255,255,.16) 27deg 35deg,
            transparent 36deg 360deg),
        conic-gradient(from 180deg at 42% 71%,
            transparent 0deg 28deg,
            rgba(255,255,255,.15) 29deg 37deg,
            transparent 38deg 360deg),
        conic-gradient(from 180deg at 65% 76%,
            transparent 0deg 30deg,
            rgba(255,255,255,.15) 31deg 39deg,
            transparent 40deg 360deg),
        radial-gradient(circle at 22% 79%, rgba(255,255,255,.075) 0 1.5%, transparent 1.8%),
        radial-gradient(circle at 43% 73%, rgba(255,255,255,.075) 0 1.5%, transparent 1.8%),
        radial-gradient(circle at 66% 78%, rgba(255,255,255,.075) 0 1.5%, transparent 1.8%);

    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="gearworks"] {
    color-scheme: dark !important;

    --cg-page-a: #101217;
    --cg-page-b: #040507;
    --cg-glow-a: rgba(120, 161, 222, .12);
    --cg-glow-b: rgba(218, 181, 112, .10);
    --cg-glow-c: rgba(255, 255, 255, .05);

    --cg-sidebar-glass: rgba(28, 31, 38, .97);
    --cg-sidebar-lower: #0a0c10;
    --cg-header-chip: rgba(40, 44, 53, .94);
    --cg-composer-a: rgba(55, 61, 72, .94);
    --cg-composer-b: rgba(33, 37, 46, .93);
    --cg-user-bubble: rgba(72, 78, 90, .84);

    --cg-border: rgba(187, 198, 212, .16);
    --cg-hover: rgba(162, 174, 189, .10);
    --cg-wallpaper-duration: 28s;
}

html[data-cg-library="legacy"][data-cg-theme="gearworks"] body::before {
    background-image:
        repeating-conic-gradient(from 0deg at 28% 58%,
            rgba(201,214,229,.16) 0deg 7deg,
            rgba(57,64,77,.88) 7.5deg 15deg),
        radial-gradient(circle at 28% 58%,
            transparent 0 6%,
            rgba(210,220,233,.15) 6.4% 7.8%,
            rgba(62,69,81,.86) 8.2% 14.5%,
            rgba(210,220,233,.14) 14.9% 16.1%,
            transparent 16.5%),
        repeating-conic-gradient(from 10deg at 58% 44%,
            rgba(219,190,127,.16) 0deg 8deg,
            rgba(63,57,46,.90) 8.4deg 16deg),
        radial-gradient(circle at 58% 44%,
            transparent 0 5%,
            rgba(224,194,130,.15) 5.4% 6.8%,
            rgba(67,60,49,.86) 7.2% 12.8%,
            rgba(224,194,130,.13) 13.2% 14.4%,
            transparent 14.8%),
        repeating-conic-gradient(from 4deg at 74% 72%,
            rgba(177,188,204,.14) 0deg 6deg,
            rgba(55,61,74,.90) 6.4deg 12deg),
        radial-gradient(circle at 74% 72%,
            transparent 0 4%,
            rgba(190,200,214,.12) 4.3% 5.4%,
            rgba(58,65,79,.88) 5.8% 10.1%,
            rgba(190,200,214,.12) 10.5% 11.4%,
            transparent 11.8%),
        repeating-linear-gradient(135deg,
            transparent 0 32px, rgba(255,255,255,.014) 33px, transparent 34px 64px);

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        160px 160px;

    background-position: 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

html[data-cg-library="legacy"][data-cg-theme="gearworks"] body::after {
    background-image:
        linear-gradient(24deg, transparent 0 49%, rgba(255,255,255,.028) 50%, transparent 51% 100%),
        linear-gradient(114deg, transparent 0 49%, rgba(224,194,130,.025) 50%, transparent 51% 100%),
        radial-gradient(circle at 43% 50%, rgba(255,255,255,.03), transparent 28%),
        radial-gradient(circle at 68% 58%, rgba(255,255,255,.025), transparent 22%);

    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="rosekaleido"] {
    color-scheme: dark !important;

    --cg-page-a: #0b0815;
    --cg-page-b: #030209;
    --cg-glow-a: rgba(83, 176, 255, .18);
    --cg-glow-b: rgba(217, 79, 255, .18);
    --cg-glow-c: rgba(255, 172, 73, .12);

    --cg-sidebar-glass: rgba(20, 16, 37, .97);
    --cg-sidebar-lower: #07050f;
    --cg-header-chip: rgba(33, 25, 54, .94);
    --cg-composer-a: rgba(50, 37, 77, .94);
    --cg-composer-b: rgba(29, 22, 48, .93);
    --cg-user-bubble: rgba(68, 46, 103, .84);

    --cg-border: rgba(191, 172, 255, .18);
    --cg-hover: rgba(176, 149, 255, .11);
    --cg-wallpaper-duration: 27s;
}

html[data-cg-library="legacy"][data-cg-theme="rosekaleido"] body::before {
    background-image:
        radial-gradient(circle at 50% 50%,
            transparent 0 4%,
            rgba(255,255,255,.10) 4.4% 5.2%,
            transparent 5.6% 12%,
            rgba(255,255,255,.08) 12.4% 13.1%,
            transparent 13.5% 21%,
            rgba(255,255,255,.05) 21.4% 22.1%,
            transparent 22.5%),
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(74,188,255,.20) 0deg 8deg,
            rgba(8,7,18,.88) 8.5deg 10.4deg,
            rgba(220,86,255,.19) 10.9deg 19deg,
            rgba(8,7,18,.88) 19.5deg 21.4deg,
            rgba(255,93,157,.16) 21.9deg 29deg,
            rgba(8,7,18,.88) 29.5deg 31.4deg,
            rgba(255,187,72,.15) 31.9deg 40deg),
        repeating-radial-gradient(circle at 50% 50%,
            transparent 0 40px,
            rgba(255,255,255,.04) 41px 42px,
            transparent 43px 78px),
        conic-gradient(from 15deg at 50% 50%,
            transparent 0 12%,
            rgba(255,255,255,.05) 12.6% 13.4%,
            transparent 14% 36%,
            rgba(255,255,255,.035) 36.6% 37.4%,
            transparent 38% 100%);

    background-size:
        84vmin 84vmin,
        84vmin 84vmin,
        84vmin 84vmin,
        84vmin 84vmin;

    background-position: center;
    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="rosekaleido"] body::after {
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.055), transparent 38%),
        radial-gradient(circle at 18% 24%, rgba(74,188,255,.11), transparent 18%),
        radial-gradient(circle at 82% 70%, rgba(220,86,255,.10), transparent 20%),
        radial-gradient(circle at 70% 24%, rgba(255,187,72,.07), transparent 16%);

    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="matrixrain"] {
    color-scheme: dark !important;

    --cg-page-a: #040905;
    --cg-page-b: #010201;
    --cg-glow-a: rgba(49, 255, 131, .14);
    --cg-glow-b: rgba(125, 255, 181, .10);
    --cg-glow-c: rgba(27, 148, 73, .08);

    --cg-sidebar-glass: rgba(8, 20, 10, .97);
    --cg-sidebar-lower: #020702;
    --cg-header-chip: rgba(13, 31, 15, .94);
    --cg-composer-a: rgba(18, 42, 20, .94);
    --cg-composer-b: rgba(10, 26, 11, .93);
    --cg-user-bubble: rgba(19, 58, 22, .84);

    --cg-border: rgba(127, 255, 170, .16);
    --cg-hover: rgba(108, 241, 150, .10);
    --cg-wallpaper-duration: 13s;
}

html[data-cg-library="legacy"][data-cg-theme="matrixrain"] body::before {
    background-image:
        repeating-linear-gradient(180deg,
            rgba(170,255,200,.12) 0 2px,
            transparent 2px 10px,
            rgba(83,255,142,.08) 10px 11px,
            transparent 11px 22px),
        repeating-linear-gradient(180deg,
            transparent 0 5px,
            rgba(64,255,127,.12) 5px 6px,
            transparent 6px 14px,
            rgba(146,255,186,.06) 14px 15px,
            transparent 15px 26px),
        linear-gradient(90deg,
            transparent 0 2%, rgba(67,255,134,.09) 2% 3%, transparent 3% 8%, rgba(118,255,175,.08) 8% 9%,
            transparent 9% 14%, rgba(67,255,134,.08) 14% 15%, transparent 15% 22%, rgba(118,255,175,.08) 22% 23%,
            transparent 23% 30%, rgba(67,255,134,.09) 30% 31%, transparent 31% 37%, rgba(118,255,175,.08) 37% 38%,
            transparent 38% 44%, rgba(67,255,134,.08) 44% 45%, transparent 45% 51%, rgba(118,255,175,.08) 51% 52%,
            transparent 52% 59%, rgba(67,255,134,.09) 59% 60%, transparent 60% 67%, rgba(118,255,175,.08) 67% 68%,
            transparent 68% 76%, rgba(67,255,134,.08) 76% 77%, transparent 77% 84%, rgba(118,255,175,.08) 84% 85%,
            transparent 85% 92%, rgba(67,255,134,.08) 92% 93%, transparent 93% 100%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%);

    background-size:
        3.5% 100%,
        5% 100%,
        100% 100%,
        100% 100%;

    background-position:
        0 0,
        1.5% 0,
        0 0,
        0 0;

    background-repeat:
        repeat-x,
        repeat-x,
        no-repeat,
        no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="matrixrain"] body::after {
    background-image:
        linear-gradient(180deg, rgba(40,255,120,.10), transparent 20%),
        radial-gradient(circle, rgba(197,255,216,.18) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgba(64,255,127,.14) 0 1px, transparent 1.3px);

    background-size:
        100% 100%,
        60px 120px,
        90px 150px;

    background-position:
        0 0,
        14px 7px,
        41px 23px;

    background-repeat:
        no-repeat,
        repeat,
        repeat;
}

html[data-cg-library="legacy"][data-cg-theme="starviewport"] {
    color-scheme: dark !important;

    --cg-page-a: #050713;
    --cg-page-b: #020309;
    --cg-glow-a: rgba(70, 120, 255, .16);
    --cg-glow-b: rgba(160, 94, 255, .14);
    --cg-glow-c: rgba(84, 221, 255, .10);

    --cg-sidebar-glass: rgba(14, 18, 35, .97);
    --cg-sidebar-lower: #050710;
    --cg-header-chip: rgba(22, 29, 50, .94);
    --cg-composer-a: rgba(32, 41, 69, .94);
    --cg-composer-b: rgba(20, 27, 45, .93);
    --cg-user-bubble: rgba(43, 54, 93, .84);

    --cg-border: rgba(169, 182, 233, .17);
    --cg-hover: rgba(146, 163, 221, .11);
    --cg-wallpaper-duration: 25s;
}

html[data-cg-library="legacy"][data-cg-theme="starviewport"] body::before {
    background-image:
        radial-gradient(circle at 50% 50%,
            transparent 0 24%,
            rgba(176,196,229,.10) 24.6% 25.4%,
            rgba(7,10,20,.94) 26% 30.5%,
            rgba(176,196,229,.11) 31% 31.7%,
            transparent 32.1%),
        repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg 16deg,
            rgba(177,198,232,.06) 16.4deg 17.6deg,
            transparent 18deg 45deg),
        radial-gradient(circle at 50% 50%, rgba(67,117,255,.10), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(161,95,255,.08), transparent 20%),
        radial-gradient(circle, rgba(255,255,255,.58) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgba(117,161,255,.34) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgba(171,121,255,.24) 0 1px, transparent 1.3px);

    background-size:
        86vmin 86vmin,
        86vmin 86vmin,
        86vmin 86vmin,
        86vmin 86vmin,
        96px 96px,
        153px 153px,
        223px 223px;

    background-position:
        center,
        center,
        center,
        center,
        11px 17px,
        57px 29px,
        101px 73px;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        repeat;
}

html[data-cg-library="legacy"][data-cg-theme="starviewport"] body::after {
    background-image:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg 3deg,
            rgba(220,230,248,.12) 3.3deg 4.4deg,
            transparent 4.7deg 45deg),
        radial-gradient(circle at 50% 50%, transparent 0 35%, rgba(255,255,255,.03) 35.4% 36%, transparent 36.4%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%);

    background-size: 92vmin 92vmin, 92vmin 92vmin, 100% 100%;
    background-position: center, center, 0 0;
    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="glassripples"] {
    color-scheme: light !important;

    --cg-page-a: #eef9ff;
    --cg-page-b: #dcecf8;
    --cg-glow-a: rgba(98, 191, 255, .16);
    --cg-glow-b: rgba(115, 158, 255, .10);
    --cg-glow-c: rgba(124, 226, 255, .11);

    --cg-sidebar-glass: rgba(241, 248, 253, .98);
    --cg-sidebar-lower: #deecf5;
    --cg-header-chip: rgba(250, 253, 255, .97);
    --cg-composer-a: rgba(252, 254, 255, .98);
    --cg-composer-b: rgba(234, 244, 250, .97);
    --cg-user-bubble: rgba(212, 231, 244, .95);

    --cg-text-primary: #193040;
    --cg-text-secondary: #4b677c;
    --cg-text-tertiary: #7691a7;
    --cg-code-bg: rgba(228, 239, 247, .98);
    --cg-switcher-bg: rgba(250, 253, 255, .98);
    --cg-switcher-text: #193040;
    --cg-border: rgba(43, 92, 124, .12);
    --cg-hover: rgba(62, 126, 168, .07);
    --cg-glass-highlight: rgba(255,255,255,.88);
    --cg-wallpaper-duration: 20s;
}

html[data-cg-library="legacy"][data-cg-theme="glassripples"] body::before {
    background-image:
        radial-gradient(circle at 28% 32%,
            transparent 0 10%,
            rgba(255,255,255,.48) 10.6% 11.2%,
            transparent 11.8% 19%,
            rgba(255,255,255,.30) 19.6% 20.1%,
            transparent 20.7%),
        radial-gradient(circle at 66% 42%,
            transparent 0 8%,
            rgba(255,255,255,.44) 8.5% 9%,
            transparent 9.5% 16%,
            rgba(255,255,255,.28) 16.5% 17%,
            transparent 17.5%),
        radial-gradient(circle at 48% 74%,
            transparent 0 9%,
            rgba(255,255,255,.40) 9.5% 10%,
            transparent 10.5% 18%,
            rgba(255,255,255,.24) 18.5% 19%,
            transparent 19.5%),
        linear-gradient(135deg,
            transparent 0 28%,
            rgba(255,255,255,.24) 34%,
            transparent 40% 100%),
        linear-gradient(45deg,
            transparent 0 54%,
            rgba(255,255,255,.18) 60%,
            transparent 66% 100%);

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        240px 240px,
        320px 320px;

    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        70px 40px;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat;
}

html[data-cg-library="legacy"][data-cg-theme="glassripples"] body::after {
    background-image:
        radial-gradient(circle at 50% 50%, rgba(154,219,255,.16), transparent 44%),
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.12) 0 1px,
            transparent 2px 18px),
        linear-gradient(180deg, rgba(255,255,255,.22), transparent 50%);

    background-size:
        100% 100%,
        210px 210px,
        100% 100%;

    background-position:
        0 0,
        40px 20px,
        0 0;

    background-repeat:
        no-repeat,
        repeat,
        no-repeat;
}

@keyframes cgScenePanA {
    0% {
        transform: translate3d(-5%, -2%, 0) scale(1.11);
    }
    45% {
        transform: translate3d(2%, 1%, 0) scale(1.15);
    }
    100% {
        transform: translate3d(5%, -1%, 0) scale(1.12);
    }
}

@keyframes cgScenePanB {
    0% {
        transform: translate3d(4%, 2%, 0) scale(1.08);
        opacity: .58;
    }
    50% {
        transform: translate3d(-3%, -2%, 0) scale(1.12);
        opacity: .74;
    }
    100% {
        transform: translate3d(2%, 3%, 0) scale(1.09);
        opacity: .62;
    }
}

@keyframes cgSceneWaveA {
    0% {
        transform: translate3d(-8%, 1%, 0) scale(1.12) rotate(-1.5deg);
    }
    50% {
        transform: translate3d(1%, -2%, 0) scale(1.18) rotate(1.2deg);
    }
    100% {
        transform: translate3d(8%, 1%, 0) scale(1.13) rotate(-.8deg);
    }
}

@keyframes cgSceneWaveB {
    0% {
        transform: translate3d(6%, 2%, 0) scale(1.08);
        opacity: .54;
    }
    50% {
        transform: translate3d(-5%, -3%, 0) scale(1.14);
        opacity: .76;
    }
    100% {
        transform: translate3d(3%, 2%, 0) scale(1.09);
        opacity: .60;
    }
}

@keyframes cgSceneMachineryA {
    0% {
        transform: translate3d(-2%, -2%, 0) scale(1.10) rotate(-3deg);
    }
    50% {
        transform: translate3d(2%, 2%, 0) scale(1.14) rotate(4deg);
    }
    100% {
        transform: translate3d(-1%, 3%, 0) scale(1.11) rotate(8deg);
    }
}

@keyframes cgSceneMachineryB {
    0% {
        transform: translate3d(2%, 2%, 0) scale(1.08) rotate(5deg);
        opacity: .56;
    }
    50% {
        transform: translate3d(-2%, -2%, 0) scale(1.12) rotate(-4deg);
        opacity: .72;
    }
    100% {
        transform: translate3d(1%, -3%, 0) scale(1.09) rotate(-9deg);
        opacity: .61;
    }
}

@keyframes cgSceneRainA {
    0% {
        transform: translate3d(-1%, -12%, 0) scale(1.08);
        opacity: .58;
    }
    50% {
        transform: translate3d(1%, 0%, 0) scale(1.10);
        opacity: .85;
    }
    100% {
        transform: translate3d(-1%, 12%, 0) scale(1.09);
        opacity: .66;
    }
}

@keyframes cgSceneRainB {
    0% {
        transform: translate3d(1%, 10%, 0) scale(1.06);
        opacity: .42;
    }
    50% {
        transform: translate3d(-1%, -2%, 0) scale(1.09);
        opacity: .72;
    }
    100% {
        transform: translate3d(1%, -11%, 0) scale(1.07);
        opacity: .50;
    }
}

@keyframes cgSceneGlassA {
    0% {
        transform: translate3d(-4%, -3%, 0) scale(1.10) rotate(-2deg);
    }
    50% {
        transform: translate3d(3%, 2%, 0) scale(1.16) rotate(2deg);
    }
    100% {
        transform: translate3d(-2%, 4%, 0) scale(1.12) rotate(4deg);
    }
}

@keyframes cgSceneGlassB {
    0% {
        transform: translate3d(3%, 2%, 0) scale(1.08) rotate(3deg);
        opacity: .52;
    }
    50% {
        transform: translate3d(-4%, -2%, 0) scale(1.13) rotate(-3deg);
        opacity: .70;
    }
    100% {
        transform: translate3d(2%, -4%, 0) scale(1.09) rotate(-5deg);
        opacity: .58;
    }
}

html[data-cg-library="legacy"][data-cg-theme="neonmegacity"] body::before {
    animation-name: cgScenePanA !important;
}

html[data-cg-library="legacy"][data-cg-theme="neonmegacity"] body::after {
    animation-name: cgScenePanB !important;
}

html[data-cg-library="legacy"][data-cg-theme="greatwaveplus"] body::before {
    animation-name: cgSceneWaveA !important;
}

html[data-cg-library="legacy"][data-cg-theme="greatwaveplus"] body::after {
    animation-name: cgSceneWaveB !important;
}

html[data-cg-library="legacy"][data-cg-theme="gearforge"] body::before {
    animation-name: cgSceneMachineryA !important;
}

html[data-cg-library="legacy"][data-cg-theme="gearforge"] body::after {
    animation-name: cgSceneMachineryB !important;
}

html[data-cg-library="legacy"][data-cg-theme="matrixstorm"] body::before {
    animation-name: cgSceneRainA !important;
}

html[data-cg-library="legacy"][data-cg-theme="matrixstorm"] body::after {
    animation-name: cgSceneRainB !important;
}

html[data-cg-library="legacy"][data-cg-theme="liquidglasspro"] body::before {
    animation-name: cgSceneGlassA !important;
}

html[data-cg-library="legacy"][data-cg-theme="liquidglasspro"] body::after {
    animation-name: cgSceneGlassB !important;
}

html[data-cg-library="legacy"][data-cg-theme="neonmegacity"] {
    color-scheme: dark !important;

    --cg-page-a: #070814;
    --cg-page-b: #020309;

    --cg-glow-a: rgba(26, 179, 255, .19);
    --cg-glow-b: rgba(232, 48, 255, .18);
    --cg-glow-c: rgba(255, 55, 145, .12);

    --cg-sidebar-glass: rgba(15, 18, 36, .97);
    --cg-sidebar-lower: #050611;

    --cg-header-chip: rgba(24, 29, 53, .94);
    --cg-composer-a: rgba(37, 43, 75, .94);
    --cg-composer-b: rgba(22, 26, 46, .93);
    --cg-user-bubble: rgba(49, 57, 101, .84);

    --cg-border: rgba(164, 188, 255, .19);
    --cg-hover: rgba(143, 165, 255, .12);

    --cg-wallpaper-duration: 18s;
}

html[data-cg-library="legacy"][data-cg-theme="neonmegacity"] body::before {
    background-image:

        /* atmospheric moon / neon bloom */
        radial-gradient(circle at 74% 17%,
            rgba(191,218,255,.22) 0 2.8%,
            rgba(113,164,255,.09) 3.2% 8%,
            transparent 13%),

        radial-gradient(ellipse at 50% 69%,
            rgba(0,223,255,.13) 0 10%,
            transparent 42%),

        radial-gradient(ellipse at 76% 58%,
            rgba(238,52,255,.11),
            transparent 34%),

        /* far skyline */
        linear-gradient(90deg,
            transparent 0 1%,
            rgba(18,28,55,.92) 1% 4.5%,
            transparent 4.5% 6%,
            rgba(13,23,48,.94) 6% 9.5%,
            transparent 9.5% 11%,
            rgba(22,35,68,.93) 11% 15%,
            transparent 15% 17%,
            rgba(12,23,49,.94) 17% 20%,
            transparent 20% 22%,
            rgba(24,40,76,.94) 22% 27%,
            transparent 27% 29%,
            rgba(14,25,52,.95) 29% 33%,
            transparent 33% 35%,
            rgba(22,38,75,.96) 35% 40%,
            transparent 40% 42%,
            rgba(12,22,45,.96) 42% 46%,
            transparent 46% 49%,
            rgba(25,41,79,.96) 49% 55%,
            transparent 55% 57%,
            rgba(14,25,50,.95) 57% 61%,
            transparent 61% 64%,
            rgba(23,39,75,.96) 64% 70%,
            transparent 70% 72%,
            rgba(15,26,52,.95) 72% 76%,
            transparent 76% 79%,
            rgba(26,43,82,.96) 79% 84%,
            transparent 84% 87%,
            rgba(15,26,51,.95) 87% 92%,
            transparent 92% 94%,
            rgba(22,36,70,.96) 94% 99%,
            transparent 99%),

        /* distance windows */
        repeating-linear-gradient(90deg,
            transparent 0 7px,
            rgba(91,218,255,.045) 7px 8px,
            transparent 8px 15px),

        repeating-linear-gradient(0deg,
            transparent 0 9px,
            rgba(255,90,196,.040) 9px 10px,
            transparent 10px 18px),

        /* perspective road fan */
        conic-gradient(from 180deg at 50% 71%,
            transparent 0deg 3deg,
            rgba(41,192,255,.060) 3.5deg 4.2deg,
            transparent 4.7deg 13deg,
            rgba(231,77,255,.050) 13.5deg 14.2deg,
            transparent 14.7deg 23deg,
            rgba(41,192,255,.050) 23.5deg 24.2deg,
            transparent 24.7deg 180deg),

        /* horizontal perspective stripes */
        repeating-linear-gradient(0deg,
            transparent 0 19px,
            rgba(55,159,255,.040) 20px 21px,
            transparent 22px 42px);

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 65%,
        19% 36%,
        23% 40%,
        100% 32%,
        100% 32%;

    background-position:
        0 0,
        0 0,
        0 0,
        0 55%,
        0 61%,
        0 60%,
        0 100%,
        0 100%;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat-x,
        repeat-x,
        no-repeat,
        repeat-x;
}

html[data-cg-library="legacy"][data-cg-theme="neonmegacity"] body::after {
    background-image:

        /* foreground towers */
        linear-gradient(90deg,
            transparent 0 3%,
            rgba(5,10,24,.98) 3% 11%,
            transparent 11% 13%,
            rgba(6,12,27,.98) 13% 21%,
            transparent 21% 25%,
            rgba(4,9,22,.99) 25% 34%,
            transparent 34% 38%,
            rgba(7,13,30,.99) 38% 46%,
            transparent 46% 51%,
            rgba(4,9,23,.99) 51% 61%,
            transparent 61% 65%,
            rgba(6,12,28,.99) 65% 75%,
            transparent 75% 79%,
            rgba(5,10,24,.99) 79% 88%,
            transparent 88% 92%,
            rgba(7,13,30,.98) 92% 99%,
            transparent 99%),

        /* window matrix */
        repeating-linear-gradient(90deg,
            transparent 0 10px,
            rgba(0,231,255,.080) 10px 12px,
            transparent 12px 22px),

        repeating-linear-gradient(0deg,
            transparent 0 11px,
            rgba(255,63,186,.062) 11px 13px,
            transparent 13px 24px),

        /* billboard slashes */
        linear-gradient(112deg,
            transparent 0 23%,
            rgba(0,238,255,.12) 24% 25%,
            transparent 26% 54%,
            rgba(255,60,194,.10) 55% 56%,
            transparent 57% 100%),

        /* street reflection */
        linear-gradient(180deg,
            transparent 0 70%,
            rgba(0,218,255,.06) 76%,
            rgba(255,42,181,.05) 86%,
            transparent 100%);

    background-size:
        100% 100%,
        22% 47%,
        24% 48%,
        100% 100%,
        100% 100%;

    background-position:
        0 100%,
        0 69%,
        0 68%,
        0 0,
        0 0;

    background-repeat:
        no-repeat,
        repeat-x,
        repeat-x,
        no-repeat,
        no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="greatwaveplus"] {
    color-scheme: dark !important;

    --cg-page-a: #091523;
    --cg-page-b: #02070d;

    --cg-glow-a: rgba(72, 165, 255, .16);
    --cg-glow-b: rgba(244, 237, 207, .10);
    --cg-glow-c: rgba(67, 207, 191, .08);

    --cg-sidebar-glass: rgba(11, 26, 42, .97);
    --cg-sidebar-lower: #040c14;

    --cg-header-chip: rgba(17, 39, 61, .94);
    --cg-composer-a: rgba(25, 55, 80, .94);
    --cg-composer-b: rgba(14, 34, 52, .93);
    --cg-user-bubble: rgba(27, 72, 101, .84);

    --cg-border: rgba(152, 202, 239, .18);
    --cg-hover: rgba(126, 186, 230, .11);

    --cg-wallpaper-duration: 19s;
}

html[data-cg-library="legacy"][data-cg-theme="greatwaveplus"] body::before {
    background-image:

        /* pale sun / moon */
        radial-gradient(circle at 79% 20%,
            rgba(248,239,207,.20) 0 4.8%,
            rgba(248,239,207,.055) 5.2% 10%,
            transparent 10.5%),

        /* mountain silhouette */
        conic-gradient(from 315deg at 69% 63%,
            transparent 0deg 40deg,
            rgba(133,166,196,.18) 41deg 48deg,
            rgba(15,37,57,.95) 49deg 70deg,
            transparent 71deg 360deg),

        /* main curl 1 */
        radial-gradient(circle at 18% 108%,
            transparent 0 9%,
            rgba(215,239,255,.17) 9.3% 9.9%,
            transparent 10.3% 18%,
            rgba(188,225,255,.14) 18.3% 18.9%,
            transparent 19.3% 27%,
            rgba(151,205,247,.11) 27.3% 27.9%,
            transparent 28.3%),

        /* main curl 2 */
        radial-gradient(circle at 39% 109%,
            transparent 0 11%,
            rgba(223,243,255,.17) 11.3% 11.9%,
            transparent 12.3% 21%,
            rgba(188,225,255,.14) 21.3% 21.9%,
            transparent 22.3% 31%,
            rgba(151,205,247,.10) 31.3% 31.9%,
            transparent 32.3%),

        /* main curl 3 */
        radial-gradient(circle at 64% 109%,
            transparent 0 10%,
            rgba(219,241,255,.16) 10.3% 10.9%,
            transparent 11.3% 20%,
            rgba(184,222,255,.13) 20.3% 20.9%,
            transparent 21.3% 29%,
            rgba(151,205,247,.10) 29.3% 29.9%,
            transparent 30.3%),

        /* far swell */
        radial-gradient(circle at 89% 111%,
            transparent 0 13%,
            rgba(190,228,255,.13) 13.3% 13.9%,
            transparent 14.3% 23%,
            rgba(154,207,244,.10) 23.3% 23.9%,
            transparent 24.3%),

        /* horizon texture */
        repeating-linear-gradient(0deg,
            transparent 0 10px,
            rgba(203,232,255,.025) 11px,
            transparent 12px 24px);

    background-size:
        100% 100%,
        100% 100%,
        38% 35%,
        44% 39%,
        46% 40%,
        35% 30%,
        100% 36%;

    background-position:
        0 0,
        0 0,
        -4% 100%,
        16% 100%,
        47% 100%,
        75% 100%,
        0 100%;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat-x;
}

html[data-cg-library="legacy"][data-cg-theme="greatwaveplus"] body::after {
    background-image:

        /* foam claws */
        conic-gradient(from 180deg at 20% 73%,
            transparent 0 20deg,
            rgba(255,255,255,.18) 21deg 27deg,
            transparent 28deg 36deg,
            rgba(255,255,255,.14) 37deg 42deg,
            transparent 43deg 360deg),

        conic-gradient(from 180deg at 39% 67%,
            transparent 0 22deg,
            rgba(255,255,255,.17) 23deg 29deg,
            transparent 30deg 38deg,
            rgba(255,255,255,.13) 39deg 44deg,
            transparent 45deg 360deg),

        conic-gradient(from 180deg at 63% 71%,
            transparent 0 24deg,
            rgba(255,255,255,.16) 25deg 31deg,
            transparent 32deg 40deg,
            rgba(255,255,255,.12) 41deg 46deg,
            transparent 47deg 360deg),

        /* foam beads */
        radial-gradient(circle at 18% 76%, rgba(255,255,255,.13) 0 1.7%, transparent 2%),
        radial-gradient(circle at 25% 70%, rgba(255,255,255,.10) 0 1.2%, transparent 1.6%),
        radial-gradient(circle at 40% 70%, rgba(255,255,255,.13) 0 1.8%, transparent 2.1%),
        radial-gradient(circle at 48% 65%, rgba(255,255,255,.10) 0 1.2%, transparent 1.6%),
        radial-gradient(circle at 65% 74%, rgba(255,255,255,.12) 0 1.6%, transparent 2%),
        radial-gradient(circle at 71% 68%, rgba(255,255,255,.09) 0 1.2%, transparent 1.6%);

    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="gearforge"] {
    color-scheme: dark !important;

    --cg-page-a: #101216;
    --cg-page-b: #040506;

    --cg-glow-a: rgba(118, 157, 208, .11);
    --cg-glow-b: rgba(232, 183, 95, .10);
    --cg-glow-c: rgba(255, 255, 255, .05);

    --cg-sidebar-glass: rgba(28, 31, 37, .97);
    --cg-sidebar-lower: #0a0c0f;

    --cg-header-chip: rgba(40, 44, 52, .94);
    --cg-composer-a: rgba(55, 60, 70, .94);
    --cg-composer-b: rgba(33, 37, 44, .93);
    --cg-user-bubble: rgba(71, 76, 87, .84);

    --cg-border: rgba(187, 197, 211, .16);
    --cg-hover: rgba(163, 174, 189, .10);

    --cg-wallpaper-duration: 23s;
}

html[data-cg-library="legacy"][data-cg-theme="gearforge"] body::before {
    background-image:

        /* large steel gear */
        repeating-conic-gradient(from 0deg at 23% 61%,
            rgba(201,214,230,.17) 0deg 6deg,
            rgba(58,65,77,.92) 6.6deg 12deg),
        radial-gradient(circle at 23% 61%,
            transparent 0 5.5%,
            rgba(213,224,236,.16) 5.9% 7.1%,
            rgba(61,68,81,.88) 7.5% 13%,
            rgba(213,224,236,.13) 13.4% 14.7%,
            transparent 15.1%),

        /* brass gear */
        repeating-conic-gradient(from 7deg at 51% 39%,
            rgba(229,190,111,.17) 0deg 7deg,
            rgba(67,59,44,.92) 7.6deg 14deg),
        radial-gradient(circle at 51% 39%,
            transparent 0 4.6%,
            rgba(232,195,119,.16) 5% 6.2%,
            rgba(70,61,46,.90) 6.6% 11.6%,
            rgba(232,195,119,.13) 12% 13.2%,
            transparent 13.6%),

        /* small upper gear */
        repeating-conic-gradient(from 3deg at 73% 31%,
            rgba(180,193,212,.15) 0deg 8deg,
            rgba(52,58,70,.92) 8.6deg 16deg),
        radial-gradient(circle at 73% 31%,
            transparent 0 3.7%,
            rgba(195,206,222,.14) 4.1% 5.2%,
            rgba(57,63,76,.90) 5.6% 9.4%,
            transparent 9.8%),

        /* lower right gear */
        repeating-conic-gradient(from 11deg at 75% 72%,
            rgba(209,174,105,.15) 0deg 6deg,
            rgba(62,55,43,.92) 6.6deg 12deg),
        radial-gradient(circle at 75% 72%,
            transparent 0 4.4%,
            rgba(220,185,111,.14) 4.8% 6%,
            rgba(66,58,45,.90) 6.4% 10.8%,
            transparent 11.2%),

        /* tiny central idler */
        repeating-conic-gradient(from 0deg at 44% 70%,
            rgba(191,204,221,.14) 0deg 10deg,
            rgba(51,58,70,.92) 10.6deg 20deg),
        radial-gradient(circle at 44% 70%,
            transparent 0 2.7%,
            rgba(197,210,226,.13) 3% 4%,
            rgba(57,64,77,.90) 4.3% 7%,
            transparent 7.4%),

        /* steel floor texture */
        repeating-linear-gradient(135deg,
            transparent 0 30px,
            rgba(255,255,255,.014) 31px,
            transparent 32px 62px);

    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat:
        no-repeat, no-repeat,
        no-repeat, no-repeat,
        no-repeat, no-repeat,
        no-repeat, no-repeat,
        no-repeat, no-repeat,
        repeat;
}

html[data-cg-library="legacy"][data-cg-theme="gearforge"] body::after {
    background-image:

        /* drive belts */
        linear-gradient(22deg,
            transparent 0 31%,
            rgba(203,214,228,.050) 31.4% 32.2%,
            transparent 32.6% 100%),

        linear-gradient(337deg,
            transparent 0 44%,
            rgba(219,182,106,.046) 44.4% 45.2%,
            transparent 45.6% 100%),

        /* axle crossbars */
        linear-gradient(90deg,
            transparent 0 19%,
            rgba(160,171,187,.045) 19.4% 19.8%,
            transparent 20.2% 70%,
            rgba(160,171,187,.035) 70.4% 70.8%,
            transparent 71.2%),

        linear-gradient(0deg,
            transparent 0 37%,
            rgba(160,171,187,.035) 37.4% 37.8%,
            transparent 38.2% 67%,
            rgba(160,171,187,.030) 67.4% 67.8%,
            transparent 68.2%),

        /* rivet field */
        radial-gradient(circle, rgba(210,219,230,.075) 0 1.3px, transparent 1.7px);

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        54px 54px;

    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        7px 11px;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat;
}

html[data-cg-library="legacy"][data-cg-theme="matrixstorm"] {
    color-scheme: dark !important;

    --cg-page-a: #020704;
    --cg-page-b: #000200;

    --cg-glow-a: rgba(50, 255, 129, .15);
    --cg-glow-b: rgba(98, 255, 162, .10);
    --cg-glow-c: rgba(21, 150, 67, .08);

    --cg-sidebar-glass: rgba(7, 18, 9, .97);
    --cg-sidebar-lower: #010501;

    --cg-header-chip: rgba(11, 28, 13, .94);
    --cg-composer-a: rgba(16, 39, 18, .94);
    --cg-composer-b: rgba(8, 24, 10, .93);
    --cg-user-bubble: rgba(17, 54, 20, .84);

    --cg-border: rgba(118, 255, 160, .16);
    --cg-hover: rgba(99, 240, 142, .10);

    --cg-wallpaper-duration: 10s;
}

html[data-cg-library="legacy"][data-cg-theme="matrixstorm"] body::before {
    background-image:

        /* dense short rows */
        repeating-linear-gradient(180deg,
            rgba(210,255,223,.16) 0 1px,
            transparent 1px 5px,
            rgba(82,255,137,.11) 5px 6px,
            transparent 6px 12px,
            rgba(42,197,96,.07) 12px 13px,
            transparent 13px 20px),

        /* offset secondary stream */
        repeating-linear-gradient(180deg,
            transparent 0 3px,
            rgba(142,255,179,.13) 3px 4px,
            transparent 4px 9px,
            rgba(55,224,112,.08) 9px 10px,
            transparent 10px 17px,
            rgba(202,255,219,.07) 17px 18px,
            transparent 18px 26px),

        /* column masks */
        linear-gradient(90deg,
            transparent 0 1%,
            rgba(39,255,111,.10) 1% 2%,
            transparent 2% 5%,
            rgba(129,255,169,.08) 5% 6%,
            transparent 6% 10%,
            rgba(45,255,116,.09) 10% 11%,
            transparent 11% 15%,
            rgba(139,255,176,.07) 15% 16%,
            transparent 16% 20%,
            rgba(40,255,110,.09) 20% 21%,
            transparent 21% 26%,
            rgba(130,255,169,.08) 26% 27%,
            transparent 27% 31%,
            rgba(45,255,116,.10) 31% 32%,
            transparent 32% 37%,
            rgba(139,255,176,.07) 37% 38%,
            transparent 38% 42%,
            rgba(40,255,110,.09) 42% 43%,
            transparent 43% 48%,
            rgba(130,255,169,.08) 48% 49%,
            transparent 49% 54%,
            rgba(45,255,116,.10) 54% 55%,
            transparent 55% 60%,
            rgba(139,255,176,.07) 60% 61%,
            transparent 61% 66%,
            rgba(40,255,110,.09) 66% 67%,
            transparent 67% 72%,
            rgba(130,255,169,.08) 72% 73%,
            transparent 73% 78%,
            rgba(45,255,116,.10) 78% 79%,
            transparent 79% 84%,
            rgba(139,255,176,.07) 84% 85%,
            transparent 85% 90%,
            rgba(40,255,110,.09) 90% 91%,
            transparent 91% 95%,
            rgba(130,255,169,.08) 95% 96%,
            transparent 96%),

        /* glow heads */
        radial-gradient(ellipse at 14% 18%, rgba(190,255,212,.17), transparent 7%),
        radial-gradient(ellipse at 36% 43%, rgba(155,255,189,.14), transparent 6%),
        radial-gradient(ellipse at 57% 25%, rgba(202,255,218,.14), transparent 7%),
        radial-gradient(ellipse at 79% 54%, rgba(152,255,188,.13), transparent 7%),
        radial-gradient(ellipse at 92% 30%, rgba(202,255,218,.12), transparent 5%);

    background-size:
        4% 100%,
        5.5% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;

    background-position:
        0 0,
        1.7% 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;

    background-repeat:
        repeat-x,
        repeat-x,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="matrixstorm"] body::after {
    background-image:

        /* scanlines */
        repeating-linear-gradient(0deg,
            transparent 0 3px,
            rgba(89,255,145,.025) 4px,
            transparent 5px 8px),

        /* sparse brighter glyph heads */
        radial-gradient(circle, rgba(211,255,224,.26) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(95,255,148,.18) 0 1px, transparent 1.4px),

        /* terminal center glow */
        radial-gradient(ellipse at 50% 48%,
            rgba(38,255,111,.075),
            transparent 44%);

    background-size:
        100% 100%,
        68px 108px,
        101px 151px,
        100% 100%;

    background-position:
        0 0,
        17px 9px,
        49px 31px,
        0 0;

    background-repeat:
        repeat,
        repeat,
        repeat,
        no-repeat;
}

html[data-cg-library="legacy"][data-cg-theme="liquidglasspro"] {
    color-scheme: light !important;

    --cg-page-a: #eefaff;
    --cg-page-b: #d9edf8;

    --cg-glow-a: rgba(87, 191, 255, .17);
    --cg-glow-b: rgba(129, 148, 255, .11);
    --cg-glow-c: rgba(86, 224, 236, .12);

    --cg-sidebar-glass: rgba(240, 248, 253, .98);
    --cg-sidebar-lower: #dcebf5;

    --cg-header-chip: rgba(250, 253, 255, .97);
    --cg-composer-a: rgba(252, 254, 255, .98);
    --cg-composer-b: rgba(232, 243, 249, .97);
    --cg-user-bubble: rgba(209, 231, 245, .95);

    --cg-text-primary: #173044;
    --cg-text-secondary: #48687f;
    --cg-text-tertiary: #7390a6;

    --cg-code-bg: rgba(226, 239, 247, .98);
    --cg-switcher-bg: rgba(250, 253, 255, .98);
    --cg-switcher-text: #173044;

    --cg-border: rgba(40, 89, 123, .12);
    --cg-hover: rgba(59, 124, 169, .07);
    --cg-glass-highlight: rgba(255,255,255,.90);

    --cg-wallpaper-duration: 17s;
}

html[data-cg-library="legacy"][data-cg-theme="liquidglasspro"] body::before {
    background-image:

        /* lens 1 */
        radial-gradient(circle at 26% 31%,
            transparent 0 8%,
            rgba(255,255,255,.52) 8.6% 9.2%,
            rgba(102,203,255,.08) 9.6% 13%,
            rgba(255,255,255,.32) 13.6% 14.1%,
            transparent 14.6% 21%,
            rgba(255,255,255,.18) 21.5% 22%,
            transparent 22.5%),

        /* lens 2 */
        radial-gradient(circle at 68% 39%,
            transparent 0 7%,
            rgba(255,255,255,.48) 7.5% 8.1%,
            rgba(143,159,255,.07) 8.6% 12%,
            rgba(255,255,255,.29) 12.5% 13%,
            transparent 13.5% 19%,
            rgba(255,255,255,.17) 19.5% 20%,
            transparent 20.5%),

        /* lens 3 */
        radial-gradient(circle at 48% 73%,
            transparent 0 8.5%,
            rgba(255,255,255,.44) 9% 9.6%,
            rgba(83,221,235,.08) 10% 14%,
            rgba(255,255,255,.27) 14.5% 15%,
            transparent 15.5% 22%,
            rgba(255,255,255,.16) 22.5% 23%,
            transparent 23.5%),

        /* caustic ribbons */
        conic-gradient(from 20deg at 42% 48%,
            transparent 0 8%,
            rgba(255,255,255,.22) 9% 11%,
            transparent 12% 26%,
            rgba(92,200,255,.10) 27% 30%,
            transparent 31% 48%,
            rgba(173,146,255,.08) 49% 52%,
            transparent 53% 70%,
            rgba(255,255,255,.18) 71% 74%,
            transparent 75% 100%),

        /* prism streak 1 */
        linear-gradient(127deg,
            transparent 0 25%,
            rgba(255,255,255,.28) 31%,
            rgba(100,203,255,.10) 34%,
            transparent 39% 100%),

        /* prism streak 2 */
        linear-gradient(48deg,
            transparent 0 57%,
            rgba(255,255,255,.20) 62%,
            rgba(173,146,255,.08) 65%,
            transparent 70% 100%);

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        130% 130%,
        250px 250px,
        330px 330px;

    background-position:
        0 0,
        0 0,
        0 0,
        center,
        0 0,
        70px 40px;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat;
}

html[data-cg-library="legacy"][data-cg-theme="liquidglasspro"] body::after {
    background-image:

        /* caustic cells */
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(255,255,255,.055) 0deg 8deg,
            transparent 8.5deg 21deg,
            rgba(85,203,255,.035) 21.5deg 27deg,
            transparent 27.5deg 45deg),

        /* concentric refraction */
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.10) 0 1px,
            transparent 2px 19px),

        /* pearl field */
        radial-gradient(circle, rgba(255,255,255,.20) 0 1px, transparent 1.4px),

        /* soft aqua volume */
        radial-gradient(ellipse at 50% 50%,
            rgba(98,208,255,.12),
            transparent 48%);

    background-size:
        170px 170px,
        220px 220px,
        76px 76px,
        100% 100%;

    background-position:
        0 0,
        43px 21px,
        19px 31px,
        0 0;

    background-repeat:
        repeat,
        repeat,
        repeat,
        no-repeat;
}

/* Connect original theme palettes to the current glass interface. */
html[data-cg-library="legacy"] {
  --cg-text: var(--cg-text-primary);
  --cg-muted: var(--cg-text-secondary);
  --cg-faint: var(--cg-text-tertiary);
  --cg-panel: var(--cg-header-chip);
  --cg-panel-strong: var(--cg-switcher-bg);
}

/* Home suggestions - actual mount structure from the supplied page source.
 * #thread-bottom and the recommendation mount are siblings inside
 * #thread-bottom-container > .contents. The form is nested much deeper.
 * SSR uses textarea[name="prompt-textarea"]; the live editor can use an ID.
 * The mount selector works before and after editor hydration.
 */

/* v36: hydrated outerHTML supplied by the user. The live recommendations sit
 * INSIDE thread-bottom, next to form/status, in .bg-surface-primary > section.
 * Match the recommendation data attribute; never reset unrelated surface boxes.
 */
#thread-bottom-container .bg-surface-primary:has(> section [data-suggestion-index]) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
#thread-bottom-container .bg-surface-primary > section [data-suggestion-index] > button:first-child {
  background-color: transparent;
  border-radius: 12px;
  color: var(--cg-work-muted, var(--cg-muted));
  transition: background-color 160ms ease;
}
#thread-bottom-container .bg-surface-primary > section [data-suggestion-index]:is(:hover,:focus-within,[data-selected]) > button:first-child {
  background-color: var(--cg-hover) !important;
}
@media (prefers-reduced-motion: reduce) {
  #thread-bottom-container [data-suggestion-index] > button { transition: none !important; }
}

/* Remove surface paint only from the recommendation mount on an empty thread.
 * Keep geometry, visibility, overflow, content, events and background images.
 */
#thread:not(:has([data-message-author-role])) #thread-bottom + div,
#thread:not(:has([data-message-author-role])) #thread-bottom + div
  :where(div, section, ul, ol):not(:where(
    form, form *,
    #composer-background, #composer-background *,
    [data-testid="composer"], [data-testid="composer"] *,
    [role="tablist"], [role="tablist"] *,
    dialog, dialog *, [role="dialog"], [role="dialog"] *,
    [role="alertdialog"], [role="alertdialog"] *,
    [role="menu"], [role="menu"] *,
    [role="listbox"], [role="listbox"] *,
    [role="tooltip"], [role="tooltip"] *,
    [data-radix-popper-content-wrapper], [data-radix-popper-content-wrapper] *,
    #cg-skin-menu, #cg-skin-menu *
  )) {
  background-color: transparent !important;
  box-shadow: none !important;
}

#thread:not(:has([data-message-author-role])) #thread-bottom + div {
  --main-surface-primary: transparent !important;
  --main-surface-background: transparent !important;
  --bg-primary: transparent !important;
}

/* Workspace v32 — native structure, new composition.
 * Runtime only marks the existing main/scroll containers and docks its own
 * appearance button. No replacement navigation, fake controls or message copies.
 */

/* Variables */
:root {
  --cg-chat-width: 920px;
  --cg-workspace-width: 1440px;
  --cg-workspace-gap: 22px;
  --cg-workspace-radius: 26px;
  --cg-composer-width: 880px;
  --cg-reader-size: 16px;
  --cg-reader-leading: 1.9;
  --cg-work-surface: rgba(15, 20, 29, .79);
  --cg-work-header: rgba(23, 29, 40, .9);
  --cg-work-nav: rgba(20, 26, 36, .89);
  --cg-work-input: rgba(31, 39, 52, .94);
  --cg-work-user: rgba(91, 112, 143, .15);
  --cg-work-line: rgba(197, 213, 239, .10);
  --cg-work-ink: #e3e8f0;
  --cg-work-muted: #8f9cad;
  --cg-work-shadow: 0 16px 50px #00000024, inset 0 1px 0 #ffffff06;
}
html[data-cg-mode="light"] {
  --cg-work-surface: rgba(250, 250, 247, .86);
  --cg-work-header: rgba(251, 251, 248, .95);
  --cg-work-nav: rgba(244, 246, 244, .91);
  --cg-work-input: rgba(255, 255, 253, .96);
  --cg-work-user: rgba(94, 119, 138, .085);
  --cg-work-line: rgba(47, 66, 82, .12);
  --cg-work-ink: #293542;
  --cg-work-muted: #79848c;
  --cg-work-shadow: 0 14px 45px #24333f10, inset 0 1px 0 #ffffffbd;
}

/* Background / Workspace — translucent paint, no full-screen backdrop blur. */
[data-cg-workspace] {
  --header-height: 72px;
  min-width: 0;
  background: var(--cg-work-surface) !important;
  color: var(--cg-work-ink);
  border: 1px solid var(--cg-work-line);
  border-radius: var(--cg-workspace-radius);
  box-shadow: var(--cg-work-shadow);
}
[data-cg-scroll] { border-radius: inherit; }
@media (min-width: 901px) {
  [data-cg-layout] { max-width: calc(var(--cg-workspace-width) + 340px); margin-inline: auto; }
  [data-cg-layout]:has([data-side-pane-shell-open]) { max-width: none; }
  [data-cg-workspace] {
    max-width: var(--cg-workspace-width);
    margin-block: var(--cg-workspace-gap);
    margin-inline: auto var(--cg-workspace-gap);
  }
  /* Native flex containers keep their own height and scroll ownership. */
  [data-cg-workspace] { flex: 1 1 0%; }
  @media (min-width: 1900px) {
    [data-cg-workspace] { margin-inline-end: auto; }
  }
}

/* Sidebar — a floating navigation window, independent from the reader. */
#stage-slideover-sidebar {
  --header-height: 72px;
  background: var(--cg-work-nav) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-workspace-radius);
  box-shadow: var(--cg-work-shadow) !important;
  color: var(--cg-work-ink);
  --sidebar-surface-primary: transparent !important;
  --sidebar-surface-secondary: var(--cg-work-user) !important;
}
@media (min-width: 901px) {
  #stage-slideover-sidebar {
    height: calc(100% - var(--cg-workspace-gap) * 2) !important;
    margin: var(--cg-workspace-gap);
    margin-inline-end: 16px;
  }
  html[data-cg-sidebar-open="false"] #stage-slideover-sidebar { margin-inline: 8px; }
}
/* A single navigation surface replaces the previous top/bottom split. */
#cg-sidebar-glass-panel { display: none; }
#sidebar-header {
  min-height: 72px;
  padding-inline: 12px;
  font-size: 18px;
  letter-spacing: -.035em;
  border-bottom: 1px solid var(--cg-work-line);
  margin-bottom: 12px;
}
#stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) {
  --menu-item-highlighted: var(--cg-work-user);
  scrollbar-width: thin;
  scrollbar-color: #7f8b9b38 transparent;
}
#stage-slideover-sidebar:has(#cg-sidebar-scroll-indicator) nav:not(#stage-sidebar-tiny-bar) {
  /* Native scrollbar gutters expose a different compositing layer beside the
     sticky glass. Use the overlay scrollbar only while its runtime is present. */
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
}
#stage-slideover-sidebar:has(#cg-sidebar-scroll-indicator) nav:not(#stage-sidebar-tiny-bar)::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
#cg-sidebar-scroll-indicator {
  position: absolute; inset-inline-end: 0; z-index: 40;
  width: 12px; border-radius: 99px; pointer-events: auto;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: pointer;
}
#cg-sidebar-scroll-indicator::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-end: 4px;
  width: 3px; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--cg-work-ink) 7%, transparent);
}
#cg-sidebar-scroll-indicator > span {
  position: relative; display: block; width: 100%; border-radius: inherit;
  cursor: grab;
}
#cg-sidebar-scroll-indicator > span::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-end: 4px;
  width: 3px; border-radius: inherit;
  background: color-mix(in srgb, var(--cg-work-ink) 34%, transparent);
}
#cg-sidebar-scroll-indicator:is(:hover,:focus-visible,[data-dragging]) > span::before {
  width: 5px; inset-inline-end: 3px;
  background: color-mix(in srgb, var(--cg-work-ink) 52%, transparent);
}
#cg-sidebar-scroll-indicator[data-dragging],
#cg-sidebar-scroll-indicator[data-dragging] > span { cursor: grabbing; }
#cg-sidebar-scroll-indicator:focus-visible { outline: 1px solid var(--cg-work-muted); outline-offset: -1px; }
#stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) [data-sidebar-item="true"] {
  min-height: 39px;
  padding-block: 9px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .005em;
}
#stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) :is(a[href^="/c/"],a[href^="/g/"]) {
  font-size: 13px;
  border-radius: 11px;
}
#stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) :is(h3,h4) {
  color: var(--cg-work-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .10em;
  margin-top: 26px;
  margin-bottom: 8px;
}
#stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) [data-testid="create-new-chat-button"] {
  min-height: 43px;
  margin-block: 6px 14px;
  background: color-mix(in srgb, var(--cg-accent) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--cg-accent) 22%, transparent) !important;
  color: var(--cg-work-ink) !important;
  box-shadow: inset 0 1px 0 #ffffff08;
}
#stage-slideover-sidebar [data-sidebar-item="true"][aria-current="page"],
#stage-slideover-sidebar nav a[aria-current="page"] {
  background: var(--cg-work-user) !important;
  box-shadow: inset 2px 0 0 var(--cg-accent);
}
#stage-slideover-sidebar [data-testid="accounts-profile-button"] {
  border-top: 1px solid var(--cg-work-line);
  border-radius: 0 0 18px 18px;
  padding-block: 14px;
  font-size: 12px;
}

/* Header — model, native actions and appearance share one toolbar. */
#page-header {
  min-height: 72px;
  padding: 12px 24px !important;
  background: var(--cg-work-header) !important;
  border-bottom: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-workspace-radius) var(--cg-workspace-radius) 0 0;
}
#conversation-header-actions {
  min-height: 36px;
  padding: 0 2px !important;
  gap: 4px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#conversation-header-actions :is(button,[role="button"]) {
  border-radius: 9px;
  font-size: 12px;
}
#cg-skin-switcher[data-cg-docked="true"] {
  position: static !important;
  margin-inline-start: 7px;
  padding-inline-start: 9px;
  border-inline-start: 1px solid var(--cg-work-line);
  flex: none;
}
#cg-skin-switcher[data-cg-docked="true"] :is(#cg-skin-button,#cg-install-button) {
  background: var(--cg-work-user) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: 9px;
  box-shadow: none !important;
  color: var(--cg-work-ink);
  min-height: 34px;
}

/* Messages — a reading column with generous rhythm, no assistant bubbles. */
#thread:has([data-message-author-role]) { padding-block: 22px 44px !important; }
#thread :is([class*="--thread-content-max-width"],[data-testid^="conversation-turn-"]) {
  --thread-content-max-width: var(--cg-chat-width) !important;
}
#thread [data-testid^="conversation-turn-"] {
  margin-inline: auto;
  padding-block: 16px !important;
}
#thread [data-message-author-role] {
  color: var(--cg-work-ink);
  font-size: var(--cg-reader-size);
  line-height: var(--cg-reader-leading);
}
#thread [data-message-author-role="assistant"] {
  position: relative;
  padding-block: 22px 8px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#thread [data-message-author-role="assistant"]::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: var(--cg-accent);
  opacity: .7;
  pointer-events: none;
}
#thread [data-message-author-role="user"] {
  width: fit-content;
  max-width: min(84%, 720px);
  margin-inline-start: auto;
  padding: 15px 21px;
  border-radius: 18px 18px 5px 18px;
  border: 1px solid var(--cg-work-line);
  background: var(--cg-work-user) !important;
  box-shadow: inset 0 1px 0 #ffffff05;
  font-size: 14px;
  line-height: 1.75;
}
#thread [data-message-author-role="user"] :is(.user-message-bubble,[data-user-message-bubble],.bg-token-message-surface) {
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Markdown — editorial type and spacing instead of a uniform wall of text. */
#thread .markdown { font-size: var(--cg-reader-size); line-height: var(--cg-reader-leading); }
#thread .markdown p { margin-block: 0 1.25em; }
#thread .markdown :is(h1,h2,h3) { color: var(--cg-work-ink); font-weight: 600; text-wrap: pretty; }
#thread .markdown h1 { font-size: clamp(26px, 2.1vw, 34px); line-height: 1.35; letter-spacing: -.045em; margin-block: 0 28px; }
#thread .markdown h2 { font-size: 22px; line-height: 1.45; letter-spacing: -.025em; margin-block: 36px 18px; }
#thread .markdown h3 { font-size: 18px; margin-block: 28px 14px; }
#thread .markdown :is(ul,ol) { padding-inline-start: 1.4em; margin-block: 20px 26px; }
#thread .markdown li { padding-inline-start: .4em; margin-block: .6em; }
#thread .markdown li::marker { color: var(--cg-accent); }
#thread .markdown blockquote {
  margin-block: 26px;
  padding: 16px 22px;
  border-inline-start: 2px solid var(--cg-accent);
  background: var(--cg-work-user);
  color: var(--cg-muted);
}
#thread .markdown blockquote > :last-child { margin-bottom: 0; }
#thread .markdown table { font-size: 14px; line-height: 1.65; }
#thread .markdown :is(th,td) { padding: 14px 18px; border-color: var(--cg-work-line) !important; }
#thread .markdown th { font-size: 12px; font-weight: 550; background: var(--cg-work-user); }
#thread .markdown hr { margin-block: 36px; opacity: .6; }
#thread .markdown a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Code — retain native copy/run headers and syntax colors. */
#thread .markdown pre {
  border: 1px solid var(--cg-work-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cg-work-header) 88%, transparent) !important;
  padding: 16px;
}
#thread .markdown pre code { font-size: 13px !important; line-height: 1.8 !important; }
#thread .markdown :is([data-testid="code-block"],.bg-token-bg-elevated-secondary) { border-radius: 14px; }
#thread .markdown :is([data-testid="code-block"],.bg-token-bg-elevated-secondary) pre {
  border: 0;
  padding: 8px 0;
  background: transparent !important;
}
#thread .markdown pre :is([data-testid="code-block"],.bg-token-bg-elevated-secondary) {
  border: 0;
  background: transparent !important;
}
#thread .markdown img { border-radius: 18px; }

/* Composer — a compact writing dock aligned with the reading column. */
#thread-bottom-container { padding-bottom: 16px; }
#thread-bottom, #thread-bottom-container [class*="--thread-content-max-width"] {
  --thread-content-max-width: var(--cg-composer-width) !important;
}
#thread-bottom { max-width: 100%; }
#thread-bottom form:has(:is(textarea,[contenteditable="true"])) {
  max-width: var(--cg-composer-width);
  margin-inline: auto;
}
/* The current native surface is a data attribute, not the old guessed ID. */
#thread-bottom form:has([data-composer-surface]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#thread-bottom :is(#composer-background,[data-composer-surface]),
#thread-bottom form:has(:is(textarea,[contenteditable="true"])):not(:has(#composer-background,[data-composer-surface])) {
  min-height: 72px;
  background: linear-gradient(#ffffff04, transparent), var(--cg-work-input) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px #00000018, inset 0 1px 0 #ffffff07 !important;
  --composer-surface-primary: transparent;
  --composer-border-radius: 20px;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#thread-bottom [data-composer-surface] { padding: 5px 8px; }
#thread-bottom :is(#composer-background,[data-composer-surface]):focus-within {
  border-color: color-mix(in srgb, var(--cg-accent) 48%, transparent) !important;
}
#thread-bottom :is(textarea,[contenteditable="true"]) {
  font-family: var(--cg-font) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--cg-work-ink) !important;
}
#thread-bottom textarea { min-height: 30px; }
#thread-bottom :is([data-testid="send-button"],#composer-submit-button) {
  background: var(--cg-accent) !important;
  color: #111b26 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
#thread-bottom :is([data-testid="send-button"],#composer-submit-button):is(:disabled,[aria-disabled="true"]) { opacity: .45; }

/* Home — retain the actual greeting and recommendation actions. */
#thread:not(:has([data-message-author-role])) [data-splash-headline-option] {
  margin-block: 24px 28px;
  color: var(--cg-work-ink);
}
#thread [data-splash-headline-option] :is(h1,[class~="text-2xl"]) {
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 550;
  letter-spacing: -.055em;
  line-height: 1.3;
}
#thread:not(:has([data-message-author-role])) #thread-bottom + div button:not(:where([role="menuitem"],[role="menu"] *,[role="listbox"] *,[role="dialog"] *)) {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--cg-work-muted);
}

/* Popup / Animation — restrained interaction, no geometry animation. */
#conversation-header-actions button:hover,
#stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) [data-sidebar-item="true"]:hover {
  background-color: var(--cg-work-user) !important;
}
#thread:not(:has([data-message-author-role])) #thread-bottom + div button:hover:not(:where([role="menu"] *,[role="listbox"] *,[role="dialog"] *)) { background-color: var(--cg-work-user); }
:is(#conversation-header-actions,#stage-slideover-sidebar) :is(a,button) {
  transition: background-color 140ms ease, border-color 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
  :is(#conversation-header-actions,#stage-slideover-sidebar) :is(a,button) { transition: none !important; }
}

/* Responsive — keep native mobile navigation and keyboard-safe composer. */
@media (max-width: 1200px) {
  :root { --cg-workspace-gap: 14px; --cg-workspace-radius: 22px; --cg-chat-width: 800px; }
  #page-header { padding-inline: 18px !important; }
}
@media (max-width: 900px) {
  :root { --cg-workspace-gap: 0px; --cg-workspace-radius: 0px; --cg-chat-width: 100%; --cg-composer-width: 100%; }
  [data-cg-workspace] { margin: 0; max-width: none; border: 0; box-shadow: none; }
  #stage-slideover-sidebar { margin: 0; border-radius: 0; }
  #page-header { min-height: 60px; padding: 8px 12px !important; }
  #cg-skin-switcher[data-cg-docked="true"] { margin-inline-start: 3px; padding-inline-start: 4px; }
  #cg-skin-switcher[data-cg-docked="true"] :is(#cg-skin-button,#cg-install-button) { padding-inline: 8px; }
  #thread [data-testid^="conversation-turn-"] { padding-block: 8px !important; }
  #thread [data-message-author-role="user"] { max-width: 92%; padding: 12px 16px; }
  #thread .markdown h1 { font-size: 26px; }
  #thread .markdown h2 { font-size: 21px; }
  #thread-bottom-container { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #thread-bottom :is(#composer-background,[data-composer-surface]) { min-height: 60px; border-radius: 18px !important; }
}
@media print {
  [data-cg-workspace] { margin: 0; max-width: none; border: 0; background: transparent !important; box-shadow: none; }
  #cg-skin-switcher, #cg-wallpaper { display: none !important; }
}
@media (max-width: 600px) {
  #cg-skin-switcher[data-cg-docked="true"] :is(#cg-skin-button,#cg-install-button) span { display: none; }
  #cg-skin-switcher[data-cg-docked="true"] :is(#cg-skin-button,#cg-install-button) { width: 34px; justify-content: center; padding: 0; }
}

/* v35: independent UI palette, adjustable window paint and separate sticky headers.
 * Wallpaper colors feed a desaturated UI palette; original wallpaper artwork,
 * pseudo-elements, animation timing and saved controls are not changed.
 */

/* Variables / Palette */
:root {
  --cg-reader-width: 920px;
  --cg-ui-tint: var(--cg-accent, #aab8cc);
  --cg-ui-tint-share: 9%;
  --cg-ui-base: #17181b;
  --cg-code-radius: 14px;
  --cg-code-padding: 18px;
  /* 0% = clear, 100% = solid; the UI shows the inverse as transparency. */
  --cg-window-opacity: 93%;
}
:root[data-cg-theme][data-cg-mode] {
  --cg-chat-width: var(--cg-reader-width);
  --cg-ui-neutral: color-mix(in oklab, var(--cg-ui-base), var(--cg-ui-tint) var(--cg-ui-tint-share));
  --cg-ui-accent: color-mix(in oklab, var(--cg-ui-tint) 32%, #d1cec8);
  --cg-work-surface: color-mix(in srgb, var(--cg-ui-neutral) var(--cg-window-opacity), transparent);
  --cg-work-header: var(--cg-ui-neutral);
  --cg-work-nav: var(--cg-work-surface);
  --cg-work-input: color-mix(in oklab, var(--cg-ui-neutral) 93%, var(--cg-ui-accent));
  --cg-work-user: color-mix(in oklab, var(--cg-ui-neutral) 85%, var(--cg-ui-accent));
  --cg-work-code: color-mix(in oklab, var(--cg-ui-neutral) 92%, #000);
  --cg-work-code-head: color-mix(in oklab, var(--cg-work-code) 95%, var(--cg-ui-accent));
  --cg-work-line: color-mix(in srgb, var(--cg-ui-accent) 16%, transparent);
  --cg-work-ink: color-mix(in oklab, #eeeeee 98%, var(--cg-ui-tint));
  --cg-work-muted: color-mix(in oklab, #aaa7a3 93%, var(--cg-ui-tint));
  --cg-panel: var(--cg-work-header);
  --cg-panel-strong: var(--cg-work-header);
  --cg-code-bg: var(--cg-work-code);
  --cg-user-bubble: var(--cg-work-user);
  --cg-inline-bg: color-mix(in srgb, var(--cg-ui-accent) 9%, transparent);
  --cg-border: var(--cg-work-line);
  --cg-text: var(--cg-work-ink);
  --cg-muted: var(--cg-work-muted);
  --cg-faint: var(--cg-work-muted);
  --cg-hover: color-mix(in srgb, var(--cg-ui-accent) 9%, transparent);
}
/* Legacy wallpapers used to couple body text to their own original palette. */
:root[data-cg-theme][data-cg-mode] body { color: var(--cg-work-ink) !important; }

/* October shell: text-default reads --color-text, not --text-primary.
 * Bridge neutral text/icon tokens; preserve inverse, accent, status and
 * code-editor palettes instead of forcing a color onto every descendant. */
:root[data-cg-engine][data-cg-mode] {
  --color-text: var(--cg-work-ink) !important;
  --color-text-primary: var(--cg-work-ink) !important;
  --color-text-secondary: var(--cg-work-muted) !important;
  --color-text-tertiary: var(--cg-work-muted) !important;
  --color-token-text-primary: var(--cg-work-ink) !important;
  --color-token-text-secondary: var(--cg-work-muted) !important;
  --color-token-text-tertiary: var(--cg-work-muted) !important;
  --app-color-text-foreground: var(--cg-work-ink) !important;
  --app-color-text-primary: var(--cg-work-ink) !important;
  --app-color-text-secondary: var(--cg-work-muted) !important;
  --app-color-text-foreground-secondary: var(--cg-work-muted) !important;
  --user-message-text-color: var(--cg-work-ink) !important;
}
/* New conversation bubbles no longer have a role wrapper or #thread ancestor.
 * Pair the native bubble foreground with the surface already themed below.
 * Leave descendant code, link, status and inverse-button palettes intact. */
html[data-cg-engine] [data-user-message-bubble] {
  --color-text-user-message: var(--cg-work-ink) !important;
  --color-background-user-message: var(--cg-work-user) !important;
  color: var(--cg-work-ink) !important;
  background-color: var(--cg-work-user) !important;
}
/* The new project title and action islands use bg-surface/browser:bg-surface.
 * Scope their surface tokens to the toolbar so dark code cards and dialogs
 * elsewhere keep their own matching foreground/background pair. */
html[data-cg-engine] header[data-app-shell-titlebar] {
  --color-surface: var(--cg-work-header) !important;
  --color-surface-tertiary: var(--cg-work-user) !important;
  --color-text-toolbar-action: var(--cg-work-ink) !important;
}
/* New home/thread composers paint through a layout-local surface token.
 * Keep the native layout, focus behavior, and accent submit button intact. */
html[data-cg-engine] [data-composer-utility-bar-variant] {
  --composer-layout-surface-background: var(--cg-work-input) !important;
}
html[data-cg-engine] [data-composer-body] {
  --composer-layout-surface-background: var(--cg-work-input) !important;
}

/* Header — no ruled line through the reading column. Keep a readable toolbar
 * above scrolling content; only this small strip stays opaque. Native code
 * headers stop below it even when data-fixed-header="never" would set 0px.
 */
[data-cg-scroll] {
  --sticky-padding-top: var(--header-height, 72px) !important;
  scroll-padding-top: var(--header-height, 72px) !important;
}
[data-cg-workspace] #page-header {
  border-bottom: 0 !important;
  box-shadow: none !important;
  z-index: 30 !important;
  pointer-events: auto;
}
@media (max-width: 900px) {
  [data-cg-workspace] { --header-height: 60px; }
}
:root[data-cg-theme][data-cg-mode="light"] {
  --cg-ui-base: #f6f4f0;
  --cg-ui-tint-share: 3%;
  --cg-ui-accent: color-mix(in oklab, var(--cg-ui-tint) 24%, #665e54);
  --cg-work-input: color-mix(in oklab, var(--cg-ui-neutral) 24%, #fff);
  --cg-work-user: color-mix(in oklab, var(--cg-ui-neutral) 94%, var(--cg-ui-accent));
  --cg-work-code: color-mix(in oklab, var(--cg-ui-neutral) 95%, #797670);
  --cg-work-code-head: color-mix(in oklab, var(--cg-work-code) 96%, #797670);
  --cg-work-ink: color-mix(in oklab, #292827 97%, var(--cg-ui-tint));
  --cg-work-muted: color-mix(in oklab, #706c67 96%, var(--cg-ui-tint));
}

/* Messages — the role node is a layout wrapper, never another bubble. */
#thread [data-message-author-role="user"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  --message-surface: var(--cg-work-user);
  --user-chat-color: var(--cg-work-user);
}
#thread [data-message-author-role="user"] :is(
  [data-user-message-bubble], [class*="user-message-bubble"],
  .bg-token-message-surface, [class~="bg-(--message-surface)"]
) {
  max-width: min(84%, 720px) !important;
  padding: 13px 18px !important;
  background: var(--cg-work-user) !important;
  color: var(--cg-work-ink) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: 18px 18px 6px 18px !important;
  box-shadow: none !important;
  --user-chat-color: var(--cg-work-user) !important;
}
/* A marked inner bubble sometimes sits inside another marked wrapper. */
#thread [data-message-author-role="user"] :is([data-user-message-bubble],[class*="user-message-bubble"]):has(:is([data-user-message-bubble],[class*="user-message-bubble"])) {
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#thread [data-message-author-role="assistant"] { padding-block: 0 !important; }
#thread [data-message-author-role="assistant"]::before { content: none !important; }

/* Code — verified against the user's live outerHTML.
 * Outer pre > native bordered card > code-block-viewer > .cm-scroller >
 * pre.cm-content. The native card alone owns the border and rounded corners.
 * No generated class names, replacement buttons or CodeMirror DOM changes.
 */
#thread .markdown pre {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cg-work-ink);
  min-width: 0;
}
#thread .markdown pre:has([id="code-block-viewer"]) {
  margin-block: 20px !important;
  overflow: visible !important;
}
#thread .markdown pre:has([id="code-block-viewer"]) > div { margin-block: 0 !important; }
#thread .markdown pre [class~="border"]:has(> [class~="bg-(--code-block-surface)"]) {
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-code-radius) !important;
  background: var(--cg-work-code) !important;
}
#thread .markdown pre [class~="border"] > [class~="bg-(--code-block-surface)"] {
  --code-block-surface: var(--cg-work-code) !important;
  background: var(--cg-work-code) !important;
  border-radius: inherit !important;
}
#thread .markdown pre [class~="sticky"] > [class~="bg-(--code-block-surface)"] {
  background: var(--cg-work-code-head) !important;
}
#thread .markdown [id="code-block-viewer"] {
  background: transparent !important;
  color: var(--cg-work-ink);
}
#thread .markdown [id="code-block-viewer"] .cm-scroller { overflow-x: auto; }
#thread .markdown [id="code-block-viewer"] pre.cm-content {
  margin: 0 !important;
  padding: var(--cg-code-padding) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#thread .markdown pre code {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cg-work-ink);
  font-size: 13px !important;
  line-height: 1.8 !important;
}
/* Older standalone pre and native cards also keep exactly one surface. */
#thread .markdown pre:has(> code):not(.cm-content) {
  padding: var(--cg-code-padding) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-code-radius) !important;
  background: var(--cg-work-code) !important;
  overflow-x: auto;
}
#thread .markdown :is([data-testid="code-block"],.bg-token-bg-elevated-secondary):has(pre):not(pre *) {
  background: var(--cg-work-code) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-code-radius) !important;
  box-shadow: none !important;
}
#thread .markdown :is([data-testid="code-block"],.bg-token-bg-elevated-secondary) pre {
  background: transparent !important;
  border: 0 !important;
}

/* Composer — recognize the unified form even when thread-bottom is absent. */
:is(form[data-type="unified-composer"], form:has(#prompt-textarea), form:has(textarea[name="prompt-textarea"])) {
  --composer-surface-primary: var(--cg-work-input) !important;
  --composer-surface-secondary: var(--cg-work-input) !important;
  --composer-border-radius: 20px !important;
  --main-surface-primary: var(--cg-work-input);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:is(form[data-type="unified-composer"],form:has(#prompt-textarea),form:has(textarea[name="prompt-textarea"]))
  :is(#composer-background,[data-composer-surface],[class~="bg-(--composer-surface-primary)"]) {
  background: var(--cg-work-input) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 5px 22px #00000018 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:is(form[data-type="unified-composer"],form:has(#prompt-textarea),form:has(textarea[name="prompt-textarea"]))
  :is(textarea,[contenteditable="true"]) {
  color: var(--cg-work-ink) !important;
  background: transparent !important;
  caret-color: var(--cg-ui-accent);
}
:is(form[data-type="unified-composer"],form:has(#prompt-textarea),form:has(textarea[name="prompt-textarea"]))
  :is([data-testid="send-button"],[data-testid="voice-mode-button"],#composer-submit-button) {
  background: var(--cg-ui-accent) !important;
  color: var(--cg-work-code) !important;
}
/* Sidebar / Popup — neutral accent strength, same palette as the reader. */
#stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) [data-testid="create-new-chat-button"] {
  background: color-mix(in srgb, var(--cg-ui-accent) 12%, transparent) !important;
  border-color: var(--cg-work-line) !important;
}
#stage-slideover-sidebar [data-sidebar-item="true"][aria-current="page"],
#stage-slideover-sidebar nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--cg-ui-accent); }
#thread .markdown a, #thread .markdown li::marker { color: var(--cg-ui-accent); }
@media (max-width: 1200px) { :root { --cg-reader-width: 800px; } }
@media (max-width: 900px) { :root { --cg-reader-width: 100%; --cg-code-padding: 14px; } }

/* v40.0.8 — small overlay surfaces retain their own opacity even when the user
 * makes the workspace completely transparent. No blur on the entire viewport. */
:root[data-cg-theme][data-cg-mode] {
  --cg-overlay-opacity: 90%;
  --cg-overlay-blur: 24px;
  --cg-overlay-solid: var(--cg-ui-neutral);
  --cg-overlay-paint: color-mix(in srgb, var(--cg-overlay-solid) var(--cg-overlay-opacity), transparent);
  /* A quiet tint over blurred content, rather than a second opaque sidebar. */
  --cg-sidebar-overlay-opacity: clamp(36%, calc(var(--cg-window-opacity, 93%) * .6), 60%);
  --cg-sidebar-overlay-paint: color-mix(in srgb, var(--cg-overlay-solid) var(--cg-sidebar-overlay-opacity), transparent);
}

/* Sidebar: one continuous glass pane while the list is at the top. Paint the
 * sticky covers only after scrolling; otherwise they look like solid blocks. */
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar {
  isolation: isolate;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Blur the wallpaper on a separate, non-interactive layer. Filtering the
 * sidebar itself creates a backdrop root and leaves scrolling text sharp
 * beneath the sticky header in Chromium. */
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
  backdrop-filter: blur(20px) saturate(125%) !important;
}
/* Target direct children of the native scrollport, not every wrapper.
 * Include the same nav exclusion as the older transparent reset, so a late
 * companion stylesheet cannot win by specificity and erase the glass paint.
 * Keep the native short-viewport behavior of the new-chat slot. */
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) > :is(
  .sticky.top-0,
  [class*="sidebar-section-first-margin-top"]:has([data-testid="create-new-chat-button"])
) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  flex-shrink: 0;
}
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar)[data-scrolled-from-top] > :is(
  .sticky.top-0,
  [class*="sidebar-section-first-margin-top"]:has([data-testid="create-new-chat-button"])
) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* The glass sits behind the native controls and fades into the same sidebar
 * surface. Blurring a separate pseudo-element avoids double-tint seams while
 * still obscuring the scrolling chat links beneath the sticky controls. */
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar)[data-scrolled-from-top] > [class*="sidebar-section-first-margin-top"]:has([data-testid="create-new-chat-button"])::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--header-height, 72px)) 0 -14px;
  z-index: -1;
  pointer-events: none;
  background: var(--cg-sidebar-overlay-paint);
  -webkit-backdrop-filter: blur(32px) saturate(145%);
  backdrop-filter: blur(32px) saturate(145%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 22px), transparent 100%);
}
/* On compact windows ChatGPT makes the new-chat row non-sticky. Keep the
 * header covered while allowing that row to scroll normally. */
@media (max-height: 750px) {
  html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar)[data-scrolled-from-top] > .sticky.top-0::before {
    content: ""; position: absolute; inset: 0 0 -12px; z-index: -1; pointer-events: none;
    background: var(--cg-sidebar-overlay-paint);
    -webkit-backdrop-filter: blur(32px) saturate(145%);
    backdrop-filter: blur(32px) saturate(145%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 20px), transparent 100%);
  }
  html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar)[data-scrolled-from-top] > [class*="sidebar-section-first-margin-top"]:has([data-testid="create-new-chat-button"])::before { inset: 0 0 -14px; }
}
/* The More wrapper's padding calculation mentions the same variable as the
 * new-chat slot. Earlier substring selectors accidentally painted it too. */
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) > [class*="sidebar-section-first-margin-top"]:not(:has([data-testid="create-new-chat-button"])) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) > .sticky.top-0:has(#sidebar-header) {
  z-index: 30 !important;
}
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) > [class*="sidebar-section-first-margin-top"]:has([data-testid="create-new-chat-button"]) {
  z-index: 20 !important;
}
/* One glass layer per slot. The inner padding wrapper and header stay clear;
 * stacking two blur layers gives an opaque patch and a visible lower edge. */
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar nav:not(#stage-sidebar-tiny-bar) > .sticky.top-0 > :has(> #sidebar-header),
html[data-cg-theme][data-cg-engine] #stage-slideover-sidebar #sidebar-header {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#stage-slideover-sidebar #sidebar-header { border-bottom: 0 !important; margin-bottom: 0 !important; }

/* Popup: native menu/listbox surfaces and command menus use one material.
 * Retain native anchors, display, overflow and event targets. */
html[data-cg-engine] :is(
  [role="menu"], [role="listbox"], [cmdk-root],
  #thread-bottom-container .popover,
  [data-radix-popper-content-wrapper] > [data-state="open"]
):not(#cg-skin-menu):not(#cg-skin-menu *):not([role="tooltip"]):not([popover="hint"]) {
  background: var(--cg-overlay-solid) !important;
  background: var(--cg-overlay-paint) !important;
  -webkit-backdrop-filter: blur(var(--cg-overlay-blur)) saturate(125%) !important;
  backdrop-filter: blur(var(--cg-overlay-blur)) saturate(125%) !important;
  color: var(--cg-work-ink) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 32px #00000020 !important;
}
html[data-cg-engine] :is([cmdk-root],[role="menu"]) [role="listbox"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Systems without backdrop support get solid, readable native overlays. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-cg-theme][data-cg-mode] { --cg-overlay-opacity: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-cg-theme][data-cg-mode] { --cg-overlay-opacity: 100%; --cg-overlay-blur: 0px; }
}

/* Current desktop shell: semantic attributes survive generated class changes. */
html[data-cg-engine] #web-mobile-root {
  --cg-octane-pane: color-mix(in srgb, var(--cg-ui-neutral) var(--cg-octane-pane-opacity, 70%), transparent);
}
html[data-cg-engine] #web-mobile-root [data-app-shell][data-cg-workspace] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-cg-engine] #web-mobile-root :is([data-octane-shell-layout],[data-desktop-layout],[data-swipe-visual-viewport]) {
  background: transparent !important;
}

/* Sidebar: its scrollport has its own opaque paint on the new site. */
html[data-cg-engine] #web-mobile-root aside[data-desktop-sidebar][aria-label="Sidebar"] {
  background: var(--cg-octane-pane) !important;
  color: var(--cg-work-ink) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-workspace-radius) !important;
  box-shadow: var(--cg-work-shadow) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
html[data-cg-engine] #web-mobile-root aside[data-desktop-sidebar] [data-sidebar-scrollport],
html[data-cg-engine] #web-mobile-root aside[data-desktop-sidebar] nav[aria-label="Sidebar"] {
  background: transparent !important;
}
/* The new sticky header paints an opaque white gradient above the scrollport. */
html[data-cg-engine] #web-mobile-root aside[data-desktop-sidebar] [data-sidebar-header] {
  background: transparent !important;
  background-image: none !important;
}
html[data-cg-engine] #web-mobile-root aside[data-desktop-sidebar] [data-sidebar-header] :is(button,svg) {
  color: var(--cg-work-ink) !important;
}
html[data-cg-engine] #web-mobile-root aside[data-desktop-sidebar] :is(
  [data-sidebar-header], [data-sidebar-login-panel], [data-octane-navigation-item],
  [data-sidebar-return-to-chat], [data-mobile-settings-trigger]
) { color: var(--cg-work-ink) !important; }
html[data-cg-engine] #web-mobile-root aside[data-desktop-sidebar] [data-octane-navigation-item]:hover {
  background: var(--cg-hover) !important;
}
html[data-cg-engine] #web-mobile-root aside[data-desktop-sidebar] [data-mobile-new-chat] {
  background: var(--cg-work-user) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: 12px !important;
}

/* Conversation: one translucent reading pane lets the scene remain visible. */
html[data-cg-engine] #web-mobile-root [role="region"][aria-label="Conversation"] {
  background: var(--cg-octane-pane) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-workspace-radius) !important;
  box-shadow: var(--cg-work-shadow) !important;
  color: var(--cg-work-ink) !important;
}
html[data-cg-engine] #web-mobile-root [data-web-mobile-conversation] :is(h1,h2,h3,p,li),
html[data-cg-engine] #web-mobile-root [data-mobile-landing-heading],
html[data-cg-engine] #web-mobile-root [data-mobile-landing-heading] *,
html[data-cg-engine] #web-mobile-root [data-desktop-header] [data-mobile-header-label],
html[data-cg-engine] #web-mobile-root [data-desktop-header] [data-header-wordmark] {
  color: var(--cg-work-ink) !important;
}
html[data-cg-engine] #web-mobile-root [data-desktop-header] {
  color: var(--cg-work-ink) !important;
  background: var(--cg-sidebar-overlay-paint) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
html[data-cg-engine] #web-mobile-root [data-desktop-header] #cg-skin-switcher {
  position: static !important;
}

/* Composer: keep its native textarea, attachment and send controls in place. */
html[data-cg-engine] #web-mobile-root form[data-mobile-composer] {
  background: var(--cg-overlay-paint) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-radius) !important;
  box-shadow: var(--cg-work-shadow) !important;
  -webkit-backdrop-filter: blur(var(--cg-overlay-blur)) saturate(130%);
  backdrop-filter: blur(var(--cg-overlay-blur)) saturate(130%);
}
html[data-cg-engine] #web-mobile-root form[data-mobile-composer] textarea {
  background: transparent !important;
  color: var(--cg-work-ink) !important;
  caret-color: var(--cg-ui-accent) !important;
}
html[data-cg-engine] #web-mobile-root form[data-mobile-composer] textarea::placeholder {
  color: var(--cg-work-muted) !important;
}
html[data-cg-engine] #web-mobile-root form[data-mobile-composer] :is(button,[role="button"]) {
  color: var(--cg-work-ink) !important;
}

@media (max-width: 900px) {
  html[data-cg-engine] #web-mobile-root [data-app-shell][data-cg-workspace] {
    margin: 0 !important; max-width: none !important;
  }
  html[data-cg-engine] #web-mobile-root [role="region"][aria-label="Conversation"] {
    border-radius: 0 !important; border: 0 !important;
  }
}

/* Logged-in ChatGPT shell, identified from its semantic app-shell attributes.
 * The new surface is a different layout from the public web-mobile shell. */
:root[data-cg-engine] {
  --cg-logged-pane: color-mix(in srgb, var(--cg-ui-neutral) var(--cg-octane-pane-opacity, 59%), transparent);
}

/* Native frame layers must let the fixed wallpaper behind the app show through. */
html[data-cg-engine] :is([data-app-shell-frame], [data-app-shell-workspace-row], [data-app-shell-unified-tab-strip], [data-app-shell-page-surface]) {
  background: transparent !important;
  background-image: none !important;
}
html[data-cg-engine] [data-app-shell-unified-tab-strip] > :has(> main[data-app-shell-main-surface]) {
  background: transparent !important;
  background-image: none !important;
}

/* Keep one translucent reading surface; clear only its structural wrappers. */
/* The base stylesheet's :is(#main,main,...) has ID-level specificity. */
html[data-cg-engine] [data-app-shell-frame] main:is(#main, [data-app-shell-main-surface][data-cg-workspace]) {
  background: var(--cg-logged-pane) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-workspace-radius) !important;
  box-shadow: var(--cg-work-shadow) !important;
  color: var(--cg-work-ink) !important;
}
html[data-cg-engine] main[data-app-shell-main-surface] > div:has([data-app-shell-main-content-layout]),
html[data-cg-engine] main[data-app-shell-main-surface] [data-app-shell-main-content-layout],
html[data-cg-engine] main[data-app-shell-main-surface] [data-app-shell-thread-edge-divider],
html[data-cg-engine] main[data-app-shell-main-surface] [data-app-shell-focus-area],
html[data-cg-engine] main[data-app-shell-main-surface] [data-app-shell-main-content-top-fade] {
  background: transparent !important;
  background-image: none !important;
}

/* The navigation rail and chat list share one glass pane without seams. */
html[data-cg-engine] aside[data-app-shell-left-panel-appearance] {
  background: var(--cg-logged-pane) !important;
  border: 1px solid var(--cg-work-line) !important;
  border-radius: var(--cg-workspace-radius) !important;
  box-shadow: var(--cg-work-shadow) !important;
  color: var(--cg-work-ink) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
html[data-cg-engine] aside[data-app-shell-left-panel-appearance] :is(.app-shell-sidebar, .sidebar-navigation, nav[aria-label], nav[class*="sidebar-rail"]),
html[data-cg-engine] aside[data-app-shell-left-panel-appearance] > div:has(> .app-shell-sidebar) {
  background: transparent !important;
  background-image: none !important;
}

/* The responsive sidebar keeps its rail and expanded navigation in separate
 * absolute layers. The expanded layer now owns a native opaque surface.
 * Clear only that structural paint, leaving row/menu feedback intact. */
html[data-cg-engine] aside[data-app-shell-left-panel-appearance]:has(.sidebar-navigation) {
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--cg-work-line), var(--cg-work-shadow) !important;
}
html[data-cg-engine] aside[data-app-shell-left-panel-appearance] .absolute.inset-0.bg-surface:has(> div > .sidebar-navigation) {
  background: transparent !important;
  background-image: none !important;
}

/* Clip the navigation paint to the glass corners, not the native resize
 * separator which lives alongside this wrapper and extends past the pane. */
html[data-cg-engine] aside[data-app-shell-left-panel-appearance] > .overflow-hidden:has(.sidebar-navigation) {
  border-radius: inherit;
}

/* Native controls retain their own hit areas and readable surfaces. */
/* The keyboard-focusable conversation scrollport paints an inset ring around
 * the entire glass pane after a keypress. Suppress only that wrapper's paint;
 * keep its tabindex, native keyboard scrolling and descendant focus feedback. */
html[data-cg-engine] main .thread-scroll-container:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* The new viewport-fixed titlebar lives inside the inset reading pane.
 * Its native border-box clip cuts the mode toggle and can hide the right
 * actions entirely on wide screens. Keep the stacking context and rounded
 * pane paint, but let the fixed native controls extend outside that pane. */
html[data-cg-engine] main[data-app-shell-main-surface]:has(> header[data-app-shell-titlebar]) {
  clip-path: none !important;
  isolation: isolate;
}

/* The conversation footer paints a full-width solid plate; its top fade is
 * in the scroll content's sticky spacer, outside the footer itself. Only
 * clear these inert decoration layers, not composer or popup surfaces. */
html[data-cg-engine] main [data-thread-scroll-footer] > .pointer-events-none.absolute.bg-surface,
html[data-cg-engine] main .thread-scroll-container:has([data-thread-scroll-footer])
  .pointer-events-none.sticky > .pointer-events-none.absolute.bg-gradient-to-t.from-surface {
  background: transparent !important;
  background-image: none !important;
}

html[data-cg-engine] main[data-app-shell-main-surface] [data-app-shell-page-header] {
  color: var(--cg-work-ink) !important;
}

@media (max-width: 900px) {
  html[data-cg-engine] [data-app-shell-frame] main:is(#main, [data-app-shell-main-surface][data-cg-workspace]) {
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
}

}