.method-diagram { container-type: inline-size; min-inline-size: 0; padding-block: var(--space-method-card-heading); border-radius: var(--radius-method-card); background: var(--color-audit-card); }
.method-diagram__title { margin: 0 var(--space-method-card-heading); font-size: var(--fs-method-card-title); font-weight: var(--fw-bold); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.method-diagram__stage { position: relative; display: grid; grid-template-columns: 19.95% minmax(0, 1fr) 22.33%; align-items: center; min-block-size: 31.67cqw; margin-block-start: 4.64cqw; padding-inline: 6.845cqw; isolation: isolate; }
.method-diagram__inputs, .method-diagram__outputs { z-index: 2; display: flex; flex-direction: column; gap: var(--space-diagram-row); min-inline-size: 0; padding: 0; margin: 0; list-style: none; }
.method-diagram__inputs { grid-column: 1; }
.method-diagram__outputs { grid-column: 3; }
.method-diagram__node { display: flex; min-inline-size: 0; align-items: center; justify-content: center; padding: var(--space-diagram-node) .8cqw; border-radius: var(--radius-diagram-node); background: var(--color-white); color: var(--color-text); font-size: var(--fs-diagram-label); font-weight: var(--fw-semibold); line-height: 1.5; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.method-diagram__node--result { background: var(--color-trusted); color: var(--color-white); }
.method-diagram__node--muted { border: .145cqw dashed var(--color-method-muted); background: var(--color-page); color: var(--color-method-muted); }
.method-diagram__engine { z-index: 2; display: flex; grid-column: 2; grid-row: 1; flex-direction: column; align-items: stretch; inline-size: 6.263cqw; margin-inline: auto; }
.method-diagram__core { position: relative; display: grid; inline-size: 100%; aspect-ratio: 1; padding: 1.884cqw; border: .147cqw solid var(--color-trusted); border-radius: 50%; background: var(--color-page); color: var(--color-trusted); }
.method-diagram__core::before, .method-diagram__optimization-icon::before { position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-method-glow); opacity: 0; content: ''; pointer-events: none; }
.method-diagram__caption { margin: 0; padding: 1.075cqw .4cqw; border: .108cqw solid var(--color-method-core-border); border-radius: var(--radius-diagram-node); background: var(--color-page); color: var(--color-trusted); font-size: 1.075cqw; font-weight: var(--fw-semibold); line-height: 1.2; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.method-diagram__connection { position: absolute; z-index: 0; inset-inline-start: var(--flow-x); inset-block-start: var(--flow-y); inline-size: var(--flow-width); block-size: var(--flow-height); color: var(--color-trusted); transform: scale(var(--flow-flip-x, 1), var(--flow-flip-y, 1)); pointer-events: none; visibility: hidden; }
.method-diagram__connection[data-flow-ready] { visibility: visible; }
.method-diagram__connection--muted { color: var(--color-text); }
.method-diagram__line { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.method-diagram__connection--pulse { z-index: 1; }
.method-diagram__pulse { fill: none; stroke: var(--color-white); stroke-linecap: butt; }
.method-diagram[data-method-motion="playing"] .method-diagram__core::before, .method-diagram[data-method-motion="playing"] .method-diagram__optimization-icon::before { animation: method-node-glow var(--dur-method-glow) ease-in-out infinite; animation-delay: calc(var(--method-order, 0) * 600ms); }

.method-diagram--signal .method-diagram__engine { translate: 1.62cqw .277cqw; }
.method-diagram--signal .method-diagram__outputs { translate: 0 .257cqw; }
.method-diagram--prediction .method-diagram__stage { grid-template-columns: 24% minmax(0, 1fr) 22.44%; padding-block-end: 4.8cqw; }
.method-diagram--prediction .method-diagram__inputs, .method-diagram--prediction .method-diagram__outputs { gap: 3.1cqw; }
.method-diagram--prediction .method-diagram__node { padding-inline: 1.16cqw; }
.method-diagram--prediction .method-diagram__engine { inline-size: 10.266cqw; translate: -.529cqw 2.351cqw; gap: 1.39cqw; }
.method-diagram--prediction .method-diagram__core { border: .097cqw solid var(--color-method-core-border); border-radius: 1.39cqw; padding: 3.74cqw; background: var(--color-method-frame); }
.method-diagram--prediction .method-diagram__core::after { position: absolute; inset: 1.065cqw; border: .097cqw solid var(--color-trusted); border-radius: var(--radius-diagram-node); background: var(--color-page); content: ''; z-index: -1; }
.method-diagram--prediction .method-diagram__core { isolation: isolate; }
.method-diagram--prediction .method-diagram__caption { padding-block: .968cqw; font-size: .968cqw; }

.method-diagram--integration .method-diagram__stage { display: flex; flex-direction: column; min-block-size: 31.09cqw; margin-block-start: 5.22cqw; padding-inline: 10.16cqw; }
.method-diagram--integration .method-diagram__inputs { inline-size: 58.71%; flex-direction: row; gap: 11.18cqw; }
.method-diagram--integration .method-diagram__node { flex: 1; padding: .86cqw 1cqw; font-size: 1.29cqw; }
.method-diagram--integration .method-diagram__inputs .method-diagram__node::before { flex: none; inline-size: .86cqw; block-size: .86cqw; margin-inline-end: 1.075cqw; background: var(--color-trusted); content: ''; }
.method-diagram--integration .method-diagram__engine { inline-size: 8.603cqw; margin-block-start: 3.1cqw; }
.method-diagram--integration .method-diagram__core { border: .108cqw solid var(--color-method-core-border); border-radius: var(--radius-diagram-node); padding: 2.955cqw; }
.method-diagram--integration .method-diagram__outputs { position: relative; inline-size: 100%; flex-direction: row; gap: 0; margin-block-start: 4.27cqw; padding: 1.735cqw 1.29cqw; border: .161cqw dashed var(--color-trusted); border-radius: 1.39cqw; background: var(--color-method-frame); }
.method-diagram--integration .method-diagram__outputs::before { position: absolute; inset: .8cqw; border: .108cqw solid var(--color-divider); border-radius: var(--radius-diagram-node); background: var(--color-page); content: ''; }
.method-diagram--integration .method-diagram__node--result { position: relative; padding: 1.075cqw .4cqw; background: transparent; color: var(--color-trusted); font-size: 1.506cqw; line-height: 1.2; }
.method-diagram--integration .method-diagram__node--result::after { position: absolute; inset-inline-end: 0; inset-block: 1cqw; border-inline-end: .1cqw solid var(--color-divider); content: ''; }
.method-diagram--integration .method-diagram__node--result:last-child::after { content: none; }

.method-diagram--briefing .method-diagram__stage, .method-diagram--optimization .method-diagram__stage { display: flex; justify-content: center; padding-inline: 0; }
.method-diagram--optimization .method-diagram__stage { min-block-size: auto; }
.method-diagram__briefing { inline-size: 68.21%; translate: 0 .64cqw; padding: var(--space-diagram-panel); border: .174cqw dashed var(--color-trusted); border-radius: var(--radius-diagram-panel); background: var(--color-page); }
.method-diagram__briefing-caption { margin: 0 0 var(--space-diagram-gap); padding-block-end: 1.392cqw; border-block-end: .116cqw solid var(--color-divider); color: var(--color-trusted); font-size: var(--fs-diagram-small); font-weight: var(--fw-semibold); line-height: 1.2; }
.method-diagram__priorities { display: flex; flex-direction: column; gap: var(--space-diagram-gap); margin: 0; padding: 0; list-style: none; }
.method-diagram__priority { position: relative; display: flex; gap: 1.74cqw; align-items: center; min-block-size: 5.104cqw; padding-inline-start: 1.856cqw; border-inline-start: .232cqw solid var(--color-trusted); }
.method-diagram__number { align-self: flex-start; padding-block-start: .8cqw; color: var(--color-trusted); font-size: var(--fs-diagram-small); font-weight: var(--fw-bold); line-height: 1.2; }
.method-diagram__priority-copy { display: flex; min-inline-size: 0; flex-direction: column; gap: .464cqw; }
.method-diagram__item-title { margin: 0; font-size: var(--fs-diagram-item); font-weight: var(--fw-bold); line-height: 1.2; overflow-wrap: anywhere; }
.method-diagram__description { margin: 0; color: var(--color-text-muted); font-size: 1.16cqw; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.method-diagram__priority-copy, .method-diagram__number { opacity: max(.4, calc(1 - var(--method-order, 0) * .3)); }
.method-diagram__priority::after { position: absolute; inset: 0 auto 0 -.232cqw; inline-size: .232cqw; background: var(--color-method-pulse); transform: scaleY(0); transform-origin: center top; content: ''; }
.method-diagram[data-method-motion="playing"] .method-diagram__priority::after { animation: method-priority-scan var(--dur-method-glow) var(--ease-out) infinite; animation-delay: calc(var(--method-order, 0) * 500ms); }
.method-diagram__optimization { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; inline-size: 81.786%; translate: 0 .64cqw; gap: var(--space-diagram-gap); margin: 0; padding: 0; list-style: none; }
.method-diagram__optimization-item { display: flex; min-inline-size: 0; flex-direction: column; align-items: center; gap: 2.784cqw; padding: 2.784cqw; border: .116cqw solid var(--color-trusted); border-radius: 1.856cqw; background: var(--color-page); text-align: center; }
.method-diagram__optimization-icon { position: relative; display: block; inline-size: 6.497cqw; block-size: 6.497cqw; padding: 1.856cqw; border-radius: var(--radius-diagram-node); background: var(--color-trusted); color: var(--color-white); }
.method-diagram__optimization-copy { display: flex; flex-direction: column; gap: 1.392cqw; }
.method-diagram__optimization-copy .method-diagram__description { color: var(--color-text); font-size: var(--fs-diagram-item); }

@keyframes method-node-glow { 0%, 100% { opacity: .05; } 45% { opacity: .75; } }
@keyframes method-priority-scan { 0%, 10% { opacity: 0; transform: scaleY(0); } 35%, 65% { opacity: .85; transform: scaleY(1); } 90%, 100% { opacity: 0; transform: scaleY(1); } }

@media (max-width: 1023px) {
  .method-diagram__stage { min-block-size: 32.944cqw; margin-block-start: 5.83cqw; }
  .method-diagram--integration .method-diagram__stage { min-block-size: 33.924cqw; margin-block-start: 4.85cqw; padding-inline: 7cqw; }
  .method-diagram--integration .method-diagram__inputs { inline-size: 54.39%; }
  .method-diagram--integration .method-diagram__engine { margin-block-start: 6.71cqw; }
  .method-diagram--integration .method-diagram__outputs { margin-block-start: 2.51cqw; }
  .method-diagram--prediction .method-diagram__stage { padding-block-end: 2.2cqw; }
  .method-diagram--optimization .method-diagram__stage { padding-block-start: 2cqw; }
}

@media (max-width: 599px) {
  .method-diagram--optimization .method-diagram__stage { min-block-size: auto; margin-block-start: 32px; padding-block-start: 0; }
  .method-diagram__optimization { inline-size: calc(100% - 24px); translate: none; gap: 4px; }
  .method-diagram__optimization-item { gap: 8px; padding: 10px 6px; border-width: 1px; border-radius: 8px; }
  .method-diagram__optimization-icon { inline-size: 28px; block-size: 28px; padding: 7px; border-radius: 7px; }
  .method-diagram__optimization-copy { gap: 4px; }
  .method-diagram__optimization-copy .method-diagram__item-title,
  .method-diagram__optimization-copy .method-diagram__description { font-size: 9px; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
  .method-diagram__pulse { display: none; }
  .method-diagram[data-method-motion] .method-diagram__core::before,
  .method-diagram[data-method-motion] .method-diagram__optimization-icon::before,
  .method-diagram[data-method-motion] .method-diagram__priority::after { animation: none; opacity: 0; }
}