:root{font-family:Tahoma,"MS Sans Serif",Arial,sans-serif;font-size:11px;color:#000;background:#3a6ea5;--face:#ece9d8;--shadow:#aca899;--highlight:#fff;--blue:#316ac5;--toolsize:25px;--sidebar:58px;color-scheme:light}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{padding:0}button,input,select,textarea{font:inherit;color:inherit}button{cursor:default}button:focus-visible,select:focus-visible{outline:1px dotted #000;outline-offset:-4px}button:disabled{color:#aca899;text-shadow:1px 1px white}button{touch-action:manipulation}button img,button svg{pointer-events:none}img{image-rendering:pixelated}[hidden]{display:none!important}
#paint-window{display:flex;flex-direction:column;width:100%;height:100%;height:100dvh;min-width:300px;border:3px solid #0054e3;border-top:0;border-radius:8px 8px 0 0;background:var(--face);box-shadow:inset 0 0 0 1px #4389f8;overflow:hidden}
#titlebar{height:29px;min-height:29px;display:flex;align-items:center;gap:5px;padding:2px 3px 3px 2px;margin:0 -1px;background:linear-gradient(#3d95ff 0,#0968ed 9%,#0054e3 45%,#0057e6 80%,#0045c7 100%);border-radius:6px 6px 0 0;color:white;user-select:none;touch-action:none}
#window-title{flex:1;font:bold 13px Tahoma,Arial,sans-serif;letter-spacing:.1px;text-shadow:1px 1px #10338a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#window-controls{display:flex;gap:2px}#window-controls button{width:22px;height:22px;padding:0;border:1px solid #fff;border-radius:3px;box-shadow:inset 1px 1px #77a9fa,inset -1px -1px #003c96;background:linear-gradient(125deg,#7da8f5,#2a72df 48%,#0454c7);color:#fff;text-shadow:1px 1px #003589;font:bold 16px Arial;line-height:18px}
#window-controls button:active{filter:brightness(.85)}#window-controls #close-window{background:linear-gradient(125deg,#f0b09a,#dd5639 48%,#c63120);box-shadow:inset 1px 1px #f3aa95,inset -1px -1px #9d2f1d;font-size:23px;line-height:16px}#window-controls #minimize{font-size:21px;line-height:9px;padding-bottom:6px}
.maximize-glyph{display:block;border:2px solid white;border-top-width:3px;width:12px;height:11px;margin:auto;box-shadow:1px 1px #225bba}
#menubar{height:22px;min-height:22px;display:flex;align-items:stretch;padding:1px 2px;border-bottom:1px solid #d8d4c2;user-select:none;z-index:5}#menubar>button{background:none;border:1px solid transparent;padding:1px 7px;min-width:31px}#menubar>button:hover,#menubar>button.open{border-color:#316ac5;background:#c1d2ee}u{text-underline-offset:1px}
#workspace{display:flex;flex:1;min-height:0;overflow:hidden}#toolbox{flex:0 0 var(--sidebar);width:var(--sidebar);padding:3px 3px 0;border-right:1px solid #fff;user-select:none;overflow-y:auto;scrollbar-width:thin}#tools{display:grid;grid-template-columns:repeat(2,var(--toolsize));gap:0;align-content:start}.tool{width:var(--toolsize);height:var(--toolsize);display:flex;align-items:center;justify-content:center;padding:2px;background:var(--face);border:1px solid transparent}.tool:hover{border:1px solid #fff;border-right-color:#aca899;border-bottom-color:#aca899}.tool.selected{border:1px solid #716f64;border-right-color:white;border-bottom-color:white;background:repeating-conic-gradient(#fff 0 25%,#e2dfd3 0 50%) 0/2px 2px;box-shadow:inset 1px 1px #aca899}.tool.selected svg{transform:translate(1px,1px)}.tool svg{width:20px;height:20px;shape-rendering:crispEdges}
#tool-options{margin:5px 3px 0;min-height:65px;width:44px;border:1px solid white;border-right-color:#aca899;border-bottom-color:#aca899;padding:2px;display:flex;flex-direction:column;gap:2px;align-items:stretch}#tool-options:empty{border-color:#aca899 white white #aca899;height:66px}.option{border:1px solid transparent;background:none;padding:1px;min-height:12px;text-align:center}.option.selected{background:#0a246a;color:white}.option:hover{outline:1px dotted #777}.line-sample{display:block;background:currentColor;width:30px;margin:2px auto}.brush-options{display:grid!important;grid-template-columns:repeat(3,1fr);gap:2px!important}.brush-options .option{min-width:10px;height:16px;padding:0}.brush-mark{display:block;margin:auto;background:currentColor}.opaque-option{height:27px;padding:1px}.opaque-option svg{width:32px;height:23px}
#drawing-area{position:relative;flex:1;min-width:0;background:#808080;border:1px solid;border-color:#808080 #fff #fff #808080}#scroller{position:absolute;inset:0;overflow:scroll;overscroll-behavior:contain;scrollbar-color:#d4d0c8 #ece9d8;scrollbar-width:auto}#paper-space{position:relative;min-width:100%;min-height:100%}#view-canvas,#overlay{position:absolute;top:0;left:0;display:block}#view-canvas{pointer-events:none}#overlay{touch-action:none;outline:none;cursor:crosshair}#text-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.text-editor{position:absolute;border:1px dashed #000;outline:1px dashed #fff;background:transparent;padding:1px;resize:both;min-width:20px;min-height:20px;overflow:hidden;pointer-events:auto;line-height:1.2;white-space:pre-wrap;box-shadow:none;caret-color:black;transform-origin:top left}
#colorbox{height:48px;min-height:48px;display:flex;align-items:flex-start;gap:5px;border-top:1px solid #fff;padding:7px 5px 4px;overflow-x:auto;overflow-y:hidden;user-select:none}#current-colors{position:relative;width:32px;height:32px;flex:0 0 32px;border:1px solid #808080;border-right-color:white;border-bottom-color:white;background:repeating-conic-gradient(#fff 0 25%,#d6d3c5 0 50%) 0/2px 2px}#current-colors span{position:absolute;width:17px;height:17px;border:2px solid #ece9d8;box-shadow:0 0 0 1px #808080;top:9px;left:10px;background:#fff}#current-colors #foreground-swatch{top:4px;left:4px;background:black}#palette{display:grid;grid-template-rows:repeat(2,16px);grid-auto-flow:column;grid-auto-columns:16px;gap:0;flex-shrink:0}.swatch{width:16px;height:16px;padding:2px;border:1px solid #808080;border-bottom-color:#fff;border-right-color:#fff;background:var(--face)}.swatch>span{display:block;width:100%;height:100%;border:1px solid #000}.swatch:focus-visible{outline:1px dotted white;outline-offset:-5px}
#statusbar{height:21px;min-height:21px;border-top:1px solid #aca899;padding:2px 1px 1px;display:flex;gap:2px;user-select:none;overflow:hidden}#statusbar>span:not(.size-grip){border:1px solid;border-color:#aca899 white white #aca899;padding:1px 3px;white-space:nowrap;overflow:hidden;height:17px}#status-help{flex:1;text-overflow:ellipsis}#status-position{width:135px}#status-size{width:130px}.size-grip{width:13px;flex:0 0 13px;background:repeating-linear-gradient(135deg,transparent 0 2px,#aca899 2px 3px,#fff 3px 4px);clip-path:polygon(100% 0,100% 100%,0 100%)}
::-webkit-scrollbar{width:17px;height:17px}::-webkit-scrollbar-track{background:repeating-conic-gradient(#fff 0 25%,#e0dfd7 0 50%) 0/2px 2px}::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#eaf0fa,#c4d4ef);border:1px solid #a1b2cd;border-radius:2px;box-shadow:inset 1px 1px #fff}::-webkit-scrollbar-corner{background:var(--face)}
.menu-popup{position:fixed;z-index:100;background:#fff;border:1px solid #aca899;box-shadow:2px 2px 3px #0005;min-width:194px;padding:2px;user-select:none}.menu-item{display:flex;align-items:center;gap:6px;width:100%;height:22px;border:0;background:#fff;text-align:left;padding:2px 8px 2px 3px;white-space:nowrap}.menu-item .check{width:17px;flex:0 0 17px;min-height:14px;text-align:center}.menu-item .label{flex:1}.menu-item .shortcut{margin-left:22px}.menu-item .arrow{margin-left:12px;font-size:8px}.menu-item:hover:not(:disabled),.menu-item:focus:not(:disabled){background:#316ac5;color:white;outline:none}.menu-item:disabled{color:#aca899}.menu-separator{height:1px;background:#aca899;margin:3px 2px 3px 23px}
.dialog-shade{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:12px;background:transparent}.xp-dialog{background:var(--face);border:3px solid #0054e3;border-top:0;border-radius:7px 7px 0 0;box-shadow:2px 3px 14px #0005;min-width:270px;max-width:min(96vw,680px);max-height:94dvh;display:flex;flex-direction:column;outline:0}.dialog-title{height:28px;min-height:28px;display:flex;align-items:center;color:white;background:linear-gradient(#3d95ff,#0968ed 12%,#0054e3 75%,#0045c7);border-radius:5px 5px 0 0;padding:3px 3px 3px 6px;font-weight:bold;font-size:13px;gap:16px;user-select:none;touch-action:none}.dialog-title span{flex:1}.dialog-close,.panel-close{color:#fff;border:1px solid #fff;border-radius:3px;background:linear-gradient(125deg,#f0b09a,#dd5639 48%,#c63120);font:bold 19px Arial;line-height:15px;width:21px;height:21px;padding:0}.dialog-content{padding:15px 12px 6px;overflow:auto;font-size:11px;line-height:1.45}.dialog-content p{margin:0 0 10px}.dialog-content code,.dialog-content pre{font:11px "Courier New",monospace;user-select:text}.dialog-content pre{padding:7px;background:white;border:1px solid #aca899;overflow:auto;white-space:pre-wrap;word-break:break-all}.dialog-buttons{display:flex;justify-content:flex-end;gap:6px;padding:12px}.xp-button,.dialog-buttons button{min-width:75px;height:24px;padding:2px 12px;border:1px solid #003c74;border-radius:3px;background:linear-gradient(#fff,#f2f0e8 80%,#d8d0b8);box-shadow:inset 1px 1px white}.xp-button:hover,.dialog-buttons button:hover{box-shadow:inset 0 0 0 2px #f8d989}.xp-button:active,.dialog-buttons button:active{background:#dfddcd;box-shadow:inset 1px 1px #aaa}.xp-button.default,.dialog-buttons button.default{box-shadow:inset 0 0 0 2px #a4c1ed}.xp-dialog input:not([type=radio],[type=checkbox],[type=color],[type=range]),.xp-dialog select{border:1px solid #7f9db9;background:white;padding:2px 3px;min-height:22px;border-radius:0;min-width:0}.xp-dialog input[type=number]{width:68px}.xp-dialog input[type=checkbox],.xp-dialog input[type=radio]{vertical-align:middle;margin:2px 4px 2px 0;accent-color:#2160bc}.xp-dialog fieldset{border:1px solid #d0cbb8;border-radius:3px;padding:10px;margin:0 0 10px}.xp-dialog legend{padding:0 4px}.form-row{display:flex;align-items:center;gap:8px;margin:6px 0}.form-row label{min-width:58px}.form-row input[type=text],.form-row select{flex:1}.form-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}.form-grid input{width:100%!important}.radio-stack{display:flex;flex-direction:column;gap:7px}.split-fields{display:flex;gap:12px}.split-fields>*{flex:1}.color-grid{display:grid;grid-template-columns:repeat(8,20px);gap:4px;margin:4px 0 14px}.color-chip{padding:0;width:20px;height:18px;border:1px solid #808080;box-shadow:1px 1px white}.color-chip.chosen{outline:1px dotted #000;outline-offset:2px}.color-spectrum{width:200px;height:158px;touch-action:none;cursor:crosshair;border:1px inset white}.color-custom{display:grid;grid-template-columns:200px 18px;gap:6px}#color-luminance{width:18px;height:158px;touch-action:none;cursor:crosshair;border:1px inset white}.color-preview{height:38px;flex:1;border:1px inset #aaa}.muted{color:#625f52}.help-table{border-collapse:collapse;width:100%;margin:6px 0}.help-table td{padding:4px 8px;border-bottom:1px solid #d8d4c5}.help-table td:first-child{white-space:nowrap}.info-mark{float:left;margin:0 14px 8px 0;width:32px;height:32px;border-radius:50%;background:#285acc;color:white;font:bold 25px Georgia;text-align:center}.dialog-warning{color:#6c3b0d}.preview-image{display:block;max-width:100%;max-height:60vh;object-fit:contain;image-rendering:pixelated;background:white;margin:auto}.floating-panel{position:fixed;z-index:20;border:2px solid #0054e3;border-top:0;box-shadow:2px 2px 4px #0005;background:var(--face)}#fontbar{top:94px;left:110px;max-width:90vw}.panel-title{height:21px;color:white;background:linear-gradient(#3688f7,#0054e3);padding:2px 3px;display:flex;align-items:center;justify-content:space-between;font-weight:bold;user-select:none;touch-action:none}.panel-close{height:17px;width:17px;font-size:16px;line-height:12px}.font-controls{display:flex;gap:4px;padding:5px}.font-controls select{min-width:0;border:1px solid #7f9db9;height:23px;background:white}#font-family{width:135px}#font-size{width:45px}.font-controls button{height:23px;width:23px;border:1px solid transparent;background:none;font:14px "Times New Roman"}.font-controls button.selected{border-color:#808080 #fff #fff #808080;background:#ddd9c8}#thumbnail{right:38px;top:95px}#thumbnail canvas{display:block;max-width:220px;height:120px;width:160px;background:#808080;image-rendering:pixelated;margin:3px}
#busy{position:fixed;inset:0;z-index:500;background:#ffffff1c;display:flex;align-items:center;justify-content:center;gap:9px;pointer-events:auto;cursor:wait}#busy>span{background:var(--face);padding:8px;border:1px solid #aca899}#busy .hourglass{border:0;padding:0;background:none;font-size:22px}#restore-window{position:absolute;left:4px;bottom:4px;background:#1d65c5;color:#fff;border:1px solid white;border-radius:3px;display:flex;align-items:center;gap:6px;padding:6px 14px;font-weight:bold}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.status-agent{font-weight:bold}
body.touch{--toolsize:35px;--sidebar:78px}body.touch #toolbox{padding-left:3px}body.touch .tool svg{width:24px;height:24px}body.touch #tool-options{margin-left:5px;width:60px}body.touch #tool-options .option{min-height:22px}body.touch .brush-options .option{height:24px}body.touch #menubar{height:28px;min-height:28px}body.touch #menubar>button{padding:1px 8px}body.touch .menu-item{height:31px}body.touch .swatch{width:21px;height:21px}body.touch #palette{grid-template-rows:repeat(2,21px);grid-auto-columns:21px}body.touch #colorbox{height:57px;min-height:57px}body.touch .dialog-buttons button{height:32px}body.touch .opaque-option{height:32px}
@media(max-width:600px){#status-position{width:70px}#status-size{width:83px}#status-help{font-size:10px}#fontbar{left:80px;max-width:calc(100vw - 86px)}#font-family{width:95px}.font-controls{gap:2px;padding:3px}.split-fields{flex-wrap:wrap}.dialog-content{padding:12px 9px 4px}.xp-dialog{max-width:96vw}.menu-popup{min-width:186px}.menu-item .shortcut{margin-left:10px}#thumbnail{right:24px;top:76px}}
@media print{body{background:white;overflow:visible}#paint-window,#fontbar,#thumbnail,#dialogs,#menus,#busy,#restore-window{display:none!important}#print-image{display:block!important;max-width:100%;height:auto;image-rendering:pixelated}}
/* XP Luna scrollbars remain visible even on hosts that hide native tracks. */
#drawing-area{--scroll-size:17px}#scroller{right:var(--scroll-size);bottom:var(--scroll-size);scrollbar-width:none}#scroller::-webkit-scrollbar{display:none}#text-layer{right:var(--scroll-size);bottom:var(--scroll-size)}
.xp-scrollbar{position:absolute;display:flex;z-index:2;background:#f1efe2;touch-action:none;user-select:none;outline:none}.xp-scrollbar.horizontal{height:var(--scroll-size);bottom:0;left:0;right:var(--scroll-size)}.xp-scrollbar.vertical{width:var(--scroll-size);right:0;top:0;bottom:var(--scroll-size);flex-direction:column}.scroll-track{position:relative;flex:1;min-width:0;min-height:0;border:1px solid #e8e6d9;background:repeating-linear-gradient(45deg,#f5f4ed 0,#f5f4ed 1px,#eeeddf 1px,#eeeddf 2px)}.scroll-arrow{flex:0 0 var(--scroll-size);width:var(--scroll-size);height:var(--scroll-size);padding:0;border:1px solid #8fa7cc;border-radius:2px;background:linear-gradient(135deg,#eef4ff,#c9d8f3 70%,#b5c9ec);box-shadow:inset 1px 1px #fff,inset -1px -1px #b6c8e8;display:grid;place-items:center}.scroll-arrow:hover:not(:disabled),.scroll-thumb:hover{filter:brightness(1.05)}.scroll-arrow:active:not(:disabled),.scroll-thumb:active{filter:brightness(.94)}.scroll-arrow i{display:block;width:0;height:0;border:4px solid transparent}.horizontal .back i{border-right-color:#4d6185;border-left:0;margin-right:1px}.horizontal .forward i{border-left-color:#4d6185;border-right:0;margin-left:1px}.vertical .back i{border-bottom-color:#4d6185;border-top:0;margin-bottom:1px}.vertical .forward i{border-top-color:#4d6185;border-bottom:0;margin-top:1px}.inactive .scroll-arrow{border-color:#e4e2d5;background:#f1efe2;box-shadow:inset 1px 1px #f8f7f0}.inactive .scroll-arrow i{opacity:.35}.scroll-thumb{position:absolute;min-width:0;min-height:0;border:1px solid #93abd2;border-radius:2px;background:linear-gradient(#edf3ff,#c9d9f5 55%,#b7ccec);box-shadow:inset 1px 1px #fff;display:grid;place-items:center}.horizontal .scroll-thumb{height:100%;top:0}.vertical .scroll-thumb{width:100%;left:0;background:linear-gradient(90deg,#edf3ff,#c9d9f5 55%,#b7ccec)}.scroll-thumb i{width:9px;height:7px;background:repeating-linear-gradient(90deg,#8fa8d3 0,#8fa8d3 1px,#f4f7fd 1px,#f4f7fd 2px,transparent 2px,transparent 3px)}.vertical .scroll-thumb i{width:7px;height:9px;background:repeating-linear-gradient(#8fa8d3 0,#8fa8d3 1px,#f4f7fd 1px,#f4f7fd 2px,transparent 2px,transparent 3px)}.xp-scroll-corner{position:absolute;right:0;bottom:0;width:var(--scroll-size);height:var(--scroll-size);background:var(--face);z-index:3}.xp-scrollbar:focus-visible .scroll-track{outline:1px dotted #555;outline-offset:-2px}.touch #drawing-area{--scroll-size:21px}