:root{--win-gray: #c0c0c0;--win-gray-light: #dfdfdf;--win-gray-dark: #808080;--win-gray-darker: #404040;--win-white: #ffffff;--win-black: #000000;--win-blue: #000080;--win-title-dark: #000000;--win-title-mid: #404040;--win-title-bright: #ffffff;--win-blue-active: #316ac5;--win-blue-text: #ffffff;--win-disabled-text: #808080;--win-highlight: #ffff80;--win-shadow: rgba(0, 0, 0, .35);--win-canvas-bg: #808080;--chrome-font: "Pixelated MS Sans Serif", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{font-family:var(--chrome-font);font-size:11px;background:var(--win-gray);color:var(--win-black);-webkit-font-smoothing:none;-moz-osx-font-smoothing:auto;text-rendering:optimizeSpeed;overflow:hidden}button{font-family:inherit;font-size:inherit}*::-webkit-scrollbar{width:16px;height:16px}*::-webkit-scrollbar-track{background:linear-gradient(45deg,var(--win-gray-dark) 25%,transparent 25%) 0 0 / 2px 2px,linear-gradient(-45deg,var(--win-gray-dark) 25%,transparent 25%) 0 1px / 2px 2px,linear-gradient(45deg,transparent 75%,var(--win-gray-dark) 75%) 1px -1px / 2px 2px,linear-gradient(-45deg,transparent 75%,var(--win-gray-dark) 75%) -1px 0 / 2px 2px,var(--win-gray)}*::-webkit-scrollbar-thumb{background:var(--win-gray);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}*::-webkit-scrollbar-thumb:hover{background:var(--win-gray-light)}*::-webkit-scrollbar-button{background:var(--win-gray);display:block;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark);height:16px;width:16px}*::-webkit-scrollbar-button:active{border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}*::-webkit-scrollbar-corner{background:var(--win-gray)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;margin:0;padding:0}input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--win-gray);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:20px;background:var(--win-gray);margin-top:-9px;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark);cursor:pointer}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 1px var(--win-gray-dark);margin:0;cursor:pointer;position:relative}input[type=checkbox]:checked:after{content:"✓";position:absolute;top:-2px;left:1px;font-size:12px;color:var(--win-black);font-weight:700}input[type=text],input[type=number]{font-family:inherit;font-size:11px;background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);padding:2px 4px}input[type=text]:focus,input[type=number]:focus{outline:1px dotted var(--win-black);outline-offset:-2px}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--win-gray)}.mobile-controls-toggle,.mobile-controls{display:none}[hidden]{display:none!important}.title-bar{display:flex;justify-content:space-between;align-items:center;height:22px;padding:0 2px 0 3px;flex-shrink:0;-webkit-user-select:none;user-select:none;background:linear-gradient(90deg,var(--win-title-dark) 0%,var(--win-title-mid) 40%,var(--win-title-bright) 75%,var(--win-title-mid) 100%);color:var(--win-white)}.title-content{display:flex;align-items:center;gap:4px;font-weight:700;font-size:11px;letter-spacing:.2px;text-shadow:1px 1px 0 rgba(0,0,0,.45)}.title-icon{font-size:12px;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.4))}.window-controls{display:flex;gap:2px;align-items:center}.win-btn{width:22px;height:18px;padding:0;background:var(--win-gray);color:var(--win-black);font-family:Marlett,Webdings,system-ui,sans-serif;font-size:10px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.win-btn:active{border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);padding-top:1px;padding-left:1px}.minimize-glyph{display:block;width:8px;height:2px;background:var(--win-black);margin-top:4px}.maximize-glyph{display:block;width:9px;height:8px;border:1px solid var(--win-black);background:transparent;box-shadow:inset 1px 1px 0 var(--win-white),inset -1px -1px 0 var(--win-gray-dark)}.close-glyph{font-family:Marlett,system-ui,sans-serif;font-size:12px;line-height:1;font-weight:700;color:var(--win-black)}.win-btn.close:active{background:var(--win-gray-dark)}.menu-bar{position:relative;display:flex;align-items:center;padding:2px 4px;background:var(--win-gray);border-bottom:1px solid var(--win-gray-dark);min-height:22px;flex-shrink:0;gap:1px}.menu-item{padding:2px 7px;background:transparent;border:1px solid transparent;cursor:pointer;color:var(--win-black);font-size:11px;line-height:1.2}.menu-item.active,.menu-item:hover{background:var(--win-blue-active);color:var(--win-blue-text);outline:1px dotted var(--win-white);outline-offset:-3px}.menu-item u{text-decoration:underline}.file-input{display:none}.dropdown{position:absolute;top:calc(100% + 1px);left:4px;background:var(--win-gray);min-width:160px;padding:2px;display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark),1px 1px 3px #0006;z-index:1000}.dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:3px 18px;background:transparent;border:none;color:var(--win-black);font-size:11px;text-align:left;cursor:pointer;line-height:1.2;min-height:16px}.dropdown-item:hover:not(:disabled){background:var(--win-blue-active);color:var(--win-blue-text)}.dropdown-item:disabled{color:var(--win-disabled-text);cursor:default}.dropdown-item u{text-decoration:underline}.menu-sep{height:1px;background:var(--win-gray-dark);border-bottom:1px solid var(--win-gray-light);margin:2px 1px;box-sizing:content-box}.workspace{flex:1;display:flex;overflow:hidden;min-height:0;background:var(--win-gray)}.toolbox{flex-shrink:0;display:flex;flex-direction:column;background:var(--win-gray);padding:4px;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark);overflow-y:auto}.tool-grid{display:flex;flex-direction:column;gap:3px;align-items:center}.tool-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:42px;font-size:11px;gap:0;padding:2px;line-height:1;cursor:pointer;background:var(--win-gray);color:var(--win-black);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker)}.tool-button:hover:not(.active){background:var(--win-gray-light)}.tool-button.active{border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);background:var(--win-gray);padding:3px 1px 1px 3px}.tool-button .icon{font-size:17px;line-height:1;display:block}.tool-button .monochrome-icon{display:block;width:18px;height:18px;fill:var(--win-gray);stroke:var(--win-black);stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}.tool-button .monochrome-icon .icon-solid{fill:var(--win-black)}.tool-button .monochrome-icon .icon-no-fill{fill:none}.tool-button .monochrome-icon .icon-fine{stroke-width:1.15}.tool-button:hover:not(.active) .monochrome-icon{fill:var(--win-gray-light)}.tool-button .label{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:2px;letter-spacing:.2px}.canvas-host{flex:1;overflow:auto;background:var(--win-gray);min-width:0;display:flex;flex-direction:column}.canvas-area{position:relative;overflow:hidden;width:100%;height:100%;padding:0;outline:none;background:var(--win-gray)}.canvas-scroller{position:relative;width:100%;height:100%;overflow:auto;padding:16px}.canvas-wrapper{position:absolute}.canvas-frame{display:inline-block;position:relative;background:transparent;padding:0}.canvas-text-window{position:absolute;z-index:20;box-sizing:border-box;container-type:inline-size;background:var(--win-gray);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark),2px 2px 4px #00000059}.canvas-text-editor{position:absolute;box-sizing:border-box;margin:0;resize:none;overflow:hidden;outline:none;background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark);white-space:pre-wrap;overflow-wrap:break-word;font-weight:400;font-style:normal;text-align:left;caret-color:currentColor}.canvas-text-footer{position:absolute;top:calc(100% + 2px);right:-1px;left:-1px;min-width:0;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;gap:clamp(1px,2cqw,4px);padding:clamp(2px,2cqw,5px);background:var(--win-gray);color:var(--win-black);border-top:0;border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark),2px 2px 4px #00000059}.canvas-text-actions{display:flex;justify-content:flex-end;width:100%;gap:clamp(1px,2cqw,4px)}.canvas-text-button.dialog-btn{flex:0 1 clamp(18px,42cqw,60px);width:clamp(18px,42cqw,60px);min-width:18px;padding:1px clamp(1px,3cqw,7px);font-size:clamp(8px,8cqw,11px);overflow:hidden;white-space:nowrap}.canvas-text-window.compact-actions .canvas-text-button.dialog-btn{padding:1px;font-size:0}.canvas-text-window.compact-actions .canvas-text-button:after{font-size:clamp(10px,12cqw,14px);line-height:1}.canvas-text-window.compact-actions .canvas-text-button.cancel-btn:after{content:"×"}.canvas-text-window.compact-actions .canvas-text-button.ok-btn:after{content:"✓";font-size:13px}.text-font-select{width:100%;height:22px;padding:1px 2px;font-family:inherit;font-size:11px;color:var(--win-black);background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white)}#paintCanvas{background-image:linear-gradient(45deg,#d8d8d8 25%,transparent 25%),linear-gradient(-45deg,#d8d8d8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8d8d8 75%),linear-gradient(-45deg,transparent 75%,#d8d8d8 75%);background-size:2px 2px;background-position:0 0,0 1px,1px -1px,-1px 0px;-webkit-user-select:none;user-select:none;touch-action:none;display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}.panel{width:220px;flex-shrink:0;display:flex;flex-direction:column;background:var(--win-gray);gap:0;overflow-y:auto}.panel>.color-box-panel,.panel>.layers-panel,.panel>.options-panel-wrapper{padding:4px;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark);background:var(--win-gray)}.panel>.color-box-panel,.panel>.options-panel-wrapper{flex-shrink:0}.panel>.layers-panel{flex:1;min-height:120px;overflow-y:auto}.color-box-panel{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.picker-cluster{display:flex;align-items:center;gap:6px}.swatch-stack{position:relative;width:38px;height:34px;flex-shrink:0}.swatch{position:absolute;width:30px;height:30px;padding:0;cursor:pointer;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark),1px 1px 0 var(--win-black)}.swatch.secondary{top:0;left:0;z-index:1}.swatch.primary{bottom:0;right:0;z-index:2}.swatch.active{outline:1px solid var(--win-black);outline-offset:1px}.picker-buttons{display:flex;flex-direction:column;gap:2px}.picker-btn{width:20px;height:14px;font-size:10px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--win-gray);color:var(--win-black);line-height:1;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.picker-btn:active{border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);padding:1px 0 0 1px}.color-picker{display:flex;flex-direction:column;gap:3px;width:100%}.picker-row{display:flex;gap:4px}.sv-field{position:relative;flex:1;aspect-ratio:1;padding:0;cursor:crosshair;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);background:var(--win-gray)}.sv-field .layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.sv-field .white-grad{background:linear-gradient(to right,#fff,#fff0)}.sv-field .black-grad{background:linear-gradient(to bottom,#0000,#000)}.sv-indicator{position:absolute;width:8px;height:8px;border:1px solid white;outline:1px solid black;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-sizing:content-box}.hue-strip{position:relative;width:12px;align-self:stretch;padding:0;cursor:pointer;overflow:visible;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);background:var(--win-gray)}.hue-rainbow{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,red,#ff0,#0f0,#0ff,#00f,#f0f,red);pointer-events:none}.hue-indicator{position:absolute;left:-3px;right:-3px;height:2px;background:#fff;border-top:1px solid black;border-bottom:1px solid black;transform:translateY(-1px);pointer-events:none;box-sizing:content-box}.readouts{display:flex;gap:4px;align-items:stretch}.hex-input{flex:1;min-width:0;height:18px;font-family:Courier New,monospace;font-size:11px;padding:0 2px;color:var(--win-black);background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);text-align:center}.hex-input:focus{outline:none}.rgb-group{display:flex;gap:2px}.rgb-input{width:24px;height:18px;font-family:Courier New,monospace;font-size:10px;padding:0 1px;color:var(--win-black);background:var(--win-white);text-align:center;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);-moz-appearance:textfield}.rgb-input::-webkit-outer-spin-button,.rgb-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.rgb-input:focus{outline:none}.palette-grid{display:grid;grid-template-columns:repeat(14,1fr);gap:1px;padding:2px;background:var(--win-gray);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.palette-swatch{aspect-ratio:1;width:100%;padding:0;border:1px solid rgba(0,0,0,.35);cursor:pointer;box-sizing:border-box}.palette-swatch:hover{outline:1px solid var(--win-white);outline-offset:-2px;box-shadow:inset 0 0 0 1px var(--win-black)}.palette-swatch:active{transform:scale(.92)}.layers-panel{display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;overflow:hidden;font-size:11px}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:0 2px;flex-shrink:0}.panel-header .title{font-weight:700;font-size:11px;color:var(--win-black);letter-spacing:.2px}.header-actions{display:flex;gap:2px}.new-layer{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;height:20px;padding:0 6px;line-height:1;color:var(--win-black);background:var(--win-gray);cursor:pointer;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.new-layer:disabled{color:var(--win-disabled-text);cursor:default}.new-layer:active:not(:disabled){border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);padding:1px 0 0 1px}.layer-list{flex:1;min-height:60px;position:relative;display:flex;flex-direction:column;background:var(--win-white);padding:1px;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);overflow-y:auto;overflow-x:hidden;touch-action:none}.layer-row{display:flex;align-items:center;gap:2px;padding:2px 3px;min-height:22px;color:var(--win-black);border:1px dotted transparent;cursor:default;-webkit-user-select:none;user-select:none;flex-shrink:0}.layer-row:hover{background:var(--win-gray-light)}.layer-row.active{background:var(--win-blue-active);color:var(--win-blue-text);outline:1px dotted var(--win-white);outline-offset:-3px}.layer-row.active button{color:var(--win-blue-text)}.layer-row button{font-size:10px;cursor:pointer;background:transparent;border:1px solid transparent;padding:0;line-height:1;color:var(--win-black);font-family:inherit}.layer-row button.name{flex:1;text-align:left;padding:2px 4px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.layer-row input.name-input{flex:1;font-family:inherit;font-size:10px;padding:1px 3px;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);background:var(--win-white);color:var(--win-black);outline:none;min-width:0}.layer-row .actions{display:flex;gap:1px}.layer-row .actions button{font-size:8px;width:16px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--win-gray);color:var(--win-black);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.layer-row.active .actions button{background:var(--win-gray-light);color:var(--win-black)}.layer-row .actions button:active{border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);padding:1px 0 0 1px}.layer-row .actions button:disabled{color:var(--win-disabled-text);cursor:default}.layer-row .actions button.delete:hover{background:#c44;color:var(--win-white)}.layer-row .opacity-slider{width:48px;margin-right:2px}.layer-row.grouped{padding-left:16px}.group-row{display:flex;align-items:center;gap:2px;min-height:22px;padding:2px 3px;background:var(--win-gray-light);border-top:1px solid var(--win-white);border-bottom:1px solid var(--win-gray-dark);flex-shrink:0;-webkit-user-select:none;user-select:none}.group-row button{font-family:inherit;font-size:10px;color:var(--win-black);cursor:pointer}.group-row button.collapse,.group-row button.name{border:0;background:transparent;padding:2px}.group-row button.name{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.group-row input.name-input{flex:1;min-width:0}.group-row .actions{display:flex;gap:1px}.group-row .actions button{width:16px;height:18px;padding:0;font-size:8px;background:var(--win-gray);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker)}.group-row button:disabled{color:var(--win-disabled-text);cursor:default}.options-panel-wrapper{display:flex;flex-direction:column;gap:4px;font-size:11px;padding:4px;flex-shrink:0}.options-label{font-weight:700;color:var(--win-black);padding:0 2px 3px;font-size:11px;letter-spacing:.2px;border-bottom:1px solid var(--win-gray-darker);box-shadow:0 1px 0 var(--win-white)}.no-options{color:var(--win-disabled-text);font-style:italic;padding:2px}.tool-options{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:flex-start;font-size:11px;padding:0;flex-shrink:0}.tool-options .control{display:flex;flex-direction:column;gap:3px;justify-content:flex-start;min-height:44px}.tool-options .control-full{flex-basis:100%;min-height:unset}.tool-options .control .label{color:var(--win-black);font-weight:700;font-size:11px;letter-spacing:.2px;min-height:14px;line-height:14px}.tool-options .row{display:flex;align-items:center;gap:4px;height:24px}.tool-options .value{min-width:36px;text-align:right;font-variant-numeric:tabular-nums;font-size:11px}.tool-options input[type=range]{width:128px}.tool-options .seg{display:flex;background:var(--win-gray);padding:1px;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.tool-options .seg button{height:20px;font-size:11px;padding:0 8px;font-weight:500;line-height:1;color:var(--win-black);background:var(--win-gray);cursor:pointer;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.tool-options .seg button+button{margin-left:2px}.tool-options .seg button.active{background:var(--win-gray);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);color:var(--win-blue);font-weight:700}.tool-options .seg button:hover:not(.active){background:var(--win-gray-light)}.tool-options .seg button:active:not(.active){border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.tool-options .align-cross{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;align-items:center}.tool-options .align-cross button{height:20px;font-size:11px;padding:0 4px;font-weight:500;line-height:1;color:var(--win-black);background:var(--win-gray);cursor:pointer;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.tool-options .align-cross button:hover{background:var(--win-gray-light)}.tool-options .align-cross button:active{border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.tool-options .align-cross .align-cross-center{text-align:center;font-size:11px;opacity:.5;-webkit-user-select:none;user-select:none}.tool-options .presets{display:grid;grid-template-columns:repeat(9,18px);grid-template-rows:20px;gap:0;background:var(--win-gray);padding:1px;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.tool-options .preset{width:18px;height:20px;font-size:10px;padding:0;font-weight:700;color:var(--win-black);background:var(--win-gray);cursor:pointer;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.tool-options .preset+.preset{margin-left:1px}.tool-options .preset.active{background:var(--win-gray);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);color:var(--win-blue)}.tool-options .preset:hover:not(.active){background:var(--win-gray-light)}.tool-options .preset:active:not(.active){border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.tool-options .pattern-grid{display:grid;grid-template-columns:repeat(10,18px);grid-template-rows:20px;gap:0;background:var(--win-gray);padding:1px;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.tool-options .pattern-cell{width:18px;height:20px;font-size:11px;line-height:1;color:var(--win-black);background:var(--win-gray);cursor:pointer;padding:0;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.tool-options .pattern-cell+.pattern-cell{margin-left:1px}.tool-options .pattern-cell.active{background:var(--win-gray);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);color:var(--win-blue);font-weight:700}.tool-options .pattern-cell:hover:not(.active){background:var(--win-gray-light)}.tool-options .pattern-cell:active:not(.active){border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.tool-options .custom-patterns-section{margin-top:7px}.tool-options .custom-patterns-heading{display:flex;justify-content:space-between;margin-bottom:3px;font-weight:700}.tool-options .custom-patterns-heading span{color:var(--win-gray-darker);font-family:Courier New,monospace}.tool-options .custom-patterns-scroll{max-height:150px;min-height:48px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));align-content:start;gap:3px;padding:4px;background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark)}.tool-options .custom-pattern-item{position:relative;width:44px;height:44px;justify-self:center}.tool-options .custom-pattern-swatch{width:44px;height:44px;padding:1px;overflow:hidden;cursor:pointer;background-color:#fff;background-image:linear-gradient(45deg,#d2d2d2 25%,transparent 25%),linear-gradient(-45deg,#d2d2d2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d2d2d2 75%),linear-gradient(-45deg,transparent 75%,#d2d2d2 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.tool-options .custom-pattern-swatch canvas{display:block;image-rendering:pixelated}.tool-options .custom-pattern-item.active .custom-pattern-swatch{border-top-color:var(--win-gray-darker);border-left-color:var(--win-gray-darker);border-right-color:var(--win-white);border-bottom-color:var(--win-white);outline:1px dotted var(--win-blue);outline-offset:-4px}.tool-options .custom-pattern-remove{position:absolute;top:-2px;right:-2px;width:13px;height:13px;padding:0;line-height:9px;color:var(--win-black);background:var(--win-gray);border:1px outset var(--win-white);cursor:pointer}.tool-options .custom-pattern-remove:hover{color:var(--win-white);background:#a00000}.tool-options .custom-patterns-empty{grid-column:1 / -1;padding:8px 3px;color:#333;text-align:center;font-style:italic}.tool-options .toggle-row{display:flex;align-items:center;gap:4px;cursor:pointer;height:20px}.tool-options .toggle-label{font-size:11px;color:var(--win-black)}.status-host{flex-shrink:0;background:var(--win-gray);border-top:1px solid var(--win-gray-darker);box-shadow:inset 0 1px 0 var(--win-gray-dark)}.status-bar{display:flex;align-items:stretch;flex-shrink:0;width:100%;min-height:20px;font-size:10.5px;color:var(--win-black);background:var(--win-gray);padding:1px;gap:1px}.section{display:flex;align-items:center;gap:3px;padding:0 7px;min-height:14px;background:var(--win-gray);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);white-space:nowrap;font-variant-numeric:tabular-nums}.section .icon{opacity:.7;font-size:9px}.section .value{font-size:10.5px}.section .value.dim{opacity:.5}.coords{min-width:110px}.size{min-width:90px}.zoom{min-width:56px}.tool{min-width:92px;font-weight:600}.grip{width:2px;background:linear-gradient(to right,var(--win-gray-darker) 0 1px,var(--win-white) 1px 2px);align-self:stretch}.spacer{flex:1;min-width:8px}.status-bar .actions{display:flex;gap:3px;padding:0 2px;align-items:center}.status-bar .action{font-size:10.5px;padding:0 7px;min-height:14px;background:var(--win-gray);color:var(--win-black);cursor:pointer;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.status-bar .action:disabled{color:var(--win-disabled-text);text-shadow:1px 1px 0 var(--win-white);cursor:default}.status-bar .action:active:not(:disabled){border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);padding:1px 7px 0 8px}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:2000}.dialog-window{background:var(--win-gray);min-width:220px;padding:2px;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark),2px 2px 8px #0006}.dialog-window .title-bar{display:flex;align-items:center;color:var(--win-blue-text);padding:2px 4px;font-weight:700;font-size:11px;margin-bottom:6px;min-height:18px}.dialog-body{padding:4px 8px;display:flex;flex-direction:column;gap:8px}.dimension-group{display:flex;align-items:center;gap:4px}.dim-label{width:44px;text-align:right;font-size:11px}.dim-input{width:56px;height:20px}.dim-unit{font-size:11px}.anchor-fieldset{border:1px solid var(--win-gray-dark);padding:6px 8px;margin:0}.anchor-fieldset legend{font-size:11px;padding:0 4px}.anchor-grid{display:grid;grid-template-columns:repeat(3,24px);grid-template-rows:repeat(3,24px);gap:2px;justify-content:center}.anchor-cell{width:24px;height:24px;padding:0;font-size:12px;line-height:22px;text-align:center;cursor:pointer;background:var(--win-gray);color:var(--win-black);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.anchor-cell.selected{border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light);background:var(--win-gray)}.dialog-button-row{display:flex;justify-content:flex-end;gap:6px;padding:8px 8px 4px}.dialog-btn{min-width:60px;height:22px;padding:1px 12px;font-family:inherit;font-size:11px;cursor:pointer;background:var(--win-gray);color:var(--win-black);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark);position:relative}.dialog-btn:active{border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.dialog-btn.ok-btn{font-weight:700}.context-menu{background:var(--win-gray);padding:4px;border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark),1px 1px 3px #0006;z-index:3000}.context-menu .tool-options{max-width:210px}.tool-options .pattern-lab-launch{width:100%;height:22px;margin-top:5px;padding:1px 8px;cursor:pointer;background:var(--win-gray);color:var(--win-black);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark);font-weight:700}.tool-options .pattern-lab-launch:active{padding:2px 7px 0 9px;border-color:var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.pattern-lab-backdrop{background:#00000059}.pattern-lab-window{width:min(1120px,calc(100vw - 28px));height:min(760px,calc(100vh - 28px));min-width:0;display:flex;flex-direction:column;overflow:hidden}.pattern-lab-window .pattern-lab-title{flex:0 0 auto;margin-bottom:0}.pattern-lab-title .title-text{flex:1}.pattern-lab-close{width:22px;height:18px;padding:0;cursor:pointer}.pattern-lab-toolbar{display:flex;align-items:flex-end;gap:6px;padding:6px;background:var(--win-gray);border-bottom:1px solid var(--win-gray-dark);box-shadow:inset 0 -1px var(--win-white);flex-wrap:wrap}.pattern-lab-toolbar label{display:flex;flex-direction:column;gap:2px;font-weight:700}.pattern-lab-toolbar select{min-width:145px;height:22px;padding:1px 2px;font:inherit;color:var(--win-black);background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white)}.pattern-lab-toolbar select[data-lab-field=scale]{min-width:58px}.pattern-lab-toolbar .dialog-btn{white-space:nowrap}.pattern-lab-seed{margin-left:auto;min-height:22px;padding:3px 6px;display:flex;align-items:center;color:var(--win-gray-darker);background:var(--win-gray);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);font-family:Courier New,monospace}.pattern-lab-body{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:4px;padding:4px}.pattern-lab-library{min-height:0;overflow:auto;padding:5px;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;gap:4px;background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark)}.pattern-lab-card{min-width:0;padding:4px;display:flex;flex-direction:column;gap:3px;text-align:left;color:var(--win-black);background:var(--win-gray);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark);cursor:pointer}.pattern-lab-card:hover:not(.selected){background:var(--win-gray-light)}.pattern-lab-card.selected{color:var(--win-blue-text);background:var(--win-blue-active);border-top-color:var(--win-gray-darker);border-left-color:var(--win-gray-darker);border-right-color:var(--win-white);border-bottom-color:var(--win-white);outline:1px dotted var(--win-white);outline-offset:-3px}.pattern-lab-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.pattern-lab-card small{opacity:.78;font-family:Courier New,monospace;font-size:9px}.pattern-lab-canvas-well,.pattern-lab-detail-well{display:block;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#d2d2d2 25%,transparent 25%),linear-gradient(-45deg,#d2d2d2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d2d2d2 75%),linear-gradient(-45deg,transparent 75%,#d2d2d2 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;padding:1px;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark)}.pattern-lab-canvas-well{width:76px;height:76px;align-self:center}.pattern-lab-canvas-well canvas,.pattern-lab-detail-well canvas{display:block;image-rendering:pixelated}.pattern-lab-inspector{min-height:0;overflow:auto;padding:7px;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark);background:var(--win-gray)}.pattern-lab-preview-grid{display:grid;grid-template-columns:repeat(3,100px);justify-content:space-between;gap:4px;margin-bottom:8px}.pattern-lab-preview-grid figure{min-width:0;margin:0;text-align:center}.pattern-lab-preview-choice{display:block;width:100px;height:100px;padding:0;background:transparent;border:0;cursor:pointer}.pattern-lab-preview-grid figure.selected .pattern-lab-preview-choice{background:var(--win-blue-active);outline:1px dotted var(--win-white);outline-offset:-3px}.pattern-lab-preview-grid figure.selected .pattern-lab-detail-well{border-top-color:var(--win-gray-darker);border-left-color:var(--win-gray-darker);border-right-color:var(--win-white);border-bottom-color:var(--win-white)}.pattern-lab-preview-grid figure.selected figcaption{color:var(--win-blue);font-weight:700}.pattern-lab-preview-grid figcaption{margin-top:3px;overflow:hidden;text-overflow:ellipsis;font-family:Courier New,monospace;font-size:9px}.pattern-lab-detail-well{width:100px;height:100px}.pattern-lab-detail-well.white,.pattern-lab-canvas-well.white{background:#fff}.pattern-lab-detail-well.black,.pattern-lab-canvas-well.black{background:#000}.pattern-lab-selection-header{margin:-1px -1px 8px;padding:5px 6px 6px;background:var(--win-gray-light);border-bottom:1px solid var(--win-gray-dark);box-shadow:inset 0 -1px var(--win-white)}.pattern-lab-family{color:var(--win-gray-darker);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}.pattern-lab-inspector h2{margin:2px 0 3px;font-size:13px}.pattern-lab-section-title{margin-bottom:4px;font-weight:700}.pattern-lab-inspector p{margin:4px 0 10px;line-height:1.35}.pattern-lab-selection-header p{margin:0}.pattern-lab-piece-editor,.pattern-lab-info{margin:8px 0;padding:5px 6px 6px;border:1px solid var(--win-gray-dark);box-shadow:inset 1px 1px var(--win-white)}.pattern-lab-piece-editor legend,.pattern-lab-info legend{padding:0 4px;font-weight:700}.pattern-lab-piece{display:flex;gap:6px;min-width:0;padding:4px 0;border-bottom:1px dotted #777}.pattern-lab-piece:last-child{border-bottom:0}.pattern-lab-piece-preview{flex:0 0 52px;width:52px;height:52px;padding:1px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#d2d2d2 25%,transparent 25%),linear-gradient(-45deg,#d2d2d2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d2d2d2 75%),linear-gradient(-45deg,transparent 75%,#d2d2d2 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark)}.pattern-lab-piece-preview canvas{display:block;image-rendering:pixelated}.pattern-lab-piece-controls{min-width:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:3px 5px}.pattern-lab-piece-controls label{min-width:0;display:flex;flex-direction:column;gap:2px;font-weight:700}.pattern-lab-piece-controls select{min-width:0;width:100%;height:21px;font:inherit;background:var(--win-white);border-top:1px solid var(--win-gray-darker);border-left:1px solid var(--win-gray-darker);border-right:1px solid var(--win-white);border-bottom:1px solid var(--win-white)}.pattern-lab-piece-controls small{grid-column:1 / -1;color:#444;font-family:Courier New,monospace;font-size:9px}.pattern-lab-inspector dl{display:grid;grid-template-columns:66px 1fr;gap:3px 6px;margin:0;padding:1px 2px;font-family:Courier New,monospace}.pattern-lab-inspector dt{font-weight:700}.pattern-lab-inspector dd{margin:0}.pattern-lab-actions{position:sticky;bottom:-7px;display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:7px -7px -7px;padding:7px;background:var(--win-gray);border-top:1px solid var(--win-white);box-shadow:0 -1px var(--win-gray-dark)}.pattern-lab-actions .dialog-btn{width:100%;min-width:0;height:26px;padding-inline:4px}.pattern-lab-actions .ok-btn{font-weight:700;outline:1px solid var(--win-black);outline-offset:-4px}.pattern-lab-inspector .pattern-lab-note{margin:7px 1px;color:var(--win-gray-darker);font-size:9px}.pattern-lab-actions .dialog-btn:disabled{color:var(--win-disabled-text);cursor:default}@media(max-width:720px),(max-width:1000px)and (max-height:500px){html,body{width:100%;height:100%;overscroll-behavior:none}.app{height:100dvh}.title-bar,.app>header,.status-host{display:none}.workspace,.canvas-host,.canvas-area,.canvas-scroller{width:100%;height:100%}.workspace{flex:1 1 auto}.canvas-scroller{padding:0;overscroll-behavior:contain}.mobile-controls-toggle{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));z-index:2010;display:grid;place-items:center;width:42px;height:42px;padding:0;background:var(--win-gray);background:color-mix(in srgb,var(--win-gray) 92%,transparent);color:var(--win-black);cursor:pointer;border-top:2px solid var(--win-white);border-left:2px solid var(--win-white);border-right:2px solid var(--win-gray-darker);border-bottom:2px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark),2px 2px #0000004d;touch-action:manipulation}.mobile-controls-toggle:active,.mobile-controls-toggle.is-open{border-top-color:var(--win-gray-darker);border-left-color:var(--win-gray-darker);border-right-color:var(--win-white);border-bottom-color:var(--win-white);box-shadow:inset 1px 1px 0 var(--win-gray-dark),inset -1px -1px 0 var(--win-gray-light)}.mobile-expand-icon{position:relative;width:20px;height:20px;transition:transform .12s ease}.mobile-controls-toggle.is-open .mobile-expand-icon{transform:rotate(45deg) scale(.82)}.mobile-expand-icon .corner{position:absolute;width:7px;height:7px;border-color:currentColor;border-style:solid}.mobile-expand-icon .top-left{top:0;left:0;border-width:2px 0 0 2px}.mobile-expand-icon .top-right{top:0;right:0;border-width:2px 2px 0 0}.mobile-expand-icon .bottom-left{bottom:0;left:0;border-width:0 0 2px 2px}.mobile-expand-icon .bottom-right{right:0;bottom:0;border-width:0 2px 2px 0}.mobile-controls{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;flex-direction:column;min-width:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--win-gray);overflow:hidden}.mobile-controls-header{min-height:58px;padding:8px 8px 8px 60px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;background:linear-gradient(90deg,var(--win-title-dark) 0%,var(--win-title-mid) 72%,var(--win-gray-dark) 100%);color:var(--win-white);border-bottom:1px solid var(--win-black);font-size:13px;letter-spacing:.2px}.mobile-canvas-button{min-width:76px;min-height:38px;padding:4px 12px;background:var(--win-gray);color:var(--win-black);border-top:2px solid var(--win-white);border-left:2px solid var(--win-white);border-right:2px solid var(--win-gray-darker);border-bottom:2px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark);touch-action:manipulation}.mobile-controls-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px;scrollbar-gutter:stable}.mobile-control-section{margin:0 0 10px;padding:4px;background:var(--win-gray);border-top:1px solid var(--win-white);border-left:1px solid var(--win-white);border-right:1px solid var(--win-gray-darker);border-bottom:1px solid var(--win-gray-darker);box-shadow:inset 1px 1px 0 var(--win-gray-light),inset -1px -1px 0 var(--win-gray-dark)}.mobile-control-section>h2{margin:0;padding:4px 5px 6px;font-size:11px;line-height:1}#mobile-menu-slot .menu-bar{min-height:42px;padding:4px;flex-wrap:wrap;gap:2px;border:0}#mobile-menu-slot .menu-item{min-height:34px;padding:6px 9px;touch-action:manipulation}#mobile-menu-slot .dropdown{max-width:calc(100vw - 28px)}#mobile-menu-slot .dropdown-item{min-height:34px;padding:7px 18px}#mobile-tools-slot .toolbox{width:100%;padding:4px;overflow:visible}#mobile-tools-slot .tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:6px}#mobile-tools-slot .tool-button{width:100%;height:54px;min-width:0;touch-action:manipulation}#mobile-tools-slot .tool-button .label{font-size:9px}#mobile-panel-slot .panel{width:100%;overflow:visible}#mobile-panel-slot .panel>.layers-panel{flex:none;min-height:180px;max-height:none}.pattern-lab-body{grid-template-columns:1fr;grid-template-rows:minmax(180px,42%) minmax(0,58%)}.pattern-lab-preview-grid{overflow-x:auto}.pattern-lab-seed{width:100%;margin-left:0}}