.xn{--xn-green:#7a9e6a;--es-green:#7a9e6a;position:relative;height:320svh;padding:0 calc(var(--band-margin, 96px) + 36px) 0 var(--band-margin,96px)}.xn-pin{position:sticky;top:0;height:100svh;min-height:600px;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(12px,2.4vh,32px);padding:var(--hud-rail-y-start,96px) 0 calc(var(--hud-rail-y-end, 72px) - 24px)}.xn-fig{--xn-w:min(calc(100% + 144px),calc((100svh - var(--hud-rail-y-start, 96px) - var(--hud-rail-y-end, 72px) - 108px) * 1200 / 560));--u:calc(100cqw / 1200);position:relative;align-self:center;width:var(--xn-w);margin-left:calc((100% - var(--xn-w)) / 2);aspect-ratio:1200/560;container-type:inline-size;background-image:radial-gradient(var(--xb-line) 1px,transparent 1.2px);background-size:26px 26px;background-position:50%}.xn-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.xn-top{fill:var(--xb-ground)}.xn-face{fill:var(--xb-ground-2)}.xn-ports rect{fill:var(--xb-gold)}.xn-track{fill:none;stroke:var(--xb-line);stroke-width:1;stroke-dasharray:3 5}.xn-wire{fill:none;stroke:var(--xb-gold);stroke-width:1.25;stroke-dasharray:1 1}.xn-card{fill:var(--xb-ground);stroke:var(--xb-line-2);stroke-width:1;transition:stroke .3s ease}.xn-rule{stroke:var(--xb-line);stroke-width:1}.xn-node[data-on] .xn-card{stroke:var(--xb-text-2)}.xn-node[data-first] .xn-card{stroke:var(--xb-gold)}.xn-mini{opacity:.2;transition:opacity .3s ease}.xn-node[data-on] .xn-mini{opacity:1}.xn-words{position:absolute;inset:0;pointer-events:none}.xn-words>*{position:absolute;left:calc(var(--px) * 100%);top:calc(var(--py) * 100%)}.xn-course{font-family:var(--xb-mono);font-size:max(10px,calc(11 * var(--u)));letter-spacing:.15em;text-transform:uppercase;line-height:1;color:var(--xb-text-2);white-space:nowrap}.xn-course,.xn-label{transform:translateY(-50%)}.xn-label{display:grid;gap:calc(5 * var(--u));color:var(--xb-text-3);transition:color .3s ease}.xn-label[data-on]{color:var(--xb-text)}.xn-kick{font-family:var(--xb-mono);font-size:max(10px,calc(10.5 * var(--u)));letter-spacing:.15em;text-transform:uppercase;line-height:1;color:var(--xb-text-3)}.xn-name{font-family:var(--xb-sans);font-size:calc(19 * var(--u));line-height:1.05;letter-spacing:-.01em;white-space:nowrap}.xn-status{font-family:var(--xb-mono);font-size:max(10px,calc(10.5 * var(--u)));letter-spacing:.15em;text-transform:uppercase;line-height:1;color:var(--xb-text-2);white-space:nowrap;transition:opacity .3s ease}.xn-label[data-first] .xn-status{color:var(--xb-gold)}.xn-frame__body{fill:color-mix(in srgb,var(--xb-ground) 70%,transparent);stroke:color-mix(in srgb,var(--xb-gold) 55%,transparent);stroke-width:1}.xn-frame__band{fill:color-mix(in srgb,var(--xb-gold) 16%,transparent);stroke:none}.xn-frame__rule{stroke:color-mix(in srgb,var(--xb-gold) 40%,transparent);stroke-width:1}.xn-band{transform:translateY(-50%);font-family:var(--xb-mono);font-size:max(10px,calc(11 * var(--u)));letter-spacing:.15em;text-transform:uppercase;line-height:1;color:var(--xb-gold);white-space:nowrap}.xn-lane{fill:none;stroke:var(--xb-line);stroke-width:1}.xn-rib{fill:none;stroke:var(--xb-gold);stroke-opacity:.7;stroke-width:1;stroke-dasharray:1 1}.xn-node--dept[data-on] .xn-card{stroke:var(--xb-gold)}.xn-port{fill:var(--xb-gold)}.xn-state{color:var(--xb-text-2)}.xn-dept>line,.xn-dept>polygon{opacity:.5;transition:opacity .3s ease}.xn-dept[data-on]>line,.xn-dept[data-on]>polygon{opacity:1}.xn-band--dept{color:color-mix(in srgb,var(--xb-gold) 45%,transparent);transition:color .3s ease}.xn-band--dept[data-on]{color:var(--xb-gold)}.xn-next{transform:translateY(-50%);font-family:var(--xb-mono);font-size:max(10px,calc(10.5 * var(--u)));letter-spacing:.15em;text-transform:uppercase;line-height:1;color:var(--xb-text-2);white-space:nowrap;transition:opacity .3s ease}.es[data-handed] .es-svg{visibility:hidden}