.anatomy { margin-top: 24px; }
.anatomy__stage { position: relative; min-height: 690px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 48%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 31%), linear-gradient(color-mix(in srgb,var(--border-subtle) 38%,transparent) 1px, transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--border-subtle) 38%,transparent) 1px, transparent 1px), var(--bg-deep); background-size: auto, 28px 28px, 28px 28px, auto; box-shadow: inset 0 0 80px color-mix(in srgb,var(--accent) 4%,transparent); }
.anatomy__label { position: absolute; z-index: 5; top: 22px; left: 24px; color: var(--text-muted); font-family: var(--font-mono); font-size: .63rem; letter-spacing: .11em; text-transform: uppercase; }
.anatomy__object { position: absolute; z-index: 3; left: 50%; top: 51%; width: min(54%, 690px); transform: translate(-50%,-50%); }
.anatomy__object::before { content: "OBJECT / 01"; position: absolute; right: 14px; top: -25px; color: var(--text-muted); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; }
.anatomy__wires { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.anatomy__wire { fill: none; stroke: color-mix(in srgb,var(--text-muted) 40%,transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke 220ms ease, stroke-width 220ms ease, opacity 220ms ease; }
.anatomy__dot { fill: var(--bg-card-solid); stroke: color-mix(in srgb,var(--text-muted) 55%,transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: fill 220ms ease, stroke 220ms ease, opacity 220ms ease; }
.anatomy__callout { position: absolute; z-index: 4; width: clamp(205px, 19vw, 270px); padding: 17px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb,var(--bg-card-solid) 94%,transparent); box-shadow: var(--shadow-sm); cursor: default; transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background-color 240ms ease; backdrop-filter: blur(16px); }
.anatomy__callout--goal { top: 9%; left: 5%; }
.anatomy__callout--context { top: 40%; left: 2.5%; }
.anatomy__callout--material { bottom: 7%; left: 9%; }
.anatomy__callout--output { top: 13%; right: 4%; }
.anatomy__callout--verify { bottom: 10%; right: 5%; }
.anatomy__callout b { display: block; color: var(--accent); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; }
.anatomy__callout strong { display: block; margin-top: 8px; font-size: .95rem; }
.anatomy__callout p { margin: 6px 0 0; color: var(--text-secondary); font-size: .77rem; line-height: 1.48; }
.anatomy__token { display: block; margin: 0 -8px; padding: 3px 8px; border: 1px solid transparent; border-radius: 8px; cursor: crosshair; transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.anatomy__token:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.anatomy [data-anatomy-key].is-dimmed { opacity: .55; }
.anatomy__token.is-active { opacity: 1; transform: translateX(4px); border-color: color-mix(in srgb,var(--accent) 34%,var(--border)); background: var(--accent-soft); box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent); }
.anatomy__callout.is-active { opacity: 1; border-color: color-mix(in srgb,var(--accent) 48%,var(--border)); box-shadow: 0 22px 55px -28px color-mix(in srgb,var(--accent) 55%,transparent); }
.anatomy__callout--goal.is-active, .anatomy__callout--context.is-active, .anatomy__callout--material.is-active { transform: translateX(-4px) scale(1.012); }
.anatomy__callout--output.is-active, .anatomy__callout--verify.is-active { transform: translateX(4px) scale(1.012); }
.anatomy__wire.is-active { opacity: 1; stroke: var(--accent); stroke-width: 2.2; }
.anatomy__dot.is-active { opacity: 1; fill: var(--accent); stroke: var(--accent); }
.anatomy__hint { position: absolute; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb,var(--bg-card-solid) 90%,transparent); color: var(--text-muted); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .05em; }
@media (max-width: 1120px) {
  .anatomy__stage { min-height: 630px; }
  .anatomy__callout { width: 210px; padding: 14px; }
  .anatomy__object { width: 52%; }
}
@media (max-width: 820px) {
  .anatomy__stage { display: grid; min-height: 0; gap: 10px; padding: 58px 14px 14px; overflow: visible; }
  .anatomy__wires { display: none; }
  .anatomy__object, .anatomy__callout, .anatomy__hint { position: static; width: 100%; transform: none !important; }
  .anatomy__object { order: 1; }
  .anatomy__callout { order: 2; }
  .anatomy__hint { order: 3; transform: none; text-align: center; }
  .anatomy__object::before { display: none; }
  .anatomy__callout.is-active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .anatomy *, .anatomy *::before, .anatomy *::after { transition: none !important; }
}