/* Building with Mars soil: this stop's own drawings (05-17 sections.construction). Shared looks are in living/explain.css. */
.soilmix { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: center; }
.soilmix .grains { width: 100%; height: auto; display: block; }
.grain { transition: opacity 0.45s, transform 0.45s; transform-box: fill-box; transform-origin: center; }
.grain.dim { opacity: 0.32; transform: scale(0.8); }
.sp-list { display: grid; gap: 8px; }
.sp { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--rule); background: rgba(255,252,247,0.86); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.3s, background 0.3s, transform 0.3s; }
.sp i { width: 14px; height: 14px; border-radius: 4px; }
.sp b { font: 700 17px/1.1 var(--wum-display); text-transform: uppercase; }
.sp-pct { font: 600 14px/1 var(--wum-mono); color: var(--muted); }
.sp small { grid-column: 2 / 4; display: none; font-size: 14px; line-height: 1.45; color: var(--muted); }
.sp[aria-pressed="true"] { border-color: var(--ink); background: #fff; transform: translateX(4px); }
.sp[aria-pressed="true"] small { display: block; }
.step .drum { animation: cn-spin 2.4s linear infinite; transform-box: fill-box; transform-origin: center; }
.step .drum.rev { animation-direction: reverse; }
.step .head { animation: cn-print 3s ease-in-out infinite alternate; }
@keyframes cn-spin { to { transform: rotate(360deg); } }
@keyframes cn-print { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.cutfig svg { width: 100%; height: auto; display: block; }
.cutfig .note, .gripfig + .note { margin: 12px 0 0; }
.gripfig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gside { display: grid; gap: 6px; justify-items: center; }
.gside b { font: 600 11px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.gside svg { width: 100%; height: auto; }
.drumspin { animation: cn-spin 3s linear infinite; transform-box: fill-box; transform-origin: center; }
.drumspin.rev { animation-direction: reverse; }
@media (max-width: 960px) {
  .soilmix { grid-template-columns: minmax(0, 1fr); }
  .soilmix .grains { max-width: 300px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .step .drum, .step .head, .drumspin { animation: none; } }