/* The Mechanism tab: the architecture from the brain, alive */
.win.is-arch .win__shot { background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, 0.04), transparent 70%), #080a12; }
.arch { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 14px 16px 12px; box-sizing: border-box; }
.arch[hidden] { display: none; }
.arch__svg { width: 100%; height: 100%; min-height: 0; grid-row: 2; overflow: visible; font-family: var(--sans); }
.arch__caption { display: none; }
.arch__views { grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.arch__views button { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: none; color: #aeb5c4; font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; cursor: pointer; transition: color 160ms, border-color 160ms, background 160ms; }
.arch__views button[aria-selected="true"] { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.arch__note { grid-row: 3; margin: 0; font: 13px/1.45 var(--sans); color: #dfe3ea; min-height: 2.9em; }
.arch__edge { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.6; transition: stroke 300ms, stroke-width 300ms; }
.arch__edge.is-on { stroke: var(--c); stroke-width: 2.2; }
.arch__svg marker path { fill: rgba(255, 255, 255, 0.45); }
.arch__edge-label { font-size: 13px; fill: #6f788a; text-anchor: middle; paint-order: stroke; stroke: #080a12; stroke-width: 4px; stroke-linejoin: round; transition: fill 300ms; }
.arch__edge-label.is-on { fill: #dfe3ea; }
.arch__node { transition: opacity 300ms; }
.arch__node:not(.is-on) { opacity: 0.55; }
.arch__node rect { fill: #10162b; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; transition: fill 300ms, stroke 300ms, filter 300ms; }
.arch__node .arch__label { font-size: 19px; font-weight: 500; fill: #e9e6df; text-anchor: middle; }
.arch__node .arch__sub { font-size: 13px; fill: #8a93a6; text-anchor: middle; font-family: var(--mono); }
.arch__node.is-on rect { stroke: var(--c); fill: color-mix(in srgb, var(--c) 16%, #10162b); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 45%, transparent)); }
.arch__node.k-datastore rect, .arch__node.k-database rect, .arch__node.k-storage rect { rx: 14; }
.arch__node.k-messagebus rect, .arch__node.k-queue rect { stroke-dasharray: 6 4; }
.arch__node.k-external rect, .arch__node.k-actor rect, .arch__node.k-client rect { fill: #0b0e18; }
.arch__packet { fill: var(--c); filter: drop-shadow(0 0 6px var(--c)); offset-distance: 0%; offset-rotate: 0deg; opacity: 0; animation: arch-travel 900ms linear both; }
@keyframes arch-travel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 760px) { .win.is-arch .win__body { grid-template-columns: 1fr; grid-template-rows: 62% 1fr; } .arch { padding: 10px; } .arch__node .arch__label { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .arch__packet { animation: none; opacity: 1; offset-distance: 50%; } }
@media (max-width: 760px) {
  .arch { overflow: auto; grid-template-rows: auto auto auto; align-content: start; }
  .arch__svg { width: 190%; height: auto; max-width: none; }
}