body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f8f9fa;color:#333;line-height:1.6}.app-layout{display:flex;min-height:100vh}.sidebar{width:240px;background-color:#fff;border-right:1px solid #eaeaea;padding:2rem 1rem;box-shadow:0 2px 10px #0000000d;height:100vh;overflow:scroll}.sidebar h2{color:#333;font-size:1.2rem;margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:2px solid #f0f0f0}.sidebar li{margin-bottom:.5rem}.sidebar a{display:block;padding:.8rem 1rem;color:#555;text-decoration:none;border-radius:6px;transition:all .2s ease}.sidebar a:hover{background-color:#f0f6ff;color:#06c}.sidebar a.active{background-color:#e6f0ff;color:#0052cc;font-weight:500}.main-content{flex:1;padding:2rem;overflow-y:auto}@media (max-width: 768px){.app-layout{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid #eaeaea;padding:1rem}}.content-page{padding:1rem 0}.page-title{font-size:1.8rem;color:#333;margin-bottom:.5rem;font-weight:600}.page-description{color:#666;font-size:.9rem;margin-bottom:2rem;max-width:800px;line-height:1.6}.code-example-card{background-color:#fff;border-radius:8px;box-shadow:0 4px 15px #00000014;margin-bottom:2rem;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.card-header{padding:1.2rem 1.5rem;background-color:#f8f9fa;border-bottom:1px solid #eaeaea}.card-title{font-size:1.25rem;color:#333;margin-bottom:.5rem;font-weight:500}.card-description{color:#666;font-size:.8rem;line-height:1.5}.code-editor-container,.console-container{flex:1}.code-editor-container{border-right:1px solid #eaeaea}@media (max-width: 991px){.code-editor-container{border-right:none;border-bottom:1px solid #eaeaea}.sp-layout{display:flex;flex-direction:column}}.controls{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#f8f9fa;border-top:1px solid #eaeaea}.control-button{background-color:#06c;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.control-button:hover{background-color:#0052cc}.sp-wrapper{height:100%}.sp-layout{border-radius:0;border:none}.sp-tabs{background-color:#f8f9fa}.sp-console{color:#abb2bf;font-family:Fira Code,monospace;font-size:.9rem}.method-tag{display:inline-block;background-color:#e6f0ff;color:#06c;font-size:.8rem;padding:.2rem .5rem;border-radius:4px;margin-right:.5rem;font-weight:500}.compatibility-info{font-size:.85rem;color:#666;margin-top:.5rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}.app-layout{display:flex;height:100vh;width:100%}.sidebar{background-color:#f8f9fa;border-right:1px solid #dee2e6;width:280px;height:100vh;overflow-y:auto;transition:transform .3s ease;padding:16px;position:fixed;left:0;top:0;z-index:1000}.sidebar h2{margin-bottom:16px;color:#343a40;padding-bottom:8px;border-bottom:2px solid #007bff}.sidebar ul{list-style:none}.sidebar ul li{margin-bottom:8px}.sidebar ul li ul{margin-top:8px;margin-left:16px}.sidebar a{color:#495057;text-decoration:none;display:block;padding:6px 0;transition:color .2s}.sidebar a:hover{color:#007bff}.main-content{flex:1;padding:20px;margin-left:280px;height:100vh;overflow-y:auto;background-color:#fff}.menu-toggle{display:none;background:#007bff;color:#fff;border:none;padding:10px;position:fixed;top:10px;left:10px;z-index:1001;border-radius:4px;cursor:pointer}.sidebar::-webkit-scrollbar,.main-content::-webkit-scrollbar{width:8px;height:8px}.sidebar::-webkit-scrollbar-track,.main-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.sidebar::-webkit-scrollbar-thumb,.main-content::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.sidebar::-webkit-scrollbar-thumb:hover,.main-content::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.sidebar{transform:translate(-100%);width:250px}.sidebar.active{transform:translate(0)}.main-content{margin-left:0}.menu-toggle{display:block}.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:999}.overlay.active{display:block}}