Pages Medium
Science — Preprint / arXiv Article Page
An arXiv-style preprint landing page with a sticky left metadata rail holding the submission identifier, subject badges, a keyboard-accessible version dropdown, submission and revision dates, and license. The main column carries the title, author list with affiliations, a LaTeX-flavored abstract and display equation, an SVG figure with a numbered caption, a download panel that toasts on click, a Cite button revealing a copyable BibTeX block, and a references, cited-by, and comments tab strip.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
--shadow-md: 0 6px 22px rgba(15, 27, 45, 0.1);
--serif: "Source Serif 4", Georgia, serif;
--sans: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
font-size: 16px;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
.skip-link {
position: absolute;
left: -999px;
top: 8px;
background: var(--accent);
color: #fff;
padding: 8px 14px;
border-radius: var(--r-sm);
font-family: var(--sans);
z-index: 50;
}
.skip-link:focus {
left: 12px;
}
/* ---- top bar ---- */
.topbar {
border-bottom: 1px solid var(--line);
background: var(--bg);
position: sticky;
top: 0;
z-index: 20;
}
.topbar-inner {
max-width: 1120px;
margin: 0 auto;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
font-family: var(--serif);
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
}
.brand:hover {
text-decoration: none;
}
.brand-mark {
color: var(--danger);
}
.topnav {
display: flex;
align-items: center;
gap: 22px;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
}
.topnav a {
color: var(--ink-2);
}
.topnav-cta {
background: var(--accent);
color: #fff !important;
padding: 7px 14px;
border-radius: var(--r-sm);
}
.topnav-cta:hover {
background: var(--accent-d);
text-decoration: none;
}
/* ---- layout ---- */
.layout {
max-width: 1120px;
margin: 0 auto;
padding: 28px 24px 80px;
display: grid;
grid-template-columns: 244px 1fr;
gap: 40px;
align-items: start;
}
/* ---- meta rail ---- */
.rail {
position: sticky;
top: 78px;
font-family: var(--sans);
font-size: 13px;
display: flex;
flex-direction: column;
gap: 20px;
}
.rail-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.rail-note {
margin: 6px 0 0;
color: var(--muted);
font-size: 12px;
}
.rail-block {
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.rail-id {
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.arxiv-id {
display: block;
font-family: var(--mono);
font-size: 15px;
font-weight: 500;
color: var(--ink);
margin-bottom: 8px;
}
.doi {
font-size: 12px;
color: var(--muted);
}
.doi code {
font-family: var(--mono);
font-size: 11px;
}
.badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.badge {
font-family: var(--mono);
font-size: 12px;
padding: 3px 8px;
border-radius: var(--r-sm);
background: var(--bg-alt);
border: 1px solid var(--line);
color: var(--ink-2);
}
.badge-primary {
background: var(--accent-50);
border-color: rgba(26, 79, 138, 0.25);
color: var(--accent-d);
font-weight: 500;
}
/* version dropdown */
.ver-control {
position: relative;
}
.ver-btn {
font-family: var(--sans);
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: var(--bg);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
color: var(--ink);
cursor: pointer;
min-width: 110px;
justify-content: space-between;
}
.ver-btn:hover {
border-color: var(--accent);
}
.ver-btn svg {
transition: transform 0.18s ease;
}
.ver-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.ver-menu {
list-style: none;
margin: 6px 0 0;
padding: 5px;
position: absolute;
top: 100%;
left: 0;
min-width: 190px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
z-index: 15;
}
.ver-menu li {
display: flex;
flex-direction: column;
padding: 8px 10px;
border-radius: var(--r-sm);
cursor: pointer;
}
.ver-menu li strong {
font-family: var(--mono);
font-weight: 500;
}
.ver-menu li span {
font-size: 12px;
color: var(--muted);
}
.ver-menu li:hover,
.ver-menu li.focus {
background: var(--accent-50);
}
.ver-menu li[aria-selected="true"] {
background: var(--accent-50);
}
.rail-dates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.rail-dates time {
font-family: var(--mono);
font-size: 12px;
color: var(--ink);
}
.license {
font-family: var(--mono);
font-size: 13px;
}
.rail-metrics {
display: flex;
gap: 22px;
border-bottom: none;
}
.metric {
display: flex;
flex-direction: column;
}
.metric-n {
font-family: var(--mono);
font-size: 19px;
font-weight: 500;
color: var(--ink);
}
.metric-l {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ---- main column ---- */
.main {
min-width: 0;
}
.crumb {
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
margin: 0 0 14px;
}
.crumb span {
margin: 0 6px;
}
.title {
font-family: var(--serif);
font-weight: 700;
font-size: clamp(24px, 3.4vw, 33px);
line-height: 1.22;
letter-spacing: -0.015em;
margin: 0 0 16px;
}
.authors {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin: 0 0 10px;
padding: 0;
font-family: var(--sans);
font-size: 15px;
}
.authors sup {
font-size: 10px;
color: var(--muted);
}
.affils {
margin: 0 0 24px;
padding-left: 18px;
font-family: var(--sans);
font-size: 13px;
color: var(--muted);
line-height: 1.7;
}
.affils sup {
margin-right: 2px;
}
/* downloads */
.downloads {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 16px 0 18px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
}
.dl {
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 15px;
border-radius: var(--r-sm);
border: 1px solid var(--line-2);
background: var(--bg);
color: var(--ink);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.dl:hover {
border-color: var(--accent);
background: var(--accent-50);
}
.dl:active {
transform: translateY(1px);
}
.dl-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.dl-primary:hover {
background: var(--accent-d);
}
.dl-ghost {
margin-left: auto;
color: var(--teal);
border-color: rgba(15, 125, 120, 0.4);
}
.dl-ghost:hover {
background: var(--teal-50);
border-color: var(--teal);
}
/* cite panel */
.cite-panel {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--bg-alt);
margin-bottom: 26px;
overflow: hidden;
animation: slidein 0.18s ease;
}
@keyframes slidein {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: none;
}
}
.cite-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
font-family: var(--sans);
}
.cite-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
}
.copy-btn {
font-family: var(--sans);
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--ink);
cursor: pointer;
}
.copy-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.copy-btn.done {
border-color: var(--ok);
color: var(--ok);
}
.bibtex {
margin: 0;
padding: 14px 16px;
font-family: var(--mono);
font-size: 12.5px;
line-height: 1.55;
color: var(--ink);
overflow-x: auto;
white-space: pre;
}
/* abstract */
.section-h {
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-d);
margin: 0 0 8px;
}
.abstract p {
margin: 0 0 22px;
font-size: 17px;
color: var(--ink-2);
}
.abstract em {
font-style: italic;
color: var(--ink);
}
.num {
font-family: var(--mono);
font-size: 0.9em;
color: var(--accent-d);
}
/* equation */
.equation {
margin: 0 0 26px;
display: flex;
align-items: center;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px 20px;
}
.eq-body {
flex: 1;
text-align: center;
}
.eq-math {
font-family: var(--serif);
font-style: italic;
font-size: 20px;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 4px;
}
.eq-math sub {
font-style: normal;
font-family: var(--mono);
font-size: 0.62em;
}
.eq-math b {
font-weight: 700;
font-style: normal;
}
.frac {
display: inline-flex;
flex-direction: column;
align-items: center;
vertical-align: middle;
margin: 0 4px;
}
.frac-n {
border-bottom: 1.4px solid var(--ink);
padding: 0 6px 2px;
}
.frac-d {
padding: 2px 6px 0;
}
.eq-num {
font-family: var(--mono);
font-size: 13px;
color: var(--muted);
margin-left: 12px;
}
/* figure */
.figure {
margin: 0 0 26px;
}
.fig-frame {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--bg);
padding: 18px 18px 10px;
box-shadow: var(--shadow-sm);
}
.fig-svg {
width: 100%;
height: auto;
}
.ax-lbl {
font-family: var(--sans);
font-size: 11px;
fill: var(--muted);
}
.ax-tick {
font-family: var(--mono);
font-size: 10px;
fill: var(--muted);
}
.fig-legend {
display: flex;
gap: 22px;
justify-content: center;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-2);
padding-top: 4px;
}
.fig-legend .dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
figcaption {
font-family: var(--sans);
font-size: 13px;
color: var(--muted);
margin-top: 10px;
line-height: 1.55;
}
figcaption b {
color: var(--ink);
}
/* comments line */
.comments-line {
font-family: var(--sans);
font-size: 13.5px;
color: var(--ink-2);
background: var(--bg-alt);
border-left: 3px solid var(--accent);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
padding: 10px 14px;
margin: 0 0 30px;
}
.cl-label {
font-weight: 600;
color: var(--accent-d);
margin-right: 4px;
}
/* tabs */
.tabstrip {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 18px;
overflow-x: auto;
}
.tab {
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
padding: 10px 14px;
border: none;
background: none;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
white-space: nowrap;
}
.tab:hover {
color: var(--ink);
}
.tab.is-active {
color: var(--accent-d);
border-bottom-color: var(--accent);
}
.tabpanel {
font-size: 15px;
}
.reflist {
margin: 0;
padding-left: 22px;
color: var(--ink-2);
}
.reflist li {
margin-bottom: 12px;
line-height: 1.55;
}
.ref-au {
color: var(--ink);
font-weight: 600;
}
.reflist code {
font-family: var(--mono);
font-size: 12px;
}
.citedlist,
.commentlist {
list-style: none;
margin: 0;
padding: 0;
}
.citedlist li {
padding: 11px 0;
border-bottom: 1px solid var(--line);
}
.muted {
color: var(--muted);
font-family: var(--sans);
font-size: 13px;
}
.commentlist li {
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.commentlist p {
margin: 6px 0 0;
color: var(--ink-2);
font-size: 15px;
}
.cmt-head {
font-family: var(--sans);
font-size: 14px;
display: flex;
gap: 10px;
align-items: baseline;
}
/* toast */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translate(-50%, 20px);
background: var(--ink);
color: #fff;
font-family: var(--sans);
font-size: 14px;
padding: 11px 18px;
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 60;
max-width: 90vw;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
/* ---- responsive ---- */
@media (max-width: 880px) {
.layout {
grid-template-columns: 1fr;
gap: 28px;
}
.rail {
position: static;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 24px;
}
.rail-id,
.rail-block {
border-bottom: none;
padding-bottom: 0;
}
}
@media (max-width: 640px) {
.topbar-inner {
padding: 10px 16px;
}
.topnav {
gap: 14px;
}
.layout {
padding: 20px 16px 60px;
}
.rail {
grid-template-columns: 1fr;
}
.downloads {
gap: 8px;
}
.dl-ghost {
margin-left: 0;
}
.abstract p {
font-size: 16px;
}
.eq-math {
font-size: 17px;
}
.equation {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.eq-num {
text-align: right;
margin-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2200);
}
/* ---------- download buttons ---------- */
document.querySelectorAll(".dl[data-fmt]").forEach(function (btn) {
btn.addEventListener("click", function () {
var fmt = btn.getAttribute("data-fmt");
toast("Preparing " + fmt + " — download would start now");
});
});
/* ---------- version dropdown ---------- */
var verBtn = document.getElementById("verBtn");
var verMenu = document.getElementById("verMenu");
var verCurrent = document.getElementById("verCurrent");
var revisedDate = document.getElementById("revisedDate");
var crumbId = document.getElementById("crumbId");
var verItems = Array.prototype.slice.call(verMenu.querySelectorAll("li"));
function openMenu() {
verMenu.hidden = false;
verBtn.setAttribute("aria-expanded", "true");
var sel = verMenu.querySelector('[aria-selected="true"]') || verItems[0];
focusItem(verItems.indexOf(sel));
}
function closeMenu(focusBtn) {
verMenu.hidden = true;
verBtn.setAttribute("aria-expanded", "false");
verItems.forEach(function (i) {
i.classList.remove("focus");
});
if (focusBtn) verBtn.focus();
}
function focusItem(idx) {
verItems.forEach(function (i) {
i.classList.remove("focus");
});
if (idx < 0) idx = verItems.length - 1;
if (idx >= verItems.length) idx = 0;
verItems[idx].classList.add("focus");
verItems[idx].focus();
}
function selectVersion(li) {
verItems.forEach(function (i) {
i.setAttribute("aria-selected", "false");
});
li.setAttribute("aria-selected", "true");
var ver = li.getAttribute("data-ver");
verCurrent.textContent = ver;
crumbId.textContent = "arXiv:2606.01234" + ver;
if (ver === "v1") {
revisedDate.textContent = "—";
} else {
revisedDate.textContent = li.getAttribute("data-date");
}
toast("Now viewing version " + ver);
closeMenu(true);
}
verBtn.addEventListener("click", function () {
if (verMenu.hidden) openMenu();
else closeMenu(true);
});
verBtn.addEventListener("keydown", function (e) {
if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
e.preventDefault();
openMenu();
}
});
verItems.forEach(function (li, idx) {
li.addEventListener("click", function () {
selectVersion(li);
});
li.addEventListener("keydown", function (e) {
if (e.key === "ArrowDown") {
e.preventDefault();
focusItem(idx + 1);
} else if (e.key === "ArrowUp") {
e.preventDefault();
focusItem(idx - 1);
} else if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
selectVersion(li);
} else if (e.key === "Escape") {
closeMenu(true);
}
});
});
document.addEventListener("click", function (e) {
if (!verMenu.hidden && !e.target.closest(".ver-control")) closeMenu(false);
});
/* ---------- cite toggle ---------- */
var citeBtn = document.getElementById("citeBtn");
var citePanel = document.getElementById("citePanel");
citeBtn.addEventListener("click", function () {
var open = citePanel.hidden;
citePanel.hidden = !open;
citeBtn.setAttribute("aria-expanded", String(open));
if (open) citePanel.scrollIntoView({ behavior: "smooth", block: "nearest" });
});
/* ---------- copy bibtex ---------- */
var copyBtn = document.getElementById("copyBib");
var copyLabel = document.getElementById("copyLabel");
var bibtex = document.getElementById("bibtex");
copyBtn.addEventListener("click", function () {
var text = bibtex.innerText;
var done = function () {
copyBtn.classList.add("done");
copyLabel.textContent = "Copied";
toast("BibTeX copied to clipboard");
setTimeout(function () {
copyBtn.classList.remove("done");
copyLabel.textContent = "Copy";
}, 1800);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(done).catch(fallback);
} else {
fallback();
}
function fallback() {
var ta = document.createElement("textarea");
ta.value = text;
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
try {
document.execCommand("copy");
done();
} catch (err) {
toast("Copy failed — select the text manually");
}
document.body.removeChild(ta);
}
});
/* ---------- tabs ---------- */
var tabs = Array.prototype.slice.call(document.querySelectorAll(".tab"));
var panels = {
"tab-refs": "panel-refs",
"tab-cited": "panel-cited",
"tab-comments": "panel-comments",
};
function activate(tab) {
tabs.forEach(function (t) {
var on = t === tab;
t.classList.toggle("is-active", on);
t.setAttribute("aria-selected", String(on));
t.tabIndex = on ? 0 : -1;
document.getElementById(panels[t.id]).hidden = !on;
});
}
tabs.forEach(function (tab, idx) {
tab.addEventListener("click", function () {
activate(tab);
});
tab.addEventListener("keydown", function (e) {
var next = null;
if (e.key === "ArrowRight") next = tabs[(idx + 1) % tabs.length];
else if (e.key === "ArrowLeft") next = tabs[(idx - 1 + tabs.length) % tabs.length];
if (next) {
e.preventDefault();
activate(next);
next.focus();
}
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>arXiv:2606.01234 — Spectral Drift in Sparse Mixtures of Experts</title>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="topbar">
<div class="topbar-inner">
<a class="brand" href="#" aria-label="arXiv home">
<span class="brand-x">ar</span><span class="brand-mark">X</span><span class="brand-x">iv</span>
</a>
<nav class="topnav" aria-label="Primary">
<a href="#">Browse</a>
<a href="#">Search</a>
<a href="#">Help</a>
<a href="#" class="topnav-cta">Submit</a>
</nav>
</div>
</header>
<div class="layout">
<!-- LEFT META RAIL -->
<aside class="rail" aria-label="Submission metadata">
<div class="rail-id">
<span class="rail-label">Identifier</span>
<code class="arxiv-id">arXiv:2606.01234</code>
<span class="doi">DOI <code>10.48550/arXiv.2606.01234</code></span>
</div>
<div class="rail-block">
<span class="rail-label">Subjects</span>
<div class="badges">
<span class="badge badge-primary">cs.LG</span>
<span class="badge">stat.ML</span>
<span class="badge">cs.CL</span>
</div>
<p class="rail-note">Machine Learning · Statistics</p>
</div>
<div class="rail-block">
<span class="rail-label" id="ver-label">Version</span>
<div class="ver-control">
<button
class="ver-btn"
id="verBtn"
aria-haspopup="listbox"
aria-expanded="false"
aria-labelledby="ver-label verBtn"
>
<span id="verCurrent">v2</span>
<svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true"><path d="M2 4l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<ul class="ver-menu" id="verMenu" role="listbox" aria-labelledby="ver-label" hidden>
<li role="option" data-ver="v2" data-date="20 May 2026" aria-selected="true" tabindex="-1">
<strong>v2</strong><span>20 May 2026 · current</span>
</li>
<li role="option" data-ver="v1" data-date="3 Apr 2026" aria-selected="false" tabindex="-1">
<strong>v1</strong><span>3 Apr 2026 · original</span>
</li>
</ul>
</div>
</div>
<div class="rail-block rail-dates">
<div>
<span class="rail-label">Submitted</span>
<time datetime="2026-04-03">3 Apr 2026</time>
</div>
<div>
<span class="rail-label">Last revised</span>
<time id="revisedDate" datetime="2026-05-20">20 May 2026</time>
</div>
</div>
<div class="rail-block">
<span class="rail-label">License</span>
<a class="license" href="#">CC BY 4.0</a>
<p class="rail-note">Creative Commons Attribution</p>
</div>
<div class="rail-block rail-metrics">
<div class="metric"><span class="metric-n">2,418</span><span class="metric-l">downloads</span></div>
<div class="metric"><span class="metric-n">31</span><span class="metric-l">citations</span></div>
</div>
</aside>
<!-- MAIN COLUMN -->
<main class="main" id="main">
<p class="crumb">
<a href="#">cs.LG</a> <span>›</span> <span id="crumbId">arXiv:2606.01234v2</span>
</p>
<h1 class="title">Spectral Drift in Sparse Mixtures of Experts: Routing Stability under Distribution Shift</h1>
<ul class="authors" aria-label="Authors">
<li><a href="#">Lena M. Andersson</a><sup>1</sup></li>
<li><a href="#">Rohan Devarajan</a><sup>1,2</sup></li>
<li><a href="#">Yuki Hoshino</a><sup>2</sup></li>
<li><a href="#">Priya N. Balakrishnan</a><sup>1</sup></li>
<li><a href="#">Tomás Errázuriz</a><sup>3</sup></li>
</ul>
<ol class="affils">
<li><sup>1</sup> Institute for Adaptive Computation, Vasterholm University</li>
<li><sup>2</sup> Hoshino Lab, Kanto Institute of Technology</li>
<li><sup>3</sup> Center for Statistical Learning, Universidad del Litoral</li>
</ol>
<!-- DOWNLOAD PANEL -->
<section class="downloads" aria-label="Download options">
<button class="dl dl-primary" data-fmt="PDF">
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path d="M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 13h12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
View PDF
</button>
<button class="dl" data-fmt="TeX source">TeX Source</button>
<button class="dl" data-fmt="HTML (experimental)">HTML (beta)</button>
<button class="dl" data-fmt="Other formats">Other Formats</button>
<button class="dl dl-ghost" id="citeBtn" aria-expanded="false" aria-controls="citePanel">
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path d="M5 4H3v3h2c0 1.5-.7 2.3-2 2.6M12 4h-2v3h2c0 1.5-.7 2.3-2 2.6" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
Cite
</button>
</section>
<!-- CITE / BIBTEX PANEL -->
<section class="cite-panel" id="citePanel" hidden aria-label="Citation">
<div class="cite-head">
<span class="cite-title">BibTeX citation</span>
<button class="copy-btn" id="copyBib" aria-label="Copy BibTeX to clipboard">
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><rect x="5" y="5" width="8" height="9" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M3 11V3a1 1 0 011-1h7" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>
<span id="copyLabel">Copy</span>
</button>
</div>
<pre class="bibtex" id="bibtex"><code>@misc{andersson2026spectral,
title = {Spectral Drift in Sparse Mixtures of Experts:
Routing Stability under Distribution Shift},
author = {Andersson, Lena M. and Devarajan, Rohan and
Hoshino, Yuki and Balakrishnan, Priya N. and
Errazuriz, Tomas},
year = {2026},
eprint = {2606.01234},
archivePrefix = {arXiv},
primaryClass = {cs.LG},
doi = {10.48550/arXiv.2606.01234}
}</code></pre>
</section>
<!-- ABSTRACT -->
<section class="abstract" aria-labelledby="abs-h">
<h2 id="abs-h" class="section-h">Abstract</h2>
<p>
Sparse mixtures of experts (MoE) scale model capacity by routing each token
to a small subset of specialized sub-networks. We show that under covariate
shift the learned gating distribution exhibits a measurable <em>spectral
drift</em>: the leading singular values of the router weight matrix migrate
toward a degenerate regime, collapsing effective expert diversity from
<span class="num">7.9</span> to <span class="num">2.3</span> active experts
per batch. We introduce <strong>SpecReg</strong>, a lightweight spectral
regularizer that penalizes singular-value concentration during fine-tuning.
Across three shifted benchmarks SpecReg recovers
<span class="num">+4.6</span> points of out-of-distribution accuracy at a
<span class="num">1.2%</span> compute overhead, with no degradation on the
in-distribution split.
</p>
</section>
<!-- DISPLAY EQUATION -->
<figure class="equation" aria-label="Spectral regularization objective">
<div class="eq-body">
<span class="eq-math">
<i>L</i><sub>SpecReg</sub> = <i>L</i><sub>task</sub> + <i>λ</i>
<span class="frac"><span class="frac-n">σ<sub>1</sub>(<b>W</b><sub>g</sub>)</span><span class="frac-d">∑<sub><i>i</i></sub> σ<sub><i>i</i></sub>(<b>W</b><sub>g</sub>)</span></span>
</span>
</div>
<span class="eq-num">(1)</span>
</figure>
<!-- FIGURE -->
<figure class="figure">
<div class="fig-frame">
<svg class="fig-svg" viewBox="0 0 460 220" role="img" aria-label="Line chart of effective experts vs distribution shift severity">
<line x1="48" y1="180" x2="440" y2="180" stroke="rgba(15,27,45,.2)" />
<line x1="48" y1="20" x2="48" y2="180" stroke="rgba(15,27,45,.2)" />
<g class="grid" stroke="rgba(15,27,45,.07)">
<line x1="48" y1="140" x2="440" y2="140" /><line x1="48" y1="100" x2="440" y2="100" /><line x1="48" y1="60" x2="440" y2="60" />
</g>
<polyline fill="none" stroke="#cf4538" stroke-width="2.2" points="48,42 146,62 244,98 342,140 440,168" />
<polyline fill="none" stroke="#1a4f8a" stroke-width="2.2" points="48,40 146,48 244,58 342,72 440,88" />
<g fill="#cf4538"><circle cx="48" cy="42" r="3"/><circle cx="146" cy="62" r="3"/><circle cx="244" cy="98" r="3"/><circle cx="342" cy="140" r="3"/><circle cx="440" cy="168" r="3"/></g>
<g fill="#1a4f8a"><circle cx="48" cy="40" r="3"/><circle cx="146" cy="48" r="3"/><circle cx="244" cy="58" r="3"/><circle cx="342" cy="72" r="3"/><circle cx="440" cy="88" r="3"/></g>
<text x="244" y="208" text-anchor="middle" class="ax-lbl">distribution shift severity (KL)</text>
<text x="44" y="26" text-anchor="end" class="ax-tick">8</text>
<text x="44" y="184" text-anchor="end" class="ax-tick">0</text>
</svg>
<div class="fig-legend">
<span><i class="dot" style="background:#1a4f8a"></i> SpecReg (ours)</span>
<span><i class="dot" style="background:#cf4538"></i> baseline MoE</span>
</div>
</div>
<figcaption><b>Figure 1.</b> Effective number of active experts per batch as covariate shift severity increases. The unregularized baseline (red) collapses toward two experts, whereas SpecReg (blue) preserves diversity across the shift range. Shaded region omitted for clarity.</figcaption>
</figure>
<!-- COMMENTS / META LINE -->
<p class="comments-line">
<span class="cl-label">Comments:</span>
18 pages, 6 figures, 4 tables. To appear in the Proceedings of the 2026
Conference on Adaptive Representations (CAR 2026).
</p>
<!-- TAB STRIP -->
<section class="tabs" aria-label="Article details">
<div class="tabstrip" role="tablist" aria-label="Detail sections">
<button class="tab is-active" role="tab" id="tab-refs" aria-controls="panel-refs" aria-selected="true">References (12)</button>
<button class="tab" role="tab" id="tab-cited" aria-controls="panel-cited" aria-selected="false" tabindex="-1">Cited by (31)</button>
<button class="tab" role="tab" id="tab-comments" aria-controls="panel-comments" aria-selected="false" tabindex="-1">Comments (4)</button>
</div>
<div class="tabpanel" id="panel-refs" role="tabpanel" aria-labelledby="tab-refs">
<ol class="reflist">
<li><span class="ref-au">Shazeer, N. et al.</span> Outrageously large neural networks: the sparsely-gated mixture-of-experts layer. <i>ICLR</i>, 2017. <a href="#">arXiv:1701.06538</a></li>
<li><span class="ref-au">Fedus, W., Zoph, B. & Shazeer, N.</span> Switch transformers: scaling to trillion parameter models. <i>JMLR</i> <b>23</b>(120):1–39, 2022.</li>
<li><span class="ref-au">Andersson, L. M. & Hoshino, Y.</span> Gating geometry of expert networks. <i>NeurIPS</i>, 2025. <a href="#">arXiv:2511.00821</a></li>
<li><span class="ref-au">Balakrishnan, P. N. et al.</span> Singular spectra of routing matrices. <i>TMLR</i>, 2026. DOI <code>10.1162/tmlr.4471</code></li>
<li><span class="ref-au">Devarajan, R.</span> On the collapse of sparse gates. <i>ICML Workshop</i>, 2025. <a href="#">arXiv:2507.13002</a></li>
</ol>
</div>
<div class="tabpanel" id="panel-cited" role="tabpanel" aria-labelledby="tab-cited" hidden>
<ul class="citedlist">
<li><a href="#">Robust routing for low-resource translation</a> <span class="muted">— Okonkwo & Lindqvist, 2026</span></li>
<li><a href="#">A spectral view of conditional computation</a> <span class="muted">— Errázuriz et al., 2026</span></li>
<li><a href="#">Expert pruning without retraining</a> <span class="muted">— Kohli, 2026</span></li>
</ul>
</div>
<div class="tabpanel" id="panel-comments" role="tabpanel" aria-labelledby="tab-comments" hidden>
<ul class="commentlist">
<li>
<div class="cmt-head"><strong>R. Devarajan</strong> <span class="muted">v2 changelog · 20 May 2026</span></div>
<p>Added Table 4 (ablation over λ) and corrected the normalization constant in Eq. (1). Results unchanged.</p>
</li>
<li>
<div class="cmt-head"><strong>anon. reviewer</strong> <span class="muted">open review · 11 May 2026</span></div>
<p>Would be useful to report wall-clock overhead on the 7B configuration, not just FLOPs.</p>
</li>
</ul>
</div>
</section>
</main>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Preprint / arXiv Article Page
An arXiv-style preprint landing page for a fictional machine-learning paper. A sticky left
metadata rail shows the submission identifier (arXiv:2606.01234), subject badges
(cs.LG, stat.ML, cs.CL), a version dropdown, submission and revision dates, the CC BY
license, and download/citation counters. The main column presents the title, an author list
with numbered affiliations, a prose abstract, a centered display equation with a right-aligned
equation number, and an SVG line chart with a proper “Figure 1.” caption.
The download panel offers PDF, TeX source, HTML, and other-format buttons, each firing a toast
to simulate the action. A Cite button expands a monospace BibTeX block with a one-click copy
button (Clipboard API with a document.execCommand fallback). A tab strip switches between
references, cited-by, and comments panels.
All interactions are vanilla JS. The version dropdown and tab strip are keyboard-navigable with
arrow keys, Enter, and Escape, expose the right ARIA roles and aria-selected state, and keep
visible focus. The layout collapses the rail into a grid above the article below 880px and
reflows to a single column at 360px.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.