.arrow-layer, .arrow-handles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.arrow-layer { z-index: 4; }
.arrow-handles { z-index: 8; }
.arrow-layer path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.arrow-outline { opacity: .88; }
.arrow-selection { stroke: #f2cf70; opacity: .52; }
.arrow-preview { opacity: .8; }
.arrow-node { fill: #fffef8; stroke: #416954; stroke-width: 1.5px; }
.is-arrow-mode .cell:focus-visible { z-index: auto; }
.arrow-options { padding-top: 1px; }
.arrow-toolbar, .arrow-colors, #arrow-swatches, .arrow-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arrow-toolbar { margin-bottom: 12px; }
.arrow-toolbar .paint-range-shapes { font-size: 12px; }
#arrow-count { margin-left: auto; font-size: 11px; color: #87927f; }
.arrow-colors { color: #63725b; font-size: 12px; margin-bottom: 12px; }
#arrow-swatches { gap: 7px; }
.arrow-swatch.white[aria-pressed='true']::after, .arrow-swatch.yellow[aria-pressed='true']::after { border-color: #26372b; }
.arrow-color-note { font-size: 10px; color: #929b88; margin-left: 3px; }
.arrow-actions { gap: 5px; }
#arrow-finish:not(:disabled) { background: #426d4d; color: white; border-color: #426d4d; }
#arrow-hint { line-height: 1.7; padding-top: 5px; }
.paint-options:has(+ .arrow-options:not([hidden])) { display: none; }
@media (max-width:540px) {
  .paint-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .paint-tool { width: 100%; }
  #arrow-swatches { gap: 6px; }
  .arrow-swatch { width: 26px; height: 26px; }
  .arrow-colors { gap: 7px; }
  .arrow-color-note { display: none; }
  .arrow-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arrow-actions .action-button { justify-content: center; }
}