.paint{font-family:'MS Sans Serif',Arial,sans-serif;font-size:14px;line-height:normal;background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;display:flex;flex-direction:column;overflow:hidden;padding:0;color:#000}.paint-title{background:linear-gradient(to right,#000080,#1084d0);color:#fff;padding:3px 6px;font-size:14px;letter-spacing:.6px;font-weight:bold;display:flex;align-items:center;user-select:none;gap:4px}.paint-controls{margin-left:auto;display:flex;gap:2px;flex-shrink:0}.paint-controls i{font-style:normal;width:16px;height:14px;background:#c0c0c0;border:1px solid;border-color:#fff #808080 #808080 #fff;font-size:14px;font-weight:bold;padding:0;color:#000;text-align:center;line-height:12px}.paint-menu{padding:2px 4px;border-bottom:1px solid #808080;display:flex;gap:4px}.paint-menu span{padding:1px 6px}.paint-workspace{display:flex;background:#808080;padding:2px;gap:2px;height:300px;overflow:hidden}.paint-tools{background:#c0c0c0;border:1px solid;border-color:#fff #808080 #808080 #fff;width:56px;padding:4px 2px;display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:start;flex-shrink:0}.paint button{box-shadow:none;border:1px solid;border-color:#fff #808080 #808080 #fff;background:#c0c0c0;cursor:pointer;color:#000;font-family:inherit;line-height:normal}.paint-tools button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0}.paint-tools button[aria-pressed=true]{background:#b8b4ac;border-color:#808080 #fff #fff #808080}.paint-canvas-wrap{flex:1;overflow:hidden;position:relative;min-width:0}.paint canvas{display:block;width:100%;height:100%;background:#fff;cursor:crosshair;touch-action:none}.paint-palette{border-top:1px solid #808080;padding:4px 6px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.paint-preview{position:relative;width:32px;height:26px;margin-right:4px;flex-shrink:0}.paint-preview i{position:absolute;width:22px;height:18px;border:1px solid;border-color:#808080 #fff #fff #808080}#fg-preview{top:0;left:0;background:#000;z-index:1}#bg-preview{bottom:0;right:0;background:#fff}.paint-sizes{display:flex;flex-direction:column;gap:2px;margin-right:4px}.paint-sizes button{width:22px;border:0;background:none;display:flex;align-items:center;justify-content:center;padding:1px 0}.paint-sizes i{background:#000;border-radius:50%;display:block}.paint-sizes button[aria-pressed=true] i{outline:1px solid #000080}.paint-swatches{display:grid;grid-template-columns:repeat(16,16px);gap:1px}.paint-swatches button{width:16px;height:16px;padding:0;border-color:#808080 #fff #fff #808080}.paint-actions{margin-left:auto;display:flex;gap:4px}.paint-actions button{padding:2px 8px;font-size:14px}.paint-status{border-top:1px solid #fff;padding:1px 6px;font-size:14px;color:#444;display:flex;gap:12px}.paint-status span{border:1px inset #808080;padding:1px 6px}.paint-hint{font-size:14px;color:#444;margin:0;padding:5px 6px;border-top:1px solid #808080}@media(max-width:440px){.paint-swatches{grid-template-columns:repeat(12,16px)}.paint-title{font-size:14px;letter-spacing:0}.paint-menu{gap:0}.paint-menu span{padding:1px 4px}.paint-workspace{height:260px}}

.drawing{margin-top:64px}.drawing>h2{margin-bottom:8px}.drawing>p{margin-bottom:24px}.paint{border:0}.paint-hint{line-height:1.5}

/* Pixel-aligned window controls, independent of font glyph metrics. */
.paint-title{min-height:28px;padding:4px;letter-spacing:0;gap:8px}
.paint-controls{gap:3px;align-items:center}
.paint-controls i{position:relative;display:block;width:20px;height:20px;flex:0 0 20px;border:0;background:#bfbfbf;box-shadow:inset -1px -1px #000,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dbdbdb}
.paint-controls i::before,.paint-controls i::after{content:"";position:absolute;display:block;box-sizing:border-box}
.window-minimize::before{width:8px;height:2px;background:#000;left:5px;bottom:5px}
.window-maximize::before{width:10px;height:9px;left:5px;top:5px;border:1px solid #000;border-top-width:2px}
.window-close::before,.window-close::after{width:12px;height:2px;background:#000;left:4px;top:9px}
.window-close::before{transform:rotate(45deg)}
.window-close::after{transform:rotate(-45deg)}

.paint-title-text{min-width:0;flex:1;line-height:20px}
.paint-menu{flex-wrap:wrap;line-height:20px}
.paint button:focus-visible{outline:2px solid #8050b5;outline-offset:2px;position:relative;z-index:1}
.paint-actions button{min-height:28px;padding:4px 10px}
.paint-tools button:active,.paint-actions button:active{border-color:#808080 #fff #fff #808080}
.paint-sizes button{min-height:20px}
@media(max-width:440px){.paint-title{align-items:flex-start}.paint-controls{margin-top:0}.paint-swatches{grid-template-columns:repeat(8,18px)}.paint-swatches button{width:18px;height:18px}.paint-palette{gap:6px}.paint-actions{margin-left:0}.paint-hint{padding:8px}.paint-menu span{padding:2px 4px}}

/* A little more canvas room than the 540px reading column. */
main>.drawing{max-width:780px;width:100%}

.paint-title{padding:8px 10px;min-height:36px;gap:12px}