/* Page layout only; button geometry, colours and groups come from grozd.css. */
.may-list-hidden{visibility:hidden!important;pointer-events:none!important}
#mayatnikRail,#mayatnikStatus,#mayMenu,#mayHelp,#mayAbout,#mayZen,#mayZenOut{display:none}
body.mayatnik-menu-ready{display:grid;grid-template-columns:256px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto auto;height:100dvh;overflow:hidden}
.mayatnik-menu-ready>header{grid-column:1/-1;padding:8px 14px;gap:10px}
.mayatnik-menu-ready header .sub{display:none}
.mayatnik-menu-ready #mayMenu,.mayatnik-menu-ready #mayHelp,.mayatnik-menu-ready #mayAbout,.mayatnik-menu-ready #mayZen{display:inline-flex;--c:#80aee8;--gz-h:24px;--gz-n:10px;--gz-bg:#121a30;align-items:center;font:12px 'Segoe UI',sans-serif}
.mayatnik-menu-ready #mayZen{margin-left:auto}
#mayCorner{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:2px}
#mayCorner #mayZen{margin-left:0}
#mayCorner #mayHelp{justify-content:center}
.mayatnik-menu-ready #mayHideAxes:not([hidden]){display:inline-flex;--c:#ff87cf;--gz-h:24px;--gz-n:10px;--gz-bg:#121a30;align-items:center;font:12px 'Segoe UI',sans-serif}
#mayHideAxes[hidden]{display:none}
#symAxes{position:fixed;pointer-events:none;margin:0;background:transparent;z-index:3}
#symAxes[hidden]{display:none}
#symInfo{color:#9fc5ed;font:11px var(--mono)}
.mayatnik-menu-ready #mayatnikRail{display:block;grid-column:1;grid-row:2/6;overflow:auto;min-height:0;padding:8px 8px 16px 14px;scrollbar-width:thin;border-right:1px solid var(--line);background:#0d1119}
.mayatnik-menu-ready .bar{display:none}
.mayatnik-menu-ready #imageStats{grid-column:2;grid-row:2;font-size:11px;padding:5px 12px;min-width:0;overflow-wrap:anywhere}
.mayatnik-menu-ready #ochkiBox{grid-column:2;grid-row:3;min-width:0}
.mayatnik-menu-ready #wrap{grid-column:2;grid-row:4;min-width:0;min-height:0}
#mayBottomBar{display:none}
.mayatnik-menu-ready #mayBottomBar{display:flex;grid-column:1/-1;grid-row:6;justify-content:center;align-items:center;min-width:0;padding:3px 8px;border-top:1px solid var(--line);background:#0d1119}   /* v0.327: нижняя полоса меню */
#mayBottomBar{--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;position:relative;min-height:0;padding:3px 4px!important;box-sizing:border-box}   /* v0.334: отступы вдвое меньше, кнопки — стандартной высоты 24 */
#mayBottomBar .gz-hx{background:color-mix(in srgb,var(--c) 75%,#000)}   /* v0.334: обводка кнопок полосы — яркая, как у «Прозр.» */   /* v0.330: переменные grozd (как в рейке) — ползунок не прозрачный; выше */
#mayBottomBar>.gz-hx{width:min(260px,calc(100% - 270px));box-sizing:border-box}   /* v0.339: вдвое уже */
/* v0.335: «Сброс прямо в ползунке рядом с плеем; плей побольше, ромб за границы немного»: ползунку полосы клип — шестиугольник плюс полосы над и под
   дорожкой (фон там не рисуется, видно только бегунок); бегунок 34 × 32, «✖» — ромбом у бегунка (справа, у правого края — слева) */
#mayBottomBar>.gz-sl{clip-path:polygon(var(--gz-n) 0,var(--gz-n) -10px,calc(100% - var(--gz-n)) -10px,calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,calc(100% - var(--gz-n)) calc(100% + 10px),var(--gz-n) calc(100% + 10px),var(--gz-n) 100%,0 50%)}
#mayBottomBar>.gz-sl .gz-th{width:2px;height:34px;top:50%;margin:-17px 0 0 -1px;transform:none;clip-path:none;background:#fff;box-shadow:0 0 3px var(--c);z-index:10;cursor:ew-resize}   /* v0.339: бегунок — линия поверх всего */
#mayBottomBar>.gz-sl .gz-th::after{content:"";position:absolute;inset:0 -6px}
#mayBottomBar .may-bb-play{position:absolute;z-index:5;top:50%;left:50%;width:34px;height:32px;margin:-16px 0 0 -17px;display:flex;align-items:center;justify-content:center;padding:0;border:0;
  background:var(--c);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);color:#0d1119;font:700 13px 'Segoe UI',sans-serif;cursor:pointer;pointer-events:auto}
#mayBottomBar .may-bb-play:hover{filter:brightness(1.2)}
#mayBottomBar .may-bb-rs{position:absolute;z-index:5;top:50%;left:calc(50% + 21px);width:22px;height:22px;margin-top:-11px;display:flex;align-items:center;justify-content:center;padding:0;border:0;
  background:#ff7373;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);color:#0d1119;font:700 10px 'Segoe UI',sans-serif;cursor:pointer;pointer-events:auto}
