:root{
  --bg:#f6f3f8; --bg2:#ffffff; --card:#ffffff; --surface:#ffffff; --line:#eadff0;
  --ink:#1a1420; --muted:#5c5266; --faint:#8a8094;
  --neon:#d81b60; --cyan:#00897b; --neon2:#c2185b;
  --glow:0 8px 24px rgba(216,27,96,.12);
  --radius:14px; --max:1100px;
  --font:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:var(--font);background:linear-gradient(180deg,#fff5f9 0%,var(--bg) 180px);color:var(--ink);line-height:1.8;overflow-wrap:anywhere;padding-bottom:110px}
a{color:var(--neon);text-decoration:none}a:hover{color:var(--cyan)}ul{list-style:none}
.shell{max-width:var(--max);margin:0 auto;padding:0 16px}
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.wordmark{font-weight:800;letter-spacing:.04em;color:var(--ink);font-size:1.15rem}
.wordmark span{color:var(--neon)}
.navx{display:flex;flex-wrap:wrap;gap:8px}
.navx a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.86rem;background:#fff}
.navx a.on,.navx a:hover{border-color:var(--neon);color:var(--neon);box-shadow:inset 0 -2px 0 var(--neon)}
.mnav{display:none;gap:8px;padding:8px 0 4px;overflow:auto}
.hero{margin:22px 0 18px;padding:28px 22px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--glow);border-top:3px solid var(--neon)}
.hero .kicker{color:var(--cyan);font-size:.85rem;letter-spacing:.08em}
.hero h1{font-size:1.85rem;margin:8px 0 10px;color:var(--ink)}
.hero p{color:var(--muted);max-width:52rem}
.hero .hint{display:inline-block;margin-top:12px;padding:4px 10px;border-radius:999px;border:1px dashed var(--neon);color:var(--neon);font-size:.82rem}
.stack{display:flex;flex-direction:column;gap:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.panel h2{font-size:1.05rem;margin-bottom:12px;color:var(--ink);border-left:3px solid var(--neon);padding-left:10px}
.rail a{display:block;padding:12px 12px 12px 14px;margin:0 0 8px;border-radius:10px;background:#fbf7fc;border:1px solid var(--line);border-left:3px solid transparent}
.rail a:hover{border-left-color:var(--cyan)}
.rail .t{color:var(--ink);font-weight:600}.rail .s{color:var(--faint);font-size:.82rem;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{padding:5px 10px;border-radius:8px;background:#fff0f5;border:1px solid #f3c6d8;color:var(--neon);font-size:.82rem}
.mini{display:block;padding:8px 0;color:var(--muted);border-bottom:1px dashed var(--line)}
.hub-hero{margin:18px 0;padding:20px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.hub-hero h1{font-size:1.5rem;margin:6px 0 8px}
.item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.item .n{width:28px;height:28px;border-radius:8px;background:#ffe4ef;color:var(--neon);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex:none}
.item a{color:var(--ink);font-weight:600}.item p{color:var(--faint);font-size:.86rem;margin-top:4px}
.article{padding:8px 0 24px}.article h1{font-size:1.55rem;line-height:1.35;margin:8px 0 12px;color:var(--ink)}
.meta{color:var(--faint);font-size:.82rem;margin-bottom:16px}.meta a{margin-right:8px}
.prose p{margin:0 0 1em;color:var(--ink);font-size:1.02rem}
.related{margin-top:28px}
.foot{margin-top:36px;padding:24px 0 40px;border-top:1px solid var(--line);color:var(--faint);font-size:.86rem}
.foot a{margin-right:12px}.foot .warn{margin-top:10px;color:var(--muted)}
.crumb{font-size:.82rem;color:var(--faint);margin-top:14px}.crumb a{color:var(--muted)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.toc a{font-size:.82rem;padding:4px 10px;background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
@media(max-width:860px){.navx{display:none}.mnav{display:flex}}