/* Selected wide first column, with a looping drag demonstration. */
.steps{display:grid;grid-template-columns:3fr 1.1fr 1.1fr;gap:0;border-top:1px solid #171717;align-items:stretch}
.steps:has(#step2[data-state="active"]){grid-template-columns:1.1fr 3fr 1.1fr}
.steps:has(#step3[data-state="active"]){grid-template-columns:1.1fr 1.1fr 3fr}
.steps .step{padding:28px 24px;min-width:0}
.steps .step+.step{border-left:1px solid #aaa}
.steps .step-number{font-size:32px;gap:12px;flex-wrap:wrap}
.steps .step-number span{font-size:8px;letter-spacing:1px}
.steps .step h2{font-size:24px;line-height:1.18;margin:18px 0}
.steps .step[data-state="active"] h2{font-size:clamp(28px,3vw,38px)}
.steps .step-summary{font-size:14px!important}
#setupLead{font-size:17px;line-height:1.5}
#watchExperience{display:flex;flex-direction:column;margin-top:26px}
#step1 .demo-wrap{order:1}
#shelfSlot{order:0;margin:0 0 24px;padding:0 0 24px;border:0;border-bottom:1px solid #b9ac73;gap:12px}
#shelfSlot .shelf-direction{font-size:14px;letter-spacing:0;text-align:center}
#shelfSlot .capture-chip{width:330px;max-width:100%;min-height:66px;font-size:23px;gap:12px;border:2px dashed #86774e}
#shelfSlot .capture-brand-icon{width:30px;height:auto}
#shelfSlot .grip{width:13px;height:23px}
#step1 .mini-browser{max-width:none}
#step1 .mini-toolbar{height:36px}
#step1 .mini-address{font-size:11px}
#step1 .mini-bookmarks{font-size:11px;gap:12px}
#step1 .animation-target{width:92px}
#step1 .animation-page{height:142px}
#step1 .demo-path{display:none}
#setupDone{display:flex;width:auto;min-width:190px;margin:28px auto 0;font-size:16px}
@media(max-width:760px){
.steps,.steps:has(#step2[data-state="active"]),.steps:has(#step3[data-state="active"]){grid-template-columns:1fr}
.steps .step+.step{border-left:0;border-top:1px solid #aaa}
.steps .step{padding:24px}
.steps .step[data-state="locked"],.steps .step[data-state="done"]{padding:20px 24px}
.steps .step h2{font-size:25px}
#shelfSlot .capture-chip{font-size:21px}
}