/* /demo/ pages (2026-10-13): the owner's demo pack inside the site. The modules keep their own product look; this file gives
   every text the site's font, puts the pack's shell (cards, panels, buttons, hints) in the site's colours and fits it under the header. */
body.gx-demos{--bg:#080B0F}   /* nx-stats.css and nx-vip.css set their own --bg on :root */
/* the site's fonts on everything, the modules included (they name their fonts themselves, some with !important), split as in style.css:
   running text is "GX Text", h1 and h2 are "GX Geo". The header, ticker and footer keep the theme's own rules; the second selector is for
   what the modules hang on <body> (picture viewer, menus). */
body.gx-demos main,body.gx-demos main *,body.gx-demos>:not(header,main,footer,.tk,.fs,.intro,.mgd-o,.skip),body.gx-demos>:not(header,main,footer,.tk,.fs,.intro,.mgd-o,.skip) *{font-family:"GX Text","Inter","Noto Sans Georgian",system-ui,sans-serif!important}
body.gx-demos main :is(h1,h2),body.gx-demos main :is(h1,h2) *{font-family:"GX Geo","Inter","Noto Sans Georgian",system-ui,sans-serif!important}
body.gx-demos{--ft:"GX Text","Inter","Noto Sans Georgian",system-ui,sans-serif;--font:"GX Text","Inter","Noto Sans Georgian",system-ui,sans-serif}
/* the modules place menus and lights in pixels from the pointer, which a zoomed box would shift: only the site's own blocks take the site zoom */
body.gx-demos main{zoom:1}
.gxd-head,.gxd-cta{zoom:calc(var(--bz)*var(--fz,1))}
.gxd-head{padding:40px 0 6px}
.gxd-head h1{font-size:clamp(26px,3.2vw,42px);line-height:1.18;max-width:22em}
.gxd-lead{margin:14px 0 0;max-width:78ch;color:var(--tx2)}
.gxd-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ln)}
.gxd-tabs a{padding:8px 15px;border:1px solid var(--ln);border-radius:999px;font-size:13px;font-weight:600;line-height:1.3;color:var(--tx2);text-decoration:none;transition:color .25s,border-color .25s,background .25s}
.gxd-tabs a:hover{color:#fff;border-color:var(--ln2)}
.gxd-tabs a.on{color:var(--ink);background:var(--a);border-color:var(--a)}
/* the stage */
.gxd-stage{padding:22px 0 50px;font-size:15px;line-height:1.55;color:var(--gx-ink);
	--gx-bg:#080B0F;--gx-bg2:#0B1015;--gx-bg3:#0D1116;--gx-line:#242A31;--gx-ink:#F4F3F0;--gx-mute:#B9BEC7;--gx-a1:#DCC5A2;--gx-a2:#E8D4B5}
/* the same box as the site's .w, which is drawn zoomed: 1240px and its side gaps times the zoom, and the left gutter that clears the text-size pill */
.gxd-in{width:min(calc(1240px*var(--bz)),calc(100% - 56px*var(--bz)));margin:0 auto}
@media (min-width:1321px){.gxd-in{padding-left:calc(64px*var(--bz))}}
.gxd-stage{accent-color:var(--a)}
.gxd-stage .gx-panel{overflow-x:auto}
/* the theme makes every picture a block; the modules expect the browser's own rule */
:where(.gxd-stage,body.gx-demos>:not(header):not(main):not(footer)) img{display:inline;max-width:none}
/* the pack's shell in the site's colours */
.gxd-stage .gx-h{margin:40px 0 14px;font-size:20px;font-weight:700;letter-spacing:0}
.gxd-stage .gx-try li{color:var(--tx2)}
.gxd-stage .gx-try a,.gxd-stage .gx-foot a,.gxd-stage .gx-note a{color:var(--a)}
.gxd-stage .gx-btn{border-color:rgba(220,197,162,.5);background:rgba(220,197,162,.1);color:var(--tx)}
.gxd-stage .gx-btn:hover{background:rgba(220,197,162,.2)}
.gxd-stage .gx-btn.is-main{border:0;background:var(--a);color:var(--ink)}
.gxd-stage .gx-btn.is-main:hover{background:var(--a2)}
.gxd-stage a.gx-card:hover{border-color:rgba(220,197,162,.6);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.gxd-stage .gx-card .gx-ic{background:rgba(220,197,162,.12)}
.gxd-stage .gx-card ul{color:var(--tx2)}
.gxd-stage .gx-card .gx-go{color:var(--a)}
.gxd-stage .gx-bar{background:var(--a)}
.gxd-cta{padding:46px 0 64px;border-top:1px solid var(--ln)}
.gxd-cta h2{font-size:clamp(22px,2.4vw,30px)}
.gxd-cta p{margin:10px 0 0;color:var(--tx2)}
.gxd-cta .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (max-width:640px){.gxd-head{padding-top:26px}.gxd-in{width:calc(100% - 32px*var(--bz))}.gxd-tabs{flex-wrap:nowrap;overflow-x:auto;margin-right:-14px;padding-right:14px;scrollbar-width:none}.gxd-tabs::-webkit-scrollbar{display:none}.gxd-tabs a{flex:none}}
/* phone: the pile of faces in the chat header left no room for the room's name */
@media (max-width:480px){body.gx-demos .nxc.is-page .nxc-stack{display:none}}
/* player: GenxPlayer's own sheet makes every svg inside it 100% wide and every box content-box, which blew the ad's "learn more" button up to half the player */
.nxdp-ui .nxp-adui,.nxdp-ui .nxp-adui *{box-sizing:border-box}
.nxdp-ui .nxp-adui svg{width:16px;height:16px;flex:none}
/* the player names its own font with two classes and !important (nx-dp.css), which outranked the rule above: its controls, settings and
   right-click menu take the site's running-text font too (owner, 2026-10-13) */
body.gx-demos .nxdp-host .gxplayer,body.gx-demos .nxdp-host .gxplayer *,body.gx-demos .nxp,body.gx-demos .nxp *{font-family:"GX Text","Inter","Noto Sans Georgian",system-ui,sans-serif!important}
/* the speed list was 70px wide — made for "Normal"; the Georgian word did not fit and was cut (owner's screenshot, 2026-10-13) */
body.gx-demos .gxplayer-controller .gxplayer-icons .gxplayer-setting .gxplayer-setting-box.gxplayer-setting-box-narrow{width:124px!important}
body.gx-demos .gxplayer-setting-speed-item .gxplayer-label{white-space:nowrap}
/* the site's own icons (assets/icons.css) inside the demo shell: a larger one in a hub card's badge */
.gxd-stage .gx-card .gx-ic .gx-i4{width:26px;height:26px;margin:0;vertical-align:0;color:var(--tx)}
.gxd-stage .gx-try .gx-i4{color:var(--tx)}
/* demo polish (audit of 2026-10-13) */
/* the ad counters: five columns must fit their panel without a sideways scroll */
.gxd-stage #gxAdStats{table-layout:fixed}.gxd-stage #gxAdStats th,.gxd-stage #gxAdStats td{padding:8px 4px;font-size:12.5px;overflow-wrap:anywhere}.gxd-stage #gxAdStats th:first-child,.gxd-stage #gxAdStats td:first-child{width:30%;padding-left:8px}.gxd-stage #gxAdStats th{font-size:11px;letter-spacing:0}
/* the click demo's stand-ins in the site's colours instead of the pack's purple */
.gxd-stage .gxc-video button{background:var(--a);color:var(--ink)}
.gxd-stage .gxc-video button .gx-i4{margin:0;width:24px;height:24px;vertical-align:middle;color:var(--ink)}.gxd-stage .gxc-video button .gx-i4 .f{fill:var(--ink)}
.gxd-stage .gxc-ad{background:linear-gradient(135deg,#1a1510,#2b2114);border:1px solid rgba(220,197,162,.55);color:var(--a)}