.graph-panel{gap:.9rem;display:grid}.graph-head h1{margin:0}.graph-icon-button{border:1px solid color-mix(in srgb, var(--line) 58%, transparent);background:color-mix(in srgb, var(--surface) 84%, transparent);width:2.05rem;min-width:2.05rem;height:2.05rem;color:var(--text);cursor:pointer;-webkit-appearance:none;appearance:none;pointer-events:auto;border-radius:8px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.graph-icon-button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:1rem;height:1rem}.graph-icon-button:hover{background:var(--accent-soft);color:var(--accent)}.graph-stage-wrap{position:relative}.graph-stage{border:1px solid color-mix(in srgb, var(--line) 48%, transparent);background:radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--accent) 8%, transparent) 0, transparent 18%), radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--accent-warm) 8%, transparent) 0, transparent 18%), repeating-linear-gradient(0deg, transparent 0, transparent 34px, color-mix(in srgb, var(--line) 10%, transparent) 34px, color-mix(in srgb, var(--line) 10%, transparent) 35px), var(--surface);box-shadow:none;border-radius:12px;overflow:hidden}.graph-stage svg{cursor:grab;touch-action:none;width:100%;height:560px;display:block}.graph-stage--side svg{height:420px}.graph-stage svg.is-dragging,.graph-stage svg.is-panning{cursor:grabbing}.graph-zoom-control{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:.55rem;width:3.1rem;display:flex;position:absolute;top:.7rem;bottom:.7rem;right:.42rem}.graph-zoom-control--side{gap:.72rem;width:3.35rem;top:.55rem;bottom:.55rem;right:.34rem}.graph-zoom-buttons{pointer-events:auto;flex-direction:column;align-items:center;gap:.55rem;display:flex}.graph-zoom-button,.graph-zoom-control--side .graph-icon-button{width:3rem;min-width:3rem;height:3rem}.graph-zoom-slider{transform-origin:50%;pointer-events:auto;width:132px;height:1rem;accent-color:var(--accent);transform:rotate(-90deg)}.graph-stage--side+.graph-zoom-control .graph-zoom-slider{width:104px}.graph-zoom-control--side .graph-zoom-slider{width:132px;height:3rem;padding:.62rem 0}.graph-link{stroke:color-mix(in srgb, var(--text) 20%, transparent);stroke-width:1.15px;stroke-opacity:.42;stroke-linecap:round}.graph-link.is-active{stroke:color-mix(in srgb, var(--accent) 74%, var(--text));stroke-width:1.7px;stroke-opacity:.92}.graph-link.is-dim{stroke-opacity:.12}.graph-node{transition:opacity .13s}.graph-node circle{fill:color-mix(in srgb, var(--surface) 92%, transparent);stroke:color-mix(in srgb, var(--line) 68%, var(--accent));stroke-width:1.2px}.graph-node text{fill:var(--text);stroke:color-mix(in srgb, var(--surface) 90%, transparent);stroke-width:3.8px;paint-order:stroke fill;pointer-events:none;font-size:12px}.graph-stage--side .graph-node text{font-size:10px}.graph-stage.graph-no-labels .graph-node text{display:none}.graph-node:hover{cursor:pointer}.graph-node.is-active circle{fill:color-mix(in srgb, var(--accent-soft) 64%, var(--surface));stroke:color-mix(in srgb, var(--accent) 84%, var(--text));stroke-width:1.8px}.graph-node.is-dim{opacity:.16}.graph-detail{border:1px solid var(--line);background:var(--surface);min-height:3rem;color:var(--muted);border-radius:6px;padding:.75rem .85rem;font-size:.92rem}.graph-detail--side{min-height:2.6rem;font-size:.82rem}.graph-icon-button{border-color:color-mix(in srgb, var(--line) 84%, transparent);background:color-mix(in srgb, var(--surface-strong) 72%, transparent)}.graph-panel{gap:1rem}.graph-stage{border-color:color-mix(in srgb, var(--panel-border) 82%, transparent);background:repeating-linear-gradient(0deg, transparent 0, transparent 34px, color-mix(in srgb, var(--line) 10%, transparent) 34px, color-mix(in srgb, var(--line) 10%, transparent) 35px), color-mix(in srgb, var(--panel-bg) 96%, transparent);box-shadow:none;border-radius:12px}.graph-detail{border-color:color-mix(in srgb, var(--panel-border) 76%, transparent);background:color-mix(in srgb, var(--panel-bg) 90%, transparent);border-radius:10px}.graph-icon-button{border-color:color-mix(in srgb, var(--panel-border) 74%, transparent);background:color-mix(in srgb, var(--panel-bg) 88%, transparent);box-shadow:none;border-radius:8px}.graph-icon-button:hover{background:color-mix(in srgb, var(--accent-soft) 78%, var(--surface))}.graph-stage{border-color:color-mix(in srgb, var(--line) 84%, transparent);background:radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--accent) 6%, transparent) 0, transparent 18%), radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--accent-warm) 6%, transparent) 0, transparent 18%), linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 98%, transparent) 0%, color-mix(in srgb, var(--surface-soft) 94%, transparent) 100%), repeating-linear-gradient(0deg, transparent 0, transparent 34px, color-mix(in srgb, var(--line) 12%, transparent) 34px, color-mix(in srgb, var(--line) 12%, transparent) 35px);border-radius:12px;position:relative}.graph-stage.is-loading{filter:saturate(.92)contrast(.97)}.graph-status{border:1px dashed color-mix(in srgb, var(--line) 72%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 84%, transparent) 0%, color-mix(in srgb, var(--surface-soft) 76%, transparent) 100%), repeating-linear-gradient(135deg, transparent 0, transparent 14px, color-mix(in srgb, var(--line) 18%, transparent) 14px, color-mix(in srgb, var(--line) 18%, transparent) 15px);color:color-mix(in srgb, var(--muted) 90%, var(--text));font-family:var(--font-mono);letter-spacing:.09em;text-transform:uppercase;text-align:center;pointer-events:none;z-index:2;border-radius:10px;place-items:center;padding:.65rem;font-size:.66rem;display:grid;position:absolute;inset:.68rem}.graph-status.is-delayed{color:color-mix(in srgb, var(--accent) 72%, var(--text));border-style:solid}.graph-status.is-error{border-style:solid;border-color:color-mix(in srgb, #c44343 58%, var(--line));background:color-mix(in srgb, #c44343 10%, var(--surface));color:color-mix(in srgb, #c44343 78%, var(--text))}.graph-status[hidden]{display:none}html[data-theme=dark] .graph-stage{background:linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 98%, transparent) 0%, color-mix(in srgb, var(--surface-soft) 94%, transparent) 100%), repeating-linear-gradient(0deg, transparent 0, transparent 26px, color-mix(in srgb, var(--line) 24%, transparent) 26px, color-mix(in srgb, var(--line) 24%, transparent) 27px)}html[data-theme=dark] .graph-link{stroke:color-mix(in srgb, var(--text) 34%, transparent);stroke-opacity:.34}html[data-theme=dark] .graph-link.is-active{stroke:var(--accent-strong);stroke-opacity:.92}.graph-node text{font-family:var(--font-body)}html[data-theme=dark] .graph-node text{fill:var(--text);stroke:#091018e0;stroke-width:3.2px}.graph-node circle{stroke-width:1.65px}html[data-theme=dark] .graph-node circle{fill:color-mix(in srgb, var(--surface) 88%, #0b1118);stroke:var(--accent-strong)}.graph-detail{border-color:color-mix(in srgb, var(--line) 84%, transparent);background:color-mix(in srgb, var(--surface-strong) 95%, transparent);min-height:2.75rem;font-family:var(--font-body);color:color-mix(in srgb, var(--muted) 88%, var(--text));border-radius:10px;margin-top:.74rem;padding:.66rem .78rem;font-size:.82rem;line-height:1.42}html[data-theme=dark] .graph-detail{color:color-mix(in srgb, var(--muted) 94%, var(--text));background:color-mix(in srgb, var(--surface-soft) 94%, transparent)}.graph-detail strong{color:var(--text)}.graph-detail--side{min-height:2.45rem;margin-top:.64rem;font-size:.76rem}@media (width<=760px){.graph-stage svg,.graph-stage--side svg{height:340px}.graph-status{letter-spacing:.07em;font-size:.6rem;inset:.52rem}.graph-stage--side svg{height:260px}}@media (width<=1080px) and (pointer:coarse){.graph-detail,.graph-detail--side{overflow-wrap:anywhere;word-break:break-word}.graph-stage,.graph-stage svg{touch-action:none}}