:root { color-scheme: dark; --bg:#080b0b; --panel:#111817; --line:#263532; --ink:#f4f7f5; --muted:#a9b7b2; --lime:#78ef68; --yellow:#ffd33c; --orange:#ff892c; --red:#ff5d57; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-width:320px; background:radial-gradient(circle at 74% -12%, #193a29 0, transparent 30rem), var(--bg); color:var(--ink); font:16px/1.7 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif; }
a { color:var(--lime); text-underline-offset:3px; }
.wrap { width:min(100% - 40px, 860px); margin:auto; }
header { padding:26px 0 20px; border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; gap:14px; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:1.1rem; }
.brand img { width:29px; height:29px; border-radius:8px; }
.mark { width:29px; height:29px; border-radius:50%; background:conic-gradient(from 220deg,var(--red),var(--orange),var(--yellow),var(--lime),var(--lime),transparent 0); position:relative; }
.mark:after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--bg); }
nav { display:flex; gap:18px; font-size:.92rem; }
nav a { color:var(--muted); text-decoration:none; }
nav a:hover, nav a[aria-current="page"] { color:var(--ink); }
main { padding:64px 0 76px; }
.eyebrow { margin:0 0 12px; color:var(--lime); font-size:.82rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
h1 { margin:0; max-width:14ch; font-size:clamp(2.5rem,8vw,4.7rem); line-height:1.06; letter-spacing:-.06em; }
h2 { margin:48px 0 12px; font-size:1.45rem; letter-spacing:-.025em; }
h3 { margin:24px 0 6px; font-size:1.05rem; }
p,li { color:var(--muted); }
.lead { max-width:46rem; margin:22px 0 0; font-size:1.2rem; }
.ring { width:168px; aspect-ratio:1; margin:45px 0 0; border-radius:50%; background:conic-gradient(from 225deg,var(--red),var(--orange),var(--yellow),var(--lime) 74%,#22312d 74%); padding:14px; box-shadow:0 0 48px #3ccd5555; }
.ring div { display:grid; width:100%; height:100%; place-items:center; border-radius:50%; background:#0d1110; color:var(--lime); font-size:3.1rem; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px; }
.card { min-height:150px; padding:22px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,#15201d,#0d1110); }
.card strong { display:block; margin-bottom:5px; color:var(--ink); }
.article { max-width:720px; }
.article h2 { padding-top:16px; border-top:1px solid var(--line); }
.notice { margin-top:28px; padding:18px 20px; border-left:3px solid var(--yellow); border-radius:0 12px 12px 0; background:#201b0d; color:#f9e9ac; }
footer { padding:25px 0 40px; border-top:1px solid var(--line); color:#81908a; font-size:.88rem; }
@media (max-width:600px) { .wrap { width:min(100% - 32px,860px); } header { padding-top:18px; } nav { gap:11px; font-size:.83rem; } main { padding:44px 0 58px; } .cards { grid-template-columns:1fr; } .ring { width:142px; } }