.cg-pics{min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.cg-view{min-width:0;min-height:0;position:relative;overflow:hidden}.cg-view>canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.cg-cp{pointer-events:none}.cg-gl{transition:opacity .3s var(--ease-out)}.cg-pics.copying .cg-gl{opacity:.3}.cg-pics.copying[data-tone=light] .cg-gl{opacity:.6}.cg-ov{touch-action:none;cursor:grab}.cg-ov.grabbing{cursor:grabbing}.cg-ov.over-point{cursor:move}.cg-ov.dragging{cursor:grabbing}.cg-pics[data-tone=dark]{background:var(--bg)}.cg-handles{pointer-events:none;position:absolute;inset:0}.cg-source{z-index:2;right:calc(14 * var(--g));top:calc(12 * var(--g));pointer-events:none;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.08em;color:var(--text-3);text-shadow:0 0 6px var(--plot-bg), 0 1px 2px var(--plot-bg);position:absolute}.cg-pics:has(.cg-hint.on) .cg-source,.cg-pics.hl-open .cg-source,.cg-pics.copying .cg-source{visibility:hidden}.cg-copyhud{z-index:3;right:calc(12 * var(--g));top:calc(10 * var(--g));align-items:center;gap:calc(8 * var(--g));padding:calc(3 * var(--g)) calc(4 * var(--g));border:1px solid var(--line);background:var(--plot-bg);backdrop-filter:blur(10px);border-radius:2px;display:none;position:absolute}.cg-pics.copying .cg-copyhud{display:flex}.cg-csteps{align-items:center;gap:calc(4 * var(--g));display:flex}.cg-ctag{text-align:center;min-width:5.5ch;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text)}.cg-copyhud .hbtn{justify-content:center;min-width:28px;min-height:28px}.cg .cg-vb{right:calc(12 * var(--g));bottom:calc(12 * var(--g));z-index:2;position:absolute}.cg-result{z-index:3;left:calc(18 * var(--g));bottom:calc(16 * var(--g));width:min(calc(560 * var(--u)), calc(100% - 120 * var(--g)));pointer-events:none;position:absolute}.cg-line{margin:0}.cg-sub{color:var(--text-2);font-size:var(--fs-xs)}.cg-hud{z-index:4;pointer-events:none;position:absolute;inset:0}.cg .hl-nav{left:calc(12 * var(--g));top:calc(12 * var(--g));z-index:3;max-width:calc(100% - 24 * var(--g));pointer-events:auto;position:absolute}.cg .hl-nav.idle{display:none}.cg-hint,.cg-toast{left:50%;top:calc(16 * var(--g));z-index:4;width:max-content;max-width:calc(100% - 150px);padding:calc(7 * var(--g)) calc(14 * var(--g));text-align:center;border:1px solid var(--line);background:var(--plot-bg);backdrop-filter:blur(10px);color:var(--text);font-size:var(--fs-s);pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out);border-radius:2px;line-height:1.45;position:absolute;transform:translate(-50%)}.cg-hint.on,.cg-toast.on{opacity:1;transition-duration:var(--dur-state)}.cg-hint.long{top:calc(56 * var(--g));width:min(calc(600 * var(--g)), calc(100% - 32px));text-align:left;max-width:none;line-height:1.5}.cg-panel{color:var(--text);display:grid}.cg-sec{min-width:0;display:grid}.cg-row{align-items:flex-start;gap:calc(10 * var(--g)) calc(18 * var(--g));flex-wrap:wrap;display:flex}.cg-copyrow{align-items:center}.cg-copykeys{margin-top:calc(8 * var(--g));align-items:center}.cg-sec-copy>.cg-note{margin-top:calc(6 * var(--g))}.cg-lab{color:var(--text-3);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;display:block}.cg-wheel{gap:calc(4 * var(--g));justify-items:start;display:grid}.cg-poly,.cg-preset{gap:calc(10 * var(--g));margin-top:calc(8 * var(--g));display:grid}.cg-poly[hidden],.cg-preset[hidden],.cg-n[hidden],.cg-x[hidden]{display:none}.cg-r{gap:calc(4 * var(--g));justify-items:start;display:grid}.cg-rhead{align-items:baseline;gap:.5em;display:flex}.cg-sym{font-family:var(--font-mono);font-size:var(--fs-s);color:var(--text-2)}.cg-x{gap:calc(4 * var(--g));display:grid}.cg-note{color:var(--text-3);font-size:var(--fs-xs);margin:0;line-height:1.45}.cg-go{align-content:start;justify-items:center;gap:calc(6 * var(--g));text-align:center;grid-template-rows:auto auto;display:grid}.cg-go>.cg-note{max-width:calc(300 * var(--u))}.cg-look{position:relative}.cg-look .sdr-tray{left:0;right:0;bottom:calc(100% + 4 * var(--g));z-index:5;position:absolute}.cg .dkeys .dk-name:empty{display:none}.cg-rulekeys .dk-row{grid-template-columns:repeat(var(--cg-dish-cols,5), minmax(0, 1fr))}.cg .hbtn,.cg .hl-step{min-height:24px}@media (width>=761px) and (height<=800px){.cg-go>.cg-note{display:none}}@media (width<=760px){.cg-pics{border-block:1px solid var(--line);background:var(--bg)}.cg-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"go""rule""colour""copy""bar"}.cg-go{grid-area:go}.cg-go .cg-note{display:none}.cg-sec-copy{grid-area:copy}.cg-sec-rule{grid-area:rule}.cg-sec-colour{grid-area:colour}.cg-panel>.cg-look{grid-area:bar}.cg-result{left:calc(10 * var(--g));bottom:calc(8 * var(--g));width:calc(100% - 20 * var(--g))}.cg-hint{white-space:normal;width:calc(100% - 24px);max-width:none}.cg-hint.long{top:calc(10 * var(--g))}.cg-pics.copying .cg-hint{top:calc(48 * var(--g))}.cg .hl-nav{top:auto;bottom:calc(var(--cg-result-h,80px) + 16 * var(--g));left:auto;right:calc(10 * var(--g))}.cg .cg-vb{display:none}}@media (width<=980px) and (height<=500px) and (orientation:landscape){.cg .cg-vb{display:none}}