.c4-arena{width:min(100%,470px);position:relative}.c4-turn{color:#b5c8e5;align-items:center;gap:8px;min-height:28px;margin-bottom:18px;font-size:10px;display:flex}.c4-turn b{font:7px var(--font-geist-mono),monospace;letter-spacing:.1em;color:#8c9fc0;margin-left:auto}.c4-turn-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px;box-shadow:0 0 12px}.c4-board-frame{background:linear-gradient(145deg,#192b4655,#0b142580);border:1px solid #8cb8ff25;border-radius:16px;padding:14px;box-shadow:0 20px 50px #0004,inset 0 1px #d8e7ff10}.c4-column-labels{font:8px var(--font-geist-mono),monospace;color:#849bbc;text-align:center;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:11px;display:grid}.c4-column-labels span{place-items:center;height:18px;transition:color .2s;display:grid}.c4-column-labels .is-hovered{color:#a8cfff}.c4-board{--cell-gap:8px;gap:var(--cell-gap);border-radius:10px;grid-template-columns:repeat(7,minmax(0,1fr));display:grid;position:relative;overflow:hidden}.c4-column{gap:var(--cell-gap);cursor:pointer;background:0 0;border:0;border-radius:30px;grid-template-rows:repeat(6,1fr);min-width:0;padding:0;transition:background .25s;display:grid}.c4-column:disabled{cursor:default}.c4-column.is-hovered{background:linear-gradient(#7eb8ff08,#7eb8ff18)}.c4-slot{aspect-ratio:1;background:radial-gradient(circle at 50% 65%,#10203a,#060c18);border:1px solid #8cb8ff20;border-radius:50%;display:block;position:relative;box-shadow:inset 0 3px 8px #0008}.c4-slot:after{content:"";border-radius:inherit;pointer-events:none;border:1px solid #8cb8ff12;position:absolute;inset:-1px}.c4-piece{z-index:1;border-radius:50%;animation:.4s both c4-drop;position:absolute;inset:3px;box-shadow:inset 0 2px 3px #ffffff35,0 3px 8px #0005}.c4-you{color:#8cbfff;background:radial-gradient(circle at 32% 25%,#bcdcff,#7eb8ff 40%,#376ca9)}.c4-ai{color:#bba8ff;background:radial-gradient(circle at 32% 25%,#e1d8ff,#b4a0f4 40%,#67529a)}.c4-piece-core{border:1px solid #e7efff30;border-radius:50%;position:absolute;inset:16%;box-shadow:inset 0 1px 2px #0002}.c4-piece.is-latest:after{content:"";opacity:.8;border:1px solid;border-radius:50%;position:absolute;inset:-3px}.c4-landing{background:#7eb8ff16;border:1px dashed #a8cfff99;border-radius:50%;animation:1.8s infinite c4-preview;position:absolute;inset:5px}.c4-slot.is-winning{border-color:#e2d7ff;box-shadow:0 0 18px #bba8ff55}.c4-slot.is-winning .c4-piece-core{border-color:#fffa;animation:1.7s infinite c4-connect}.c4-board-foot{font:7px var(--font-geist-mono),monospace;letter-spacing:.08em;color:#859abd;justify-content:space-between;gap:10px;margin-top:15px;display:flex}.c4-history{align-items:center;gap:7px;min-height:40px;margin-top:18px;display:flex}.c4-history>span{font:7px var(--font-geist-mono),monospace;letter-spacing:.08em;color:#859abd;white-space:nowrap;margin-right:8px}.c4-history>div{width:29px;height:25px;font:9px var(--font-geist-mono),monospace;color:#a8cfff;background:#7eb8ff06;border:1px solid #8cb8ff20;border-radius:6px;justify-content:center;align-items:center;gap:5px;animation:.25s both gx-arrive;display:flex}.c4-history i{background:#7eb8ff;border-radius:50%;width:4px;height:4px}.c4-history .is-ai{color:#c6b6ff}.c4-history .is-ai i{background:#bba8ff}.c4-history p{color:#8094b6;font-size:9px}.c4-result{background:#a78bfa10;border:1px solid #a78bfa35;border-radius:12px;justify-content:space-between;align-items:center;gap:15px;margin-top:18px;padding:14px;animation:.5s both gx-arrive;display:flex}.c4-result strong{font:500 17px var(--font-syne),sans-serif;color:#d8dcff}.c4-help{color:#94a7c7;margin-top:12px;font-size:10px;line-height:1.8}.c4-legend{color:#c8dcff;gap:22px;margin-top:14px;font-size:10px;display:flex}.c4-legend span{align-items:center;gap:7px;display:flex}.c4-legend i{border-radius:50%;width:9px;height:9px}.c4-gravity{width:min(100%,490px)}.c4-gravity .c4-board-frame{background:radial-gradient(at 50% 20%,#a78bfa12,#0000 80%);border-color:#a78bfa20;border-radius:24px;padding:16px 20px;transform:perspective(1200px)rotateX(3deg);box-shadow:0 15px 70px #a78bfa0b,inset 0 1px #a78bfa15}.c4-gravity .c4-board{--cell-gap:10px}.c4-gravity .c4-column-labels{gap:10px}.c4-gravity .c4-slot{background:radial-gradient(circle at 50% 40%,#1a203733,#070c1980);border-color:#bba8ff25;box-shadow:inset 0 1px 8px #0003,0 0 20px #a78bfa04}.c4-gravity .c4-piece{inset:2px;box-shadow:inset 0 2px 4px #ffffff40,0 0 18px #a78bfa20}.c4-gravity .c4-piece-core{background:#ffffff0c;border-color:#ffffff40;inset:24%}.c4-gravity .c4-history{justify-content:center}.gx-experiment--connect4 .gx-board-area{min-height:0;padding:26px}.gx-experiment--connect4 .gx-switch a{padding-left:10px;padding-right:10px}.gx-experiment--connect4 .gx-switch a span{margin-left:7px}@keyframes c4-drop{0%{transform:translateY(calc(-1*var(--drop-rows)*(100% + var(--cell-gap))));opacity:.6}72%{opacity:1;transform:translateY(0)}86%{transform:translateY(-12%)}to{transform:translateY(0)}}@keyframes c4-preview{50%{opacity:.45}}@keyframes c4-connect{50%{background:#ffffff30;box-shadow:0 0 18px #e7dfff77}}@media (max-height:850px) and (min-width:701px){.c4-arena,.c4-gravity{max-width:350px}.c4-turn{margin-bottom:10px;font-size:9px}.c4-turn b{font-size:6px}.c4-board-frame,.c4-gravity .c4-board-frame{padding:12px}.c4-history{margin-top:10px}.gx-experiment--connect4 .gx-board-area{padding:18px 24px}.gx-experiment--connect4 .gx-control{margin-top:17px}.gx-experiment--connect4 .gx-local{margin-top:16px;padding-top:14px}}@media (max-width:700px){.c4-board,.c4-gravity .c4-board{--cell-gap:6px}.c4-column-labels,.c4-gravity .c4-column-labels{gap:6px}.c4-board-frame,.c4-gravity .c4-board-frame{padding:10px}.c4-turn{flex-wrap:wrap;font-size:9px}.c4-turn b{font-size:6px}.gx-experiment--connect4 .gx-board-area{padding:20px 14px}.c4-board-foot{font-size:6px}.gx-switch a{padding:8px 9px}.gx-switch a span{margin-left:7px}.c4-history{gap:5px}.c4-history>span{margin-right:3px}.c4-history>div{width:25px}.c4-result strong{font-size:14px}}.preview-embed-page .c4-arena{max-width:460px}.preview-embed-page .c4-turn,.preview-embed-page .c4-board-foot,.preview-embed-page .c4-column-labels{display:none}@media (prefers-reduced-motion:reduce){.c4-gravity .c4-board-frame{transform:none}.c4-piece,.c4-landing,.c4-slot.is-winning .c4-piece-core{animation:none}}