* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
position: relative;
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: var(--background);
color: var(--foreground);
overflow-x: hidden;
transition: background 0.2s ease, color 0.2s ease;
}
.aurora-bg {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
background: var(--background);
transition: background 0.2s ease;
}
.aurora-blob {
position: absolute;
width: 65vmax;
height: 65vmax;
border-radius: 50%;
filter: blur(90px);
opacity: 0.6;
will-change: transform;
}
[data-theme='dark'] .aurora-blob {
opacity: 0.5;
mix-blend-mode: screen;
}
.aurora-blob.blob-1 {
top: -10%;
left: -8%;
background: radial-gradient(circle at 30% 30%, #c084fc, transparent 70%);
animation: auroraDrift1 20s ease-in-out infinite;
}
.aurora-blob.blob-2 {
top: -5%;
right: -12%;
background: radial-gradient(circle at 70% 40%, #60a5fa, transparent 70%);
animation: auroraDrift2 24s ease-in-out infinite;
}
.aurora-blob.blob-3 {
bottom: -18%;
left: 22%;
background: radial-gradient(circle at 50% 50%, #818cf8, transparent 70%);
animation: auroraDrift3 28s ease-in-out infinite;
}
@keyframes auroraDrift1 {
0% { transform: translate(0, 0) scale(1); }
25% { transform: translate(22%, -14%) scale(1.2); }
50% { transform: translate(34%, 22%) scale(0.9); }
75% { transform: translate(-14%, 26%) scale(1.15); }
100% { transform: translate(0, 0) scale(1); }
}
@keyframes auroraDrift2 {
0% { transform: translate(0, 0) scale(1); }
25% { transform: translate(-26%, 18%) scale(0.9); }
50% { transform: translate(-12%, -22%) scale(1.25); }
75% { transform: translate(20%, -8%) scale(1.05); }
100% { transform: translate(0, 0) scale(1); }
}
@keyframes auroraDrift3 {
0% { transform: translate(0, 0) scale(1); }
25% { transform: translate(18%, -20%) scale(1.1); }
50% { transform: translate(-22%, -10%) scale(1.3); }
75% { transform: translate(-10%, 18%) scale(0.95); }
100% { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.aurora-blob {
animation: none;
}
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
border: 0;
cursor: pointer;
}
/* ============================================================
嵌套模式 —— 本页被别的站点 iframe 嵌入时生效
.embedded 由 index.html 里的内联脚本加在 上
============================================================ */
.embedded .site-header,
.embedded .mobile-overlay {
display: none;
}
/* .site-header 是 position: fixed，正文靠 .demo-content 的顶部 padding
给它让位。导航栏藏起来后这段留白就成了一大块空白，收窄掉。 */
.embedded .demo-content {
padding-top: 2rem;
}