/* The data pipeline is independent of the other slides and shares their viewer. */
#data-flow{
  background:radial-gradient(ellipse at 50% 80%,#1a22604a,transparent 70%),var(--bg)
}
#data-flow .section-heading{margin-bottom:22px}
#data-flow .data-intro{font-size:22px;line-height:1.5;color:var(--muted);max-width:1100px}
#data-flow .data-pipeline{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px;
  list-style:none;margin:42px 0 0;padding:0
}
#data-flow .data-stage{
  --data-accent:#38bdf8;position:relative;min-width:0;min-height:370px;
  padding:30px 26px;border:1px solid #38bdf840;border-radius:18px;
  background:linear-gradient(145deg,#111936,#0b1025)
}
#data-flow .data-stage-parsing{--data-accent:#a5adff;border-color:#818cf866;background:linear-gradient(145deg,#1a2146,#10142e)}
#data-flow .data-stage-output{--data-accent:#78d9e8}
#data-flow .data-stage:not(:last-child)::after{
  content:"→";position:absolute;top:calc(50% - 27px);right:-43px;
  width:32px;text-align:center;font:400 36px/1.5 var(--mono);color:#7c9bc9
}
#data-flow .data-stage-heading{display:flex;align-items:center;gap:15px}
#data-flow .data-step-number{
  display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;
  color:var(--data-accent);border:1px solid #ffffff24;border-radius:12px;
  font:500 19px/1 var(--mono);background:#05060f66
}
#data-flow .data-stage h3{font-size:30px;line-height:1.2;letter-spacing:-.035em}
#data-flow .data-stage-caption{font-size:17px;line-height:1.45;color:var(--muted);margin-top:20px;min-height:50px}
#data-flow .data-tiles{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  list-style:none;padding:0;margin:24px 0 0
}
#data-flow .data-tiles li{
  display:flex;flex-direction:column;justify-content:center;min-height:75px;
  padding:12px 14px;border:1px solid #ffffff0e;border-radius:10px;background:#05060f6b
}
#data-flow .data-tiles strong{font-size:20px;line-height:1.2;font-weight:600}
#data-flow .data-tiles span{font-size:14px;line-height:1.4;color:var(--muted);margin-top:5px}
#data-flow .data-outputs li{border-left:2px solid #78d9e866}
#data-flow .data-parsing{list-style:none;padding:0;margin:24px 0 20px;display:grid;gap:15px}
#data-flow .data-parsing li{position:relative;padding-left:21px;font-size:18px;line-height:1.35;color:#d9def6}
#data-flow .data-parsing li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--data-accent);border-radius:50%}
#data-flow .data-format{
  display:flex;align-items:center;gap:14px;min-height:66px;padding:12px 16px;
  border:1px solid #818cf866;border-radius:10px;background:#818cf812
}
#data-flow .data-format strong{font-size:19px;font-weight:600}
#data-flow .data-format-mark{display:grid;gap:4px;flex:none;width:28px}
#data-flow .data-format-mark i{display:block;height:5px;border-left:5px solid #a5adff;border-right:18px solid #a5adff70;border-radius:1px}

