:root { --accent: #7559d8; --accent-rgb: 117, 89, 216; }

.model[data-model="llm"] {
  width: min(94vw, 1320px, calc((100svh - 112px) * 8 / 5));
  height: auto;
  aspect-ratio: 8 / 5;
}
.network-edge {
  fill: none;
  stroke: #b7b3c3;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke 200ms ease, opacity 200ms ease, stroke-width 200ms ease;
}
.network-edge[data-kind="flow"] { stroke: #9c8cc8; stroke-width: 1.8; }
.network-edge[data-kind="training"] { stroke-dasharray: 7 6; }
.network-edge[data-kind="extension"], .network-edge[data-kind="support"] { stroke-dasharray: 2 6; }
.network-edge[data-kind="cycle"] { stroke-dasharray: 4 5; }
.network-node { transition: opacity 200ms ease; }
.network-frame { vector-effect: non-scaling-stroke; }
.model .network-frame {
  fill: #fcfcfa;
  stroke: #70727d;
  stroke-width: 1.5;
}
.model .network-core .network-frame { stroke: #9580cc; fill: #f3effb; stroke-width: 2; }
.network-glyph { transform: translateY(-13px) scale(0.82); pointer-events: none; }
.network-glyph * { stroke: #777182; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.network-label, .network-annotation {
  fill: #55515d;
  stroke: none;
  text-anchor: middle;
  font-size: 22px;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
}
.network-label.long-label { font-size: 20px; }
.network-core .network-label { font-size: 24px; font-weight: 600; }
.network-annotation { fill: #8b8695; font-size: 18px; font-weight: 400; }
.network-legend { pointer-events: none; }
.network-legend text { text-anchor: start; }
.network-legend line { stroke: #aca2c3; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.network-legend .training-key { stroke-dasharray: 7 6; }
.network-legend .extension-key { stroke-dasharray: 2 6; }
.has-selection .network-edge { opacity: 0.2; }
.has-selection .network-node:not(.is-related) { opacity: 0.42; }
.has-selection .network-edge.is-related { stroke: var(--accent); opacity: 0.85; stroke-width: 2; }
.has-selection .network-edge.is-related:not([data-kind="support"]) { marker-end: url("#llm-arrow-active"); }
.model .network-node.is-related .network-frame { stroke: #a092c2; }
.model .network-node.is-current .network-frame,
.model .network-node.active .network-frame,
.model .network-node:focus-visible .network-frame { stroke: var(--accent); fill: #eee8fb; stroke-width: 2.5; }
.network-node.is-current .network-label { fill: #543b9e; }
.network-node:focus-visible .network-frame { stroke-dasharray: 5 3; }
.network-compact .network-label { font-size: 30px; }
.network-compact .network-label.long-label { font-size: 25px; }
.network-compact .network-core .network-label { font-size: 27px; }
.network-compact .network-glyph { transform: translateY(-17px); }
.network-compact .network-annotation { font-size: 23px; }

.preview .network-frame { fill: #fcfcfa; stroke: #8e8899; stroke-width: 1.3; }
.preview .network-core .network-frame { fill: #eee8fb; stroke: #8c73c4; stroke-width: 1.8; }
.preview .network-glyph * { stroke-width: 1; }
.preview .network-edge { stroke-width: 1; }
.preview .network-label, .preview .network-annotations { display: none; }
.report-card:hover .network-frame { stroke: #7559d8; }

@media (max-width: 800px) {
  .model[data-model="llm"] {
    width: min(94vw, 720px, calc((100svh - 112px) * 720 / 1180));
    aspect-ratio: 720 / 1180;
  }
}