.editor-container{display:flex;width:100%;height:calc(100vh - 4rem);margin-top:4rem;overflow:hidden;background-color:#fafafa}.editor-nav{width:144px;min-width:144px;height:100%;background-color:#f5f5f7;border-right:1px solid #e5e5ea;display:flex;flex-direction:column;padding-top:20px;position:relative;transition:all .3s ease}.nav-btn{border:none;background:0 0;padding:12px;font-size:.95rem;color:#515154;text-align:center;cursor:pointer;transition:all .3s ease;margin:0 12px 16px;border-radius:12px;position:relative;overflow:hidden}.nav-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,122,255,0);border-radius:12px;transform:scale(.9);transition:all .3s ease;z-index:-1}.nav-btn:hover{background-color:rgba(0,122,255,.05);color:#1d1d1f;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.05)}.nav-btn.active{background-color:#0071e3;color:#fff;font-weight:500;transform:translateY(0);box-shadow:0 2px 5px rgba(0,113,227,.3)}.page-content{flex:1;overflow-y:auto;padding:20px 40px;background-color:#fff;position:relative;transition:all .3s ease}.tutorial-section{display:none;max-width:900px;margin:0 auto}.tutorial-section.active{display:block}.tutorial-section h1{font-size:2.5rem;font-weight:600;color:#1d1d1f;margin:0 0 2rem;padding-bottom:1rem;border-bottom:1px solid #e6e6e6;transition:color .3s ease}.tutorial-body{color:#333;line-height:1.6}.tutorial-body h2{font-size:1.8rem;font-weight:500;color:#0071e3;margin:2rem 0 1rem;transition:color .3s ease}.tutorial-body h3{font-size:1.3rem;font-weight:500;color:#0071e3;margin:1.5rem 0 1rem;transition:color .3s ease}.tutorial-body p{margin-bottom:1rem;transition:color .3s ease}.tutorial-body ol,.tutorial-body ul{padding-left:1.5rem;margin-bottom:1.5rem}.tutorial-body li{margin-bottom:.5rem;position:relative;transition:transform .2s ease}.tutorial-body li:hover{transform:translateX(3px);color:#0071e3}.tutorial-body code{background-color:#f5f5f7;padding:.2rem .5rem;border-radius:8px;font-family:monospace;font-size:.9rem;display:block;margin:1rem 0;padding:1rem;white-space:pre-wrap;word-break:break-all;transition:background-color .3s ease,box-shadow .3s ease}.tutorial-body code:hover{background-color:#f0f0f2;box-shadow:0 2px 8px rgba(0,0,0,.05)}.tutorial-body pre{background-color:#f5f5f7;padding:1rem;border-radius:8px;font-family:monospace;font-size:.9rem;overflow-x:auto;margin:1rem 0;transition:background-color .3s ease,box-shadow .3s ease}.tutorial-body pre:hover{background-color:#f0f0f2;box-shadow:0 2px 8px rgba(0,0,0,.05)}.tutorial-body a{color:#0071e3;text-decoration:none;transition:all .3s ease;position:relative}.tutorial-body a:after{content:'';position:absolute;width:100%;height:1px;bottom:-2px;left:0;background-color:#0071e3;transform:scaleX(0);transform-origin:bottom right;transition:transform .3s ease}.tutorial-body a:hover{color:#2997ff}.tutorial-body a:hover:after{transform:scaleX(1);transform-origin:bottom left}.image-container{margin:2rem 0;text-align:center;transition:transform .3s ease}.tutorial-image{max-width:100%;height:auto;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:all .4s ease;transform:scale(1)}.image-container:hover .tutorial-image{transform:scale(1.02);box-shadow:0 6px 18px rgba(0,0,0,.15)}.tutorial-section h1:after{content:'';display:block;width:50px;height:3px;background:linear-gradient(90deg,#0071e3,#34c759);margin-top:10px;border-radius:3px}@media (max-width:992px){.editor-container{flex-direction:column;height:auto}.editor-nav{width:100%;min-width:auto;height:auto;padding-top:10px;flex-direction:row;justify-content:center;border-right:none;border-bottom:1px solid #e5e5ea;overflow-x:auto;padding-bottom:10px}.nav-btn{margin:0 5px 0;padding:8px 15px;white-space:nowrap}.page-content{height:calc(100vh - 8rem);padding:20px}.tutorial-section h1{font-size:2rem}}@media (max-width:576px){.page-content{padding:15px}.tutorial-section h1{font-size:1.8rem;margin-bottom:1.5rem}.tutorial-body h2{font-size:1.5rem}.tutorial-body h3{font-size:1.2rem}.image-container:hover .tutorial-image{transform:none}}