.image-panel{height:100%;width:100%;padding:0;box-sizing:border-box}.image-panel,.image-panel__inner{display:flex;flex-direction:column}.image-panel__inner{position:relative;flex:1;min-height:0;background:var(--background-primary);overflow:hidden}.image-panel__title-section{padding:72px 16px 16px;flex-shrink:0}.image-panel__title{margin:0;font-size:var(--text-2xl);font-weight:var(--font-semibold);line-height:1.3;color:var(--ink-title);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-panel__subline{margin-top:4px}.image-panel__content{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab;touch-action:none}.image-panel__content--dragging{cursor:grabbing;user-select:none}.image-panel__image-wrapper{transform:translate(var(--pan-x,0),var(--pan-y,0)) scale(var(--scale,1));transform-origin:0 0}.image-panel__image{display:block;user-select:none;-webkit-user-drag:none}.image-panel__content .image-panel__loading{position:absolute;inset:0;width:100%;height:100%;border-radius:0}.image-panel__error{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;color:var(--ink-tertiary);font-size:var(--text-xs);padding:32px;text-align:center}.image-panel__error-title{color:var(--ink-secondary);font-size:var(--text-base);font-weight:var(--font-medium)}.image-panel__error-detail{color:var(--ink-tertiary)}.image-panel__error-download{margin-top:var(--space-2);padding:var(--space-1) var(--space-4);font-family:var(--font-sans);font-size:var(--text-xs);color:var(--ink-secondary);background:var(--background-secondary);border:1px solid var(--border-default);border-radius:var(--radius-button);cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}.image-panel__error-download:hover{background:var(--background-hover)}@media (max-width:768px){.image-panel__title-section{padding:64px 12px 12px}.image-panel__title{font-size:var(--text-xl)}}.diagram-panel{display:flex;flex-direction:column;height:100%;width:100%;padding:0;box-sizing:border-box}.diagram-panel__inner{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;background:var(--background-primary);overflow:hidden}.diagram-panel__title-section{padding:72px 16px 16px;flex-shrink:0}.diagram-panel__title{margin:0;font-size:var(--text-2xl);font-weight:var(--font-semibold);line-height:1.3;color:var(--ink-title);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diagram-panel__subline{margin-top:4px}.diagram-panel__content{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab;touch-action:none}.diagram-panel__content--dragging{cursor:grabbing;user-select:none}.diagram-panel__diagram-wrapper{width:3000px;min-width:3000px;transform:translate(var(--pan-x,0),var(--pan-y,0)) scale(var(--scale,1));transform-origin:0 0}.diagram-panel__diagram-wrapper svg{max-width:none}.diagram-panel__error,.diagram-panel__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;color:var(--ink-tertiary);font-size:var(--text-xs);padding:32px;text-align:center}.diagram-panel__error{color:var(--status-error)}@media (max-width:768px){.diagram-panel__title-section{padding:64px 12px 12px}.diagram-panel__title{font-size:var(--text-xl)}}