.cn { width: min(94vw, 330px); margin: 10px auto; }
.cn-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-left: 46px; margin-bottom: 4px; }
.cn-cols .clue { min-height: 34px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cn-main { display: flex; }
.cn-rows { width: 43px; display: grid; grid-template-rows: repeat(5, 1fr); gap: 3px; margin-right: 3px; }
.cn-rows .clue { display: flex; align-items: center; justify-content: flex-end; padding-right: 3px; }
.cn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; flex: 1; }
.cn-cell { aspect-ratio: 1/1; border-radius: 4px; background: #fff; border: 1px solid #c8ccd6; cursor: pointer; }
.cn-cell.c1 { background: #ff6b6b; }
.cn-cell.c2 { background: #4d96ff; }
.cn-cell.c3 { background: #6bcb77; }
.sq { width: 11px; height: 11px; border-radius: 2px; display: inline-block; margin: 1px; }
.sq.c1 { background: #ff6b6b; } .sq.c2 { background: #4d96ff; } .sq.c3 { background: #6bcb77; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: middle; margin: 0 2px; }
.sw.r { background: #ff6b6b; } .sw.b { background: #4d96ff; } .sw.g { background: #6bcb77; }