/* Home · "Three ways" cards: illustrated motion scenes (ways-scene.js). Light cards, one accent each.
   Continuous motion only runs while a card is on screen (.play). Off for reduced motion. */
.ws-art.ws-live { display: block; aspect-ratio: auto; padding: 0; overflow: visible; background: none; border-radius: 0; }
.ws-art.ws-live::before { display: none; }

.wsc { --acc: 247,134,30; position: relative; display: flex; flex-direction: column; height: 340px; padding: 16px 18px 14px; border-radius: 22px; overflow: hidden; color: #10212f;
  background: radial-gradient(90% 60% at 100% 0%, rgba(var(--acc),.12), transparent 62%), radial-gradient(rgba(16,33,47,.055) 1px, transparent 1.3px) 0 0 / 16px 16px, linear-gradient(180deg, #fff, #f7f9fb);
  box-shadow: 0 30px 50px -36px rgba(16,33,47,.35), 0 0 0 1px #e3e9f0;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.wsc-trace { --acc: 16,185,129; } .wsc-buddy { --acc: 59,130,246; }
.wsc:hover { box-shadow: 0 40px 60px -36px rgba(16,33,47,.45), 0 0 0 1px #e3e9f0, 0 0 50px -20px rgba(var(--acc),.6); }
.wsc *, .wsc *::before, .wsc *::after { animation-play-state: paused; }
.wsc.play *, .wsc.play *::before, .wsc.play *::after { animation-play-state: running; }
@media (max-width: 1000px) { .wsc { height: auto; min-height: 340px; } }

.wsc-hd { display: flex; align-items: center; gap: 9px; min-height: 24px; }
.wsc-hd b { font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; }
.wsc-led { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--acc)); animation: wsc-led 1.8s infinite; }
@keyframes wsc-led { 0% { box-shadow: 0 0 0 0 rgba(var(--acc),.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(var(--acc),0); } }
.wsc-n { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: rgba(var(--acc),.13); color: rgb(var(--acc)); font-size: 11px; font-weight: 800; letter-spacing: .1em; filter: brightness(.82) saturate(1.2); }
.wsc-svg { display: block; flex: 1; min-height: 0; width: 100%; margin: 6px 0 4px; overflow: visible; font-family: Inter, system-ui, sans-serif; }
.wsc-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 9px 12px; border-radius: 12px; background: #f3f6f9; box-shadow: inset 0 0 0 1px #e6ebf1; }
.wsc-ft p { margin: 0; font-size: 12px; color: #5b6b7c; white-space: nowrap; }
.wsc-ft b { color: #10212f; font-weight: 800; font-variant-numeric: tabular-nums; }
.wsc-ft .z-r b { color: #059669; }
.wsc-ft .z-ok { color: #059669; font-weight: 700; } .wsc-ft .z-bad { color: #dc2626; font-weight: 700; }

/* shared drawing */
.wsc .z-sh { fill: rgba(16,33,47,.06); }
.wsc .z-floor { stroke: #dfe5ec; stroke-width: 2; }
.wsc .z-mb { fill: #eef2f6; stroke: #cdd6e0; stroke-width: 1.5; }
.wsc .z-mw { fill: #10212f; }
.wsc .z-mp { fill: #d6dee7; }
.wsc .z-tool { fill: #c3ccd6; } .wsc .z-bit { fill: #f7861e; } .wsc .z-bed { fill: #3b4a5a; }
.wsc .z-ml, .wsc .z-sl { font-size: 10.5px; font-weight: 700; fill: #4d5d6c; text-anchor: middle; }
.wsc .z-wire { fill: none; stroke: #dfe5ec; stroke-width: 2; stroke-dasharray: 4 5; }
.wsc .z-pk circle { fill: #f7861e; filter: drop-shadow(0 0 3px rgba(247,134,30,.8)); }
.wsc .z-lamp { fill: #f59e0b; transition: fill .3s; }
.wsc .z-on .z-lamp { fill: #10b981; }

/* ---------- 01 Pulse ---------- */
.wsc .z-hub-c { fill: #fff; stroke: #f7861e; stroke-width: 2; filter: drop-shadow(0 6px 10px rgba(247,134,30,.35)); }
.wsc .z-rip { fill: none; stroke: #f7861e; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: wsc-rip 2.4s ease-out infinite; }
.wsc .z-rip.z-d2 { animation-delay: 1.2s; }
@keyframes wsc-rip { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.wsc .z-m .z-spin, .wsc .z-m .z-pis, .wsc .z-m .z-head { transform-box: view-box; }
.wsc .z-on .z-spin { animation: wsc-spin .7s ease-in-out infinite alternate; }
@keyframes wsc-spin { to { transform: translateY(7px); } }
.wsc .z-on .z-pis { animation: wsc-pis 1.1s ease-in-out infinite alternate; }
@keyframes wsc-pis { to { transform: translateX(26px); } }
.wsc .z-on .z-head { animation: wsc-head 2.2s ease-in-out infinite alternate; }
@keyframes wsc-head { to { transform: translateX(44px); } }
.wsc .z-beam { stroke: #ef4444; stroke-width: 2; opacity: 0; } .wsc .z-spark { fill: #ffb867; opacity: 0; }
.wsc .z-on .z-beam { opacity: 1; } .wsc .z-on .z-spark { opacity: 1; animation: wsc-blink .18s steps(2) infinite; }
@keyframes wsc-blink { 50% { opacity: .2; } }
.wsc .z-on .z-mw { fill: #14283b; }
.wsc .z-m.z-on .z-mb { stroke: rgba(16,185,129,.55); }
.wsc .z-tag rect { fill: #fef3c7; stroke: #f59e0b; stroke-width: 1; } .wsc .z-tag text { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; fill: #b45309; text-anchor: middle; }
.wsc .z-tag { transition: opacity .3s; } .wsc .z-on .z-tag { opacity: 0; }
.wsc .z-chip { opacity: 0; } .wsc .z-chip rect { fill: #10b981; } .wsc .z-chip text { font-size: 10px; font-weight: 800; fill: #fff; text-anchor: middle; }
.wsc .z-on .z-chip { animation: wsc-chip 2.4s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes wsc-chip { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-16px); } }
/* data packets only flow from running machines */
.wsc-pulse .z-k2, .wsc-pulse .z-k3 { opacity: 0; transition: opacity .4s; }
.wsc-pulse.z-a2 .z-k2, .wsc-pulse.z-a3 .z-k3 { opacity: 1; }
.wsc-bar { position: relative; flex: 1; height: 8px; border-radius: 6px; background: #e3e9f0; overflow: hidden; }
.wsc-bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(.62); border-radius: inherit; background: linear-gradient(90deg, #ffb867, #f7861e); }
.wsc-bar em { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); background-size: 250% 100%; animation: wsc-sh 2.4s linear infinite; }
@keyframes wsc-sh { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.wsc-pulse .wsc-ft { gap: 14px; } .wsc-pulse .wsc-ft p { flex: none; } .wsc-pulse .wsc-ft .z-v { color: #e56f06; }
.wsc-pulse .wsc-ft .z-g { margin-left: 6px; color: #059669; font-weight: 700; }

/* ---------- 02 TraceGuard ---------- */
.wsc .z-post { fill: #cdd6e0; } .wsc .z-top { fill: #3b4a5a; } .wsc .z-eye { fill: #10b981; }
.wsc .z-scan { fill: rgba(16,185,129,.18); opacity: 0; transition: opacity .2s; }
.wsc .z-st.z-scan-on .z-scan { opacity: 1; animation: wsc-scan .5s ease-in-out infinite alternate; }
@keyframes wsc-scan { to { fill: rgba(16,185,129,.32); } }
.wsc .z-st .z-ok, .wsc .z-st .z-no { opacity: 0; transform-box: fill-box; transform-origin: center; }
.wsc .z-st .z-ok circle { fill: #10b981; } .wsc .z-st .z-ok path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wsc .z-st .z-no circle { fill: #ef4444; } .wsc .z-st .z-no text { font-size: 13px; font-weight: 900; fill: #fff; text-anchor: middle; }
.wsc .z-st.z-done .z-ok { animation: wsc-pop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
.wsc .z-st.z-bad .z-no { opacity: 1; animation: wsc-alarm .8s ease-in-out infinite; }
.wsc .z-st.z-bad .z-eye { fill: #ef4444; } .wsc .z-st.z-bad .z-top { fill: #b91c1c; }
@keyframes wsc-pop { from { opacity: 0; transform: scale(.3) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wsc-alarm { 50% { transform: scale(1.18); } }
.wsc .z-st.z-done .z-sl { fill: #047857; }
.wsc .z-belt { fill: #2a3644; } .wsc .z-tread { stroke: #5b6b7c; stroke-width: 2; stroke-dasharray: 6 8; animation: wsc-belt .6s linear infinite; }
@keyframes wsc-belt { to { stroke-dashoffset: -14; } }
.wsc .z-roll { fill: #c3ccd6; } .wsc .z-spoke { stroke: #6b7a8b; stroke-width: 1.5; animation: wsc-roll .8s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wsc-roll { to { transform: rotate(360deg); } }
.wsc .z-pc { fill: #f7861e; filter: drop-shadow(0 5px 6px rgba(247,134,30,.45)); } .wsc .z-qr { fill: #fff; } .wsc .z-qrd { fill: #10212f; }
.wsc .z-pbody { animation: wsc-bob .5s ease-in-out infinite alternate; } @keyframes wsc-bob { to { transform: translateY(-1.5px); } }
.wsc .z-cert, .wsc .z-lock { opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .6s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-cert.z-show, .wsc .z-lock.z-show { opacity: 1; transform: none; }
.wsc .z-cb { fill: #ecfaf3; stroke: #a7e3c6; stroke-width: 1.5; filter: drop-shadow(0 10px 14px rgba(16,185,129,.25)); }
.wsc .z-ct1 { font-size: 12px; font-weight: 800; fill: #047857; } .wsc .z-ct2 { font-size: 10px; font-weight: 500; fill: #4d5d6c; }
.wsc .z-stamp circle { fill: none; stroke: #10b981; stroke-width: 2; stroke-dasharray: 4 3; } .wsc .z-stamp path { fill: none; stroke: #059669; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wsc .z-stamp { opacity: 0; } .wsc .z-cert.z-show .z-stamp { animation: wsc-stamp .6s .25s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes wsc-stamp { from { opacity: 0; transform: translate(284px, 36px) scale(2.2) rotate(-30deg); } to { opacity: 1; transform: translate(284px, 36px) scale(1) rotate(-12deg); } }
.wsc .z-lb { fill: #fde8e8; stroke: #f5b5b5; stroke-width: 1.5; filter: drop-shadow(0 10px 14px rgba(239,68,68,.25)); }
.wsc .z-lt1 { font-size: 12px; font-weight: 800; fill: #c81e1e; text-anchor: middle; } .wsc .z-lt2 { font-size: 10px; font-weight: 500; fill: #4d5d6c; text-anchor: middle; }
.wsc .wsc-svg.z-shake { animation: wsc-shake .45s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes wsc-shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* ---------- 03 Smart Buddy ---------- */
.wsc .z-mc .z-lamp { fill: #10b981; }
.wsc .z-mc.z-stop .z-lamp { fill: #ef4444; } .wsc .z-mc.z-run .z-lamp { fill: #10b981; }
.wsc .z-mc:not(.z-stop) .z-spin { animation: wsc-spin .7s ease-in-out infinite alternate; }
.wsc .z-mc.z-stop .z-mw { fill: #2a1416; }
.wsc .z-ring circle { fill: none; stroke: #ef4444; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.wsc .z-mc.z-stop .z-ring circle { animation: wsc-rip 1.4s ease-out infinite; } .wsc .z-mc.z-stop .z-ring .z-d2 { animation-delay: .7s; }
.wsc .z-bub { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-bub rect { fill: #ef4444; } .wsc .z-bub text { font-size: 10.5px; font-weight: 800; fill: #fff; text-anchor: middle; }
.wsc .z-bub.z-ok rect { fill: #10b981; }
.wsc .z-mc.z-stop .z-bub:not(.z-ok), .wsc .z-mc.z-run .z-bub.z-ok { opacity: 1; transform: none; }
.wsc .z-sig { opacity: 0; transition: opacity .3s; } .wsc .z-sig.z-on { opacity: 1; }
.wsc .z-sig .z-pk circle { fill: #3b82f6; filter: drop-shadow(0 0 3px rgba(59,130,246,.8)); }
.wsc .z-pf { fill: #10212f; filter: drop-shadow(0 16px 18px rgba(16,33,47,.3)); } .wsc .z-ps { fill: #f8fafc; } .wsc .z-notch { fill: #2a3644; }
.wsc .z-pt { font-size: 10px; font-weight: 800; fill: #10212f; } .wsc .z-pled { fill: #3b82f6; animation: wsc-blink 1s steps(2) infinite; }
.wsc .z-nt { opacity: 0; transform: translateX(26px); transition: opacity .4s, transform .6s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-nt.z-on { opacity: 1; transform: none; }
.wsc .z-nb { fill: #fff; stroke: #e3e9f0; stroke-width: 1; filter: drop-shadow(0 4px 6px rgba(16,33,47,.08)); transition: fill .3s, stroke .3s; }
.wsc .z-nt.z-acked .z-nb { fill: #ecfaf3; stroke: #a7e3c6; }
.wsc .z-nr { font-size: 8px; font-weight: 800; fill: #fff; } .wsc .z-nm { font-size: 8.4px; font-weight: 600; fill: #10212f; }
.wsc .z-na { font-size: 7.6px; font-weight: 800; fill: #059669; text-anchor: end; opacity: 0; transition: opacity .3s; } .wsc .z-nt.z-acked .z-na { opacity: 1; }
.wsc .z-ack { opacity: 0; transform-box: fill-box; transform-origin: center; } .wsc .z-ack circle { fill: #10b981; } .wsc .z-ack path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wsc .z-nt.z-acked .z-ack { animation: wsc-pop .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.wsc .z-ban { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.wsc .z-ban.z-on { opacity: 1; transform: none; } .wsc .z-ban rect { fill: #10b981; } .wsc .z-ban text { font-size: 8.6px; font-weight: 800; fill: #fff; text-anchor: middle; }

@media (prefers-reduced-motion: reduce) {
  .wsc, .wsc * { animation: none !important; transition: none !important; }
  .wsc .z-st.z-done .z-ok, .wsc .z-nt.z-acked .z-ack, .wsc .z-cert.z-show .z-stamp { opacity: 1; }
}

/* ===== Brand palette pass: navy line-art + one orange accent, green only for "ok" ===== */
.wsc, .wsc-trace, .wsc-buddy { --acc: 247,134,30; }
.wsc { background: radial-gradient(110% 70% at 100% 0%, #fff1e2 0%, rgba(255,241,226,0) 60%), radial-gradient(rgba(16,33,47,.05) 1px, transparent 1.3px) 0 0 / 16px 16px, #fff;
  box-shadow: 0 30px 50px -36px rgba(16,33,47,.35), 0 0 0 1px #ece6de; }
.wsc-n { background: #10212f; color: #fff; filter: none; }
.wsc-led { background: #f7861e; }
.wsc .z-sh { fill: rgba(16,33,47,.07); }
.wsc .z-floor { stroke: #10212f; stroke-opacity: .18; }
.wsc .z-mb { fill: #fff; stroke: #10212f; stroke-width: 1.6; }
.wsc .z-mw { fill: #10212f; }
.wsc .z-mp { fill: #fff3e6; stroke: #10212f; stroke-width: 1.2; }
.wsc .z-tool { fill: #fff; stroke: #10212f; stroke-width: 1; } .wsc .z-bit { fill: #f7861e; } .wsc .z-bed { fill: #f7861e; }
.wsc .z-ml, .wsc .z-sl { fill: #10212f; }
.wsc .z-wire { stroke: #10212f; stroke-opacity: .22; }
.wsc .z-lamp { fill: #f7861e; } .wsc .z-on .z-lamp { fill: #16a34a; }
.wsc .z-on .z-mw { fill: #10212f; }
.wsc .z-m.z-on .z-mb { stroke: #10212f; }
.wsc .z-hub-c { stroke: #f7861e; }
.wsc .z-tag rect { fill: #fff3e6; stroke: #f7861e; } .wsc .z-tag text { fill: #c25e00; }
.wsc .z-chip rect { fill: #10212f; } .wsc .z-chip text { fill: #ffb867; }
.wsc .z-led { fill: #f7861e; }
/* conveyor */
.wsc .z-post { fill: #10212f; fill-opacity: .85; } .wsc .z-top { fill: #10212f; } .wsc .z-eye { fill: #f7861e; }
.wsc .z-scan { fill: rgba(247,134,30,.16); } @keyframes wsc-scan { to { fill: rgba(247,134,30,.3); } }
.wsc .z-belt { fill: #10212f; } .wsc .z-tread { stroke: #f7861e; stroke-opacity: .55; }
.wsc .z-roll { fill: #fff; stroke: #10212f; stroke-width: 1.4; } .wsc .z-spoke { stroke: #10212f; }
.wsc .z-st .z-ok circle { fill: #16a34a; }
.wsc .z-st.z-done .z-sl { fill: #10212f; }
.wsc .z-cb { fill: #fff; stroke: #10212f; stroke-opacity: .15; filter: drop-shadow(0 12px 16px rgba(16,33,47,.18)); }
.wsc .z-ct1 { fill: #10212f; } .wsc .z-ct2 { fill: #5b6b7c; }
.wsc .z-stamp circle { stroke: #f7861e; } .wsc .z-stamp path { stroke: #16a34a; }
/* buddy */
.wsc .z-mc .z-lamp { fill: #16a34a; } .wsc .z-mc.z-stop .z-lamp { fill: #e5484d; }
.wsc .z-mc.z-stop .z-mw { fill: #10212f; }
.wsc .z-sig .z-pk circle { fill: #f7861e; filter: drop-shadow(0 0 3px rgba(247,134,30,.8)); }
.wsc .z-pf { fill: #10212f; } .wsc .z-ps { fill: #fff; } .wsc .z-pled { fill: #f7861e; }
.wsc .z-nb { fill: #fff8f0; stroke: #f3dcc2; }
.wsc .z-nt.z-acked .z-nb { fill: #fff; stroke: #e3e9f0; }
.wsc .z-ack circle { fill: #16a34a; } .wsc .z-na { fill: #16a34a; }
.wsc .z-ban rect { fill: #10212f; } .wsc .z-ban text { fill: #ffb867; }
.wsc .z-bub.z-ok rect { fill: #10212f; }
/* footers */
.wsc-ft { background: #10212f; box-shadow: none; }
.wsc-ft p { color: #a9b8c9; } .wsc-ft b { color: #fff; } .wsc-ft .z-r b, .wsc-pulse .wsc-ft .z-g { color: #ffb867; }
.wsc-pulse .wsc-ft .z-v { color: #ffb867; }
.wsc-ft .z-ok { color: #4ade80; } .wsc-ft .z-bad { color: #ff8a8a; }
.wsc-bar { background: rgba(255,255,255,.14); }

/* ===== Light & clean pass: no dark fills anywhere; slate lines, white/soft-grey fills, orange accent, green = ok, red = problem ===== */
.wsc-n { background: #fff1e2; color: #c25e00; }
.wsc .z-mb { fill: #fff; stroke: #94a3b8; stroke-width: 1.5; }
.wsc .z-mw, .wsc .z-on .z-mw, .wsc .z-mc.z-stop .z-mw { fill: #f1f5f9; stroke: #cbd5e1; stroke-width: 1; }
.wsc .z-mp { fill: #fff7ee; stroke: #f3c99b; stroke-width: 1; }
.wsc .z-tool { fill: #e2e8f0; stroke: #94a3b8; }
.wsc .z-ml, .wsc .z-sl, .wsc .z-st.z-done .z-sl { fill: #475569; }
.wsc .z-floor { stroke: #cbd5e1; stroke-opacity: 1; }
.wsc .z-wire { stroke: #cbd5e1; stroke-opacity: 1; }
.wsc .z-chip rect { fill: #f7861e; } .wsc .z-chip text { fill: #fff; }
/* conveyor */
.wsc .z-post { fill: #cbd5e1; fill-opacity: 1; } .wsc .z-top { fill: #94a3b8; } .wsc .z-st.z-bad .z-top { fill: #ef4444; }
.wsc .z-belt { fill: #e2e8f0; stroke: #cbd5e1; stroke-width: 1; } .wsc .z-tread { stroke: #94a3b8; stroke-opacity: 1; }
.wsc .z-roll { fill: #fff; stroke: #94a3b8; } .wsc .z-spoke { stroke: #94a3b8; }
.wsc .z-cb { fill: #fff; stroke: #bbf7d0; stroke-opacity: 1; filter: drop-shadow(0 10px 14px rgba(15,23,42,.08)); }
.wsc .z-ct1 { fill: #15803d; } .wsc .z-ct2 { fill: #64748b; }
.wsc .z-lb { fill: #fff5f5; stroke: #fecaca; }
/* buddy */
.wsc .z-bub rect { fill: #fdecec; stroke: #fca5a5; stroke-width: 1; } .wsc .z-bub text { fill: #c81e1e; }
.wsc .z-bub.z-ok rect { fill: #ecfdf3; stroke: #86efac; } .wsc .z-bub.z-ok text { fill: #15803d; }
.wsc .z-pf { fill: #fff; stroke: #cbd5e1; stroke-width: 2; filter: drop-shadow(0 14px 18px rgba(15,23,42,.12)); }
.wsc .z-ps { fill: #f8fafc; } .wsc .z-notch { fill: #e2e8f0; }
.wsc .z-pt { fill: #334155; }
.wsc .z-nb { fill: #fff; stroke: #e2e8f0; filter: none; } .wsc .z-nt.z-acked .z-nb { fill: #f0fdf4; stroke: #bbf7d0; }
.wsc .z-nm { fill: #334155; transition: opacity .3s; } .wsc .z-nt.z-acked .z-nm { opacity: 0; }
.wsc .z-na { fill: #15803d; text-anchor: start; font-size: 8.6px; }
.wsc .z-ban rect { fill: #ecfdf3; stroke: #86efac; stroke-width: 1; } .wsc .z-ban text { fill: #15803d; }
/* footers: light */
.wsc-ft { background: #f8fafc; box-shadow: inset 0 0 0 1px #e2e8f0; }
.wsc-ft p { color: #64748b; } .wsc-ft b { color: #334155; }
.wsc-ft .z-r b, .wsc-pulse .wsc-ft .z-v { color: #e56f06; } .wsc-pulse .wsc-ft .z-g { color: #15803d; }
.wsc-ft .z-ok { color: #15803d; } .wsc-ft .z-bad { color: #dc2626; }
.wsc-bar { background: #e2e8f0; }
.wsc .z-m.z-on .z-mb { stroke: #86efac; stroke-width: 1.8; }
.wsc .z-pis { fill: #f7861e; }

/* ===== Brand-only pass: Yantra orange + logo greys. No green / navy / blue.
   orange #f7861e = running / ok, light orange = soft fills, burnt orange #c2410c = problem, greys = structure ===== */
.wsc { box-shadow: 0 30px 50px -36px rgba(88,89,91,.35), 0 0 0 1px #ede7e0; }
.wsc .z-lamp { fill: #b8bcc2; } .wsc .z-on .z-lamp, .wsc .z-mc .z-lamp, .wsc .z-mc.z-run .z-lamp { fill: #f7861e; }
.wsc .z-mc.z-stop .z-lamp { fill: #c2410c; }
.wsc .z-m.z-on .z-mb { stroke: #f7861e; stroke-width: 1.8; }
.wsc .z-mb { stroke: #a3a7ad; } .wsc .z-tool { fill: #eceef0; stroke: #a3a7ad; }
.wsc .z-mw, .wsc .z-on .z-mw, .wsc .z-mc.z-stop .z-mw { fill: #f5f5f4; stroke: #d6d3d1; }
.wsc .z-ml, .wsc .z-sl, .wsc .z-st.z-done .z-sl, .wsc .z-pt { fill: #58595b; }
.wsc .z-tag rect { fill: #f5f5f4; stroke: #b8bcc2; } .wsc .z-tag text { fill: #6b6d70; }
/* conveyor */
.wsc .z-post { fill: #d6d3d1; } .wsc .z-top { fill: #a3a7ad; } .wsc .z-belt { fill: #eceae7; stroke: #d6d3d1; }
.wsc .z-tread, .wsc .z-roll, .wsc .z-spoke { stroke: #a3a7ad; }
.wsc .z-st .z-ok circle { fill: #f7861e; }
.wsc .z-st .z-no circle, .wsc .z-st.z-bad .z-top { fill: #c2410c; } .wsc .z-st.z-bad .z-eye { fill: #c2410c; }
.wsc .z-cb { stroke: #fbd3a8; filter: drop-shadow(0 10px 14px rgba(247,134,30,.16)); }
.wsc .z-ct1 { fill: #c25e00; } .wsc .z-ct2 { fill: #6b6d70; }
.wsc .z-stamp circle { stroke: #f7861e; } .wsc .z-stamp path { stroke: #f7861e; }
.wsc .z-lb { fill: #fff4ed; stroke: #f5b48a; } .wsc .z-lt1 { fill: #c2410c; } .wsc .z-lt2 { fill: #6b6d70; }
/* buddy */
.wsc .z-ring circle { stroke: #c2410c; }
.wsc .z-bub rect { fill: #fff4ed; stroke: #f5b48a; } .wsc .z-bub text { fill: #c2410c; }
.wsc .z-bub.z-ok rect { fill: #fff1e2; stroke: #f7861e; } .wsc .z-bub.z-ok text { fill: #c25e00; }
.wsc .z-pf { stroke: #d6d3d1; } .wsc .z-notch { fill: #e7e5e4; }
.wsc .z-nb { stroke: #ece6de; } .wsc .z-nt.z-acked .z-nb { fill: #fff7ee; stroke: #fbd3a8; }
.wsc .z-nm { fill: #58595b; }
.wsc .z-ack circle { fill: #f7861e; } .wsc .z-na { fill: #c25e00; }
.wsc .z-ban rect { fill: #fff1e2; stroke: #f7861e; } .wsc .z-ban text { fill: #c25e00; }
/* footers */
.wsc-ft { background: #fafaf9; box-shadow: inset 0 0 0 1px #ece6de; }
.wsc-ft p { color: #6b6d70; } .wsc-ft b { color: #58595b; }
.wsc-ft .z-r b, .wsc-pulse .wsc-ft .z-v, .wsc-pulse .wsc-ft .z-g, .wsc-ft .z-ok { color: #e56f06; }
.wsc-ft .z-bad { color: #c2410c; }
.wsc-bar { background: #eceae7; }

/* ===== Monochrome pass: black / white / grey structure, orange only as a small accent
   (hub, the moving part, the OEE bar, the "problem" moment). ===== */
.wsc { background: radial-gradient(rgba(0,0,0,.045) 1px, transparent 1.3px) 0 0 / 16px 16px, #fff;
  box-shadow: 0 24px 44px -34px rgba(0,0,0,.28), 0 0 0 1px #e8e8e8; }
.wsc:hover { box-shadow: 0 34px 56px -34px rgba(0,0,0,.35), 0 0 0 1px #dcdcdc; }
.wsc-hd b { color: #111; }
.wsc-n { background: #f2f2f2; color: #111; }
.wsc-led { background: #f7861e; }
/* drawing */
.wsc .z-sh { fill: rgba(0,0,0,.05); }
.wsc .z-floor, .wsc .z-wire { stroke: #d4d4d4; }
.wsc .z-mb, .wsc .z-m.z-on .z-mb { fill: #fff; stroke: #1a1a1a; stroke-width: 1.5; }
.wsc .z-mw, .wsc .z-on .z-mw, .wsc .z-mc.z-stop .z-mw { fill: #f2f2f2; stroke: #d4d4d4; }
.wsc .z-mp { fill: #f7f7f7; stroke: #1a1a1a; stroke-width: 1; }
.wsc .z-tool { fill: #fff; stroke: #1a1a1a; } .wsc .z-bit, .wsc .z-bed, .wsc .z-pis { fill: #6b6b6b; }
.wsc .z-ml, .wsc .z-sl, .wsc .z-st.z-done .z-sl, .wsc .z-pt { fill: #3a3a3a; }
.wsc .z-lamp { fill: #c8c8c8; } .wsc .z-on .z-lamp, .wsc .z-mc .z-lamp, .wsc .z-mc.z-run .z-lamp { fill: #111; }
.wsc .z-led { fill: #6b6b6b; }
.wsc .z-pk circle { fill: #8a8a8a; filter: none; }
.wsc .z-tag rect { fill: #fff; stroke: #c8c8c8; } .wsc .z-tag text { fill: #6b6b6b; }
.wsc .z-chip rect { fill: #111; } .wsc .z-chip text { fill: #fff; }
.wsc .z-beam { stroke: #f7861e; } .wsc .z-spark { fill: #f7861e; }
/* conveyor */
.wsc .z-post { fill: #d4d4d4; } .wsc .z-top { fill: #1a1a1a; } .wsc .z-eye { fill: #8a8a8a; }
.wsc .z-scan { fill: rgba(0,0,0,.06); } @keyframes wsc-scan { to { fill: rgba(0,0,0,.11); } }
.wsc .z-belt { fill: #f2f2f2; stroke: #d4d4d4; } .wsc .z-tread, .wsc .z-roll, .wsc .z-spoke { stroke: #9a9a9a; } .wsc .z-roll { fill: #fff; }
.wsc .z-st .z-ok circle { fill: #111; }
.wsc .z-st .z-no circle, .wsc .z-st.z-bad .z-top, .wsc .z-st.z-bad .z-eye { fill: #f7861e; }
.wsc .z-pc { fill: #f7861e; filter: drop-shadow(0 4px 5px rgba(0,0,0,.18)); }
.wsc .z-cb { fill: #fff; stroke: #e0e0e0; filter: drop-shadow(0 10px 14px rgba(0,0,0,.10)); }
.wsc .z-ct1 { fill: #111; } .wsc .z-ct2 { fill: #6b6b6b; }
.wsc .z-stamp circle { stroke: #111; } .wsc .z-stamp path { stroke: #111; }
.wsc .z-lb { fill: #fff; stroke: #f7861e; } .wsc .z-lt1 { fill: #111; } .wsc .z-lt2 { fill: #6b6b6b; }
/* buddy */
.wsc .z-mc.z-stop .z-lamp { fill: #f7861e; } .wsc .z-ring circle { stroke: #f7861e; }
.wsc .z-bub rect { fill: #fff; stroke: #f7861e; } .wsc .z-bub text { fill: #111; }
.wsc .z-bub.z-ok rect { fill: #fff; stroke: #1a1a1a; } .wsc .z-bub.z-ok text { fill: #111; }
.wsc .z-sig .z-pk circle { fill: #f7861e; }
.wsc .z-pf { fill: #fff; stroke: #1a1a1a; stroke-width: 1.5; filter: drop-shadow(0 12px 16px rgba(0,0,0,.12)); }
.wsc .z-ps { fill: #fafafa; } .wsc .z-notch { fill: #e0e0e0; } .wsc .z-pled { fill: #8a8a8a; }
.wsc .z-nb, .wsc .z-nt.z-acked .z-nb { fill: #fff; stroke: #e0e0e0; }
.wsc .z-nm { fill: #3a3a3a; }
.wsc .z-ack circle { fill: #111; } .wsc .z-na { fill: #111; }
.wsc .z-ban rect { fill: #f2f2f2; stroke: #d4d4d4; } .wsc .z-ban text { fill: #111; }
/* footers */
.wsc-ft { background: #fafafa; box-shadow: inset 0 0 0 1px #ececec; }
.wsc-ft p { color: #6b6b6b; } .wsc-ft b, .wsc-ft .z-r b, .wsc-pulse .wsc-ft .z-g, .wsc-ft .z-ok { color: #111; }
.wsc-pulse .wsc-ft .z-v, .wsc-ft .z-bad { color: #e56f06; }
.wsc-pulse .wsc-ft .z-g { font-weight: 600; }
.wsc-bar { background: #ececec; } .wsc-bar i { background: #f7861e; }

/* overlay cards: calm shadow, text inside the box */
.wsc .z-lb, .wsc .z-cb { filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)); }
.wsc .z-lt2, .wsc .z-ct2 { font-size: 9.4px; }
.wsc .z-ct1 { font-size: 11.5px; }

/* alignment pass: no tilt (cards stay square), breathing room above the footer, wire end points */
.wsc, .wsc:hover { transform: none !important; }
.wsc-svg { margin: 4px 0 12px; }
.wsc .z-end { fill: #fff; stroke: #8a8a8a; stroke-width: 1.5; }

/* ===== Real product photos + realistic phone ===== */
.wsc .z-img { transition: filter .7s, opacity .7s; }
.wsc .z-m:not(.z-on) .z-img { filter: grayscale(1) contrast(.9); opacity: .55; }
.wsc .z-mc.z-stop .z-img { filter: grayscale(.85); opacity: .7; }
.wsc .z-glow { fill: rgba(247,134,30,0); transition: fill .6s; }
.wsc .z-on .z-glow, .wsc .z-mc:not(.z-stop) .z-glow { fill: rgba(247,134,30,.22); animation: wsc-glow 2.4s ease-in-out infinite; }
@keyframes wsc-glow { 50% { fill: rgba(247,134,30,.08); } }
.wsc .z-pole { stroke: #8a8a8a; stroke-width: 1.6; }
.wsc .z-lamp { stroke: #fff; stroke-width: 1.5; }
.wsc .z-on .z-lamp { fill: #f7861e; } .wsc .z-mc .z-lamp, .wsc .z-mc.z-run .z-lamp { fill: #f7861e; }
.wsc .z-mc.z-stop .z-lamp { fill: #c2410c; } .wsc .z-ring circle { stroke: #c2410c; }
.wsc .z-on .z-beacon .z-lamp { filter: drop-shadow(0 0 4px rgba(247,134,30,.8)); }
/* phone */
.wsc .z-pf { fill: #1c1c1e; stroke: #3a3a3c; stroke-width: 1; filter: drop-shadow(0 16px 20px rgba(0,0,0,.22)); }
.wsc .z-key { fill: #3a3a3c; }
.wsc .z-ps { fill: #f2f2f7; stroke: none; }
.wsc .z-island { fill: #000; }
.wsc .z-sb { font-size: 8px; font-weight: 700; fill: #111; }
.wsc .z-sbi rect { fill: #111; } .wsc .z-sbi .z-bat { fill: none; stroke: #111; stroke-width: 1; }
.wsc .z-pt { font-size: 9.5px; font-weight: 800; fill: #111; }
.wsc .z-nb, .wsc .z-nt.z-acked .z-nb { fill: #fff; stroke: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.08)); }
.wsc .z-nr { font-size: 8px; font-weight: 800; fill: #111; } .wsc .z-now { font-size: 7px; font-weight: 600; fill: #8e8e93; text-anchor: end; }
.wsc .z-nm { font-size: 8px; fill: #3a3a3c; } .wsc .z-na { font-size: 8px; font-weight: 700; fill: #c25e00; }
.wsc .z-nt.z-acked .z-now { opacity: 0; }
.wsc .z-ack circle { fill: #f7861e; }
.wsc .z-ban rect { fill: #fff; stroke: #f7861e; } .wsc .z-ban text { font-size: 8px; font-weight: 800; fill: #111; text-anchor: middle; }
.wsc .z-home { fill: #111; }

/* ===== Real hardware look: gateway hub, steel conveyor ===== */
.wsc .z-hsh { fill: rgba(0,0,0,.12); }
.wsc .z-hub .z-rip { stroke: #f7861e; }
.wsc .z-hub image { filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)); }
.wsc .z-st.z-bad .z-beam2 { fill: #f7861e; stroke: #c2410c; }
.wsc .z-st.z-bad .z-lens { fill: #c2410c; }
.wsc .z-st.z-scan-on .z-lens { filter: drop-shadow(0 0 3px rgba(247,134,30,.9)); }
.wsc .z-scan { fill: rgba(247,134,30,.10); } @keyframes wsc-scan { to { fill: rgba(247,134,30,.2); } }
.wsc .z-spoke { stroke: #8a8a8a; stroke-width: 1.2; }
.wsc .z-pbody { filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); }

/* ===== Floor / surface: neutral contact shadows, no orange glow, no wide grey band ===== */
.wsc-pulse .z-sh, .wsc-buddy .z-sh { display: none; }
.wsc-trace .z-sh { fill: rgba(0,0,0,.07); filter: blur(3px); }
.wsc .z-floor { stroke: #e6e6e6; stroke-width: 1.2; }
.wsc .z-glow, .wsc .z-on .z-glow, .wsc .z-mc:not(.z-stop) .z-glow { fill: rgba(0,0,0,.16); filter: blur(2.5px); animation: none; }
.wsc .z-m:not(.z-on) .z-glow { fill: rgba(0,0,0,.09); }
.wsc .z-hsh { fill: rgba(0,0,0,.14); filter: blur(2px); }