.step-reference-controls{display:flex;align-items:center;justify-content:center;gap:3px;padding:7px;background:#faf8fc;border-bottom:1px solid #eee7f4;flex-wrap:wrap}.step-reference-controls button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;border-radius:7px;background:transparent;color:#62576e;font:inherit;font-size:12px;font-weight:600;line-height:1.25;padding:8px 9px;min-height:36px;cursor:pointer}.step-reference-controls button[aria-pressed=true]{background:#fff;color:#6d2897;border-color:#e1d1ed;box-shadow:0 1px 3px #3010470a}.step-reference-controls button:hover{background:#f2ebf7}.step-reference-controls button:focus-visible{outline:2px solid #843baa;outline-offset:2px}.step-reference-image{margin:0;overflow:hidden}.step-reference-image>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#fff}.step-reference-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:9px 8px;margin:0!important;font-size:12px!important;line-height:1.4;background:#fff}.step-reference-add{color:#237343}.step-reference-erase{color:#ab3540}.step-reference-image>figcaption{padding:9px 8px;text-align:center;font-size:12px;line-height:1.4;color:#72687d;min-height:35px}@media (forced-colors:active){.step-reference-controls button[aria-pressed=true]{outline:2px solid Highlight}}