:root{--background-dark:#1e1e1e;--surface-dark:#252526;--text-primary:#eaeaea;--text-secondary:#bbb;--accent-yellow:#fc0;--accent-yellow-hover:#fd3;--accent-yellow-dark:#c90;--border-color:#3c3c3c;--table-headers:#fff}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background-dark);color:var(--text-primary);display:flex;flex-direction:column;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;min-height:100vh;padding-bottom:0}.main-content{flex:1;position:relative}.page-header{margin-bottom:30px;padding:20px 0;text-align:center}.page-header h1{color:var(--accent-yellow);font-size:2.5rem;margin-bottom:10px}.page-header h3{color:var(--text-secondary);font-size:1.2rem;font-weight:400}a,a:active,a:hover,a:link,a:visited{text-decoration:none!important}.btn{background-color:var(--accent-yellow);border:none;border-radius:6px;color:#000;cursor:pointer;display:inline-block;font-size:14px;font-weight:600;margin:4px 2px;padding:9px 12px;text-align:left;text-decoration:none;transition:all .3s ease}.btn:hover{background-color:var(--accent-yellow-hover);transform:translateY(-1px)}.btn:disabled{background-color:var(--border-color);color:var(--text-secondary);cursor:not-allowed}.btn-accent{background-color:#4caf50;color:#fff}.btn-accent:hover{background-color:#45a049}.footer-content a,.footer-section a,.footer-section.logo-section a,.logo-container a,.logo-container h1 a,.main-footer a,.main-header a,.main-nav a,.main-nav ul li a,a,a:active,a:focus,a:hover,a:link,a:visited,footer a,header a{text-decoration:none!important;-webkit-text-decoration:none!important;-moz-text-decoration:none!important}.main-header{background-color:var(--background-dark);border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px rgba(0,0,0,.2);color:var(--text-primary);padding:15px 20px;position:sticky;top:0;z-index:1000}.header-content{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:0}.logo-container h1{font-size:1.8rem;font-weight:700;margin:0}.logo-container h1 a{color:inherit;text-decoration:none!important;transition:color .3s ease}.logo-container h1 a:hover{color:var(--accent-yellow)}.logo-container p{color:var(--text-secondary);font-size:.9rem}.menu-container{align-items:center;display:flex}.menu-icon{color:var(--accent-yellow);cursor:pointer;display:none;font-size:1.5rem;margin-left:20px}.main-nav ul{display:flex;list-style:none}.main-nav li{margin-left:20px}.main-nav ul li a{border-radius:4px;color:var(--text-primary);display:block;font-weight:500;padding:8px 15px;text-decoration:none!important;transition:background-color .3s ease,color .3s ease}.main-nav a.active,.main-nav a:hover{background-color:rgba(255,204,0,.1);color:var(--accent-yellow)}body{position:relative;z-index:0}.controls-section{align-items:center;display:flex;flex-direction:column;margin-bottom:20px;width:100%}.column-controls{gap:10px;margin-bottom:15px}.column-controls,.row-controls{align-items:center;background-color:var(--surface-dark);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;flex-wrap:wrap;justify-content:center;max-width:800px;padding:15px;width:100%}.row-controls{gap:8px}.row-controls input,.row-controls select{background-color:var(--background-dark);border:1px solid var(--border-color);border-radius:4px;box-sizing:border-box;color:var(--text-primary);font-size:14px;height:36px;padding:6px 8px;width:120px}.row-controls input:focus,.row-controls select:focus{border-color:var(--accent-yellow);outline:none}.row-controls label{color:var(--text-secondary);font-size:14px}#customRowsInput{display:none}#customRowsInput.visible{display:inline-block}.toolbar{align-items:center;background-color:var(--surface-dark);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 3px 6px rgba(0,0,0,.2);display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;padding:15px;position:relative;z-index:100}.toolbar-item{align-items:center;display:inline-flex;margin-right:5px}.toolbar-btn,.toolbar-select-wrapper{box-sizing:border-box;width:120px}.toolbar-input{appearance:textfield;-webkit-appearance:textfield;-moz-appearance:textfield;background-color:var(--background-dark);border:1px solid var(--border-color);border-radius:4px;box-sizing:border-box;color:var(--text-color);font-size:14px;height:36px;padding:8px;text-align:left;width:60px}.toolbar-input::-webkit-inner-spin-button,.toolbar-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.toolbar-input:focus{border-color:var(--accent-yellow);outline:none}.toolbar-btn{align-items:center;background-color:var(--background-dark);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color);cursor:pointer;display:flex;font-size:14px;gap:6px;height:36px;justify-content:center;overflow:hidden;padding:8px 12px;text-align:center;text-overflow:ellipsis;transition:all .2s ease;white-space:nowrap}.toolbar-btn:hover{background-color:var(--border-color);border-color:var(--accent-yellow)}.toolbar-btn.btn-accent{background-color:var(--accent-yellow);border-color:var(--accent-yellow-dark);color:#000}.toolbar-btn.btn-accent:hover{background-color:var(--accent-yellow-hover)}.toolbar-dropdown{display:inline-block;position:relative}.toolbar-dropdown-toggle{justify-content:center;padding-right:28px;position:relative;text-align:left}.toolbar-dropdown-toggle:after{color:var(--accent-yellow);content:"\f0d7";font-family:Font Awesome\ 6 Free;font-size:12px;font-weight:900;pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.toolbar-submenu{background-color:var(--surface-dark);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.3);display:none;left:0;margin:4px 0 0;min-width:120px;padding:8px 0;position:absolute;top:100%;z-index:99999}.toolbar-submenu.active{display:block}.toolbar-submenu-btn{align-items:center;background:none;border:none;color:var(--text-color);cursor:pointer;display:flex;font-size:14px;justify-content:flex-start;overflow:hidden;padding:8px 12px;text-align:left;text-overflow:ellipsis;transition:background-color .2s ease;white-space:nowrap;width:100%}.toolbar-submenu-btn:hover{background-color:var(--background-dark);color:var(--accent-yellow)}.toolbar-separator{background-color:var(--border-color);height:30px;margin:0 8px;width:1px}.toolbar-group{align-items:center;background-color:var(--background-dark);border:1px solid var(--border-color);border-radius:4px;display:flex;gap:8px;padding:10px;position:relative}.toolbar-input,.toolbar-select{color:var(--text-primary);padding:6px 10px}.toolbar-input,.toolbar-select{background-color:var(--background-dark);border:1px solid var(--border-color);border-radius:4px;font-size:14px}.toolbar-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;box-shadow:0 4px 8px rgba(0,0,0,.3);color:var(--text-color);cursor:pointer;height:36px;padding:8px 28px 8px 12px;text-align:center;text-overflow:ellipsis;width:100%}.toolbar-select-wrapper{display:inline-block;position:relative}.toolbar-select-wrapper:after{color:var(--accent-yellow);content:"\f0d7";font-family:Font Awesome\ 6 Free;font-size:12px;font-weight:900;pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:1}select.toolbar-select option{background-color:var(--surface-dark);border:none;color:var(--text-color);direction:ltr;font-size:14px;padding:8px 12px;text-align:left!important}select.toolbar-select option:focus,select.toolbar-select option:hover{background-color:var(--background-dark);color:var(--accent-yellow)}.toolbar-input:focus,.toolbar-select:focus{border-color:var(--accent-yellow);outline:none}@media (max-width:768px){.toolbar-btn,.toolbar-select-wrapper{width:100px}.toolbar-input{font-size:13px;width:50px}.toolbar-submenu{min-width:100px}.toolbar-dropdown-toggle{font-size:13px;padding-right:24px}.toolbar-dropdown-toggle:after,.toolbar-select-wrapper:after{font-size:11px;right:8px}.toolbar-select{font-size:13px;padding-right:24px}}@media (max-width:480px){.toolbar-btn,.toolbar-select-wrapper{font-size:12px;width:90px}.toolbar-input{font-size:12px;width:45px}.toolbar-submenu{min-width:90px}.toolbar-dropdown-toggle{padding-right:20px}.toolbar-dropdown-toggle:after,.toolbar-select-wrapper:after{font-size:10px;right:6px}.toolbar-select{padding-right:20px}.toolbar-label{font-size:12px}}.grid-section,.preview-section{background-color:var(--surface-dark);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.2);display:flex;flex-direction:column;height:auto;margin-bottom:20px;max-height:600px;min-height:500px;overflow-y:auto;padding:20px}.grid-section{position:relative;z-index:5}#spreadsheet{display:flex;flex:1;flex-direction:column;height:100%;min-height:450px;width:100%}.handsontable-container{flex:1;height:100%;overflow:hidden;position:relative;width:100%;z-index:20}.folder-preview{background-color:var(--surface-dark);border:1px solid var(--border-color);border-radius:8px;margin-top:30px;padding:20px}.preview-section h2{color:var(--text-primary);font-size:1.3rem;margin-bottom:15px;text-align:center}#folderPreview{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:14px;line-height:1.5;white-space:pre-wrap}.folder-item{align-items:center;display:flex;gap:8px;padding:2px 0}.main-footer{background-color:var(--surface-dark);border-top:1px solid var(--border-color);box-sizing:border-box;margin-top:0;padding:30px 20px 15px;width:100%}.footer-content{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin:0 auto;max-width:1200px}.footer-section{flex:1 1 200px;margin-bottom:15px;min-width:0}.footer-section.logo-section{align-items:flex-start;display:flex;flex:0 0 auto;font-size:2.5rem;justify-content:center;min-width:auto;padding-right:15px;padding-top:5px}.footer-section.logo-section a{color:inherit;display:block;text-decoration:none!important;transition:transform .3s ease}.footer-section.logo-section a:hover{transform:scale(1.1)}.footer-section h3{color:var(--accent-yellow);font-size:1.1rem;margin-bottom:12px}.footer-section p{color:var(--text-secondary);font-size:.9rem;line-height:1.4;margin-bottom:8px}.footer-section ul{list-style:none;margin:0;padding:0}.footer-section li{margin-bottom:8px}.footer-section a{color:var(--text-secondary);text-decoration:none!important;transition:color .3s ease}.footer-section a:hover{color:var(--accent-yellow)}.footer-bottom{border-top:1px solid hsla(0,0%,100%,.1);color:var(--text-tertiary);font-size:.85rem;margin-top:20px;padding-top:20px;text-align:center}#canvas{display:block;height:100%;left:0;margin-left:calc(50% - 50vw);pointer-events:none;position:absolute;top:0;width:100vw;z-index:-1}.tutorial-section{background-color:var(--surface-dark);border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);margin-bottom:30px;padding:25px}.tutorial-section h2{border-bottom:1px solid var(--border-color);color:var(--accent-yellow);margin-bottom:15px;padding-bottom:10px}.tutorial-section h3{color:var(--text-primary);margin:20px 0 10px}.step{align-items:flex-start;display:flex;margin-bottom:25px}.step-number{align-items:center;background-color:var(--accent-yellow);border-radius:50%;color:#000;display:flex;flex-shrink:0;font-weight:700;height:30px;justify-content:center;margin-right:15px;width:30px}.step-content{flex:1}.step-image{border:1px solid var(--border-color);border-radius:4px;margin:15px 0;max-width:100%}.tip-box{background-color:rgba(255,204,0,.1);border-left:4px solid var(--accent-yellow);border-radius:0 4px 4px 0;margin:20px 0;padding:15px}.tip-box h4{color:var(--accent-yellow);margin-bottom:10px}.example-table{border-collapse:collapse;margin:20px 0;width:100%}.example-table th{background-color:var(--accent-yellow-dark);color:var(--text-primary);padding:10px;text-align:left}.example-table td{border:1px solid var(--border-color);padding:10px}.example-table tr:nth-child(2n){background-color:rgba(60,60,60,.3)}.tutorial-nav{align-self:flex-start;background-color:var(--surface-dark);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:30px;max-height:calc(100vh - 120px);overflow-y:auto;padding:15px;position:sticky;top:80px;width:200px}.tutorial-nav h3{border-bottom:1px solid var(--border-color);color:var(--accent-yellow);font-size:1.1rem;margin-bottom:15px;padding-bottom:10px}.tutorial-nav ul{list-style-type:none;margin:0;padding:0}.tutorial-nav li{font-size:.9rem;margin-bottom:8px}.tutorial-nav a{border-radius:4px;color:var(--text-primary);display:block;padding:5px 8px;text-decoration:none;transition:all .3s ease}.tutorial-nav a:hover{background-color:rgba(255,204,0,.1);color:var(--accent-yellow)}@media (max-width:768px){.tutorial-layout{flex-direction:column}.tutorial-nav{margin-bottom:20px;max-height:none;overflow-y:visible;position:relative;top:0;width:100%}.tutorial-nav ul{display:flex;flex-wrap:wrap;gap:8px}.tutorial-nav li{margin-bottom:0}.tutorial-nav a{font-size:.85rem;padding:4px 8px;white-space:nowrap}.step{flex-direction:column}.step-number{margin-bottom:10px}}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background-dark);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--border-color);border:2px solid var(--background-dark);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--accent-yellow-dark)}*{scrollbar-color:var(--border-color) var(--background-dark);scrollbar-width:thin}.grid-section::-webkit-scrollbar,.preview-section::-webkit-scrollbar{height:10px;width:10px}.grid-section::-webkit-scrollbar-track,.preview-section::-webkit-scrollbar-track{background:var(--background-dark);border-radius:6px}.grid-section::-webkit-scrollbar-thumb,.preview-section::-webkit-scrollbar-thumb{background:var(--border-color);border:2px solid var(--background-dark);border-radius:6px}.grid-section::-webkit-scrollbar-thumb:hover,.preview-section::-webkit-scrollbar-thumb:hover{background:var(--accent-yellow-dark)}.grid-section,.preview-section{scrollbar-color:var(--border-color) var(--background-dark);scrollbar-width:thin}.blog-posts{display:flex;flex-direction:column;gap:30px}.blog-post{background-color:var(--surface-dark);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.2);padding:25px}.blog-post h2{color:var(--accent-yellow);font-size:1.8rem;margin-bottom:10px}.post-meta{border-bottom:1px solid var(--border-color);color:var(--text-secondary);display:flex;font-size:.9rem;gap:20px;margin-bottom:20px;padding-bottom:15px}.post-content{line-height:1.7}.post-content h3{color:var(--text-primary);font-size:1.3rem;margin:25px 0 10px}.post-content p,.post-content ul{margin-bottom:15px}.post-content ul{margin-left:20px}.post-content ul li{margin-bottom:8px}.main-content{margin:0 auto;max-width:1200px;padding:20px;transition:all .3s ease;width:100%}.controls-container,.flex-container,.grid-container,.section-container{max-width:100%;transition:all .3s ease;width:100%}img,video{height:auto;max-width:100%}canvas{max-width:none!important;width:100vw!important}@media (max-width:768px){.header-content{align-items:flex-start;flex-direction:column}.logo-container{margin-bottom:15px}.menu-icon{display:block;position:absolute;right:20px;top:20px}.main-nav{display:none;margin-top:15px;width:100%}.main-nav.active{display:block}.main-nav ul{flex-direction:column}.main-nav li{margin:0 0 10px}.main-content{padding:15px}.page-header h1{font-size:2rem}.page-header h3{font-size:1rem}.column-controls,.row-controls{flex-wrap:wrap;justify-content:center}button,input,select{min-height:44px}.footer-content{flex-direction:column}.footer-section{flex:100%;margin-bottom:20px}.blog-post{padding:20px}.blog-post h2{font-size:1.5rem}.post-content h3{font-size:1.2rem}.grid-preview-container{overflow-x:auto}#folderPreview{font-size:.9rem}}@media (max-width:480px){.page-header h1{font-size:1.8rem}.page-header h3{font-size:.9rem}.main-content{padding:10px}.control-group{align-items:stretch;flex-direction:column}.control-group>*{margin-bottom:10px;width:100%}.btn{margin:5px 0;text-align:center;width:100%}label{display:block;margin-bottom:5px}input,select{width:100%}.blog-post h2{font-size:1.3rem}.post-meta{align-items:flex-start;flex-direction:column}}@media (min-width:1200px){.main-content{padding:30px}.page-header h1{font-size:2.8rem}.page-header h3{font-size:1.4rem}}