* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: #eee7df; background: radial-gradient(circle at 62% 43%, #201044, #070711 29%, #020203 66%); font-family: "Microsoft YaHei UI", sans-serif; }
body::before { content: ""; position: fixed; inset: -30%; background: repeating-radial-gradient(circle at 55% 45%, transparent 0 58px, rgba(139,116,255,.08) 59px 60px); animation: spin 28s linear infinite; }
main { position: relative; width: min(860px, 88vw); padding: clamp(32px,6vw,80px); border: 1px solid rgba(188,175,255,.2); background: rgba(3,3,9,.62); backdrop-filter: blur(18px); }
p { color: #998eaa; font-size: 10px; letter-spacing: .42em; }
h1 { margin: 25px 0; font-family: Georgia,"Songti SC",serif; font-size: clamp(48px,8vw,104px); font-weight: 400; letter-spacing: .05em; }
span { display: block; max-width: 530px; color: #938c98; line-height: 2; letter-spacing: .12em; font-size: 12px; }
a { display: inline-block; margin-top: 45px; padding: 15px 0; border-bottom: 1px solid #c17855; color: #e8d8cc; text-decoration: none; font-size: 11px; letter-spacing: .3em; }
i { position: absolute; right: 9%; top: 50%; width: 110px; height: 110px; border: 1px solid rgba(255,146,82,.5); border-radius: 50%; box-shadow: 0 0 50px rgba(125,73,255,.25), inset 0 0 35px rgba(255,93,31,.15); transform: translateY(-50%); }
i::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #cfc0ff; font-style: normal; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 650px) { i { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }