/* Зеркалиус: построение хаба с тремя независимыми зеркалами. */ #w-zerkalius .wbody{position:relative;padding:0;overflow:hidden;background:#050806} #zerkStage{position:absolute;inset:0;overflow:hidden;touch-action:none} #zerkCanvas{display:block;width:100%;height:100%;background:#050806} #zerkMirrors{position:absolute;inset:0;overflow:hidden;pointer-events:none} .zerk-mirror{position:absolute;height:32px;transform-origin:50% 50%;pointer-events:none} .zerk-mirror::before{content:"";position:absolute;left:0;right:0;top:15px;border-top:1px dashed var(--mirror-color);opacity:.85} .zerk-mirror.off::before{opacity:.25} .zerk-mirror.snapped::before{border-top:2px solid #fff;opacity:1} .zerk-mirror.snapped button{background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 62%,#050806);color:#fff} .zerk-mirror button{position:absolute;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;border:1px solid var(--control-color,var(--mirror-color));border-radius:0;background:#08110e;color:var(--control-color,var(--mirror-color));font:700 13px/1 var(--ff,monospace);pointer-events:auto;touch-action:none;cursor:grab;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .zerk-mirror .zerk-center{left:calc(50% - 16px)} .zerk-mirror .zerk-turn{width:28px;height:28px;top:2px;cursor:grab;clip-path:none} .zerk-mirror button:focus-visible{outline:2px solid #fff;outline-offset:-6px;background:#26372f} #zerkTools{position:absolute;left:8px;top:8px;z-index:10;width:240px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);overflow:auto;scrollbar-width:thin;background:color-mix(in srgb,var(--panel) 95%,transparent);color:var(--txt);font:11px/1.3 var(--ff,monospace)} #zerkTools .smh{display:flex;align-items:center;justify-content:space-between;gap:4px;height:24px;cursor:grab;color:#70e0d7} #zerkTools .zerk-controls{display:flex;flex-direction:column;gap:6px;padding:4px 2px 10px} #zerkTools label{display:flex;align-items:center;gap:4px;min-height:24px} #zerkTools button,#zerkTools select{min-height:26px;border-radius:0;padding:3px 6px;font:inherit;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,5px 100%,0 50%)} #zerkTools select{flex:1;min-width:0} #zerkTools input[type=color]{width:28px;height:28px;padding:1px;border-radius:0;background:none;cursor:pointer} #zerkTools input[type=number]{width:44px;min-height:24px;border-radius:0;padding:2px 3px} #zerkTools input[type=range]{width:90px;min-width:30px;flex:1;margin:0} #zerkTools .zerk-range{display:flex;gap:2px;align-items:center;flex:1;min-width:0} #zerkTools .zerk-range button{width:24px;min-width:24px;padding:0} #zerkTools .zerk-angle{width:39px;text-align:right;font-variant-numeric:tabular-nums} #zerkTools .zerk-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap} #zerkTools .zerk-mirror-controls{border-top:1px solid var(--control-color,var(--mirror-color));padding-top:4px} #zerkTools .zerk-mirror-controls .zerk-auto{margin-left:auto;color:var(--control-color,var(--mirror-color))} #zerkTools .zerk-label{color:var(--control-color,var(--mirror-color));font-weight:700} #zerkOwn{display:flex;flex-direction:column;gap:4px} #zerkOwn[hidden]{display:none} #zerkText{width:100%;box-sizing:border-box;height:76px;resize:vertical;background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:0;padding:4px;font:11px/1.2 var(--ff,monospace)} #zerkStatus{position:absolute;right:8px;bottom:6px;max-width:calc(100% - 16px);padding:3px 6px;background:#08110edd;color:#9fffc8;font:11px/1.3 var(--ff,monospace);pointer-events:none} :is(#zerkStage,#zerkHeaderDock) .zerk-grape{position:absolute;z-index:12;width:80px;padding:0!important;min-height:0!important;max-height:none;background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;overflow:visible;color:var(--control-color,var(--mirror-color));font:11px/1.1 var(--ff,monospace)} :is(#zerkStage,#zerkHeaderDock) .zerk-grape::before,:is(#zerkStage,#zerkHeaderDock) .zerk-grape::after{display:none!important} :is(#zerkStage,#zerkHeaderDock) .zerk-grape.pmin{height:32px!important;max-height:32px!important} :is(#zerkStage,#zerkHeaderDock) .zerk-grape.pmin .smh{height:32px!important} :is(#zerkStage,#zerkHeaderDock) .zerk-grape.pdrag,#zerkTools.pdrag{position:absolute!important} :is(#zerkStage,#zerkHeaderDock) .zerk-grape .smh{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:80px;height:32px;margin:0;padding:0 14px 0 4px;cursor:grab;white-space:nowrap;font:600 9px/1 var(--ff,monospace);background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 12%,transparent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} :is(#zerkStage,#zerkHeaderDock) .zerk-grape .pminbtn{position:absolute;right:6px;top:8px;width:14px!important;height:16px!important;min-width:0;min-height:0;padding:0;border:0;background:none;font:12px/1 var(--ff,monospace);color:inherit;clip-path:none} :is(#zerkStage,#zerkHeaderDock) .zerk-grape-body{position:relative;width:72px;margin:4px 0 0 4px;padding:0;height:var(--grape-height)} :is(#zerkStage,#zerkHeaderDock) .zerk-view-group{width:104px} :is(#zerkStage,#zerkHeaderDock) .zerk-view-group .zerk-grape-body{width:96px} :is(#zerkStage,#zerkHeaderDock) .zerk-diamond{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;max-width:48px;margin:0!important;padding:0 4px!important;border:0!important;border-radius:0!important;background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 12%,transparent)!important;color:var(--control-color,var(--mirror-color))!important;font:600 11px/1.1 var(--ff,monospace)!important;white-space:pre-line;text-align:center;cursor:pointer;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)!important} :is(#zerkStage,#zerkHeaderDock) .zerk-diamond::before,:is(#zerkStage,#zerkHeaderDock) .zerk-grape .smh::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--control-color,var(--mirror-color));opacity:.7;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 .7 47.3 24 24 47.3 .7 24Z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat} :is(#zerkStage,#zerkHeaderDock) .zerk-diamond:hover,:is(#zerkStage,#zerkHeaderDock) .zerk-diamond:focus-visible,:is(#zerkStage,#zerkHeaderDock) .zerk-diamond:focus-within{background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 26%,transparent)!important} /* A saved choice stays brighter than hover; borders and marks never change the hit box. */ /* v0.1163, «пусть включённая только обводку светит, а фон, текст — нет»: фон и текст как у выключенной, светится одна обводка */ :is(#zerkStage,#zerkHeaderDock) .zerk-diamond:is(.on,.is-selected,:has(input:checked))::before{background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 80%,#fff);opacity:1;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 1.5 46.5 24 24 46.5 1.5 24Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat} :is(#zerkStage,#zerkHeaderDock) .zerk-diamond:is(.on,.is-selected,:has(input:checked))::after{content:"✓";position:absolute;top:5px;left:20px;width:8px;font:800 8px/1 var(--ff,monospace);color:var(--control-color,var(--mirror-color));pointer-events:none} :is(#zerkStage,#zerkHeaderDock) .zerk-diamond:active{background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 80%,transparent)!important} .zerk-annotations{position:absolute;inset:0;pointer-events:none;overflow:hidden} .zerk-annotation{position:absolute;transform:translateX(-50%);padding:3px 6px;border-bottom:1px solid currentColor;background:#050806d9;font:700 12px/1.2 var(--ff,monospace);white-space:nowrap;pointer-events:none} .zerk-annotations[hidden],.zerk-annotation[hidden]{display:none} .zerk-annotation.off{opacity:.45} :is(#zerkStage,#zerkHeaderDock) .zerk-diamond input[type=checkbox],:is(#zerkStage,#zerkHeaderDock) .zerk-diamond input[type=color]{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0;padding:0;border:0;opacity:0;cursor:pointer} :is(#zerkStage,#zerkHeaderDock) .zerk-diamond input[type=color]+span{pointer-events:none} #zerkTools .zerk-editor[hidden]{display:none!important} #zerkTools .zerk-editor{display:flex;flex-direction:column;gap:6px} #zerkTools{z-index:30;background:color-mix(in srgb,var(--panel) 88%,transparent)} #zerkZoom{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;align-items:center;gap:3px;color:#ddd;font:10px/1 var(--ff,monospace)} #zerkZoom button{position:relative;display:flex;align-items:center;justify-content:center;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:0!important;border:0!important;border-radius:0!important;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);font:700 22px/1 var(--ff,monospace)!important;color:#edf3ff!important;cursor:pointer;background:color-mix(in srgb,var(--zoom-color) 22%,transparent)!important} #zerkZoom .zerk-zoom-minus{--zoom-color:#d99a4a}#zerkZoom .zerk-zoom-plus{--zoom-color:#6da4e7} #zerkZoom button:hover,#zerkZoom button:focus-visible{background:color-mix(in srgb,var(--zoom-color) 42%,transparent)!important}#zerkZoom button:disabled{opacity:.3} #zerkZoom output{cursor:pointer;font-variant-numeric:tabular-nums} @media(max-width:760px){#w-zerkalius .wbody{height:70svh!important;min-height:420px}#zerkTools{width:220px;font-size:12px}#zerkTools button,#zerkTools select,#zerkTools label{min-height:32px}.zerk-mirror button{width:40px;height:40px;top:-4px}.zerk-mirror .zerk-center{left:calc(50% - 20px)}.zerk-mirror .zerk-turn{width:36px;height:36px;top:-2px}} /* Speed lives in the longer group header; values change inside the diamond. */ :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group{width:128px} :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .smh{width:128px;align-items:flex-start;padding-top:3px} :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .pminbtn{right:12px} :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .smh::before{mask-size:100% 100%} .zerk-header-speed{position:absolute;left:30px;right:30px;bottom:2px;height:10px;display:flex;align-items:center} :is(#zerkStage,#zerkHeaderDock) .zerk-header-speed input[type=range]{appearance:none;width:100%;min-width:0;height:10px;min-height:0;margin:0;padding:0;background:none;accent-color:var(--control-color,var(--mirror-color));cursor:ew-resize;clip-path:none;border:0;touch-action:pan-y} :is(#zerkStage,#zerkHeaderDock) .zerk-header-speed input::-webkit-slider-runnable-track{height:2px;background:var(--control-color,var(--mirror-color));opacity:.75} :is(#zerkStage,#zerkHeaderDock) .zerk-header-speed input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-4px;background:var(--control-color,var(--mirror-color));border:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} :is(#zerkStage,#zerkHeaderDock) .zerk-header-speed input::-moz-range-track{height:2px;background:var(--control-color,var(--mirror-color))} :is(#zerkStage,#zerkHeaderDock) .zerk-header-speed input::-moz-range-thumb{width:10px;height:10px;background:var(--control-color,var(--mirror-color));border:0;border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} :is(#zerkStage,#zerkHeaderDock) .zerk-split{padding:0!important;cursor:default} .zerk-split-value{pointer-events:none;white-space:pre-line;font-variant-numeric:tabular-nums} :is(#zerkStage,#zerkHeaderDock) .zerk-half{position:absolute;top:0;width:50%!important;height:100%!important;min-height:0!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;clip-path:none!important;color:var(--control-color,var(--mirror-color))!important;font:700 14px/1 monospace!important;opacity:0;cursor:pointer} :is(#zerkStage,#zerkHeaderDock) .zerk-half-minus{left:0;border-right:1px solid var(--control-color,var(--mirror-color))!important;text-align:left;padding-left:5px!important} :is(#zerkStage,#zerkHeaderDock) .zerk-half-plus{right:0;text-align:right;padding-right:5px!important} :is(#zerkStage,#zerkHeaderDock) .zerk-split:hover .zerk-half,:is(#zerkStage,#zerkHeaderDock) .zerk-split:focus-within .zerk-half{opacity:1} :is(#zerkStage,#zerkHeaderDock) .zerk-half:hover,:is(#zerkStage,#zerkHeaderDock) .zerk-half:focus-visible{background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 22%,transparent)!important} /* Ромб со стрелками при наведении раздвигается вдвое — по ◂ ▸ легче попасть */ @media(hover:hover){:is(#zerkStage,#zerkHeaderDock) .zerk-split.zerk-diamond:is(:hover,:has(:focus-visible)){width:96px!important;min-width:96px!important;max-width:96px;margin-left:-24px!important;z-index:14;background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 26%,var(--bg,#0b0d12))!important} :is(#zerkStage,#zerkHeaderDock) .zerk-split.zerk-diamond:is(.on,.is-selected):is(:hover,:has(:focus-visible)){background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 62%,var(--bg,#0b0d12))!important} :is(#zerkStage,#zerkHeaderDock) .zerk-split.zerk-diamond:is(:hover,:has(:focus-visible)) .zerk-half-minus{padding-left:20px!important} :is(#zerkStage,#zerkHeaderDock) .zerk-split.zerk-diamond:is(:hover,:has(:focus-visible)) .zerk-half-plus{padding-right:20px!important} /* Раздвинутый ромб: без внутренней рамки и черты между половинками — они накладывались на подпись */ :is(#zerkStage,#zerkHeaderDock) .zerk-split.zerk-diamond:is(:hover,:has(:focus-visible))::before{display:none} :is(#zerkStage,#zerkHeaderDock) .zerk-split.zerk-diamond:is(:hover,:has(:focus-visible)) .zerk-half-minus{border-right:0!important}} /* v0.1174: наклон бита — ◂◂ ◂ [узкий ромб: значение, щелчок — в 0] ▸ ▸▸; ◂◂ ▸▸ — по 5% шкалы */ :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide :is(.zerk-half-minus2,.zerk-half-plus2,.zerk-split-zero){display:none} @media(hover:hover){:is(#zerkStage,#zerkHeaderDock) .zerk-split.zerk-split-wide.zerk-diamond:is(:hover,:has(:focus-visible)){width:144px!important;min-width:144px!important;max-width:144px;margin-left:-48px!important} :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide:is(:hover,:has(:focus-visible)) .zerk-split-value{visibility:hidden} :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide:is(:hover,:has(:focus-visible)) :is(.zerk-half-minus2,.zerk-half-plus2,.zerk-split-zero){display:block} :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide .zerk-half-minus2{left:0;width:22%!important;text-align:right;padding:0 1px 0 0!important;font-size:12px!important;letter-spacing:-3px} :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide .zerk-half-plus2{right:0;width:22%!important;text-align:left;padding:0 0 0 1px!important;font-size:12px!important;letter-spacing:-3px} :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide .zerk-half-minus{left:22%;width:19.67%!important;padding:0!important;text-align:center} :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide .zerk-half-plus{right:22%;left:auto;width:19.67%!important;padding:0!important;text-align:center} :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide .zerk-split-zero{left:41.67%;width:16.67%!important;opacity:1;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)!important;background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 45%,var(--bg,#0b0d12))!important;color:var(--fg,#fff)!important;font:700 9px/1.1 monospace!important;white-space:pre-line;text-align:center} :is(#zerkStage,#zerkHeaderDock) .zerk-split-wide .zerk-split-zero:hover{background:var(--control-color,var(--mirror-color))!important;color:var(--bg,#0b0d12)!important}} #zerkTools fieldset{margin:0;padding:5px;border:1px solid var(--line);min-width:0} #zerkTools legend{color:#70e0d7;padding:0 3px} #zerkTools .zerk-help{font:10px/1.4 var(--ff,monospace);color:var(--dim);margin:2px 0} #zerkTools input[type=text]{width:120px;min-width:0;font:11px/1.2 monospace;padding:4px} #zerkTools input[type=number]{width:64px} #zerkTools label{justify-content:space-between} #zerkTools textarea{width:100%;height:70px;resize:vertical;box-sizing:border-box;background:var(--bg);color:var(--txt);border:1px solid var(--line);font:11px/1.2 monospace;padding:4px} #zerkTools .zerk-own-set{display:flex;flex-wrap:wrap;gap:4px} #zerkTools [hidden]{display:none!important} .zerk-path-preview{width:100%;height:100px;background:#050806;border:1px solid var(--line)} /* Transparent gaps must not intercept controls in a neighbouring saved group. */ :is(#zerkStage,#zerkHeaderDock) .zerk-grape,:is(#zerkStage,#zerkHeaderDock) .zerk-grape-body{pointer-events:none} :is(#zerkStage,#zerkHeaderDock) .zerk-grape .smh,:is(#zerkStage,#zerkHeaderDock) .zerk-grape .zerk-diamond{pointer-events:auto} @media(hover:none){:is(#zerkStage,#zerkHeaderDock) .zerk-half{opacity:1}:is(#zerkStage,#zerkHeaderDock) .zerk-header-speed input[type=range]{height:22px}:is(#zerkStage,#zerkHeaderDock) .zerk-header-speed input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-5px}} /* Project fonts, also available offline. */ @font-face { font-family:"JetBrains Mono"; src:url("../_fonts/JetBrainsMono[wght].ttf"); font-weight:100 900 } @font-face { font-family:"Fira Code"; src:url("../_fonts/FiraCode[wght].ttf"); font-weight:100 900 } @font-face { font-family:"Source Code Pro"; src:url("../_fonts/SourceCodePro[wght].ttf"); font-weight:100 900 } @font-face { font-family:"Orbitron"; src:url("../_fonts/Orbitron[wght].ttf"); font-weight:100 900 } @font-face { font-family:"IBM Plex Mono"; src:url("../_fonts/IBMPlexMono-Regular.ttf"); font-weight:400 } @font-face { font-family:"IBM Plex Mono"; src:url("../_fonts/IBMPlexMono-Bold.ttf"); font-weight:700 } @font-face { font-family:"Space Mono"; src:url("../_fonts/SpaceMono-Regular.ttf"); font-weight:400 } @font-face { font-family:"Space Mono"; src:url("../_fonts/SpaceMono-Bold.ttf"); font-weight:700 } @font-face { font-family:"VT323"; src:url("../_fonts/VT323-Regular.ttf") } @font-face { font-family:"Share Tech Mono"; src:url("../_fonts/ShareTechMono-Regular.ttf") } @font-face { font-family:"Press Start 2P"; src:url("../_fonts/PressStart2P-Regular.ttf") } @font-face { font-family:"Major Mono Display"; src:url("../_fonts/MajorMonoDisplay-Regular.ttf") } #zerkTools .zerk-net-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px} #zerkTools .zerk-net-presets button{padding:2px;min-width:0;border:1px solid var(--line);background:transparent;clip-path:none} #zerkTools .zerk-net-presets button.on{border:2px solid #ffd166;background:#ffd16618} #zerkTools .zerk-net-presets canvas{display:block;width:56px;height:48px;max-width:100%;margin:auto} #zerkTools .zerk-net-editor{display:flex;flex-direction:column;gap:6px} #zerkTools .zerk-editor>div:not(.zerk-net-editor){display:flex;flex-direction:column;gap:6px} /* The mirror canvas has its own Zen target; saved window/group positions stay untouched. */ body.zen.zerk-zen #w-cone{display:none!important} body.zen.zerk-zen #w-zerkalius#w-zerkalius{display:block!important;position:fixed!important;inset:0!important;left:0!important;top:0!important;width:auto!important;height:auto!important;margin:0!important;z-index:1000!important;border:0!important;box-shadow:none!important} body.zen.zerk-zen #w-zerkalius>.whead,body.zen.zerk-zen #w-zerkalius>.whint{display:none!important} body.zen.zerk-zen #w-zerkalius>.wbody{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important} body.zen.zerk-zen :is(#zerkStage,#zerkHeaderDock) .zerk-grape,body.zen.zerk-zen #zerkTools,body.zen.zerk-zen #zerkStatus{display:none!important} body.zen.zerk-zen #w-zerkalius #coneRecBar>button{z-index:4!important} #zerkZenExit{display:none} body.zen.zerk-zen #zerkZenExit{display:flex;position:absolute;right:8px;top:8px;width:40px;height:40px;justify-content:center;align-items:center;z-index:15;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:0;background:#c9a8ff22;color:#fff;font:18px monospace} /* Grab the empty stage or an axis without intercepting control diamonds. */ #zerkStage{cursor:grab} #zerkStage.panning{cursor:grabbing} .zerk-axis{position:absolute;height:32px;transform-origin:50% 50%;z-index:0;pointer-events:auto;touch-action:none;cursor:grab} .zerk-axis:focus,.zerk-axis:focus-visible{outline:none;background:none} /* «две прямые вдоль оси — не уходит при щелчке, убери»: рамки фокуса у полосы-ручки оси нет */ .zerk-mirror[hidden],.zerk-axis[hidden]{display:none!important} .zerk-mirror{z-index:1} .zerk-mirror.grabbing::before{border-top:2px solid var(--control-color,var(--mirror-color));opacity:1} .zerk-mirror .zerk-center:focus,.zerk-mirror .zerk-turn:focus{outline:2px solid #fff;outline-offset:-6px;background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 62%,#050806);color:#fff} @media(max-width:760px){.zerk-axis{height:40px}} .zerk-mirror button{z-index:1} /* Groups may live on the upper window line without replacing their saved canvas positions. */ #w-zerkalius>.whead{position:relative;overflow:visible;z-index:25} #w-zerkalius>.whead .wt{flex:0 1 90px;min-width:32px} #zerkHeaderDock{position:relative;flex:1 1 auto;min-width:0;height:32px;overflow:visible;pointer-events:none} #zerkHeaderDock:empty{display:block} #zerkHeaderDock .zerk-grape.zerk-docked{position:absolute!important;height:32px!important;max-height:32px!important;margin:0;pointer-events:auto} #zerkHeaderDock .zerk-docked .zerk-grape-body{position:absolute;top:32px;left:0;margin-top:0} #zerkFooterDock{position:absolute;left:0;right:0;bottom:0;height:32px;z-index:25;overflow:visible;pointer-events:none} #zerkFooterDock .zerk-grape.zerk-docked{position:absolute!important;height:32px!important;max-height:32px!important;margin:0;pointer-events:auto} #zerkFooterDock .zerk-docked .zerk-grape-body{position:absolute;top:auto;bottom:32px;left:0;margin-top:0} #zerkFooterDock.zerk-dock-target{box-shadow:inset 0 -2px #70e0d7;background:#203334} /* v0.1161: общий пуск — как пульт темпа Синхрофазотрона: шестигранник 480 × 36, ◀ ▶ на концах, треугольники к ромбу пуска */ #zerkMotion{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:28;width:min(480px,calc(100% - 24px))} /* v0.1171: вид пульта — общий _js/zz-pult.css; здесь только место на холсте */ #w-zerkalius>.whead.zerk-dock-target{box-shadow:inset 0 -2px #70e0d7;background:#203334} :is(#zerkStage,#zerkHeaderDock) .zerk-header-number{font-size:17px;font-weight:900;line-height:16px;text-shadow:0 0 3px currentColor} :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .smh>span:first-child{font-size:10px;line-height:16px} #zerkHeaderDock .zerk-grape:hover,#zerkHeaderDock .zerk-grape:focus-within{z-index:13} #w-zerkalius.collapsed #zerkHeaderDock .zerk-grape-body{display:none!important} @media(max-width:760px){ #w-zerkalius>.whead{flex-wrap:wrap} #zerkHeaderDock{order:10;flex-basis:100%;width:100%} #zerkHeaderDock .zerk-grape.zerk-docked{flex-basis:104px;width:104px} #zerkHeaderDock .zerk-grape .smh{width:104px} } /* The central number toggles the axis; its controls open only while it is enabled. */ :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .zerk-header-number{position:absolute;left:50%;top:0;transform:translateX(-50%);width:28px;height:22px;padding:0;border:0;background:transparent;color:var(--control-color,var(--mirror-color));font:900 22px/22px var(--ff,monospace);cursor:pointer;clip-path:none;text-shadow:0 0 3px currentColor} :is(#zerkStage,#zerkHeaderDock) .zerk-header-number[aria-pressed=false]{opacity:.5;text-shadow:none} :is(#zerkStage,#zerkHeaderDock) .zerk-header-number:focus-visible{outline:1px solid currentColor} :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .smh>span:first-child{position:absolute;left:18px;top:5px;font-size:7px;line-height:10px} @media(max-width:760px){:is(#zerkStage,#zerkHeaderDock) .zerk-speed-group,:is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .smh{width:104px}} .zerk-mirror .zerk-turn.pinned{background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 40%,#08110e);box-shadow:0 0 5px var(--control-color,var(--mirror-color))} .zerk-axis.pinned{cursor:grab} /* v0.1132: a button drags its whole grape; clicking still activates it. */ #w-zerkalius .zerk-diamond{cursor:grab;touch-action:none;user-select:none} #w-zerkalius .zerk-grape.pdrag,#w-zerkalius .zerk-grape.pdrag .zerk-diamond{cursor:grabbing!important} #w-zerkalius .zerk-grape.pdrag{z-index:30} /* v0.1141, «сделай заголовки обычными ромбами как и в прошлом файле, а бегунки не сворачивай и к 2 ромбам по их диагоналям располагай» (выбор: бегунок по диагонали): шапка группы — ромб 48 × 48, как кнопки; гроздь продолжает её по диагонали — первый ромб у правой нижней грани шапки. Бегунок скорости зеркала вынесен из шапки: лежит вдоль верхне-правых граней шапки и первого ромба (одна прямая под 45°) и при сворачивании группы остаётся. В нижней полосе — отражено: гроздь над шапкой, бегунок вдоль нижне-правых граней. Свернуть / раскрыть — щелчок по шапке (у зеркал — по номеру: включить ось), «−» убран. */ :is(#zerkStage,#zerkHeaderDock) .zerk-grape,:is(#zerkStage,#zerkHeaderDock) .zerk-speed-group,:is(#zerkStage,#zerkHeaderDock) .zerk-view-group{width:96px} :is(#zerkStage,#zerkHeaderDock) .zerk-grape .smh{width:48px!important;height:48px!important;padding:0 7px!important;align-items:center!important;white-space:normal;text-align:center;line-height:1.05;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} :is(#zerkStage,#zerkHeaderDock) .zerk-grape .smh::before{mask-size:100% 100%} :is(#zerkStage,#zerkHeaderDock) .zerk-grape .pminbtn{display:none!important} :is(#zerkStage,#zerkHeaderDock) .zerk-grape.pmin,:is(#zerkStage,#zerkHeaderDock) .zerk-grape.pmin .smh{height:48px!important;max-height:48px!important} :is(#zerkStage,#zerkHeaderDock) .zerk-grape-body{margin:-24px 0 0 24px} :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .smh>span:first-child{display:none} :is(#zerkStage,#zerkHeaderDock) .zerk-speed-group .zerk-header-number{top:50%;transform:translate(-50%,-50%)} :is(#zerkStage,#zerkHeaderDock) .zerk-header-speed{left:18px;right:auto;top:14px;bottom:auto;width:68px;height:12px;transform:rotate(45deg);transform-origin:50% 50%;z-index:2;pointer-events:auto} :is(#zerkStage,#zerkHeaderDock) .zerk-grape.pmin>.zerk-header-speed{display:flex!important} #zerkHeaderDock .zerk-grape.zerk-docked,#zerkFooterDock .zerk-grape.zerk-docked{height:48px!important;max-height:48px!important} #zerkHeaderDock .zerk-docked .zerk-grape-body{top:24px;left:24px;margin:0} #zerkFooterDock .zerk-grape.zerk-docked{top:auto!important;bottom:0} #zerkFooterDock .zerk-docked .zerk-grape-body{bottom:24px;left:24px;margin:0} #zerkFooterDock .zerk-docked .zerk-header-speed{top:22px;transform:rotate(-45deg)} @media(max-width:760px){:is(#zerkStage,#zerkHeaderDock) .zerk-speed-group,#zerkHeaderDock .zerk-grape.zerk-docked{width:96px;flex-basis:96px}} /* v0.1147: one centre diamond and a smaller rotation handle, as in the original mirror. */ #zerkMirrors .zerk-mirror .zerk-center{display:flex;visibility:visible;pointer-events:auto} #zerkMirrors .zerk-mirror .zerk-turn{width:24px;height:24px;top:4px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);font-size:16px} @media(max-width:760px){#zerkMirrors .zerk-mirror .zerk-turn{width:36px;height:36px;top:-2px}} /* v0.1157, «у первой кнопки групп, когда раскрыта группа, сделай на заднем плане расширенный ромб»: ромб 96 × 48 за ромбом-заголовком, щелчок по краям — свернуть */ :is(#zerkStage,#zerkHeaderDock) .zerk-grape > .zerk-head-wide{position:absolute;display:block!important;left:-24px;top:0;width:96px;height:48px;z-index:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 30%,var(--bg,#0b0d12));pointer-events:auto;cursor:pointer} :is(#zerkStage,#zerkHeaderDock) .zerk-grape > .zerk-head-wide:hover{background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 50%,var(--bg,#0b0d12))} :is(#zerkStage,#zerkHeaderDock) .zerk-grape > .smh{z-index:1;background:color-mix(in srgb,var(--control-color,var(--mirror-color)) 12%,var(--bg,#0b0d12))} /* v0.1159: и у свёрнутой; заголовок непрозрачный — широкий ромб сквозь него не виден */ :is(#zerkStage,#zerkHeaderDock,#zerkMotion,#w-zerkalius) :is(.zerk-grape,.zerk-grape *,button,.zerk-diamond),#zerkMotion,#zerkMotion *{-webkit-user-select:none;user-select:none} /* v0.1164: текст в кнопках не выделяется */ :is(#zerkStage,#zerkHeaderDock) .zerk-grape > .zerk-source-fan{position:absolute;left:24px;top:24px;width:0;height:0;z-index:3;pointer-events:none} /* v0.1168: ромбы-варианты узора справа от грозди */ :is(#zerkStage,#zerkHeaderDock) .zerk-grape > .zerk-source-fan[hidden]{display:none!important} :is(#zerkStage,#zerkHeaderDock) .zerk-grape:is(.zsnap,:focus,:focus-visible){outline:none!important;box-shadow:none!important} /* v0.1171, «синий прямоугольник не показывай»: прямоугольной подсветки прилипания у гроздей нет, они липнут ромб в ромб */ .zerk-mirror button{opacity:.18;transition:opacity .15s} /* v0.1172: ромбы оси за битами — бледные */ .zerk-mirror:is(.hot,.grabbing,:focus-within) button,.zerk-mirror.hot::before{opacity:1} .zerk-mirror .zerk-deg{position:absolute;top:8px;font:600 11px/16px system-ui,sans-serif;color:var(--control-color,var(--mirror-color));text-shadow:0 0 3px #000,0 0 3px #000;white-space:nowrap;pointer-events:none;opacity:.6;transition:opacity .15s} /* v0.1183: угол оси рядом с ↻ */ .zerk-mirror:is(.hot,.grabbing,:focus-within) .zerk-deg{opacity:1} #zerkMotion .zerk-jump{position:absolute;left:calc(100% + 8px);top:0;width:48px;height:48px;padding:0;border:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#2a3447;color:#e7eef8;font:700 12px/1 system-ui,sans-serif;cursor:pointer} /* v0.1183: ромб «скачки» справа от пульта */ #zerkMotion .zerk-jump:hover{background:#4d6d90} #zerkMotion .zerk-jump.on{background:#9cc3ec;color:#10202f} /* «когда включены подсказки — расширять каждый ромб, чтобы поместился короткий текст» (menu-icons v10, html.mi-wide): шестиугольник 120 × 48 */ html.mi-wide :is(#zerkStage,#zerkHeaderDock) .zerk-diamond{width:120px!important;min-width:120px!important;max-width:120px!important;margin-left:0!important;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,24px 100%,0 50%)!important} html.mi-wide :is(#zerkStage,#zerkHeaderDock) .zerk-diamond::before{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48' preserveAspectRatio='none'%3E%3Cpath d='M24 .7H96L119.3 24 96 47.3H24L.7 24Z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat} html.mi-wide :is(#zerkStage,#zerkHeaderDock) .zerk-diamond:is(.on,.is-selected,:has(input:checked))::before{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48' preserveAspectRatio='none'%3E%3Cpath d='M24 1.5H96L118.5 24 96 46.5H24L1.5 24Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat}