/* steps — 01 connect (MCP client marquee), 02→03 one demo at a time: prompt types, real pieces land one by one, then it moves to the next screen. */
#steps .steps-head{margin-bottom:clamp(36px,5vw,56px)}
#steps .steps-n{font:500 12.5px var(--mono);color:var(--sel);margin:0 0 8px;letter-spacing:.02em}
#steps .steps-conn{text-align:center}
#steps .steps-conn .body{max-width:430px;margin:0 auto}

/* 01 — client marquee: monochrome Simple Icons */
#steps .steps-marq{position:relative;overflow:hidden;max-width:1440px;margin:clamp(26px,3.4vw,40px) auto clamp(64px,8vw,104px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
#steps .steps-row{display:flex;width:max-content;animation:steps-marq 42s linear infinite}
#steps .steps-marq:hover .steps-row{animation-play-state:paused}
#steps .steps-set{display:flex;align-items:center;margin:0;padding:0;list-style:none}
#steps .steps-set li{display:flex;align-items:center;gap:11px;padding:8px 34px;white-space:nowrap;font:500 20px/1 var(--sans);letter-spacing:-.03em;color:var(--ink2);transition:color .25s}
#steps .steps-set li:hover{color:var(--ink)}
#steps .steps-set svg{flex:none;width:24px;height:24px;fill:currentColor}
@keyframes steps-marq{to{transform:translate3d(-50%,0,0)}}

/* 02 → 03 */
#steps .steps-n2,#steps .steps-h3,#steps .steps-sub{text-align:center}
#steps .steps-sub{max-width:520px;margin:10px auto clamp(28px,4vw,44px)}

#steps .demo{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:clamp(18px,2.6vw,32px);align-items:stretch;max-width:1020px;margin:0 auto}
#steps .demo-side{display:flex;flex-direction:column;gap:14px;min-width:0}

#steps .demo-tabs{display:flex;flex-direction:column;gap:6px}
#steps .demo-tab{position:relative;overflow:hidden;display:flex;align-items:center;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--mute);font:500 14px var(--sans);letter-spacing:-.01em;text-align:left;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
#steps .demo-tab:hover{color:var(--ink)}
#steps .demo-tab.on{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:0 6px 16px -10px rgba(23,22,27,.25)}
#steps .demo-tab i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--sel);transform:scaleX(0);transform-origin:0 50%}
#steps .demo-tab.on i{transform:scaleX(var(--p,0))}

#steps .demo-prompt{margin:0;min-height:calc(1.5em*5 + 28px);padding:14px 16px;border-radius:14px 14px 14px 4px;background:var(--night);color:var(--ntext);font:400 13.5px/1.5 var(--sans);box-shadow:0 14px 30px -16px rgba(23,22,27,.5)}
#steps .demo-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--stud);animation:steps-blink 1s steps(1) infinite}
@keyframes steps-blink{50%{opacity:0}}

#steps .demo-log{list-style:none;margin:0;padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font:500 11.5px/1.5 var(--mono);color:var(--ink2);display:flex;flex-direction:column;gap:2px;min-height:calc(1.5em*5 + 20px)}
#steps .demo-log li{display:flex;gap:8px;white-space:nowrap;overflow:hidden;animation:steps-in .25s var(--ease) both}
#steps .demo-log li b{color:var(--ok);font-weight:500}
#steps .demo-log li em{font-style:normal;color:var(--mute);margin-left:auto}
@keyframes steps-in{from{opacity:0;transform:translateY(4px)}}

#steps .demo-stage{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,#232a3a,#161b27);aspect-ratio:4/3;min-height:0}
#steps .demo-worlds{position:absolute;inset:0}
#steps .demo-world{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;transition:opacity .35s ease}
#steps .demo-world.on{opacity:1}
#steps .demo-world img{position:absolute;display:block;max-width:none;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .22s ease,transform .38s var(--ease)}
#steps .demo-world img.on{opacity:1;transform:none}
#steps .demo-sel{position:absolute;pointer-events:none;border:2px solid var(--sel);background:var(--sel-soft);border-radius:2px;opacity:0;transition:opacity .4s ease .05s}
#steps .demo-sel.on{opacity:1;transition:none}
#steps .demo-tag{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;font:500 11.5px var(--mono);color:#fff;background:rgba(18,17,22,.74);backdrop-filter:blur(6px);padding:6px 10px;border-radius:7px;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s var(--ease)}
#steps .demo-tag i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
#steps .demo-tag b{font-weight:500}
#steps .demo.done .demo-tag{opacity:1;transform:none}

#steps .steps-notes{list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;justify-content:center;flex-wrap:wrap;gap:10px 34px;font-size:14.5px;color:var(--ink2)}
#steps .steps-notes li{display:flex;align-items:center;gap:9px}
#steps .steps-notes li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

@media (max-width:860px){
  #steps .demo{grid-template-columns:1fr;max-width:560px}
  #steps .demo-tabs{flex-direction:row;overflow-x:auto;gap:6px}
  #steps .demo-tab{flex:1 0 auto;justify-content:center;white-space:nowrap}
  #steps .demo-prompt{min-height:calc(1.5em*4 + 28px)}
  #steps .demo-log{display:none}
  #steps .demo-stage{order:-1}
  #steps .steps-set li{padding:6px 22px;font-size:17px;gap:9px}
  #steps .steps-set svg{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  #steps .steps-marq{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  #steps .steps-row{animation:none}
  #steps .demo-caret{animation:none}
  #steps .demo-world,#steps .demo-world img,#steps .demo-tag{transition:none}
  #steps .demo-log li{animation:none}
}