.c4-cell[data-source='code'] { background: #dbe3ef; color: #334155; box-shadow: inset 0 -4px 0 #94a3b8, inset 0 3px 0 #f8fafc; }

.c4-cell[data-source='jev'] { background: #d1fae5; color: #065f46; box-shadow: inset 0 -4px 0 #34a983, inset 0 3px 0 #ecfdf5; }

.c4-cell[data-source='openjev'] { background: #cbd5e1; color: #334155; box-shadow: inset 0 -4px 0 #94a3b8, inset 0 3px 0 #f8fafc; }

.connect4-demo .c4-cell:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }

.c4-handoff { border: 1px solid #a6b5c9; border-left: 4px solid #334155; background: #f1f5f9; color: #1e293b; padding: 10px 12px; margin: 12px 0; font-size: 12px; font-weight: 700; }

.c4-end-card { margin: 16px 0 0; padding: 18px; background: #fff; border: 1px solid #a6b5c9; border-radius: 10px; }

.c4-end-card h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.025em; }

.c4-end-card p { margin: 6px 0 12px; font-size: 13px; }

.c4-end-card button, .c4-start { min-height: 44px; border: 1px solid #334155; border-radius: 7px; padding: 10px 14px; background: #15243c; color: #fff; font: 650 13px var(--font); cursor: pointer; }

.c4-start { flex: none; margin-top: 0; white-space: nowrap; }

.c4-toolbar [hidden] { display: none; }