:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.dark-mode{background-color:#242424;color:#ffffffde}body.light-mode{background-color:#f5f5f5;color:#000000de}body.light-mode canvas{background:#fff!important}body.light-mode .controls,body.light-mode .utilities{background:#fffffff2!important;color:#000000de!important;border:2px solid rgba(0,0,0,.2)!important}body.light-mode .main-toggle{background:#0000001a!important;color:#000000de!important}body.light-mode .controls-content,body.light-mode label,body.light-mode .tiny-label,body.light-mode .tiny-checkbox-label,body.light-mode .layer-label{color:#000000de!important}body.light-mode .pattern-type-bottom,body.light-mode .pattern-selection-bottom,body.light-mode .pattern-preview-bottom,body.light-mode .basic-parameters-bottom{background:#fffffff2!important;color:#000000de!important;border-color:#0000004d!important}body.light-mode .pattern-type-bottom-header,body.light-mode .pattern-selection-bottom-header,body.light-mode .basic-parameters-bottom-header{color:#000000de!important}body.light-mode .layers-console{background:#fffffff2!important;color:#000000de!important;border-color:#0000004d!important}body.light-mode .layers-console-header,body.light-mode .dark-mode-container label{color:#000000de!important}body.light-mode .custom-symmetry-toolbar{background:#fffffff2!important;border-color:#0000004d!important}body.light-mode .custom-tool-button{background:#0000001a!important;border-color:#0003!important;color:#000000de!important}body.light-mode .custom-tool-button:hover{background:#0003!important}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow:hidden;position:relative}#app{display:flex;width:100vw;height:100vh;margin:0;padding:0;align-items:center;justify-content:center;position:relative}canvas{background:#1a1a1a;width:600px;height:600px;touch-action:none;display:block;border:1px solid #666}.utilities{position:fixed;top:0;right:16px;background:#000000d9;border-radius:0 0 10px 10px;width:300px;z-index:2100}.controls{position:fixed;top:0;right:332px;background:#000000d9;border-radius:0 0 10px 10px;width:300px;z-index:2000}.mode-toggle{display:flex;gap:0;margin-bottom:8px;border-radius:8px;overflow:hidden}.mode-btn{flex:1;padding:6px 12px;background:linear-gradient(145deg,#ffffff1f,#ffffff14);border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer;font-weight:500;transition:all .2s ease;margin:0;border-radius:0;font-size:11px;box-shadow:0 1px 3px #0000004d,inset 0 1px #ffffff1a}.mode-btn:first-child{border-radius:8px 0 0 8px}.mode-btn:last-child{border-radius:0 8px 8px 0}.mode-btn:hover{background:linear-gradient(145deg,#ffffff2e,#ffffff1f);transform:translateY(-.5px);box-shadow:0 2px 6px #0006,inset 0 1px #ffffff26}.mode-btn.active{background:linear-gradient(145deg,#4ade80,#22c55e);color:#000;box-shadow:0 1px 3px #0006,inset 0 1px #fff3}.main-toggle{padding:8px 16px;background:#ffffff1a;background-color:#653bff99;border:2px inset rgba(255,255,255,.1);border-radius:10px 10px 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:700;display:flex;justify-content:space-between;align-items:center;font-size:13px}.controls-content{max-height:0;opacity:0;overflow:hidden;transition:all .3s ease-in-out;padding:0 16px;border-radius:0 0 10px 10px}.controls-content.expanded{max-height:calc(100vh - 120px);opacity:1;padding:12px;overflow-y:auto}.dark-mode-container{margin-bottom:8px;padding:8px;background:#ffffff0d;border-radius:6px;border:1px solid rgba(255,255,255,.1)}.dark-mode-container input[type=checkbox]{margin-right:8px;transform:scale(1.2);accent-color:#4ade80}.dark-mode-container label{font-size:12px;color:#fff;cursor:pointer}.canvas-size-section{margin-bottom:12px}.canvas-size-content{max-height:250px;overflow-y:auto;padding:8px;background:#ffffff0d;border-radius:6px;border:1px solid rgba(255,255,255,.1);scrollbar-width:thin;scrollbar-color:rgba(74,222,128,.8) rgba(255,255,255,.1)}.canvas-size-content::-webkit-scrollbar{width:6px;background:#ffffff1a;border-radius:3px}.canvas-size-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px;margin:4px 0}.canvas-size-content::-webkit-scrollbar-thumb{background:#4ade80cc;border-radius:3px;border:1px solid rgba(255,255,255,.1);min-height:20px}.canvas-size-content::-webkit-scrollbar-thumb:hover{background:#4ade80}.canvas-size-radios{display:flex;flex-direction:column;gap:4px}.radio-option{display:flex;align-items:center;gap:8px;padding:4px;border-radius:4px;transition:background-color .2s ease}.radio-option:hover{background:#ffffff0d}.radio-option input[type=radio]{margin:0;transform:scale(1.1);accent-color:#4ade80}.radio-option input[type=radio]:disabled{opacity:.5}.radio-option label{font-size:11px;color:#fff;cursor:pointer}.radio-option input[type=radio]:disabled+label{opacity:.5;cursor:not-allowed}.aspect-ratio-container{display:flex;align-items:center;margin-top:12px;padding:8px;background:#ffffff0d;border-radius:6px}.aspect-ratio-container input[type=checkbox]{margin-right:8px;transform:scale(1.2);accent-color:#4ade80}.square-size-slider{margin-top:8px}.square-size-slider label{display:block;margin-bottom:4px;font-size:11px;color:#4ade80;font-weight:600}.square-size-slider input[type=range]{width:100%}.custom-symmetry-toolbar{position:fixed;top:16px;left:16px;display:flex;flex-direction:column;gap:8px;background:#000000e6;border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:12px;z-index:10000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #0009;width:80px}.custom-tool-button{padding:6px;font-size:8px}.custom-tool-button:hover{background:#fff3;border-color:#4ade80;transform:translateY(-1px)}.custom-tool-button.active{background:linear-gradient(145deg,#4ade80,#22c55e);border-color:#4ade80;color:#000;box-shadow:0 0 15px #4ade8066}.custom-tool-button.clear-canvas-btn{background:#ff646433;border-color:#ff646466}.custom-tool-button.clear-canvas-btn:hover{background:#ff64644d;border-color:#ff6464}.custom-tool-button.undo-btn,.custom-tool-button.redo-btn{background:#6496ff33;border-color:#6496ff66}.custom-tool-button.undo-btn:hover,.custom-tool-button.redo-btn:hover{background:#6496ff4d;border-color:#6496ff}.custom-tool-button .tool-icon{font-size:14px}.custom-tool-button .tool-name{font-size:7px}.pattern-type-bottom{position:fixed;bottom:0;right:20px;background:#000000e6;border:2px solid rgba(255,255,255,.3);border-radius:12px 12px 0 0;z-index:3000;box-shadow:0 4px 16px #0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:220px;transition:all .3s ease}.pattern-type-bottom-header{color:#fff;font-weight:700;font-size:12px;padding:8px 12px;text-align:center;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(255,255,255,.2);background:#ffffff1a;border-radius:10px 10px 0 0;transition:all .3s ease}.pattern-type-bottom-header:hover{background:#ffffff26}.pattern-type-bottom-content{padding:8px 12px;transition:all .3s ease;overflow:hidden;max-height:150px;opacity:1}.pattern-type-bottom-content.collapsed{max-height:0;opacity:0;padding:0 12px}.pattern-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:0}.pattern-type-btn{padding:8px 6px!important;background:linear-gradient(145deg,#ffffff1f,#ffffff14)!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:8px!important;color:#fff!important;cursor:pointer!important;transition:all .3s ease!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;font-size:9px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.3px!important;margin:0!important;width:100%!important;box-sizing:border-box!important}.pattern-type-btn:hover{background:linear-gradient(145deg,#ffffff2e,#ffffff1f)!important;transform:translateY(-1px)!important;border-color:#ffffff40!important}.pattern-type-btn.selected{background:linear-gradient(145deg,#4ade80,#22c55e)!important;border-color:#4ade80!important;color:#000!important;box-shadow:0 0 10px #4ade8066!important}.type-icon{font-size:16px;line-height:1}.type-name{font-size:7px;font-weight:700;letter-spacing:.5px}.pattern-selection-bottom{position:fixed;bottom:0;right:260px;z-index:3000;background:#000000e6;border:2px solid rgba(255,255,255,.3);border-radius:12px 12px 0 0;box-shadow:0 4px 16px #0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:250px;transition:all .3s ease}.pattern-selection-bottom-header{color:#fff;font-weight:700;font-size:12px;padding:8px 12px;text-align:center;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(255,255,255,.2);background:#ffffff1a;border-radius:10px 10px 0 0;transition:all .3s ease}.pattern-selection-bottom-header:hover{background:#ffffff26}.pattern-selection-bottom-content{padding:8px 12px;transition:all .3s ease;overflow:hidden;max-height:500px;opacity:1;overflow-y:auto}.pattern-selection-bottom-content.collapsed{max-height:0;opacity:0;padding:0 12px}.pattern-preview-bottom{position:fixed;bottom:0;right:530px;z-index:3000;background:#000000e6;border:2px solid rgba(255,255,255,.3);border-radius:12px 12px 0 0;padding:2px;box-shadow:0 4px 16px #0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pattern-preview{width:40px;height:40px;margin:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:#ffffff1a;border-radius:8px;-webkit-user-select:none;user-select:none;font-family:Arial}.basic-parameters-bottom{position:fixed;bottom:0;right:590px;z-index:3000;background:#000000e6;border:2px solid rgba(255,255,255,.3);border-radius:12px 12px 0 0;box-shadow:0 4px 16px #0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:280px;transition:all .3s ease}.basic-parameters-bottom-header{color:#fff;font-weight:700;font-size:12px;padding:8px 12px;text-align:center;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(255,255,255,.2);background:#ffffff1a;border-radius:10px 10px 0 0;transition:all .3s ease}.basic-parameters-bottom-header:hover{background:#ffffff26}.basic-parameters-bottom-content{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 12px;max-height:500px;overflow-y:auto;transition:all .3s ease;opacity:1}.basic-parameters-bottom-content.collapsed{max-height:0;opacity:0;padding:0 12px}.solid-color-container,.random-color-container{grid-column:1 / -1;margin-bottom:6px}.color-picker-container{display:block;margin-top:6px;padding:6px;background:#ffffff0d;border-radius:6px;border:1px solid rgba(255,255,255,.1);text-align:center}.color-picker{width:50px;height:25px;border:none;border-radius:6px;cursor:pointer;background:none;outline:none;transition:all .2s ease}.color-picker:hover{transform:scale(1.05);box-shadow:0 0 10px #ffffff4d}.star-pattern-selector{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(600px,90vw);max-height:min(500px,80vh);background:#000000f2;border:2px solid rgba(255,255,255,.3);border-radius:12px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:10001;display:flex;flex-direction:column}.selector-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.2);background:#ffffff1a;border-radius:10px 10px 0 0}.selector-header span{color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.close-btn{background:none;border:none;color:#ff6464;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.close-btn:hover{background:#ff646433;transform:scale(1.1)}.selector-content{flex:1;padding:16px;overflow-y:auto;max-height:400px}.pattern-category-container{margin-bottom:16px}.category-header{color:#4ade80;font-size:14px;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(74,222,128,.3);padding-bottom:4px}.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}.pattern-grid .pattern-btn{width:40px;height:40px;padding:4px;margin:0;font-size:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffffff1f,#ffffff14);border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#fff;cursor:pointer;transition:all .3s ease}.pattern-grid .pattern-btn:hover{background:linear-gradient(145deg,#ffffff2e,#ffffff1f);border-color:#4ade80;transform:translateY(-1px);box-shadow:0 2px 8px #4ade804d}.tiny-slider-container{margin-bottom:6px;background:#0000004d;border-radius:6px;padding:4px;border:1px solid rgba(255,255,255,.1)}.tiny-label-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;background:#0006;padding:2px 4px;border-radius:4px;border:1px solid rgba(255,255,255,.05)}.tiny-label{font-size:9px;color:#fff;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.tiny-value-display{font-size:9px;color:#4ade80;min-width:25px;text-align:right;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.tiny-checkbox-container{margin-bottom:6px;display:flex;align-items:center;gap:4px;background:#0000004d;border-radius:6px;padding:4px;border:1px solid rgba(255,255,255,.1)}.tiny-checkbox-label{font-size:9px;color:#fff;font-weight:500;cursor:pointer;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.tiny-color-picker-container,.tiny-dropdown-container{margin-bottom:6px;background:#0000004d;border-radius:6px;padding:4px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:3px}.tiny-dropdown{width:100%;padding:3px 4px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:10px;cursor:pointer}.tiny-dropdown:focus{outline:none;border-color:#4ade80}.tiny-dropdown option{background:#242424;color:#fff;padding:4px}.basic-parameters-bottom::-webkit-scrollbar{width:4px;background:#ffffff1a;border-radius:2px}.basic-parameters-bottom::-webkit-scrollbar-thumb{background:#4ade80cc;border-radius:2px}.control-group-container{margin-bottom:8px;background:#ffffff1a;border-radius:8px;overflow:hidden}.group-header{padding:6px 10px;background:#ffffff1a;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid transparent;transition:border-color .3s ease;font-size:12px}.control-group-container:has(>.group-content:not(.collapsed))>.group-header{border-bottom-color:#4ade80}.pattern-category-container:has(>.group-content:not(.collapsed))>.pattern-category-header{border-bottom-color:#4ade80}.group-content{padding:8px;background:#0006;transition:all .3s ease-in-out;overflow:hidden;max-height:auto;opacity:1}.group-content.collapsed{max-height:0;opacity:0;padding:0 8px}.pattern-category-container .group-content{padding:6px}.pattern-category-container .group-content.collapsed{padding:0 6px}.toggle-icon{font-size:10px;transition:transform .3s ease}.label-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;padding:3px 6px;background:#ffffff0d;border-radius:6px}label{color:#fff;font-weight:500;font-size:11px}.value-display{color:#4ade80;font-weight:700;min-width:40px;text-align:right;font-size:11px}input[type=range]{width:100%;margin:3px 0 12px;height:2px;background:#ffffff1a;border-radius:1px;-webkit-appearance:none;touch-action:manipulation}input[type=range]::-webkit-slider-thumb{width:16px;height:16px}input[type=range]::-moz-range-thumb{width:16px;height:16px}input[type=text]{width:100%;padding:6px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:12px;margin-top:3px;box-sizing:border-box}input[type=text]:focus{outline:none;border-color:#4ade80}input[type=text]:disabled{opacity:.5;cursor:not-allowed}input[type=checkbox]{margin-right:8px;transform:scale(1.2);accent-color:#4ade80}.checkbox-container{display:flex;align-items:center;margin-bottom:6px}.slider-container{transition:opacity .3s ease}.custom-pattern{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);width:100%}.custom-checkbox-container{display:flex;align-items:center;margin-bottom:8px}.custom-checkbox-container input[type=checkbox]{margin-right:8px}.custom-checkbox-container label{font-size:12px;color:#fff}.font-dropdown-container{margin-bottom:8px;padding:6px;background:#ffffff0d;border-radius:4px}.font-dropdown-container label{display:block;margin-bottom:4px;font-size:11px;color:#4ade80}.font-select{width:100%;padding:4px 6px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:11px;cursor:pointer}.font-select:focus{outline:none;border-color:#4ade80}.font-select option{background:#242424;color:#fff;padding:4px}.custom-input-container{margin-bottom:8px}.custom-input-container label{display:block;margin-bottom:4px;font-size:11px;color:#fff}.custom-pattern-input{font-family:Arial}.subsection{margin-bottom:12px}.subsection h4{color:#4ade80;font-size:12px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}button{width:100%;padding:6px 12px;background:linear-gradient(145deg,#646cff,#535bf2);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;cursor:pointer;margin-top:6px;font-size:11px;font-weight:500;transition:all .2s ease;box-shadow:0 1px 3px #0000004d,inset 0 1px #ffffff1a}button:hover{background:linear-gradient(145deg,#535bf2,#4338ca);transform:translateY(-.5px);box-shadow:0 2px 6px #0006,inset 0 1px #ffffff26}button:active{transform:translateY(0);box-shadow:0 1px 2px #0006,inset 0 1px #ffffff0d}button.active{background:linear-gradient(145deg,#ff6464,#dc2626);box-shadow:0 1px 3px #0006,inset 0 1px #ffffff1a}.pattern-selector{display:grid;gap:6px}.pattern-category{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:3px}.pattern-btn{width:32px;height:32px;padding:3px;margin:0;font-size:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffffff1f,#ffffff14);border:1px solid rgba(255,255,255,.15);border-radius:4px;box-shadow:0 1px 2px #0003,inset 0 1px #ffffff1a}.pattern-btn:hover{background:linear-gradient(145deg,#ffffff2e,#ffffff1f);transform:translateY(-.5px);box-shadow:0 2px 4px #0000004d,inset 0 1px #ffffff26}.recording-stats{background:#1a237e;color:#fff;font-size:10px;padding:6px;margin-top:6px;border-radius:4px;display:flex;justify-content:space-between}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.7}to{transform:scale(2);opacity:0}}.layers-toggle-widget{position:fixed;top:50%;left:0;transform:translateY(-50%);width:20px;height:40px;background:#000c;border:1px solid rgba(74,222,128,.6);border-left:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1500;transition:all .3s ease;opacity:0;visibility:hidden}.layers-toggle-widget.basic-mode{display:none!important}.layers-toggle-widget.visible{opacity:1;visibility:visible}.layers-toggle-widget:hover{background:#000;border-color:#4ade80;transform:translateY(-50%) translate(2px)}.layers-toggle-widget .widget-arrow{font-size:12px;color:#4ade80;transition:transform .3s ease}.layers-toggle-widget.expanded .widget-arrow{transform:rotate(180deg)}.layers-console{position:fixed;top:0;left:0;width:26vw;height:100vh;background:#000000e6;border:3px solid rgba(255,255,255,.3);border-radius:0 15px 15px 0;z-index:1000;transform:translate(-100%);transition:transform .3s ease-in-out,width .3s ease-in-out;display:flex;flex-direction:column}.layers-console.expanded{transform:translate(0)}.layers-console.expanded~.layers-toggle-widget{opacity:0;visibility:hidden}.layers-console-header{padding:8px 16px;background:#ffffff1a;border-radius:0 12px 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:700;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(255,255,255,.2);font-size:14px;height:40px;box-sizing:border-box;flex-shrink:0}.header-content{display:flex;align-items:center;gap:8px;flex:1}.zoom-controls{display:flex;align-items:center;gap:6px;margin-left:auto;padding:0 4px}.zoom-label{color:#00bcd4;font-size:12px;font-weight:700;-webkit-user-select:none;user-select:none;cursor:default;min-width:12px;text-align:center}.zoom-slider{width:60px!important;height:3px!important;margin:0!important;background:#fff3!important;border-radius:2px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;cursor:pointer!important;transition:all .2s ease!important}.zoom-slider::-webkit-slider-track{width:100%;height:3px;background:#fff3;border-radius:2px;border:none}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none!important;width:12px!important;height:12px!important;background:#00bcd4!important;border-radius:50%!important;cursor:pointer!important;border:1px solid rgba(255,255,255,.3)!important;box-shadow:0 1px 3px #0000004d!important;transition:all .2s ease!important}.zoom-slider::-webkit-slider-thumb:hover{background:#00e5ff!important;transform:scale(1.1)!important;box-shadow:0 2px 6px #0006!important}.zoom-slider::-moz-range-track{width:100%;height:3px;background:#fff3;border-radius:2px;border:none}.zoom-slider::-moz-range-thumb{width:12px!important;height:12px!important;background:#00bcd4!important;border-radius:50%!important;cursor:pointer!important;border:1px solid rgba(255,255,255,.3)!important;box-shadow:0 1px 3px #0000004d!important;transition:all .2s ease!important}.zoom-slider::-moz-range-thumb:hover{background:#00e5ff!important;transform:scale(1.1)!important;box-shadow:0 2px 6px #0006!important}.zoom-slider:hover{background:#ffffff4d!important}.layers-console-content{display:flex;flex-direction:column;flex:1;padding:12px;gap:8px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;position:relative;scrollbar-width:auto;scrollbar-color:rgba(74,222,128,.8) rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}.layers-console-content::-webkit-scrollbar{width:8px;background:#ffffff26;border-radius:4px}.layers-console-content::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px;margin:6px 0;border:1px solid rgba(255,255,255,.1)}.layers-console-content::-webkit-scrollbar-thumb{background:#4ade80cc;border-radius:4px;border:1px solid rgba(255,255,255,.2);min-height:30px}.layers-console-content::-webkit-scrollbar-thumb:hover{background:#4ade80}.layers-console-content::-webkit-scrollbar-thumb:active{background:#4ade80}.drop-indicator{position:absolute;height:5px;background:#00bcd4;border-radius:3px;z-index:1000;pointer-events:none;box-shadow:0 0 10px #00bcd499}.layer-drag-indicator{position:fixed;width:200px;height:200px;border:3px solid #4ade80;background:#4ade801a;pointer-events:none;z-index:9999;border-radius:12px;box-shadow:0 0 20px #4ade8099}.layers-extra-space{height:100px;background:transparent;flex-shrink:0}.layer-item{width:100%;aspect-ratio:1;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:8px;display:flex;flex-direction:column;cursor:pointer;transition:all .3s ease;flex-shrink:0;position:relative}.layer-item[draggable=true]:hover{cursor:grab}.layer-item[draggable=true]:active{cursor:grabbing}.layer-item.current{box-shadow:0 0 15px #4ade8099,0 0 30px #4ade804d;border-color:#4ade80}.layer-item.inactive{opacity:.6}.layer-item:hover{background:#ffffff40;transform:translate(4px)}.layer-canvas{flex:1;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden}.layer-canvas canvas{width:100%;height:100%;object-fit:contain;border-radius:4px;background:#00000080;border:1px solid rgba(255,255,255,.2)}.layer-controls{height:32px;display:flex;align-items:center;justify-content:space-around;background:#0000004d;border-radius:0 0 6px 6px;padding:4px;flex-shrink:0}.layer-label{background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.layer-icon{font-size:13px;cursor:pointer;transition:all .3s ease;padding:3px;border-radius:3px}.layer-icon:hover{background:#fff3;transform:scale(1.1)}.reset-icon,.clear-icon{font-size:11px!important}@media (max-width: 768px){.controls,.utilities{width:90vw}.controls{right:calc(90vw + 32px)}.layers-console{width:50vw}.pattern-type-bottom{max-width:180px;bottom:0;right:15px}.pattern-selection-bottom{width:min(220px,calc(50vw - 5px));right:min(210px,calc(48vw + 7px))}.pattern-preview-bottom{right:min(360px,calc(95vw + 5px));bottom:2px}.basic-parameters-bottom{width:min(200px,calc(55vw - 5px));right:min(410px,calc(95vw + 55px));bottom:2px}}@media (max-width: 480px){.controls,.utilities{width:85vw}.controls{right:calc(85vw + 32px)}.pattern-type-bottom{max-width:150px;bottom:0;right:12px;padding:6px}.custom-symmetry-toolbar{width:60px;gap:4px}body.light-mode .layer-item{background:#ffffffe6!important;border-color:#0000004d!important}body.light-mode .layer-controls{background:#0000001a!important}.bolt-badge-top{position:fixed;top:32px;right:90%;width:96px;height:96px;background:#000c;border:2px solid rgba(255,255,255,.3);border-radius:50%;z-index:5;transition:all .3s ease;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 4px 12px #0000004d;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:20px;color:#f59e0b}.bolt-logo-img{width:96px;height:96px;object-fit:contain;display:block}.bolt-badge-top:hover{background:#000000e6;border-color:#f59e0b;transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px #0006}canvas{background:#1a1a1a;touch-action:none;display:block;border:1px solid #666;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:600px;height:600px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px)}.utilities{position:fixed;top:10px;right:10px;background:#000000d9;border-radius:10px;width:min(300px,calc(50vw - 20px));z-index:2100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.controls{right:min(250px,calc(90vw + 2px))}.dark-mode-container{margin-bottom:8px;padding:8px;background:#ffffff0d;border-radius:6px;border:1px solid rgba(255,255,255,.1)}.canvas-size-section{margin-bottom:12px}.canvas-size-content::-webkit-scrollbar{width:6px;background:#ffffff1a;border-radius:3px}.custom-symmetry-toolbar{position:fixed;top:16px;left:16px;display:flex;flex-direction:column;gap:8px;background:#000000e6;border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:12px;z-index:10000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #0009;width:80px}.custom-tool-button.clear-canvas-btn{background:#ff646433;border-color:#ff646466}.pattern-type-bottom{position:fixed;bottom:10px;right:10px;background:#000000e6;border:2px solid rgba(255,255,255,.3);border-radius:12px;z-index:3000;box-shadow:0 4px 16px #0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:min(220px,calc(25vw - 10px));transition:all .3s ease}.pattern-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:0}.solid-color-container,.random-color-container{grid-column:1 / -1;margin-bottom:6px}.color-picker-container{display:block;margin-top:6px;padding:6px;background:#ffffff0d;border-radius:6px;border:1px solid rgba(255,255,255,.1);text-align:center}.tiny-slider-container{margin-bottom:6px;background:#0000004d;border-radius:6px;padding:4px;border:1px solid rgba(255,255,255,.1)}.tiny-color-picker-container,.tiny-dropdown-container{margin-bottom:6px;background:#0000004d;border-radius:6px;padding:4px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:3px}.basic-parameters-bottom::-webkit-scrollbar{width:4px;background:#ffffff1a;border-radius:2px}.control-group-container:has(>.group-content:not(.collapsed))>.group-header{border-bottom-color:#4ade80}.pattern-category-container:has(>.group-content:not(.collapsed))>.pattern-category-header{border-bottom-color:#4ade80}.pattern-category-container .group-content{padding:6px}input[type=checkbox]{margin-right:8px;transform:scale(1.2);accent-color:#4ade80}.custom-pattern{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);width:100%}.subsection{margin-bottom:12px}button{width:100%;padding:6px 12px;background:linear-gradient(145deg,#646cff,#535bf2);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;cursor:pointer;margin-top:6px;font-size:11px;font-weight:500;transition:all .2s ease;box-shadow:0 1px 3px #0000004d,inset 0 1px #ffffff1a}@keyframes pulse{0%{transform:scale(1);opacity:1}}.layers-toggle-widget{position:fixed;top:50%;left:0;transform:translateY(-50%);width:20px;height:40px;background:#000000f2;border:2px solid rgba(74,222,128,.8);border-left:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1500;transition:all .3s ease;opacity:0;visibility:hidden}.layers-toggle-widget.basic-mode{display:none!important}.layers-console{position:fixed;top:0;left:0;width:26vw;height:100vh;background:#000000fa;border:3px solid rgba(255,255,255,.5);border-radius:0 15px 15px 0;z-index:1000;transform:translate(-100%);transition:transform .3s ease-in-out,width .3s ease-in-out;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.layers-console.expanded~.layers-toggle-widget{opacity:0;visibility:hidden}.layers-console-header{padding:8px 16px;background:#fff3;border-radius:0 12px 0 0;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:700;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid rgba(255,255,255,.4);font-size:14px;height:40px;box-sizing:border-box;flex-shrink:0;color:#fff}.header-content{display:flex;align-items:center;gap:8px;flex:1;color:#fff}.zoom-controls{display:flex;align-items:center;gap:6px;margin-left:auto;padding:0 4px}.zoom-label{color:#00bcd4;font-size:12px;font-weight:700;-webkit-user-select:none;user-select:none;cursor:default;min-width:12px;text-align:center}.zoom-slider{width:60px!important;height:3px!important;margin:0!important;background:#fff3!important;border-radius:2px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;cursor:pointer!important;transition:all .2s ease!important}.layers-console-content{display:flex;flex-direction:column;flex:1;padding:12px;gap:8px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;position:relative;scrollbar-width:auto;scrollbar-color:rgba(74,222,128,.8) rgba(255,255,255,.1);-webkit-overflow-scrolling:touch;background:#0000001a}.layers-console-content::-webkit-scrollbar{width:8px;background:#ffffff26;border-radius:4px}.drop-indicator{position:absolute;height:5px;background:#00bcd4;border-radius:3px;z-index:1000;pointer-events:none;box-shadow:0 0 10px #00bcd499}.layer-drag-indicator{position:fixed;width:200px;height:200px;border:3px solid #4ade80;background:#4ade801a;pointer-events:none;z-index:9999;border-radius:12px;box-shadow:0 0 20px #4ade8099}.layers-extra-space{height:100px;background:transparent;flex-shrink:0}.layer-item{width:100%;aspect-ratio:1;background:#ffffff26;border:2px solid rgba(255,255,255,.4);border-radius:8px;display:flex;flex-direction:column;cursor:pointer;transition:all .3s ease;flex-shrink:0;position:relative;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.layer-item[draggable=true]:hover{cursor:grab}.layer-item.current{box-shadow:0 0 15px #4ade8099,0 0 30px #4ade804d;border-color:#4ade80;background:#4ade801a}.layer-item.inactive{opacity:.6}.layer-controls{height:32px;display:flex;align-items:center;justify-content:space-around;background:#0009;border-radius:0 0 6px 6px;padding:4px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.2)}.reset-icon,.clear-icon{font-size:11px!important}@media (max-width: 1024px){canvas{width:auto;height:auto;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px)}.controls,.utilities{width:min(280px,calc(45vw - 15px))}.controls{right:min(300px,calc(45vw + 5px))}.layers-console{width:30vw}.pattern-type-bottom{width:min(200px,calc(22vw - 10px))}.pattern-selection-bottom{width:min(230px,calc(28vw - 10px));right:min(220px,calc(22vw + 20px))}.basic-parameters-bottom{width:min(260px,calc(32vw - 10px));right:min(470px,calc(50vw + 70px))}.pattern-preview-bottom{right:min(490px,calc(50vw + 90px))}}@media (max-width: 768px){.controls,.utilities{width:min(260px,calc(42vw - 10px));top:5px;right:5px}.custom-symmetry-toolbar{width:50px;padding:8px}}canvas{max-width:calc(100vw - 20px);max-height:calc(100vh - 20px)}.pattern-type-bottom{width:min(160px,calc(45vw - 5px));bottom:2px;right:2px}.pattern-preview-bottom,.basic-parameters-bottom{display:none}.pattern-type-bottom{width:min(200px,calc(48vw - 5px))}@media (max-width: 320px){.controls,.utilities{width:calc(100vw - 10px);position:relative;top:0;right:0;margin:5px}.pattern-type-bottom,.pattern-selection-bottom{width:calc(100vw - 10px);position:relative;bottom:0;right:0;margin:5px}#app{flex-direction:column;overflow-y:auto}}[title]{position:relative;cursor:help}[title]:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;z-index:10000;pointer-events:none;border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:tooltip-fade-in .2s ease-out}[title]:hover:before{content:"";position:absolute;bottom:calc(100% - 6px);left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#000000e6;z-index:10001;pointer-events:none;animation:tooltip-fade-in .2s ease-out}@keyframes tooltip-fade-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.pattern-type-bottom [title]:hover:after,.pattern-selection-bottom [title]:hover:after,.pattern-preview-bottom [title]:hover:after,.basic-parameters-bottom [title]:hover:after{bottom:auto;top:100%;margin-top:8px}.pattern-type-bottom [title]:hover:before,.pattern-selection-bottom [title]:hover:before,.pattern-preview-bottom [title]:hover:before,.basic-parameters-bottom [title]:hover:before{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:#000000e6}.layers-console [title]:hover:after,.custom-symmetry-toolbar [title]:hover:after{left:100%;bottom:50%;transform:translateY(50%);margin-left:8px}.layers-console [title]:hover:before,.custom-symmetry-toolbar [title]:hover:before{left:calc(100% + 2px);bottom:50%;top:auto;transform:translateY(50%);border-top-color:transparent;border-left-color:#000000e6;border-right-color:transparent;border-bottom-color:transparent}}