.engine-diagram{--eng-link:#38e1ff;--eng-midi:#ff4d9a;--eng-deck:#2ee6c5;--eng-clock:#ffd400;--eng-soft:#b18cff}.engine-field{border:1px solid var(--border-subtle);background:radial-gradient(55% 50% at 50% 58%,#9b4dff24,#0000 70%),radial-gradient(40% 40% at 18% 12%,#38e1ff12,#0000 70%),radial-gradient(40% 40% at 84% 16%,#ff4d9a0f,#0000 70%),linear-gradient(#0c0f18 0%,#07080d 100%);border-radius:14px;padding:1.5rem 1.25rem 1.75rem;position:relative;overflow:hidden}.engine-diagram--sources .engine-field{background:0 0;border:none;border-radius:0;padding:0;overflow:visible}.engine-diagram--sources .engine-field:before{display:none}.engine-field:before{content:"";pointer-events:none;background-image:linear-gradient(#8278c812 1px,#0000 1px),linear-gradient(90deg,#8278c812 1px,#0000 1px);background-size:44px 44px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 35%,#0000 78%);mask-image:radial-gradient(#000 35%,#0000 78%)}.engine-sources{z-index:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;display:grid;position:relative}.engine-source{border:1px solid var(--border-subtle);background:color-mix(in srgb, var(--surface) 86%, black);border-radius:10px;align-items:center;gap:.75rem;min-height:4.25rem;padding:.65rem .8rem;display:flex;overflow:hidden}.engine-source__mark{background:var(--eng-soft);width:.55rem;height:.55rem;box-shadow:0 0 10px color-mix(in srgb, var(--eng-soft) 70%, transparent);border-radius:999px;flex-shrink:0}.engine-source__logo{background:#0a0c12;border-radius:7px;flex-shrink:0;width:2.1rem;height:2.1rem;overflow:hidden}.engine-source__logo img{object-fit:cover;width:100%;height:100%}.engine-source__copy{min-width:0}.engine-source__name{color:var(--foreground);font-size:1.05rem;line-height:1.2}.engine-source__hint{color:var(--muted);margin-top:.15rem;font-size:.85rem}.engine-pipe{z-index:1;justify-content:center;height:3.25rem;display:flex;position:relative}.engine-pipe__line{background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--vibe-purple) 70%, white), transparent);width:2px;height:100%;box-shadow:0 0 12px #9b4dff73}.engine-pipe__pulse{background:#f4e9ff;border-radius:999px;width:7px;height:7px;animation:1.8s ease-in-out infinite engine-drop;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 0 10px #b347ffe6}.engine-core{z-index:1;flex-direction:column;align-items:center;gap:.85rem;display:flex;position:relative}.engine-core__hub{place-items:center;width:7.5rem;height:7.5rem;display:grid;position:relative}.engine-core__rings{border:1px solid #b18cff47;border-radius:999px;animation:18s linear infinite engine-spin;position:absolute;inset:-.35rem;box-shadow:0 0 0 8px #9b4dff0d,0 0 32px #9b4dff47}.engine-core__logo{background:#0a0c12;border:1px solid #ffffff1f;border-radius:999px;width:6.4rem;height:6.4rem;overflow:hidden}.engine-core__label{text-align:center}.engine-core__kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--muted-strong);font-size:.85rem}.engine-core__title{color:var(--foreground);margin-top:.15rem;font-size:1.35rem}.engine-outs{z-index:1;grid-template-columns:1fr;gap:.7rem;display:grid;position:relative}.engine-out{border:1px solid color-mix(in srgb, var(--vibe-purple) 35%, var(--border-subtle));background:color-mix(in srgb, var(--surface) 80%, #1a1030);border-radius:10px;flex-direction:column;justify-content:center;min-height:4.5rem;padding:.85rem 1rem;display:flex;box-shadow:0 0 28px #9b4dff1f}.engine-out__name{color:var(--foreground);font-size:1.15rem}.engine-out__hint{color:var(--muted);margin-top:.2rem;font-size:.9rem}@keyframes engine-drop{0%{opacity:0;top:8%}18%{opacity:1}82%{opacity:1}to{opacity:0;top:78%}}@keyframes engine-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (min-width:640px){.engine-field{padding:1.75rem 1.75rem 2rem}.engine-diagram--sources .engine-field{padding:0}.engine-sources{grid-template-columns:repeat(3,minmax(0,1fr))}.engine-outs{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:36rem;margin-inline:auto}}@media (min-width:1024px){.engine-field{grid-template-columns:minmax(15rem,1.05fr) 3.25rem auto 3.25rem minmax(15rem,1fr);align-items:center;gap:0 .35rem;min-height:24rem;padding:2rem 1.5rem;display:grid}.engine-diagram--sources .engine-field{grid-template-columns:minmax(14rem,1fr) 3.25rem auto;min-height:22rem;padding:0}.engine-sources{grid-template-columns:1fr}.engine-diagram--sources .engine-sources{grid-template-columns:repeat(2,minmax(0,1fr))}.engine-pipe--in,.engine-pipe--out{align-self:stretch;width:3.5rem;height:auto}.engine-pipe--in .engine-pipe__line,.engine-pipe--out .engine-pipe__line{background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--vibe-purple) 70%, white), transparent);align-self:center;width:100%;height:2px}.engine-pipe--in .engine-pipe__pulse,.engine-pipe--out .engine-pipe__pulse{animation-name:engine-slide;top:50%;left:0;transform:translate(-50%,-50%)}.engine-pipe--out .engine-pipe__pulse{animation-delay:.4s}.engine-core{padding-inline:.5rem}.engine-outs{grid-template-columns:1fr;max-width:none;margin-inline:0}}@keyframes engine-slide{0%{opacity:0;top:50%;left:8%}18%{opacity:1}82%{opacity:1}to{opacity:0;top:50%;left:78%}}@media (prefers-reduced-motion:reduce){.engine-pipe__pulse,.engine-core__rings{animation:none}.engine-pipe__pulse{display:none}}
