:root{--canvas-bg: #fafafa;--ui-surface: #ffffff;--ui-tab-inactive: #ededed;--ui-tab-inactive-hover: #f5f5f5;--ui-border: #777777;--ui-border-light: #aaaaaa;--ui-text: #333333;--ui-accent: #707070;--ui-accent-soft: rgba(0, 0, 0, .07);--ui-active-fill: #dcdcdc;--ui-active-edge: #5a5a5a;--ui-active-hover: #cfcfcf;--ui-hover: #eeeeee;--ui-chamfer: 3px;--ui-chamfer-lg: 3px;--ui-bevel: 1px;--ui-drop-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, .16)) drop-shadow(0 3px 8px rgba(0, 0, 0, .1));--ui-drop-shadow-button: drop-shadow(0 2px 4px rgba(0, 0, 0, .22)) drop-shadow(0 4px 10px rgba(0, 0, 0, .14));--ui-drop-shadow-toolbar-button: drop-shadow(1px 1px 0 rgba(0, 0, 0, .28)) drop-shadow(2px 2px 0 rgba(0, 0, 0, .14));--ui-drop-shadow-lifted: drop-shadow(0 2px 5px rgba(0, 0, 0, .14)) drop-shadow(0 5px 12px rgba(0, 0, 0, .09));--ui-inset-shadow: inset 0 2px 4px rgba(0, 0, 0, .11);--ui-inset-fill: linear-gradient( to bottom, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .015) 30%, transparent 55% );--toolbar-control-height: 45px;--toolbar-field-height: 31px}.pixel-chamfer{--ch: var(--ui-chamfer);clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));border:none;border-radius:0}.pixel-chamfer-lg{--ch: var(--ui-chamfer-lg)}.pixel-frame{padding:var(--ui-bevel);background:var(--pixel-edge, var(--ui-border));border:none;box-sizing:border-box}.ui-shadow{display:inline-flex;vertical-align:top;max-width:100%;filter:var(--ui-drop-shadow);pointer-events:none}.ui-shadow>*{pointer-events:auto}.ui-shadow-lifted{filter:var(--ui-drop-shadow-lifted)}.ui-shadow-button{filter:var(--ui-drop-shadow-button)}.step-shell .ui-shadow-button{filter:var(--ui-drop-shadow-toolbar-button)}.history-toolbar .ui-shadow-button,.action-toolbar .ui-shadow-button{filter:var(--ui-drop-shadow)}.ui-shadow-fixed-legend{position:absolute;bottom:16px;left:16px;z-index:1000;pointer-events:none}.btn-face{--ch: calc(var(--ui-chamfer) - var(--ui-bevel));display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));background:var(--pixel-fill, #ffffff);overflow:hidden}.toolbar-panel,.tool-hint,.step-shell,.overlay-legend{--ch: var(--ui-chamfer-lg);position:relative;clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));background:var(--ui-border);border:none;border-radius:0}.toolbar-panel:before,.tool-hint:before,.step-shell:before,.overlay-legend:before{content:"";position:absolute;inset:var(--ui-bevel);--ch: calc(var(--ui-chamfer-lg) - var(--ui-bevel));clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));background:var(--ui-surface);pointer-events:none;z-index:0}.toolbar-panel>*,.tool-hint>*,.step-shell>*,.overlay-legend>*{position:relative;z-index:1}.action-btn,button.tool-btn,.color-swatch{clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));--ch: var(--ui-chamfer);padding:var(--ui-bevel);background:var(--pixel-edge, var(--ui-border));border:none;box-sizing:border-box}.meta-field,.toolbar-group-select{display:inline-flex;align-items:stretch;clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));--ch: var(--ui-chamfer);padding:var(--ui-bevel);background:var(--ui-border);border:none;box-sizing:border-box}.meta-field input,.toolbar-group-select select{--ch: calc(var(--ui-chamfer) - var(--ui-bevel));clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));border:none;background-color:#f8f8f8;background-image:var(--ui-inset-fill);box-shadow:var(--ui-inset-shadow);filter:none;overflow:hidden}.meta-field input:focus,.toolbar-group-select select:focus,.dialog-field input:focus{background-color:#fff;box-shadow:inset 0 2px 5px #00000021;outline:none}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:sans-serif;color:var(--ui-text)}#canvas{width:100vw;height:100vh;display:block;background:var(--canvas-bg);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none}#appChrome,.tool-hint{user-select:none;-webkit-user-select:none}.toolbar-panel{display:flex;align-items:center;gap:8px;padding:6px 8px;flex-wrap:wrap;width:fit-content;max-width:100%}#appChrome{position:absolute;top:10px;left:10px;right:10px;z-index:1000;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}#headerRow{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;pointer-events:none}.top-row{display:flex;align-items:stretch;gap:8px;width:100%;pointer-events:none}#historyToolbar,#topBar,#stepShell,#actionToolbar{pointer-events:auto}.history-toolbar{display:flex;align-items:stretch;gap:6px;flex:0 0 auto}#topBar{flex:0 1 auto;flex-wrap:nowrap;align-items:center;height:var(--toolbar-control-height);box-sizing:border-box;padding:0 8px;gap:8px}.step-shell{display:flex;flex-direction:column;align-items:stretch;width:fit-content;max-width:100%}.step-body{display:block;width:fit-content;max-width:100%;position:relative;z-index:1}.step-column{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:fit-content;max-width:100%;pointer-events:none}.step-column>.step-shell,.step-column>.ui-shadow,.step-column>.tool-hint{pointer-events:auto}.step-column .tool-hint{align-items:center;flex:0 0 auto;height:auto;min-height:0;box-sizing:border-box;padding:4px 10px}.step-column .tool-hint:not(.collapsed){width:max-content;max-width:min(560px,calc(100vw - 32px));overflow:visible}.step-column>.ui-shadow:has(>.tool-hint){display:flex;flex:0 0 auto}.step-column>.ui-shadow:has(>.tool-hint:not(.collapsed)){width:auto;max-width:min(560px,calc(100vw - 32px))}.step-column>.ui-shadow:has(>.tool-hint.collapsed){width:auto;max-width:none}.step-column .tool-hint.collapsed{width:auto;min-width:0;max-width:none}.tool-hint{display:flex;align-items:center;gap:8px;margin:0;padding:4px 10px;font-size:12px;line-height:1.2;color:var(--ui-text);pointer-events:none}.tool-hint:not(.collapsed){width:max-content;max-width:min(560px,calc(100vw - 32px))}.tool-hint-icon{flex-shrink:0;color:var(--ui-accent)}.tool-hint-text{flex:1 1 auto;min-width:0}.tool-hint:not(.collapsed) .tool-hint-text{white-space:nowrap;overflow:visible;text-overflow:clip}.tool-hint.collapsed{width:auto;height:auto;max-width:none;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}.tool-hint.collapsed .tool-hint-text{display:none}.tool-hint.collapsed .tool-hint-icon{margin-top:0}.tool-hint[hidden]{display:none}.step-panel{display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px;width:fit-content;flex:0 0 auto;box-sizing:border-box;position:relative;z-index:1}.step-tabs{display:flex;align-items:flex-end;gap:4px;padding:6px 8px 0;position:relative;z-index:2;width:100%;box-sizing:border-box;border-bottom:1px solid var(--ui-border-light)}button.tool-btn.step-tab{padding:var(--ui-bevel);font-size:12px;position:relative;margin-bottom:-1px;clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,0 100%,0 var(--ch))}button.tool-btn.step-tab .btn-face{padding:5px 12px 4px;background:var(--ui-tab-inactive);clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,0 100%,0 var(--ch))}button.tool-btn.step-tab:hover .btn-face{background:var(--ui-tab-inactive-hover)}button.tool-btn.step-tab.active{margin-bottom:-1px;z-index:3;color:var(--ui-text)}button.tool-btn.step-tab.active .btn-face{padding:5px 12px calc(4px + var(--ui-bevel) + 1px);margin-bottom:-1px;background:var(--ui-surface)}button.tool-btn.step-tab.active:hover .btn-face{background:var(--ui-surface)}#shapeToolbar{padding-top:6px;border-top:1px solid var(--ui-border-light)}.tool-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#insideToolbar{flex-wrap:nowrap}#insideToolbar,#overlayToolbar{display:none}.action-toolbar{display:flex;align-items:stretch;gap:6px;margin-left:auto;pointer-events:auto}.action-btn{display:inline-flex;flex-direction:column;align-items:stretch;justify-content:stretch;min-width:52px;height:var(--toolbar-control-height);box-sizing:border-box;padding:var(--ui-bevel);cursor:pointer;font:inherit;color:var(--ui-text);-webkit-user-select:none;user-select:none}.action-btn .btn-face{flex-direction:column;gap:3px;padding:4px 6px}.action-btn svg{display:block;flex-shrink:0}.action-btn-label{font-size:10px;line-height:1;font-weight:600;letter-spacing:.01em}.action-btn:hover .btn-face{background:var(--ui-hover)}.meta-field{align-items:stretch}.meta-field input{width:176px;height:calc(var(--toolbar-field-height) - 2 * var(--ui-bevel));box-sizing:border-box;padding:0 8px;font-size:13px;line-height:1.2;-webkit-user-select:text;user-select:text}.toolbar-group-select select{min-width:52px;height:calc(var(--toolbar-field-height) - 2 * var(--ui-bevel));box-sizing:border-box;padding:0 6px;-webkit-user-select:text;user-select:text}.toolbar-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.toolbar-label{font-size:12px;font-weight:600;color:var(--ui-text);margin-right:4px}button.tool-btn{cursor:pointer;-webkit-user-select:none;user-select:none}button.tool-btn .btn-face{padding:4px 10px;min-height:22px}button.tool-btn.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px;line-height:0}button.tool-btn.icon-btn svg{display:block}button.tool-btn.active:not(.step-tab){--pixel-edge: var(--ui-active-edge);color:var(--ui-text)}button.tool-btn.active:not(.step-tab) .btn-face{background:var(--ui-active-fill)}button.tool-btn:hover .btn-face{background:var(--ui-hover)}button.tool-btn.active:not(.step-tab):hover .btn-face{background:var(--ui-active-hover)}button.tool-btn.erase-btn{--pixel-edge: #c9a0a0}button.tool-btn.erase-btn .btn-face{background:#f7f2f2}button.tool-btn.erase-btn:hover .btn-face{background:#f0e8e8}button.tool-btn.erase-btn.active{--pixel-edge: #9c5858;color:#fff}button.tool-btn.erase-btn.active .btn-face{background:#b86b6b}button.tool-btn.erase-btn.active:hover .btn-face{background:#9c5858}button.tool-btn:not(.step-tab):active,.action-btn:active{transform:translate(1px,1px)}.ui-shadow:has(>.action-btn:active),.ui-shadow:has(>button.tool-btn:active),.ui-shadow:has(>.color-swatch:active){filter:drop-shadow(0 1px 2px rgba(0,0,0,.16))}.step-shell .ui-shadow:has(>button.tool-btn:active),.step-shell .ui-shadow:has(>.color-swatch:active){filter:drop-shadow(1px 1px 0 rgba(0,0,0,.12))}.color-swatch .btn-face{padding:0}@media (max-width: 900px){#topBar{max-width:calc(100% - 180px)}}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000059;z-index:2000}.dialog-overlay[hidden]{display:none}.dialog-panel{position:relative;min-width:320px;max-width:90vw;padding:16px 18px;background:var(--ui-border);--ch: var(--ui-chamfer-lg);clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));border:none;filter:none}.dialog-panel:before{content:"";position:absolute;inset:var(--ui-bevel);--ch: calc(var(--ui-chamfer-lg) - var(--ui-bevel));clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));background:#fff;pointer-events:none;z-index:0}.dialog-panel>*{position:relative;z-index:1}.dialog-title{margin:0 0 12px;font-size:16px}.dialog-message{margin:0 0 4px;font-size:13px;line-height:1.45;color:var(--ui-text)}.dialog-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-size:13px}.dialog-field input{padding:6px 8px;border:none;background-color:#f8f8f8;background-image:var(--ui-inset-fill);box-shadow:var(--ui-inset-shadow),inset 0 0 0 1px var(--ui-border);font-size:14px}.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}.overlay-color-swatches{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.color-swatch{width:24px;height:24px;padding:var(--ui-bevel);cursor:pointer}.color-swatch:before{background:var(--swatch-color, #cccccc)}.color-swatch.active{outline:2px solid var(--ui-active-edge);outline-offset:1px}.overlay-legend{min-width:180px;padding:10px}.overlay-legend-title{font-size:12px;font-weight:700;margin-bottom:6px;color:var(--ui-text)}.overlay-legend-item{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:4px 6px;border:none;background:transparent;cursor:pointer;text-align:left;font:inherit;color:var(--ui-text)}.overlay-legend-item:hover{background:var(--ui-accent-soft)}.overlay-legend-swatch{width:14px;height:14px;box-shadow:inset 0 0 0 1px var(--ui-border);flex-shrink:0}.overlay-legend-label{font-size:12px}.dialog-actions .tool-btn{display:inline-flex;align-items:stretch}.dialog-actions .tool-btn .btn-face{min-width:72px;justify-content:center}.export-format-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:0}.export-format-actions .tool-btn{display:flex;width:100%}.export-format-actions .tool-btn .btn-face{width:100%;justify-content:center;padding:6px 10px}.export-dialog-divider{border:none;border-top:1px solid var(--ui-border);width:95%;margin:10px auto}#exportDialogPanel .dialog-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:0}#exportDialogPanel .dialog-actions .tool-btn{display:flex;width:100%}#exportDialogPanel .dialog-actions .tool-btn .btn-face{width:100%;justify-content:center;padding:6px 10px}