:root{--kolam-font-sans: "Space Grotesk", sans-serif;--kolam-font-mono: "Chicago", "Geneva", "Monaco", "Courier New", monospace;--kolam-color-background: #ffffff;--kolam-color-surface: #ffffff;--kolam-color-text: #000000;--kolam-color-border: #000000;--kolam-color-muted: #7a7a7a;--kolam-overlay-bg: rgba(0, 0, 0, .8);--kolam-transition-fast: .1s ease;--kolam-outline-width: 2px;--kolam-outline-color: #000000;--kolam-outline-offset: 2px}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;width:100vw;min-width:320px;overflow-x:hidden;font-family:var(--kolam-font-sans);background:var(--kolam-color-background);color:var(--kolam-color-text)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;color:inherit}.App{min-height:100vh;background:var(--kolam-color-background);color:var(--kolam-color-text)}:where(.control-panel,.editor-tool-column,.menu-bar,.pattern-ribbon,.pattern-gallery,.compact-editing-toolbar,.shortcuts-panel,.pattern-selection-indicator,.menu-dropdown,.pattern-strip-container){background:var(--kolam-color-surface);color:var(--kolam-color-text);border:1px solid var(--kolam-color-border);border-radius:0;box-shadow:none}.shortcuts-overlay{background:var(--kolam-overlay-bg)}:where(.toolbar-button,.control-button,.file-upload-button,.tab-button,.help-button){font:inherit;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--kolam-color-border);border-radius:0;background:var(--kolam-color-surface);color:var(--kolam-color-text);cursor:pointer;transition:background var(--kolam-transition-fast),color var(--kolam-transition-fast),outline var(--kolam-transition-fast);box-shadow:none}:where(.toolbar-button,.control-button,.file-upload-button,.tab-button,.help-button):disabled{cursor:not-allowed}:where(.toolbar-button,.control-button,.file-upload-button,.tab-button,.help-button):focus-visible{outline:var(--kolam-outline-width) solid var(--kolam-outline-color);outline-offset:var(--kolam-outline-offset)}:where(.pattern-item,.tool-item){cursor:pointer;color:var(--kolam-color-text);border-radius:0;transition:background var(--kolam-transition-fast),color var(--kolam-transition-fast),outline var(--kolam-transition-fast)}:where(.pattern-item:hover,.tool-item:hover){background:#f4f4f4}:where(.pattern-item.selected,.tool-item.selected){background:var(--kolam-color-surface);color:var(--kolam-color-text);outline:var(--kolam-outline-width) solid var(--kolam-outline-color);outline-offset:-2px}kbd{font-family:var(--kolam-font-mono)}.kolam-editor-container{width:100vw;height:100vh;padding:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;overflow:auto}.editor-stage{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr);gap:0;align-items:stretch;flex:1 1 auto;min-height:0;padding:0;box-sizing:border-box}.editor-main{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);min-height:0;height:100%;min-width:0;overflow:hidden}.editor-topbar{width:100%;display:flex;position:relative;z-index:10;padding:0;box-sizing:border-box}.menu-bar{display:flex;flex-direction:column;gap:0px;width:100%;border-left:none;border-right:none;padding:0}.menu-row{display:flex;align-items:stretch;gap:clamp(2px,.4vw,4px);width:100%}.menu-row--primary{border-bottom:1px solid #000000}.menu-root{position:relative;z-index:20;display:flex;min-width:0}.menu-placeholder{visibility:hidden}.menu-trigger{font:inherit;font-size:clamp(.48rem,calc(.58rem + .25vw),.74rem);font-weight:600;letter-spacing:clamp(.02em,calc(.03em + .2vw),.05em);text-transform:uppercase;padding:clamp(3px,.45vw,6px) clamp(4px,.8vw,7px);border-radius:0;border:none;border-right:1px solid #000000;background:transparent;color:var(--kolam-color-text);cursor:pointer;transition:background .1s ease;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;white-space:normal;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere;box-sizing:border-box}.menu-trigger:hover,.menu-trigger.open{background:#000;color:#fff}.menu-root:last-child .menu-trigger{border-right:none}.menu-toolbar{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;padding:0;height:100%}.menu-toolbar-group{display:flex;align-items:center;gap:2px}.menu-toolbar-group--help{margin-left:auto}.menu-toolbar-separator{width:1px;height:clamp(32px,3vw,44px);background:var(--kolam-color-border, #000000);margin:0 clamp(8px,1.8vw,20px)}.toolbar-sidebar{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,18px);height:100%;min-height:0;border-right:1px solid var(--kolam-color-border);padding:clamp(12px,1.4vw,18px) clamp(6px,.8vw,10px);box-sizing:border-box;min-width:0;width:100%;max-width:clamp(80px,9vw,108px);background:var(--kolam-color-surface)}.pattern-gallery-bar{flex:none;border-bottom:1px solid var(--kolam-color-border);padding-bottom:clamp(8px,1.2vw,14px);overflow:hidden}.toolbar-divider{width:72%;max-width:72px;height:1px;background:var(--kolam-color-border);opacity:.6;margin:clamp(4px,.6vw,8px) 0}.toolbar-sidebar-section{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.2vw,14px);width:100%}.sidebar-icon-button{display:inline-flex;align-items:center;justify-content:center;width:clamp(32px,3.2vw,40px);height:clamp(32px,3.2vw,40px);border:1px solid var(--kolam-color-border);border-radius:clamp(4px,.6vw,6px);background:var(--kolam-color-surface);color:var(--kolam-color-text);font-size:clamp(1rem,1.1vw,1.4rem);cursor:pointer;transition:background var(--kolam-transition-fast),color var(--kolam-transition-fast),border-color var(--kolam-transition-fast)}.sidebar-icon-button:hover:not(:disabled),.sidebar-icon-button:focus-visible{background:#000;color:#fff;border-color:#000}.sidebar-icon-button:disabled{opacity:.35;cursor:not-allowed}.sidebar-icon-button--help{margin-top:auto}.sidebar-icon-button span{line-height:1}.pattern-gallery-bar .pattern-gallery-wrapper{padding-bottom:4px}.menu-toolbar-item{position:relative;display:flex}.menu-toolbar-button{font:inherit;font-size:clamp(.7rem,calc(.74rem + .15vw),.9rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;width:clamp(32px,2.8vw,42px);height:clamp(32px,2.8vw,42px);border:1px solid transparent;border-radius:0;background:transparent;color:var(--kolam-color-text);cursor:pointer;transition:background .1s ease,color .1s ease,border-color .1s ease}.menu-toolbar-button:hover:not(:disabled),.menu-toolbar-button.open{background:#000;color:#fff;border-color:#000}.menu-toolbar-button:disabled{opacity:.4;cursor:not-allowed}.menu-toolbar-icon{line-height:1}.menu-dropdown--toolbar{margin-top:4px}.menu-dropdown{position:absolute;top:100%;left:0;min-width:200px;padding:6px 8px;display:flex;flex-direction:column;gap:4px;z-index:300}.menu-toolbar-group--help .menu-toolbar-item .menu-dropdown--toolbar{left:auto;right:0}.menu-group-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kolam-color-text);margin-bottom:4px}.menu-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--kolam-color-text);padding:2px 0;border-bottom:1px solid var(--kolam-color-border)}.menu-item:last-child,.menu-item.menu-version-selector{border-bottom:none}.menu-item:hover{background:#000;color:#fff}.menu-item:hover input,.menu-item:hover button,.menu-item:hover select,.menu-item:hover textarea{background:transparent;color:inherit;border-color:currentColor}.menu-item.menu-action{cursor:pointer;border:none;background:none}.menu-item.menu-action:disabled{cursor:not-allowed;opacity:.5}.menu-item.menu-action:disabled:hover{background:none;color:inherit}.menu-version-selector{flex-direction:column;align-items:stretch;gap:6px}.menu-version-grid{display:grid;grid-template-columns:repeat(3,minmax(48px,1fr));gap:4px;width:100%}.menu-version-button{border:1px solid var(--kolam-color-border);background:var(--kolam-color-surface);color:var(--kolam-color-text);font-size:.65rem;font-weight:600;letter-spacing:.06em;padding:2px 6px;border-radius:0;cursor:pointer;transition:background .1s ease;width:100%;text-align:center}.menu-version-button:hover,.menu-version-button.active{background:#000;color:#fff}.menu-item input,.menu-item button,.menu-item label{font:inherit}.menu-item input[type=number]{width:72px;padding:4px 6px;border-radius:0;border:1px solid var(--kolam-color-border);background:var(--kolam-color-surface);color:inherit}.menu-item input[type=range]{flex:1;accent-color:var(--kolam-color-border)}.menu-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--kolam-color-border)}.menu-item button{border:1px solid var(--kolam-color-border);background:var(--kolam-color-surface);border-radius:0;padding:4px 8px;cursor:pointer;color:inherit}.pattern-ribbon{border-left:none;border-right:none;padding:0;position:relative;z-index:5;flex-shrink:0}.pattern-ribbon-footer{margin-top:16px}.canvas-stage{flex:1;min-height:0;width:100%;display:flex;justify-content:center;align-items:stretch;border-left:none;border-right:none;padding:0}.grid-canvas-container{flex:1;width:100%;display:flex;justify-content:center;overflow:hidden;border:none;padding:0;max-height:100%;max-width:100%;overscroll-behavior:contain}.grid-canvas{display:block;border-radius:0;border:none;background-color:var(--kolam-color-surface);box-shadow:none;transition:none;image-rendering:pixelated;touch-action:none;-ms-touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.pattern-selection-indicator{position:fixed;top:24px;left:50%;transform:translate(-50%);background:#000;color:#fff;padding:.6rem 1.2rem;border-radius:0;border:1px solid var(--kolam-color-border);box-shadow:none;font-size:.85rem;font-weight:600;z-index:2500;text-align:center;letter-spacing:.08em}.pattern-selection-indicator small{display:block;font-size:.65rem;opacity:.8}.menu-dropdown .menu-item:hover{background:#000;color:#fff}.menu-dropdown .menu-item:hover input,.menu-dropdown .menu-item:hover button,.menu-dropdown .menu-item:hover select,.menu-dropdown .menu-item:hover textarea,.menu-dropdown .menu-item:hover label{background:transparent;color:inherit;border-color:currentColor}.menu-dropdown .menu-item:hover input::placeholder,.menu-dropdown .menu-item:hover textarea::placeholder{color:#fffc}.control-panel{padding:1rem;display:flex;flex-direction:column;gap:1rem}.control-panel-title{margin:0;font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kolam-color-text)}.control-panel-content{display:flex;flex-direction:column;gap:.75rem}.tab-header{display:flex;gap:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kolam-color-border)}.tab-button{font-size:.85rem;padding:.4rem .75rem;transition:background var(--kolam-transition-fast),color var(--kolam-transition-fast)}.tab-button.active,.tab-button:hover{background:var(--kolam-color-border);color:#fff}.input-group,.checkbox-group,.slider-group,.button-group{display:flex;flex-direction:column;gap:.25rem}.input-group label,.checkbox-group label,.slider-group label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--kolam-color-text)}.number-input,.slider,.checkbox,.control-button,.file-upload-button{font:inherit}.number-input{padding:.35rem .5rem;border:1px solid var(--kolam-color-border);border-radius:0;background:var(--kolam-color-surface);color:var(--kolam-color-text);width:100%}.checkbox{width:16px;height:16px;accent-color:var(--kolam-color-border)}.slider{accent-color:var(--kolam-color-border)}.control-button,.file-upload-button{padding:.5rem;font-size:.75rem}.control-button:hover,.file-upload-button:hover{background:var(--kolam-color-border);color:#fff}.help-button{width:32px;height:32px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background var(--kolam-transition-fast),color var(--kolam-transition-fast)}.help-button:hover{background:var(--kolam-color-border);color:#fff}.shortcuts-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}.shortcuts-panel{padding:1.5rem;max-width:520px;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.shortcuts-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--kolam-color-border);padding-bottom:.75rem}.shortcuts-header h3{margin:0;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase}.close-button{border:none;background:none;font-size:1.5rem;cursor:pointer;color:var(--kolam-color-text)}.close-button:hover{color:#555}.shortcuts-content{display:flex;flex-direction:column;gap:1rem}.shortcut-category h4{margin:0 0 .5rem;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}.shortcut-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem 1rem}.shortcut-item{display:flex;align-items:center;gap:.5rem;font-size:.78rem}.shortcut-key{border:1px solid var(--kolam-color-border);border-radius:0;padding:.15rem .4rem;font-size:.72rem;background:var(--kolam-color-surface)}.shortcut-description{color:var(--kolam-color-text)}.compact-editing-toolbar{padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.toolbar-button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:.55rem .4rem;font-size:.7rem;line-height:1.2;text-align:center;white-space:normal}.toolbar-button:hover:not(:disabled){background:#f4f4f4;color:var(--kolam-color-text)}.toolbar-button:disabled{background:#f5f5f5;color:var(--kolam-color-muted);border-color:#b0b0b0;cursor:not-allowed}.pattern-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border:none;background:transparent;box-shadow:none;box-sizing:border-box;overflow:hidden;border:1px solid var(--kolam-color-border, #000000);border-radius:4px;min-width:48px}.pattern-item canvas{border-radius:0;background:#fff;box-shadow:none}.pattern-item:hover canvas{background:#f7f7f7}.pattern-item.selected{background:#000;color:#fff}.pattern-item.selected canvas{filter:invert(1)}.pattern-label{font-size:.6rem;font-weight:600;color:currentColor;text-transform:uppercase;letter-spacing:.06em}.tool-palette{display:flex;gap:clamp(12px,2vw,20px);width:100%}.tool-palette--vertical{flex-direction:column;align-items:center}.tool-stack{display:flex;flex-direction:column;gap:clamp(6px,1vw,12px);align-items:center}.tool-stack--actions{padding-top:clamp(6px,1vw,12px);margin-top:clamp(6px,1vw,12px);border-top:1px solid var(--kolam-color-border)}.tool-item{display:inline-flex;align-items:center;justify-content:center;width:clamp(32px,2.8vw,42px);height:clamp(32px,2.8vw,42px);border:1px solid transparent;border-radius:0;background:transparent;color:var(--kolam-color-text);cursor:pointer}.tool-item:hover,.tool-item:focus-visible{border-color:#000}.tool-item.selected{background:#000;color:#fff;border-color:#000}.tool-item:disabled{opacity:.4;cursor:not-allowed}.tool-icon{font-size:clamp(1rem,calc(1.05rem + .4vw),1.3rem);line-height:1}.tool-action-icon-button{display:inline-flex;align-items:center;justify-content:center;width:clamp(32px,2.8vw,42px);height:clamp(32px,2.8vw,42px);border:1px solid transparent;border-radius:clamp(4px,.7vw,6px);background:transparent;color:var(--kolam-color-text);cursor:pointer;transition:background var(--kolam-transition-fast),color var(--kolam-transition-fast),border-color var(--kolam-transition-fast)}.tool-action-icon-button:hover:not(:disabled),.tool-action-icon-button:focus-visible{border-color:#000}.tool-action-icon-button:disabled{opacity:.4;cursor:not-allowed}.tool-action-icon-button:not(:disabled):active,.tool-action-icon-button:not(:disabled).active{background:#000;color:#fff;border-color:#000}.tool-action-icon{font-size:clamp(1rem,calc(1.05rem + .4vw),1.3rem);line-height:1}.pattern-strip-container{display:flex;align-items:stretch;gap:0;width:100%;overflow:hidden}.pattern-strip-tile-wrapper{display:flex;align-items:center;justify-content:center;position:relative}@media (max-width: 900px){.pattern-item .pattern-label{display:none}.pattern-item{padding:4px 2px;border-radius:4px;min-width:0}}@media (max-width: 720px){.pattern-item{padding:4px 2px}.pattern-label{font-size:.5rem;letter-spacing:.045em}}.pattern-gallery{width:100%}.pattern-gallery--vertical{height:100%}.pattern-gallery--horizontal{width:100%}.pattern-sidebar-scroll{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;padding-right:0}.pattern-sidebar .pattern-sidebar-scroll{flex:1}.pattern-gallery-wrapper{width:100%;overflow:hidden}.pattern-grid{width:100%;box-sizing:border-box}.pattern-grid--stack{display:flex;flex-flow:row wrap;gap:6px;padding:8px 6px;justify-content:center;align-content:start}.pattern-grid--wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:2px;padding:clamp(8px,1.2vw,12px) clamp(8px,1.6vw,16px);justify-items:center}@media (min-width: 900px){.pattern-grid--wrap{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}}.pattern-grid .pattern-item{max-width:72px}