#mayBottomBar .may-bb-rs:hover{background:#ff9b9b}
@media(max-width:600px){#mayBottomBar>.gz-sl{width:calc(100% - 270px);min-width:80px}#mayBottomBar{justify-content:flex-start!important}#mayBbHorr{right:6px}#mayBbHorr>.gz-hx{padding:0 10px}}
/* v0.332: «Хорр» в нижней полосе — список вверх, по два размера в кнопке */
#mayBbHorr{position:absolute;right:6px;top:50%;transform:translateY(-50%);--c:#73e4a5}
#mayBbHorr>.gz-hx{width:var(--gz-w);justify-content:center;padding:0 14px;cursor:pointer;color:#dfe6f5;font:600 12px 'Segoe UI',sans-serif}
#mayBbHorr>.gz-hx>span,#mayBbHorr .may-hp>*{position:relative;z-index:1}
#mayBbHorr>.gz-hx b{color:var(--c);font-weight:700}
.may-hp-pop{position:absolute;right:0;left:0;bottom:calc(100% + 2px);z-index:60;display:flex;flex-direction:column;gap:4px;padding:2px 0;background:no-repeat 0 0;filter:drop-shadow(0 6px 14px #000a)}   /* v0.334: рамка зубцами с обводкой — фон и кайма рисуются SVG (hpFrame) */
.may-hp-pop[hidden]{display:none}
.may-hp{width:var(--gz-w);padding:0 12px!important;gap:0;justify-content:space-between}
.may-hp-h{flex:1 1 0;text-align:center;cursor:pointer;color:#c9d3e3;font:600 12px var(--mono,monospace);padding:0 4px}
.may-hp-h:hover{color:#fff}
.may-hp-h.on{color:var(--c)}
.may-hp-sep{flex:none;align-self:stretch;width:1px;margin:5px 3px;background:color-mix(in srgb,var(--c) 60%,transparent)}
body.may-zen #mayBottomBar{display:none!important}
.mayatnik-menu-ready #mayatnikStatus{display:flex;grid-column:2;grid-row:5;flex-wrap:wrap;gap:0 10px;align-items:center;min-width:0;padding:1px 50% 1px 4px;border-top:1px solid var(--line);background:var(--panel)}
/* v0.069: меню без фона — кнопки прямо на поле. Поле тянется под меню; пустые места меню пропускают щелчки к полю. */
@media(min-width:601px){
  .mayatnik-menu-ready #mayatnikRail{position:relative;z-index:4;background:transparent;border-right:0;pointer-events:none}
  .mayatnik-menu-ready #mayatnikRail{grid-row:2/5}
  .mayatnik-menu-ready #wrap,.mayatnik-menu-ready #mayatnikStatus{grid-column:1/-1}
  #mayatnikRail .gz-rail,#mayatnikRail .gz-group,#mayatnikRail .gz-soty,#mayatnikRail .gz-wide{pointer-events:none}
  #mayatnikRail>:not(.gz-rail),#mayatnikRail .gz-rail>:not(.gz-group),#mayatnikRail .gz-group>:not(.gz-soty):not(.gz-wide),#mayatnikRail .gz-soty>*,#mayatnikRail .gz-wide>*{pointer-events:auto}
}
.mayatnik-menu-ready #stat{white-space:normal;margin-left:0;font-size:11px}
.mayatnik-menu-ready #zoomV::before{content:'Масштаб '}
.mayatnik-menu-ready #konusInfo{font-size:11px}
.mayatnik-menu-ready .gz-control input[type=number]{width:70px;flex:0 1 70px;margin-left:auto}
.mayatnik-menu-ready .gz-control input[type=range]{width:auto!important;max-width:120px}
.mayatnik-menu-ready .gz-control label{font-size:11px}
.mayatnik-menu-ready .gz-list .gz-nm{flex-shrink:0}
.mayatnik-menu-ready .gz-list .gz-v{overflow:hidden;text-overflow:ellipsis}
body.mayatnik-menu-closed{grid-template-columns:0 minmax(0,1fr)}
.mayatnik-menu-closed #mayatnikRail{display:none}
#mayAboutDialog{box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #52688c;border-radius:10px;padding:20px 24px;background:#121a27;color:#dfe6f5;font:14px/1.55 'Segoe UI',sans-serif}
#mayAboutDialog::backdrop{background:#0009}
#mayAboutDialog h2{font-size:20px;margin:0 32px 14px 0}
#mayAboutDialog p{margin:12px 0}
#mayAboutDialog form{float:right}
#mayAboutDialog form button{font-size:20px;padding:0 8px;cursor:pointer}
.may-about-note{color:#9baac3;font-size:12px}
@media(max-width:600px){
  body.mayatnik-menu-ready{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(140px,1fr) auto auto}
  .mayatnik-menu-ready #mayBottomBar{grid-row:7}
  .mayatnik-menu-ready>header{grid-column:1;padding:6px 8px;gap:6px}
  .mayatnik-menu-ready h1{font-size:17px}
  .mayatnik-menu-ready #mayatnikRail{grid-column:1;grid-row:2;max-height:38dvh;border-right:0;border-bottom:1px solid var(--line);padding:6px 12px}
  .mayatnik-menu-ready #imageStats{grid-column:1;grid-row:3}
  .mayatnik-menu-ready #ochkiBox{grid-column:1;grid-row:4}
  .mayatnik-menu-ready #wrap{grid-column:1;grid-row:5;padding:8px}
  .mayatnik-menu-ready #mayatnikStatus{grid-column:1;grid-row:6}
  .mayatnik-menu-ready #stat,.mayatnik-menu-ready #konusInfo{font-size:10px}
}

#wrap.fill-mode,#wrap.fill-mode canvas{cursor:crosshair}
.gz-control input[type=color]{width:64px;height:28px;padding:2px;margin-left:auto;flex:none}
.gz-control #templateName,.gz-control #templateList,.gz-control #templateActive{min-width:0;width:100%;max-width:210px;box-sizing:border-box}
.gz-control label:has(#templateName),.gz-control label:has(#templateList),.gz-control label:has(#templateActive){display:flex;flex-wrap:wrap;gap:4px}
#fillInfo{color:#ffb36c;font-size:11px}

#colourTemplate{position:fixed;pointer-events:none;z-index:4;margin:0;background:transparent;image-rendering:pixelated}
#templateInfo{color:var(--muted,#8997ac);font:10px/1.4 var(--mono);white-space:normal;overflow-wrap:anywhere;display:block;flex:1 1 100%;min-width:0}
#templateInfo:empty{display:none}
#templateActions{display:flex;gap:8px;align-items:center;position:relative}
#templateActions[hidden]{display:none}
#templateActions .gz-hx{--c:#ffd35b;--gz-h:26px;--gz-n:10px;--gz-bg:#121a30;font:12px 'Segoe UI',sans-serif;cursor:pointer}
#templateActions .gz-hx>span{display:inline-flex;align-items:center;gap:5px}
#templateColour{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:0;bottom:0}
.mayatnik-menu-ready #mayatnikSidebar{grid-column:1;grid-row:2/6;display:flex;flex-direction:column;min-height:0;min-width:0;background:#0d1119}
.mayatnik-menu-ready #mayatnikSidebar #mayatnikRail{flex:1;min-height:0}
@media(max-width:600px){
  .mayatnik-menu-ready #mayatnikSidebar{grid-column:1;grid-row:2;max-height:45dvh}
  .mayatnik-menu-closed #mayatnikSidebar{max-height:0}
}
#colourTemplate[hidden]{display:none}

#fillPreview{position:fixed;pointer-events:none;z-index:5;margin:0;background:transparent;image-rendering:pixelated}
#fillPreview[hidden]{display:none}
#paintCacheInfo{color:#80c9a5;font-size:11px}
.gz-control .template-library-current{display:block;min-width:0;width:100%}
#templateLibraryCurrent{display:block;white-space:normal;overflow-wrap:anywhere;color:#bfcce2;font:11px/1.4 var(--mono)}
#templateLibraryChoices{display:grid;gap:3px;width:100%;min-width:0;font:11px/1.4 var(--mono)}
.gz-control:has(#templateLibraryChoices){height:auto;clip-path:none;padding:0;background:transparent!important}
.gz-control:has(#templateLibraryChoices)::before{display:none}
/* v0.037: шаблон — одна кнопка: миниатюра, имя, маленькие действия внутри справа */
.template-entry-actions{display:flex;gap:2px;margin-left:auto;flex:none}
.template-entry-actions button{width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.55;color:#d9b9ff}
.template-entry:hover .template-entry-actions button,.template-entry:focus-within .template-entry-actions button{opacity:1}
.template-entry-actions button:hover{background:#d9b9ff33}
.template-entry-actions button:disabled{opacity:.2;cursor:default}
.template-entry-actions .gz-ic{width:13px;height:13px}
.template-rename{position:fixed;z-index:2147483647;width:min(240px,calc(100vw - 16px));box-sizing:border-box;padding:6px 8px;border:1px solid #d9b9ff;background:#101725;color:#e8edf5;font:13px 'Segoe UI',sans-serif}
#templateLibraryChoices .template-entry{width:100%;height:24px;padding:0 10px 0 14px;white-space:nowrap;text-align:left;--c:#d9b9ff;--gz-n:10px;--gz-bg:#121a30}
#templateLibraryChoices canvas{flex:none;width:26px;height:32px;margin:0;background:transparent}
#templateLibraryChoices .template-entry>.gz-nm{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}

.mayatnik-menu-ready #mayatnikRail,#wrap,#ochkiList{scrollbar-width:none}
#mayatnikRail::-webkit-scrollbar,#wrap::-webkit-scrollbar,#ochkiList::-webkit-scrollbar{display:none;width:0;height:0}

/* v0.037: логотип в шапке */
.may-logo{display:inline-block;width:26px;height:26px;flex:0 0 26px;margin:0;vertical-align:middle;border-radius:50%;image-rendering:auto}

/* v0.042: панель раскраски на холсте — неподвижна при сдвиге и масштабе */
#paintTools{position:fixed;z-index:6;display:flex;gap:12px;padding:2px 6px 3px;border-radius:6px;background:#0d1119cc;border:1px solid #ff9b5055}
#paintTools[hidden]{display:none}
#paintTools .pt-b{width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
#paintTools .pt-b i{width:15px;height:15px;background:center/contain no-repeat}
#paintTools .pt-b:hover{background:#ff9b5033}
#paintTools .pt-b.on{background:#ff9b50;border-color:#ffc08f}
#paintTools .pt-b:disabled{opacity:.3;cursor:default}
#paintTools .pt-c{width:26px;height:26px;padding:1px;border:0;background:transparent;cursor:pointer}
#paintTools .pt-sep{width:1px;margin:3px 2px;background:#ffffff33}
#paintTools .pt-b{position:relative}
#paintTools .pt-b small{position:absolute;right:2px;bottom:0;font:9px 'Segoe UI',sans-serif;color:#dfe6f5}
/* v0.045: значки были тёмными на тёмном фоне — делаем их светлыми */
#paintTools .pt-b i,.template-entry-actions .gz-ic{filter:brightness(0) invert(.92)}
#paintTools .pt-b.on i{filter:brightness(0)}
.template-entry-actions button{opacity:.85}
.template-entry-actions button:disabled{opacity:.3}

/* v0.048: копии кнопок, перетащенные с Ctrl на холст */
.may-pin{position:fixed!important;z-index:7;width:120px;--c:#80aee8;--gz-h:24px;--gz-n:12px;--gz-bg:#121a30;color:#dfe6f5;font:12px/1.2 'Segoe UI',sans-serif;box-shadow:0 2px 8px #0008;cursor:pointer}
.may-pin-ghost{opacity:.75;pointer-events:none}

/* v0.051: подвал — все надписи в левой половине, без отступов; «Картинка/Кадр» тоже здесь */
.mayatnik-menu-ready #mayatnikStatus #imageStats{display:contents}
#mayatnikStatus #imageStats output{font:11px/1.4 var(--mono);padding:0}
#mayatnikStatus>*{margin:0}
#canvasActs{position:fixed;z-index:6;transform:translateY(-100%)}
#canvasActs[hidden]{display:none}
#paintTools .pt-g{display:flex;flex-direction:column;gap:1px}
#paintTools .pt-l{font:9px/1.2 'Segoe UI',sans-serif;color:#ffc08f;letter-spacing:.3px;padding-left:2px}
#paintTools .pt-r{display:flex;gap:3px;align-items:center}
/* v0.056: группы в рамках, подписи значков через один — сверху и снизу */
#paintTools{gap:8px;padding:4px 6px;align-items:stretch}
#paintTools .pt-g{position:relative;border:1px solid #ff9b5066;border-radius:6px;padding:13px 12px 13px;background:#ffffff08}
#paintTools .pt-l{position:absolute;top:-7px;left:6px;padding:0 4px;background:#0d1119;border-radius:3px;font-weight:600}
#paintTools .pt-r{gap:6px}
#paintTools .pt-r>*{position:relative}
#paintTools .pt-t{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 9px/1 'Segoe UI',sans-serif;color:#c9d3e3;pointer-events:none}
#paintTools .pt-t.up{top:-11px}
#paintTools .pt-t.dn{bottom:-11px}
#paintTools .pt-t:empty{display:none}
#paintTools .pt-cw{display:flex}
#paintTools .pt-mid{display:grid;grid-template-columns:auto auto auto;grid-template-rows:20px 20px;gap:2px;align-items:center;align-self:center;margin:0 4px}   /* v0.135: цвета «Центра»; v0.136 — на обе строки группы */
header #paintTools .pt-mid{grid-row:1/3}
#paintTools .pt-mid>:nth-child(1),#paintTools .pt-mid>:nth-child(2){grid-row:1}
#paintTools .pt-mid>:nth-child(3),#paintTools .pt-mid>:nth-child(4){grid-row:2}
#paintTools .pt-mid>:nth-child(5){grid-column:3;grid-row:1/3;height:42px}
#paintTools .pt-mid .pt-t{display:none}
#paintTools .pt-mt{width:20px;height:16px;padding:0;border:1px solid #ff9b5066;border-radius:3px;background:transparent;color:#cfd8ea;font:600 11px/1 system-ui,sans-serif;cursor:pointer}
#paintTools .pt-mt.on{background:#ff9b50;color:#111;border-color:#ff9b50}
#paintTools .pt-mc{width:20px;height:16px;padding:0;border:0;background:transparent;cursor:pointer}
#paintTools{margin-top:7px}
/* v0.063: панель значков в шапке */
header #paintTools{position:static;margin:0 0 0 6px;flex-wrap:wrap}
.mayatnik-menu-ready>header{align-items:center;flex-wrap:wrap}
/* v0.069: верхняя панель ниже и без лишних отступов: без общей рамки, группы плотнее, кнопки 22 px. */
header #paintTools{border:0;background:transparent;padding:0;gap:6px;margin:6px 0 0 4px}
header #paintTools .pt-g{padding:10px 9px 9px}
header #paintTools .pt-r{gap:4px}
header #paintTools .pt-b,header #paintTools .pt-c{width:22px;height:22px}
header #paintTools .pt-b i{width:14px;height:14px}
header #paintTools .pt-t.up{top:-10px}
header #paintTools .pt-t.dn{bottom:-10px}
.mayatnik-menu-ready>header{padding-top:4px;padding-bottom:4px}
/* v0.071: группа «Шаблоны» справа, поверх поля, без фона. */
#mayatnikRailR{display:none}
.mayatnik-menu-ready #mayatnikRailR{display:block;grid-column:2;grid-row:4;justify-self:end;align-self:start;position:relative;z-index:4;width:248px;max-height:100%;overflow:auto;padding:8px 16px 8px 0;scrollbar-width:thin;pointer-events:none}
#mayatnikRailR .gz-rail,#mayatnikRailR .gz-group,#mayatnikRailR .gz-soty,#mayatnikRailR .gz-wide{pointer-events:none}
#mayatnikRailR .gz-group>:not(.gz-soty):not(.gz-wide),#mayatnikRailR .gz-soty>*,#mayatnikRailR .gz-wide>*{pointer-events:auto}
@media(max-width:600px){.mayatnik-menu-ready #mayatnikRailR{grid-column:1;grid-row:5}}
/* v0.072: справа без полосы прокрутки вбок; подпись «Свои шаблоны появятся…» переносится. */
.mayatnik-menu-ready #mayatnikRailR{overflow-x:hidden}
#mayatnikRailR #templateLibraryChoices,#mayatnikRailR .gz-control:has(#templateLibraryChoices){white-space:normal;overflow-wrap:anywhere;max-width:100%}
/* v0.073: в верхней панели — длинные кнопки, как в меню (значок + название), две строки в группе. */
header #paintTools .pt-long .pt-r{display:grid;grid-template-rows:repeat(2,22px);grid-auto-flow:column;gap:2px 0;align-items:center}
header #paintTools .pt-long .pt-g,header #paintTools .pt-g.pt-long{padding:9px 6px 5px}
header #paintTools .pt-b.gz-hx{width:auto;height:22px;--gz-h:22px;--gz-n:9px;--gz-bg:#121a30;padding:0 10px 0 11px;border:0;border-radius:0;font:11px 'Segoe UI',sans-serif;color:#dfe6f5;justify-content:flex-start}
header #paintTools .pt-b.gz-hx:nth-child(even){margin-left:-6px}
header #paintTools .pt-b.gz-hx i{width:13px;height:13px;background-color:transparent}
/* v0.176: включённая — обводкой цветом группы, как в рейке и хабе (не заливкой) */
header #paintTools .pt-b.gz-hx.on{background:var(--c);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 70%,transparent))}
header #paintTools .pt-b.gz-hx.on::before{background:#121a30}
header #paintTools .pt-b.gz-hx.on{color:#fff}
header #paintTools .pt-b.gz-hx:hover{background:color-mix(in srgb,var(--c) 70%,#000)}
header #paintTools .pt-b.gz-hx:disabled{opacity:.35}
header #paintTools .pt-b.gz-hx small{display:none}
header #paintTools .pt-cw{grid-row:1/3;align-self:center;margin-left:4px}
/* v0.075: справа шапка «Шаблоны» и кнопки в одну строку, список — ниже на всю ширину. */
#mayatnikRailR .gz-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:3px 0}
#mayatnikRailR .gz-soty{display:flex;margin:0;position:static}
#mayatnikRailR .gz-soty>.gz-hx{position:static;width:auto;margin-left:-6px}
#mayatnikRailR .gz-wide{flex-basis:100%}
#mayatnikRailR #templateLibraryChoices:empty{display:none}
#mayatnikRailR .gz-control:has(#templateLibraryChoices:empty){display:none}
.mayatnik-menu-ready #mayatnikRailR{width:auto;max-width:460px}
#mayatnikRailR .gz-rail{width:auto;align-items:flex-end}
#mayatnikRailR .gz-group{flex-wrap:nowrap;flex-direction:row}
#mayatnikRailR .gz-group:has(.gz-wide:not(:empty) #templateLibraryChoices:not(:empty)){flex-wrap:wrap}
header #paintTools .pt-b.gz-hx:disabled{cursor:default}
header #paintTools .pt-b.gz-hx{padding:0 8px 0 9px;gap:4px}
header #paintTools .pt-g.pt-long{padding:9px 5px 5px}
header #paintTools{gap:5px}
.mayatnik-menu-ready>header{gap:8px}
header #paintTools .pt-b.gz-hx{padding:0 7px 0 8px;gap:3px;--gz-n:8px}
header #paintTools .pt-g.pt-long{padding:9px 4px 5px}
header #paintTools{gap:4px;margin-left:0}
/* v0.079: сведения занимают примерно 1/6 экрана и сворачиваются в заголовок. v0.091: в полбраузера шириной и ниже — четверть высоты. */
.mayatnik-menu-ready #mayatnikInfoPanel{position:fixed;right:8px;bottom:8px;z-index:8;box-sizing:border-box;width:50vw;max-width:calc(100vw - 16px);color:var(--fg);background:var(--panel);border:1px solid var(--line);font:11px/1.4 var(--mono)}
#mayatnikInfoPanel[open]{height:25dvh;min-height:150px;display:flex;flex-direction:column}
#mayatnikInfoPanel>summary{flex:none;cursor:pointer;padding:5px 8px;user-select:none;font:12px/1.4 'Segoe UI',sans-serif}
#mayatnikInfoPanel>summary::after{content:' · показать';color:var(--muted,#8997ac)}
#mayatnikInfoPanel[open]>summary::after{content:' · скрыть'}
.mayatnik-menu-ready #mayatnikInfoPanel #mayatnikStatus{display:flex;flex:1;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:8px;min-height:0;overflow:auto;border-top:1px solid var(--line);background:transparent}
#mayatnikInfoPanel:not([open]) #mayatnikStatus{display:none}
#mayatnikInfoPanel #templateInfo{flex:0 0 auto;white-space:pre-line}
#mayatnikInfoPanel #templateActions{flex-wrap:wrap}
#mayatnikInfoPanel .lg{flex-wrap:wrap}
@media(max-width:600px){.mayatnik-menu-ready #mayatnikInfoPanel{width:calc(100vw - 16px)}#mayatnikInfoPanel[open]{height:25dvh}}
/* v0.091: исходные кнопки фигуры в шапке не видны — вместо них длинные «Сохранить» и «Перекрасить»; поле цвета остаётся здесь. */
header #paintTools #templateActions{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none}
header #paintTools #templateActions>.gz-hx{display:none}
/* v0.082: общий пульт Зеркалиуса для включённой горизонтальной свёртки. */
.may-fold-win{position:fixed;z-index:9;display:flex;flex-direction:column;box-sizing:border-box;min-width:240px;min-height:180px;background:#0d1119f2;border:1px solid #80aee8;border-radius:6px;overflow:hidden;resize:both;box-shadow:0 4px 18px #0009}
.may-fold-win[hidden]{display:none}
.may-fold-win.may-fold-inline{min-height:0;resize:none}.may-fold-inline .may-fold-view{display:none}.may-fold-inline .may-fold-head{cursor:default}   /* v0.326: свёртка в поле — только пульт */
.may-fold-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:3px 8px;background:#121a30;color:#cfe0ff;font:12px 'Segoe UI',sans-serif;cursor:move;user-select:none;touch-action:none}
.may-fold-x{border:0;background:transparent;color:#cfe0ff;font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
.may-fold-view{flex:1;min-height:0;width:100%;display:block;background:#05070b}
.may-fold-win .may-fold-panel{position:static!important;transform:none!important;width:auto!important;left:auto;bottom:auto;padding:4px 6px}
.may-fold-panel{position:fixed;z-index:9;left:25vw;bottom:8px;transform:translateX(-50%);width:min(480px,calc(50vw - 24px));box-sizing:border-box;background:var(--panel);border:1px solid var(--line);padding:5px 8px;color:var(--fg)}
.may-fold-panel[hidden],.may-fold-canvas[hidden]{display:none}
/* v0.092: пульт «Прохода столба» — как у свёртки, на том же месте (вместе не бывают). */
#mayStolbPanel{position:fixed;z-index:9;left:25vw;bottom:8px;transform:translateX(-50%);width:min(480px,calc(50vw - 24px));box-sizing:border-box;background:var(--panel);border:1px solid var(--line);padding:5px 8px;color:var(--fg)}
#mayStolbPanel[hidden]{display:none}
#mayStolbPanel .zz-pult{position:relative;width:100%}
#mayStolbPanel .may-fold-steps{display:flex;gap:6px;align-items:center;justify-content:space-between;font:11px/1.4 var(--mono)}
#mayStolbPanel .may-fold-steps button{flex:none;padding:3px 8px}
#mayStolbPanel .may-fold-frame{display:block;box-sizing:border-box;width:100%;margin:4px 0}
#mayStolbPanel .may-stolb-range{display:flex;gap:10px;align-items:center;margin-top:4px;font:11px/1.4 var(--mono)}
#mayStolbPanel .may-stolb-range input{width:64px}
@media(max-width:600px){#mayStolbPanel{left:8px;bottom:calc(33.333dvh + 16px);transform:none;width:calc(100vw - 16px)}}
.may-fold-panel .zz-pult{position:relative;width:100%}
.may-fold-panel .may-fold-steps{display:flex;gap:6px;align-items:center;justify-content:space-between;font:11px/1.4 var(--mono)}
.may-fold-panel .may-fold-steps button{flex:none;padding:3px 8px}
.may-fold-panel .may-fold-steps output{text-align:center}
.may-fold-panel .may-fold-pair{display:inline-flex;gap:4px;align-items:center;flex:none;white-space:nowrap}   /* v0.101 */
.may-fold-panel .may-fold-frame{display:block;box-sizing:border-box;width:100%;margin:4px 0}
.may-fold-canvas{position:fixed;z-index:3;pointer-events:none;background:transparent}
body.may-fold-active #cv{opacity:0!important}
body.may-fold-active :is(#bitDigits,#colourTemplate,#fillPreview,#symAxes){display:none!important}
@media(max-width:600px){.may-fold-panel{left:8px;bottom:calc(33.333dvh + 16px);transform:none;width:calc(100vw - 16px)}}
/* v0.084: все группы в обычном потоке; история в середине, без отдельного ряда и отступа сверху. */
header #paintTools{position:static;flex:0 1 auto;width:auto;max-width:100%;padding:0;box-sizing:border-box;flex-wrap:wrap}
/* Список шаблонов всегда раскрыт, шапка и строки одной ширины. */
.mayatnik-menu-ready #mayatnikRailR{width:min(460px,calc(100vw - 16px));max-width:100%;box-sizing:border-box;padding:8px 8px 8px 0}
#mayatnikRailR .gz-rail{width:100%;align-items:stretch}
#mayatnikRailR .gz-group{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;gap:3px 0}
#mayatnikRailR .gz-group>.gz-head{width:100%;min-width:0;cursor:default}
#mayatnikRailR .gz-head .gz-hr{display:none}
#mayatnikRailR .gz-group>.gz-soty{display:flex!important;grid-column:2;justify-self:end}
#mayatnikRailR .gz-group>.gz-wide{display:flex!important;grid-column:1/-1;width:100%;margin:0}
#mayatnikRailR .gz-wide>.gz-control{width:100%;box-sizing:border-box}
/* Точный контрастный прицел: точка попадания в центре, цифра остаётся видна. */
#wrap.fill-mode,#wrap.fill-mode canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath d='M12 1V8M12 16V23M1 12H8M16 12H23' stroke='black' stroke-width='3'/%3E%3Cpath d='M12 1V8M12 16V23M1 12H8M16 12H23' stroke='white'/%3E%3Ccircle cx='12' cy='12' r='1' fill='white' stroke='black' stroke-width='.7'/%3E%3C/svg%3E") 12 12,crosshair}
/* v0.085: «Правка» — «Отмена» и «Повтор» рядом в одну строку, между ними вертикальная черта; ряд по центру рамки. */
header #paintTools .pt-history{justify-content:center}
header #paintTools .pt-history .pt-r{grid-template-rows:22px}
header #paintTools .pt-history .pt-sep{align-self:stretch;width:1px;margin:2px 5px;background:#ffffff55}
/* v0.097: «Шаблоны» — по ширине содержимого, а не всегда 460 px. */
.mayatnik-menu-ready #mayatnikRailR{width:fit-content;max-width:min(460px,calc(100vw - 16px))}
/* v0.097: дзен — только поле; пульты свёртки и прохода остаются. */
body.may-zen>header,body.may-zen #mayatnikRail,body.may-zen #mayatnikRailR,body.may-zen #mayatnikInfoPanel,body.may-zen #imageStats,body.may-zen #ochkiBox,body.may-zen .may-pin{display:none!important}
body.may-zen #wrap{grid-column:1/-1!important;grid-row:1/-1!important}
body.may-zen #mayatnikStatus{display:none!important}
body.mayatnik-menu-ready.may-zen #mayZenOut{display:inline-flex;position:fixed;left:8px;bottom:8px;z-index:10;--c:#80aee8;--gz-h:24px;--gz-n:10px;--gz-bg:#121a30;align-items:center;font:12px 'Segoe UI',sans-serif;opacity:.35}
body.may-zen #mayZenOut:hover{opacity:1}
/* v0.141: ◫ «Кнопки в окне» — рядом с ◎, только в дзене. */
#mayZenWin{display:none}
body.mayatnik-menu-ready.may-zen #mayZenWin{display:inline-flex;position:fixed;left:44px;bottom:8px;z-index:10;--c:#80aee8;--gz-h:24px;--gz-n:10px;--gz-bg:#121a30;align-items:center;font:12px 'Segoe UI',sans-serif;opacity:.35}
body.may-zen #mayZenWin:hover{opacity:1}
/* v0.100 (правило кнопок): ползунок — шевроны «<» «>» по краям, ромб-бегунок цветом группы, пунктир-дорожка, значение по центру, без подписи. */
.mayatnik-menu-ready label.may-slide{position:relative;gap:0!important;padding:0!important;--t:calc(12px / 1.7320508)}
label.may-slide>.may-chev{flex:none;align-self:stretch;width:calc(3 * var(--t));min-height:22px;padding:0;margin:0;border:0;border-radius:0;background:#d6a838;cursor:pointer}
label.may-slide>.may-chev.l{clip-path:polygon(var(--t) 0,calc(3 * var(--t)) 0,calc(2 * var(--t)) 50%,calc(3 * var(--t)) 100%,var(--t) 100%,0 50%)}
label.may-slide>.may-chev.r{clip-path:polygon(0 0,calc(2 * var(--t)) 0,calc(3 * var(--t)) 50%,calc(2 * var(--t)) 100%,0 100%,var(--t) 50%)}
label.may-slide>.may-chev:hover{filter:brightness(1.25)}
label.may-slide>.may-chev:active{filter:brightness(.8)}
.mayatnik-menu-ready label.may-slide>input[type=range]{-webkit-appearance:none;appearance:none;flex:1 1 0;width:auto!important;max-width:none!important;min-width:0;height:22px;margin:0 2px;padding:0;background:transparent;cursor:pointer}
label.may-slide>input[type=range]::-webkit-slider-runnable-track{height:1px;border:0;background:repeating-linear-gradient(90deg,var(--c,#b48cff) 0 6px,transparent 6px 10px)}
label.may-slide>input[type=range]::-moz-range-track{height:1px;border:0;background:repeating-linear-gradient(90deg,var(--c,#b48cff) 0 6px,transparent 6px 10px)}
label.may-slide>input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-9.5px;border:0;border-radius:0;background:var(--c,#b48cff);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
label.may-slide>input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:0;background:var(--c,#b48cff);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
label.may-slide>input[type=range]:hover::-webkit-slider-thumb{filter:brightness(1.25)}
label.may-slide>.may-slide-v{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff;font:11px/1 var(--mono);text-shadow:0 0 3px #000,0 0 3px #000}
/* v0.103: «Вид» в шапке — всё сюда из рейки, компактно: три ряда, ниже кнопки, мельче шрифт. */
header #paintTools .pt-view .pt-r{grid-template-rows:repeat(3,18px)!important;gap:1px 0}
header #paintTools .pt-view .pt-b.gz-hx{height:18px;--gz-h:18px;--gz-n:7px;padding:0 6px 0 7px;gap:3px;font-size:10px}
header #paintTools .pt-view .pt-b.gz-hx:nth-child(even){margin-left:0}
header #paintTools .pt-view .pt-b.gz-hx i{width:11px;height:11px}
header #paintTools .pt-view .pt-vx{grid-row:1/4;display:flex;flex-direction:column;justify-content:center;gap:2px;margin-left:4px}
header #paintTools .pt-view .pt-vx input[type=color]{width:24px;height:14px;padding:0;border:1px solid #33405a;background:none;cursor:pointer}
header #paintTools .pt-view .pt-vx-row{display:flex;gap:3px}
header #paintTools .pt-view .pt-vx select{width:96px;height:16px;padding:0 2px;border:1px solid #33405a;background:#121a30;color:#dfe6f5;font:10px 'Segoe UI',sans-serif}
header #paintTools .pt-view .pt-vx .pt-vrows{width:46px;height:16px;box-sizing:border-box;padding:0 3px;border:1px solid #33405a;background:#121a30;color:#dfe6f5;font:10px var(--mono)}
/* v0.113: «тут убери фон» — пульты свёртки и прохода без своей подложки и рамки, прямо на поле; надписи читаются за счёт тени. */
.may-fold-panel,#mayStolbPanel{background:transparent;border:0}
.may-fold-panel .may-fold-steps,#mayStolbPanel .may-fold-steps,#mayStolbPanel .may-stolb-range{text-shadow:0 0 3px #000,0 0 3px #000}
/* v0.116: «дай прокручивать вниз всё это поле без скроллов» — содержимое «Сведений» листается колесом, полосы прокрутки не видно. */
#mayatnikInfoPanel #mayatnikStatus{scrollbar-width:none;overscroll-behavior:contain}
#mayatnikInfoPanel #mayatnikStatus::-webkit-scrollbar{display:none}
/* v0.120: «☰ Меню» на обычном экране не нужна — рейка и так открыта; на телефоне остаётся. */
@media(min-width:601px){.mayatnik-menu-ready #mayMenu{display:none!important}}
/* v0.158: меню в одну полоску — в шапке только названия групп, кнопки группы — выпадающим списком под названием. */
.mayatnik-menu-ready>header{position:relative;z-index:40}
header #paintTools.pt-dd{flex-wrap:wrap;align-items:center;gap:4px;margin:0}
header #paintTools.pt-dd .pt-g{--c:#7cbcff;padding:0!important;border:0;background:transparent}
header #paintTools.pt-dd .pt-l{position:relative;top:auto;left:auto;display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:5px;background:#121a30;color:var(--c);font:600 12px 'Segoe UI',sans-serif;letter-spacing:0;white-space:nowrap;cursor:pointer;user-select:none}
header #paintTools.pt-dd .pt-l::after{content:"▾";font-size:10px;opacity:.75}
header #paintTools.pt-dd .pt-l:hover,header #paintTools.pt-dd .pt-l:focus-visible{outline:none;background:color-mix(in srgb,var(--c) 22%,#121a30)}
header #paintTools.pt-dd .pt-open>.pt-l{background:color-mix(in srgb,var(--c) 30%,#121a30);border-color:var(--c)}
header #paintTools.pt-dd .pt-has-on>.pt-l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 4px var(--c)}
header #paintTools.pt-dd .pt-r{display:none!important;position:absolute;top:calc(100% + 3px);left:0;z-index:50;flex-direction:column;align-items:stretch;gap:2px!important;min-width:150px;max-height:calc(100dvh - 70px);overflow:auto;padding:6px;box-sizing:border-box;background:#0d1119f2;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:6px;box-shadow:0 8px 24px #000a}
header #paintTools.pt-dd .pt-open>.pt-r{display:flex!important}
header #paintTools.pt-dd .pt-r>*{grid-row:auto!important;grid-column:auto!important;margin:0!important;align-self:stretch}
header #paintTools.pt-dd .pt-b.gz-hx{width:100%;height:24px;--gz-h:24px;font-size:12px;padding:0 12px 0 13px;gap:6px}
header #paintTools.pt-dd .pt-b.gz-hx i{width:13px;height:13px}
header #paintTools.pt-dd .pt-b:not(.gz-hx){width:auto;height:24px;display:flex;justify-content:flex-start;gap:6px;padding:0 8px}
header #paintTools.pt-dd .pt-b:not(.gz-hx) .pt-t{position:static;transform:none;font-size:12px}
header #paintTools.pt-dd .pt-sep{display:none}
header #paintTools.pt-dd .pt-cw{display:flex;align-items:center;gap:6px;padding:2px 4px}
header #paintTools.pt-dd .pt-cw .pt-t{position:static;transform:none;font-size:12px}
header #paintTools.pt-dd .pt-mid{align-self:flex-start;margin:4px!important}
header #paintTools.pt-dd .pt-view .pt-vx{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 2px 0}
#mayCorner{flex-direction:row;align-items:center;gap:4px}
/* v0.159: телефон — шапка в одну строку, под ней полоска групп одной строкой (листается вбок),
   список группы — под полоской на всю ширину экрана, в два столбца, кнопки крупнее под палец. */
@media(max-width:600px){
  .mayatnik-menu-ready>header{row-gap:4px}
  header #paintTools.pt-dd{flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 3px}
  header #paintTools.pt-dd::-webkit-scrollbar{display:none}
  header #paintTools.pt-dd .pt-g{flex:none}
  header #paintTools.pt-dd .pt-l{height:30px;padding:0 11px;font-size:13px}
  header #paintTools.pt-dd .pt-r{position:fixed;left:8px;right:8px;min-width:0;max-height:62dvh;padding:8px;gap:4px!important;overscroll-behavior:contain}
  header #paintTools.pt-dd .pt-open>.pt-r{display:grid!important;grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-template-rows:none!important;align-items:center}
  header #paintTools.pt-dd .pt-b.gz-hx,header #paintTools.pt-dd .pt-view .pt-b.gz-hx{height:32px;--gz-h:32px;--gz-n:10px;font-size:13px}
  header #paintTools.pt-dd .pt-b:not(.gz-hx){height:32px}
  header #paintTools.pt-dd .pt-mid,header #paintTools.pt-dd .pt-vx{grid-column:1/-1!important}
  header #paintTools.pt-dd .pt-mt,header #paintTools.pt-dd .pt-mc{width:30px;height:24px}
  header #paintTools.pt-dd .pt-mid{grid-template-columns:auto auto auto;grid-template-rows:26px 26px;justify-self:start;justify-content:start}
  header #paintTools.pt-dd .pt-mid>:nth-child(5){height:54px}
  header #paintTools.pt-dd .pt-view .pt-vx select,header #paintTools.pt-dd .pt-view .pt-vx .pt-vrows{height:28px;font-size:13px}
  header #paintTools.pt-dd .pt-view .pt-vx input[type=color]{width:36px;height:24px}
  #mayCorner #mayAbout{white-space:nowrap}
}
/* v0.160: «кнопки шаблонов мешаются в поле, надо их под холст» — на телефоне «Шаблоны» отдельной строкой под холстом,
   а не поверх него; снизу запас под свёрнутые «Сведения» (они прижаты к низу экрана). */
@media(max-width:600px){
  .mayatnik-menu-ready #mayatnikRailR{grid-column:1;grid-row:6;justify-self:stretch;width:auto;max-width:none;max-height:30dvh;margin:0 0 52px;padding:6px 8px;background:#0d1119;border-top:1px solid var(--line);pointer-events:auto}
}
#wrap.ruler-mode,#wrap.ruler-mode canvas{cursor:crosshair}   /* v0.161: линейка */
/* v0.163: названия групп в полоске — шестигранные кнопки как в списке (внешний слой — обводка, ::before — фон внутри);
   рамка списка — зубцами по бокам: контур и фон ставит mayatnik-menu.js (zig), здесь только поля под зубцы */
header #paintTools.pt-dd .pt-l{isolation:isolate;border:0;border-radius:0;padding:0 14px 0 15px;color:#dfe6f5;background:color-mix(in srgb,var(--c) 45%,#000);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%)}
header #paintTools.pt-dd .pt-l::before{content:"";position:absolute;inset:1.5px;z-index:-1;width:auto;height:auto;border-radius:0;box-shadow:none;background:#121a30;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%)}
header #paintTools.pt-dd .pt-l::after{color:var(--c)}
header #paintTools.pt-dd .pt-l:hover,header #paintTools.pt-dd .pt-l:focus-visible{background:color-mix(in srgb,var(--c) 45%,#000)}
header #paintTools.pt-dd .pt-l:hover::before,header #paintTools.pt-dd .pt-l:focus-visible::before{background:color-mix(in srgb,var(--c) 22%,#121a30)}
header #paintTools.pt-dd .pt-open>.pt-l{background:var(--c)}
header #paintTools.pt-dd .pt-open>.pt-l::before{background:color-mix(in srgb,var(--c) 30%,#121a30)}
header #paintTools.pt-dd .pt-has-on>.pt-l{background:var(--c);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 70%,transparent))}
header #paintTools.pt-dd .pt-has-on>.pt-l::before{width:auto;height:auto;border-radius:0;box-shadow:none;background:#121a30}
header #paintTools.pt-dd .pt-has-on.pt-open>.pt-l::before{background:color-mix(in srgb,var(--c) 30%,#121a30)}
header #paintTools.pt-dd .pt-r{padding:6px 11px;border:0;border-radius:0;box-shadow:none;background:transparent no-repeat 0 0;scrollbar-width:thin}
@media (max-width:600px){
  header #paintTools.pt-dd .pt-l{padding:0 15px 0 16px}
  header #paintTools.pt-dd .pt-r{padding:8px 12px}
}
/* v0.164: «стык в стык» — кнопки списка вплотную друг к другу и к рамке: остриё кнопки в выемке зубца (скос рамки = скос кнопки, zig) */
header #paintTools.pt-dd .pt-r{padding:0;gap:0!important}
header #paintTools.pt-dd .pt-r>.pt-b.gz-hx{--gz-n:9px}
header #paintTools.pt-dd .pt-r>:not(.gz-hx){margin:0 12px!important;box-sizing:border-box;align-content:center}
header #paintTools.pt-dd .pt-r>.pt-cw{padding:0 4px;height:24px}
@media (max-width:600px){
  header #paintTools.pt-dd .pt-r{padding:0}
  header #paintTools.pt-dd .pt-r>.pt-b.gz-hx{--gz-n:10px}
}
/* v0.165: закреп у названия группы, как в рейке: закреплённый список не закрывается */
header #paintTools.pt-dd .pt-pin{display:flex;align-items:center;justify-content:center;width:12px;height:14px;margin-left:2px;opacity:.35;cursor:pointer;color:#dfe6f5}
header #paintTools.pt-dd .pt-pin:hover{opacity:.8}
header #paintTools.pt-dd .pt-pinned>.pt-l .pt-pin{opacity:1;color:var(--c);filter:brightness(1.6)}
header #paintTools.pt-dd .pt-pinned>.pt-l .pt-pin{color:#fff}
@media (max-width:600px){header #paintTools.pt-dd .pt-pin{display:none}}
/* v0.165: «Шаблоны» — группой полоски: кнопки рейки и список шаблонов вплотную к рамке, как остальные */
header #paintTools.pt-dd .pt-lib .pt-r{--gz-bg:#121a30;--gz-h:24px;--gz-n:9px;--gz-txt:#dfe6f5;--gz-mut:#8592ad;color:#dfe6f5;font:12px/1.2 'Segoe UI',sans-serif;min-width:200px}
header #paintTools.pt-dd .pt-lib .pt-r>.gz-hx{position:static!important;width:100%;left:auto;top:auto;box-sizing:border-box}
header #paintTools.pt-dd .pt-lib .pt-r>.gz-control{width:auto;height:auto;background:none;clip-path:none;padding:0}
header #paintTools.pt-dd .pt-lib .pt-r>.gz-control::before{display:none}
header #paintTools.pt-dd .pt-lib .pt-r>.gz-control:has(#templateLibraryChoices:empty){display:none}
header #paintTools.pt-dd .pt-lib #templateLibraryChoices{display:flex;flex-direction:column;gap:0;width:100%;white-space:normal}
@media (max-width:600px){header #paintTools.pt-dd .pt-lib .pt-r>.gz-control{grid-column:1/-1!important}}
/* v0.167: подсказка рядом с кнопкой через 4 с (mayatnik-tips.js) — на фоне, без рамки, как подсказки рейки */
#mayTip{position:fixed;z-index:2147483646;max-width:260px;padding:5px 10px;border-radius:4px;background:#121a30;color:#c5cee3;font:12px/1.3 'Segoe UI',Roboto,Arial,sans-serif;pointer-events:none;box-shadow:0 4px 14px #000a}
#mayTip[hidden]{display:none}
/* v0.171: «ширину можно уменьшить» — поля-числа рейки («высота от», «строк от / до», «бит от / до») шириной в кнопку, по два в ряд сотами */
.mayatnik-menu-ready #mayatnikRail .gz-wide{flex-direction:row;flex-wrap:wrap;align-items:center;row-gap:3px}
.mayatnik-menu-ready #mayatnikRail .gz-wide>.gz-control:has(input[type=number]){width:var(--gz-w);flex:none;margin-right:calc(4px - var(--gz-n))}
.mayatnik-menu-ready #mayatnikRail .gz-control:has(input[type=number]) input[type=number]{width:44px;flex:0 0 44px}
.mayatnik-menu-ready #mayatnikRail .gz-wide>.gz-control:has(#symTriangleRows){margin-right:calc(100% - var(--gz-w))}   /* высота — одна в ряду, дальше пары «от / до» */
/* v0.172: ширина списка — по кнопкам, но не уже названия группы (min-width ставит mayatnik-menu.js) */
@media (min-width:601px){header #paintTools.pt-dd .pt-r{width:max-content;min-width:0}}

/* v0.176: ● цвета внутри кнопки полосы — у правого края, щелчок — палитра */
#paintTools .pt-b .pt-dot{order:9;margin-left:auto;flex:none;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px #0008,0 0 0 2px #fff4;cursor:pointer}
#paintTools .pt-b .pt-dot:hover{box-shadow:0 0 0 1px #000,0 0 0 2px #fff}
/* v0.179: ромбы «Дзен · Запись · GIF» — справа по середине высоты, как в хабе; видны и в дзене */
#mayRhombs{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:6px}
#mayRhombs .may-rh{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;padding:0;border:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#121a30;color:#8fd3ff;font:11px/1.15 system-ui,sans-serif;white-space:pre-line;text-align:center;cursor:pointer;touch-action:manipulation}
#mayRhombs .may-rh::after{content:'';position:absolute;inset:7.5px;border:1px solid currentColor;transform:rotate(45deg);pointer-events:none;opacity:.55}
#mayRhombs .may-rh:hover,#mayRhombs .may-rh:focus-visible{color:#ffd166;background:#1d2a48}
#mayRhombs .may-rh:disabled{opacity:.4;cursor:default}
#mayRhombs #mayRhRec.on{color:#ff4d5e;animation:mayRecBlink 1s ease-in-out infinite}
@keyframes mayRecBlink{50%{opacity:.45}}
#mayRhombs #mayRhZen[aria-pressed=true]{color:#ffd166}
body.may-zen #mayRhombs .may-rh{opacity:.35}
body.may-zen #mayRhombs .may-rh:hover,body.may-zen #mayRhombs #mayRhRec.on{opacity:1}
.mayatnik-menu-ready #mayCorner #mayZen,body.mayatnik-menu-ready.may-zen #mayZenOut{display:none!important}
/* v0.180: сводка «Очков» — внутри выпадающей группы «👓 Очки» полосы */
header #paintTools .pt-ochki #ochkiBox{grid-column:auto;grid-row:auto;border:0;background:transparent;padding:4px 12px;max-width:min(900px,92vw);min-width:420px;box-sizing:border-box}
header #paintTools .pt-ochki #ochkiBox summary{white-space:normal}
/* v0.181: «во всю высоту до низа, если не вмещается» — список серий в выпадающей «Очках» тянется до низа окна, дальше — прокрутка */
header #paintTools .pt-ochki #ochkiList{max-height:calc(100dvh - var(--ochki-top,90px) - 12px)}
/* v0.182: «Сведения» — внутри выпадающей группы «ⓘ Сведения» полосы: не в углу, без своего заголовка, по содержимому */
header #paintTools .pt-info #mayatnikInfoPanel{position:static;right:auto;bottom:auto;width:min(640px,92vw);max-width:none;height:auto;min-height:0;max-height:calc(100dvh - 90px);border:0;background:transparent;box-shadow:none;display:flex;flex-direction:column}
header #paintTools .pt-info #mayatnikInfoPanel>summary{display:none}
header #paintTools .pt-info #mayatnikInfoPanel #mayatnikStatus{overflow:auto}
/* v0.183: «у всех кнопок убери заливку фоном при наведении и вообще — как в хабе, только границы»: наведение подсвечивает рамку, середина не заливается */
#mayatnikRail .gz-hx:hover::before,#mayatnikRailR .gz-hx:hover::before,header #paintTools .gz-hx:hover::before,.gz-ladder .gz-hx:hover::before{background:var(--gz-bg,#121a30)}
header #paintTools .pt-b.gz-hx:hover{background:color-mix(in srgb,var(--c) 55%,#fff);filter:drop-shadow(0 0 3px var(--c))}
header #paintTools.pt-dd .pt-l:hover::before,header #paintTools.pt-dd .pt-l:focus-visible::before{background:var(--gz-bg,#121a30)}
header #paintTools.pt-dd .pt-l:hover,header #paintTools.pt-dd .pt-l:focus-visible{background:var(--c)}
#paintTools .pt-b:not(.gz-hx):hover{background:transparent;outline:1px solid var(--c,#ff9b50);outline-offset:-1px}
#mayRhombs .may-rh:hover,#mayRhombs .may-rh:focus-visible{background:#121a30}
#mayRhombs .may-rh:hover::after,#mayRhombs .may-rh:focus-visible::after{opacity:1}
/* v0.184: «отступ кнопок нужен, границы толще, как в хабе» — в выпадающих списках зазор между кнопками, рамка 1,5 px */
header #paintTools.pt-dd .pt-r{gap:4px!important}
header #paintTools .pt-b.gz-hx::before,header #paintTools .pt-b.gz-hx:not(.gz-on)::before{inset:1.5px}
header #paintTools .pt-b.gz-hx:not(.on):not(:hover){background:color-mix(in srgb,var(--c) 45%,#000)}   /* своя тусклая рамка, как в хабе; наведение — светлее, включённая — цветом группы */
/* v0.185: «расширь заголовок по стандарту ширины» — названия групп полосы не уже кнопки списка (126 px), подпись слева, закреп и стрелка справа; у раскрытого списка — только фон, без обводки (в mayatnik-menu.js) */
header #paintTools.pt-dd .pt-l{min-width:126px;justify-content:space-between}
@media(max-width:600px){header #paintTools.pt-dd .pt-l{min-width:0}}

/* v0.187: «значки не скрывай» — у включённой кнопки значок не чернеет (заливки больше нет, только рамка), светлый, как у остальных */
#paintTools .pt-b.on i,header #paintTools .pt-b.gz-hx.on i{filter:brightness(0) invert(1)}
/* v0.187: «обводка не нажатых — как в хабе»: тусклая (20% цвета группы), 1 px; нажатая — ярко, 1,5 px; наведение — светлее */
header #paintTools .pt-b.gz-hx:not(.on):not(:hover){background:color-mix(in srgb,var(--c) 20%,#000)}
header #paintTools .pt-b.gz-hx:not(.on)::before{inset:1px}
header #paintTools .pt-b.gz-hx.on::before{inset:1.5px}
/* v0.435: размер пунктов списка совпадает с кнопкой, которая его раскрывает; длинная подпись не растягивает столбец. */
.gz-ladder .gz-hx{width:100%;min-width:0;max-width:100%;flex:none;padding-right:16px}
/* v0.233: «те что справа списком вышли — отдели от наложения под ними, фоном, зубчатым в стык, как в хабе»: подложка столбца по контуру самих кнопок —
   тёмная кайма 3 px вокруг каждого шестиугольника (просветы между ними закрыты), пункты темнее кнопок под ними (как hub-grozd.css) */
.gz-ladder{--gz-bg:#0a0f1d;filter:none}
.gz-ladder .gz-hx:not(.gz-on):not(:hover){background:color-mix(in srgb,var(--c) 13%,#000)}
/* v0.193: перетаскивание групп полосы */
#paintTools .pt-g.pt-drag{opacity:.6}#paintTools.pt-dragging .pt-l{cursor:grabbing}
#wrap.ruler-grab,#wrap.ruler-grab canvas{cursor:move!important}   /* v0.195: вершина линейки под мышью */
#wrap.fix-grab,#wrap.fix-grab canvas{cursor:ns-resize!important}   /* v0.207: центр «Зеркала ↑» */
#wrap.fix-grab-h,#wrap.fix-grab-h canvas{cursor:ew-resize!important}   /* v0.208: по горизонтали */
#paintTools .pt-b .pt-half{order:9;margin-left:4px;padding:0 0 0 6px;border-left:1px solid #ffffff40;font-size:inherit;color:#8e98ad;cursor:pointer;align-self:stretch;display:flex;align-items:center}
#paintTools .pt-b .pt-half:hover{color:#fff}
#paintTools .pt-b .pt-half.on{color:#6cff6c;text-shadow:0 0 4px #6cff6c99}
#paintTools .pt-r > .lg{box-sizing:border-box;width:100%;padding:5px 12px;flex-wrap:wrap;gap:4px 10px;color:#c7d3e6;border:1px solid color-mix(in srgb,var(--c,#7cbcff) 35%,transparent);border-radius:4px}   /* v0.200: подсветка в «Виде» */
#paintTools .pt-r > .lg:hover{background:color-mix(in srgb,var(--c,#7cbcff) 18%,transparent)}
/* v0.209: свёрнутое в ромб название группы полосы — только значок; соседи встают вплотную */
#paintTools .pt-l .pt-ico{display:none}
header #paintTools.pt-dd .pt-mini>.pt-l{font-size:0;gap:0;width:34px!important;min-width:0!important;padding:0;justify-content:center;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
header #paintTools.pt-dd .pt-mini>.pt-l::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
header #paintTools.pt-dd .pt-mini>.pt-l::after,header #paintTools.pt-dd .pt-mini>.pt-l .pt-pin{display:none}
header #paintTools.pt-dd .pt-mini>.pt-l .pt-ico{display:block;font-size:13px;line-height:1;color:var(--c)}
header #paintTools.pt-dd .pt-mini.pt-open>.pt-l .pt-ico,header #paintTools.pt-dd .pt-mini.pt-has-on>.pt-l .pt-ico{color:#fff}
/* v0.225: «двигать кнопки вверху в любое место в сетке, но чтоб не перекрывались» — полоса свободной раскладкой (mayatnik-menu.js, mayatnik-dd-grid):
   места — absolute по сетке шапки, высота полосы — по рядам (шапка растёт вниз, поле — под ней); заголовок — у верха, по середине первого ряда (26 px);
   пока тянут — ряды сетки бледными полосами и место, куда встанет, пунктиром. На телефоне (≤ 600 px) классов нет — полоса как была */
.mayatnik-menu-ready>header.may-grid>*{align-self:flex-start}
.mayatnik-menu-ready>header.may-grid>h1,.mayatnik-menu-ready>header.may-grid>.ver{line-height:26px}
.mayatnik-menu-ready>header.may-grid>.gz-hx{margin-top:1px}
header #paintTools.pt-dd.pt-grid{position:relative;display:block;flex:1 1 0;min-width:0;max-width:none;margin:1px 0 0}
header #paintTools.pt-grid>.pt-g,header #paintTools.pt-grid>#mayCorner{position:absolute;margin:0}
header #paintTools.pt-grid>.pt-drag{z-index:60}
#paintTools #mayCorner.pt-drag{opacity:.6}
#paintTools .pt-ghost{position:absolute;z-index:55;height:24px;box-sizing:border-box;border:1.5px dashed var(--c,#7cbcff);border-radius:3px;background:color-mix(in srgb,var(--c,#7cbcff) 14%,transparent);pointer-events:none}
/* v0.412: при перетаскивании — одна полоса в шапке и одна в нижней полосе. */
#paintTools .pt-gridbg,#mayBottomBar>.pt-gridbg{position:absolute;pointer-events:none;background:#ffffff0b}
#paintTools.pt-dragging #mayCorner,#paintTools.pt-dragging #mayCorner *{cursor:grabbing}
/* v0.226: «Вид» — два столбца (.pt-col), в них блоки по темам своим фоном (.pt-sec, цвет темы — --s); блок: поля 2 px сверху и снизу, между блоками без зазора —
   ряд по-прежнему 28 px (кнопка 24 + 4), зубцы рамки против остриёв; тонкая черта цветом темы — граница блоков. На телефоне столбцы — две колонки сетки списка */
header #paintTools.pt-dd .pt-r.pt-cols{flex-direction:row;align-items:stretch;column-gap:8px!important}
header #paintTools.pt-dd .pt-r.pt-cols>.pt-col{display:flex;flex-direction:column;min-width:0;margin:0!important;align-self:stretch}
header #paintTools.pt-dd .pt-sec{display:flex;flex-direction:column;gap:4px;padding:2px 0;border-radius:3px;background:color-mix(in srgb,var(--s,#7cbcff) 11%,transparent)}
header #paintTools.pt-dd .pt-sec+.pt-sec{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--s,#7cbcff) 45%,transparent)}
header #paintTools.pt-dd .pt-sec>*{margin:0!important}
header #paintTools.pt-dd .pt-sec>.pt-b.gz-hx{--gz-n:9px}
header #paintTools.pt-dd .pt-sec>:not(.gz-hx){margin:0 12px!important}
#paintTools .pt-sec>.lg{box-sizing:border-box;height:24px;padding:0 10px;align-items:center;flex-wrap:nowrap;white-space:nowrap;gap:10px;color:#c7d3e6;border:1px solid color-mix(in srgb,var(--c,#7cbcff) 35%,transparent);border-radius:4px}
#paintTools .pt-sec>.lg:hover{background:color-mix(in srgb,var(--c,#7cbcff) 18%,transparent)}
header #paintTools.pt-dd .pt-view .pt-sec>.pt-vx{height:24px;box-sizing:border-box;padding:0;flex-wrap:nowrap}
/* v0.227: «Что это такое?» свёрнутое в ромб (правый щелчок) — как названия групп v0.209: 34 × 24, только значок ℹ */
.mayatnik-menu-ready #mayAbout .pt-ico{display:none}
.mayatnik-menu-ready #mayAbout.pt-mini{width:34px;padding:0;gap:0;justify-content:center;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mayatnik-menu-ready #mayAbout.pt-mini::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mayatnik-menu-ready #mayAbout.pt-mini>span:not(.pt-ico){display:none}
.mayatnik-menu-ready #mayAbout.pt-mini>.pt-ico{display:block;font-size:13px;line-height:1;color:var(--c)}
/* v0.229: «Правка» — кнопка полосы пополам «↶ Отм. | ↷ Повт.», без списка (.pt-btn); в ромбе — ↶ ↷ по половинкам */
header #paintTools.pt-dd .pt-btn>.pt-l{justify-content:center;gap:0;padding:0 12px;cursor:default}
header #paintTools.pt-dd .pt-btn>.pt-l::after,header #paintTools.pt-dd .pt-btn>.pt-l .pt-pin,header #paintTools.pt-dd .pt-btn>.pt-l .pt-ico{display:none}
header #paintTools.pt-dd .pt-btn .pt-ud{flex:1 1 0;align-self:stretch;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 3px;color:#c9d3e3;font-weight:600;white-space:nowrap;cursor:pointer;outline:none}
header #paintTools.pt-dd .pt-btn .pt-ud:hover,header #paintTools.pt-dd .pt-btn .pt-ud:focus-visible{color:#fff}
header #paintTools.pt-dd .pt-btn .pt-ud.dis{opacity:.35;cursor:default;text-shadow:none}
header #paintTools.pt-dd .pt-btn .pt-ud-g{color:var(--c);font-weight:400}
header #paintTools.pt-dd .pt-btn .pt-ud-sep{flex:none;align-self:stretch;width:1px;margin:5px 3px;background:color-mix(in srgb,var(--c) 60%,transparent)}
header #paintTools.pt-dd .pt-btn.pt-mini .pt-ud-n,header #paintTools.pt-dd .pt-btn.pt-mini .pt-ud-sep{display:none}
header #paintTools.pt-dd .pt-btn.pt-mini .pt-ud{font-size:11px;padding:0;gap:0}
header #paintTools.pt-dd .pt-btn.pt-mini .pt-ud:first-child{justify-content:flex-end;padding-right:1px}
header #paintTools.pt-dd .pt-btn.pt-mini .pt-ud:nth-child(3){justify-content:flex-start;padding-left:1px}
/* v0.232: группы левой рейки в шапке (mayatnik-dd-up): шапка группы — в сетке полосы, кнопки — выпадающим списком под ней на подложке;
   --gdx — сдвиг списка влево у правого края окна (ставит mayatnik-menu.js). Пока группу тянут из рейки — рейка над шапкой; рейка — пунктиром, когда группу из шапки можно опустить обратно */
header #paintTools.pt-grid>.gz-group{position:absolute;margin:0;--gz-w:120px;--gz-h:24px;--gz-n:12px;--gz-bg:#121a30;--gz-txt:#dfe6f5;--gz-mut:#8592ad;width:var(--gz-w);color:var(--gz-txt);font:12px/1.2 "Segoe UI",Roboto,Arial,sans-serif;user-select:none;-webkit-user-select:none}
header #paintTools.pt-grid>.gz-group.gz-open{z-index:52}
header #paintTools.pt-grid>.gz-group>.gz-soty,header #paintTools.pt-grid>.gz-group>.gz-wide{width:calc(var(--gz-w)*2 - var(--gz-n) + 4px);margin-left:var(--gdx,0px)}
header #paintTools.pt-grid>.gz-group.gz-open::after{content:"";position:absolute;z-index:-1;left:calc(var(--gdx,0px) - 8px);top:calc(var(--gz-h) + 1px);width:calc(var(--gz-w)*2 - var(--gz-n) + 20px);bottom:-8px;background:#0d1119f2;border-radius:6px;box-shadow:0 8px 24px #000a;pointer-events:none}
header #paintTools.pt-grid>.gz-group.pt-drag{opacity:.6;z-index:60}
header #paintTools.pt-grid>.gz-group .gz-wide{flex-direction:row;flex-wrap:wrap;align-items:center;row-gap:3px}
header #paintTools.pt-grid>.gz-group .gz-wide>.gz-control:has(input[type=number]){width:var(--gz-w);flex:none;margin-right:calc(4px - var(--gz-n))}
header #paintTools.pt-grid>.gz-group .gz-control:has(input[type=number]) input[type=number]{width:44px;flex:0 0 44px}
header #paintTools.pt-grid>.gz-group .gz-wide>.gz-control:has(#symTriangleRows){margin-right:calc(100% - var(--gz-w))}
body.may-raildrag #mayatnikRail{z-index:45}
#mayatnikRail.may-drop{outline:1px dashed #7cbcff99;outline-offset:-3px}
/* v0.235: «Биты в строках» — таблица строк 1…15 под кнопкой */
.may-rc{position:fixed;z-index:2147483640;max-width:calc(100vw - 8px);max-height:calc(100dvh - 90px);overflow:auto;box-sizing:border-box;padding:8px 10px;background:#0d1119f5;border:1px solid #b48cff88;border-radius:6px;box-shadow:0 8px 24px #000a;color:#dfe6f5;font:12px/1.35 system-ui,sans-serif}
.may-rc .rc-h{margin:0 0 6px;color:#cdb8ff}
.may-rc table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.may-rc th,.may-rc td{padding:1px 8px;text-align:right;white-space:nowrap}
.may-rc th{color:#8592ad;font-weight:500;border-bottom:1px solid #2a3350}
.may-rc td:nth-child(3){color:#8592ad;text-align:left}
.may-rc .rc-n{margin:6px 0 0;color:#8592ad;max-width:520px}
/* v0.241: «сделай фон кнопкам такой же рейкой с отступом от кнопок, но тёмный, а то сливается»: левая рейка лежит прямо на поле — вокруг каждой
   кнопки и шапки группы тёмная кайма 3 px (по контуру шестиугольников, просветы между кнопками закрыты), как у столбца вариантов (v0.233) */
#mayatnikRail .gz-rail,#mayatnikRailR .gz-rail{filter:drop-shadow(3px 0 0 #05070d) drop-shadow(-3px 0 0 #05070d) drop-shadow(0 3px 0 #05070d) drop-shadow(0 -3px 0 #05070d)}
/* v0.255: шапка группы рейки, свёрнутая правым щелчком, — ромб со значком (.gz-mini, значок .gz-mico) */
.gz-head .gz-mico{display:none}
.gz-group.gz-mini>.gz-head{width:34px!important;min-width:0!important;padding:0;justify-content:center;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.gz-group.gz-mini>.gz-head::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.gz-group.gz-mini>.gz-head>.gz-nm,.gz-group.gz-mini>.gz-head>.gz-hr{display:none}
.gz-group.gz-mini>.gz-head>.gz-mico{display:block;position:relative;z-index:1;font-size:13px;line-height:1;color:var(--c)}
.gz-group.gz-mini.gz-open>.gz-head>.gz-mico{color:#fff}
/* v0.256: «убери этот значок» — бипирамида-логотип у названия не показывается */
.may-logo{display:none!important}
/* v0.260: «тут всё сузь в ширину стандартной кнопки, позволяет размер»: список «Вида» / «Зеркал» был широким из-за строки цветов «1 · 0 · стал 1 · стал 0» —
   она теперь в два ряда (2 × 2), столбец не шире 156 px, длинные названия — с многоточием */
header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col{max-width:156px}
header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col.pt-colv{width:126px;max-width:126px}   /* v0.329: «Вид» — кнопки стандартной ширины (как шапка группы), длинное — многоточием */
@media(max-width:600px){header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col.pt-colv{width:auto;max-width:none}}
header #paintTools.pt-dd .pt-view .pt-b.gz-hx .gz-nm{overflow:hidden;text-overflow:ellipsis;min-width:0}
#paintTools .pt-sec>.lg{height:auto!important;min-height:24px;flex-wrap:wrap!important;white-space:normal!important;row-gap:2px;column-gap:8px!important;padding:2px 8px!important}
#paintTools .pt-sec>.lg>*{white-space:nowrap}

/* v0.331: линия «Верха» — тянется рукой, булавка — закреп */
#zTopLine{position:fixed;z-index:6;height:12px;margin-top:-6px;cursor:ns-resize;touch-action:none;display:flex;align-items:center}
#zTopLine[hidden]{display:none}
#zTopLine::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px dashed #7cbcff;pointer-events:none}   /* v0.355: «все линии тончайшие — 1 пиксель» */
#zTopLine.drag::before,#zTopLine:hover::before{border-top-style:solid}
#zTopLine .ztl-pin{position:relative;z-index:1;margin-left:6px;width:22px;height:22px;padding:0;border:1px solid #7cbcff;border-radius:50%;background:#121a30;font-size:12px;line-height:1;cursor:pointer}
#zTopLine .ztl-pin:hover{background:#1d2b4d}
#zTopLine .ztl-pin.off{opacity:.45;filter:grayscale(1);border-style:dashed}   /* v0.333: откреплено */
#zTopLine .ztl-row{position:absolute;top:50%;transform:translateY(-50%);padding:0 4px;border-radius:3px;background:#121a30cc;color:#9fc5ed;font:10px var(--mono);pointer-events:none;white-space:nowrap}   /* v0.351: у краёв битов строки */
#zTopLine .ztl-row[hidden]{display:none}
#zTopLine .ztl-mir{position:relative;z-index:1;margin-left:4px;width:22px;height:22px;padding:0;border:1px solid #7cbcff;border-radius:50%;background:#121a30;color:#7cbcff;font:700 12px/1 'Segoe UI',sans-serif;cursor:pointer}
#zTopLine .ztl-mir:hover{background:#1d2b4d}
#zTopLine .ztl-mir.on{background:#ff87cf;border-color:#ff87cf;color:#0d1119}
body.may-zen #zTopLine:not(.zen){display:none}   /* v0.353: закреплённая 📌 — видна и в дзене */

/* v0.337: «Анимация» в нижней полосе — ×N | время кадра, слева */
#mayBottomBar>#mayBbAnim{width:var(--gz-w);margin:0}   /* v0.338: стандартной ширины — правило ползунка полосы (>.gz-hx) его растягивало */
#mayBbAnim{position:absolute;left:6px;top:50%;transform:translateY(-50%);--c:#73e4a5;cursor:default}
#mayBbAnim .may-hp-h{position:relative;z-index:1;white-space:nowrap}
/* v0.340: ×N и время — полкнопками по бокам ползунка кадра */
#mayBottomBar>.may-bb-half{width:calc(var(--gz-w) / 2 + 6px);flex:none;justify-content:center;padding:0 10px;--c:#73e4a5;margin:0 -4px}
#mayBottomBar>.may-bb-half .may-hp-h{padding:0}
#mayBottomBar>.gz-sl .gz-mid{margin:0 -8px}   /* v0.341: «ползунок до краёв внутренних» — grozd держит бегунок в 8 px от краёв дорожки; дорожка шире на 8 px внутрь стрелок, кадр 0 и последний — у самых стрелок */
/* v0.342: «сделай везде один фон» — фон страницы, шапки, панелей, рейки и нижней полосы — чёрный, как пустые клетки поля (EMPTY = 0, 0, 0) */
:root{--bg:#000;--panel:#000}
.mayatnik-menu-ready #mayatnikSidebar,.mayatnik-menu-ready #mayBottomBar{background:#000}   /* рейка на широком — прозрачная над полем, её не трогать */
@media(max-width:600px){.mayatnik-menu-ready #mayatnikRail{background:#000}}
/* v0.347: «не затемнять полосу»: слои поверх поля (шаблон, подсветки) ставятся по рамке холста и вылезали на нижнюю полосу — полоса выше них */
.mayatnik-menu-ready #mayBottomBar{z-index:9}
/* v0.350: «Хорр» — в ряду, справа от ползунка */
#mayBbHorr{position:relative;right:auto;top:auto;transform:none;flex:none;margin-left:2px}
@media(max-width:600px){#mayBbHorr{right:auto}}
#zTopLine .ztl-pin,#zTopLine .ztl-mir{position:absolute;top:50%;margin:-11px 0 0}   /* v0.352: места ставит zTopLine — у левого номера */
#zTopLine .ztl-row{padding:0 2px}
#zTopLine .ztl-row{padding:0 1px;border-radius:2px}   /* v0.354 */
/* v0.355: в списке «Хорр» сверху — ползунки «Строк», «Вершин», «Показ»; список шириной в две кнопки, над «Хорр» по центру */
.may-hp-pop{left:50%!important;right:auto!important;width:calc(var(--gz-w) * 2);transform:translateX(-50%)}
.may-hp-pop>.gz-hx{width:100%!important;box-sizing:border-box;margin:0}
/* v0.356: «Точка | Сдвиг | Застыло» — одна кнопка из трёх частей */
header #paintTools .pt-b.gz-hx.pt-tri3{padding:0 9px!important;gap:0;justify-content:space-between}
#paintTools .pt-tri3 .pt-t3{position:relative;z-index:1;flex:1 1 auto;text-align:center;padding:0 3px;font-size:11px;color:#8592ad;cursor:pointer;white-space:nowrap}
#paintTools .pt-tri3 .pt-t3+.pt-t3{border-left:1px solid color-mix(in srgb,var(--c,#b48cff) 55%,transparent)}
#paintTools .pt-tri3 .pt-t3.on{color:#fff}
#paintTools .pt-tri3 .pt-t3:hover{color:#dfe6f5}
/* v0.358: кнопки «Поля» в списке «Хорр» — по две в ряд */
.may-hp-2{display:flex;gap:0;width:100%}
.may-hp-2>.gz-hx{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:50%!important;flex:1 1 50%;margin:0!important;box-sizing:border-box}
/* v0.359: свои линии (верт., диаг., ещё горизонтали) — ручки: «+», зеркало, «×», номер (тянуть) */
.zl-hd{position:fixed;z-index:6;display:flex;align-items:center;gap:2px;height:18px;touch-action:none}
.zl-hd[hidden]{display:none}
.zl-b{width:16px;height:16px;padding:0;border:1px solid #7cbcff;border-radius:50%;background:#121a30;color:#7cbcff;font:700 11px/1 'Segoe UI',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center}
.zl-b:hover{background:#1d2b4d}
.zl-b.on{background:#ff87cf;border-color:#ff87cf;color:#0d1119}
.zl-n{padding:0 2px;border-radius:2px;background:#121a30cc;color:#9fc5ed;font:10px var(--mono);user-select:none;white-space:nowrap}
#zTopLine .ztl-add{position:absolute;top:50%;margin:-11px 0 0;z-index:1;width:22px;height:22px;padding:0;border:1px solid #7cbcff;border-radius:50%;background:#121a30;color:#7cbcff;font:700 13px/1 'Segoe UI',sans-serif;cursor:pointer}
#zTopLine .ztl-add:hover{background:#1d2b4d}
body.may-zen .zl-hd{display:none}
#zTopLine .ztl-del{position:absolute;top:50%;margin:-11px 0 0;z-index:1;width:22px;height:22px;padding:0;border:1px solid #ff7373;border-radius:50%;background:#121a30;color:#ff7373;font:700 13px/1 'Segoe UI',sans-serif;cursor:pointer}   /* v0.361 */
#zTopLine .ztl-del:hover{background:#3a1820}
.zl-b.zl-del{border-color:#ff7373;color:#ff7373}
/* v0.368: ромб оси посередине «Правки» — замораживает масштаб («Верх» + «Вниз»); черта-разделитель вместо него спрятана */
header #paintTools.pt-dd .pt-btn .pt-ud-sep{display:none}
header #paintTools.pt-dd .pt-btn .pt-ud-ax{position:relative;flex:none;align-self:center;width:22px;height:22px;margin:0 2px;cursor:pointer;outline:none;
  background:color-mix(in srgb,var(--c) 45%,#121a30);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
header #paintTools.pt-dd .pt-btn .pt-ud-ax::after{content:"";position:absolute;left:50%;top:2px;bottom:2px;border-left:1px dashed #dfe6f5;transform:translateX(-.5px)}
header #paintTools.pt-dd .pt-btn .pt-ud-ax:hover,header #paintTools.pt-dd .pt-btn .pt-ud-ax:focus-visible{background:color-mix(in srgb,var(--c) 70%,#121a30)}
header #paintTools.pt-dd .pt-btn .pt-ud-ax.on{background:var(--c);filter:drop-shadow(0 0 4px var(--c))}
header #paintTools.pt-dd .pt-btn .pt-ud-ax.on::after{border-left-style:solid;border-color:#0d1119}
.may-hp-pop>.may-hp-vm{width:100%!important}   /* v0.372: «N/3 | 4N» во всю ширину списка */
.zl-hd.zl-last .zl-del{opacity:.3;cursor:default}   /* v0.373: последняя своей породы — не удаляется */
/* v0.376: «кнопки нижнего меню — как в Хабе: фон не менять, только кайма цветом у нажатых»: ненажатая — тусклая кайма (20 % цвета),
   нажатая — кайма цветом группы с лёгким свечением; фон внутри (::before) — всегда свой */
#mayBottomBar .gz-hx{background:color-mix(in srgb,var(--c) 20%,#000)!important}
#mayBottomBar .gz-hx::before{inset:1px;background:var(--gz-bg)!important}
#mayBottomBar .gz-hx.on,#mayBottomBar .gz-hx.gz-on{background:var(--c)!important;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 70%,transparent))}
#mayBottomBar .gz-hx.on::before,#mayBottomBar .gz-hx.gz-on::before{inset:1.5px}
#mayBottomBar .gz-hx:hover::before,#mayBottomBar .gz-hx:focus-visible::before{background:var(--gz-bg)!important}   /* v0.377: «фон кнопок меняется» — и при наведении фон свой */
#mayBottomBar .gz-hx:hover:not(.on):not(.gz-on){background:color-mix(in srgb,var(--c) 55%,#000)!important}   /* наведение — только кайма ярче */
#mayBottomBar .gz-hx:focus-visible{outline:none}
#mayBottomBar .gz-hx.on>*,#mayBottomBar .gz-hx.gz-on>*{color:#fff}
/* v0.379: «или-или: обводка одной какой-либо части, а не двух сразу; везде так; свечение текста не нужно».
   Кнопки из частей — части во всю высоту, включённая — своя кайма цветом (как у нажатой кнопки), фон свой; у края кнопки — остриё шестиугольника */
.may-hp{padding:0!important}
.may-hp .may-hp-h{position:relative;z-index:1;align-self:stretch;display:flex;align-items:center;justify-content:center;text-shadow:none}
.may-hp .may-hp-h.on{color:#fff}
.may-hp .may-hp-h:is(.on,:hover,:focus-visible)::before,.may-hp .may-hp-h:is(.on,:hover,:focus-visible)::after{content:"";position:absolute;z-index:-1;inset:0;background:var(--c);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.may-hp .may-hp-h:is(.on,:hover,:focus-visible)::after{inset:1.5px;background:var(--gz-bg,#121a30)}
.may-hp .may-hp-h:is(.on,:hover,:focus-visible):first-child::before{clip-path:polygon(var(--gz-n) 0,100% 0,100% 100%,var(--gz-n) 100%,0 50%)}
.may-hp .may-hp-h:is(.on,:hover,:focus-visible):first-child::after{clip-path:polygon(calc(var(--gz-n) - 1px) 0,100% 0,100% 100%,calc(var(--gz-n) - 1px) 100%,0 50%)}
.may-hp .may-hp-h:is(.on,:hover,:focus-visible):last-child::before{clip-path:polygon(0 0,calc(100% - var(--gz-n)) 0,100% 50%,calc(100% - var(--gz-n)) 100%,0 100%)}
.may-hp .may-hp-h:is(.on,:hover,:focus-visible):last-child::after{clip-path:polygon(0 0,calc(100% - var(--gz-n) + 1px) 0,100% 50%,calc(100% - var(--gz-n) + 1px) 100%,0 100%)}
.may-hp .may-hp-sep{margin:5px 0}
header #paintTools .pt-b.gz-hx.pt-tri3{padding:0!important}
#paintTools .pt-tri3 .pt-t3{align-self:stretch;display:flex;align-items:center;justify-content:center;text-shadow:none}
#paintTools .pt-tri3 .pt-t3:is(.on,:hover,:focus-visible)::before,#paintTools .pt-tri3 .pt-t3:is(.on,:hover,:focus-visible)::after{content:"";position:absolute;z-index:-1;inset:0;background:var(--c,#b48cff);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
#paintTools .pt-tri3 .pt-t3:is(.on,:hover,:focus-visible)::after{inset:1.5px;background:var(--gz-bg,#121a30)}
#paintTools .pt-tri3 .pt-t3:is(.on,:hover,:focus-visible):first-child::before{clip-path:polygon(var(--gz-n,9px) 0,100% 0,100% 100%,var(--gz-n,9px) 100%,0 50%)}
#paintTools .pt-tri3 .pt-t3:is(.on,:hover,:focus-visible):first-child::after{clip-path:polygon(calc(var(--gz-n,9px) - 1px) 0,100% 0,100% 100%,calc(var(--gz-n,9px) - 1px) 100%,0 50%)}
#paintTools .pt-tri3 .pt-t3:is(.on,:hover,:focus-visible):last-child::before{clip-path:polygon(0 0,calc(100% - var(--gz-n,9px)) 0,100% 50%,calc(100% - var(--gz-n,9px)) 100%,0 100%)}
#paintTools .pt-tri3 .pt-t3:is(.on,:hover,:focus-visible):last-child::after{clip-path:polygon(0 0,calc(100% - var(--gz-n,9px) + 1px) 0,100% 50%,calc(100% - var(--gz-n,9px) + 1px) 100%,0 100%)}
#paintTools .pt-tri3 .pt-t3+.pt-t3{border-left:0;box-shadow:inset 1px 0 0 color-mix(in srgb,var(--c,#b48cff) 45%,transparent)}
/* v0.380: пары в списке «Хорр» — стандартная пара grozd; без свечения текста; во всю ширину списка */
#mayBottomBar .gz-pair .gz-half.gz-on,#mayBottomBar .gz-pair .gz-half:hover{text-shadow:none}
#mayBottomBar .gz-pair.gz-split .gz-half{font-size:12px;font-weight:600}
#mayBottomBar .gz-hx.gz-pair::before{inset:1.5px}
/* v0.381: «Точка | Сдвиг | Застыло» — стандартная пара grozd (gz-pair gz-split) с третьей частью: средняя — косой параллелограмм, крайние — с остриём */
header #paintTools .pt-b.gz-hx.gz-pair{padding:0!important;gap:0!important}
header #paintTools .pt-b.gz-hx.gz-pair:not(.on):not(:hover){background:color-mix(in srgb,var(--c) 30%,#000)}
.gz-pair.gz-split.gz-split3 .gz-half{width:calc(33.34% + 5px);font-size:11px;font-weight:400;text-shadow:none}
.gz-pair.gz-split.gz-split3 .gz-half.gz-on{color:#fff;text-shadow:none}
.gz-pair.gz-split.gz-split3 .gz-half.gz-h1{margin-left:-7px;clip-path:polygon(9px 0,100% 0,calc(100% - 8px) 100%,1px 100%)}
.gz-pair.gz-split.gz-split3 .gz-half.gz-h2{margin-left:-7px;background:var(--gz-r2);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-split3 .gz-half.gz-h2::before{background:var(--gz-bg)!important}
#mayRhombs{top:auto;bottom:44px;transform:none}   /* v0.385: «сдвинь вниз» — ромбы «Дзен · Видео · GIF» у правого края над нижней полосой */
body.may-zen #mayRhombs{bottom:10px}
/* v0.387: «Зеркала» (и «Вид»): «выровняй отступы, убери скролл внизу; границы какие-то лишние» — все кнопки столбца шириной в столбец, отступы одни,
   без прокрутки вбок; черты между блоками сняты; «Точка | Сдвиг | Застыло» не шире столбца */
header #paintTools.pt-dd .pt-view .pt-r{overflow-x:hidden!important}
header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col{width:156px;max-width:156px;overflow:hidden}
header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col.pt-colv{width:126px;max-width:126px}
header #paintTools.pt-dd .pt-view .pt-sec>.gz-hx,header #paintTools.pt-dd .pt-view .pt-sec>.pt-b{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;margin:0!important}
header #paintTools.pt-dd .pt-sec+.pt-sec{box-shadow:none}
header #paintTools.pt-dd .pt-view .pt-b.gz-pair.gz-split3{min-width:0;overflow:hidden}
.gz-pair.gz-split.gz-split3 .gz-half{min-width:0;overflow:hidden;text-overflow:clip;font-size:10px;padding:0 2px 0 4px}
@media(max-width:600px){header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col,header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col.pt-colv{width:auto;max-width:none}}
/* v0.388: «ширина нужна стандартная, меньше — как в «Виде»; отступы — между кнопками»: оба столбца по 126 px; зазор между кнопками везде 4 px —
   и внутри блока, и на стыке блоков (у блоков нет своих полей, столбец ставит 4 px между ними) */
header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col{width:126px!important;max-width:126px!important;gap:4px}
header #paintTools.pt-dd .pt-view .pt-sec{padding:0!important;gap:4px!important}
@media(max-width:600px){header #paintTools.pt-dd .pt-view .pt-r.pt-cols>.pt-col{width:auto!important;max-width:none!important}}   /* v0.388: на телефоне — как было */
/* v0.390: группы «внизу» — над нижней полосой у левого края, список открывается вверх */
header #paintTools .pt-bot{position:fixed!important;top:auto!important;z-index:45}
header #paintTools.pt-dd .pt-bot .pt-r{top:auto!important;bottom:calc(100% + 3px)!important}
header #paintTools .gz-group.pt-bot{display:flex;flex-direction:column-reverse}
header #paintTools .gz-group.pt-bot::after{display:none}
#mayBottomBar.may-bbdrop{box-shadow:inset 0 0 0 2px color-mix(in srgb,#7cbcff 70%,transparent)}
/* v0.391: список «Хорр» — столбец кнопок стандартной ширины (пары — одна кнопка из двух частей) */
.may-hp-pop{width:var(--gz-w)!important}
.may-hp-pop>.gz-hx{width:100%!important}
.may-hp-pop .gz-sl .gz-vl{z-index:1}
.may-hp-pop .gz-sl .gz-th{z-index:5}   /* v0.393: «бегунок вперёд текста» — ромб бегунка поверх подписи (в полосе и в списке «Хорр») */
/* v0.399: середина ползунка кадра — на оси: связка нижней полосы сдвигается целиком (--axdx), ▶ / ✖ — в середине дорожки */
#mayBottomBar>.may-bb-half,#mayBottomBar>.gz-sl,#mayBottomBar>#mayBbHorr{transform:translateX(var(--axdx,0px))}
#mayBottomBar .may-bb-play{left:50%!important}
#mayBottomBar .may-bb-rs{left:calc(50% + 21px)!important}
header #paintTools.pt-dd .pt-view .pt-sec{background:transparent!important;border-radius:0}   /* v0.403: «отступы поправь, как в выпадающем списке» — без цветной подложки блоков: кнопки стоят ровно, кайма видна одинаково */

/* v0.417: знаки масштаба в ромбах над Дзеном. */
#mayRhombs .may-rh-zoom{font-size:24px;font-weight:600}

/* v0.434: во всех группах одна кнопка в строке, без второго столбца сот. */
.mayatnik-menu-ready .gz-rail{width:var(--gz-w)}
.mayatnik-menu-ready .gz-group>.gz-soty{width:var(--gz-w)!important;height:auto!important}
.mayatnik-menu-ready .gz-group.gz-open>.gz-soty{display:flex!important;flex-direction:column;gap:4px}
.mayatnik-menu-ready .gz-group>.gz-soty>.gz-hx{position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin:0!important;flex:none}
.mayatnik-menu-ready .gz-group>.gz-wide{width:var(--gz-w)!important;margin-left:0!important;flex-direction:column!important;flex-wrap:nowrap!important}
.mayatnik-menu-ready .gz-group>.gz-wide>.gz-control{width:100%!important;margin:0!important}
header #paintTools.pt-grid>.gz-group>.gz-soty,header #paintTools.pt-grid>.gz-group>.gz-wide{margin-left:0!important}
header #paintTools.pt-grid>.gz-group.gz-open::after{left:-8px;width:calc(var(--gz-w) + 16px)}
header #paintTools.pt-dd .pt-g.pt-open>.pt-r{display:flex!important;flex-direction:column!important;grid-template-columns:1fr!important;grid-auto-flow:row!important;align-items:stretch;column-gap:0!important}
header #paintTools.pt-dd .pt-r.pt-cols{flex-direction:column!important;column-gap:0!important}
header #paintTools.pt-dd .pt-r>.pt-col{flex:none;width:100%!important;max-width:none!important}
header #paintTools.pt-dd .pt-r>.pt-col>.pt-sec{width:100%}
/* Чб / Цвет — стандартная кнопка из двух половин. */
#paintTools .pt-sec>#lg{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap!important;width:100%;height:24px!important;min-height:24px;gap:0!important;padding:0!important;border:0;border-radius:0;background:none!important;--gz-h:24px}
#paintTools #lg .gz-half{display:flex;align-items:center;justify-content:center}

/* v0.436: боковые группы раскрываются вправо; подложки — только по зубцам кнопок. */
#mayatnikRail .gz-rail{filter:none;gap:4px}
.mayatnik-menu-ready #mayatnikRail{z-index:8}
.mayatnik-menu-ready .gz-group,header #paintTools .pt-g,header #paintTools .pt-sec{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
header #paintTools.pt-grid>.gz-group.gz-open::after{display:none!important}
.may-rail-list{display:contents}
#mayatnikRail .gz-group>.may-rail-list{display:none;position:fixed;z-index:50;grid-auto-flow:column;gap:4px;overflow-x:auto;pointer-events:auto;background:transparent;border:0;border-radius:0;box-shadow:none}
#mayatnikRail .gz-group.gz-open>.may-rail-list{display:grid}
#mayatnikRail .may-rail-list .gz-soty,#mayatnikRail .may-rail-list .gz-wide,#mayatnikRail .may-rail-list .gz-sec{display:contents!important}
#mayatnikRail .may-rail-list .gz-hx{position:relative!important;left:auto!important;top:auto!important;width:var(--gz-w)!important;height:var(--gz-h);margin:0!important}
header #paintTools .may-rail-list>.gz-soty,header #paintTools .may-rail-list>.gz-wide{width:var(--gz-w)!important;height:auto!important;margin:0!important;gap:4px}
header #paintTools .gz-group.gz-open>.may-rail-list>.gz-soty{display:flex!important;flex-direction:column}
header #paintTools .may-rail-list>.gz-soty>.gz-hx{position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin:0!important}
header #paintTools.pt-dd .pt-r,header #paintTools.pt-dd .pt-col,header #paintTools.pt-dd .pt-sec,.gz-ladder{gap:4px!important}
header #paintTools.pt-dd .pt-sec{padding:0!important}
.mayatnik-menu-ready .gz-wide,.mayatnik-menu-ready .gz-soty{row-gap:4px!important;margin-top:4px}
/* Фон кнопок постоянный: состояния меняют только кайму. */
.mayatnik-menu-ready .gz-head::before,.mayatnik-menu-ready .gz-hx:hover::before,.mayatnik-menu-ready .gz-hx.gz-on::before,.mayatnik-menu-ready .gz-hx.gz-press::before{background:var(--gz-bg,#121a30)!important}
header #paintTools.pt-dd .pt-l:hover::before,header #paintTools.pt-dd .pt-open>.pt-l::before{background:#121a30!important}
#paintTools #lg::before{display:none}
#paintTools #lg .palette-half{position:relative;isolation:isolate;height:24px;gap:6px;text-shadow:none}
#paintTools #lg .palette-half::before{background:var(--gz-bg,#121a30)!important;z-index:-1}
#paintTools #lg .palette-half:hover,#paintTools #lg .palette-half:focus-visible{background:var(--c)!important}
#paintTools #lg input[type=color]{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:14px;height:14px;min-width:14px;padding:0;margin:0;border:1px solid #ffffff55;border-radius:50%;background:none;overflow:hidden;cursor:pointer}
/* v0.437: подложка зубцами за всей группой, включая приглушённые кнопки. */
.mayatnik-menu-ready .gz-group{isolation:isolate}
.may-group-backdrop{position:absolute;left:0;top:0;z-index:-1;fill:#0d1119;pointer-events:none;overflow:visible}
.mayatnik-menu-ready .may-group-covered,.mayatnik-menu-ready .may-group-covered *{visibility:hidden!important;pointer-events:none!important}
.mayatnik-menu-ready .may-list-dim{opacity:.25!important;transition:opacity .12s}
header #paintTools.pt-dd .pt-r{background-attachment:local}
/* v0.438: боковая толщина подложки — 2 px, половина межкнопочного отступа 4 px. */
.may-group-backdrop{stroke:#0d1119;stroke-width:4px;stroke-linejoin:round}
#mayatnikRail .gz-group>.may-rail-list{padding:0 2px;box-sizing:content-box}
header #paintTools.pt-dd .pt-r{padding:0 2px;margin-left:-2px}
/* v0.438: наведение — тонкая цветная кайма, текст и внутренний фон постоянные. */
.mayatnik-menu-ready :is(.gz-hx,.gz-hx *,.pt-l,.pt-l *){text-shadow:none!important}
.mayatnik-menu-ready :is(.gz-hx,.pt-l){filter:none!important}
.mayatnik-menu-ready .gz-hx:not(.gz-pair):is(:hover,:focus-visible),
.mayatnik-menu-ready #paintTools .pt-l:is(:hover,:focus-visible){background:var(--c,#7cbcff)!important}
.mayatnik-menu-ready .gz-hx:not(.gz-pair):is(:hover,:focus-visible)::before,
.mayatnik-menu-ready #paintTools .pt-l:is(:hover,:focus-visible)::before{inset:1px!important;background:var(--gz-bg,#121a30)!important}
.mayatnik-menu-ready .gz-hx:not(.gz-pair):is(.gz-on,.on)::before,
.mayatnik-menu-ready .gz-group.gz-open>.gz-head::before,
.mayatnik-menu-ready #paintTools :is(.pt-open,.pt-has-on)>.pt-l::before{inset:2px!important}
.mayatnik-menu-ready .gz-half{color:var(--gz-k,var(--gz-txt,#dfe6f5))!important}
.mayatnik-menu-ready .gz-half:is(:hover,:focus-visible){background:var(--c,#7cbcff)!important}
.mayatnik-menu-ready .gz-half:is(:hover,:focus-visible)::before{inset:1px!important;background:var(--gz-bg,#121a30)!important}
.mayatnik-menu-ready .gz-half.gz-on::before{inset:2px!important}
.mayatnik-menu-ready .gz-val :is(.gz-a,.gz-vh,.gz-vt):hover{color:inherit}
#paintTools .pt-half:not(.on):hover{color:#8e98ad}
#paintTools .pt-t3:not(.on):hover{color:#8592ad}
#paintTools .pt-ud:not(.dis):hover,.may-hp .may-hp-h:not(.on):hover{color:#c9d3e3}
.may-hp .may-hp-h:not(.on):hover::after,#paintTools .pt-t3:not(.on):hover::after{inset:1px}
#paintTools .pt-ud:not(.dis):hover{box-shadow:inset 0 0 0 1px var(--c)}
#mayBottomBar .may-bb-play:hover{filter:none}
#mayBottomBar .may-bb-rs:hover{background:#ff7373}
#mayRhombs .may-rh:hover{color:#8fd3ff}
/* v0.439: наведение — 1 px, включённая — 2 px, удержание нажатия — 3 px. */
.mayatnik-menu-ready .gz-hx:not(.gz-pair)[aria-pressed=true]::before,
.mayatnik-menu-ready .gz-half[aria-pressed=true]::before{inset:2px!important}
.may-hp .may-hp-h.on::after,#paintTools .pt-t3.on::after{inset:2px!important}
.mayatnik-menu-ready .gz-hx:not(.gz-pair,.pt-tri3,.may-hp):active,
.mayatnik-menu-ready .gz-half:active,
.mayatnik-menu-ready #paintTools .pt-l:active{background:var(--c,#7cbcff)!important}
.mayatnik-menu-ready .gz-hx:not(.gz-pair,.pt-tri3,.may-hp):active::before,
.mayatnik-menu-ready .gz-half:active::before,
.mayatnik-menu-ready #paintTools .pt-l:active::before{inset:3px!important;background:var(--gz-bg,#121a30)!important}
.may-hp .may-hp-h:active::after,#paintTools .pt-t3:active::after{inset:3px!important}
#paintTools .pt-ud:not(.dis):active{box-shadow:inset 0 0 0 3px var(--c)}
#paintTools #lg input[type=color]::-webkit-color-swatch-wrapper{padding:0}
#paintTools #lg input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
#paintTools #lg input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
/* v0.440: числа возле линий; только подписи принимают наведение, поле свободно для мыши. */
#mayLineMeasures{position:fixed;z-index:6;pointer-events:none;overflow:hidden}
#mayLineMeasures[hidden]{display:none}
#mayLineMeasures>svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
#mayLineMeasures>svg path{fill:none;stroke:#ffd35b;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
#mayLineMeasures>svg .may-measure-guides path{stroke-width:1;stroke-linecap:butt}
/* v0.441: управление кадром занимает прежнее место правки; правка — внизу на оси. */
.mayatnik-menu-ready #mayFooterBar{display:block;position:relative;grid-column:1/-1;grid-row:6;min-height:30px;border-top:1px solid var(--line);background:#000;z-index:9}
#mayFooterBar>.pt-gridbg{position:absolute;pointer-events:none;background:#ffffff0b}
header #paintTools.pt-grid>#mayBottomBar{position:absolute;top:0;width:calc(var(--may-frame-width,160px) + 116px);height:24px;min-height:24px;padding:0!important;border:0;background:transparent;overflow:visible}
header #paintTools.pt-grid{min-height:42px}
header #mayBottomBar>.gz-sl{flex:none;min-width:0;width:var(--may-frame-width,160px);max-width:none}
#mayBottomBar>.may-frame-value{position:absolute;transform:translateX(-50%);padding:0 2px;color:var(--gz-txt,#dfe6f5);background:#000;font:10px/12px var(--mono,monospace);white-space:nowrap;pointer-events:none;z-index:11}
header #mayBottomBar>.may-bb-half,header #mayBottomBar>.gz-sl{transform:none!important}
#mayFooterBar.may-bbdrop{box-shadow:inset 0 0 0 2px color-mix(in srgb,#7cbcff 70%,transparent)}
body.may-zen #mayFooterBar{display:none!important}
@media(max-width:600px){
  .mayatnik-menu-ready #mayFooterBar{grid-row:7}
  header>#mayBottomBar{position:relative!important;left:auto!important;top:auto!important;flex:1 0 100%;width:100%;height:44px;grid-column:auto;grid-row:auto;border:0;justify-content:center!important;align-items:flex-start!important}
}
.may-line-value{position:absolute;pointer-events:auto;cursor:help;white-space:nowrap;padding:1px 3px;background:#05070de6;border-radius:2px;color:var(--measure-color,#b48cff);font:11px/14px var(--mono,monospace);font-variant-numeric:tabular-nums;text-shadow:none}
.may-line-value:hover,.may-line-value:focus-visible,.may-line-value.may-measure-active{color:#ffd35b;outline:1px solid #ffd35b;outline-offset:0}


/* v0.445: palette — one standard 120×24 surface; each half owns its clipped outline. */
#paintTools #lg.gz-hx.gz-pair.gz-split{position:relative;isolation:isolate;display:flex;flex:0 0 120px;width:120px!important;min-width:120px;max-width:120px;height:24px!important;min-height:24px;max-height:24px;gap:0!important;margin:0;padding:0!important;border:0!important;border-radius:0;box-shadow:none!important;filter:none!important;outline:0;overflow:hidden;clip-path:polygon(12px 0,108px 0,120px 12px,108px 24px,12px 24px,0 12px);background:radial-gradient(ellipse at center,#080d16 0%,#0d1727 38%,#263b58 100%)!important}
#paintTools #lg::before,#paintTools #lg::after,#paintTools #lg>.palette-half::before,#paintTools #lg>.palette-half::after{display:none!important}
#paintTools #lg>.palette-half{--palette-stroke:1px;--palette-outline:color-mix(in srgb,var(--c,#7cbcff) 30%,#000);position:relative!important;isolation:isolate;display:flex;flex:0 0 64px!important;align-items:center;justify-content:center;width:64px!important;min-width:64px;max-width:64px;height:24px!important;margin:0!important;padding:0 6px!important;gap:6px;border:0!important;outline:0!important;box-shadow:none!important;filter:none!important;text-shadow:none!important;background:transparent!important;clip-path:polygon(12px 0,56px 0,64px 24px,12px 24px,0 12px)}
#paintTools #lg>.palette-half+.palette-half{margin-left:-8px!important;clip-path:polygon(0 0,52px 0,64px 12px,52px 24px,8px 24px)}
#paintTools #lg.palette-reverse>.palette-half:first-of-type{clip-path:polygon(12px 0,64px 0,56px 24px,12px 24px,0 12px)}
#paintTools #lg.palette-reverse>.palette-half+.palette-half{clip-path:polygon(8px 0,52px 0,64px 12px,52px 24px,0 24px)}
#paintTools #lg>.palette-half:where(:hover,:focus-visible,:has(input:focus-visible)){--palette-outline:var(--c,#7cbcff);--palette-stroke:1px}
#paintTools #lg>.palette-half[aria-pressed=true]{--palette-outline:var(--c,#7cbcff);--palette-stroke:2px}
#paintTools #lg>.palette-half:active{--palette-outline:var(--c,#7cbcff);--palette-stroke:3px}
#paintTools #lg .may-palette-shape{position:absolute!important;inset:0;width:64px;height:24px;z-index:0!important;pointer-events:none;overflow:visible}
#paintTools #lg .may-palette-shape polygon{fill:transparent;stroke:var(--palette-outline);stroke-width:calc(2 * var(--palette-stroke));stroke-linejoin:miter}
#paintTools #lg input[type=color]{position:relative;z-index:1;flex:0 0 14px;outline:none!important;box-shadow:none!important}

#paintTools #lg>.palette-half:is(:hover,:focus-visible,:active,.gz-on,[aria-pressed=true]){background:transparent!important}

/* v0.446: keep the outer list edge; the inner chevron is shorter and inset. */
.mayatnik-menu-ready .gz-hx.gz-lst{padding-right:24px!important}
.mayatnik-menu-ready .gz-hx.gz-lst>.may-list-inner-arrow{position:absolute!important;right:8px;top:4px;width:8px;height:16px;z-index:3;pointer-events:none;color:color-mix(in srgb,var(--c,#7cbcff) 55%,#fff);filter:none!important}
.mayatnik-menu-ready .may-list-inner-arrow>path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}