:root { --pink:#eb57a7; --cyan:#42c2de; --ink:#2a2233; --muted:#6b6470; --line:#f0e3ea; --soft:#fdeef6; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.65 -apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:#fff; }
a { color:var(--pink); }
nav { background:var(--ink); }
nav .wrap { max-width:860px; margin:0 auto; padding:12px 20px; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
nav .brand { color:#fff; font-weight:800; font-size:20px; text-decoration:none; margin-right:auto; display:flex; align-items:center; gap:8px; }
nav .brand::before { content:""; width:30px; height:30px; border-radius:8px; background:url(/logo.png) center/contain no-repeat; }
nav .brand span { color:#ff8cc8; }
nav a.l { color:#ddd; text-decoration:none; font-size:14px; }
nav a.l:hover { color:#ff8cc8; }
header { background:linear-gradient(135deg,var(--pink),var(--cyan)); color:#fff; padding:34px 20px; }
header .wrap { max-width:860px; margin:0 auto; }
header h1 { margin:0 0 6px; font-size:28px; }
header p { margin:0; opacity:.92; font-size:14px; }
main { max-width:860px; margin:0 auto; padding:28px 20px 60px; }
h2 { font-size:20px; margin:34px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
h2:first-of-type { border-top:0; padding-top:0; margin-top:10px; }
h3 { font-size:16px; margin:20px 0 6px; }
table { width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px; }
th,td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:var(--soft); font-weight:600; }
code { background:#f3f4f6; padding:1px 5px; border-radius:4px; font-size:13.5px; }
.note { background:var(--soft); border-left:4px solid var(--pink); padding:12px 16px; margin:18px 0; border-radius:0 8px 8px 0; }
.btn { display:inline-block; background:linear-gradient(135deg,var(--pink),var(--cyan)); color:#fff; padding:11px 22px; border-radius:26px; text-decoration:none; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:20px 0; }
.card { border:1px solid var(--line); border-radius:14px; padding:16px; }
.card h3 { margin-top:0; }
footer { border-top:1px solid var(--line); margin-top:40px; padding:18px 20px 30px; color:var(--muted); font-size:14px; text-align:center; }
footer a { margin:0 6px; }
/* Motion */
header { background:linear-gradient(135deg,var(--pink),#b46ee0,var(--cyan),var(--pink)); background-size:300% 300%; animation:grad 10s ease infinite; position:relative; overflow:hidden; }
header::after { content:"\2764  \2665  \2764"; position:absolute; right:6%; top:50%; transform:translateY(-50%); font-size:40px; letter-spacing:10px; color:rgba(255,255,255,.18); animation:float 5s ease-in-out infinite; }
header h1 { animation:up .7s cubic-bezier(.2,.7,.2,1) both; }
header p { animation:up .7s cubic-bezier(.2,.7,.2,1) .12s both; }
main > * { animation:up .6s ease both; }
main > *:nth-child(2) { animation-delay:.05s; } main > *:nth-child(3) { animation-delay:.1s; } main > *:nth-child(4) { animation-delay:.15s; }
nav .brand::before { animation:beat 2.4s ease-in-out infinite; }
nav a.l { position:relative; }
nav a.l::after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:#ff8cc8; transition:width .25s; }
nav a.l:hover::after { width:100%; }
.card { transition:transform .25s, box-shadow .25s; }
.card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(235,87,167,.15); }
.btn { transition:transform .2s; } .btn:hover { transform:translateY(-2px); }
@keyframes grad { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes float { 0%,100% { transform:translateY(-50%); } 50% { transform:translateY(-62%); } }
@keyframes up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes beat { 0%,40%,100% { transform:scale(1); } 10% { transform:scale(1.14); } 20% { transform:scale(.96); } 30% { transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }