.viewport{position:relative;width:100vw;height:100vh;overflow:hidden;background-color:#fff8e1}.canvas{display:flex;height:100vh;background-color:#fff8e1}.panel{flex:0 0 100vw;height:100vh;overflow-y:auto;box-sizing:border-box;padding:20px;background-color:#fff8e1}.nav{display:flex;padding:10px 20px;background-color:#fff5d6;border-bottom:1px solid #e6d9a3}.nav button{background:none;border:none;padding:8px 15px;margin-right:5px;border-radius:4px;cursor:pointer;font-weight:500}.nav button:hover{background-color:#0066cc1a}.nav button.active{background-color:#06c;color:#fff}.nav button:disabled{opacity:.6;cursor:default}.nav-node{color:#06c;text-decoration:underline;cursor:pointer;display:inline-block;padding:0 4px;transition:all .2s ease;position:relative;font-size:1.1rem}.nav-node:hover{color:#004080;background-color:#0066cc1a;border-radius:2px}.destination-node{position:relative;padding:10px 14px 10px 25px;border-left:3px solid #0066cc;background-color:#0066cc14;border-radius:12px;display:block;margin:1.2rem 0;margin-left:-20px;margin-right:20px;text-align:left;width:calc(100% - 20px);box-shadow:0 2px 5px #0000000d}.destination-node p{font-size:1.1rem;line-height:1.6;margin-right:1rem}@keyframes dash{to{stroke-dashoffset:-20}}.page-container{width:80%;max-width:750px;margin:0 auto;padding:2rem 3rem;display:flex;flex-direction:column;background-color:#fff8e1}.page-content{margin-top:1rem;max-width:800px;margin-left:auto;margin-right:5rem;text-align:left;position:relative}.navigation-sidebar{position:fixed;left:0;top:0;width:250px;height:100vh;background-color:#fff5d6;border-right:1px solid #e6d9a3;padding:20px;overflow-y:auto;z-index:100}.sidebar-header{margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #e6d9a3}.sidebar-header h2{margin:0;font-size:1.5rem;color:#333}.nav-tree{list-style-type:none;padding:0;margin:0}.category-item{margin-bottom:10px}.category-button{display:block;width:100%;text-align:left;padding:10px 15px;background-color:#fffbea;border:1px solid #e6d9a3;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s}.category-button:hover{background-color:#fea}.category-button.active{background-color:#06c;color:#fff;border-color:#06c}.child-items{list-style-type:none;padding-left:20px;margin-top:5px}.child-item{margin-bottom:5px}.child-button{display:block;width:100%;text-align:left;padding:8px 15px;background-color:transparent;border:none;border-left:2px solid #e6d9a3;border-radius:0;cursor:pointer;transition:all .2s;font-size:.9rem}.child-button:hover{background-color:#fea;border-left:2px solid #cc9900}.child-button.active{background-color:#cc99001a;border-left:2px solid #cc9900;color:#805500;font-weight:600}.canvas-container{margin-left:250px;width:calc(100% - 250px);background-color:#fff8e1}.layout-container{display:flex;width:100%;height:100vh;background-color:#fff8e1}p{font-size:1.1rem;line-height:1.6;margin-bottom:1.2rem}.page-container h1{font-size:2.2rem;margin-bottom:1.5rem}.page-container h2{font-size:1.8rem;margin-top:2rem;margin-bottom:1.2rem}.page-container h3{font-size:1.5rem;margin-top:1.8rem;margin-bottom:1rem}li{font-size:1.1rem;line-height:1.5;margin-bottom:.5rem}html,body,#root{margin:0;padding:0;width:100%;height:100%;background:#fff;overflow:hidden}