/* Contact-surface demo for the gold-plating article.
   cd- prefixed, loaded only when an article contains [data-contact-demo].
   No animation library: SVG geometry is set as attributes (Safari-safe),
   current flow is a CSS stroke-dashoffset march. */
.cd-demo{border:1px solid #d9e0e2;background:#fff;margin:34px 0;font-family:inherit}
.cd-head{padding:18px 20px 0}
.cd-head h3{margin:0 0 6px;font-size:19px;line-height:1.3}
.cd-head p{margin:0;font-size:13.5px;line-height:1.6;color:#6a767c}
.cd-controls{display:flex;flex-wrap:wrap;gap:18px;padding:16px 20px 0}
.cd-group{display:flex;flex-direction:column;gap:6px}
.cd-group>span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#8b969b}
.cd-seg{display:inline-flex;border:1px solid #cdd6d9;background:#f4f7f8}
.cd-seg button{appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;line-height:1;padding:9px 13px;color:#44535a;white-space:nowrap}
.cd-seg button+button{border-left:1px solid #cdd6d9}
.cd-seg button[aria-pressed="true"]{background:#0e6e93;color:#fff}
.cd-seg button:focus-visible{outline:2px solid #0e6e93;outline-offset:2px}
.cd-run{margin-left:auto;align-self:flex-end}
.cd-run button{appearance:none;-webkit-appearance:none;border:1px solid #0e6e93;background:#fff;color:#0e6e93;cursor:pointer;font:inherit;font-size:13px;padding:9px 16px}
.cd-run button[disabled]{opacity:.5;cursor:default}
.cd-stage{padding:6px 20px 0}
.cd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cd-scroll svg{display:block;width:100%;min-width:560px;height:auto}
.cd-metal{fill:#8e9ba2}
.cd-plate{fill:#d8ab3d}
.cd-film{fill:#7d8a5e;opacity:0;transition:opacity .45s ease}
.cd-demo[data-film="1"] .cd-film{opacity:.85}
.cd-wire{fill:none;stroke:#b7c2c7;stroke-width:3}
.cd-flow{fill:none;stroke:#0e6e93;stroke-width:3;stroke-linecap:round;stroke-dasharray:9 13;stroke-dashoffset:0;opacity:0}
.cd-demo[data-flow="on"] .cd-flow{opacity:1;animation:cd-march .85s linear infinite}
.cd-demo[data-flow="stutter"] .cd-flow{opacity:1;animation:cd-march 2.6s linear infinite,cd-blink 1.5s steps(1) infinite}
@keyframes cd-march{to{stroke-dashoffset:-44}}
@keyframes cd-blink{0%,55%{opacity:1}56%,100%{opacity:.12}}
.cd-block{opacity:0;transition:opacity .3s ease}
.cd-demo[data-flow="off"] .cd-block{opacity:1}
.cd-spot{fill:#0e6e93;opacity:0;transition:opacity .35s ease}
.cd-demo[data-conduct="1"] .cd-spot{opacity:1}
.cd-label{font-size:11px;fill:#6a767c}
.cd-label-b{font-size:11.5px;fill:#2c3a40;font-weight:600}
.cd-out{display:flex;gap:14px;align-items:flex-start;padding:12px 20px 20px;border-top:1px solid #eef2f3;margin-top:8px}
.cd-pill{flex:0 0 auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border:1px solid currentColor;line-height:1}
.cd-demo[data-state="ok"] .cd-pill{color:#1f7a4d}
.cd-demo[data-state="warn"] .cd-pill{color:#b8791b}
.cd-demo[data-state="bad"] .cd-pill{color:#b4372b}
.cd-say{margin:0;font-size:14px;line-height:1.6;color:#33424a}
.cd-note{padding:0 20px 18px;margin:0;font-size:12px;line-height:1.6;color:#8b969b}
.cd-hint{display:none;padding:0 20px 14px;margin:0;font-size:12px;color:#8b969b}
.cd-demo.is-pannable .cd-hint{display:block}
@media(max-width:767px){
.cd-head h3{font-size:17px}
.cd-controls{gap:13px;padding:14px 15px 0}
.cd-seg button{padding:8px 10px;font-size:12.5px}
.cd-run{margin-left:0}
.cd-stage{padding:6px 15px 0}
.cd-out{padding:12px 15px 17px;flex-direction:column;gap:9px}
.cd-note,.cd-hint{padding-left:15px;padding-right:15px}
}
@media(prefers-reduced-motion:reduce){
.cd-demo[data-flow="on"] .cd-flow,.cd-demo[data-flow="stutter"] .cd-flow{animation:none}
}
/* surface layers drawn as strokes along the asperity profile */
.cd-plateline{fill:none;stroke:#d8ab3d;stroke-width:5;stroke-linejoin:round}
.cd-filmline{fill:none;stroke:#7d8a5e;stroke-width:5;stroke-linejoin:round;opacity:0;transition:opacity .45s ease}
.cd-demo[data-film="1"] .cd-filmline{opacity:.92}