/* P. 06 Data you can use: invoice -> structured form (Fields / Markdown / JSON / CSV) -> ERP, Search, AI assistant,
   then four use cases. */

.pipe { position: relative; }
.pipe-head { margin-bottom: clamp(40px, 6vw, 76px); }

/* ---------- stage ---------- */
.pipe-stage { position: relative; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.4fr) minmax(0, 0.7fr); gap: clamp(40px, 5vw, 80px); align-items: center; isolation: isolate; padding: 8px 0; }
.pipe-stage::before { content: ""; position: absolute; z-index: -2; inset: -10% calc(-1 * var(--gut)); pointer-events: none; background: radial-gradient(38% 50% at 50% 50%, rgba(242, 184, 75, 0.06), transparent 70%), radial-gradient(30% 40% at 84% 50%, rgba(70, 199, 156, 0.05), transparent 70%); }
.pipe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pipe-chips { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* source document */
.pipe-doc { position: relative; z-index: 1; margin: 0; justify-self: center; width: 100%; max-width: 330px; }
.pipe-doc__page { position: relative; aspect-ratio: 1100 / 1423; border-radius: 3px; background: #F7F7F5; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 30px 60px -24px rgba(0, 0, 0, 0.9), 0 8px 18px -8px rgba(0, 0, 0, 0.6); transform: perspective(1400px) rotateY(9deg) rotateZ(-0.6deg); transform-origin: 60% 50%; transition: transform 1.2s var(--ease-out); }
.pipe-doc__page img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; }
.pipe-stage:hover .pipe-doc__page { transform: perspective(1400px) rotateY(4deg) rotateZ(-0.3deg); }
.pipe-doc__boxes { position: absolute; inset: 0; }
.pipe-box { --c: 205, 140, 22; position: absolute; left: calc(var(--x) * 100% - 2px); top: calc(var(--y) * 100% - 2px); width: calc(var(--w) * 100% + 4px); height: calc(var(--h) * 100% + 4px); border-radius: 3px; opacity: 0; transition: opacity 0.4s, background 0.4s, box-shadow 0.4s; }
.pipe-box.is-blue { --c: 47, 111, 192; }
.pipe-box.is-on { opacity: 1; background: rgba(242, 184, 75, 0.2); box-shadow: inset 0 0 0 1.25px rgba(var(--c), 0.85); animation: pipe-boxhit 0.9s var(--ease-out); }
.pipe-box.is-blue.is-on { background: rgba(47, 111, 192, 0.08); }
.pipe-box.is-sent { background: rgba(var(--c), 0.05); box-shadow: inset 0 0 0 1px rgba(var(--c), 0.4); }
@keyframes pipe-boxhit { 0% { background: rgba(242, 184, 75, 0.55); box-shadow: inset 0 0 0 1.5px rgba(var(--c), 1), 0 0 0 5px rgba(var(--c), 0.16); } }
.pipe-doc__scan { position: absolute; left: -8px; right: -8px; top: 0; height: 0; opacity: 0; pointer-events: none; will-change: transform; }
.pipe-doc__scan i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px; background: #FF6F55; box-shadow: 0 0 10px rgba(226, 85, 60, 0.9), 0 0 22px rgba(226, 85, 60, 0.45); }
.pipe-doc__scan::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: var(--trail, 48px); background: linear-gradient(to top, rgba(226, 85, 60, 0.18), transparent); }
.pipe-doc__scan.is-on { opacity: 1; }
.pipe-doc__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font: 400 0.82rem/1.3 var(--f-ui); color: var(--fg-3); }
.pipe-doc__file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-replay { flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; border-radius: 12px; display: grid; place-items: center; color: var(--fg-3); transition: color 0.2s, background 0.2s; }
.pipe-replay:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.pipe-replay svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.6s var(--ease-out); }
.pipe-replay:hover svg { transform: rotate(-200deg); }

