.steps-list{gap:var(--tw-space-12);flex-direction:column;display:flex}.step-item{gap:var(--tw-space-6);padding-bottom:var(--tw-space-12);align-items:start;display:grid;position:relative}.step-item:after{content:"";background:var(--tw-gray-200);width:100vw;height:1px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.step-item:last-child{padding-bottom:0}.step-item:last-child:after{display:none}.step-number{font-family:var(--tw-font-display);color:var(--tw-amber-300);font-size:3rem;font-weight:700;line-height:1}.step-content{max-width:480px}.step-title{font-family:var(--tw-font-display);color:var(--tw-gray-900);margin:0 0 var(--tw-space-3)0;font-size:1.5rem;font-weight:600}.step-description{font-size:var(--tw-text-base);color:var(--tw-gray-600);line-height:var(--tw-leading-normal);margin:0 0 var(--tw-space-4)0}.step-example{padding:var(--tw-space-3)var(--tw-space-4);background:var(--tw-amber-50);border:1px solid var(--tw-amber-200);border-radius:var(--tw-radius-md);margin-bottom:var(--tw-space-4)}.step-example-label{font-size:var(--tw-text-xs);color:var(--tw-amber-700);text-transform:uppercase;letter-spacing:var(--tw-tracking-wide);margin-bottom:var(--tw-space-1);font-weight:600;display:block}.step-example p{font-size:var(--tw-text-sm);color:var(--tw-gray-700);margin:0;font-style:italic}.step-tips{gap:var(--tw-space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.step-tips li{align-items:center;gap:var(--tw-space-2);font-size:var(--tw-text-sm);color:var(--tw-gray-600);display:flex}.step-tips svg{color:var(--tw-success);flex-shrink:0}.step-visual{background:0 0;border-radius:0;justify-content:center;align-items:center;height:auto;display:none;overflow:visible}.feature-demo{padding:var(--tw-space-6);background:var(--tw-panel);border:1px solid var(--tw-gray-200);border-radius:var(--tw-radius-xl);justify-content:center;align-items:center;display:flex}.feature-demo-editor{padding:var(--tw-space-8)}.feature-demo-grid{background:var(--tw-gray-200);border-radius:var(--tw-radius-md);grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;display:grid}.feature-demo-grid span{background:var(--tw-gray-100);border-radius:2px;width:36px;height:36px}.feature-demo-grid span.selected{background:var(--tw-amber-400);box-shadow:0 0 0 2px var(--tw-amber-500)}.step-illustration{background:var(--tw-gray-100);border-radius:var(--tw-radius-xl);width:200px;height:160px;position:relative;overflow:hidden}.step-screenshot{border-radius:var(--tw-radius-xl);max-width:320px;max-height:280px;box-shadow:var(--tw-shadow-lg)}@media (min-width:1024px){.step-screenshot{max-width:400px;max-height:320px}}.mock-dialog{background:var(--tw-panel);border:1px solid var(--tw-gray-200);border-radius:var(--tw-radius-xl);width:200px;height:160px;box-shadow:var(--tw-shadow-lg);flex-direction:column;justify-content:space-between;gap:0;padding:14px;display:flex}@media (min-width:1024px){.mock-dialog{width:280px;height:200px;padding:20px}}.mock-dialog-header{flex-direction:column;gap:4px;display:flex}.mock-dialog-title{font-family:var(--tw-font-body);font-size:var(--tw-text-base);color:var(--tw-gray-900);margin:0;font-weight:600}.mock-dialog-desc{font-size:var(--tw-text-xs);color:var(--tw-gray-500);margin:0}.mock-dialog-body{flex-direction:column;gap:6px;display:flex}.mock-dialog-label{font-size:var(--tw-text-xs);color:var(--tw-gray-700);font-weight:600}.mock-dialog-input{border:1px solid var(--tw-amber-400);border-radius:var(--tw-radius-md);box-shadow:var(--tw-focus-ring);background:#fff;align-items:center;padding:8px 10px;display:flex}.mock-dialog-input-text{font-size:var(--tw-text-sm);color:var(--tw-gray-900)}.mock-dialog-input-cursor{background:var(--tw-gray-900);width:1px;height:14px;margin-left:1px;animation:1s step-end infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.mock-dialog-footer{justify-content:flex-end;gap:8px;display:flex}.mock-dialog-btn-cancel{font-size:var(--tw-text-xs);color:var(--tw-gray-700);background:var(--tw-panel);border:1px solid var(--tw-gray-300);border-radius:var(--tw-radius-md);padding:6px 12px;font-weight:600}.mock-dialog-btn-create{font-size:var(--tw-text-xs);color:var(--tw-gray-900);background:var(--tw-amber-400);border-radius:var(--tw-radius-md);box-shadow:var(--tw-btn-primary-shadow);padding:6px 12px;font-weight:600}.mock-export{gap:var(--tw-space-3);flex-direction:column;display:flex;position:relative}.mock-export-label{font-size:var(--tw-text-xs);color:var(--tw-gray-500);text-transform:uppercase;letter-spacing:var(--tw-tracking-wide);font-weight:600}.mock-export-row{gap:var(--tw-space-4);display:flex}.mock-export-btn{align-items:center;gap:var(--tw-space-3);background:var(--tw-gray-50);border:1px solid var(--tw-gray-200);border-radius:var(--tw-radius-md);flex-direction:column;width:120px;padding:24px 0;display:flex}.mock-export-btn strong{font-size:var(--tw-text-xs);color:var(--tw-gray-900);white-space:nowrap;font-weight:600}.mock-export-icon{border:1px solid var(--tw-gray-200);border-radius:var(--tw-radius-md);width:52px;height:52px;color:var(--tw-gray-600);background:#fff;justify-content:center;align-items:center;display:flex}.mock-export-btn.mock-export-active{background:var(--tw-gray-100);border-color:var(--tw-gray-300);position:relative}.mock-export-btn.mock-export-active .mock-export-icon{background:var(--tw-amber-50);border-color:var(--tw-amber-200);color:var(--tw-amber-600)}.mock-export-cursor{color:var(--tw-gray-700);position:absolute;bottom:-6px;right:-4px}.step-2:before{content:"";border-radius:var(--tw-radius-md);background:linear-gradient(135deg,#7cb342 0%,#558b2f 100%);position:absolute;inset:15%}.step-3{grid-template-columns:repeat(3,1fr);gap:8px;padding:20%;display:grid}.step-3:before,.step-3:after{content:"";background:var(--tw-amber-400);border-radius:4px}.step-4:before{content:"";background:linear-gradient(135deg,#81c784 0%,#4caf50 100%);border-radius:50%/60% 60% 40% 40%;width:40%;height:40%;position:absolute;bottom:20%;left:30%}.step-5:before{content:"";background:var(--tw-panel);border:2px solid var(--tw-gray-300);border-radius:var(--tw-radius-md);position:absolute;inset:15%}.tips-grid{gap:var(--tw-space-4);margin-top:var(--tw-space-8);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.tip-card{padding:var(--tw-space-5);background:var(--tw-panel);border:1px solid var(--tw-gray-200);border-radius:var(--tw-radius-lg);transition:all var(--tw-duration-fast)var(--tw-ease-out-soft)}.tip-card:hover{border-color:var(--tw-amber-300);box-shadow:var(--tw-shadow-md);transform:translateY(-2px)}.tip-icon{background:linear-gradient(135deg,var(--tw-amber-100)0%,var(--tw-amber-50)100%);border:1px solid var(--tw-amber-200);border-radius:var(--tw-radius-lg);width:52px;height:52px;color:var(--tw-amber-600);margin-bottom:var(--tw-space-3);justify-content:center;align-items:center;display:flex}.tip-card h3{font-size:var(--tw-text-base);color:var(--tw-gray-900);margin:0 0 var(--tw-space-2)0;font-weight:600}.tip-card p{font-size:var(--tw-text-sm);color:var(--tw-gray-600);line-height:var(--tw-leading-normal);margin:0}.video-placeholder{text-align:center;padding:var(--tw-space-12)var(--tw-space-6);background:var(--tw-panel);border:2px dashed var(--tw-gray-300);border-radius:var(--tw-radius-xl)}.video-icon{background:var(--tw-amber-100);width:80px;height:80px;color:var(--tw-amber-600);margin-bottom:var(--tw-space-4);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.video-placeholder h3{font-family:var(--tw-font-display);color:var(--tw-gray-900);margin:0 0 var(--tw-space-2)0;font-size:1.25rem;font-weight:600}.video-placeholder p{font-size:var(--tw-text-sm);color:var(--tw-gray-600);margin:0 0 var(--tw-space-4)0}.video-cta{align-items:center;gap:var(--tw-space-2);padding:var(--tw-space-2)var(--tw-space-4);font-size:var(--tw-text-sm);color:var(--tw-btn-primary-text);background:var(--tw-btn-primary-bg);border-radius:var(--tw-radius-md);transition:all var(--tw-duration-fast)var(--tw-ease-out-soft);font-weight:600;text-decoration:none;display:inline-flex}.video-cta:hover{background:var(--tw-btn-primary-bg-hover);transform:translateY(-1px)}@media (min-width:768px){.step-item{gap:var(--tw-space-8);grid-template-columns:auto 1fr auto;align-items:center}.step-visual{margin-right:var(--tw-space-6);display:flex}.step-item:nth-child(2n){direction:rtl}.step-item:nth-child(2n)>*{direction:ltr}.step-item:nth-child(2n) .step-visual{margin-right:0;margin-left:var(--tw-space-6)}}@media (min-width:1024px){.step-illustration{width:280px;height:200px}}