.app-window[data-app="paint"] .window-body {
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  margin: 3px 1px 1px;
  background: #c0c0c0;
  box-shadow: none;
}
.paint-app {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  min-height: 360px;
  height: 100%;
  color: #000;
  font: 11px/1.4 var(--font);
  user-select: none;
  container: iggy-paint / inline-size;
}
.paint-commandbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 5px 5px;
  flex-shrink: 0;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px #fff;
}
.paint-command, .paint-tool {
  background: #c0c0c0;
  color: #000;
  border: 0;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.paint-command { min-height: 28px; padding: 4px 9px; font-size: 11px; }
.paint-command:active:not(:disabled), .paint-tool:active, .paint-tool[aria-pressed="true"] {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #000, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
.paint-command:disabled { color: #808080; text-shadow: 1px 1px #fff; }
.paint-command-divider { height: 24px; width: 2px; margin: 0 2px; border-left: 1px solid #808080; border-right: 1px solid #fff; }
.paint-zoom { margin-left: auto; }
.paint-app select {
  min-height: 26px;
  max-width: 100%;
  background: #fff;
  color: #000;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  border-radius: 0;
  padding: 1px 3px;
  font-size: 10px;
}
.paint-app select:disabled { background: #c0c0c0; color: #606060; }
.paint-zoom select { width: 65px; }
.paint-main { display: flex; flex: 1; min-height: 0; min-width: 0; padding-top: 2px; }
.paint-tool-panel { width: 76px; flex-shrink: 0; padding: 4px 5px; overflow: auto; scrollbar-width: thin; }
.paint-tools { display: grid; grid-template-columns: repeat(2, 31px); gap: 2px; }
.paint-tool { display: grid; place-items: center; width: 31px; height: 31px; padding: 5px; }
.paint-tool svg { width: 21px; height: 21px; }
.paint-tool[aria-pressed="true"] { background-color: #ddd; background-image: repeating-conic-gradient(#fff8 0% 25%, transparent 0% 50%); background-size: 2px 2px; }
.paint-tool[aria-pressed="true"] svg { transform: translate(1px, 1px); }
.paint-tool-name { font-size: 9px; line-height: 1.4; min-height: 13px; margin: 10px 0 6px; text-align: center; overflow-wrap: anywhere; }
.paint-option { display: flex; flex-direction: column; gap: 3px; font-size: 9px; margin: 8px 0; }
.paint-option select { width: 100%; min-width: 0; padding-left: 1px; }
.paint-workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  background: #808080;
  box-shadow: inset 1px 1px #000, inset -1px -1px #fff;
  overscroll-behavior: contain;
  scrollbar-color: #c0c0c0 #dfdfdf;
  scrollbar-width: auto;
}
.paint-stage { position: relative; flex-shrink: 0; width: 800px; height: 500px; box-shadow: 1px 1px 0 #404040; }
.paint-canvas { display: block; width: 100%; height: 100%; background: #fff; cursor: crosshair; touch-action: none; outline: 0; }
.paint-canvas:focus-visible { outline: 1px dotted #000080; outline-offset: 2px; }
.paint-textbar { display: flex; align-items: center; gap: 7px; padding: 6px; border-bottom: 1px solid #808080; box-shadow: 0 1px #fff; flex-shrink: 0; }
.paint-text-label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 10px; }
.paint-text-label input { flex: 1; min-width: 0; width: 100%; height: 29px; padding: 3px 5px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; font: 12px/1.4 Tahoma, Arial, sans-serif; border-radius: 0; }
.paint-textbar select { flex-shrink: 0; width: 69px; height: 29px; }
.paint-palettebar { display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding: 6px 7px; min-height: 60px; border-top: 1px solid #fff; }
.paint-current-colors { position: relative; width: 48px; height: 44px; flex-shrink: 0; background: repeating-conic-gradient(#fff 0% 25%, #c0c0c0 0% 50%) 0 0 / 2px 2px; border: 1px solid #808080; box-shadow: 1px 1px #fff; }
.paint-foreground-color, .paint-background-color { position: absolute; width: 25px; height: 25px; padding: 0; border: 2px solid #c0c0c0; box-shadow: 0 0 0 1px #808080, inset 1px 1px #000; }
.paint-foreground-color { left: 5px; top: 4px; z-index: 1; background: #000; }
.paint-background-color { right: 4px; bottom: 4px; background: #fff; }
.paint-foreground-color[aria-pressed="true"], .paint-background-color[aria-pressed="true"] { outline: 1px dotted #000; outline-offset: 2px; }
.paint-swap-colors { position: absolute; z-index: 2; right: 0; top: -3px; width: 18px; height: 17px; line-height: 14px; padding: 0; border: 0; background: #c0c0c0; font: 15px/1 Arial, sans-serif; }
.paint-palette { display: grid; grid-template-columns: repeat(8, 23px); gap: 2px; flex-shrink: 0; }
.paint-swatch { width: 23px; height: 21px; padding: 3px; border: 0; background: #c0c0c0; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080; position: relative; }
.paint-swatch::before { content: ''; display: block; height: 100%; width: 100%; background: var(--paint-swatch); border: 1px solid #000; }
.paint-swatch[aria-pressed="true"] { outline: 1px dotted #000; outline-offset: -2px; }
.paint-custom-color { width: 32px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 9px; cursor: pointer; }
.paint-custom-color input { width: 30px; height: 27px; border: 0; background: #c0c0c0; padding: 2px; cursor: pointer; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.paint-custom-color input::-webkit-color-swatch-wrapper { padding: 2px; }
.paint-custom-color input::-webkit-color-swatch { border: 1px solid #000; border-radius: 0; }
.paint-canvas-size { margin-left: auto; color: #404040; font-size: 10px; padding-right: 5px; white-space: nowrap; }
@container iggy-paint (max-width: 500px) {
  .paint-commandbar { padding: 3px 4px 5px; gap: 3px; }
  .paint-command { padding: 5px 7px; min-height: 31px; font-size: 10px; }
  .paint-command-divider { display: none; }
  .paint-zoom select { width: 52px; min-height: 31px; padding-inline: 1px; }
  .paint-main { flex-direction: column; }
  .paint-tool-panel { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 5px; overflow: visible; }
  .paint-tools { grid-template-columns: repeat(5, 31px); flex-shrink: 0; }
  .paint-options { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5px; flex: 1; min-width: 0; }
  .paint-tool-name { grid-column: 1 / -1; text-align: left; margin: 0 0 1px; font-size: 9px; }
  .paint-option { min-width: 0; gap: 2px; margin: 0; font-size: 8px; }
  .paint-option select { font-size: 9px; min-height: 28px; }
  .paint-palettebar { gap: 7px; padding: 6px; }
  .paint-canvas-size { display: none; }
  .paint-palette { grid-template-columns: repeat(8, minmax(0, 1fr)); flex: 1; min-width: 0; max-width: 222px; }
  .paint-swatch { width: 100%; height: 24px; padding: 3px; }
  .paint-textbar { gap: 4px; }
}
@container iggy-paint (max-width: 330px) {
  .paint-commandbar { gap: 3px; }
  .paint-command { padding-inline: 6px; }
  .paint-tool-panel { gap: 6px; }
  .paint-tools { grid-template-columns: repeat(5, 29px); gap: 1px; }
  .paint-tool { width: 29px; height: 31px; padding: 4px; }
  .paint-options { column-gap: 3px; }
  .paint-option select { font-size: 8px; }
  .paint-palettebar { gap: 5px; padding: 6px 4px; }
  .paint-current-colors { width: 43px; }
  .paint-custom-color { width: 27px; }
  .paint-custom-color input { width: 26px; }
}