.step-navigation{display:flex;gap:0;background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.1);padding:0 4%;margin-bottom:32px;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:space-around;width:100%;max-width:100%}.step-btn{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px;background:transparent;border:none;border-bottom:2px solid transparent;color:#ffffff80;font-size:16px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all .2s ease;position:relative;white-space:nowrap;min-width:fit-content}.step-btn:hover{background:#ffffff08;color:#fffc}.step-btn.active{color:#fff;border-bottom-color:#fff;background:#ffffff0d}.step-icon{width:20px;height:20px;display:block;flex-shrink:0;opacity:.5;transition:opacity .2s ease}.step-btn:hover .step-icon,.step-btn.active .step-icon{opacity:1}.step-label{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@media(max-width:786px){.step-navigation{display:none}}@media(max-width:768px){.step-navigation{padding:0 3%;margin-bottom:24px}.step-btn{padding:14px 16px;font-size:12px}.step-icon{width:18px;height:18px}}@media(max-width:480px){.step-navigation{padding:0 2%;margin-bottom:20px}.step-btn{padding:12px;font-size:11px;letter-spacing:.3px}.step-icon{width:16px;height:16px}}.step-language-selector{display:flex;gap:8px;align-items:center}.step-language-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#ffffff80;cursor:pointer;transition:all .2s ease;font-size:16px}.step-language-btn:hover{background:#ffffff1a;color:#fffc;border-color:#fff3}.step-language-btn.active{background:#ffffff26;color:#fff;border-color:#ffffff4d}@media(max-width:768px){.step-language-selector{gap:6px}.step-language-btn{width:30px;height:30px;font-size:15px}}@media(max-width:480px){.step-language-selector{gap:6px;justify-content:center}.step-language-btn{width:28px;height:28px;font-size:14px}}.step-left-panel{padding:32px;color:#fff;width:100%;min-width:0}.step-panel-title{font-size:clamp(20px,3vw,26px);font-weight:700;margin:0 0 16px;line-height:1.3}.step-panel-description{font-size:clamp(13px,2vw,15px);color:#ffffffb3;margin:0 0 12px;line-height:1.5}.step-panel-details{font-size:clamp(12px,1.8vw,14px);color:#ffffff80;margin:0 0 24px;line-height:1.6}.step-panel-details p{margin:0 0 8px}.step-panel-details p:last-child{margin-bottom:0}.step-inline-code{background:#ffffff1a;padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,Courier New,monospace;font-size:.9em;color:#ffffffe6}.step-highlight-text{color:#fff;font-weight:500}.step-read-docs-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:24px;text-decoration:none}.step-read-docs-btn:hover{background:#ffffff26;border-color:#ffffff4d;transform:translate(2px)}.step-auto-discovery-box{display:flex;gap:16px;margin-top:24px;align-items:stretch}.step-auto-discovery-line{width:4px;background:#6496ff;border-radius:2px;flex-shrink:0}.step-auto-discovery-content{flex:1;font-size:13px;color:#ffffffb3;line-height:1.6}@media(max-width:786px){.step-left-panel{display:none}}@media(max-width:768px){.step-left-panel{padding:20px;max-width:100%}.step-panel-title{font-size:clamp(18px,4vw,22px)}.step-panel-description{font-size:clamp(12px,2.5vw,14px)}.step-panel-details{font-size:clamp(11px,2vw,13px)}.step-read-docs-btn{font-size:12px;padding:8px 16px}.step-auto-discovery-box{gap:12px;margin-top:20px}.step-auto-discovery-line{width:3px}.step-auto-discovery-content{font-size:11px}}@media(max-width:480px){.step-left-panel{padding:20px 16px}.step-panel-title{margin-bottom:12px}.step-panel-description{margin-bottom:10px}.step-panel-details{margin-bottom:20px}.step-read-docs-btn{font-size:12px;padding:8px 16px;margin-bottom:20px}.step-auto-discovery-box{gap:10px;margin-top:20px}.step-auto-discovery-line{width:3px}.step-auto-discovery-content{font-size:11px}}.step-code-display{background:transparent;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.1);width:100%;min-width:0;display:flex;flex-direction:column;max-width:100%}.step-code-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:transparent;border-bottom:1px solid rgba(255,255,255,.1);gap:16px;flex-wrap:wrap}.step-code-header .step-category-tabs{flex:1;min-width:0;max-width:100%}@media(max-width:1024px){.step-code-header{gap:12px}.step-code-header .step-category-tabs{flex:1 1 100%;width:100%}}.step-code-inner-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 0;border-bottom:1px solid rgba(255,255,255,.1);background:#0003;min-height:36px}@media(max-width:786px){.step-code-inner-header{flex-direction:column;align-items:flex-start;padding:12px 16px 8px;gap:12px}.step-code-language{order:1;width:100%;margin-bottom:0}.step-code-filename-group{order:2;width:100%}}.step-code-filename-group{display:flex;gap:6px;align-items:flex-end}.step-code-filename-tab{border:none;outline:none;cursor:pointer;background:#ffffff0a;font-size:12px;color:#ffffffe6;font-family:Monaco,Menlo,monospace;padding:8px 16px;border:1px solid rgba(255,255,255,.1);border-bottom:none;border-radius:6px 6px 0 0;white-space:nowrap;position:relative;margin-bottom:-1px;display:inline-block}.step-code-filename-tab.active{background:#ffffff1f;border-color:#fff3}.step-code-language{display:flex;align-items:center;margin-bottom:4px}.step-code-actions{display:flex;gap:8px;justify-content:center;align-items:center}.step-copy-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff9;cursor:pointer;transition:all .2s ease;z-index:10}.step-copy-btn:hover{background:#ffffff1a;color:#ffffffe6}.step-code-content{overflow-x:auto;overflow-y:auto;max-height:600px;min-height:580px;height:580px;width:100%;min-width:0;max-width:100%;background:transparent;position:relative;display:flex;flex-direction:column}.step-code-wrapper{position:relative;flex:1;overflow:auto}.step-code-wrapper pre{margin:0;padding:16px;font-size:13px;line-height:1.6;font-family:Monaco,Menlo,Courier New,monospace;min-width:100%;width:max-content;background:transparent!important;display:block;box-sizing:border-box;contain:layout style;height:100%;overflow:auto}.step-code-wrapper pre[class*=language-]{background:transparent!important}.step-code-line{display:flex;transition:background-color .3s ease;padding:2px 0 2px 3px;min-width:0;width:100%;box-sizing:border-box;position:relative}.step-code-line.step-highlight-line{background:#2b7dff1a;border-left:3px solid rgba(43,125,255,.8);margin-left:-3px;padding-left:0}.step-line-number{display:inline-block;width:40px;text-align:right;padding-right:16px;color:#ffffff4d;-webkit-user-select:none;user-select:none;flex-shrink:0}.step-line-content{flex:1;min-width:0;overflow:visible}.step-code-content::-webkit-scrollbar{width:8px;height:8px}.code-content::-webkit-scrollbar-track{background:#0003}.code-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.code-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media(max-width:1024px){.step-code-content{max-height:450px;min-height:450px;height:450px}.step-code-wrapper pre{font-size:11px;padding:12px}.step-line-number{width:32px;padding-right:10px;font-size:10px}}@media(max-width:768px){.step-code-header{padding:10px 14px;flex-direction:column;align-items:stretch;gap:12px}.step-code-header .step-category-tabs{width:100%}.step-code-inner-header{padding-left:12px;padding-top:6px;min-height:32px}.step-code-filename-tab{font-size:10px;padding:6px 12px}.step-copy-btn{width:28px;height:28px;top:8px;right:8px}.step-code-content{max-height:350px;min-height:350px;height:350px}.step-code-wrapper pre{font-size:10px;padding:10px;line-height:1.5}.step-line-number{width:28px;padding-right:8px;font-size:9px}}@media(max-width:480px){.step-code-display{border-radius:6px}.step-code-header{padding:8px 12px;flex-direction:column;align-items:stretch;gap:10px}.step-code-header .step-category-tabs{width:100%}.step-code-inner-header{padding-left:10px;padding-top:6px;min-height:30px}.step-code-filename-tab{font-size:9px;padding:5px 10px}.step-copy-btn{width:26px;height:26px;top:6px;right:6px;font-size:12px}.step-code-content{max-height:350px;min-height:350px;height:350px}.step-code-wrapper pre{font-size:10px;padding:10px;line-height:1.4}.step-line-number{width:28px;padding-right:8px;font-size:9px}.step-code-line.step-highlight-line{border-left-width:2px;margin-left:-2px}}*{box-sizing:border-box}html{width:100%}body{margin:0;padding:0;background:#0a0a0a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%}.step-app{background:#0a0a0a;color:#fff;width:100%}.step-app-content{margin:0 auto;padding:0 32px 32px;width:100%}.step-content-body{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:center;width:100%;min-width:0}.step-code-section{display:flex;flex-direction:column;gap:16px;min-width:0;width:100%}.step-code-header-controls{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:nowrap;min-width:0;width:100%}@media(max-width:1024px){.step-app-content{padding:0 24px 24px}.step-content-body{grid-template-columns:1fr 1.3fr;gap:24px;width:100%;min-width:0}.step-left-panel{width:100%;max-width:100%;min-width:0}.step-code-section{width:100%;min-width:0}.step-code-header-controls{gap:16px;flex-wrap:wrap}}@media(max-width:786px){.step-content-body{grid-template-columns:1fr;gap:0}.step-left-panel{display:none}}@media(max-width:768px){.step-app-content{padding:0 16px 16px}.step-content-body{grid-template-columns:1fr;gap:24px}.step-code-header-controls{flex-direction:column;align-items:stretch;gap:16px}}@media(max-width:480px){.step-app-content{padding:0 12px 12px}.step-content-body{gap:20px}}.step-code-line{transition:background-color .3s ease}
