.workflow-map { position: relative; }
.cloud-frame { padding: 24px; border: 1px solid rgba(255,157,67,.34); background: linear-gradient(145deg,rgba(16,24,35,.96),rgba(4,13,23,.94)); box-shadow: inset 0 0 70px rgba(255,157,67,.035); clip-path: polygon(17px 0,100% 0,100% calc(100% - 17px),calc(100% - 17px) 100%,0 100%,0 17px); }
.cloud-title { display: flex; align-items: center; gap: 12px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.cloud-title > span { width: 49px; height: 36px; display: grid; place-items: center; color: #07111a; background: var(--orange); font: 900 13px var(--mono); }
.cloud-title div { display: flex; flex-direction: column; }
.cloud-title b { font: 800 11px var(--mono); letter-spacing: .1em; }
.cloud-title small { margin-top: 4px; color: var(--muted); font: 8px var(--mono); letter-spacing: .12em; }
.workflow-track { padding: 38px 0 12px; display: grid; grid-template-columns: 1fr 66px 1fr 66px 1.16fr 66px 1.16fr 66px 1fr; align-items: center; }
.flow-unit { min-height: 255px; padding: 20px; position: relative; border: 1px solid var(--line); background: rgba(7,21,35,.92); transition: .3s; clip-path: polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); }
.flow-unit:hover { border-color: var(--cyan); transform: translateY(-5px); }
.flow-unit.ec2 { border-color: rgba(255,157,67,.36); box-shadow: inset 0 3px 0 rgba(255,157,67,.5); }
.flow-index { position: absolute; right: 13px; top: 12px; color: #38536a; font: 9px var(--mono); }
.instance-tag { margin: -6px 0 15px; color: var(--orange); font: 800 8px var(--mono); letter-spacing: .1em; }
.flow-icon { width: 48px; height: 48px; margin: 14px 0 24px; display: grid; place-items: center; color: #05110f; border: 1px solid var(--cyan); background: var(--cyan); box-shadow: 0 0 22px rgba(66,245,212,.11); font: 900 11px var(--mono); }
.jenkins-flow .flow-icon { background: #e6f2f8; }
.web-flow .flow-icon { background: var(--green); }
.flow-unit h3 { margin-bottom: 10px; font-size: 15px; }
.flow-unit p { min-height: 54px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.flow-unit code { color: var(--cyan); font-size: 9px; }
.flow-unit > small { color: #4b687e; font: 800 8px var(--mono); letter-spacing: .08em; }
.flow-wire { text-align: center; }
.flow-wire b { display: block; min-height: 23px; color: var(--muted); font: 700 7px var(--mono); letter-spacing: .05em; }
.flow-wire i { height: 1px; display: block; position: relative; background: linear-gradient(90deg,var(--blue),var(--cyan)); }
.flow-wire i::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--cyan); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.flow-wire i::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 13px var(--cyan); animation: workflowFlow 2.2s linear infinite; }
.flow-wire.secure i { background: linear-gradient(90deg,var(--orange),var(--green)); }
.workflow-legend { padding: 14px 18px; display: flex; align-items: center; gap: 22px; border: 1px solid var(--line); border-top: 0; background: rgba(4,13,23,.91); color: var(--muted); font: 8px var(--mono); }
.workflow-legend span { display: flex; align-items: center; gap: 7px; }
.workflow-legend i { width: 8px; height: 8px; display: inline-block; }
.legend-source { background: var(--cyan); }
.legend-ec2 { background: var(--orange); }
.legend-data { border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--cyan); }
.workflow-legend strong { margin-left: auto; color: #668298; font-weight: 500; }
@keyframes workflowFlow { to { left: calc(100% - 7px); } }
@keyframes workflowFlowVertical { to { top: calc(100% - 7px); } }
@media (max-width: 1180px) {
  .workflow-track { grid-template-columns: 1fr 52px 1fr; }
  .workflow-track > * { margin-top: 28px; }
  .workflow-track > *:first-child, .workflow-track > *:nth-child(2), .workflow-track > *:nth-child(3) { margin-top: 0; }
  .workflow-legend { flex-wrap: wrap; }
  .workflow-legend strong { width: 100%; margin-left: 0; }
}
@media (max-width: 760px) {
  .workflow-track { grid-template-columns: 1fr; }
  .flow-wire { height: 62px; display: grid; place-items: center; }
  .flow-wire b { margin-top: 12px; }
  .flow-wire i { width: 1px; height: 30px; }
  .flow-wire i::after { right: -4px; top: auto; bottom: -1px; border-top: 7px solid var(--cyan); border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 0; }
  .flow-wire i::before { left: -3px; top: 0; animation: workflowFlowVertical 2s linear infinite; }
  .workflow-track > * { margin-top: 0; }
  .flow-unit { min-height: 220px; }
  .workflow-legend strong { line-height: 1.5; }
}
.footer-credit { text-align: right; }
.footer-credit h3 { margin: 5px 0; color: var(--text); font: 700 17px var(--mono); letter-spacing: .025em; }
.footer-credit h3:last-child { color: var(--cyan); font-size: 14px; }
@media (max-width: 650px) { .footer-credit { text-align: left; } }