.sync-diagram-viewer{width:100%;max-width:1200px;margin:0 auto;overflow:hidden;transition:all .3s ease}.sync-diagram-viewer.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;max-width:100%;width:100%;height:100vh;margin:0;z-index:50;border-radius:0}.controls-group{display:flex;gap:.25rem;align-items:center}.zoom-controls{width:100%;border-radius:var(--radius);position:relative;overflow:hidden;height:100%}.diagram-container{display:flex;justify-content:center;align-items:center;height:600px;background-color:hsl(var(--card));position:relative;transition:height .3s ease}.diagram-container.fullscreen{height:calc(100vh - 120px)}.diagram-container>div{width:100%;height:100%}.sync-diagram{max-width:100%;height:auto;object-fit:contain}.diagram-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(45deg,hsl(var(--muted)/.1) 25%,transparent 25%,transparent 75%,hsl(var(--muted)/.1) 75%,hsl(var(--muted)/.1)),linear-gradient(45deg,hsl(var(--muted)/.1) 25%,transparent 25%,transparent 75%,hsl(var(--muted)/.1) 75%,hsl(var(--muted)/.1));background-size:20px 20px;background-position:0 0,10px 10px;pointer-events:none}.diagram-help{margin-top:1rem;padding:.75rem;border-radius:var(--radius);background-color:hsl(var(--muted)/.5)}.fullscreen .diagram-help{display:none}