.yag-graph {
    --yag-paper: #f3efe6;
    --yag-paper-deep: #e6dfd1;
    --yag-ink: #172424;
    --yag-muted: #687373;
    --yag-accent: #dc5f45;
    --yag-teal: #156f70;
    position: relative;
    width: 100%;
    height: min(68vh, 680px);
    min-height: 500px;
    margin: 2.5rem 0 1rem;
    overflow: hidden;
    color: var(--yag-ink);
    background: rgba(243, 239, 230, .65);
    border: 1px solid rgba(96, 102, 95, .18);
    border-radius: 22px;
}

.yag-toolbar {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    min-height: 62px;
    padding: 12px 14px 8px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    pointer-events: none;
}

.yag-zoom {
    display: flex;
    gap: 2px;
    padding: 3px;
    pointer-events: auto;
    background: rgba(243, 239, 230, .86);
    border: 1px solid rgba(96, 102, 95, .15);
    border-radius: 999px;
}
.yag-zoom button {
    width: 34px;
    height: 34px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: var(--yag-ink);
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    font: 19px/1 sans-serif;
    cursor: pointer;
}
.yag-zoom button:hover, .yag-zoom button:focus-visible { background: #fff; outline: none; }
.yag-stage { position: absolute; inset: 0; overflow: hidden; }
.yag-stage > svg { width: 100%; height: 100%; display: block; cursor: grab; }
.yag-stage > svg:active { cursor: grabbing; }
.yag-edge { stroke: #7d8783; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.yag-edge.is-reciprocal { stroke: var(--yag-teal); }
.yag-node { cursor: pointer; outline: none; text-decoration: none; }
.yag-node circle { stroke: #fffdf8; stroke-width: 2px; transition: stroke-width 150ms, filter 150ms; }
.yag-node:hover circle, .yag-node:focus-visible circle { stroke-width: 4px; filter: drop-shadow(0 3px 5px rgba(23, 36, 36, .28)); }
.yag-node.is-focus circle { fill: var(--yag-accent) !important; stroke: #fff; stroke-width: 4px; filter: drop-shadow(0 5px 9px rgba(167, 60, 43, .36)); }
.yag-node-label {
    paint-order: stroke;
    stroke: #fffdf8;
    stroke-width: 3.5px;
    stroke-linejoin: round;
    fill: var(--yag-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 650;
    letter-spacing: -.01em;
    pointer-events: none;
}
.yag-node-label.is-focus, .yag-node-label.is-hovered { fill: #111d1d; font-weight: 850; stroke-width: 5px; }
.yag-node-label.is-hovered { font-size: 12px !important; opacity: 1 !important; }
.yag-loading, .yag-error {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--yag-muted);
    background: rgba(243, 239, 230, .8);
    backdrop-filter: blur(4px);
    font-size: 13px;
    text-align: center;
}
.yag-loading[hidden], .yag-error[hidden] { display: none; }
.yag-loading span { width: 26px; height: 26px; border: 3px solid var(--yag-paper-deep); border-top-color: var(--yag-accent); border-radius: 50%; animation: yag-spin 700ms linear infinite; }
.yag-message { margin: 2rem 0; padding: 1rem; border-left: 3px solid #dc5f45; background: #f3efe6; }
@keyframes yag-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
    .yag-graph { height: min(62vh, 560px); min-height: 430px; border-radius: 17px; }
    .yag-node-label { stroke-width: 4.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .yag-graph *, .yag-graph *::before, .yag-graph *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}