:root{--eoepca-blue: #0084c7;--eoepca-blue-dark: #005a9e;--eoepca-red: #d72631;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#263e50;background:#f4f8fb;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:#fff;border-bottom:2px solid var(--eoepca-blue)}h1{display:flex;align-items:center;gap:12px;margin:0;font-size:18px;font-weight:600;letter-spacing:-.3px}h1 img{display:block;width:auto;height:32px}h1 span{padding-left:16px;border-left:1px solid #ccdfea;color:var(--eoepca-blue-dark);font-size:15px;font-weight:500;letter-spacing:.02em}nav{display:flex;gap:6px}button{min-width:36px;height:34px;padding:0 10px;border:1px solid #c8dce9;border-radius:4px;color:var(--eoepca-blue-dark);background:#fff;font:inherit;font-size:14px;cursor:pointer}#zoom-in,#zoom-out{font-size:22px;line-height:1}button:hover{background:#edf7fc}button:focus-visible{outline:2px solid var(--eoepca-red);outline-offset:3px}button:disabled{opacity:.4;cursor:default}#workspace{position:relative;display:flex;flex:1;min-height:0}#viewport{position:relative;flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}#diagram{width:100%;height:100%;padding:16px}#diagram svg{display:block;width:100%;height:100%;color-scheme:light}#diagram text{text-rendering:geometricPrecision}.component-button,.component-button *{cursor:pointer}.component-button:focus{outline:none}.component-button:is(:hover,:focus-visible)>g:first-of-type>:is(ellipse,rect,path){stroke:var(--eoepca-blue)!important;stroke-width:3}.component-button.is-selected>g:first-of-type>:is(ellipse,rect,path){stroke:var(--eoepca-red)!important;stroke-width:3}#component-details{flex:0 0 360px;padding:24px;overflow-y:auto;background:#fff;border-left:1px solid #d4e2ec;border-top:3px solid var(--eoepca-red)}.details-heading{display:flex;align-items:start;gap:16px}.details-heading h2{flex:1;margin:3px 0 0;color:var(--eoepca-blue-dark);font-size:20px;line-height:1.35}.details-heading h2:focus{outline:none}#close-details{flex:none;font-size:22px}#details-notes{margin:24px 0;padding-left:18px;font-size:14px;line-height:1.6}#details-notes li+li{margin-top:8px}#details-notes li::marker{color:var(--eoepca-blue)}.screenshot{display:grid;place-items:center;aspect-ratio:16 / 10;margin:0 0 24px;overflow:hidden;border:1px solid #ccdfeb;border-radius:4px;background:#f4f9fc}.screenshot img{display:block;width:100%;height:100%;object-fit:contain}#screenshot-placeholder{padding:16px;color:#6b7d8d;font-size:14px}.live-link{display:block;padding:12px 16px;border-radius:4px;background:var(--eoepca-blue-dark);color:#fff;font-size:14px;font-weight:600;text-align:center;text-decoration:none}.live-link:hover{background:#004a83}.live-link:focus-visible{outline:2px solid var(--eoepca-red);outline-offset:3px}#missing-link{color:#6b7d8d;font-size:14px}#status{position:absolute;margin:24px;color:#576776}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(max-width:500px){header{padding:12px}h1{font-size:16px}h1 img{height:26px}h1 span{display:none}}@media(max-width:720px){#component-details{position:absolute;top:0;right:0;bottom:0;width:min(360px,100%);box-shadow:-8px 0 24px #173e591a}}