/* No Connections' card animations, played live: each pair is the version the
   game used to ship beside the one it ships now. Loaded by that write-up only.

   The boards are pictures of another product, so they take that product's
   colors and face rather than this site's: the `--cd-` values below are copied
   from the game's `src/styles/tokens.css`, the way a screenshot carries its own
   pixels. They stay light in both themes for the same reason a screenshot does.
   Everything around the boards (panel edge, captions, buttons) is this site's.
   See ARCHITECTURE.md D-167. */
.cd {
  --cd-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cd-bg: #FFFFFF;
  --cd-tile: #F3F3F1;
  --cd-ink: #161616;
  --cd-on-ink: #FFFFFF;
  --cd-loner: #8A877F;
  --cd-hatch: #E2E0D9;
  --cd-note: #3A3833;
  --cd-warn: #9A4422;  /* the game's --warn-text: a miss is its one warning color */
  /* The container the stage scales against: the column, not the window. */
  container-type: inline-size;
  text-align: left;
}

/* Two boards side by side on a column 500px or wider, so both can be watched
   at once. Each side is three rows (its board, its label, its caption) on a
   shared subgrid, so the two boards start on the same line however many lines
   a picker wraps to, and the two captions do too. Under 500px the pair stacks:
   see the end of the zoom steps below. */
.cd-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: var(--s4);
}
.cd-side {
  min-width: 0;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}

/* A figure with only the shipped motion to show keeps one board at the size
   a pair's board would be, centered, so it reads as the same kind of figure. */
.cd-single { grid-template-columns: minmax(0, calc((100% - var(--s4)) / 2)); justify-content: center; }
/* Beside a clip in a `.note-pair`, a single board fills its own column and is
   sized against that column rather than against half of it. */
.note-pair .cd-single { grid-template-columns: minmax(0, 1fr); }
.note-pair .cd.note-fig { margin: 0; }
/* Beside a tall phone clip, a short live board sits level with the middle of
   the clip rather than at its top, where it left the pair looking unfinished. */
.note-pair > .cd.note-fig { align-self: center; }
.note-pair .cd-single .cd-stage { zoom: .42; }
@container (min-width: 170px) { .note-pair .cd-single .cd-stage { zoom: .48; } }
@container (min-width: 200px) { .note-pair .cd-single .cd-stage { zoom: .56; } }
@container (min-width: 230px) { .note-pair .cd-single .cd-stage { zoom: .64; } }
@container (min-width: 260px) { .note-pair .cd-single .cd-stage { zoom: .74; } }
@container (min-width: 300px) { .note-pair .cd-single .cd-stage { zoom: .84; } }
@container (min-width: 340px) { .note-pair .cd-single .cd-stage { zoom: .94; } }
@container (min-width: 370px) { .note-pair .cd-single .cd-stage { zoom: 1; } }

/* Above each board, 8px clear of it: the picker on the left board, and on the
   right a plain label, `Now`, since there is nothing there to choose. The
   picker is the one control, so it is the one thing drawn as buttons. The
   pressed one is ink, the rest an outline at `--frame-line`, which is 3:1
   against the ground. On a narrow column a label wraps inside its button
   rather than the button dropping to a second row. */
.cd-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: end;
  min-width: 0;
  margin-bottom: var(--s2);
}
.cd-tab {
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.cd-tabs button {
  font-family: var(--sans);
  font-size: var(--text-label);
  line-height: 1.2;
  padding: var(--s2) var(--s3);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  text-align: left;
  flex: 0 1 auto;
  min-width: 0;
  cursor: pointer;
  border: 1px solid var(--frame-line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.cd-tabs button + button { margin-left: -1px; }
.cd-tabs button:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.cd-tabs button:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.cd-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); position: relative; }
.cd-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; z-index: 1; }
/* The picker needs the script; without it the left board keeps an empty row
   the height of the right one's label. */
.cd-vers { display: none; }
.js .cd-vers { display: flex; }

/* Feedback's pairs: one heading names what the pair shows, and each board's
   label (or the ending's version picker) sits under its board instead of
   over it. The heading sits 16px over the boards, closer to them than to
   anything above, so it reads as theirs. */
.note-body .cd-title { margin: 0 0 var(--s4); }
/* A pair that opens its section sits under the section heading the way a
   paragraph would, 16px down, not 64px plus the heading's own 32: the pair's
   64px is for separating one pair from the next. Measured at 96px before. */
.note-body h2 + .note-fig.cd { margin-top: 0; }
.cd-below .cd-tabs { align-self: start; margin: var(--s2) 0 0; }
.cd-below .cd-cap { margin-top: var(--s2); }

.cd-panel {
  background: var(--cd-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--s4) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  overflow: hidden;
}
.cd-cap {
  margin: var(--s3) 0 0;
  font-family: var(--sans);
  font-size: var(--text-label);
  line-height: 1.5;
  color: var(--muted);
}

/* Play runs both boards, so it sits centered under both, 16px below the
   captions. The pair takes 64px above and below it, four times that, so the
   button reads as the foot of its own pair and not the head of the next one.
   It needs the script, so without it it is not drawn; the boards still show
   their resting state. `js` is set in the head, before first paint. */
.note-fig.cd { margin-block: var(--s8); }
.cd-controls { display: none; justify-content: center; margin-top: var(--s4); }
.js .cd-controls { display: flex; }
.cd-play {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1;
  padding: var(--s3) var(--s4);
  border-radius: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--ground);
  border: 1px solid var(--ink);
}
.cd-play svg { width: 12px; height: 12px; fill: currentColor; }
.cd-play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Each board is 338px wide at the game's own size and, side by side, is
   zoomed to fit half the column: (column - 16px gap) / 2, less the panel's
   edges. `zoom`, not a transform, so the panel's height follows the board's.
   The pair is side by side only from a 500px column up. */
