html,body{height:100%}body{margin:0;overflow:hidden}#app{position:absolute;inset:0;display:flex;flex-direction:column;background:silver;color:#000;font:11px Tahoma,"MS Sans Serif",sans-serif;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}[hidden]{display:none!important}.titlebar{display:flex;align-items:center;gap:8px;height:22px;padding:0 6px;color:#fff;background:linear-gradient(90deg,navy,#1084d0);flex:none}.titlebar a{margin-left:auto;color:#fff}.goat-mark{width:14px;height:10px;border-radius:50%;background:radial-gradient(circle at 4px 5px,#140e0a 0 1.5px,#c4491d 2px 4px,#f4f7fb 4.5px);box-shadow:8px -2px 0 -3px #e7e2d4}.menubar{display:flex;gap:2px;height:22px;padding:1px 2px;background:silver;border-bottom:1px solid #808080;flex:none;position:relative;z-index:40}.menu-title,.menu-item,.btn,.tool,.mini{background:silver;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px gray,inset 1px 1px #dfdfdf;padding:1px 8px}.menu-title{border-color:transparent;box-shadow:none;padding:2px 8px}.menu-title:hover,.menu-item:hover:not(:disabled){background:navy;color:#fff}.menu-item:hover em{color:#fff}.menu-pop{position:absolute;z-index:60;min-width:196px;background:silver;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px gray,inset 1px 1px #dfdfdf;padding:2px}.menu-pop.sub{min-width:168px}.menu-item{display:flex;width:100%;align-items:center;gap:6px;text-align:left;border:0;box-shadow:none;padding:3px 8px}.menu-item em{margin-left:auto;font-style:normal;color:#404040}.menu-item:disabled{color:gray}.sep{height:2px;margin:3px 2px;border-top:1px solid #808080;border-bottom:1px solid #fff}.options{display:flex;align-items:center;gap:8px;min-height:30px;padding:2px 6px;background:silver;border-bottom:1px solid #808080;flex:none;overflow:auto}.options label,.palette label,.dialog-body label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.options input[type=range],.palette input[type=range]{width:92px}.workspace{flex:1;min-height:0;display:flex;position:relative}.toolbox{width:68px;flex:none;padding:4px;background:silver;border-right:1px solid #808080;overflow:auto}.tool-grid{display:grid;grid-template-columns:28px 28px;gap:2px}.tool{width:28px;height:28px;padding:0;display:grid;place-items:center;position:relative}.tool.on,.btn:active,.tool:active{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px gray}.tool i[data-fly]{position:absolute;right:1px;bottom:1px;width:0;height:0;border:3px solid transparent;border-right-color:#000;border-bottom-color:#000}.swatches{position:relative;height:46px;margin:8px 4px}.swatches .fg,.swatches .bg{position:absolute;width:20px;height:20px;border:2px solid;border-color:#000 #fff #fff #000;padding:0}.swatches .fg{left:6px;top:16px;z-index:1}.swatches .bg{left:20px;top:4px}.swatches .mini{position:absolute;width:16px;height:16px;padding:0;font-size:9px}.swatches .mini[data-action=swap]{right:0;top:0}.swatches .mini[data-action=reset-colors]{right:0;bottom:0}.tool.qm{width:100%;height:26px;margin-top:4px}.desk{flex:1;min-width:0;position:relative;overflow:hidden;background:gray}.docwin{position:absolute;display:flex;flex-direction:column;background:silver;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px gray,inset 1px 1px #dfdfdf;min-width:180px;min-height:140px}.doc-title{display:flex;align-items:center;height:18px;padding:0 2px 0 4px;background:gray;color:silver;flex:none}.docwin.active .doc-title{background:linear-gradient(90deg,navy,#1084d0);color:#fff}.doc-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.doc-title button{width:14px;height:14px;padding:0;line-height:10px;background:silver;color:#000;border:2px solid;border-color:#fff #000 #000 #fff}.doc-body{flex:1;min-height:0;position:relative;overflow:hidden;background:gray;display:grid;grid-template-columns:var(--ruler, 0px) minmax(0,1fr);grid-template-rows:var(--ruler, 0px) minmax(0,1fr)}.ruler-corner{grid-area:1 / 1;background:silver;box-shadow:inset -1px -1px gray,inset 1px 1px #fff}.ruler-x,.ruler-y{background:silver;display:block;width:100%;height:100%}.ruler-x{grid-area:1 / 2;cursor:ns-resize}.ruler-y{grid-area:2 / 1;cursor:ew-resize}.doc-body canvas{display:block;touch-action:none;min-width:0;min-height:0}.doc-body>[data-doc-canvas]{grid-area:2 / 2;width:100%;height:100%}.doc-resize{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,#fff 50% 60%,#808080 60% 70%,#fff 70% 80%,#000 80%)}.dock{width:248px;flex:none;overflow:auto;background:silver;border-left:1px solid #808080;padding:4px}.palette{margin-bottom:6px;background:silver;border:2px solid;border-color:#fff #000 #000 #fff}.palette.floating{position:absolute;z-index:30;width:230px}.pal-title{display:flex;align-items:center;height:16px;padding:0 2px 0 4px;color:#fff;background:linear-gradient(90deg,navy,#1084d0);cursor:move}.pal-title button{margin-left:auto;width:14px;height:12px;padding:0;background:silver;color:#000;border:1px solid #000}.pal-body{padding:4px}.palette.collapsed .pal-body{display:none}.tabs{display:flex;gap:2px;margin-bottom:4px}.tabs button{flex:1}.tabs button.on{border-color:#000 #fff #fff #000}.layer-controls,.layer-buttons{display:flex;gap:3px;align-items:center;margin-bottom:4px;flex-wrap:wrap}.layer-controls select{max-width:120px}.layer-row,.hist-row{display:flex;align-items:center;gap:4px;padding:2px;border:1px solid transparent}.layer-row.on,.hist-row.on,.hist.on{background:navy;color:#fff}.layer-row canvas{background:#fff;border:1px solid #808080}.eye,.hist,.hist-src{background:transparent;border:0;color:inherit;padding:0 2px}.swatch-grid,.brush-presets{display:flex;flex-wrap:wrap;gap:2px}.swatch-grid button{width:16px;height:16px;border:1px solid #000;padding:0}.brush-presets button{min-width:28px}.statusbar{display:flex;align-items:center;gap:8px;height:22px;padding:0 4px;border-top:1px solid #fff;flex:none}.statusbar [data-status]{flex:1;border:1px solid;border-color:#808080 #fff #fff #808080;padding:1px 4px;min-height:16px}.pal-toggle{margin-left:auto}#splash,#start,.modal{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:#00002859}#start{z-index:70}.splash-card,.start-card,.dialog{background:silver;border:2px solid;border-color:#fff #000 #000 #fff;box-shadow:4px 4px #00000059;color:#000}.splash-card{width:340px;padding:12px 16px 14px;text-align:center}.splash-card h1{margin:6px 0 0;font-size:22px;font-weight:700;letter-spacing:.04em}.splash-card p{margin:2px 0 8px}.plugins{height:18px;overflow:hidden;border:1px solid #808080;background:#fff;text-align:left}.plugins-track{animation:plugin-scroll 9s linear infinite}@keyframes plugin-scroll{0%{transform:translateY(0)}to{transform:translateY(-50%)}}.loadbar{height:12px;margin:8px 0;border:1px solid;border-color:#808080 #fff #fff #808080}.loadbar i{display:block;height:100%;width:0;background:navy;animation:loadbar 2.4s linear forwards}@keyframes loadbar{to{width:100%}}.start-card{width:460px}.dialog{max-width:calc(100% - 24px)}.dialog-title{height:18px;line-height:18px;padding:0 6px;color:#fff;background:linear-gradient(90deg,navy,#1084d0)}.dialog-body,.start-card .dialog-body{padding:10px;display:flex;flex-direction:column;gap:6px}.dialog-body label{display:flex;justify-content:space-between;gap:8px}.dialog-body input,.dialog-body select,.options select,.palette select{background:#fff;border:1px solid;border-color:#808080 #fff #fff #808080;min-width:0}.dialog-buttons,.start-actions{display:flex;justify-content:flex-end;gap:6px;padding:8px}.preview{display:block;margin:0 auto 6px;background:gray;border:1px solid #000;cursor:crosshair}.samples{display:grid;grid-template-columns:1fr 1fr;gap:6px}.sample{display:flex;flex-direction:column;gap:2px;padding:4px;background:silver;border:2px solid;border-color:#fff #000 #000 #fff}.sample img{width:100%;height:72px;-o-object-fit:cover;object-fit:cover;background:gray}.about p,.keys{margin:0}.keys{padding-left:16px}.type-editor{position:absolute;z-index:50;min-width:80px;min-height:28px;background:#ffffffeb;border:1px dashed #000;resize:both}@media (prefers-reduced-motion: reduce){.plugins-track,.loadbar i{animation:none}.loadbar i{width:100%}}@media (max-width: 800px){.workspace{flex-direction:column}.toolbox{width:auto;border-right:0;border-bottom:1px solid #808080;max-height:92px}.tool-grid{grid-template-rows:32px 32px;grid-template-columns:none;grid-auto-flow:column;width:-moz-max-content;width:max-content}.tool{width:32px;height:32px}.swatches{display:none}.dock{position:absolute;right:0;top:0;bottom:22px;z-index:35;width:min(280px,92vw);box-shadow:-4px 0 #00000040}.docwin{max-width:calc(100% - 8px)}}