.g-bridges{--br-cell:40px;--br-min-cell:34px;--br-max-cell:54px;--br-frame-pad:8px;--br-water:color-mix(in srgb, var(--c-brand) 7%, var(--c-surface));--br-water-edge:color-mix(in srgb, var(--c-brand) 16%, var(--c-border));--br-span:color-mix(in srgb, var(--c-brand) 68%, var(--c-text));--br-ghost:color-mix(in srgb, var(--c-brand) 45%, transparent);--br-isle-bg:var(--c-surface);--br-isle-edge:var(--c-border-strong);--br-isle-ink:var(--c-text);gap:var(--sp-3)}.g-bridges .br-pan{overscroll-behavior-x:contain;width:100%;max-width:100%;padding-block:var(--sp-1);overflow-x:auto}.g-bridges .br-frame{width:max-content;padding:var(--br-frame-pad);border:1px solid var(--br-water-edge);border-radius:var(--r-lg);background:radial-gradient(120% 120% at 50% 0%, var(--br-water), color-mix(in srgb, var(--c-brand) 3%, var(--c-bg-sunken)));touch-action:pan-x pan-y;margin-inline:auto}.g-bridges .br-board{grid-template-columns:repeat(var(--br-n,7), var(--br-cell));grid-template-rows:repeat(var(--br-n,7), var(--br-cell));display:grid}@supports (container-type:inline-size){.g-bridges .br-pan{container-type:inline-size}.g-bridges .br-frame{--br-cell:clamp(var(--br-min-cell), calc((100cqi - 2 * var(--br-frame-pad) - 4px) / var(--br-n,7)), var(--br-max-cell))}}.g-bridges .br-bridge{z-index:1;pointer-events:none;justify-content:center;align-items:center;display:flex}.g-bridges .br-bridge.is-h{gap:calc(var(--br-cell) * .18);padding-inline:calc(var(--br-cell) / 2);flex-direction:column}.g-bridges .br-bridge.is-v{gap:calc(var(--br-cell) * .18);padding-block:calc(var(--br-cell) / 2);flex-direction:row}.g-bridges .br-line{border-radius:var(--r-full);background:var(--br-span);display:none}.g-bridges .br-bridge.is-h .br-line{width:100%;height:3px}.g-bridges .br-bridge.is-v .br-line{width:3px;height:100%}.g-bridges .br-bridge[data-count="1"] .br-line:first-child,.g-bridges .br-bridge[data-count="2"] .br-line{display:block}.g-bridges .br-bridge.is-ghost[data-count="0"] .br-line:first-child,.g-bridges .br-bridge.is-hint[data-count="0"] .br-line:first-child{background:var(--br-ghost);display:block}.g-bridges .br-bridge.is-hint .br-line{background:var(--c-accent)}.g-bridges .br-isle{z-index:2;inline-size:max(var(--br-cell), var(--tap));block-size:max(var(--br-cell), var(--tap));border:2px solid var(--br-isle-edge);border-radius:var(--r-full);background:var(--br-isle-bg);color:var(--br-isle-ink);font:inherit;font-weight:var(--fw-bold);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;place-self:center;place-items:center;padding:0;display:grid}.g-bridges .br-num{font-size:clamp(13px, calc(var(--br-cell) * .44), 21px);font-variant-numeric:tabular-nums;line-height:1}.g-bridges .br-isle.is-done{border-color:var(--c-good);background:var(--c-good-soft);color:color-mix(in srgb, var(--c-good) 70%, var(--c-text));box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--c-good) 30%, transparent)}.g-bridges .br-isle.is-over{border-color:var(--c-warn);background:var(--c-warn-soft);color:color-mix(in srgb, var(--c-warn) 72%, var(--c-text))}.g-bridges .br-isle.is-sel{border-color:var(--c-brand);background:var(--c-brand-soft);color:var(--c-brand-ink);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-brand) 30%, transparent)}.g-bridges .br-isle.is-near{border-style:dashed;border-color:var(--c-brand)}.g-bridges .br-isle.is-hint{outline:3px dashed var(--c-accent);outline-offset:2px}.g-bridges .br-isle:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}.g-bridges.is-solved .br-isle{border-color:var(--c-good)}.g-bridges .br-note{max-width:42ch;color:var(--c-text-faint);font-size:var(--fs-xs);line-height:var(--lh-snug);text-align:center;margin:0}.g-bridges .br-sr{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.g-bridges .br-isle,.g-bridges .br-line{transition:none}.g-bridges .br-isle:active{transform:none}.g-bridges.is-motion .br-isle{transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease)}.g-bridges.is-motion .br-line{transition:background var(--dur) var(--ease)}.g-bridges.is-motion .br-isle:active{transform:scale(.93)}