.cd-stage { zoom: .66; }
@container (min-width: 560px) { .cd-stage { zoom: .74; } }
@container (min-width: 620px) { .cd-stage { zoom: .82; } }
@container (min-width: 712px) { .cd-stage { zoom: 1; } }

/* Under a 500px column (a phone) the boards stack, the earlier version above
   the shipped one, and each takes the whole column. Side by side there, each
   board was zoomed to .42: tile words fell to about 7px and MANEUVER touched
   its tile's edges (Nhi, 2026-10-15). Accepted: on a phone the shorter pairs
   fit on one screen together but the ending's two tall boards do not, so its
   Play both runs one board out of sight. 32px between the two sides, against
   8px inside each, keeps a caption with its own board. The picker has the
   whole column, and side by side half a column is never under 242px, where
   both picker labels still fit in one row, so the picker never stacks. */
@container (max-width: 500px) {
  .cd-pair { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .cd-side { display: flex; flex-direction: column; }
  .cd-tabs { align-self: flex-start; }
  .cd-single { grid-template-columns: minmax(0, 1fr); }
  .cd-stage { zoom: .64; }
}
/* Each step leaves the board 16px clear of the panel's sides: 338px of board,
   plus 32px, plus the panel's two 1px edges. */
@container (max-width: 500px) and (min-width: 280px) { .cd-stage { zoom: .72; } }
@container (max-width: 500px) and (min-width: 310px) { .cd-stage { zoom: .8; } }
@container (max-width: 500px) and (min-width: 340px) { .cd-stage { zoom: .9; } }
@container (max-width: 500px) and (min-width: 372px) { .cd-stage { zoom: 1; } }

/* ---------- the game, drawn at its 390px phone size ---------- */
/* At rest the stage is a grid, so the first paint is the resting board with no
   script. The script switches it to absolute positions holding the same
   geometry, which is what the motion needs. */
.cd-stage {
  position: relative;
  width: 338px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 106px);
  grid-auto-rows: 78px;
  gap: 10px;
  align-content: start;
  font-family: var(--cd-font);
  color: var(--cd-ink);
}
.cd-stage[data-demo="pick"],
.cd-stage[data-demo="join"],
.cd-stage[data-demo="shuffle"] { height: 254px; }
.cd-stage[data-demo="flip"],
.cd-stage[data-demo="peek"] { height: 78px; }
.cd-stage[data-demo="ending"] { height: 488px; }

.cd-tile {
  position: relative;
  width: 106px;
  height: 78px;
  border-radius: 20px;
  background: var(--cd-tile);
  color: var(--cd-ink);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
}
.cd-w { position: relative; }
.cd-sel { background: var(--cd-ink); color: var(--cd-on-ink); border-color: var(--cd-ink); }
.cd-loner { border: 1.5px dashed transparent; }
.cd-hatch {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  opacity: 0;
  background: repeating-linear-gradient(-45deg, var(--cd-hatch) 0 8px, var(--cd-bg) 8px 16px);
}
.cd-plate { position: absolute; inset: 22px 10px; border-radius: 14px; background: var(--cd-bg); opacity: 0; }

.cd-fill { position: absolute; border-radius: 20px; background: var(--cd-ink); z-index: 2; }
.cd-fword {
  position: absolute;
  width: 106px;
  height: 78px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--cd-on-ink);
}

.cd-card {
  position: relative;
  grid-column: 1 / -1;
  width: 338px;
  height: 78px;
  border-radius: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
}
.cd-pes { background: #F6DE7E; color: #4D4220; }
.cd-manus { background: #B9E4CB; color: #24503A; }
.cd-cor { background: #F7C8AC; color: #5E3420; }
.cd-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
}
.cd-back { opacity: 0; }
.cd-ctop { display: flex; align-items: baseline; gap: 7px; }
.cd-root { font-style: italic; font-weight: 600; font-size: 22px; line-height: 1.1; color: #161616; }
.cd-lang { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.cd-cmem { font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1.2; }
.cd-means { font-size: 12px; }
.cd-means i { font-weight: 600; }
.cd-gloss { font-size: 17px; font-weight: 600; }
.cd-shade { position: absolute; inset: 0; border-radius: 20px; background: #161616; opacity: 0; pointer-events: none; }

.cd-msg { min-height: 20px; margin: 0; font-family: var(--cd-font); font-size: 14px; font-weight: 500; color: var(--cd-ink); text-align: center; }
/* The shipped game says a miss in its warning color at 600 (its `.message.miss`); the
   earlier version's line stays ink, so the pair shows that difference too. */
.cd-stage[data-v="after"] + .cd-msg { color: var(--cd-warn); font-weight: 600; }
.cd-layer { position: absolute; inset: 0; }
.cd-res-time { position: absolute; left: 0; top: 0; height: 40px; display: flex; align-items: center; font-size: 15px; font-weight: 600; }
.cd-res-share {
  position: absolute; right: 0; top: 0; height: 40px; padding: 0 18px; border-radius: 20px;
  background: var(--cd-ink); color: var(--cd-on-ink); display: flex; align-items: center; font-size: 15px; font-weight: 600;
}
.cd-res-notes { position: absolute; left: 0; width: 338px; top: 398px; font-size: 14px; line-height: 1.45; color: var(--cd-note); display: grid; gap: 6px; }
.cd-res-notes b { font-weight: 600; color: var(--cd-ink); }