/* ==========================================================================
   Edna case study: the approach chapters. The data flow diagram and the
   schema use the deck's clean pastel boxes; the pipelines are hand drawn
   with rough.js the way the deck sketched them, with hatched fills in
   yellow, pink, green and blue.
   ========================================================================== */

/* ---------- Hand-drawn boards (shapes and arrows come from sketch.js) ---------- */
.sk-board { position: relative; }
.sk-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.sk-svg path { vector-effect: non-scaling-stroke; }
.sk { position: relative; z-index: 1; display: inline-grid; place-items: center; text-align: center; padding: 13px 18px; font: 500 14px/1.25 var(--mono); color: var(--ink); white-space: nowrap; }
.sk-box { padding: 18px 16px; min-height: 74px; }
.sk-group { white-space: normal; line-height: 1.5; }
/* Without rough.js the same nodes get a plain hatched outline */
.no-rough .sk[data-sk] { --hatch: transparent; border: 1.5px solid var(--ink); border-radius: 12px; background: repeating-linear-gradient(-41deg, var(--hatch) 0 1px, transparent 1px 6px); }
.no-rough .sk[data-sk="ellipse"] { border-radius: 50%; }
.no-rough .sk[data-fill="yellow"] { --hatch: var(--sk-yellow); }
.no-rough .sk[data-fill="pink"] { --hatch: var(--sk-pink); }
.no-rough .sk[data-fill="green"] { --hatch: var(--sk-green); }
.no-rough .sk[data-fill="blue"] { --hatch: var(--sk-blue); }
.no-rough .sk[data-fill="cream"] { --hatch: var(--sk-cream); }

.captions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(28px, 4vw, 48px); counter-reset: cap; }
.captions-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.captions li { counter-increment: cap; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.captions li::before { content: "0" counter(cap); font: 500 11.5px var(--mono); color: var(--blue); }
.captions b { font-size: 16.5px; font-weight: 600; }
.captions span { font-size: 15px; color: var(--ink-2); }

/* ---------- Prompt pipeline ---------- */
.pipe { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1.45fr); align-items: center; gap: clamp(18px, 2.4vw, 34px); max-width: 1240px !important; padding: 10px 0; }
.pipe-cluster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "age sleeve brands" "weight pg fit" "gender pg budget" "region colour msg"; gap: 14px 10px; align-items: center; justify-items: center; }
.pipe-cluster .sk { font-size: 13px; padding: 12px 15px; }
.pipe-cluster .sk-box { width: 100%; min-height: 96px; font-size: 14.5px; }
.sk-msg { color: var(--grey); font-size: 12px !important; line-height: 1.35; }
.pipe > .sk-box { width: 100%; }
.pipe-looks, .pipe-results { display: grid; gap: 18px; justify-items: center; }
.sk-res { width: 100%; display: grid; grid-template-columns: repeat(3, 18px) 1fr; justify-content: stretch; justify-items: start; gap: 4px 8px; padding: 12px 14px 14px; text-align: left; white-space: normal; }
.sk-res p { grid-column: 1 / -1; font-size: 12px; }
.sk-res p + i { margin-top: 0; }
.sk-res i { width: 18px; height: 18px; border-radius: 50%; border: 1.3px solid var(--ink); background: repeating-linear-gradient(-41deg, var(--c) 0 1.3px, transparent 1.3px 3.6px); }
.sk-res i:nth-of-type(3n + 1) { rotate: 8deg; } .sk-res i:nth-of-type(3n + 2) { rotate: -6deg; }

