.diagram-key{position:absolute;right:14px;bottom:14px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:min(620px,70%);background:#111d;padding:9px;border-radius:12px}.diagram-key button{position:relative;width:32px;height:32px;border:1px solid #737a70;background:#fff;color:#111;border-radius:50%;font-weight:900;cursor:pointer}.diagram-key button.active{background:var(--acid);border-color:var(--acid)}.diagram-key button span{position:absolute;right:0;bottom:40px;width:max-content;max-width:240px;background:#111;color:#fff;padding:8px 10px;border-radius:7px;font-size:.72rem;font-weight:700;opacity:0;pointer-events:none;z-index:4}.diagram-key button:hover span,.diagram-key button:focus span{opacity:1}@media(max-width:560px){.diagram-key{max-width:90%;right:5%;bottom:8px}.diagram-key button{width:28px;height:28px;font-size:.72rem}}
.diagram-ocr-marker{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;z-index:2}.diagram-ocr-marker>span:first-child{width:10px;height:10px;overflow:hidden;border-radius:50%;background:#d9ff38;border:2px solid #111;box-shadow:0 0 0 5px #d9ff3866,0 2px 8px #0008;color:transparent;transition:transform .15s,box-shadow .15s}.diagram-ocr-marker:hover>span:first-child,.diagram-ocr-marker:focus>span:first-child{transform:scale(1.35);box-shadow:0 0 0 8px #d9ff3877,0 2px 10px #0009}.diagram-ocr-marker.active{z-index:5}.diagram-ocr-marker.active>span:first-child{transform:scale(1.7);background:#d9ff38;box-shadow:0 0 0 10px #d9ff3866,0 0 0 12px #111,0 4px 16px #0009;animation:ocrPulse 1.5s infinite}.diagram-ocr-marker .hotspot-tip{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:max-content;max-width:260px;background:#111;color:#fff;border-radius:7px;padding:8px 10px;font-size:.72rem;font-weight:700;line-height:1.3;opacity:0;pointer-events:none}.diagram-ocr-marker:hover .hotspot-tip,.diagram-ocr-marker:focus .hotspot-tip,.diagram-ocr-marker.active .hotspot-tip{opacity:1}@keyframes ocrPulse{50%{box-shadow:0 0 0 15px #d9ff3822,0 0 0 12px #111,0 4px 16px #0009}}
.diagram-part-row[data-part-row]{cursor:pointer}.diagram-part-row[data-part-row]:focus{outline:3px solid var(--acid);outline-offset:-3px}
.diagram-ocr-marker>span:first-child{width:26px;height:26px;background:#d9ff3822;border:3px solid var(--acid);box-shadow:0 0 0 2px #1118;color:transparent}.diagram-ocr-marker.active>span:first-child{transform:none;background:#d9ff3838;border-color:#b7e300;box-shadow:0 0 0 3px #111,0 0 0 8px #d9ff3866;animation:ocrPulse 1.5s infinite}.diagram-ocr-marker .hotspot-tip{left:calc(100% + 12px);top:50%;bottom:auto;transform:translateY(-50%);text-align:left}.diagram-ocr-marker.tip-left .hotspot-tip{left:auto;right:calc(100% + 12px)}.diagram-ocr-marker.active .hotspot-tip{opacity:0}.diagram-ocr-marker:hover .hotspot-tip,.diagram-ocr-marker:focus .hotspot-tip,.diagram-ocr-marker.details-open .hotspot-tip{opacity:1}@keyframes ocrPulse{50%{box-shadow:0 0 0 3px #111,0 0 0 13px #d9ff3822}}
.diagram-ocr-marker{width:64px;height:64px}.diagram-ocr-marker>span:first-child{width:52px;height:52px;border-width:4px;background:#d9ff3812;box-shadow:0 0 0 2px #1118}.diagram-ocr-marker.active>span:first-child{box-shadow:0 0 0 3px #111,0 0 0 9px #d9ff3866}@media(max-width:700px){.diagram-ocr-marker{width:48px;height:48px}.diagram-ocr-marker>span:first-child{width:40px;height:40px}}
.diagram-ocr-marker>span:first-child{display:grid;place-items:center;color:#111;background:#faffeaed;font-size:16px;font-weight:900;line-height:1}.diagram-ocr-marker.active>span:first-child{background:var(--acid);color:#111}.diagram-canvas.calibrating .diagram-ocr-marker>span:first-child{font-size:14px}@media(max-width:700px){.diagram-ocr-marker>span:first-child{font-size:13px}}