.api-speed { padding-block: clamp(80px, 8vw, 120px); }
.speed-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 45px; margin-bottom: 56px; }
.speed-heading h2 { margin: 0; font-size: clamp(42px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -.055em; }
.speed-heading h2 em { color: #7060b7; }
.speed-heading > p { margin: 0 0 4px; max-width: 350px; color: #75816a; font-size: 14px; line-height: 1.7; }
.speed-heading > p strong { color: #574184; font-weight: 600; }
.speed-comparison { border: 1px solid #d6decb; border-radius: 15px; background: #fafbf5; overflow: hidden; }
.speed-topline { display: flex; align-items: center; justify-content: space-between; padding: 17px 27px; border-bottom: 1px solid #e1e6d8; }
.speed-topline > span { font: 10px var(--mono); letter-spacing: .07em; color: #8a967c; }
#speed-play { display: grid; place-items: center; width: 38px; height: 30px; border: 0; background: none; font-size: 17px; color: #829375; cursor: pointer; }
#speed-play:hover { color: #35572b; }
.speed-lane { display: grid; grid-template-columns: 175px minmax(0,1fr) 100px; gap: 28px; align-items: center; padding: 55px 30px; min-height: 234px; }
.browser-lane { color: #92735e; background: #f8f1e8; }
.speed-lane-label { position: relative; padding-left: 40px; }
.speed-lane-label > strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.speed-lane-label > small { display: block; margin-top: 5px; font-size: 11px; opacity: .8; }
.speed-browser-icon { position: absolute; top: 1px; left: 0; width: 26px; height: 23px; border: 1.5px solid #9ba38f; border-radius: 4px; }
.speed-browser-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px solid #9ba38f; }
.speed-route { display: flex; align-items: center; min-width: 0; }
.speed-station { flex: none; width: 86px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; border: 1px solid #e6d8c9; border-radius: 9px; background: #fffaf3; font-size: 11px; transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
.speed-station.is-current { color: #96633d; border-color: #cf9e75; background: #f6dfc5; }
.speed-station.is-complete { color: #8d7964; border-color: #d8c4ae; }
.speed-connector { min-width: 8px; flex: 1; height: 1px; background: #dfcbb7; position: relative; overflow: hidden; }
.station-window { display: flex; align-items: flex-start; gap: 3px; width: 28px; height: 23px; border: 1px solid currentColor; border-radius: 3px; padding: 4px; }
.station-window i { height: 2px; width: 2px; background: currentColor; }
.station-render { display: grid; grid-template-columns: 11px 15px; grid-template-rows: 6px 13px; gap: 3px; }
.station-render i { background: currentColor; opacity: .45; border-radius: 1px; }
.station-render i:first-child { grid-column: span 2; }
.station-cursor { font: 30px/23px Georgia, serif; }
.station-code { font: 23px/23px var(--mono); }
.speed-result { display: flex; flex-direction: column; gap: 9px; align-items: center; color: #9aa48d; }
.speed-result > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d8dfce; font-size: 20px; line-height: 1; }
.speed-result strong { font-size: 11px; font-weight: 500; }
.speed-result.is-ready { color: #54733d; }
.speed-result.is-ready > span { background: #e0eccf; border-color: #bbd1a4; }
.direct-lane { background: radial-gradient(ellipse at 75% 50%, #ece5ff 0, transparent 65%), #eeedf8; color: #504080; border-top: 1px solid #d8cfeb; border-bottom: 1px solid #d8cfeb; min-height: 234px; }
.speed-brand { position: absolute; top: -5px; left: -7px; width: 39px; height: 39px; background: #7d64bd; mask: url('/cleanedweb-mark.svg') center / contain no-repeat; }
.direct-route { display: flex; align-items: center; gap: 0; min-width: 0; }
.direct-request { display: flex; align-items: center; gap: 17px; padding: 18px 21px; border: 1px solid #c4b3e4; border-radius: 9px; background: #fcfaff; box-shadow: 0 4px 22px #7653b510; }
.direct-request > span { font: 11px var(--mono); color: #9275bc; }
.direct-request code { font: 14px var(--mono); color: #574184; white-space: nowrap; }
.direct-request i { margin-left: 14px; font-style: normal; font-size: 23px; line-height: 1; color: #8e67c9; }
.direct-line { flex: 1; height: 2px; background: #cdbfe8; position: relative; overflow: visible; }
.direct-line i { position: absolute; top: -3px; left: calc(100% - 8px); width: 8px; height: 8px; border-radius: 50%; background: #9662e2; box-shadow: 0 0 13px #a576e9; }
.speed-comparison[data-step="0"] .direct-line i { animation: speed-request 1.1s linear both; }
@keyframes speed-request { from { left: 0; } to { left: calc(100% - 6px); } }
@media (max-width: 1100px) {
  .speed-lane { grid-template-columns: 145px minmax(0,1fr) 76px; gap: 15px; padding-inline: 22px; }
  .speed-station { width: 70px; }
  .speed-lane-label { padding-left: 33px; }
  .speed-lane-label > strong { font-size: 12px; }
  .direct-request { gap: 10px; padding-inline: 15px; }
}
@media (max-width: 800px) {
  .speed-heading { flex-direction: column; align-items: flex-start; gap: 20px; }
  .speed-heading > p { max-width: 500px; }
  .speed-lane { grid-template-columns: minmax(0,1fr) 65px; gap: 20px 15px; padding: 36px 20px; min-height: 220px; }
  .speed-lane-label { grid-column: 1 / -1; min-height: 32px; }
  .speed-lane-label > strong { font-size: 14px; }
  .speed-station { width: 70px; }
}
@media (max-width: 540px) {
  .api-speed { padding-block: 52px; }
  .speed-heading { margin-bottom: 30px; }
  .speed-topline { padding: 12px 15px; }
  #speed-play { width: 44px; height: 44px; flex: none; }
  .speed-lane { padding: 26px 15px; grid-template-columns: minmax(0,1fr); gap: 20px; }
  .speed-station { width: auto; min-width: 0; flex: 1; height: 87px; gap: 13px; border: 0; border-radius: 5px; font-size: 11px; text-align: center; }
  .speed-connector { min-width: 4px; flex: .15; }
  .speed-result { flex-direction: row; justify-content: flex-end; }
  .speed-result strong { font-size: 11px; }
  .speed-result > span { width: 27px; height: 27px; font-size: 16px; }
  .direct-request { padding: 14px 10px; gap: 9px; }
  .direct-request code { font-size: 11px; }
  .direct-request i { margin: 0; font-size: 18px; }
  .direct-line { min-width: 9px; }
}
@media (prefers-reduced-motion: reduce) { .speed-station { transition: none; } .direct-line i { animation: none !important; } }

/* Warm browser work, electric direct transport; all motion follows the pause control. */
.direct-result.is-ready { color: #7050a9; }
.direct-result.is-ready > span { background: #e1d3f6; border-color: #ba9ddd; }
.speed-station.is-current { transform: translateY(-3px); box-shadow: 0 6px 16px #a5773910; }
.speed-station { position: relative; transition: transform 250ms ease, background 250ms ease, border-color 250ms ease; }
.speed-station.is-current::after { content: ""; position: absolute; bottom: 0; left: 8%; height: 2px; width: 84%; background: #bd8854; transform-origin: left; animation: speed-load 1.1s linear both; }
.speed-station.is-current > span:first-child { animation: speed-work .65s ease-in-out infinite alternate; }
.speed-station.is-complete + .speed-connector::after { content: ""; position: absolute; inset: 0; background: #c69d70; }
.direct-line::after { content: ""; position: absolute; top: -1px; left: 0; height: 4px; width: 32%; background: linear-gradient(90deg, transparent, #ae86ea, #fff); border-radius: 4px; animation: speed-beam 1.1s cubic-bezier(.25,.1,.65,1) infinite; }
.direct-result.is-ready > span { animation: speed-arrival 1.8s ease-out infinite; }
.speed-comparison:not(.is-playing) *, .speed-comparison:not(.is-playing) *::after { animation-play-state: paused !important; }
@keyframes speed-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes speed-work { from { opacity: .5; transform: translateY(1px); } to { opacity: 1; transform: translateY(-2px); } }
@keyframes speed-beam { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 75%, 100% { left: 68%; opacity: 0; } }
@keyframes speed-arrival { 0% { box-shadow: 0 0 0 0 #9e71d93d; } 80%, 100% { box-shadow: 0 0 0 12px #9e71d900; } }
@media (prefers-reduced-motion: reduce) {
  .speed-comparison *, .speed-comparison *::after { animation: none !important; transition: none !important; }
  .direct-line::after { display: none; }
}