.diagram-frame{margin:1.5rem 0;position:relative}.diagram-frame__stage{cursor:zoom-in;border-radius:6px;outline:none}.diagram-frame__stage:focus-visible{outline:2px solid var(--ui-primary);outline-offset:4px}.diagram-frame__hint{background:var(--ui-bg-elevated);color:var(--ui-text-muted);opacity:0;pointer-events:none;border-radius:6px;padding:.35rem;font-size:1rem;line-height:1;transition:opacity .15s;display:inline-flex;position:absolute;top:.5rem;right:.75rem}.diagram-frame:hover .diagram-frame__hint,.diagram-frame__stage:focus-visible~.diagram-frame__hint{opacity:1}.diagram-frame.is-expanded{z-index:1000;background:var(--ui-bg);margin:0;position:fixed;inset:0}.diagram-frame:fullscreen::backdrop{background:var(--ui-bg)}.diagram-frame.is-expanded .diagram-frame__stage{box-sizing:border-box;cursor:zoom-out;border-radius:0;justify-content:center;align-items:center;width:100%;height:100%;padding:2.5rem;display:flex}.diagram-frame.is-expanded .diagram-frame__stage>*{width:100%;height:100%;margin:0;overflow:hidden}.diagram-frame.is-expanded .diagram-frame__stage svg{cursor:default;width:100%;min-width:0;height:100%}.diagram-frame__close{z-index:1;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text);cursor:pointer;border-radius:999px;padding:.5rem;font-size:1.25rem;line-height:1;display:inline-flex;position:absolute;top:1rem;right:1rem}.diagram-frame__close:hover{background:var(--ui-bg-accented)}