/* Real chapter spacing supplies the scroll distance for the sticky workbench. */
.workflow-story.technology-story {
  --workflow-pin:calc(var(--header-height) + 16px);
  height:auto;
  min-height:0;
  padding-block:clamp(66px,9vw,122px) clamp(54px,7vw,92px);
  background:transparent;
  color:var(--ink);
  border-top:1px solid var(--line);
}
.workflow-intro {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:end;
  gap:clamp(26px,6vw,96px);
  margin-bottom:clamp(36px,5vw,68px);
}
.workflow-intro .eyebrow { margin-bottom:17px; }
.workflow-intro h2 {
  font-size:clamp(39px,4.6vw,66px);
  line-height:1.16;
  letter-spacing:-.045em;
}
.workflow-intro h2 span { display:block; }
.workflow-intro h2 span:last-child { color:var(--purple); }
html[lang=en] .workflow-intro h2 { font-size:clamp(37px,4.4vw,62px); }
.workflow-intro .tech-intro { max-width:36em; margin:0; color:var(--muted); font-size:17px; line-height:1.8; }
.workflow-example { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; margin-top:18px; }
.workflow-example span { color:var(--purple); font-size:11px; letter-spacing:.08em; }
.workflow-example strong { font-size:14px; font-weight:550; }
.workflow-scroll-hint { display:flex; align-items:center; gap:9px; margin-top:16px; color:var(--purple); font-size:13px; }
.workflow-scroll-hint span:first-child {
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border:1px solid #ad95c7;
  border-radius:50%;
}
.workflow-scrub {
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.37fr);
  align-items:start;
  gap:clamp(25px,4vw,56px);
}
.workflow-workbench {
  position:sticky;
  top:var(--workflow-pin);
  z-index:2;
  grid-column:2;
  grid-row:1;
  min-width:0;
  padding:16px;
  border:1px solid #d5c5e7;
  border-radius:22px;
  background:#fcf9ff;
  box-shadow:0 24px 60px #57357c14, 0 3px 8px #57357c0a;
}
.workflow-head, .workflow-status {
  display:flex;
  align-items:center;
  gap:12px;
  padding-inline:4px;
}
.workflow-head {
  justify-content:space-between;
  min-height:25px;
  margin-bottom:10px;
  color:var(--purple);
  font:600 11px/1.35 var(--sans);
  letter-spacing:.10em;
}
.workflow-method {
  flex:none;
  padding:3px 7px;
  border:1px solid #ddd0e9;
  border-radius:4px;
  font-size:10px;
  letter-spacing:0;
}
.workflow-stage {
  height:clamp(258px,45svh,386px);
  overflow:hidden;
  border:1px solid #e4d7ee;
  border-radius:12px;
  background:
    radial-gradient(circle,#8e67b527 .65px,transparent .9px) 2px 2px / 13px 13px,
    radial-gradient(ellipse at 28% 12%,#fdf8ff,#eee3f8 91%);
}
#workflow-canvas { display:block; width:100%; height:100%; }
.workflow-status { height:38px; color:var(--muted); font-size:12px; }
.workflow-status strong { color:var(--purple); font-size:13px; font-weight:650; white-space:nowrap; }
#workflow-operation { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#workflow-count { margin-inline-start:auto; flex:none; color:var(--purple); font-variant-numeric:tabular-nums; }
.workflow-timeline { height:2px; overflow:hidden; border-radius:2px; background:#e6d9f1; }
.workflow-timeline i { display:block; height:100%; transform:scaleX(0); transform-origin:left; background:#8c62b9; }
.workflow-workbench .flow-steps { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; margin-top:8px; }
.workflow-workbench .flow-step {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  height:52px;
  min-height:44px;
  padding:3px 2px;
  color:var(--muted);
  text-align:center;
  font-size:11px;
  line-height:1.2;
  background:transparent;
  border-radius:7px;
}
.workflow-workbench .flow-step span:first-child { color:var(--purple); font-variant-numeric:tabular-nums; }
.workflow-workbench .flow-step:hover { background:#eee5f8; }
.workflow-workbench .flow-step[aria-current] { background:#eaddf6; color:#4a306c; font-weight:650; }

.workflow-chapters { grid-column:1; grid-row:1; list-style:none; margin:0; padding:0 0 32px; min-width:0; }
.workflow-chapter {
  min-height:clamp(320px,48svh,388px);
  padding:25px 8px 35px 19px;
  border-top:1px solid #d7c7e7;
  border-inline-start:2px solid transparent;
}
.workflow-chapter[aria-current] { border-inline-start-color:#9976bb; }
.workflow-chapter-kicker { margin-bottom:9px; color:var(--purple); font-size:12px; font-weight:650; letter-spacing:.065em; }
.workflow-chapter h3 { margin:0; font-size:clamp(22px,2.05vw,31px); line-height:1.37; letter-spacing:-.03em; text-wrap:pretty; }
.workflow-chapter-body { margin-top:11px; color:var(--muted); font-size:15px; line-height:1.75; text-wrap:pretty; }
.workflow-specs { display:grid; gap:7px; margin:15px 0 0; }
.workflow-specs>div { display:grid; grid-template-columns:4.75em minmax(0,1fr); gap:9px; align-items:baseline; }
.workflow-specs dt { color:var(--purple); font-size:11px; font-weight:650; }
.workflow-specs dd { margin:0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.workflow-evidence {
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  min-height:48px;
  margin-top:15px;
  padding:3px 10px 3px 3px;
  border:1px solid #d9cbe6;
  border-radius:8px;
  background:#f9f4fdbf;
  color:#503970;
  text-align:start;
  font-size:12px;
  line-height:1.45;
}
.workflow-evidence:hover { border-color:#9976bb; background:#fcf9ff; }
.workflow-evidence img { width:55px; height:36px; flex:none; border-radius:4px; object-fit:cover; object-position:top; }
.workflow-evidence span:last-child { color:var(--purple); margin-inline-start:auto; }
.workflow-story .technology-boundary { margin-top:21px; text-align:start; color:var(--muted); font-size:13px; line-height:1.7; }
html:not(.js) .workflow-workbench { display:none; }

@media (max-width:850px) {
  .workflow-story.technology-story { --workflow-pin:calc(var(--header-height) + 7px); }
  .workflow-intro { grid-template-columns:1fr; gap:19px; }
  .workflow-intro h2 { font-size:clamp(37px,7vw,58px); }
  .workflow-intro .tech-intro { font-size:16px; }
  .workflow-scrub { display:block; }
  .workflow-chapters { padding-top:15px; }
  .workflow-chapter { min-height:0; padding-block:23px 30px; }
  .workflow-stage { height:clamp(205px,32svh,309px); }
  .workflow-workbench { padding:11px; border-radius:15px; box-shadow:0 15px 30px #57357c18; }
}
@media (max-width:600px) {
  .workflow-scrub { width:calc(100% - 24px); }
  .workflow-chapters { margin-inline:6px; }
  .workflow-stage { height:clamp(182px,28svh,248px); border-radius:9px; }
  .workflow-workbench { padding:8px; }
  .workflow-head { min-height:21px; margin-bottom:6px; font-size:9px; }
  .workflow-method { font-size:9px; }
  .workflow-status { gap:7px; height:30px; font-size:10px; }
  .workflow-status strong { font-size:11px; }
  .workflow-workbench .flow-steps { gap:2px; margin-top:4px; }
  .workflow-workbench .flow-step { height:44px; font-size:12px; }
  .workflow-workbench .flow-step span:last-child { position:absolute; width:1px; height:1px; padding:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
  .workflow-chapter { padding-inline:13px 3px; }
  .workflow-chapter h3 { font-size:23px; }
  .workflow-chapter-body { font-size:15px; }
}
@media (max-height:540px) {
  .workflow-stage { height:clamp(125px,32svh,178px); }
  .workflow-workbench { padding-block:6px; }
  .workflow-head { margin-bottom:4px; }
  .workflow-status { height:26px; }
  .workflow-workbench .flow-steps { margin-top:3px; }
  .workflow-workbench .flow-step { height:44px; }
}