:root{
  --ink:#08102b;--ink2:#111a45;--paper:#f4f7ff;--card:#fff;
  --line:#d9e2ff;--muted:#53617f;--blue:#377dff;--purple:#8b48ff;
  --pink:#ff4f88;--orange:#ff8a26;--green:#34d17b;--gold:#f6c84b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(135deg,#edf3ff,#f8f6ff 48%,#eef9ff);color:var(--ink);
font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.7}
.page{width:min(1120px,92%);margin:30px auto 60px;background:rgba(255,255,255,.92);
border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(20,34,85,.12)}
.hero{padding:54px 62px;background:linear-gradient(125deg,#091433,#1b225b 62%,#32206d);color:#fff;position:relative}
.hero:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-70px;top:-95px;
background:radial-gradient(circle,rgba(55,125,255,.28),transparent 67%)}
.kicker{font-size:.78rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#b9c8ff}
.hero h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.05;margin:.5rem 0 0}
.content{padding:48px 62px}
h2,h3,h4{line-height:1.2} h2{margin-top:2rem}
p,li{color:#263455} a{color:#226ee8;font-weight:700}
ul{padding-left:1.4rem}
.note{padding:18px 20px;border:1px solid var(--line);background:#f8faff;border-radius:16px}
.back{display:inline-flex;margin-top:24px;padding:11px 18px;border:1px solid #cad6ff;border-radius:999px;text-decoration:none}
.rank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:28px 0}
.rank-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 10px 28px rgba(25,44,100,.07)}
.rank-card strong{display:block;font-size:1.05rem;margin-top:8px}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:24px 0}
.point{border-radius:18px;padding:18px;background:linear-gradient(135deg,#f8faff,#f1f4ff);border:1px solid var(--line);font-weight:800}
.footer{text-align:center;color:#72809e;padding:22px 30px 34px}
@media(max-width:650px){.page{width:100%;margin:0;border-radius:0}.hero,.content{padding:34px 22px}.hero h1{font-size:2.35rem}}