/* Computers and AI: this stop's own drawings (05-17 sections.computers). Shared looks are in living/explain.css. */
.chipfig { display: grid; gap: 12px; }
.chipbtn { display: block; width: 100%; max-width: 640px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; }
.chipbtn svg { width: 100%; height: auto; display: block; }
.chipfig .chip { fill: #1C1F26; stroke: #3A3F4A; stroke-width: 2; }
.chipfig .pins rect { fill: #C9A65A; }
.bit rect { fill: #262A33; stroke: #3A4150; transition: fill 0.3s, stroke 0.3s; }
.bit text { font: 600 14px/1 var(--wum-mono); fill: #7FB2E8; transition: fill 0.3s; }
.bit.bad rect { fill: #5A2216; stroke: #FF6B5A; } .bit.bad text { fill: #FFD0C4; }
.bit.good rect { fill: #173A28; stroke: #74E3A6; } .bit.good text { fill: #CFF7DF; }
.ray { stroke: #FFC27A; stroke-width: 3; stroke-linecap: round; opacity: 0; stroke-dasharray: 400; stroke-dashoffset: 400; }
.ray.go { animation: cp-ray 0.5s ease-in forwards, cp-fade 1.4s 0.5s forwards; }
@keyframes cp-ray { from { opacity: 1; stroke-dashoffset: 400; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes cp-fade { to { opacity: 0; } }
.chip-txt { display: flex; flex-wrap: wrap; gap: 8px; }
.ct { padding: 8px 12px; border-radius: 999px; background: rgba(255,252,247,0.86); font: 600 12px/1 var(--wum-mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.4; transition: opacity 0.3s, background 0.3s, color 0.3s; }
.chipfig.flip .ct.flip { opacity: 1; background: #FF6B5A; color: #fff; }
.chipfig.fix .ct.fix { opacity: 1; background: #2F9E64; color: #fff; }
.ct.hint { opacity: 1; margin-left: auto; }
.step .led { animation: cp-led 1.8s steps(2) infinite; }
.step .led:nth-child(3n) { animation-delay: -0.6s; } .step .led:nth-child(4n) { animation-delay: -1.1s; }
.step .trolley { animation: cp-trolley 4s ease-in-out infinite alternate; }
.step .pipe { stroke-dasharray: 8 6; animation: cp-flow 1.5s linear infinite; }
@keyframes cp-led { 50% { opacity: 0.25; } }
@keyframes cp-trolley { from { transform: translateX(-70px); } to { transform: translateX(80px); } }
@keyframes cp-flow { to { stroke-dashoffset: -28; } }
.kindsfig svg, .heatfig svg { width: 100%; height: auto; display: block; }
.kindsfig .slow { animation: cp-flow 3s linear infinite; }
.hflow { stroke-dasharray: 10 8; animation: cp-flow 1.4s linear infinite; }
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.kinds div { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(207,227,255,0.3); }
.kinds dt { font: 600 11px/1.2 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #CFE3FF; }
.kinds .k-ctl dt { color: #74E3A6; }
.kinds dd { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.kindsfig .note, .heatfig .note { margin: 12px 0 0; }
@media (max-width: 700px) { .kinds { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .step .led, .step .trolley, .step .pipe, .kindsfig .slow, .hflow { animation: none; } }