.hub{position:relative;margin:0;container:hub / inline-size;isolation:isolate}.hub__defs{position:absolute;width:0;height:0;overflow:hidden}.hub__grid{display:none}.hub__board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"a node b" "pipe pipe pipe";column-gap:clamp(56px,12cqw,112px);row-gap:clamp(52px,9cqw,80px);align-items:center}.hub__traces{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}.hub__traces .t-base{fill:none;stroke:#007a764d;stroke-width:1}.hub__traces .t-lit{fill:none;stroke:var(--c-cyan);stroke-width:1.5;opacity:0;transition:opacity .26s var(--ease)}.hub__traces .t-lit.is-on{opacity:1}.hub__traces .pad{fill:var(--c-bg);stroke:#007a7699;stroke-width:1}.hub__traces .pin{fill:var(--c-cyan)}.hub__traces .pulse rect{fill:var(--c-cyan-fill)}.hub__traces .pulse .core{fill:#fff}.hub__ch{position:relative;z-index:1;list-style:none;display:grid;gap:12px;width:100%;max-width:236px}.hub__ch--a{grid-area:a;justify-self:end}.hub__ch--b{grid-area:b;justify-self:start}.hub__chip{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:.45rem 14px;background:var(--c-surface-2);border:1px solid var(--c-line-2);border-radius:var(--r);box-shadow:var(--sc-edge),var(--sc-e1);color:var(--c-ink);font-size:.9rem;font-weight:560;line-height:1.2;letter-spacing:-.006em}.hub__chip:after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--c-cyan);background:#00cec912;opacity:0;transition:opacity .24s var(--ease);pointer-events:none}.hub__chip.is-lit:after{opacity:1}.hub__glyph{width:18px;height:18px;flex:none;color:var(--c-ink-soft);transition:color .24s var(--ease)}.hub__chip.is-lit .hub__glyph{color:var(--c-cyan)}.hub__node{grid-area:node;position:relative;z-index:1;width:116px;height:116px;display:grid;place-content:center;justify-items:center;gap:7px;background:var(--c-surface);border:1px solid rgba(0,206,201,.34);border-top:3px solid var(--c-cyan);border-radius:var(--r-lg);box-shadow:var(--sc-edge),var(--sc-e3)}.hub__node:after{content:"";position:absolute;inset:-9px;border:1px solid rgba(0,206,201,.55);border-radius:14px;opacity:0;transform:scale(.96);pointer-events:none}.hub__node.is-hit:after{animation:hub-hit .72s var(--ease)}@keyframes hub-hit{0%{opacity:.95;transform:scale(.96)}to{opacity:0;transform:scale(1.14)}}.hub__wm{font-size:2.05rem}.hub__node-sub{font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.3em;padding-left:.3em;color:var(--c-ink-soft)}.hub__pipe{--pg: 8px;grid-area:pipe;position:relative;z-index:1;padding:12px;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sc-edge),var(--sc-e2)}.hub__stages{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pg)}.hub__stages li{display:grid;align-content:start;gap:3px;padding:10px 10px 8px;border-top:2px solid var(--c-line-2);transition:border-color .26s var(--ease)}.hub__stages li.is-active{border-top-color:var(--c-cyan)}.hub__stages b{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-white)}.hub__stages span{font-size:.8rem;line-height:1.32;color:var(--c-ink-soft)}.hub__stages .hub__n{display:inline-grid;place-items:center;width:1.35em;height:1.35em;margin-right:.5em;vertical-align:.05em;border:1px solid var(--c-line-2);border-radius:50%;font-size:1em;line-height:1;letter-spacing:0;color:var(--c-ink-soft);transition:border-color .26s var(--ease),color .26s var(--ease)}.hub__stages li.is-active .hub__n{border-color:var(--c-cyan);color:var(--c-cyan)}.hub__lane{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pg);min-height:118px;margin-top:4px}.hub__lane i{border:1px dashed var(--c-line-2);border-radius:var(--r)}.hub__card{--stage: 0;--s: 1;position:absolute;left:0;top:0;bottom:0;width:calc((100% - 3 * var(--pg)) / 4);display:grid;align-content:start;gap:5px;padding:10px;background:var(--c-surface);border:1px solid var(--c-line-2);border-top:2px solid var(--c-cyan);border-radius:var(--r);box-shadow:var(--sc-edge),var(--sc-e2);transform:translate(calc(var(--stage) * (100% + var(--pg)))) scale(var(--s));transition:transform .76s var(--ease),opacity .32s var(--ease)}.hub__card.is-hidden{opacity:0;--s: .95}.hub__card.is-won{border-top-color:var(--c-ok)}.hub__card-src{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-soft);white-space:nowrap;overflow:hidden}.hub__card-src svg{width:13px;height:13px;flex:none;color:var(--c-cyan)}.hub__card-name{font-size:.86rem;font-weight:650;line-height:1.2;letter-spacing:-.01em;color:var(--c-white)}.hub__card-ev{font-size:.76rem;line-height:1.28;color:var(--c-cyan)}.hub__card.is-won .hub__card-ev{color:var(--c-ok)}.hub__card-ev.is-new{animation:hub-ev .42s var(--ease)}@keyframes hub-ev{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}.hub__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;padding:12px 2px 0}.hub__pipe-name{padding:2px 2px 10px;font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-soft)}.hub__demo{font-size:.6rem;padding:.28em .7em}.hub__cap{margin-top:1.4rem;font-size:var(--sc-t-sm);line-height:1.5;color:var(--c-ink-soft);max-width:60ch}@container hub (max-width: 560px){.hub__board{--hub-stack: 1;--row: 4.5rem;--rg: 6px;grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b" "node" "pipe";row-gap:0}.hub__ch{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:none;justify-self:stretch}.hub__ch--b{margin-top:6px}.hub__chip{flex-direction:column;justify-content:center;gap:5px;min-height:56px;padding:7px 4px;text-align:center;font-size:.76rem;line-height:1.2}.hub__glyph{width:17px;height:17px}.hub__node{justify-self:center;margin-top:44px;width:auto;height:auto;padding:10px 20px;grid-auto-flow:column;align-items:center;gap:10px}.hub__wm{font-size:1.45rem}.hub__pipe{display:grid;margin-top:32px;padding:8px}.hub__pipe-name{grid-row:1;padding:4px 4px 8px}.hub__stages{grid-area:2 / 1;grid-template-columns:minmax(0,1fr);grid-auto-rows:var(--row);gap:var(--rg)}.hub__stages li{position:relative;align-content:center;gap:2px;padding:0 calc(58% + 8px) 0 12px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r)}.hub__stages li.is-active{border-top-color:var(--c-line)}.hub__stages li:before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--c-cyan);opacity:0;transition:opacity .3s var(--ease)}.hub__stages li.is-active:before{opacity:1}.hub__stages b{font-size:.66rem;letter-spacing:.04em;white-space:nowrap}.hub__stages .hub__n{margin-right:.4em}.hub__stages span{font-size:.76rem;text-wrap:balance}.hub__lane{grid-area:2 / 1;display:block;min-height:0;margin:0}.hub__lane i{display:none}.hub__card{inset:6px 6px auto auto;width:calc(58% - 6px);height:calc(var(--row) - 12px);align-content:center;gap:2px;padding:0 10px;transform:translateY(calc(var(--stage) * (var(--row) + var(--rg)))) scale(var(--s))}.hub__card-src{line-height:1.2}.hub__card-name{font-size:.8rem}.hub__card-ev{font-size:.74rem}.hub__foot{grid-row:3}}@container hub (max-width: 300px){.hub__board{--row: 5.5rem}}@container hub (max-width: 284px){.hub__stages b{white-space:normal}.hub__board{--row: 6.5rem}}@container hub (max-width: 280px){.hub__ch{gap:4px}.hub__ch--b{margin-top:4px}.hub__chip{padding-inline:2px}}.hub__traces{transition:clip-path 1.1s var(--ease)}.hub__chip{transition:opacity .52s var(--ease) calc(var(--i, 0) * 60ms + .16s),transform .52s var(--ease) calc(var(--i, 0) * 60ms + .16s)}.hub__node{transition:opacity .52s var(--ease) 80ms,transform .62s var(--ease) 80ms}.hub__pipe{transition:opacity .62s var(--ease) .52s,transform .62s var(--ease) .52s}.hub.is-ready:not(.is-on) .hub__traces{clip-path:inset(0 0 100% 0)}.hub.is-ready:not(.is-on) .hub__chip{opacity:0;transform:translateY(8px)}.hub.is-ready:not(.is-on) .hub__node{opacity:0;transform:scale(.95)}.hub.is-ready:not(.is-on) .hub__pipe{opacity:0;transform:translateY(12px)}@media (prefers-reduced-motion: reduce){.hub__traces,.hub__chip,.hub__node,.hub__pipe,.hub__card,.hub__card-ev,.hub__stages li:before{transition:none!important;animation:none!important}.hub.is-ready:not(.is-on) .hub__traces{clip-path:none}.hub.is-ready:not(.is-on) .hub__chip,.hub.is-ready:not(.is-on) .hub__node,.hub.is-ready:not(.is-on) .hub__pipe{opacity:1;transform:none}.hub__node.is-hit:after{animation:none}}.hub{padding:clamp(1rem,2.5vw,2rem);border:1px solid var(--c-line);border-radius:14px;background:var(--c-bg-2)}