body{margin:0;min-height:100vh;font-family:system-ui,sans-serif;color:#eee;line-height:1.6;
background:linear-gradient(135deg,#1a1040,#3b1a6e,#0f4c81,#0b6e6e,#1a1040);
background-size:400% 400%;animation:bg 25s ease infinite}
.w{max-width:680px;margin:0 auto;padding:6vh 1rem}
nav{margin-bottom:2.5rem;display:flex;flex-wrap:wrap;gap:.6rem}
nav a{color:#fff;text-decoration:none;padding:.3rem .8rem;border-radius:999px;
background:rgba(255,255,255,.12);transition:transform .2s,background .2s}
nav a:hover{background:rgba(255,255,255,.28);transform:translateY(-3px)}
main{animation:in .7s ease both}
h1{font-size:2.2rem;margin:.2em 0;animation:glow 3s ease-in-out infinite alternate}
a{color:#7fdcff}
ul{list-style:none;padding:0}
li{margin:.6rem 0;padding:.7rem 1rem;border-radius:10px;background:rgba(255,255,255,.1);
border-left:4px solid #7fdcff;transition:transform .2s,background .2s}
li:hover{transform:translateX(8px);background:rgba(255,255,255,.18)}
footer{margin-top:3rem;color:#bbb}
@keyframes bg{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes glow{from{text-shadow:0 0 4px #7fdcff55}to{text-shadow:0 0 18px #7fdcff}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}