:root{--xp-face:#ece9d8;--xp-light:#fff;--xp-mid:#aca899;--xp-shadow:#716f64;--xp-blue:#0054e3;--xp-blue-dark:#039}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{color:#000;-webkit-user-select:none;user-select:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;background:#3a6ea5;font-family:Tahoma,MS Sans Serif,Arial,sans-serif;font-size:12px}button,input,textarea{font:inherit}button{color:#000}.desktop-shell{width:100vw;height:100dvh;padding:max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));background:linear-gradient(135deg,#3f72a2,#82a5c7)}.paint-window{background:var(--xp-face);border:1px solid #003c74;border-radius:7px 7px 0 0;flex-direction:column;width:100%;min-width:0;height:100%;display:flex;overflow:hidden;box-shadow:inset 0 0 0 1px #5ca5ff,0 4px 18px #00000059}.title-bar{color:#fff;text-shadow:1px 1px #0b2d76;background:linear-gradient(#0b66ef 0%,#0558d7 18%,#0451c9 56%,#0b69f5 88%,#0646b8 100%);border-radius:6px 6px 0 0;justify-content:space-between;align-items:center;height:30px;min-height:30px;padding:3px 3px 3px 7px;display:flex}.title-left{letter-spacing:.05px;align-items:center;gap:6px;min-width:0;display:flex}.title-left strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.app-icon{width:20px;height:20px;text-shadow:none;background:#fff;border:1px solid #003c74;place-items:center;font-size:16px;display:grid}.window-controls{gap:2px;display:flex}.window-controls button{color:#fff;text-shadow:1px 1px #174993;background:linear-gradient(135deg,#7eb5ff,#1f63d7 55%,#0a3c9e);border:1px solid #fff;border-radius:3px;width:23px;height:22px;padding:0;font-family:Arial,sans-serif;font-size:16px;font-weight:700;line-height:18px;box-shadow:inset 0 0 0 1px #1350ad}.window-controls .close-button{background:linear-gradient(135deg,#f6a184,#e4421d 55%,#b51d05)}.menu-bar{z-index:20;background:var(--xp-face);border-bottom:1px solid var(--xp-mid);min-height:25px;padding:2px 4px 1px;display:flex;position:relative;overflow:visible}.menu-wrap{flex:none;position:relative}.menu-label{background:0 0;border:1px solid #0000;height:21px;padding:2px 8px}.menu-label:hover,.menu-label.pressed{color:#fff;background:#316ac5;border-color:#316ac5}.dropdown{background:var(--xp-face);border:1px solid #716f64;min-width:245px;padding:3px;position:absolute;top:20px;left:0;box-shadow:inset 1px 1px #fff,2px 2px 5px #00000047}.menu-item{text-align:left;white-space:nowrap;background:0 0;border:0;grid-template-columns:20px 1fr auto;align-items:center;gap:4px;width:100%;min-height:23px;padding:2px 8px 2px 1px;display:grid}.menu-item:hover:not(:disabled),.menu-item:focus-visible{color:#fff;background:#316ac5;outline:0}.menu-item:disabled{color:#8a897f;text-shadow:1px 1px #fff}.menu-item kbd{font:inherit;color:inherit}.checkmark{text-align:center;font-weight:700}.menu-separator{background:#aca899;border-bottom:1px solid #fff;height:1px;margin:3px 2px 3px 24px;display:block}.app-body{border-top:1px solid #fff;flex:1;min-width:0;min-height:0;display:flex}.toolbox{background:var(--xp-face);border-right:1px solid var(--xp-shadow);scrollbar-width:thin;width:64px;min-width:64px;padding:4px 3px;overflow-y:auto;box-shadow:inset 1px 0 #fff}.tool-grid{grid-template-columns:repeat(2,28px);display:grid}.tool-button{background:var(--xp-face);border:1px solid #716f64;border-color:#fff #716f64 #716f64 #fff;place-items:center;width:28px;height:28px;padding:0;display:grid}.tool-button span{font-family:Arial Unicode MS,Arial,sans-serif;font-size:18px;line-height:1}.tool-button:hover{background:#f7f5e8}.tool-button.selected,.tool-button:active,.tool-options button.selected{background-color:#fff;background-image:repeating-conic-gradient(#fff 0 25%, #c4c4c4 0 50%);background-size:2px 2px;border-color:#716f64 #fff #fff #716f64}.tool-options{color:#000;background:var(--xp-face);border:1px solid #fff;border-color:#716f64 #fff #fff #716f64;min-height:93px;margin-top:6px;padding:4px;box-shadow:inset 1px 1px #aca899}.option-caption{color:#57564f;text-transform:uppercase;margin-bottom:2px;font-size:9px}.tool-options>button:not(.wide-option),.shape-modes button,.zoom-options button,.text-options button{background:0 0;border:1px solid #0000;place-items:center;width:100%;min-height:16px;padding:1px;display:grid}.tool-options i{background:#000;width:43px;min-height:1px;display:block}.tool-options .size-option{position:relative}.tool-options .size-option.selected{color:#fff;background:#316ac5;border-color:#0b2f73 #9dbbeb #9dbbeb #0b2f73;box-shadow:inset 0 0 0 1px #fff,0 0 0 1px #194b9b}.tool-options .size-option.selected:after{content:"✓";color:#fff;font-size:10px;font-weight:700;line-height:1;position:absolute;top:50%;right:2px;transform:translateY(-50%)}.tool-options .size-option.selected i{background:#fff;box-shadow:0 0 0 1px #000}.shape-modes{grid-template-columns:repeat(3,1fr);margin-top:4px;display:grid}.shape-modes button{height:27px}.shape-sample{background:0 0;border:1px solid #000;width:14px;height:10px;display:block}.shape-sample.mode-1{background:#fff}.shape-sample.mode-2{background:#000}.zoom-options{grid-template-columns:1fr 1fr;display:grid}.zoom-options button{height:25px}.text-options{gap:4px;min-width:0;display:grid}.text-options label{gap:2px;font-size:9px;display:grid}.text-options input{-webkit-user-select:text;user-select:text;width:100%;min-width:0;max-width:100%;height:20px;padding:1px 2px}.text-options>div{display:flex}.text-options>div button{width:50%;height:21px}.text-options>button{white-space:normal;overflow-wrap:anywhere;min-height:28px;line-height:1.1}.wide-option{background:var(--xp-face);border:1px solid #716f64;width:100%;padding:5px 2px;font-size:9px}.workspace{background:#7f7f7f;border:2px solid #fff;border-color:#716f64 #fff #fff #716f64;flex:1;min-width:0;min-height:0;overflow:hidden}.canvas-scroll{scrollbar-color:#d4d0c8 #f1f1ed;width:100%;height:100%;padding:9px 42px 42px 9px;overflow:auto}.canvas-frame{background:#fff;flex:none;position:relative}.canvas-viewport{background:#fff;position:absolute;inset:0;overflow:hidden;box-shadow:1px 1px #000,4px 4px #0000002e}.canvas-stack{background:#fff;flex:none;position:relative}.canvas-stack canvas{image-rendering:pixelated;display:block;position:absolute;inset:0}.overlay-canvas{z-index:2;cursor:crosshair;touch-action:none}.canvas-resize-handle{z-index:8;touch-action:none;background:0 0;border:0;border-radius:0;width:24px;height:24px;padding:0;position:absolute}.canvas-resize-handle:after{content:"";opacity:0;background:navy;border:1px solid #fff;width:9px;height:9px;transition:opacity 70ms linear;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #000}.canvas-resize-handle:hover:after,.canvas-resize-handle:focus-visible:after,.canvas-resize-handle:active:after{opacity:1;background:#0b66ef}.canvas-resize-handle:focus-visible{outline-offset:-5px;outline:1px dotted #fff}.handle-nw{cursor:nwse-resize;top:-12px;left:-12px}.handle-n{cursor:ns-resize;top:-12px;left:50%;transform:translate(-50%)}.handle-ne{cursor:nesw-resize;top:-12px;right:-12px}.handle-e{cursor:ew-resize;top:50%;right:-12px;transform:translateY(-50%)}.handle-se{cursor:nwse-resize;bottom:-12px;right:-12px}.handle-s{cursor:ns-resize;bottom:-12px;left:50%;transform:translate(-50%)}.handle-sw{cursor:nesw-resize;bottom:-12px;left:-12px}.handle-w{cursor:ew-resize;top:50%;left:-12px;transform:translateY(-50%)}.canvas-stack.show-grid:after{content:"";z-index:3;pointer-events:none;background-image:linear-gradient(90deg,#0003 1px,#0000 1px),linear-gradient(#0003 1px,#0000 1px);background-size:var(--grid-step) var(--grid-step);position:absolute;inset:0}.canvas-textbox{z-index:5;resize:both;-webkit-user-select:text;user-select:text;border:1px dashed #000;outline:1px dashed #fff;width:320px;min-width:90px;min-height:68px;padding:2px;line-height:1.25;position:absolute;overflow:hidden}.color-bar{background:var(--xp-face);scrollbar-width:thin;border-top:1px solid #fff;align-items:center;gap:7px;min-height:48px;padding:4px 7px;display:flex;overflow:auto hidden}.color-wells{background:#c7c4b5;border:1px solid #716f64;width:39px;min-width:39px;height:37px;position:relative}.color-wells span{border:1px solid #000;width:22px;height:22px;display:block;position:absolute;box-shadow:inset 1px 1px #fff}.secondary-well{bottom:3px;right:3px}.primary-well{top:3px;left:3px}.palette{flex:none;grid-template-columns:repeat(16,16px);grid-auto-rows:16px;gap:2px;display:grid}.palette button{border:1px solid #fff;border-color:#716f64 #fff #fff #716f64;width:16px;height:16px;padding:0;box-shadow:inset 0 0 0 1px #000}.palette .edit-color{color:#000;height:34px;box-shadow:none;grid-row:span 2;font-size:18px;background:#ece9d8!important}.color-help{color:#4f4e48;flex:none;margin-left:4px;font-size:11px}.status-bar{background:var(--xp-face);grid-template-columns:1fr 120px 150px 64px;gap:2px;min-height:24px;padding:2px;display:grid}.status-bar>div{white-space:nowrap;text-overflow:ellipsis;border:1px solid #fff;border-color:#aca899 #fff #fff #aca899;min-width:0;padding:3px 6px;overflow:hidden}.modal-backdrop{z-index:100;background:#00000040;place-items:center;display:grid;position:fixed;inset:0}.xp-dialog{background:var(--xp-face);border:2px solid #0054e3;border-radius:7px 7px 0 0;width:min(410px,100vw - 30px);max-height:min(90dvh,680px);overflow:auto;box-shadow:4px 6px 18px #00000073}.xp-dialog>header{color:#fff;background:linear-gradient(#0b66ef,#0646b8);justify-content:space-between;align-items:center;height:28px;padding-left:8px;font-weight:700;display:flex}.xp-dialog>header button{color:#fff;background:linear-gradient(135deg,#f6a184,#df3516);border:1px solid #fff;border-radius:3px;width:22px;height:21px;margin-right:3px;padding:0;font-size:16px;font-weight:700;line-height:17px}.dialog-content{-webkit-user-select:text;user-select:text;padding:18px}.dialog-content>label{justify-content:space-between;align-items:center;margin:10px 0;display:flex}.dialog-content input[type=number]{width:110px;padding:3px}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.dialog-actions button{background:var(--xp-face);border:1px solid #003c74;border-radius:3px;min-width:78px;min-height:25px;padding:3px 8px;box-shadow:inset 1px 1px #fff}.color-picker{width:100%;height:75px;padding:3px}.color-preview{color:#fff;text-align:center;text-shadow:1px 1px 2px #000;border:1px solid #716f64;margin-top:8px;padding:12px;font-weight:700}.shortcut-list{gap:1px;display:grid}.shortcut-list p{border-bottom:1px solid #d0ccbd;grid-template-columns:150px 1fr;gap:10px;margin:0;padding:6px 4px;display:grid}.shortcut-list kbd{font:11px Consolas,monospace}.about-box{grid-template-columns:62px 1fr;gap:12px;display:grid}.about-icon{background:#fff;border:1px solid #716f64;place-items:center;width:58px;height:58px;font-size:35px;display:grid}.about-box h2{color:#039;margin:0 0 6px;font-size:20px}.about-box p{margin:5px 0;line-height:1.45}.about-box .dialog-actions{grid-column:1/-1}.site-info{z-index:80;right:max(10px, env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));position:fixed}.site-info>summary{color:#fff;cursor:help;text-shadow:1px 1px #003c74;background:linear-gradient(#63a3ff,#0753cf 65%,#003b9e);border:1px solid #fff;border-radius:50%;outline:1px solid #003c74;place-items:center;width:25px;height:25px;padding:0;font:700 14px Georgia,serif;list-style:none;display:grid;box-shadow:1px 2px 5px #00000059}.site-info>summary::-webkit-details-marker{display:none}.site-info>summary:focus-visible{outline-offset:2px;outline:3px solid #fc3}.site-info-balloon{color:#1d1d1d;visibility:hidden;opacity:0;pointer-events:none;-webkit-user-select:text;user-select:text;background:#fffde1;border:1px solid #7a6b32;border-radius:10px 10px 2px;width:min(360px,100vw - 20px);padding:14px 16px;transition:opacity .12s,transform .12s,visibility .12s;display:block;position:absolute;bottom:34px;right:0;transform:translateY(5px);box-shadow:3px 5px 14px #00000052}.site-info[open] .site-info-balloon,.site-info:hover .site-info-balloon,.site-info:focus-within .site-info-balloon{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}.site-info-balloon h1{color:#039;margin:0 0 7px;font-size:18px;line-height:1.2}.site-info-balloon p{margin:7px 0 0;font-size:12px;line-height:1.45}@media (width<=850px){.desktop-shell{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.paint-window,.title-bar{border-radius:0}.color-help{display:none}.status-bar{grid-template-columns:1fr 90px 120px}.status-zoom{display:none}}@media (width>=601px){.toolbox.text-toolbox{width:96px;min-width:96px}}@media (width<=600px) and (orientation:portrait){.title-bar{padding-left:5px}.title-left{gap:4px}.title-left strong{font-size:11px}.window-controls button:not(.close-button){display:none}.menu-bar{min-height:28px;padding-block:2px}.menu-label{min-height:24px;padding-inline:7px}.dropdown{top:calc(58px + env(safe-area-inset-top));right:max(4px, env(safe-area-inset-right));left:max(4px, env(safe-area-inset-left));width:auto;max-height:calc(100dvh - 70px - env(safe-area-inset-bottom));position:fixed;overflow-y:auto}.app-body{flex-direction:column}.toolbox{border-right:0;border-bottom:1px solid var(--xp-shadow);width:100%;min-width:0;height:80px;min-height:80px;padding:4px;display:flex;overflow:auto hidden;box-shadow:inset 0 1px #fff}.tool-grid{grid-template-rows:repeat(2,34px);grid-template-columns:repeat(8,34px);grid-auto-flow:column;width:272px;min-width:272px}.tool-button{width:34px;height:34px}.tool-options{width:118px;min-width:118px;height:70px;min-height:70px;margin:0 0 0 5px;overflow:auto}.workspace{width:100%}.canvas-scroll{padding:9px 30px 30px 9px}.color-bar{gap:5px;min-height:52px;padding:4px}.color-wells{z-index:2;background:#c7c4b5;flex:0 0 39px;position:sticky;left:0}.status-bar{grid-template-columns:minmax(0,1fr) 78px}.status-size,.status-zoom{display:none}}@media (width<=380px) and (orientation:portrait){.app-icon{width:18px;height:18px;font-size:14px}.window-controls .close-button{width:21px}.menu-label{padding-inline:5px;font-size:11px}.tool-grid{grid-template-rows:repeat(2,34px);grid-template-columns:repeat(8,32px);width:256px;min-width:256px}.tool-button{width:32px;height:34px}.tool-options{width:104px;min-width:104px}.dialog-content{padding:13px}.shortcut-list p{grid-template-columns:116px 1fr;gap:6px}}@media (pointer:coarse){.menu-label{min-height:26px}.tool-button{touch-action:manipulation}.palette{grid-template-columns:repeat(16,20px);grid-auto-rows:20px}.palette button{width:20px;height:20px}.palette .edit-color{height:42px}.menu-item{min-height:30px}.canvas-resize-handle{width:32px;height:32px}.canvas-resize-handle:after{width:15px;height:15px}.handle-nw{top:-16px;left:-16px}.handle-n{top:-16px}.handle-ne{top:-16px;right:-16px}.handle-e{right:-16px}.handle-se{bottom:-16px;right:-16px}.handle-s{bottom:-16px}.handle-sw{bottom:-16px;left:-16px}.handle-w{left:-16px}}@media (height<=430px) and (orientation:landscape){.title-bar{height:26px;min-height:26px}.menu-bar{min-height:23px}.menu-label{height:19px;min-height:19px}.toolbox{padding-top:2px}.tool-options{min-height:58px}.color-bar{min-height:38px}.status-bar{display:none}}@media (height<=560px){.tool-options{min-height:50px}.color-bar{min-height:42px;padding-block:2px}.status-bar{min-height:20px}}@media print{body{background:#fff}.title-bar,.menu-bar,.toolbox,.color-bar,.status-bar,.site-info{display:none!important}.desktop-shell,.paint-window,.app-body,.workspace,.canvas-scroll{width:auto;height:auto;box-shadow:none;background:#fff;border:0;padding:0;overflow:visible}.canvas-stack{box-shadow:none}.overlay-canvas{display:none}}