.mspaint-app{display:flex;flex-direction:column;width:100vw;height:100vh;max-height:100dvh;overflow:hidden;box-sizing:border-box;font-family:"MS Sans Serif",Tahoma,Segoe UI,sans-serif;background:#c0c0c0;border:2px solid;border-color:#dfdfdf #404040 #404040 #dfdfdf;box-shadow:1px 1px #000,inset 1px 1px #fff;overscroll-behavior:none;touch-action:manipulation}.mspaint-app__titlebar{flex-shrink:0;display:flex;align-items:center;min-height:20px;padding:3px 5px;margin:2px 2px 0;background:linear-gradient(90deg,#000080 0%,#1084d0 100%);color:#fff;font-weight:700;font-size:11px;letter-spacing:.02em;cursor:default;-webkit-user-select:none;user-select:none}.mspaint-app__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mspaint-app__client{flex:1;min-height:0;position:relative;background:#808080}.canvas-stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:6px 6px 100px;box-sizing:border-box;overflow:hidden;pointer-events:auto;touch-action:none;cursor:crosshair}.canvas-pan{flex-shrink:0;transform-origin:center center}.canvas-loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;pointer-events:all;background:rgba(128,128,128,.65)}.canvas-loading__box{padding:12px 20px;background:#c0c0c0;border:2px solid;border-color:#dfdfdf #404040 #404040 #dfdfdf;box-shadow:1px 1px #000;font-size:11px;font-weight:700}.canvas-loading__text{margin:0}.canvas-stage .scaler{pointer-events:auto}.scaler{image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:center center;flex-shrink:0}.selector{position:absolute;z-index:15;left:50%;bottom:10px;transform:translate(-50%);pointer-events:auto;touch-action:manipulation;max-width:calc(100vw - 16px)}#canvas{width:1000px;height:1000px;display:block;border:1px solid #404040;box-shadow:1px 1px #fff}@media (max-width: 768px){.canvas-stage{padding-bottom:200px}.selector{bottom:6px;width:calc(100vw - 12px)}}.selector-palette__inset{display:flex;flex-direction:column;gap:8px}.selector-palette__custom{display:flex;align-items:center;gap:10px}.selector-palette__label{font-weight:700;min-width:42px}.selector-palette__color-well{padding:3px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040}.selector-palette__color-input{display:block;width:40px;height:28px;padding:0;border:none;cursor:pointer;vertical-align:middle}.selector-palette__color-input::-webkit-color-swatch-wrapper{padding:0}.selector-palette__color-input::-webkit-color-swatch{border:1px solid #000;border-radius:0}.selector-palette__swatches{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.selector-palette__swatch{width:100%;aspect-ratio:1;min-width:0;min-height:24px;padding:0;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px gray;border-radius:0;cursor:pointer}.selector-palette__swatch:hover{filter:brightness(1.06)}.selector-palette__swatch:active{border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px gray}.selector-palette__swatch--selected{border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px gray;outline:1px dotted #000;outline-offset:1px}@media (max-width: 400px){.selector-palette__swatches{grid-template-columns:repeat(6,1fr)}}@media (max-width: 768px){.selector-palette__swatch{min-height:36px}.selector-palette__color-input{width:48px;height:36px}.selector-palette__custom{gap:8px}}.mspaint-win{max-width:min(300px,calc(100vw - 20px));font-family:"MS Sans Serif",Tahoma,Segoe UI,sans-serif;font-size:11px;line-height:1.35;color:#000;background:#c0c0c0;border:2px solid;border-color:#dfdfdf #404040 #404040 #dfdfdf;box-shadow:1px 1px #000,inset 1px 1px #fff}.mspaint-win--about{position:fixed;z-index:20;top:40px;left:8px}.mspaint-win--portfolio{position:fixed;z-index:20;top:40px;right:8px}.mspaint-win--palette{max-width:min(380px,calc(100vw - 24px));width:max-content}.mspaint-win__titlebar{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:18px;padding:2px 3px 2px 4px;margin:2px 2px 0;background:linear-gradient(90deg,#000080 0%,#1084d0 100%);color:#fff;font-weight:700;letter-spacing:.02em}.mspaint-win__title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mspaint-win__close{flex-shrink:0;width:16px;height:14px;padding:0;display:flex;align-items:center;justify-content:center;font:inherit;line-height:1;color:#000;background:#c0c0c0;border:1px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px gray;cursor:pointer}.mspaint-win__close:hover{background:#d4d0c8}.mspaint-win__close:active{border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px gray;padding-top:1px;padding-left:1px}.mspaint-win__close-icon{font-size:12px;line-height:1;margin-top:-2px}.mspaint-win__body{padding:6px 6px 8px}.mspaint-win__inset{padding:8px 10px;background:#c0c0c0;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040}.mspaint-win__text{margin:0}.mspaint-win__text--right{text-align:right}.mspaint-win__link{color:navy;font-weight:700;text-decoration:underline}.mspaint-win__link:hover{color:#1084d0}.mspaint-win__link:active{color:#000040}.mspaint-flyout{position:fixed;z-index:20;width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;font-family:"MS Sans Serif",Tahoma,Segoe UI,sans-serif;font-size:12px;font-weight:700;color:#000;background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:1px 1px #000;cursor:pointer}.mspaint-flyout:hover{background:#d4d0c8}.mspaint-flyout:active{border-color:#404040 #fff #fff #404040;box-shadow:none;transform:translate(1px,1px)}.mspaint-flyout--collapsed{top:40px;left:8px}.mspaint-flyout--right{left:auto;right:8px}@media (max-width: 640px){.mspaint-win--about{top:40px;left:8px;right:8px;max-width:none;width:auto}.mspaint-win--portfolio{top:auto;left:8px;right:8px;bottom:200px;max-width:none;width:auto}.mspaint-flyout--collapsed{top:40px;left:8px}.mspaint-flyout--right{top:40px;left:auto;right:8px}}html,body,#root{height:100%;margin:0;padding:0}body{overflow:hidden;background:#008080;color:#000;font-family:"MS Sans Serif",Tahoma,Segoe UI,sans-serif}#root{box-sizing:border-box}