:root { --xeno-nav-speed: 180ms; --xeno-nav-color: #2271b1; }
html.xeno-is-navigating { cursor: progress; }
#xeno-progress { position: fixed; z-index: 2147483646; inset: 0 auto auto 0; width: 0; height: 3px; opacity: 0; background: var(--xeno-nav-color); box-shadow: 0 0 8px var(--xeno-nav-color); transition: width 180ms ease, opacity 160ms ease; pointer-events: none; }
#xeno-progress.is-visible { opacity: 1; }
#xeno-spinner { position: fixed; z-index: 2147483646; top: 16px; right: 16px; width: 24px; height: 24px; display: none; border: 3px solid rgb(128 128 128 / 30%); border-top-color: var(--xeno-nav-color); border-radius: 50%; animation: xeno-spin .65s linear infinite; pointer-events: none; }
#xeno-spinner.is-visible { display: block; }
.xeno-transition-fade.xeno-leaving { opacity: 0; }
.xeno-transition-fade.xeno-entering { animation: xeno-fade var(--xeno-nav-speed) ease both; }
.xeno-transition-slide.xeno-leaving { opacity: 0; transform: translateX(-8px); }
.xeno-transition-slide.xeno-entering { animation: xeno-slide var(--xeno-nav-speed) ease both; }
.xeno-transition-crossfade.xeno-leaving { opacity: .15; }
.xeno-transition-crossfade.xeno-entering { animation: xeno-fade var(--xeno-nav-speed) ease both; }
.xeno-leaving { transition: opacity var(--xeno-nav-speed) ease, transform var(--xeno-nav-speed) ease; }
@keyframes xeno-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xeno-slide { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes xeno-spin { to { transform: rotate(360deg); } }
#xeno-debug { position: fixed; z-index: 2147483645; right: 8px; bottom: 8px; max-width: 340px; padding: 8px 10px; color: #d7ffd7; background: rgb(0 0 0 / 85%); border-radius: 4px; font: 11px/1.4 ui-monospace, monospace; pointer-events: none; white-space: pre-wrap; }
.xeno-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) { .xeno-leaving, .xeno-entering, #xeno-progress { transition: none !important; animation: none !important; } }