*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #1a1a2e;--bg-medium: #16213e;--bg-light: #0f3460;--bg-panel: #1e1e3a;--text-primary: #e0e0e0;--text-secondary: #a0a0b0;--accent: #5555ff;--accent-hover: #7777ff;--border: #333366;--active: #4444aa;--danger: #ff5555;--font-mono: "Courier New", "Consolas", monospace;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}html,body{height:100%;overflow:hidden;background:var(--bg-dark);color:var(--text-primary);font-family:var(--font-ui);font-size:13px}#app{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;overflow:hidden}#menu-bar-container{flex-shrink:0}.menu-bar{display:flex;align-items:center;background:var(--bg-medium);border-bottom:1px solid var(--border);padding:0 8px;height:32px;gap:2px}.menu-title{font-weight:700;color:var(--accent);margin-right:16px;font-size:14px;letter-spacing:.5px}.menu-item{position:relative}.menu-spacer{flex:1}.menu-label{background:none;border:none;color:var(--text-primary);padding:4px 10px;cursor:pointer;font-family:var(--font-ui);font-size:13px;border-radius:3px}.menu-label:hover,.menu-label.open{background:var(--bg-light)}.menu-dropdown{position:absolute;top:100%;left:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;min-width:220px;padding:4px 0;z-index:1000;box-shadow:0 4px 12px #00000080}.menu-entry{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;color:var(--text-primary);padding:6px 16px;cursor:pointer;font-family:var(--font-ui);font-size:13px;text-align:left}.menu-entry:hover{background:var(--accent);color:#fff}.menu-shortcut{color:var(--text-secondary);font-size:11px;margin-left:24px}.menu-entry:hover .menu-shortcut{color:#ffffffb3}.menu-source-link{color:var(--text-secondary);text-decoration:none;font-size:12px;padding:4px 10px;border-radius:3px}.menu-source-link:hover{color:var(--text-primary);background:var(--bg-light)}#tab-bar-container{flex-shrink:0}.tab-bar{display:flex;align-items:stretch;background:var(--bg-dark);border-bottom:1px solid var(--border);padding:0;height:30px;overflow-x:auto;overflow-y:hidden}.tab-item{display:flex;align-items:center;gap:6px;padding:0 12px;cursor:pointer;font-size:12px;color:var(--text-secondary);border-right:1px solid var(--border);white-space:nowrap;min-width:0;-webkit-user-select:none;user-select:none}.tab-item:hover{background:var(--bg-medium);color:var(--text-primary)}.tab-item.active{background:var(--bg-medium);color:var(--text-primary);border-bottom:2px solid var(--accent)}.tab-name{overflow:hidden;text-overflow:ellipsis;max-width:120px}.tab-close{background:none;border:none;color:var(--text-secondary);font-size:14px;cursor:pointer;padding:0 2px;line-height:1;border-radius:3px}.tab-close:hover{background:var(--danger);color:#fff}.tab-add{background:none;border:none;color:var(--text-secondary);font-size:16px;cursor:pointer;padding:0 10px;line-height:1}.tab-add:hover{color:var(--text-primary);background:var(--bg-medium)}.tab-rename-input{background:var(--bg-dark);border:1px solid var(--accent);color:var(--text-primary);font-family:var(--font-ui);font-size:12px;padding:1px 4px;border-radius:2px;outline:none;max-width:120px}#toolbar-container{flex-shrink:0}.toolbar{display:flex;align-items:center;background:var(--bg-medium);border-bottom:1px solid var(--border);padding:4px 8px;gap:4px;height:36px}.toolbar-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-panel);border:1px solid var(--border);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:15px;transition:all .15s}.toolbar-btn:hover{background:var(--bg-light);border-color:var(--accent)}.toolbar-btn.active{background:var(--active);border-color:var(--accent);color:#fff}#main-area{display:flex;flex:1;min-height:0;overflow:hidden}#left-panel{width:clamp(160px,20vw,240px);flex:0 1 clamp(160px,20vw,240px);background:var(--bg-panel);border-right:1px solid var(--border);overflow:hidden;min-height:0;min-width:140px}.layer-panel{padding:0;height:100%;display:flex;flex-direction:column}.panel-header{padding:8px 10px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);border-bottom:1px solid var(--border)}.layer-actions{display:flex;padding:4px 6px;gap:4px;border-bottom:1px solid var(--border)}.layer-action-btn{flex:1;height:24px;background:var(--bg-medium);border:1px solid var(--border);color:var(--text-primary);border-radius:3px;cursor:pointer;font-size:14px}.layer-action-btn:hover{background:var(--bg-light)}.layer-action-icon{width:14px;height:14px;display:block;margin:0 auto;fill:currentColor}.layer-list{padding:4px 0;flex:1;min-height:0;overflow-y:auto}.layer-quick-actions{padding:6px 8px 8px;border-top:1px solid var(--border);background:var(--bg-panel);flex-shrink:0}.layer-quick-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.layer-item{display:flex;align-items:center;padding:4px 6px;gap:4px;cursor:pointer;border:1px solid transparent;border-radius:4px;position:relative;margin:1px 4px}.layer-item:hover{background:var(--bg-medium)}.layer-item.active{background:#5555ff1f;box-shadow:inset 0 0 0 1px var(--accent)}.layer-vis-btn,.layer-lock-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:12px;padding:2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.layer-vis-btn:hover,.layer-lock-btn:hover{color:var(--text-primary)}.layer-drag-handle{color:var(--text-secondary);font-size:12px;cursor:grab;width:16px;text-align:center;-webkit-user-select:none;user-select:none;flex-shrink:0}.layer-drag-handle:hover{color:var(--text-primary)}.layer-item[draggable]{cursor:grab}.layer-item.dragging{opacity:.4}.layer-item.drop-above:before{content:"";position:absolute;top:0;left:6px;right:0;height:2px;background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px) 0 50% / 8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 6px 0 / calc(100% - 6px) 2px no-repeat;border-radius:2px}.layer-item.drop-below:after{content:"";position:absolute;bottom:0;left:6px;right:0;height:2px;background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px) 0 50% / 8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 6px 0 / calc(100% - 6px) 2px no-repeat;border-radius:2px}.layer-name{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-group-header{display:flex;align-items:center;padding:4px 6px;gap:4px;cursor:pointer;background:var(--bg-medium);border:1px solid transparent;border-radius:4px;position:relative;margin:1px 4px}.layer-group-header.active{background:#5555ff1f;box-shadow:inset 0 0 0 1px var(--accent)}.layer-group-header:hover{background:var(--bg-light)}.layer-group-header.dragging{opacity:.4}.layer-group-header.drop-above:before{content:"";position:absolute;top:0;left:6px;right:0;height:2px;background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px) 0 50% / 8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 6px 0 / calc(100% - 6px) 2px no-repeat;border-radius:2px}.layer-group-header.drop-below:after{content:"";position:absolute;bottom:0;left:6px;right:0;height:2px;background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px) 0 50% / 8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 6px 0 / calc(100% - 6px) 2px no-repeat;border-radius:2px}.layer-group-header.drop-inside:after{content:"";position:absolute;bottom:0;left:20px;right:0;height:2px;background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px) 0 50% / 8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 6px 0 / calc(100% - 6px) 2px no-repeat;border-radius:2px}.group-collapse-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:9px;padding:2px;width:16px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.group-collapse-btn:hover{color:var(--text-primary)}.group-name{flex:1;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-inline-rename{flex:1;min-width:0;height:20px;padding:0 6px;border:1px solid var(--accent);border-radius:3px;background:var(--bg-panel);color:var(--text-primary);font-size:12px;font-family:inherit;outline:none}.layer-item.grouped{padding-left:20px}.layer-item.group-hidden{opacity:.5}.layer-item.group-locked .layer-lock-btn{color:var(--accent)}.layer-root-drop-zone{min-height:24px;margin-top:2px;position:relative}.layer-root-drop-zone.drop-root-target:before{content:"";position:absolute;top:2px;left:6px;right:0;height:2px;background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px) 0 50% / 8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 6px 0 / calc(100% - 6px) 2px no-repeat;border-radius:2px}.layer-row-menu{position:relative;flex-shrink:0}.layer-row-menu-trigger{list-style:none;width:20px;height:20px;border:none;border-radius:3px;background:transparent;color:var(--text-secondary);font-size:12px;line-height:20px;text-align:center;cursor:pointer}.layer-row-menu-trigger::-webkit-details-marker{display:none}.layer-row-menu[open] .layer-row-menu-trigger,.layer-row-menu-trigger:hover{background:var(--bg-light);color:var(--text-primary)}.layer-row-menu-list{position:absolute;top:22px;right:0;z-index:30;min-width:140px;display:flex;flex-direction:column;gap:2px;padding:4px;background:var(--bg-medium);border:1px solid var(--border);border-radius:4px;box-shadow:0 6px 16px #00000040}.layer-row-menu-item{border:none;border-radius:3px;background:transparent;color:var(--text-primary);text-align:left;font-size:12px;padding:5px 8px;cursor:pointer}.layer-row-menu-item:hover{background:var(--bg-light)}.layer-row-menu-item.danger:hover{background:var(--danger);color:#fff}.layer-drag-hint{position:fixed;z-index:1000;pointer-events:none;display:none;max-width:220px;padding:4px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-medium);color:var(--text-primary);font-size:11px;white-space:nowrap;box-shadow:0 4px 10px #0000004d}#center-panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}#canvas-container{flex:1;min-width:0;min-height:0;display:flex;align-items:flex-start;justify-content:flex-start;overflow:auto;background:#0a0a1a;padding:16px}#ascii-canvas{flex-shrink:0;margin:auto;border:1px solid var(--border);image-rendering:pixelated}.terminal-panel{flex:0 0 auto;align-self:center;width:min(760px,94%);margin:0 0 12px;border:1px solid #114611;border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#041704,#021002);box-shadow:0 0 0 1px #18531873,0 0 18px #31a0312e}.terminal-panel-header{display:flex;align-items:center;justify-content:space-between;padding:5px 9px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#65dd65;border-bottom:1px solid #114611;background:#062606e6}.terminal-help-btn{width:18px;height:18px;border:1px solid #1f6f1f;border-radius:4px;background:#0c380cf2;color:#84ff84;font-family:var(--font-mono);font-size:12px;line-height:1;cursor:pointer;padding:0}.terminal-help-btn:hover{background:#124a12f2;border-color:#2fa52f}.terminal-panel-content{min-height:148px;max-height:148px;padding:8px 9px;font-family:var(--font-mono);font-size:12px;line-height:1.35;color:#7bff7b;white-space:pre-wrap;overflow:hidden;word-break:break-word;text-shadow:0 0 4px rgba(97,255,97,.45)}.terminal-line{white-space:pre-wrap}.terminal-line-quote{font-style:italic;opacity:.92}.terminal-cursor-line{font-style:normal;opacity:1}.terminal-link{color:#98ff98;text-decoration:underline}#right-panel{width:clamp(130px,18vw,200px);flex:0 1 clamp(130px,18vw,200px);background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto;min-height:0;min-width:120px}.char-picker{padding:0}.current-char{padding:6px 10px;font-family:var(--font-mono);font-size:14px;color:var(--accent);border-bottom:1px solid var(--border)}.char-group-label{padding:6px 10px 2px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.char-grid{display:flex;flex-wrap:wrap;padding:2px 6px 6px;gap:1px}.char-cell{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--bg-medium);border:1px solid transparent;color:var(--text-primary);font-family:var(--font-mono);font-size:13px;cursor:pointer;border-radius:2px}.char-cell:hover{background:var(--bg-light);border-color:var(--accent)}.char-cell.selected{background:var(--active);border-color:var(--accent);color:#fff}.box-style-picker{border-top:1px solid var(--border)}.box-style-option{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;cursor:pointer;background:var(--bg-medium);border-left:3px solid transparent;font-size:13px}.box-style-option:hover{background:var(--bg-light);border-left-color:var(--accent)}.box-style-option.selected{background:var(--active);border-left-color:var(--accent);color:#fff}.box-style-preview{font-family:var(--font-mono);font-size:14px;letter-spacing:1px}.color-picker{padding:8px 10px;border-top:1px solid var(--border)}.color-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:4px;margin-top:8px}.color-label:first-child{margin-top:0}.color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-bottom:4px}.color-swatch{aspect-ratio:1;border:2px solid transparent;border-radius:3px;cursor:pointer;min-height:18px}.color-swatch:hover{border-color:#fff;transform:scale(1.1)}.color-swatch.selected{border-color:#fff;box-shadow:0 0 4px #ffffff80}.color-swatch-transparent{background:#fff;position:relative;overflow:hidden}.color-swatch-transparent:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom right,transparent calc(50% - 1px),#ff0000 calc(50% - 1px),#ff0000 calc(50% + 1px),transparent calc(50% + 1px))}.color-preview{margin-top:8px;padding:6px 10px;font-family:var(--font-mono);font-size:18px;font-weight:700;text-align:center;border-radius:4px;border:1px solid var(--border)}#status-bar-container{flex-shrink:0}.status-bar{display:flex;align-items:center;background:var(--bg-medium);border-top:1px solid var(--border);padding:0 12px;height:24px;gap:4px}.status-item{font-size:11px;font-family:var(--font-mono);color:var(--text-secondary);padding:0 8px;border-right:1px solid var(--border);white-space:nowrap}.status-item:last-child{border-right:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--bg-light)}.tool-select-icon{display:inline-block;width:14px;height:12px;border:1.5px dashed var(--text-primary);border-radius:1px}.toolbar-btn.active .tool-select-icon{border-color:#fff}.tool-pencil-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/pencil.svg) center / contain no-repeat;mask:url(../icons/pencil.svg) center / contain no-repeat}.tool-line-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/line.svg) center / contain no-repeat;mask:url(../icons/line.svg) center / contain no-repeat}.tool-rectangle-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/rectangle.svg) center / contain no-repeat;mask:url(../icons/rectangle.svg) center / contain no-repeat}.tool-filled-rectangle-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/rectangle-filled.svg) center / contain no-repeat;mask:url(../icons/rectangle-filled.svg) center / contain no-repeat}.tool-circle-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/circle.svg) center / contain no-repeat;mask:url(../icons/circle.svg) center / contain no-repeat}.tool-filled-circle-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/circle-filled.svg) center / contain no-repeat;mask:url(../icons/circle-filled.svg) center / contain no-repeat}.tool-smartline-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/smartline.svg) center / contain no-repeat;mask:url(../icons/smartline.svg) center / contain no-repeat}.tool-smartbox-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/smartbox.svg) center / contain no-repeat;mask:url(../icons/smartbox.svg) center / contain no-repeat}.tool-fill-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/fill.svg) center / contain no-repeat;mask:url(../icons/fill.svg) center / contain no-repeat}.tool-dropper-icon-file{display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url(../icons/dropper.svg) center / contain no-repeat;mask:url(../icons/dropper.svg) center / contain no-repeat}.menu-submenu-arrow{font-size:8px;margin-left:12px;color:var(--text-secondary)}.menu-entry:hover .menu-submenu-arrow{color:#ffffffb3}.menu-submenu{display:none;position:absolute;left:100%;top:-4px}.export-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000}.export-dialog{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:20px;width:1080px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #000000b3}.export-dialog-title{margin:0 0 12px;font-size:16px;color:var(--text-primary)}.export-dialog-content{display:flex;gap:14px;flex:1;min-height:0}.export-dialog-controls{width:360px;flex:0 0 360px;display:flex;flex-direction:column;min-height:0}.export-dialog-preview-pane{flex:1;min-width:0;min-height:0;display:flex}.export-dialog-output-panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.export-dialog-panel-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}.export-dialog-source-panel{margin-top:6px;min-height:0}.export-dialog-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.export-dialog-label{font-size:13px;color:var(--text-secondary)}.export-dialog-select{background:var(--bg-medium);border:1px solid var(--border);color:var(--text-primary);padding:4px 8px;border-radius:4px;font-family:var(--font-ui);font-size:13px}.export-dialog-region{gap:12px;flex-wrap:wrap}.export-dialog-input-group{display:flex;flex-direction:column;gap:2px}.export-dialog-input-label{font-size:11px;color:var(--text-secondary)}.export-dialog-input{background:var(--bg-medium);border:1px solid var(--border);color:var(--text-primary);padding:4px 6px;border-radius:4px;font-family:var(--font-mono);font-size:12px;width:70px}.export-dialog-preview{flex:1;min-height:320px;background:var(--bg-dark);border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-mono);font-size:12px;padding:8px;border-radius:4px;resize:none;margin-bottom:12px;white-space:pre;overflow:auto}.export-dialog-preview-image-wrap{display:none;align-items:center;justify-content:center;padding:12px;background:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.export-dialog-preview-image{max-width:100%;max-height:100%;image-rendering:pixelated;border:1px solid var(--border);background:transparent}.export-dialog-source-canvas{cursor:default}@media(max-width:820px){.export-dialog{width:92vw}.export-dialog-content{flex-direction:column}.export-dialog-controls{width:auto;flex:0 0 auto}.export-dialog-preview-pane{min-height:260px;flex-direction:column}}.export-dialog-checkbox{gap:8px;font-size:13px;color:var(--text-secondary)}.export-dialog-checkbox input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}.export-dialog-checkbox label{cursor:pointer}.export-dialog-checkbox input[type=checkbox]:disabled{opacity:.5;cursor:default}.export-dialog-checkbox input[type=checkbox]:disabled+label{opacity:.7;cursor:default}.export-dialog-buttons{display:flex;gap:8px;justify-content:flex-end}.export-dialog-btn{background:var(--bg-medium);border:1px solid var(--border);color:var(--text-primary);padding:6px 16px;border-radius:4px;cursor:pointer;font-family:var(--font-ui);font-size:13px}.export-dialog-btn:hover{background:var(--bg-light)}.export-dialog-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.export-dialog-btn-primary:hover{background:var(--accent-hover)}.replace-colors-palette{display:grid;grid-template-columns:repeat(9,22px);gap:2px;margin-top:4px}.replace-colors-selected{border-color:#fff!important;box-shadow:0 0 6px #fff9}.canvas-size-presets{display:flex;gap:8px;margin:6px 0 10px}.canvas-size-presets .export-dialog-btn{padding:5px 10px}.canvas-size-note{margin:0 0 12px;font-size:12px;color:var(--text-secondary)}