/* Primer 05 — page-specific components. */

/* ── §1 where post sits in the frame ────────────────────────────────────── */
.chainflow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 22px 24px; }
.chainflow__node {
  flex: 1 1 130px; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: 14px; text-align: center;
}
.chainflow__node--here { flex: 1 1 200px; border-color: var(--hot); }
.chainflow__kind { font-size: 10px; color: var(--color-neutral-500); text-transform: uppercase; }
.chainflow__node--here .chainflow__kind { color: var(--hot); }
.chainflow__name { font-family: var(--font-heading); font-size: 14px; margin-top: 4px; }
.chainflow__arrow { font-family: var(--font-heading); font-size: 20px; color: var(--color-accent); }

/* ── demos ──────────────────────────────────────────────────────────────── */
.demo { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: center; }
.demo canvas {
  width: 100%; height: auto;
  border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-300); background: #0e1524;
}
.demo__control { margin-bottom: 18px; }
.demo__row { display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: 14px; margin-bottom: 6px; }
.demo__en { color: var(--color-neutral-500); font-size: 11px; }
.demo__val { color: var(--color-accent-700); }
.demo__hint { font-size: 12px; color: var(--color-neutral-600); line-height: 1.55; margin-top: 12px; }
.demo__note { font-size: 14px; line-height: 1.7; color: var(--color-neutral-800); text-align: justify; }

.dof canvas { background: #141b2b; }
.dof__bar { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.dof__slider { flex: 1 1 260px; }
.dof__presets { display: flex; gap: 8px; flex-wrap: wrap; }

.taa canvas { background: #141b2b; image-rendering: pixelated; }

.cardgrid--3 .tcard__title { font-size: 18px; }

.fig--tall { min-height: 132px; gap: 12px; }
.fig--tall .fig__box { padding: 9px 13px; font-size: 13px; }
.fig__scene {
  position: relative; width: 80px; height: 54px; background: #0e1524;
  border-radius: 4px; overflow: hidden; border: 1px solid var(--color-neutral-400);
}

@media (max-width: 680px) {
  .demo, .cardgrid--3 { grid-template-columns: 1fr; }
}