/* Document flow remains readable when the viewer is unavailable. */
@media screen and (max-width:800px){
  html:not(.deck-mode) #data-flow .data-pipeline{grid-template-columns:1fr;gap:42px}
  html:not(.deck-mode) #data-flow .data-stage{min-height:0}
  html:not(.deck-mode) #data-flow .data-stage:not(:last-child)::after{top:auto;bottom:-42px;left:calc(50% - 16px);right:auto;transform:rotate(90deg)}
}
@media screen{
  .deck-mode #data-flow .section-heading{margin-bottom:22px}
  .deck-mode #data-flow .data-pipeline{margin-top:42px}
  /* Portrait: stack the same three steps; the cards use width for their contents. */
  .deck-portrait #data-flow .section-heading{margin-bottom:18px}
  .deck-portrait #data-flow .data-intro{font-size:23px;line-height:1.4}
  .deck-portrait #data-flow .data-pipeline{grid-template-columns:1fr;gap:36px;margin-top:26px}
  .deck-portrait #data-flow .data-stage{min-height:0;padding:20px 22px;border-radius:15px}
  .deck-portrait #data-flow .data-stage-heading{gap:14px}
  .deck-portrait #data-flow .data-step-number{width:42px;height:42px;font-size:20px;border-radius:10px}
  .deck-portrait #data-flow .data-stage h3{font-size:30px}
  .deck-portrait #data-flow .data-stage-caption{font-size:22px;line-height:1.3;min-height:0;margin-top:9px}
  .deck-portrait #data-flow .data-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
  .deck-portrait #data-flow .data-tiles li{min-height:70px;padding:10px 9px;border-radius:8px}
  .deck-portrait #data-flow .data-tiles strong{font-size:22px}
  .deck-portrait #data-flow .data-tiles span{font-size:18px;letter-spacing:-.2px}
  .deck-portrait #data-flow .data-sources li:first-child{grid-column:span 2}
  .deck-portrait #data-flow .data-sources{grid-template-columns:1.3fr 1fr 1fr 1fr 1.15fr}
  .deck-portrait #data-flow .data-parsing{display:flex;gap:23px;margin:15px 0}
  .deck-portrait #data-flow .data-parsing li{font-size:22px;padding-left:16px}
  .deck-portrait #data-flow .data-format{min-height:50px;padding:9px 14px}
  .deck-portrait #data-flow .data-format strong{font-size:22px}
  .deck-portrait #data-flow .data-stage:not(:last-child)::after{
    top:auto;bottom:-36px;left:calc(50% - 16px);right:auto;
    font-size:28px;line-height:34px;transform:rotate(90deg)
  }
  /* Shallow viewports: keep the horizontal reading order and compact spacing. */
  .deck-compact #data-flow .section-heading{margin-bottom:8px}
  .deck-compact #data-flow .data-intro{font-size:17px;line-height:1.3}
  .deck-compact #data-flow .data-pipeline{gap:32px;margin-top:18px}
  .deck-compact #data-flow .data-stage{min-height:224px;padding:16px;border-radius:12px}
  .deck-compact #data-flow .data-stage-heading{gap:10px}
  .deck-compact #data-flow .data-step-number{width:34px;height:34px;font-size:15px;border-radius:8px}
  .deck-compact #data-flow .data-stage h3{font-size:24px}
  .deck-compact #data-flow .data-stage-caption{font-size:15px;line-height:1.3;margin-top:10px;min-height:39px}
  .deck-compact #data-flow .data-tiles{gap:7px;margin-top:12px}
  .deck-compact #data-flow .data-tiles li{min-height:46px;padding:7px 9px;border-radius:7px}
  .deck-compact #data-flow .data-tiles strong{font-size:17px}
  .deck-compact #data-flow .data-tiles span{font-size:12px;margin-top:2px}
  .deck-compact #data-flow .data-parsing{gap:10px;margin:12px 0 12px}
  .deck-compact #data-flow .data-parsing li{font-size:16px;padding-left:16px}
  .deck-compact #data-flow .data-format{gap:10px;min-height:41px;padding:8px 10px;border-radius:7px}
  .deck-compact #data-flow .data-format strong{font-size:16px}
  .deck-compact #data-flow .data-format-mark{width:22px;gap:3px}
  .deck-compact #data-flow .data-format-mark i{height:4px;border-left-width:4px;border-right-width:14px}
  .deck-compact #data-flow .data-stage:not(:last-child)::after{right:-29px;width:24px;top:calc(50% - 20px);font-size:26px}
}
@media print{
  #data-flow .data-pipeline{gap:28px;margin-top:26px}
  #data-flow .data-stage{min-height:0;padding:18px 14px}
  #data-flow .data-stage h3{font-size:23px}
  #data-flow .data-stage:not(:last-child)::after{right:-26px;width:24px;font-size:24px}
}