/* structured form */
.pipe-form { position: relative; z-index: 1; border-radius: var(--r-lg); background: linear-gradient(180deg, #1C2027, #121519 40%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.075), 0 40px 100px -40px rgba(0, 0, 0, 0.95); container-type: inline-size; }
.pipe-form::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); pointer-events: none; }
.pipe-form__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pipe-form__title { display: inline-flex; align-items: center; gap: 10px; font: 600 0.95rem/1.2 var(--f-ui); color: var(--fg); min-width: 0; }
.pipe-form__state { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); flex: none; transition: background 0.4s, box-shadow 0.4s; }
.pipe-form.is-done .pipe-form__state { background: var(--green-lift); box-shadow: 0 0 10px rgba(70, 199, 156, 0.7); }
.pipe-form.is-busy .pipe-form__state { background: #F2B84B; box-shadow: 0 0 10px rgba(242, 184, 75, 0.6); }
.pipe-seg { position: relative; display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.pipe-seg__ind { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 6px 14px -8px rgba(0, 0, 0, 0.8); transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out); }
.pipe-seg button { position: relative; z-index: 1; min-height: 34px; padding: 0 12px; border-radius: 9px; font: 500 0.82rem/1 var(--f-ui); color: var(--fg-3); transition: color 0.25s; }
.pipe-seg button:hover { color: var(--fg-2); }
.pipe-seg button[aria-pressed="true"] { color: var(--fg); }
.pipe-seg button:focus-visible { outline-offset: -2px; }
.pipe-form__body { position: relative; perspective: 1600px; }
.pipe-view { padding: 18px 20px 20px; transform-origin: 50% 50%; backface-visibility: hidden; }
.pipe-view[hidden] { display: none; }
.pipe-view--code { margin: 0; overflow: auto; font: 400 12.25px/1.7 var(--f-mono); color: var(--fg-2); white-space: pre; tab-size: 2; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; overscroll-behavior: contain; }
.pipe-view--code:focus-visible { outline-offset: -4px; }
.pipe-view--code .c-k { color: #B9C3D3; }
.pipe-view--code .c-s { color: #F2D18B; }
.pipe-view--code .c-n { color: var(--blue-lift); }
.pipe-view--code .c-p { color: var(--fg-3); }
.pipe-view--code .c-b { color: #F4CF86; font-weight: 600; }
.pipe-view--code .c-h { color: #9EC0F0; font-weight: 600; }
.pipe-form__foot { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 20px 14px; border-top: 1px solid var(--line); font: 500 var(--t-label)/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.pipe-form.is-done .pipe-form__status { color: var(--green-lift); }

/* fields */
.pipe-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; align-items: center; }
.pipe-f { display: contents; }
.pipe-f__k { font: 500 var(--t-label)/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.pipe-f__v { position: relative; display: flex; align-items: center; min-height: 40px; padding: 8px 34px 8px 15px; border-radius: 10px; font: 500 0.88rem/1.3 var(--f-mono); color: var(--fg); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); transition: background 0.4s, box-shadow 0.4s; }
.pipe-f__v::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: rgba(242, 184, 75, 0.22); transition: background 0.3s; }
.pipe-f__v::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); transition: background 0.3s, box-shadow 0.3s; }
.pipe-f__t { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-f.is-on .pipe-f__t { opacity: 1; transform: none; }
.pipe-f.is-on .pipe-f__v { box-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.3); animation: pipe-land 0.9s var(--ease-out); }
.pipe-f.is-on .pipe-f__v::before { background: #F2B84B; }
.pipe-f.is-on .pipe-f__v::after { background: var(--green-lift); box-shadow: 0 0 8px rgba(70, 199, 156, 0.6); }
@keyframes pipe-land { 0% { background: rgba(242, 184, 75, 0.32); box-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.95), 0 0 0 5px rgba(242, 184, 75, 0.14); } }
.pipe-f.is-wait .pipe-f__v::before { background: rgba(242, 184, 75, 0.6); }

/* line items */
.pipe-li { margin-top: 18px; }
.pipe-li__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font: 500 var(--t-label)/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.pipe-li__n { color: var(--blue-lift); opacity: 0; transition: opacity 0.4s; }
.pipe-li.is-on .pipe-li__n { opacity: 1; }
.pipe-li__wrap { overflow-x: auto; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(110, 162, 232, 0.16); transition: box-shadow 0.4s; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
.pipe-li.is-on .pipe-li__wrap { box-shadow: inset 0 0 0 1px rgba(110, 162, 232, 0.36); }
.pipe-li.is-land .pipe-li__wrap { animation: pipe-land-b 0.9s var(--ease-out); }
@keyframes pipe-land-b { 0% { box-shadow: inset 0 0 0 1px rgba(110, 162, 232, 1), 0 0 0 5px rgba(47, 111, 192, 0.2); } }
.pipe-tbl { width: 100%; border-collapse: collapse; font: 400 0.78rem/1.3 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }
.pipe-tbl th, .pipe-tbl td { padding: 6px 9px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(110, 162, 232, 0.14); }
.pipe-tbl td:first-child { font-family: var(--f-mono); font-size: 0.74rem; color: var(--fg-2); }
.pipe-tbl td:nth-child(2) { white-space: normal; min-width: 150px; }
.pipe-tbl th { font-weight: 600; color: var(--fg-2); background: rgba(47, 111, 192, 0.14); }
.pipe-tbl tr:last-child td { border-bottom: 0; }
.pipe-tbl .is-num { text-align: right; }
.pipe-tbl tbody tr { opacity: 0.16; transition: opacity 0.4s, transform 0.6s var(--ease-out); }
.pipe-tbl tbody tr.is-on { opacity: 1; }
.pipe-tbl tbody td span { display: inline-block; min-width: 2ch; }
.pipe-tbl tbody tr:not(.is-on) td span { color: transparent; background: rgba(255, 255, 255, 0.08); border-radius: 4px; }

/* chips in flight */
.pipe-chip { position: absolute; left: 0; top: 0; z-index: 6; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font: 600 0.8rem/1 var(--f-mono); color: #1B1406; background: #F2B84B; box-shadow: 0 10px 24px -8px rgba(242, 184, 75, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5); white-space: nowrap; will-change: transform, opacity; pointer-events: none; }
.pipe-chip.is-blue { color: #fff; background: #2F6FC0; box-shadow: 0 10px 24px -8px rgba(47, 111, 192, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.pipe-chip__tail { position: absolute; left: 50%; top: 50%; width: 1px; height: 14px; margin-top: -7px; transform-origin: 0 50%; border-radius: 9px; background: linear-gradient(90deg, rgba(242, 184, 75, 0.55), rgba(242, 184, 75, 0)); z-index: -1; }
.pipe-chip.is-blue .pipe-chip__tail { background: linear-gradient(90deg, rgba(110, 162, 232, 0.6), rgba(110, 162, 232, 0)); }

/* destinations */
.pipe-dests { position: relative; z-index: 1; list-style: none; margin: 0 0 0 clamp(0px, 2.6vw, 44px); padding: 0; display: grid; gap: clamp(28px, 4.6vw, 72px); }
.pipe-dest { position: relative; display: flex; align-items: center; gap: 13px; min-height: 66px; padding: 12px 34px 12px 13px; border-radius: 16px; background: rgba(20, 23, 28, 0.88); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -24px rgba(0, 0, 0, 0.9); transition: box-shadow 0.5s, background 0.5s; }
.pipe-dest__ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--fg-3); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); transition: color 0.4s, background 0.4s, box-shadow 0.4s; }
.pipe-dest__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pipe-dest__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pipe-dest__t b { font: 600 0.98rem/1.2 var(--f-ui); color: var(--fg); }
.pipe-dest__t small { font: 400 0.8rem/1.3 var(--f-ui); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-dest__dot { position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); transition: background 0.4s, box-shadow 0.4s; }
.pipe-dest.is-lit { box-shadow: inset 0 0 0 1px rgba(70, 199, 156, 0.4), 0 20px 50px -24px rgba(35, 134, 107, 0.6); }
.pipe-dest.is-lit .pipe-dest__ic { color: #8DE2C3; background: rgba(35, 134, 107, 0.14); box-shadow: inset 0 0 0 1px rgba(70, 199, 156, 0.3); }
.pipe-dest.is-lit .pipe-dest__dot { background: var(--green-lift); box-shadow: 0 0 10px rgba(70, 199, 156, 0.8); }
.pipe-dest.is-ping { animation: pipe-ping 0.7s var(--ease-out); }
@keyframes pipe-ping { 0% { box-shadow: inset 0 0 0 1px rgba(70, 199, 156, 0.95), 0 0 0 6px rgba(70, 199, 156, 0.16), 0 20px 50px -24px rgba(35, 134, 107, 0.6); } }

/* ---------- use cases ---------- */
.pipe-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(80px, 10vw, 136px); }
.pipe-use { position: relative; display: flex; flex-direction: column; padding: 14px 14px 24px; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: box-shadow 0.4s, background 0.4s, transform 0.6s var(--ease-out); }
.pipe-use:hover, .pipe-use:focus-visible { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -36px rgba(0, 0, 0, 0.9); }
.pipe-use:focus-visible { outline-offset: 4px; border-radius: var(--r-md); }
.pipe-use__art { position: relative; display: flex; align-items: center; gap: 14px; min-height: 192px; padding: 16px 14px; border-radius: 11px; background: radial-gradient(120% 100% at 30% 0%, #16191F, #0D0F13 80%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045); overflow: hidden; margin-bottom: 20px; }
.pipe-use__t { margin: 0 6px; font: 600 1.15rem/1.25 var(--f-disp); letter-spacing: -0.015em; color: var(--fg); }
.pipe-use__k { display: flex; align-items: center; gap: 7px; margin: 8px 6px 0; font: 500 0.92rem/1.3 var(--f-ui); color: var(--red-lift); }
.pipe-use__k svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--ease-out); }
.pipe-use:hover .pipe-use__k svg, .pipe-use:focus-visible .pipe-use__k svg { transform: translateX(3px); }
.pipe-use__d { margin: 12px 6px 0; font-size: 0.92rem; line-height: 1.5; color: var(--fg-2); max-width: 34ch; }

/* thumbs */
.pipe-thumb { position: relative; flex: none; width: 86px; aspect-ratio: 1100 / 1423; border-radius: 2px; overflow: hidden; background: #EEE; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 14px 28px -12px rgba(0, 0, 0, 0.9); }
.pipe-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pipe-thumb--lib { aspect-ratio: 520 / 672; }
.pipe-thumb__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #FF6F55; box-shadow: 0 0 8px rgba(226, 85, 60, 0.9); opacity: 0; }
.pipe-hl { --c: 205, 140, 22; position: absolute; left: calc(var(--x) * 100% - 1px); top: calc(var(--y) * 100% - 1px); width: calc(var(--w) * 100% + 2px); height: calc(var(--h) * 100% + 2px); border-radius: 1.5px; background: rgba(242, 184, 75, 0.45); box-shadow: 0 0 0 1px rgba(var(--c), 0.95); opacity: 0; }
.pipe-hl.is-red { --c: 183, 57, 31; background: rgba(226, 85, 60, 0.3); }
.pipe-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pipe-lines rect { fill: rgba(47, 111, 192, 0.16); stroke: rgba(47, 111, 192, 0.7); stroke-width: 0.6; vector-effect: non-scaling-stroke; opacity: 0; }
.is-play .pipe-thumb__scan { animation: pipe-scan 1.3s var(--ease-io) both; }
@keyframes pipe-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.is-play .pipe-lines rect { animation: pipe-fade 0.5s ease-out both; animation-delay: calc(var(--y) * 1200ms + 80ms); }
@keyframes pipe-fade { from { opacity: 0; } to { opacity: 1; } }
.is-play .pipe-hl { animation: pipe-hl 0.7s var(--ease-out) both; animation-delay: calc(500ms + var(--i) * 420ms); }
@keyframes pipe-hl { 0% { opacity: 0; transform: scale(1.4); } 100% { opacity: 1; transform: none; } }

/* armed: hidden until the first play (set by JS when motion is allowed) */
.pipe-use__art.is-armed:not(.is-play) :is(.pipe-ledger__r, .pipe-term, .pipe-find__r, .pipe-hl, .pipe-spec__r em, .pipe-spec__bar b, .pipe-spec__bar i) { opacity: 0; }
.pipe-use__art.is-armed:not(.is-play) .pipe-lines rect { opacity: 0; }

.pipe-use__art.is-still .pipe-lines rect, .pipe-use__art.is-still .pipe-hl { opacity: 1; }

/* 1: ledger */
.pipe-ledger { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pipe-ledger__h, .pipe-spec__h { display: flex; justify-content: space-between; gap: 8px; padding: 0 2px 4px; font: 500 var(--t-label)/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.pipe-ledger__h span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pipe-ledger__r { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 5px 26px 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); }
.pipe-ledger__r span { font: 400 0.75rem/1.2 var(--f-ui); color: var(--fg-3); }
.pipe-ledger__r b { font: 500 0.78rem/1.25 var(--f-mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-ledger__r i { position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--green-lift); box-shadow: 0 0 8px rgba(70, 199, 156, 0.6); }
.is-play .pipe-ledger__r { animation: pipe-row 0.8s var(--ease-out) both; animation-delay: calc(700ms + var(--i) * 420ms); }
.is-play .pipe-ledger__r b { animation: pipe-type 0.6s steps(10) both; animation-delay: calc(820ms + var(--i) * 420ms); }
.is-play .pipe-ledger__r i { animation: pipe-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(1200ms + var(--i) * 420ms); }
@keyframes pipe-row { 0% { opacity: 0; transform: translateX(-14px); box-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.9); } 60% { box-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.6); } 100% { opacity: 1; transform: none; } }
@keyframes pipe-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pipe-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* 2: spec check */
.pipe-spec { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.pipe-spec__r { display: flex; align-items: center; gap: 10px; }
.pipe-spec__bar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.pipe-spec__bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 4px; background: rgba(70, 199, 156, 0.2); box-shadow: inset 0 0 0 1px rgba(70, 199, 156, 0.45); }
.pipe-spec__bar b { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #F2B84B; box-shadow: 0 0 0 2px #0D0F13, 0 0 10px rgba(242, 184, 75, 0.7); }
.pipe-spec__r em { width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgba(70, 199, 156, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%2346C79C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 1px rgba(70, 199, 156, 0.4); }
.is-play .pipe-spec__bar i { animation: pipe-band 0.7s var(--ease-out) both; animation-delay: calc(300ms + var(--i) * 260ms); }
.is-play .pipe-spec__bar b { animation: pipe-slide 1s var(--ease-out) both; animation-delay: calc(700ms + var(--i) * 260ms); }
.is-play .pipe-spec__r em { animation: pipe-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(1450ms + var(--i) * 260ms); }
@keyframes pipe-band { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pipe-slide { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { opacity: 1; } }

/* 3: terms */
.pipe-terms { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pipe-term { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px 7px 12px; border-radius: 9px; background: rgba(226, 85, 60, 0.07); box-shadow: inset 0 0 0 1px rgba(226, 85, 60, 0.3); position: relative; }
.pipe-term::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--red-lift); }
.pipe-term span { font: 400 0.75rem/1.2 var(--f-ui); color: var(--fg-3); }
.pipe-term b { font: 500 0.8rem/1.25 var(--f-mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-play .pipe-term { animation: pipe-row-r 0.8s var(--ease-out) both; animation-delay: calc(700ms + var(--i) * 420ms); }
@keyframes pipe-row-r { 0% { opacity: 0; transform: translateX(-14px) scale(0.96); } 100% { opacity: 1; transform: none; } }

/* 4: search */
.pipe-thumb--fax { width: 68px; transform: rotate(-2.5deg); }
.pipe-use[data-use="archive"] .pipe-use__art { gap: 12px; padding-right: 12px; }
.pipe-find { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pipe-find__q { display: flex; align-items: center; gap: 8px; height: 34px; min-width: 0; padding: 0 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 0.78rem/1 var(--f-mono); color: var(--fg); white-space: nowrap; overflow: hidden; }
.pipe-find__q svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--fg-3); stroke-width: 1.6; stroke-linecap: round; }
.pipe-find__t::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin: 0 0 -0.2em 2px; background: var(--red-lift); animation: pipe-blink 1s steps(1) infinite; }
@keyframes pipe-blink { 50% { opacity: 0; } }
.pipe-find__r { display: flex; align-items: center; gap: 7px; padding: 5px 6px 5px 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.025); }
.pipe-find__r img { width: 15px; height: 20px; flex: none; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.pipe-find__r span { min-width: 0; font: 400 0.75rem/1.25 var(--f-ui); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-play .pipe-find__r { animation: pipe-row 0.7s var(--ease-out) both; animation-delay: calc(1500ms + var(--i) * 180ms); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .pipe-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-thumb { width: 104px; }
}
@media (max-width: 1100px) {
  .pipe-stage { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); row-gap: 72px; }
  .pipe-dests { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pipe-doc { max-width: 300px; }
}
@media (max-width: 720px) {
  .pipe-stage { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .pipe-doc { max-width: 236px; }
  .pipe-doc__page { transform: perspective(1400px) rotateX(8deg) rotateZ(-0.8deg); }
  .pipe-stage:hover .pipe-doc__page { transform: perspective(1400px) rotateX(8deg) rotateZ(-0.8deg); }
  .pipe-dests { gap: 10px; }
  .pipe-dest { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 6px 12px; min-height: 0; }
  .pipe-dest__t small { display: none; }
  .pipe-dest__t b { font-size: 0.88rem; }
  .pipe-dest__dot { right: 9px; top: 12px; margin-top: 0; }
  .pipe-form__bar { padding: 12px 12px 12px 16px; }
  .pipe-view { padding: 16px 14px 16px; }
  .pipe-form__foot { padding: 12px 16px 14px; }
  .pipe-uses { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pipe-use__art { min-height: 184px; }
  .pipe-thumb { width: 96px; }
}
@container (max-width: 430px) {
  .pipe-view--code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.75px; }
  .pipe-fields { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .pipe-f__k { margin-top: 7px; }
  .pipe-seg button { padding: 0 9px; font-size: 0.78rem; }
  .pipe-form__title { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .pipe-seg button { padding: 0 7px; font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pipe-find__t::after { animation: none; }
  .pipe-doc__page, .pipe-stage:hover .pipe-doc__page { transition: none; }
}