.diagram-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:#fff;border-bottom:1px solid #dce5e9;color:#254c60;font-size:14px;font-weight:600}.diagram-toolbar>div{display:flex;gap:6px}.diagram-toolbar button,.diagram-modal-bar button{font:inherit;border:1px solid #c8d9e0;background:white;color:#123c51;border-radius:6px;padding:10px 14px;cursor:pointer;min-height:44px}.diagram-toolbar .diagram-pan{display:none}.diagram-scroll{overflow-x:auto;scrollbar-color:#6d999d #e9f0f3;scrollbar-width:thin;overscroll-behavior-x:contain}.diagram-scroll:focus-visible{outline:2px solid #087b80;outline-offset:-2px}.product-figure .diagram-scroll img{width:100%;height:auto;max-height:none}.diagram-toolbar button:hover,.diagram-modal-bar button:hover{background:#edf7f6}
#diagram-dialog{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#f1f4f6;color:#123c51;overflow:hidden}#diagram-dialog[open]{display:flex;flex-direction:column}#diagram-dialog::backdrop{background:#092636cc}.diagram-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:white;padding:16px 24px;border-bottom:1px solid #dce5e9;flex:none}.diagram-modal-bar h2{font-size:18px;margin:0}.diagram-modal-bar>div{display:flex;align-items:center;gap:8px}.diagram-modal-bar output{font-size:13px;min-width:45px;text-align:center}.diagram-modal-scroll{overflow:auto;flex:1;min-height:0;padding:20px;overscroll-behavior:contain}.diagram-modal-scroll img{display:block;max-width:none;height:auto;margin:auto}.diagram-modal-bar button:focus-visible,.diagram-toolbar button:focus-visible{outline:3px solid #28a7a7;outline-offset:2px}
@media(max-width:700px){.product-figure{margin-left:-12px;margin-right:-12px}.diagram-toolbar{padding:10px 12px;font-size:12px}.diagram-toolbar .diagram-pan{display:block;padding:8px 12px}.diagram-toolbar button{padding:8px 10px}.product-figure .diagram-scroll img{width:760px;max-width:none}.diagram-scroll{padding-bottom:5px}.diagram-modal-bar{padding:10px 12px;flex-wrap:wrap;gap:8px}.diagram-modal-bar h2{font-size:15px}.diagram-modal-bar>div{gap:5px}.diagram-modal-bar button{padding:8px 10px}.diagram-modal-scroll{padding:12px}}