.portfolio-article-diagram__viewport{isolation:isolate;border:1px solid var(--hughie-theme-line-normal-normal);border-radius:var(--hughie-radius-primitives-radius-024,24px);background:var(--hughie-theme-background-normal-alternative);height:clamp(360px,48vw,560px);color:var(--hughie-theme-label-normal);touch-action:none;cursor:var(--hughie-cursor-grab);overscroll-behavior:contain;position:relative;overflow:hidden}.portfolio-article-diagram__viewport:active{cursor:var(--hughie-cursor-grabbing)}.portfolio-article-diagram__viewport:focus-visible,.portfolio-article-diagram__controls button:focus-visible{outline:var(--hughie-focus-ring);outline-offset:-3px}.portfolio-article-diagram__stage{width:100%;height:100%;padding:var(--hughie-size-040,40px) var(--hughie-size-024,24px) var(--hughie-size-080,80px);justify-content:center;align-items:center;display:flex}.portfolio-article-diagram__canvas{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.portfolio-article-diagram__canvas svg{width:100%;max-width:100%;height:100%;max-height:100%}.portfolio-article-diagram__canvas .node{filter:none!important}.portfolio-article-diagram__canvas .node rect{rx:var(--hughie-size-012,12px);ry:var(--hughie-size-012,12px);filter:none}.portfolio-article-diagram__canvas .node polygon,.portfolio-article-diagram__canvas .node path{filter:none}.portfolio-article-diagram__minimap{right:var(--hughie-size-016,16px);top:var(--hughie-size-016,16px);border:1px solid var(--hughie-theme-line-normal-normal);border-radius:var(--hughie-size-012,12px);background:var(--hughie-theme-background-normal-normal);width:120px;height:76px;position:absolute;overflow:hidden}.portfolio-article-diagram__controls{z-index:2;bottom:var(--hughie-size-016,16px);align-items:center;gap:var(--hughie-size-008,8px);padding:var(--hughie-size-008,8px);border:1px solid var(--hughie-theme-line-normal-normal);border-radius:var(--hughie-radius-primitives-radius-100,100px);background:var(--hughie-theme-background-normal-normal);cursor:default;max-width:calc(100% - 24px);display:flex;position:absolute;left:50%;transform:translate(-50%)}.portfolio-article-diagram__controls output{text-align:center;min-width:48px;font:var(--hughie-text-label-2-medium-font-weight) var(--hughie-text-label-2-medium-font-size)/var(--hughie-text-label-2-medium-line-height) var(--hughie-font-family-sans);font-variant-numeric:tabular-nums}.portfolio-article-diagram__loading,.portfolio-article-diagram__empty{justify-content:center;align-items:center;gap:var(--hughie-size-016,16px);padding:var(--hughie-size-024,24px);text-align:center;color:var(--hughie-theme-label-alternative);flex-direction:column;display:flex;position:absolute;inset:0}.portfolio-article-diagram__skeleton{gap:var(--hughie-size-016,16px);align-items:center;display:flex}.portfolio-article-diagram__skeleton i{border-radius:var(--hughie-size-008,8px);background:var(--hughie-theme-fill-normal);width:48px;height:32px;animation:1.6s ease-in-out infinite hughie-diagram-pulse;display:block}.portfolio-article-diagram__skeleton i:nth-child(2){animation-delay:.16s}.portfolio-article-diagram__skeleton i:nth-child(3){animation-delay:.32s}.portfolio-article-diagram__empty details{text-align:left;max-width:100%}.portfolio-article-diagram__empty pre{white-space:pre-wrap;max-height:180px;overflow:auto}@keyframes hughie-diagram-pulse{50%{opacity:.4}}@media (prefers-reduced-motion:reduce){.portfolio-article-diagram__skeleton i{animation:none}}