/* ============================================================
   IO 动态特效插件 · 特效样式
   ① 全站背景漂浮特效（fixed 全屏层）
   ② 头像旋转光晕特效（模糊光晕 30s 旋转）
   SVG 已 base64 内联，插件无需任何素材文件。
   ============================================================ */

/* ---------- ① 全站背景漂浮特效 ---------- */
.io-bg-fx {
    position: fixed;
    left: 0; right: 0; top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}
.io-bg-fx span {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.io-bg-fx .shape-01 {
    top:11%; right:42%;
    width: 25.19px;
    height: 15.813px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjUuMTkiIGhlaWdodD0iMTUuODEzIiB2aWV3Qm94PSIwIDAgMjUuMTkgMTUuODEzIj4KICA8bWV0YWRhdGE+PD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/PjwvbWV0YWRhdGE+CjxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6IG5vbmU7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAycHg7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICAgIG9wYWNpdHk6IDAuNjY7CiAgICAgICAgc3Ryb2tlOiB1cmwoI2xpbmVhci1ncmFkaWVudCk7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjEzMDEuODgiIHkxPSIyNDAuMTEzIiB4Mj0iMTMyMi44OCIgeTI9IjI1MS4wNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSJOYU4iIHN0b3AtY29sb3I9IiNiOGZmZTYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSJJbmZpbml0eSIgc3RvcC1jb2xvcj0iIzAwY2I5ZiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHBhdGggaWQ9IlBhdGhfNSIgZGF0YS1uYW1lPSJQYXRoIDUiIGNsYXNzPSJjbHMtMSIgZD0iTTEzMjIuODgsMjUyLjE4MkwxMzEyLjUxLDIzOWwtMTAuNjIsMTIuODE2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEyOTkuNzggLTIzNy40MDYpIi8+Cjwvc3ZnPgo=");
    -webkit-animation: animationFramesTwo 13s linear infinite;
    animation: animationFramesTwo 13s linear infinite;
}

.io-bg-fx .shape-02 {
    top:27%; left:17%;
    width: 36px;
    height: 23px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzZweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMzYgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzICg3MjUyMCkgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+UmVjdGFuZ2xlIDM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZDQzlBIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjczNzgiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iTWFpbi1GaWxlcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC4zNDk5OTk5OTQiPgogICAgICAgIDxnIGlkPSIwMV9pbmRleC1BZ2VuY3kiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDAuMDAwMDAwLCAtMjUwLjAwMDAwMCkiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiPgogICAgICAgICAgICA8ZyBpZD0iQmFubmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjcuMDAwMDAwLCAzNS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJTaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIwMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNSwyMiBMNDkuNSwyMiBDNTAuMzI4NDI3MSwyMiA1MSwyMi42NzE1NzI5IDUxLDIzLjUgTDUxLDIzLjUgQzUxLDI0LjMyODQyNzEgNTAuMzI4NDI3MSwyNSA0OS41LDI1IEwxMi41LDI1IEMxMS42NzE1NzI5LDI1IDExLDI0LjMyODQyNzEgMTEsMjMuNSBMMTEsMjMuNSBDMTEsMjIuNjcxNTcyOSAxMS42NzE1NzI5LDIyIDEyLjUsMjIgWiIgaWQ9IlJlY3RhbmdsZS0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMS4wMDAwMDAsIDIzLjUwMDAwMCkgcm90YXRlKC0zMC4wMDAwMDApIHRyYW5zbGF0ZSgtMzEuMDAwMDAwLCAtMjMuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
    -webkit-animation: animationFramesFour 25s linear infinite alternate;
    animation: animationFramesFour 25s linear infinite alternate;
}

.io-bg-fx .shape-03 {
    top:30%; left:50%;
    width: 62px;
    height: 37px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjJweCIgaGVpZ2h0PSIzN3B4IiB2aWV3Qm94PSIwIDAgNjIgMzciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzICg3MjUyMCkgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+UmVjdGFuZ2xlIDM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZFNjk0IiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjg3MDAiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iTWFpbi1GaWxlcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC4yODczMzI1ODkiPgogICAgICAgIDxnIGlkPSIwMV9pbmRleC1BZ2VuY3kiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDIuMDAwMDAwLCAtNDk0LjAwMDAwMCkiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiPgogICAgICAgICAgICA8ZyBpZD0iQmFubmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjcuMDAwMDAwLCAzNS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJTaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIwMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc0Ni4wMDAwMDAsIDI3NC41MDAwMDApIHJvdGF0ZSgtMzAuMDAwMDAwKSB0cmFuc2xhdGUoLTc0Ni4wMDAwMDAsIC0yNzQuNTAwMDAwKSAiIHg9IjcxMSIgeT0iMjczIiB3aWR0aD0iNzAiIGhlaWdodD0iMyIgcng9IjEuNSI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");
    -webkit-animation: animationFramesThree 35s linear infinite alternate;
    animation: animationFramesThree 35s linear infinite alternate;
}

.io-bg-fx .shape-04 {
    top:40%; right:23%;
    width: 28px;
    height: 17px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIxN3B4IiB2aWV3Qm94PSIwIDAgMjggMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzICg3MjUyMCkgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+UmVjdGFuZ2xlIDM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZEN0VFIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwOUUiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iTWFpbi1GaWxlcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC41OTEyMzg4MzkiPgogICAgICAgIDxnIGlkPSIwMV9pbmRleC1BZ2VuY3kiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNjA4LjAwMDAwMCwgLTY0Ny4wMDAwMDApIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIj4KICAgICAgICAgICAgPGcgaWQ9IkJhbm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI3LjAwMDAwMCwgMzUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iU2hhcGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAyMDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDk1LjAwMDAwMCwgNDE3LjUwMDAwMCkgcm90YXRlKC0zMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTQ5NS4wMDAwMDAsIC00MTcuNTAwMDAwKSAiIHg9IjE0ODAiIHk9IjQxNiIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMiIHJ4PSIxLjUiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
    -webkit-animation: animationFramesFour 20s linear infinite alternate;
    animation: animationFramesFour 20s linear infinite alternate;
}

.io-bg-fx .shape-05 {
    bottom:62%; right:28%;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgICBvcGFjaXR5OiAwLjU7CiAgICAgICAgc3Ryb2tlOiB1cmwoI2xpbmVhci1ncmFkaWVudCk7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjYiIHkxPSIxIiB4Mj0iNiIgeTI9IjExIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iTmFOIiBzdG9wLWNvbG9yPSIjZmZkNzQ2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iSW5maW5pdHkiIHN0b3AtY29sb3I9IiNmNmFjOWEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxjaXJjbGUgaWQ9Ik92YWwiIGNsYXNzPSJjbHMtMSIgY3g9IjYiIGN5PSI2IiByPSI1Ii8+Cjwvc3ZnPgo=");
    -webkit-animation: animationFramesOne 15s linear infinite;
    animation: animationFramesOne 15s linear infinite;
}

.io-bg-fx .shape-06 {
    bottom:73%; left:38%;
    width: 36px;
    height: 23px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzZweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMzYgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzICg3MjUyMCkgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+UmVjdGFuZ2xlIDM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjQkRFQkZGIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMDk4RkYiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iTWFpbi1GaWxlcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC4yMzc0NDQxOTYiPgogICAgICAgIDxnIGlkPSIwMV9pbmRleC1BZ2VuY3kiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MjUuMDAwMDAwLCAtODYyLjAwMDAwMCkiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiPgogICAgICAgICAgICA8ZyBpZD0iQmFubmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjcuMDAwMDAwLCAzNS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJTaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIwMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUxNi4wMDAwMDAsIDYzNS41MDAwMDApIHJvdGF0ZSgtMzAuMDAwMDAwKSB0cmFuc2xhdGUoLTUxNi4wMDAwMDAsIC02MzUuNTAwMDAwKSAiIHg9IjQ5NiIgeT0iNjM0IiB3aWR0aD0iNDAiIGhlaWdodD0iMyIgcng9IjEuNSI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");
    -webkit-animation: animationFramesFour 20s linear infinite alternate;
    animation: animationFramesFour 20s linear infinite alternate;
}

.io-bg-fx .shape-07 {
    left:14%; bottom:54%;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgICBvcGFjaXR5OiAwLjY1OwogICAgICAgIHN0cm9rZTogdXJsKCNsaW5lYXItZ3JhZGllbnQpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSI2IiB5MT0iMSIgeDI9IjYiIHkyPSIxMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9Ik5hTiIgc3RvcC1jb2xvcj0iIzM3ZmY0MSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IkluZmluaXR5IiBzdG9wLWNvbG9yPSIjNzZlZmZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8Y2lyY2xlIGlkPSJPdmFsIiBjbGFzcz0iY2xzLTEiIGN4PSI2IiBjeT0iNiIgcj0iNSIvPgo8L3N2Zz4K");
    -webkit-animation: animationFramesOne 17s linear infinite;
    animation: animationFramesOne 17s linear infinite;
}

.io-bg-fx .shape-08 {
    left:14%; top:60%;
    width: 21px;
    height: 20px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjEgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzICg3MjUyMCkgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+UGF0aCA1PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTQ5Ljg5MTAwNzIlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMEU5MkIiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0NDRkZBOCIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJNYWluLUZpbGVzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIwLjY1ODU5Mzc1Ij4KICAgICAgICA8ZyBpZD0iMDFfaW5kZXgtQWdlbmN5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMzLjAwMDAwMCwgLTU2Mi4wMDAwMDApIiBzdHJva2U9InVybCgjbGluZWFyR3JhZGllbnQtMSkiIHN0cm9rZS13aWR0aD0iMiI+CiAgICAgICAgICAgIDxnIGlkPSJCYW5uZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyNy4wMDAwMDAsIDM1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjAzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjUwMDAwMCwgMzI5LjUwMDAwMCkgcm90YXRlKC0yMjguMDAwMDAwKSB0cmFuc2xhdGUoLTEyLjUwMDAwMCwgLTMyOS41MDAwMDApICIgcG9pbnRzPSIyIDMyMyAxMi41OTgzNjA3IDMzNiAyMyAzMjMiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
    -webkit-animation: animationFramesOne 20s linear infinite alternate;
    animation: animationFramesOne 20s linear infinite alternate;
}

.io-bg-fx .shape-09 {
    top:22%; left:41%;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTAgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzICg3MjUyMCkgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+T3ZhbDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzOEJFRkYiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E1RjBGRiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJNYWluLUZpbGVzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMDFfaW5kZXgtQWdlbmN5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzM5LjAwMDAwMCwgLTI0MS4wMDAwMDApIiBzdHJva2U9InVybCgjbGluZWFyR3JhZGllbnQtMSkiIHN0cm9rZS13aWR0aD0iMiI+CiAgICAgICAgICAgIDxnIGlkPSJCYW5uZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyNy4wMDAwMDAsIDM1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjAzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSI2MTciIGN5PSI4IiByPSI0Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
    -webkit-animation: animationFramesOne 15s linear infinite;
    animation: animationFramesOne 15s linear infinite;
}

.io-bg-fx .shape-10 {
    top:8%; right:6%;
    width: 170px;
    height: 207px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogd2lkdGg9IjE3MHB4IiBoZWlnaHQ9IjIwN3B4Ij4NCjxkZWZzPg0KPGxpbmVhckdyYWRpZW50IGlkPSJQU2dyYWRfMCIgeDE9Ijc0LjMxNCUiIHgyPSIwJSIgeTE9IjAlIiB5Mj0iNjYuOTEzJSI+DQogIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsMjM1LDIyMSkiIHN0b3Atb3BhY2l0eT0iMSIgLz4NCiAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LDI1MSwyNDQpIiBzdG9wLW9wYWNpdHk9IjEiIC8+DQo8L2xpbmVhckdyYWRpZW50Pg0KDQo8L2RlZnM+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiICBmaWxsPSJ1cmwoI1BTZ3JhZF8wKSINCiBkPSJNNTAuNDU2LDE5Ny4zMzMgTDEuMzA3LDEzLjkwNiBDLTEuNTU2LDMuMjIzIDQuNDcyLC0yLjE5NiAxNC43OTIsMS43ODIgTDE1OS41NzAsNTcuNjAzIEMxNjkuODkwLDYxLjU4MSAxNzIuNjE2LDcxLjc1MyAxNjUuNjY4LDgwLjM1OSBMNjguMTk2LDIwMS4wOTAgQzYxLjI0OCwyMDkuNjk1IDUzLjMxOCwyMDguMDE1IDUwLjQ1NiwxOTcuMzMzIFoiLz4NCjwvc3ZnPg==");
    -webkit-animation: animationFramesOne 15s linear infinite;
    animation: animationFramesOne 15s linear infinite;
}

.io-bg-fx .shape-11 {
    top:10%; right:8%;
    width: 193px;
    height: 235px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogd2lkdGg9IjE5M3B4IiBoZWlnaHQ9IjIzNXB4Ij4NCjxkZWZzPg0KPGxpbmVhckdyYWRpZW50IGlkPSJQU2dyYWRfMCIgeDE9IjY5Ljg1NyUiIHgyPSIwJSIgeTE9IjAlIiB5Mj0iNzEuNTU1JSI+DQogIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigxNDksMjQ0LDEwNSkiIHN0b3Atb3BhY2l0eT0iMSIgLz4NCiAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoMjEsMjA4LDExMCkiIHN0b3Atb3BhY2l0eT0iMSIgLz4NCjwvbGluZWFyR3JhZGllbnQ+DQoNCjwvZGVmcz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgIG9wYWNpdHk9IjAuMTA2IiBmaWxsPSJ1cmwoI1BTZ3JhZF8wKSINCiBkPSJNMTM1LjQ2MSw5LjY1NCBMMTkyLjE5MywyMjEuMzgwIEMxOTUuMDU1LDIzMi4wNjMgMTg5LjAyNywyMzcuNDgyIDE3OC43MDgsMjMzLjUwNCBMMTAuNzIyLDE2OC43MzYgQzAuNDAyLDE2NC43NTggLTIuMzIzLDE1NC41ODUgNC42MjQsMTQ1Ljk4MCBMMTE3LjcyMSw1Ljg5NyBDMTI0LjY2OCwtMi43MDggMTMyLjU5OCwtMS4wMjkgMTM1LjQ2MSw5LjY1NCBaIi8+DQo8L3N2Zz4=");
    -webkit-animation: animationFramesOne 12s linear infinite;
    animation: animationFramesOne 12s linear infinite;
}

@keyframes animationFramesOne {
    0%   { transform: translate(0) rotate(0deg); }
    20%  { transform: translate(73px,-1px) rotate(36deg); }
    40%  { transform: translate(141px,72px) rotate(72deg); }
    60%  { transform: translate(83px,122px) rotate(108deg); }
    80%  { transform: translate(-40px,72px) rotate(144deg); }
    to   { transform: translate(0) rotate(0deg); }
}
@-webkit-keyframes animationFramesOne {
    0%   { -webkit-transform: translate(0) rotate(0deg); }
    20%  { -webkit-transform: translate(73px,-1px) rotate(36deg); }
    40%  { -webkit-transform: translate(141px,72px) rotate(72deg); }
    60%  { -webkit-transform: translate(83px,122px) rotate(108deg); }
    80%  { -webkit-transform: translate(-40px,72px) rotate(144deg); }
    to   { -webkit-transform: translate(0) rotate(0deg); }
}
@keyframes animationFramesTwo {
    0%   { transform: translate(0) rotate(0deg) scale(1); }
    20%  { transform: translate(73px,-1px) rotate(36deg) scale(.9); }
    40%  { transform: translate(141px,72px) rotate(72deg) scale(1); }
    60%  { transform: translate(83px,122px) rotate(108deg) scale(1.2); }
    80%  { transform: translate(-40px,72px) rotate(144deg) scale(1.1); }
    to   { transform: translate(0) rotate(0deg) scale(1); }
}
@-webkit-keyframes animationFramesTwo {
    0%   { -webkit-transform: translate(0) rotate(0deg) scale(1); }
    20%  { -webkit-transform: translate(73px,-1px) rotate(36deg) scale(.9); }
    40%  { -webkit-transform: translate(141px,72px) rotate(72deg) scale(1); }
    60%  { -webkit-transform: translate(83px,122px) rotate(108deg) scale(1.2); }
    80%  { -webkit-transform: translate(-40px,72px) rotate(144deg) scale(1.1); }
    to   { -webkit-transform: translate(0) rotate(0deg) scale(1); }
}
@keyframes animationFramesThree {
    0% { transform: translate(165px,-179px); }
    to { transform: translate(-346px,617px); }
}
@-webkit-keyframes animationFramesThree {
    0% { -webkit-transform: translate(165px,-179px); }
    to { -webkit-transform: translate(-346px,617px); }
}
@keyframes animationFramesFour {
    0% { transform: translate(-300px,151px) rotate(0deg); }
    to { transform: translate(251px,-200px) rotate(180deg); }
}
@-webkit-keyframes animationFramesFour {
    0% { -webkit-transform: translate(-300px,151px) rotate(0deg); }
    to { -webkit-transform: translate(251px,-200px) rotate(180deg); }
}

/* ---------- ② 头像旋转光晕特效 ---------- */
.io-avatar-fx {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    line-height: 0;
}
.io-avatar-fx .io-avatar-blur {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(12px);
    opacity: .55;
    animation: io-avatar-rotate 30s linear infinite;
}
.io-avatar-fx img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    display: block;
}
@keyframes io-avatar-rotate {
    0% { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@-webkit-keyframes io-avatar-rotate {
    0% { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}