/* Общие группы кнопок (вариант А, 14.10): рейка у края, открыта одна группа,
   кнопка — низкий шестиугольник со значком и коротким названием. Вид задаёт только этот файл. */
.gz-rail,.gz-ladder{--gz-w:120px;--gz-h:24px;--gz-n:12px;--gz-bg:#121a30;--gz-txt:#dfe6f5;--gz-mut:#8592ad;
  color:var(--gz-txt);font:12px/1.2 "Segoe UI",Roboto,Arial,sans-serif}
.gz-rail{position:relative;display:flex;flex-direction:column;gap:6px;width:calc(var(--gz-w)*2 - var(--gz-n) + 4px);
  font:12px/1.2 "Segoe UI",Roboto,Arial,sans-serif;color:var(--gz-txt);user-select:none;-webkit-user-select:none}
.gz-group{--c:#5aa9ff;position:relative}
.gz-group.gz-drag{opacity:.85;z-index:2147483645;pointer-events:none;filter:drop-shadow(0 4px 10px #000a)}   /* 15.10: едет за курсором */
.gz-slot{height:var(--gz-h);border:1px dashed #5a6585;border-radius:4px}

/* шестиугольник: внешний слой — обводка, ::before — фон внутри */
.gz-hx{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:5px;height:var(--gz-h);padding:0 11px 0 13px;
  border:0;margin:0;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;
  background:color-mix(in srgb,var(--c) 45%,#000);
  clip-path:polygon(var(--gz-n) 0,calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,var(--gz-n) 100%,0 50%)}
.gz-hx::before{content:"";position:absolute;inset:1.5px;z-index:0;background:var(--gz-bg);
  clip-path:polygon(calc(var(--gz-n) - 1px) 0,calc(100% - var(--gz-n) + 1px) 0,100% 50%,calc(100% - var(--gz-n) + 1px) 100%,calc(var(--gz-n) - 1px) 100%,0 50%)}
.gz-hx>*{position:relative;z-index:1}
.gz-hx:hover::before{background:color-mix(in srgb,var(--c) 22%,var(--gz-bg))}
/* 19.10: нажатие видно всегда — фон снят, кайма ярче, текст белый */
.gz-hx.gz-press::before,.gz-hx.gz-press:hover::before{background:#04060b!important}
.gz-hx.gz-press{background:color-mix(in srgb,var(--c) 85%,#fff)!important;color:#fff!important}
.gz-hx:focus-visible{outline:none;background:color-mix(in srgb,var(--c) 80%,#fff)}
.gz-hx.gz-on{background:var(--c);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 70%,transparent))}
.gz-hx.gz-off-dis{opacity:.45;cursor:default}
.gz-hx:not(.gz-on):not(.gz-head){background:color-mix(in srgb,var(--c) 20%,#000)}
.gz-hx:not(.gz-on):not(.gz-head)::before{inset:1px}
.gz-ic{flex:none;width:15px;height:15px;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--c) 70%,#fff)}
.gz-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gz-nm{overflow:hidden;text-overflow:ellipsis}

/* шапка группы */
.gz-head{width:var(--gz-w);height:var(--gz-h);font-weight:600;justify-content:space-between;padding:0 10px 0 14px;cursor:grab}   /* 15.10: шапка высотой с кнопку (24) */
.gz-head::before{background:color-mix(in srgb,var(--c) 36%,#0f1526)}
.gz-head:hover::before{background:color-mix(in srgb,var(--c) 50%,#0f1526)}
.gz-head .gz-ar{font-size:11px;opacity:.8}
.gz-hr{display:flex;align-items:center;gap:3px;flex:none}
.gz-pin{display:flex;align-items:center;justify-content:center;width:12px;height:14px;opacity:.35;cursor:pointer;transform:rotate(0deg);transition:opacity .15s}   /* 15.10: закреп группы */
.gz-pin:hover{opacity:.8}
.gz-pinned .gz-pin{opacity:1;color:var(--c);filter:brightness(1.6)}

/* соты: 2 столбца, второй сдвинут на полкнопки; позиции ставит grozd.js */
.gz-soty{position:relative;margin-top:3px}
.gz-soty>.gz-hx{position:absolute;width:var(--gz-w)}
.gz-wide{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.gz-control{width:100%;cursor:default}
.gz-control>label{display:flex;align-items:center;gap:8px;width:100%;min-width:0;color:var(--gz-mut);font:inherit}
.gz-control input{min-width:0;flex:1;width:64px;height:20px;box-sizing:border-box;padding:0 4px;border:0;background:transparent;color:var(--gz-txt);font:inherit}
.gz-control input[type=range]{padding:0;accent-color:var(--c)}
.gz-control output{font:inherit;font-variant-numeric:tabular-nums}
.gz-group:not(.gz-open) .gz-soty,.gz-group:not(.gz-open) .gz-wide{display:none}

/* значение со стрелками: ширина постоянна, наведение даёт ◂◂ и 0 */
.gz-val{width:100%;padding:0 6px;gap:0;cursor:default}
.gz-val .gz-a{flex:none;width:22px;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:color-mix(in srgb,var(--c) 70%,#fff)}
.gz-val .gz-a:hover{color:#fff}
.gz-val .gz-a2{display:none}
.gz-val .gz-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.gz-val .gz-nm{color:var(--gz-mut)}
.gz-val .gz-v{font-variant-numeric:tabular-nums}
.gz-val .gz-z{display:none;width:22px;height:18px;align-items:center;justify-content:center;cursor:pointer;font-size:11px;
  background:color-mix(in srgb,var(--c) 40%,var(--gz-bg));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.gz-val:hover .gz-a2,.gz-val:hover .gz-z{display:flex}
.gz-val:hover .gz-nm{display:none}

/* ползунок (значение с frac): пунктир, ромб цветом группы, число по центру, название — в подсказке */
.gz-sl .gz-mid{position:relative;align-self:stretch;cursor:ew-resize;touch-action:none}
.gz-sl .gz-mid::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed color-mix(in srgb,var(--c) 55%,transparent);pointer-events:none}
.gz-sl .gz-th{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--c);transform:rotate(45deg);pointer-events:none}
.gz-sl .gz-v{position:relative;padding:0 4px;background:var(--gz-bg);border-radius:2px;pointer-events:none}
.gz-sl .gz-nm,.gz-sl:hover .gz-nm{display:none}
.gz-sl .gz-a2,.gz-sl:hover .gz-a2{display:none}

/* список: шапка с выбранным, лесенка вариантов справа */
.gz-list{width:100%;justify-content:space-between}
.gz-list .gz-nm{color:var(--gz-mut)}
.gz-list .gz-v{margin-left:auto;margin-right:6px}
.gz-lc{justify-content:flex-start}.gz-lc .gz-v{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gz-ladder{position:fixed;z-index:2147483645;display:flex;flex-direction:column;gap:3px}
.gz-ladder .gz-hx{width:var(--gz-w)}

/* длинная подсказка при «?»: рядом, на фоне, без рамки */
.gz-tip{position:fixed;z-index:2147483646;max-width:240px;padding:5px 10px;border-radius:4px;background:var(--gz-bg,#121a30);
  color:#c5cee3;font:12px/1.3 "Segoe UI",Roboto,Arial,sans-serif;pointer-events:none}
.gz-mask{display:block;width:14px;height:14px;background:currentColor;-webkit-mask:var(--gz-mask) center/contain no-repeat;mask:var(--gz-mask) center/contain no-repeat}

/* рейка на странице: у левого края окна, своя прокрутка; старые грозди спрятаны */
.gz-dock{position:absolute;left:14px;top:34px;bottom:44px;z-index:2147483640;overflow-y:auto;overflow-x:visible;scrollbar-width:thin;padding:2px 30px 8px 0}
.gz-adopted{display:none!important}
.gz-dot{width:10px;height:10px;border-radius:50%;margin-left:auto;flex:none}
.gz-color{position:absolute!important;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2!important;border:0;padding:0}

/* 15.10: до перевода на рейку старые грозди не показываются (класс gz-pre у <html> снимает ZerkGrozd.adopt) — иначе при загрузке мигают старые кнопки */
html.gz-pre :is(#w-cone .cgrp,#ringTbl,.zerk-grape){visibility:hidden!important}
/* 15.10: метки режимов у кнопок с надписью по кругу — сколько положений и какое сейчас */
.gz-md{margin-left:auto;flex:none;display:flex;align-items:center;gap:1px;padding-left:3px}
.gz-md i{font-style:normal;color:color-mix(in srgb,var(--c) 35%,#000);line-height:1}
.gz-md i.on{color:color-mix(in srgb,var(--c) 60%,#fff)}
.gz-md{gap:2px} .gz-md i{width:4px;height:4px;border-radius:50%;background:currentColor}
.gz-hx.gz-pair{padding:0;gap:0}
.gz-hx.gz-pair::before,.gz-hx.gz-pair:hover::before{background:linear-gradient(90deg,var(--gz-f0,var(--gz-bg)) 50%,var(--gz-f1,var(--gz-bg)) 50%)!important}
.gz-pair .gz-half{flex:1 1 0;align-self:stretch;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--gz-k,inherit);cursor:pointer}
.gz-pair .gz-half+.gz-half{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--c) 60%,transparent)}
.gz-pair .gz-half:hover{text-shadow:0 0 6px currentColor}
.gz-pair .gz-half.gz-on{color:transparent;-webkit-text-stroke:1.2px var(--gz-k,#fff)}
.gz-hx.gz-rainbow,.gz-hx.gz-rainbow:not(.gz-on):not(.gz-head){background:linear-gradient(90deg,#ff4d4d,#ffb84d,#fff04d,#5dff6a,#4de3ff,#5a7dff,#d45aff)!important}
/* половина пары включена: обычно — яркий знак со свечением; у выреза (gz-cut) — цифра контуром */
.gz-pair .gz-half.gz-on{color:#fff;-webkit-text-stroke:0;text-shadow:0 0 6px var(--c)}
.gz-pair.gz-cut .gz-half.gz-on{color:transparent;-webkit-text-stroke:1.2px var(--gz-k,#fff);text-shadow:none}
.gz-pair:not(.gz-cut):not(.gz-rainbow) .gz-half{font-size:15px}
/* «двигай бегунок почти до краёв, минимальный отступ, там тонкий пусть» — у ползунка стрелки узкие, дорожка почти во всю кнопку */
.gz-val.gz-sl{padding:0 3px}
.gz-sl .gz-a{width:10px;font-size:9px}
/* «и высоту такую» — бегунок-ромб почти во всю высоту кнопки, тонкий отступ сверху и снизу */
.gz-sl .gz-th{width:14px;height:calc(var(--gz-h) - 6px);margin:0 0 0 -7px;top:3px;transform:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
/* пара [0 | название | 1]: цифры — узкие края, название — посередине; заливка битов — только под краями; включённая сторона — яркая кайма её половины */
.gz-hx.gz-pair:not(.gz-rainbow){background:linear-gradient(90deg,var(--gz-r0,color-mix(in srgb,var(--c) 30%,#000)) 50%,var(--gz-r1,color-mix(in srgb,var(--c) 30%,#000)) 50%)!important}
.gz-pair .gz-half{flex:none;width:calc(var(--gz-n) + 12px)}
.gz-pair .gz-half+.gz-half,.gz-pair .gz-half{box-shadow:none}
.gz-pair .gz-pm{flex:1 1 0;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;color:var(--gz-mut,inherit);font-size:12px;pointer-events:none}
.gz-hx.gz-pair::before,.gz-hx.gz-pair:hover::before{background:linear-gradient(90deg,var(--gz-f0,var(--gz-bg)) 0 calc(var(--gz-n) + 12px),var(--gz-bg) calc(var(--gz-n) + 12px) calc(100% - var(--gz-n) - 12px),var(--gz-f1,var(--gz-bg)) calc(100% - var(--gz-n) - 12px))!important}
.gz-pair .gz-half.gz-on,.gz-pair.gz-cut .gz-half.gz-on{color:var(--gz-k,#fff);-webkit-text-stroke:0;text-shadow:none}
.gz-pair:not(.gz-cut):not(.gz-rainbow) .gz-half{font-size:13px}
/* «там же стрелки — тогда не до конца, и стрелкам фон другой, чтоб видно — шевроном»: стрелки ползунка — шевроны своим фоном у самых краёв, дорожка между ними */
.gz-val.gz-sl{padding:0}
.gz-sl .gz-a{width:20px;font-size:0;align-self:stretch;height:auto;background:color-mix(in srgb,var(--c) 55%,#000)}
.gz-sl .gz-a:hover{background:var(--c)}
.gz-sl .gz-a:nth-child(2){clip-path:polygon(0 50%,var(--gz-n) 0,100% 0,calc(100% - 7px) 50%,100% 100%,var(--gz-n) 100%)}
.gz-sl .gz-a:nth-last-child(2){clip-path:polygon(0 0,calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,0 100%,7px 50%)}
.gz-sl .gz-mid{margin:0 4px}
/* «1 и 0 по максимуму шевронами, текст в центре, и обводку — шевроном»: края пары — шевроны во всю высоту, заливка цветом бита, включённый — яркая кайма шеврона */
.gz-hx.gz-pair:not(.gz-rainbow){background:color-mix(in srgb,var(--c) 30%,#000)!important}
.gz-hx.gz-pair::before,.gz-hx.gz-pair:hover::before{background:var(--gz-bg)!important}
.gz-pair .gz-half{width:calc(var(--gz-n) + 18px);font-size:13px}
.gz-pair .gz-half.gz-h0{background:var(--gz-r0);clip-path:polygon(0 50%,var(--gz-n) 0,100% 0,calc(100% - 8px) 50%,100% 100%,var(--gz-n) 100%);padding-right:4px}
.gz-pair .gz-half.gz-h1{background:var(--gz-r1);clip-path:polygon(0 0,calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,0 100%,8px 50%);padding-left:4px}
.gz-pair .gz-half::before{content:"";position:absolute;inset:1.5px;z-index:-1;clip-path:inherit}
.gz-pair .gz-half.gz-h0::before{background:var(--gz-f0,var(--gz-bg))}
.gz-pair .gz-half.gz-h1::before{background:var(--gz-f1,var(--gz-bg))}
.gz-pair .gz-pm{color:var(--gz-txt,#dfe6f5)}
/* «тут фон у 1 убери и у 0» — у пары «Прозр.» шевроны без заливки, только кайма; цифры — цветом своего бита */
.gz-pair.gz-cut .gz-half::before{background:var(--gz-bg)!important}
.gz-pair.gz-cut .gz-half.gz-h1{color:var(--gz-f1,inherit)}
/* «тут 2 кнопки (значок + текст „Ромбы“) и (стык + значок стыка) через \ по центру» — пара gz-split: две половины, косая черта посередине, у каждой своя кайма */
.gz-pair.gz-split .gz-pm{display:none}
.gz-pair.gz-split .gz-half{flex:none;width:calc(50% + 4px);padding:0;font-size:11px;font-weight:400;gap:4px;white-space:nowrap}
.gz-pair.gz-split .gz-half.gz-h0{clip-path:polygon(0 50%,var(--gz-n) 0,100% 0,calc(100% - 8px) 100%,var(--gz-n) 100%);padding:0 6px 0 4px}
.gz-pair.gz-split .gz-half.gz-h1{margin-left:-7px;clip-path:polygon(9px 0,calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,1px 100%);padding:0 4px 0 6px}
.gz-pair.gz-split .gz-half::before{background:var(--gz-bg)!important}
.gz-pair.gz-split .gz-half.gz-on{color:#fff;text-shadow:0 0 6px var(--c)}
/* наклон черты: gz-bs — «\» (верх левее), без него — «/» */
.gz-pair.gz-split.gz-bs .gz-half.gz-h0{clip-path:polygon(0 50%,var(--gz-n) 0,calc(100% - 8px) 0,100% 100%,var(--gz-n) 100%)}
.gz-pair.gz-split.gz-bs .gz-half.gz-h1{clip-path:polygon(1px 0,calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,9px 100%)}
/* «тут также — две половины кнопок через /» — «Прозр.» и «Цвет»: половины 0 / 1 через «/», название поверх по центру */
.gz-pair.gz-split.gz-mid .gz-pm{display:block;position:absolute;left:0;right:0;top:0;bottom:0;line-height:var(--gz-h);text-align:center;z-index:2;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}
.gz-pair.gz-split.gz-mid .gz-half{font-size:13px;font-weight:700}
.gz-pair.gz-split.gz-mid .gz-half.gz-h0{justify-content:flex-start;padding-left:calc(var(--gz-n) - 2px)}
.gz-pair.gz-split.gz-mid .gz-half.gz-h1{justify-content:flex-end;padding-right:calc(var(--gz-n) - 2px)}
.gz-pair.gz-split.gz-mid .gz-half.gz-h0::before{background:var(--gz-f0,var(--gz-bg))!important}
.gz-pair.gz-split.gz-mid .gz-half.gz-h1::before{background:var(--gz-f1,var(--gz-bg))!important}
.gz-pair.gz-split.gz-mid.gz-cut .gz-half::before{background:var(--gz-bg)!important}
.gz-pair.gz-split.gz-mid .gz-half.gz-on{color:var(--gz-k,#fff);text-shadow:none}
.gz-pair.gz-split.gz-mid.gz-cut .gz-half.gz-h1{color:var(--gz-f1,inherit)}
.gz-pair.gz-split.gz-rainbow .gz-half{background:transparent}
/* правая половина пары не вылезает за кнопку (была шире на 1 px — кайма у острия срезалась) */
.gz-pair.gz-split .gz-half.gz-h1{width:calc(50% + 3px)}
/* числа по бокам бегунка (gz-sl2): прежнее «96 / 128» по центру спрятано */
.gz-sl2 .gz-mid>.gz-v{display:none}
.gz-sl2 .gz-vl,.gz-sl2 .gz-vr{position:absolute;top:50%;transform:translateY(-50%);padding:0 3px;background:var(--gz-bg);border-radius:2px;pointer-events:none;font-variant-numeric:tabular-nums;font-size:11px;line-height:14px}
.gz-sl2 .gz-vr{color:var(--gz-mut)}
.gz-total{position:fixed;transform:translateY(-50%);z-index:2147483000;padding:1px 6px;font:11px/16px system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#dfe6f5;
  background:#121a30;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);border-radius:2px;pointer-events:none;white-space:nowrap}
/* «с другой стороны надо общее, и без обводки и без фона — просто число» */
.gz-total{border:0;background:none;padding:0;color:var(--gz-mut,#8592ad);text-shadow:0 0 3px #000,0 0 2px #000}
/* «при наведении на бегунок — курсор рука и вертикальный пунктир поверх бегунка, чуть выше его» */
.gz-sl .gz-th{pointer-events:auto;cursor:pointer}
.gz-sl .gz-mid:has(.gz-th:hover)::after{content:"";position:absolute;left:var(--thx);top:0;bottom:0;border-left:1px dotted #fff;z-index:3;pointer-events:none}
/* половины пары — ширина вместе с отступами (box-sizing): иначе отступы 16 px прибавлялись сверху, правая половина вылезала за кнопку и срезалась («1» и «↔» не видно) */
.gz-pair .gz-half{box-sizing:border-box}
/* кнопки рейки под открытым списком (тот же столбец, та же группа) — затемнены */
.gz-hx.gz-under{opacity:.18;pointer-events:none;transition:opacity .12s}
/* пара в режиме «одна»: правая половина спрятана, левая — во всю кнопку */
.gz-pair.gz-one .gz-half.gz-h1{display:none}
.gz-pair.gz-split.gz-one .gz-half.gz-h0{width:100%;clip-path:polygon(0 50%,var(--gz-n) 0,calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,var(--gz-n) 100%)}
/* пара gz-wl — широкая левая половина (кнопка + название), узкая правая (цвет) */
.gz-pair.gz-split.gz-wl .gz-half.gz-h0{width:calc(var(--gz-w) * .72 + 4px)}
.gz-pair.gz-split.gz-wl .gz-half.gz-h1{width:calc(var(--gz-w) * .28 + 3px);font-size:16px;color:var(--gz-k,#fff)}
/* «у точки тоже границы при включении подсветки» — правая половина горит каймой вместе с левой, точка остаётся своего цвета */
.gz-pair.gz-split.gz-wl .gz-half.gz-h1.gz-on{color:var(--gz-k,#fff);text-shadow:0 0 6px var(--gz-k,#fff)}
/* «Автозум — объедини с его ползунком»: включатель слева и режим справа — части той же кнопки-ползунка */
.gz-val .gz-vh,.gz-val .gz-vt{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 7px;cursor:pointer;font-size:12px;color:var(--gz-mut);white-space:nowrap}
.gz-val .gz-vh{padding-left:10px;box-shadow:inset -1px 0 0 color-mix(in srgb,var(--c) 45%,transparent)}
.gz-val .gz-vt{padding-right:10px;box-shadow:inset 1px 0 0 color-mix(in srgb,var(--c) 45%,transparent)}
.gz-val .gz-vh:hover,.gz-val .gz-vt:hover{color:#fff}
.gz-val .gz-vh.gz-on{color:#fff;text-shadow:0 0 6px var(--c)}
.gz-val.gz-vhd .gz-a{display:none}   /* ◂ ▸ в середине кнопки мешают: значение — перетаскиванием и колесом */
.gz-val.gz-vhd .gz-mid{margin:0 6px}
/* «Мин. строк и Мин. пар — в одну пополам» (gz-vp); пара во всю ширину (gz-pw) — «Поиск осей» над ними */
.gz-val.gz-vp{padding:0 4px}
.gz-vp .gz-vph{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:3px;font-size:12px}
.gz-vp .gz-vph .gz-nm{flex:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gz-vp .gz-vph .gz-v{min-width:12px;text-align:left}
.gz-vp .gz-vps{flex:none;align-self:stretch;width:1px;margin:3px 2px;background:color-mix(in srgb,var(--c) 45%,transparent)}
.gz-wide>.gz-pair.gz-pw{width:100%}
/* блок потока (it.sec): ползунок с включателем, под ним его кнопки, ниже его ползунки — своим цветом */
.gz-sec{display:flex;flex-direction:column}
.gz-sec>.gz-wide{margin-top:0}
.gz-sec>.gz-soty{margin:3px 0 0}
.gz-sec+.gz-sec,.gz-wide>.gz-hx+.gz-sec,.gz-sec+.gz-hx{margin-top:3px}
.gz-sec>.gz-bot,.gz-sec>.gz-wide+.gz-wide{margin-top:3px}
.gz-val .gz-vt.gz-on{color:#fff;text-shadow:0 0 6px var(--c)}
/* ползунок с подписанными стрелками (it.arrows) — стрелки вдвое шире, подпись видна; бегунок со значком (it.thumb) — шире, значок на нём */
.gz-sl.gz-al .gz-a:not(.gz-a2){width:40px;font-size:11px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;text-shadow:0 0 2px #000}
.gz-sl.gz-thb .gz-th{width:30px;margin-left:-15px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:#0d1119;font-weight:700;cursor:pointer}
/* Hub v0.382, «все 3 стыка в одну кнопку с номерами 1, 2, 3»: [название | 1 | 2 | 3] — название слева, номера узкими ячейками справа; включён любой — яркая кайма */
.gz-hx.gz-pair.gz-tri:not(.gz-rainbow){background:color-mix(in srgb,var(--c) 30%,#000)!important}
.gz-hx.gz-pair.gz-tri.gz-any:not(.gz-rainbow){background:var(--c)!important}
.gz-hx.gz-pair.gz-tri::before,.gz-hx.gz-pair.gz-tri:hover::before{background:var(--gz-bg)!important}
/* Hub v0.386, «1 как сейчас, потом через отступ 2 ромбом, и зеркально 3 как 1; фон ромба — без вертикальной полосы»: [Стык ‹1 ◇2 3›] —
   1 — стрелка влево, у которой правый край — уголок по грани ромба (вертикальной кромки нет), 2 — ромб с отступом, 3 — зеркало 1.
   Выбранный номер — фигура цветом группы; включён стык — кайма всей кнопки (gz-any) */
.gz-pair.gz-tri .gz-pm{order:0;flex:1 1 0;min-width:0;padding-left:calc(var(--gz-n) + 1px);text-align:left;color:var(--gz-txt,inherit);font-size:12px;text-overflow:clip;pointer-events:none}
.gz-pair.gz-tri .gz-half{flex:none;position:relative;font-size:13px;color:var(--gz-mut,inherit)}
.gz-pair.gz-tri .gz-half::before{content:'';position:absolute;z-index:-1;background:color-mix(in srgb,var(--c) 22%,var(--gz-bg))}
.gz-pair.gz-tri .gz-h0{order:1;width:23px;padding-left:3px;box-sizing:border-box}
.gz-pair.gz-tri .gz-h0::before{inset:3px 0;clip-path:polygon(7px 0,100% 0,calc(100% - 9px) 50%,100% 100%,7px 100%,0 50%)}
.gz-pair.gz-tri .gz-h1{order:2;width:24px;margin:0 -6px}
.gz-pair.gz-tri .gz-h1::before{left:50%;top:50%;width:22px;height:18px;margin:-9px 0 0 -11px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.gz-pair.gz-tri .gz-h2{order:3;width:23px;padding-right:3px;box-sizing:border-box;margin-right:calc(var(--gz-n) - 3px)}
.gz-pair.gz-tri .gz-h2::before{inset:3px 0;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%,9px 50%)}
.gz-pair.gz-tri .gz-half.gz-on::before{background:color-mix(in srgb,var(--c) 70%,var(--gz-bg))}
.gz-pair.gz-tri.gz-any .gz-half.gz-on::before{background:var(--c)}
.gz-pair.gz-tri .gz-half:hover{color:#fff}
.gz-pair.gz-tri .gz-half.gz-on{color:#fff;text-shadow:0 0 4px #000}
/* Hub v0.387, «когда на 1 или 3 — они тоже ромбами становятся, перекрывают часть 2, пусть»: выбранная крайняя — ромб поверх края двойки */
.gz-pair.gz-tri .gz-half.gz-on{z-index:2}
.gz-pair.gz-tri .gz-h0.gz-on::before,.gz-pair.gz-tri .gz-h2.gz-on::before{inset:auto;left:50%;top:50%;width:24px;height:20px;margin:-10px 0 0 -12px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
/* 20.10: кнопка со списком (listHover, .gz-lst) — стрелка обводкой справа: правый угол шестиугольника светлой каймой; ▾ не нужна */
.gz-hx.gz-lst::after{content:"";position:absolute;inset:0;z-index:2;margin:0;padding:0;pointer-events:none;background:color-mix(in srgb,var(--c) 55%,#fff);
  clip-path:polygon(calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,calc(100% - var(--gz-n) - 2px) 100%,calc(100% - 2.5px) 50%,calc(100% - var(--gz-n) - 2px) 0)}
.gz-hx.gz-lst .gz-ar{display:none}