.g-color-connect{--cc-c0:var(--cat-logic);--cc-c1:var(--cat-patterns);--cc-c2:var(--cat-language);--cc-c3:var(--cat-spatial);--cc-c4:var(--cat-memory);--cc-c5:var(--cat-math);--cc-c6:var(--c-star);--cc-c7:var(--cat-attention);--cc-pw:38%;--cc-line:1px;gap:var(--sp-3)}.g-color-connect .cc-meter{justify-content:center;gap:var(--sp-2);flex-wrap:wrap;display:flex}.g-color-connect .cc-chip{align-items:center;gap:var(--sp-1);padding-block:var(--sp-1);padding-inline:var(--sp-3);border-radius:var(--r-full);background:var(--c-surface-2);color:var(--c-text-dim);font-size:var(--fs-sm);white-space:nowrap;display:inline-flex}.g-color-connect .cc-chip--pairs{background:var(--c-brand-soft);color:var(--c-brand)}.g-color-connect .cc-chip--fill{background:var(--c-good-soft);color:var(--c-good)}.g-color-connect .cc-chip b{font-family:var(--font-num);font-variant-numeric:tabular-nums}.g-color-connect .cc-legend{justify-content:center;gap:var(--sp-1);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.g-color-connect .cc-key{padding-block:2px;padding-inline:var(--sp-2);border-radius:var(--r-full);background:var(--c-surface-2);color:var(--c-text-dim);font-size:var(--fs-xs);white-space:nowrap;align-items:center;gap:4px;display:inline-flex}.g-color-connect .cc-key.is-done{background:var(--c-good-soft);color:var(--c-good)}.g-color-connect .cc-keyglyph{width:14px;height:14px;color:var(--cc-d,currentColor);flex:none}.g-color-connect .cc-key[data-color="0"]{--cc-d:var(--cc-c0)}.g-color-connect .cc-key[data-color="1"]{--cc-d:var(--cc-c1)}.g-color-connect .cc-key[data-color="2"]{--cc-d:var(--cc-c2)}.g-color-connect .cc-key[data-color="3"]{--cc-d:var(--cc-c3)}.g-color-connect .cc-key[data-color="4"]{--cc-d:var(--cc-c4)}.g-color-connect .cc-key[data-color="5"]{--cc-d:var(--cc-c5)}.g-color-connect .cc-key[data-color="6"]{--cc-d:var(--cc-c6)}.g-color-connect .cc-key[data-color="7"]{--cc-d:var(--cc-c7)}.g-color-connect .cc-pan{overscroll-behavior-x:contain;width:100%;min-width:0;scrollbar-width:thin;padding-block-end:var(--sp-1);overflow:auto hidden}.g-color-connect .cc-grid{--cc-floor:calc(var(--cc-n,5) * (var(--tap) + var(--cc-line)) + var(--cc-line));--cc-ceil:calc(var(--cc-n,5) * (64px + var(--cc-line)) + var(--cc-line));grid-template-columns:repeat(var(--cc-n,5), 1fr);gap:var(--cc-line);padding:var(--cc-line);width:max(min(100%, var(--cc-ceil)), var(--cc-floor));background:var(--c-border-strong);border-radius:var(--r-md);touch-action:none;margin-inline:auto;display:grid;overflow:hidden}.g-color-connect .cc-cell{aspect-ratio:1;background:var(--c-surface);min-width:0;color:var(--c-text-faint);border:0;border-radius:0;padding:0;position:relative}.g-color-connect .cc-cell:focus-visible{outline:3px solid var(--c-focus);outline-offset:-3px;z-index:2;border-radius:0}.g-color-connect .cc-panbar{justify-content:center;gap:var(--sp-3);display:flex}.g-color-connect .cc-panbar[hidden]{display:none}.g-color-connect .cc-panbtn{width:var(--tap);height:var(--tap);border:1px solid var(--c-border);border-radius:var(--r-full);background:var(--c-surface);color:var(--c-text-dim);place-items:center;padding:0;display:inline-grid}.g-color-connect .cc-panbtn:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}.g-color-connect .cc-panglyph{width:20px;height:20px}.g-color-connect .cc-cell[data-pipe="0"]{--cc-c:var(--cc-c0)}.g-color-connect .cc-cell[data-pipe="1"]{--cc-c:var(--cc-c1)}.g-color-connect .cc-cell[data-pipe="2"]{--cc-c:var(--cc-c2)}.g-color-connect .cc-cell[data-pipe="3"]{--cc-c:var(--cc-c3)}.g-color-connect .cc-cell[data-pipe="4"]{--cc-c:var(--cc-c4)}.g-color-connect .cc-cell[data-pipe="5"]{--cc-c:var(--cc-c5)}.g-color-connect .cc-cell[data-pipe="6"]{--cc-c:var(--cc-c6)}.g-color-connect .cc-cell[data-pipe="7"]{--cc-c:var(--cc-c7)}.g-color-connect .cc-cell[data-dot="0"]{--cc-d:var(--cc-c0)}.g-color-connect .cc-cell[data-dot="1"]{--cc-d:var(--cc-c1)}.g-color-connect .cc-cell[data-dot="2"]{--cc-d:var(--cc-c2)}.g-color-connect .cc-cell[data-dot="3"]{--cc-d:var(--cc-c3)}.g-color-connect .cc-cell[data-dot="4"]{--cc-d:var(--cc-c4)}.g-color-connect .cc-cell[data-dot="5"]{--cc-d:var(--cc-c5)}.g-color-connect .cc-cell[data-dot="6"]{--cc-d:var(--cc-c6)}.g-color-connect .cc-cell[data-dot="7"]{--cc-d:var(--cc-c7)}.g-color-connect .cc-pipe{pointer-events:none;position:absolute;inset:0}.g-color-connect .cc-stub,.g-color-connect .cc-core{background:var(--cc-c,transparent);display:none;position:absolute}.g-color-connect .cc-core{inset-block:calc(50% - var(--cc-pw) / 2);inset-inline:calc(50% - var(--cc-pw) / 2);border-radius:var(--r-xs)}.g-color-connect .cc-stub--n{inset-block:0 50%;inset-inline:calc(50% - var(--cc-pw) / 2)}.g-color-connect .cc-stub--s{inset-block-start:50%;inset-block-end:calc(-1 * var(--cc-line));inset-inline:calc(50% - var(--cc-pw) / 2)}.g-color-connect .cc-stub--is{inset-inline:0 50%;inset-block:calc(50% - var(--cc-pw) / 2)}.g-color-connect .cc-stub--ie{inset-inline-start:50%;inset-inline-end:calc(-1 * var(--cc-line));inset-block:calc(50% - var(--cc-pw) / 2)}.g-color-connect .cc-cell[data-pipe] .cc-core,.g-color-connect .cc-cell.has-n .cc-stub--n,.g-color-connect .cc-cell.has-s .cc-stub--s,.g-color-connect .cc-cell.has-is .cc-stub--is,.g-color-connect .cc-cell.has-ie .cc-stub--ie{display:block}.g-color-connect .cc-cell.is-head:after{content:"";border:2px dashed var(--c-focus);border-radius:var(--r-xs);pointer-events:none;position:absolute;inset:3px}.g-color-connect .cc-dotwrap{border:2px solid var(--cc-d,var(--c-border-strong));background:color-mix(in srgb, var(--cc-d,transparent) 15%, var(--c-surface));color:var(--cc-d,var(--c-text));pointer-events:none;border-radius:50%;place-items:center;display:grid;position:absolute;inset-block:11%;inset-inline:11%}.g-color-connect .cc-cell.is-joined .cc-dotwrap{background:color-mix(in srgb, var(--cc-d,transparent) 32%, var(--c-surface));box-shadow:0 0 0 2px color-mix(in srgb, var(--cc-d,transparent) 28%, transparent)}.g-color-connect .cc-dot{width:64%;height:auto}.g-color-connect.is-solved .cc-grid{background:color-mix(in srgb, var(--c-good) 55%, var(--c-border-strong))}.g-color-connect .cc-note{max-width:40ch;color:var(--c-text-faint);font-size:var(--fs-xs);text-align:center;margin:0}.g-color-connect .cc-sr{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.g-color-connect .cc-stub,.g-color-connect .cc-core,.g-color-connect .cc-dotwrap{transition:none}.g-color-connect.is-motion .cc-stub,.g-color-connect.is-motion .cc-core{transition:background var(--dur-fast) var(--ease)}.g-color-connect.is-motion .cc-dotwrap{transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}