.pi-section{width:var(--pi-width,100%)}.pi-wrap{border:1px solid rgba(0,0,0,.1);border-radius:var(--pi-radius,16px);display:flex;height:var(--pi-height,460px);overflow:hidden}.pi-wrap.pi-reverse{flex-direction:row-reverse}.pi-wrap.pi-reverse .pi-steps-panel{border-left:none;border-right:1px solid rgba(0,0,0,.08)}.pi-wrap.pi-reverse .pi-step-item:before{border-radius:2px 0 0 2px;left:auto;right:-1.5rem}.pi-photo-panel{background:#111;flex:1.4;overflow:hidden;position:relative}.pi-bg{background-position:50%;background-size:cover;inset:0;opacity:0;position:absolute;transform:scale(1.05);transition:opacity .45s ease,transform .45s ease}.pi-bg.active{opacity:1;transform:scale(1)}.pi-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 55%,rgba(0,0,0,.1));inset:0;position:absolute;z-index:1}.pi-photo-content{bottom:0;left:0;padding:2rem;position:absolute;right:0;z-index:2}.pi-step-label{color:hsla(0,0%,100%,.5);font-size:10px;font-weight:500;letter-spacing:.12em;margin:0 0 6px}.pi-photo-title{color:#fff;font-size:26px;font-weight:500;line-height:1.2;margin:0 0 8px;transition:opacity .3s ease}.pi-photo-desc{color:hsla(0,0%,100%,.72);font-size:14px;line-height:1.6;margin:0;max-width:340px;transition:opacity .3s ease}.pi-dot-nav{bottom:1.75rem;display:flex;gap:6px;position:absolute;right:1.75rem;z-index:3}.pi-dot{background:hsla(0,0%,100%,.3);border:none;border-radius:50%;cursor:pointer;height:6px;padding:0;transition:background .25s,width .3s;width:6px}.pi-dot.active{background:#fff;border-radius:3px;width:20px}.pi-steps-panel{background:var(--pi-bg-panel,#fff);border-left:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;flex-shrink:0;justify-content:center;padding:1.75rem 1.5rem;width:280px}.pi-steps-header{color:#aaa;font-size:10px;font-weight:500;letter-spacing:.12em;margin:0 0 1.25rem}.pi-step-item{align-items:center;border-bottom:1px solid rgba(0,0,0,.07);cursor:pointer;display:flex;gap:.875rem;padding:.9rem 0;position:relative;transition:opacity .2s}.pi-step-item:last-child{border-bottom:none}.pi-step-item:hover{opacity:.65}.pi-step-item:before{background:var(--pi-active-color);border-radius:0 2px 2px 0;bottom:0;content:"";left:-1.5rem;opacity:0;position:absolute;top:0;transition:opacity .25s;width:3px}.pi-step-item.active:before{opacity:1}.pi-step-num{align-items:center;background:#f0efeb;border-radius:50%;color:#888;display:flex;flex-shrink:0;font-size:var(--pi-indicator-font-size);font-weight:600;height:var(--pi-indicator-circle-size);justify-content:center;line-height:1;transition:background .25s ease,color .25s ease,transform .25s ease;width:var(--pi-indicator-circle-size)}.pi-step-item.active .pi-step-num{background:var(--pi-active-color);color:#fff}.pi-step-name{color:#999;flex:1;font-size:13px;line-height:1.35;transition:color .2s}.pi-step-item.active .pi-step-name{color:var(--pi-active_color);font-weight:500}.pi-step-arrow{color:var(--pi-active-color);flex-shrink:0;font-size:14px;opacity:0;transition:opacity .2s}.pi-step-item.active .pi-step-arrow{opacity:1}.pi-progress-bar{background:rgba(0,0,0,.08);border-radius:2px;height:3px;margin-top:1.5rem;overflow:hidden}.pi-progress-fill{background:var(--pi-active-color);border-radius:2px;height:100%;transition:width .45s ease}@media (max-width:640px){.pi-wrap,.pi-wrap.pi-reverse{flex-direction:column;height:auto}.pi-photo-panel{flex:none;height:260px}.pi-photo-title{font-size:20px}.pi-photo-desc{font-size:13px}.pi-photo-content{padding:1.25rem}.pi-steps-panel{border-left:none;border-right:none;border-top:1px solid rgba(0,0,0,.08);justify-content:flex-start;padding:1.25rem 1.25rem 1.5rem;width:100%}.pi-step-item:before,.pi-wrap.pi-reverse .pi-step-item:before{border-radius:0 2px 2px 0;left:-1.25rem;right:auto}.pi-progress-bar{margin-top:1rem}}