.api-reliability { padding: clamp(60px, 7vw, 95px) 0; background: #e9efe2; border-block: 1px solid #d9e2d0; }
.reliability-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 45px; text-align: left; margin-bottom: 56px; }
.reliability-heading h2 { margin: 0; font-size: clamp(38px, 4.2vw, 60px); letter-spacing: -.055em; line-height: 1.08; }
.reliability-heading h2 em { color: #688459; }
.reliability-heading > p { flex: 0 0 300px; max-width: 350px; margin: 0 0 4px; color: #617456; font-size: 14px; line-height: 1.7; }
.reliability-heading > p strong { color: #35532f; font-weight: 600; }
@media (max-width: 800px) {
  .reliability-heading { flex-direction: column; align-items: flex-start; gap: 20px; }
  .reliability-heading > p { flex-basis: auto; max-width: 500px; }
}
.pipeline-demo { --signal: #b8d997; max-width: 1240px; margin-inline: auto; background: #20392d; color: #f0f5e9; border: 1px solid #294534; border-radius: 16px; overflow: hidden; }
.pipeline-demo[data-phase="broken"] { --signal: #edac8a; }
.pipeline-demo[data-phase="repairing"] { --signal: #d3c39e; }
.repair-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.repair-tabs { display: flex; justify-content: center; border-bottom: 1px solid #486044; gap: 8px; padding: 14px 24px; background: #2c4533; }
.repair-tabs button { padding: 11px 22px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: #bdcdb0; font-size: 13px; font-weight: 500; cursor: pointer; }
.repair-tabs button:hover { background: #38523c; color: #e0ebd5; }
.repair-tabs button[aria-pressed="true"] { background: #c0d6a7; border-color: #c0d6a7; color: #233c2b; }
.repair-scene { display: flex; align-items: center; justify-content: center; padding: 76px 38px 62px; }
.repair-source, .repair-output { position: relative; flex: 1; min-width: 0; max-width: 360px; border: 1px solid #48613f; border-radius: 9px; background: #182f24; }
.mini-browser { display: flex; align-items: center; gap: 5px; padding: 13px; border-bottom: 1px solid #354e37; }
.mini-browser i { width: 4px; height: 4px; border-radius: 50%; background: #647b54; }
.mini-browser > span { font: 12px var(--mono); color: #b0c29d; margin-left: 8px; overflow: hidden; white-space: nowrap; }
.source-content { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; height: 290px; }
.source-picture { flex-shrink: 0; overflow: hidden; display: grid; place-items: center; height: 150px; background: #334c35; border-radius: 4px; color: #b3cc98; font: 48px Georgia, serif; }
.source-listing { display: flex; flex-direction: column; gap: 3px; }
.source-listing strong { font-size: 16px; font-weight: 500; }
.source-price { font-size: 21px; color: #c0d99f; }
.source-listing small { font-size: 12px; color: #aec29b; }
.source-obstacle { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #2e3027; border-radius: 0 0 9px 9px; color: #edac8a; }
.source-obstacle strong { font: 42px var(--mono); }
.source-obstacle span { font-size: 13px; }
.pipeline-demo[data-scenario="layout"]:not([data-phase="healthy"]) .source-content { flex-direction: row; align-items: center; }
.pipeline-demo[data-scenario="layout"]:not([data-phase="healthy"]) .source-picture { width: 88px; flex: none; height: 165px; }
.pipeline-demo[data-scenario="layout"]:not([data-phase="healthy"]) .source-price { order: 3; padding: 5px; background: #42563a; }
.pipeline-demo:is([data-scenario="url"], [data-scenario="antibot"]):is([data-phase="broken"], [data-phase="repairing"]) .source-obstacle { display: flex; }
.pipeline-demo[data-scenario="url"][data-phase="repairing"] .source-obstacle { display: none; }
.repair-link { flex: .12; height: 1px; background: #526747; position: relative; margin: 0 14px; }
.repair-link i { position: absolute; width: 5px; height: 5px; top: -2px; background: var(--signal); }
.is-playing:is([data-phase="healthy"], [data-phase="restored"]) .repair-link i { animation: repair-packet 1.6s linear infinite; }
.pipeline-demo:is([data-phase="broken"], [data-phase="repairing"]) .repair-link { background: repeating-linear-gradient(to right, #6e6c50 0 4px, transparent 4px 8px); }
.repair-engine { width: 158px; flex: none; text-align: center; }
.engine-orbit { position: relative; width: 92px; height: 92px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid #58734a; background: #304b36; border-radius: 50%; }
.engine-icon { width: 42px; height: 42px; fill: none; stroke: var(--signal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.engine-icon use { display: none; }
[data-phase="healthy"] .engine-icon .icon-collect,
[data-phase="broken"] .engine-icon .icon-detect,
[data-phase="repairing"] .engine-icon .icon-repair,
[data-phase="restored"] .engine-icon .icon-resume { display: inline; }
.engine-orbit::before { content: ""; position: absolute; inset: -10px; border: 2px solid #526d48; border-radius: 50%; pointer-events: none; }
[data-phase="broken"] .engine-orbit { background: #4a3e33; }
[data-phase="repairing"] .engine-orbit::before { border: 0; background: repeating-conic-gradient(from 0deg, #d3c39e 0deg 48deg, transparent 48deg 72deg); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: repair-turn 1.8s linear infinite; animation-play-state: paused; }
.is-playing[data-phase="repairing"] .engine-orbit::before { animation-play-state: running; }
[data-phase="restored"] .engine-orbit::before { border-color: #b8e093; animation: repair-complete 850ms ease-out both; }

.repair-engine > strong { display: block; font-size: 16px; font-weight: 500; }
#repair-action { display: block; margin-top: 5px; min-height: 34px; font-size: 13px; color: var(--signal); }

.output-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px; border-bottom: 1px solid #354e37; font: 12px var(--mono); color: #a8be94; }
.output-heading b { font-weight: 400; color: #cbdfb4; }
#output-badge { font: 11px "DM Sans", sans-serif; color: var(--signal); }
.output-row { display: flex; justify-content: space-between; gap: 10px; padding: 20px 18px; border-bottom: 1px solid #2d4631; font: 14px var(--mono); }
.output-row:nth-last-child(2) { border: 0; }
.output-row > span { color: #aec29b; }
.output-row strong { color: var(--signal); font-size: 20px; font-weight: 500; line-height: 1; }
.pipeline-demo[data-phase="broken"] .output-row strong { background: #663e303d; min-width: 45px; text-align: right; }
.pipeline-demo[data-phase="restored"] .output-row strong { background: #9dbc7320; }
.output-note { display: none; padding: 11px 18px; border-top: 1px solid #354e37; color: #cbb7a1; font-size: 11px; text-align: right; }
.pipeline-demo:is([data-phase="broken"], [data-phase="repairing"]) .output-note { display: block; }
.repair-caption { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-height: 96px; padding: 16px 25px; text-align: center; }
#repair-status { color: var(--signal); font-size: 17px; font-weight: 500; }
#repair-detail { max-width: 620px; color: #b8c8ad; font-size: 13px; line-height: 1.45; }
.repair-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 18px 30px 25px; border-top: 1px solid #39513e; }
.repair-progress { display: flex; align-items: center; gap: 5px; }
.repair-progress button, #repair-play { border: 0; background: none; color: #849b77; padding: 8px 10px; font-size: 13px; cursor: pointer; }
.repair-progress button { display: inline-flex; align-items: center; gap: 7px; border-radius: 6px; }
.repair-progress button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.repair-progress button[aria-pressed="true"] { color: var(--signal); background: #344a39; }
#repair-play { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; color: #a9b99d; line-height: 1; }
#repair-play::before { content: ""; display: block; width: 12px; height: 13px; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 8px, currentColor 8px 11px, transparent 11px); }
#repair-play[data-playback="play"]::before { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid currentColor; background: none; }
#repair-play[data-playback="next"]::before { content: "→"; width: auto; height: auto; background: none; font-size: 17px; }
#repair-play:hover { color: #c3d9aa; }
.pipeline-demo button:focus-visible { outline: 2px solid #c3dc9e; outline-offset: 4px; }
@keyframes repair-packet { from { left: 0; } to { left: calc(100% - 5px); } }
@keyframes repair-turn { to { transform: rotate(360deg); } }
@keyframes repair-complete { 0% { box-shadow: 0 0 0 0 #b8e09380; } 100% { box-shadow: 0 0 0 15px #b8e09300; } }
@media (max-width: 1000px) {
  .repair-scene { padding: 56px 20px 44px; }
  .repair-link { margin-inline: 8px; }
  .repair-engine { width: 125px; }
  .source-content { padding: 10px; }
  .output-heading { flex-wrap: wrap; }
  .output-row { padding: 19px 12px; font-size: 13px; }
}
@media (max-width: 800px) {
  .repair-tabs { gap: 5px; padding: 12px 10px; }
  .repair-tabs button { padding: 10px 9px; font-size: 11px; }
  .repair-scene { flex-direction: column; padding: 42px 24px 30px; }
  .repair-source, .repair-output { width: 100%; max-width: 400px; flex: none; }
  .repair-link { flex: none; width: 1px; height: 26px; margin: 18px 0; }
  .repair-link i { display: none; }
  .repair-engine { width: 100%; display: grid; grid-template-columns: 68px auto; column-gap: 16px; align-items: center; text-align: left; max-width: 245px; }
  .engine-orbit { grid-row: span 2; width: 60px; height: 60px; margin: 0; }
  #repair-action { min-height: 0; margin: 0; }
  .repair-engine + .repair-link { margin-top: 18px; margin-bottom: 18px; }
  .repair-caption { min-height: 112px; }
  .repair-footer { flex-direction: column; gap: 13px; padding: 15px; }
  .repair-progress { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 540px) {
  .api-reliability { padding-block: 48px; }
  .reliability-heading { margin-bottom: 30px; }
  .repair-tabs { gap: 4px; padding: 10px; }
  .repair-tabs button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 5px; }
  .repair-scene { padding: 26px 16px 20px; }
  .source-content { height: 270px; }
  .source-picture { height: 130px; }
  .repair-link, .repair-engine + .repair-link { margin-block: 12px; height: 18px; }
  .repair-caption { min-height: 96px; padding-inline: 16px; }
  .repair-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .repair-progress button { min-height: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pipeline-demo *, .pipeline-demo *::before, .pipeline-demo *::after { animation: none !important; } }

.source-picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.challenge-cloud { display: none; width: 100px; height: 72px; }
[data-scenario="antibot"] .challenge-cloud { display: block; }
#obstacle-symbol[hidden] { display: none; }