/* ---------- The prompt lab ---------- */
.lab { margin-top: clamp(48px, 7vw, 90px); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); gap: clamp(22px, 3.4vw, 48px); align-items: start; }
.lab-note { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 13px; border-radius: 999px; font: 500 13px/1.2 var(--mono); color: var(--grey); background: #fff; box-shadow: inset 0 0 0 1.3px var(--grey-2); transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
.chip:hover { transform: translateY(-1px); }
.chip.on { color: var(--ink); background: repeating-linear-gradient(-41deg, rgba(226, 201, 85, 0.55) 0 1.3px, #fffbea 1.3px 5px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lab-q { display: grid; gap: 6px; margin-top: 22px; }
.lab-q span { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.lab-q select { width: 100%; padding: 12px 40px 12px 14px; border-radius: 12px; border: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2b32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; box-shadow: inset 0 0 0 1.3px var(--line); font-size: 15px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.lab-out { display: grid; gap: 14px; min-width: 0; }
.paper { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 44px rgba(27, 43, 50, 0.06); overflow: hidden; }
.paper-k { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--cream); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-ink); }
.paper-k em { font: 500 11.5px var(--mono); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--cream-ink); }
.prompt, .json { padding: 16px 18px 18px; font: 400 13px/1.7 var(--mono); color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.prompt { max-height: 380px; overflow: auto; scrollbar-width: thin; }
.prompt .pv { color: var(--ink); background: #fde58f; border-radius: 4px; padding: 0 3px; }
.prompt .pq { color: #fff; background: var(--green); border-radius: 4px; padding: 0 4px; }
.prompt .pt { color: var(--ink); background: #c7f0dd; border-radius: 4px; padding: 0 3px; }
.prompt .fresh { animation: fresh 1.2s var(--ease); }
@keyframes fresh { from { background: #b9d4ff; } }
.paper-json { background: #fbfcfd; }
.paper-json .paper-k { background: var(--blue-10); color: #1c3f8a; }
.paper-json .paper-k em { color: #1c3f8a; }
.json .j-k { color: var(--blue); }
.json .j-s { color: var(--green-d); }
.json .j-c { color: var(--grey); }

/* ---------- Trend pipeline ---------- */
.trend { display: grid; grid-template-columns: auto auto auto auto auto; grid-template-rows: repeat(5, auto); justify-content: space-between; align-items: center; column-gap: clamp(20px, 3.4vw, 56px); row-gap: 10px; max-width: 1180px !important; }
.trend > [data-sk-id="sh"] { grid-column: 1; grid-row: 1 / 6; }
.trend > [data-sk-id="gg"] { grid-column: 2; grid-row: 1 / 4; }
.trend-sites { display: contents; }
.trend-sites > .sk { grid-column: 3; justify-self: start; }
.trend-sites > .sk-group { display: none; }
.trend > [data-sk-id="scr"] { grid-column: 4; grid-row: 1 / 6; }
.trend-sum { grid-column: 5; grid-row: 1 / 6; display: grid; gap: 26px; justify-items: center; }
.sk-bert { white-space: normal; font-size: 13px; min-height: 0; }
.sk-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 290px; padding: 10px; }
.sk-tags .sk { font-size: 12.5px; padding: 10px 13px; }
.sk-tags .sk.is-new { animation: tagpop 0.7s var(--ease); }
@keyframes tagpop { from { transform: scale(0.6); opacity: 0; } }

.sumdemo { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.35fr) 64px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.sd-src, .sd-out { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.sd-text { padding: 18px 20px 20px; font: 400 clamp(17px, 1.5vw, 20px)/1.7 var(--serif); color: var(--ink-2); }
.sd-text span { border-radius: 4px; padding: 0 2px; transition: background 0.5s, color 0.5s; }
.sd-text span.is-hit { background: #c7f0dd; color: var(--ink); }
.sd-arrow { display: grid; place-items: center; }
.sd-arrow i { position: relative; width: 100%; height: 2px; background: var(--ink); }
.sd-arrow i::after { content: ""; position: absolute; right: -1px; top: -5px; width: 10px; height: 10px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.sd-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 18px 6px; min-height: 64px; }
.sd-tags li { padding: 8px 14px; border-radius: 999px; font: 500 13px var(--mono); box-shadow: inset 0 0 0 1.4px var(--ink); background: repeating-linear-gradient(-41deg, rgba(99, 193, 154, 0.6) 0 1.3px, #f1fbf6 1.3px 5px); animation: tagpop 0.6s var(--ease); }
.sd-line { padding: 6px 18px 18px; font: 400 12.5px/1.6 var(--mono); color: var(--grey); }

/* ---------- Segmentation demo ---------- */
.seg-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 0.8fr) minmax(0, 0.95fr) minmax(0, 1fr); align-items: center; gap: clamp(22px, 3vw, 44px); max-width: 1220px !important; }
.seg-photo { position: relative; z-index: 1; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 20px 44px rgba(27, 43, 50, 0.12); rotate: -1.5deg; }
.seg-pic { border-radius: 10px; overflow: hidden; }
.seg-flat { width: 100%; height: auto; }
.seg-mask { opacity: 0; transition: opacity 0.8s var(--ease); mix-blend-mode: multiply; }
.seg-mask.is-on { opacity: 0.82; }
.seg-photo figcaption, .seg-part figcaption { margin-top: 8px; text-align: center; font: 500 11.5px var(--mono); color: var(--grey); }
.seg-model { white-space: normal; padding: 16px 16px 18px; gap: 4px; }
.sm-k, .sm-t { padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.9); }
.sm-k { font: 600 15px var(--mono); }
.sm-t { font: 500 11.5px/1.3 var(--sans); color: var(--ink-2); }
.u2 { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: 10px; }
.u2 i { width: 7px; height: var(--h); border-radius: 2px; background: #3d8fd6; box-shadow: inset 0 0 0 1px rgba(27, 43, 50, 0.25); }
.u2 i:first-child { background: #3fae5a; }
.u2 i.mid { background: #fff; }
.u2 i.up { background: #9b5de5; }
.blip { display: grid; gap: 5px; margin-top: 10px; width: 100%; }
.blip span { padding: 5px 8px; border-radius: 6px; font: 500 11px var(--sans); color: var(--ink); text-align: center; box-shadow: inset 0 0 0 1px rgba(27, 43, 50, 0.25); }
.blip span:nth-child(1) { background: #cfe0ff; }
.blip span:nth-child(2) { background: #ffd9c2; }
.blip span:nth-child(3) { background: #c9eedd; }
.seg-parts, .seg-caps { position: relative; z-index: 1; display: grid; gap: 18px; }
.seg-part { padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 12px 28px rgba(27, 43, 50, 0.1); }
.sp-img { display: grid; place-items: center; height: 108px; padding: 10px; border-radius: 8px; background: repeating-conic-gradient(#f1f1f1 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.sp-img { overflow: hidden; }
.sp-img .g { width: 100%; height: 100%; }
.seg-cap { min-width: 0; white-space: normal; font-size: 13px; padding: 20px 30px; }
.seg-cap span { display: inline-block; min-height: 1.25em; }
.seg-cap span::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; opacity: 0; }
.seg-cap.is-typing span::after { opacity: 1; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.js [data-seg-step] { transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), transform 0.7s var(--ease); }
/* Steps that have not run yet: images fade and lose colour, labels stay readable */
.js [data-seg].is-armed [data-seg-step]:not(.is-done) { filter: grayscale(1); }
.js [data-seg].is-armed [data-seg-step]:not(.is-done) :is(img, svg, .seg-pic) { opacity: 0.3; }
.js [data-seg].is-armed [data-seg-step]:not(.is-done) .blip span { background: #fff; }
.seg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(22px, 3vw, 36px); padding-top: 18px; border-top: 1px solid var(--line); }
.seg-status { font: 500 13px var(--mono); color: var(--grey); }
.seg-filed { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.seg-filed li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--bubble); font-size: 13px; opacity: 0.35; transition: opacity 0.6s; }
.seg-filed li span { padding: 3px 9px; border-radius: 999px; background: #20a090; color: #fff; font-size: 11.5px; font-weight: 600; }
.seg-filed.is-on li { opacity: 1; }
.why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); margin-top: clamp(30px, 4vw, 50px); }
.why article { padding: 22px 24px; border-radius: 18px; background: var(--blue-10); }

/* ---------- Data flow diagram (drawn by flow.js) ---------- */
.flow-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.flow-tabs button { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.flow-tabs button b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-10); color: var(--blue); font: 600 12px var(--mono); }
.flow-tabs button:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.flow-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.flow-tabs button[aria-selected="true"] b { background: #fff; color: var(--ink); }
.flow-body { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 36px); align-items: start; max-width: 1240px; }
.flow-canvas { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); padding: clamp(8px, 1.2vw, 16px); }
.fl-svg { width: 100%; height: auto; font-family: var(--sans); }
.fl-box { stroke: rgba(27, 43, 50, 0.16); stroke-width: 1; }
.fl-node text { font-size: 19px; font-weight: 500; fill: #22303a; }
.fl-node .fl-sub { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; fill: #2b4a7a; }
.fl-node { transition: opacity 0.4s; }
.fl-cont { fill: none; stroke-width: 1.6; stroke-dasharray: 7 6; }
.fl-cont-label { font: 600 13.5px var(--sans); letter-spacing: 0.16em; fill: #3c4a51; }
.fl-edge { fill: none; stroke: #b6c0c7; stroke-width: 1.4; transition: stroke 0.35s, opacity 0.35s, stroke-width 0.35s; }
.fl-edge.is-flow { stroke: #7b8a94; }
.fl-edge.is-on { stroke: var(--blue); stroke-width: 2.6; }
.fl-edge.is-done { stroke: #8fb4ff; stroke-width: 2; }
.fl-svg.has-flow .fl-edge:not(.is-flow) { opacity: 0.22; }
.fl-tag rect { fill: #fff; stroke: #c9d2d8; stroke-width: 1; transition: fill 0.3s, stroke 0.3s; }
.fl-tag text { font: 600 13px var(--mono); fill: #4b5a63; transition: fill 0.3s; }
.fl-tag.is-on rect { fill: var(--blue); stroke: var(--blue); }
.fl-tag.is-on text { fill: #fff; }
.fl-svg.has-flow .fl-tag:not(.is-flow) { opacity: 0; }
.fl-dot { fill: var(--blue); filter: drop-shadow(0 0 4px rgba(15, 98, 254, 0.6)); }
.fl-node.is-hot .fl-box { stroke: var(--blue); stroke-width: 2; }
.flow-steps { display: grid; gap: 8px; }
.flow-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background 0.4s, box-shadow 0.4s, opacity 0.4s; opacity: 0.55; }
.flow-steps li b { display: grid; place-items: center; height: 26px; border-radius: 999px; background: var(--blue-10); color: var(--blue); font: 600 12px var(--mono); }
.flow-steps li p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.flow-steps li.is-on { opacity: 1; background: var(--blue-10); box-shadow: inset 0 0 0 1.5px var(--blue); }
.flow-steps li.is-on b { background: var(--blue); color: #fff; }
.flow-steps li.is-done { opacity: 1; }
.flow-steps li.flow-replay-li { display: block; padding: 0; background: none; box-shadow: none; opacity: 1; }
.flow-replay { justify-self: start; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Schema ---------- */
.schema { margin-top: clamp(60px, 8vw, 110px); padding: clamp(22px, 3vw, 40px); border-radius: 24px; background: var(--cream); display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: clamp(22px, 3vw, 40px); max-width: 1240px !important; }
.schema-copy p { font-size: 15.5px; color: var(--ink-2); }
.schema-copy .sub-title::after { content: "SQLite"; display: inline-block; margin-left: 10px; padding: 3px 8px; border-radius: 6px; vertical-align: 6px; background: #fff; font: 600 11px var(--mono); letter-spacing: 0.04em; color: #0f80cc; }
.er { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1.1fr) minmax(0, 0.85fr); gap: 16px; align-items: start; }
.er-group { display: grid; gap: 10px; align-content: start; }
.er-group:first-child { grid-template-columns: 1fr 1fr; }
.er-group:first-child .er-g { grid-column: 1 / -1; }
.er-g { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-ink); }
.er-group-ward { padding: 10px; margin: -10px 0; border-radius: 14px; box-shadow: inset 0 0 0 1.3px rgba(125, 108, 60, 0.35); }
.er-group-ward .er-g { padding-left: 2px; }
.ent { border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(27, 43, 50, 0.08); transition: opacity 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
.ent h4 { padding: 7px 12px; background: #dde1e6; font-size: 13px; font-weight: 600; }
.ent ul { padding: 6px 0 8px; }
.ent li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 12px; font: 400 12px/1.5 var(--mono); }
.ent li b { font-weight: 500; }
.ent li span { color: var(--grey); text-align: right; }
.ent .ref { color: var(--blue); cursor: pointer; border-bottom: 1px dotted currentColor; }
.er.has-focus .ent { opacity: 0.4; }
.er.has-focus .ent.is-source, .er.has-focus .ent.is-target { opacity: 1; }
.ent.is-target { box-shadow: 0 0 0 2px var(--blue); transform: translateY(-2px); }

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width: 1100px) {
    .pipe { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 30px; }
    .pipe-cluster { width: min(100%, 520px); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "age sleeve brands fit" "weight pg pg budget" "gender pg pg colour" "region . . msg"; }
    .pipe > .sk-box { width: auto; min-width: 150px; }
    .pipe-looks, .pipe-results { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 560px; gap: 10px; }
    .trend { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-template-areas: "sh sh" "gg social" "sites social" "scr scr" "sum bert" "tags tags"; justify-items: center; row-gap: 26px; max-width: 520px !important; }
    .trend > [data-sk-id] { grid-row: auto !important; grid-column: auto !important; }
    .trend > [data-sk-id="sh"] { grid-area: sh !important; }
    .trend > [data-sk-id="gg"] { grid-area: gg !important; }
    .trend > [data-sk-id="scr"] { grid-area: scr !important; }
    .trend-sites > .sk { display: none; }
    .trend-sites > .sk-group { display: inline-grid; }
    .trend-sites > [data-sk-id="sites"] { grid-area: sites; }
    .trend-sites > [data-sk-id="social"] { grid-area: social; }
    .trend-sum { display: contents; }
    .trend-sum > [data-sk-id="bert"] { grid-area: bert; }
    .trend-sum > [data-sk-id="sum"] { grid-area: sum; }
    .trend-sum > [data-sk-id="tags"] { grid-area: tags; }
    .seg-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "photo photo" "u2 u2" "p1 p2" "blip blip" "c1 c2"; justify-items: center; row-gap: 30px; max-width: 560px !important; }
    .seg-photo { grid-area: photo; width: min(100%, 300px); }
    .seg-u2 { grid-area: u2; }
    .seg-blip { grid-area: blip; }
    .seg-parts, .seg-caps { display: contents; }
    .seg-part { width: 100%; max-width: 200px; }
    .seg-part[data-sk-id="p1"] { grid-area: p1; }
    .seg-part[data-sk-id="p2"] { grid-area: p2; }
    .seg-cap[data-sk-id="c1"] { grid-area: c1; }
    .seg-cap[data-sk-id="c2"] { grid-area: c2; }
    .flow-body { grid-template-columns: minmax(0, 1fr); }
    .schema { grid-template-columns: minmax(0, 1fr); }
    .er { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .er-group:first-child { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .captions, .captions-3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .lab { grid-template-columns: minmax(0, 1fr); }
    .sumdemo { grid-template-columns: minmax(0, 1fr); }
    .sd-arrow { height: 34px; }
    .sd-arrow i { width: 2px; height: 100%; }
    .sd-arrow i::after { right: -5px; top: auto; bottom: -1px; transform: rotate(135deg); }
    .why { grid-template-columns: minmax(0, 1fr); }
    .seg-filed { margin-left: 0; }
}
@media (max-width: 600px) {
    .sk { font-size: 12px; padding: 10px 12px; }
    .pipe-cluster { gap: 12px 4px; }
    .pipe-cluster .sk { font-size: 11px; padding: 10px 7px; }
    .pipe-cluster .sk-box { font-size: 12.5px; min-height: 84px; }
    .sk-res { grid-template-columns: repeat(3, 13px) 1fr; gap: 3px 5px; padding: 10px 8px 12px; }
    .sk-res p { font-size: 10.5px; white-space: normal; }
    .sk-res i { width: 13px; height: 13px; }
    .pipe-looks .sk { font-size: 11.5px; padding: 12px 10px; }
    .er, .er-group:first-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .er-group:first-child { grid-column: 1 / -1; }
    .er-group-ward { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin: 0; }
    .er-group-ward .er-g { grid-column: 1 / -1; }
    .ent li { font-size: 11px; padding: 3px 9px; flex-wrap: wrap; }
    .seg-cap { font-size: 11.5px; padding: 12px 12px; }
    .prompt, .json { font-size: 12px; padding: 14px; }
}
.fl-edge { marker-end: url(#fl-a0); }
.fl-edge.is-flow { marker-end: url(#fl-a1); }
.fl-edge.is-done { marker-end: url(#fl-a3); }
.fl-edge.is-on { marker-end: url(#fl-a2); }
@media (max-width: 700px) {
    .flow-canvas { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .fl-svg { min-width: 760px; }
    .flow-canvas::after { content: "Drag sideways to see the whole diagram"; display: block; padding: 8px 4px 2px; font: 500 11px var(--mono); color: var(--grey); position: sticky; left: 0; }
}