*{margin:0;padding:0;box-sizing:border-box}
body{height:100vh;overflow:hidden;font-family:"Microsoft YaHei",sans-serif;color:#fff;background:radial-gradient(circle at top,#243b55,#141e30 60%)}
.stars{position:absolute;width:100%;height:100%;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:40px 40px;opacity:.15;animation:move 30s linear infinite}
@keyframes move{from{transform:translateY(0)}to{transform:translateY(-300px)}}
header{position:absolute;top:60px;left:80px}
.logo{font-size:42px;font-weight:900;letter-spacing:8px;background:linear-gradient(90deg,#00f5ff,#fff,#ff00cc);-webkit-background-clip:text;color:transparent}
.subtitle{margin-top:15px;font-size:16px;letter-spacing:6px;opacity:.6}
main{height:100vh;display:flex;justify-content:center;align-items:center}
.quote-box{width:800px;padding:60px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(20px);border-radius:30px;box-shadow:0 30px 80px rgba(0,0,0,.5);text-align:center}
.quote-mark{font-size:100px;height:80px;color:#00f5ff}
.quote{font-size:34px;line-height:1.8;min-height:120px;transition:.5s}
.author{margin-top:30px;font-size:18px;color:#aaa}
.progress{height:3px;margin-top:40px;background:#555;overflow:hidden}
#bar{height:100%;width:0;background:linear-gradient(90deg,#00f5ff,#ff00cc);transition:6s linear}
footer{position:absolute;bottom:35px;width:100%;text-align:center;font-size:14px;color:#aaa;line-height:30px}
@media(max-width:768px){header{left:30px;top:30px}.quote-box{width:90%;padding:35px}.quote{font-size:22px}.logo{font-size:30px}}