:root {
 --bg: #f5f3ff;
 --card: #ffffff;
 --text: #1e1b4b;
 --muted: #64748b;
 --brand: #8b5cf6;
 --brand-deep: #6d28d9;
 --accent: #fcd34d;
 --line: #ede9fe;
}
* { box-sizing: border-box; }
body {
 margin: 0;
 min-height: 100vh;
 padding: 48px 20px;
 color: var(--text);
 background: var(--bg);
 font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
 line-height: 1.75;
 overflow-x: hidden;
}
/* 背景漂浮光斑（固定定位，不产生滚动条） */
body::before,
body::after {
 content: "";
 position: fixed;
 z-index: -1;
 border-radius: 50%;
 filter: blur(70px);
 opacity: .55;
 pointer-events: none;
}
body::before {
 width: 46vmax; height: 46vmax;
 top: -12vmax; right: -10vmax;
 background: radial-gradient(circle, #ddd6fe, transparent 65%);
 animation: drift 18s ease-in-out infinite alternate;
}
body::after {
 width: 38vmax; height: 38vmax;
 bottom: -12vmax; left: -8vmax;
 background: radial-gradient(circle, #fef3c7, transparent 65%);
 animation: drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
 from { transform: translate(0, 0) scale(1); }
 to { transform: translate(-4vmax, 3vmax) scale(1.08); }
}
/* 入场动画：卡片先起，各节依次跟上 */
@keyframes rise {
 from { opacity: 0; transform: translateY(24px); }
 to { opacity: 1; transform: translateY(0); }
}
.card {
 width: min(720px, 100%);
 margin: 0 auto;
 padding: 44px;
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: 28px;
 box-shadow: 0 20px 60px rgba(139, 92, 246, .12);
 animation: rise .7s ease-out both;
}
section, footer { animation: rise .6s ease-out both; }
section:nth-of-type(1) { animation-delay: .1s; }
section:nth-of-type(2) { animation-delay: .2s; }
section:nth-of-type(3) { animation-delay: .3s; }
footer { animation-delay: .4s; }
.profile {
 position: relative;
 display: flex;
 gap: 20px;
 align-items: center;
 padding-bottom: 32px;
}
/* 渐变分隔线替代纯色边线 */
.profile::after {
 content: "";
 position: absolute;
 left: 0; right: 0; bottom: 0;
 height: 2px;
 border-radius: 1px;
 background: linear-gradient(90deg, var(--brand), var(--accent), transparent);
}
.avatar {
 position: relative;
 display: grid;
 place-items: center;
 width: 84px;
 height: 84px;
 flex: 0 0 84px;
 border-radius: 50%;
 color: #1e1b4b;
 background: var(--accent);
 font-size: 34px;
 font-weight: 800;
 box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--line);
}
/* 头像外圈缓慢旋转的虚线环 */
.avatar::after {
 content: "";
 position: absolute;
 inset: -10px;
 border-radius: 50%;
 border: 2px dashed rgba(139, 92, 246, .45);
 animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
h1 { margin: 4px 0 8px; font-size: 36px; line-height: 1.2; color: var(--text); }
/* 渐变标题文字（带兼容回退：不支持时保持纯色） */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
 h1 {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand) 45%, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
 }
}
h2 {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 32px;
 font-size: 20px;
}
/* 标题左侧渐变竖条 */
h2::before {
 content: "";
 width: 6px;
 height: 1.1em;
 border-radius: 3px;
 background: linear-gradient(180deg, var(--brand), var(--accent));
}
p { color: var(--muted); }
.tag {
 margin: 0;
 color: var(--brand);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: .5px;
}
.chips {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 padding: 0;
 list-style: none;
}
.chips li {
 padding: 10px 18px;
 background: var(--line);
 border-radius: 999px;
 transition: transform .2s, box-shadow .2s, background .2s;
}
.chips li:hover {
 transform: translateY(-3px);
 background: #ddd6fe;
 box-shadow: 0 6px 16px rgba(139, 92, 246, .18);
}
.goals { padding-left: 22px; }
.goals li {
 margin: 10px 0;
 transition: transform .2s;
}
.goals li::marker { color: var(--brand); font-weight: 800; }
.goals li:hover { transform: translateX(4px); }
footer { margin-top: 40px; }
.button {
 display: inline-block;
 padding: 12px 24px;
 color: #fff;
 background: linear-gradient(135deg, var(--brand), var(--brand-deep));
 border-radius: 14px;
 text-decoration: none;
 font-weight: 700;
 position: relative;
 overflow: hidden;
 box-shadow: 0 8px 20px rgba(139, 92, 246, .3);
 transition: transform .2s, box-shadow .2s;
}
/* 按钮扫光 */
.button::before {
 content: "";
 position: absolute;
 top: 0;
 left: -80%;
 width: 50%;
 height: 100%;
 background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
 transform: skewX(-20deg);
 transition: left .5s ease;
}
.button:hover {
 transform: translateY(-2px);
 box-shadow: 0 12px 26px rgba(139, 92, 246, .4);
}
.button:hover::before { left: 130%; }
.button:active { transform: translateY(0) scale(.98); }
.button:focus-visible {
 outline: 3px solid var(--accent);
 outline-offset: 3px;
}
/* 平板（601–1024px）：略收紧留白 */
@media (min-width: 601px) and (max-width: 1024px) {
 body { padding: 36px 16px; }
 .card { padding: 36px 32px; }
}
/* 手机（≤600px） */
@media (max-width: 600px) {
 body { padding: 20px 12px 40px; }
 .card {
  padding: 28px 22px;
  border-radius: 18px;
 }
 .profile {
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 24px;
 }
 .avatar {
  width: 62px;
  height: 62px;
  flex-basis: 62px;
  font-size: 26px;
 }
 h1 { font-size: 28px; }
 h2 {
  font-size: 18px;
  margin-top: 24px;
 }
 p, .goals li { font-size: 15px; }
 .tag { font-size: 12px; }
 .intro { font-size: 14px; }
 .goals { padding-left: 18px; }
 .goals li { margin: 7px 0; }
 footer { margin-top: 28px; }
 .button {
  display: block;
  text-align: center;
  padding: 14px 22px;
 }
 body::before, body::after { opacity: .4; }
}
/* 用户系统偏好减少动效时，关闭所有动画 */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
  animation: none !important;
  transition: none !important;
 }
}